Ajout composant d'empty state

klee-contrib · Jun 2, 2017 · f115221 · f115221
1 parent ab1cfc8
commit f115221
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 10 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "focus4",
-  "version": "6.4.0-rc",
+  "version": "6.4.0",
   "description": "Focus v4 (Typescript + MobX)",
   "main": "index.js",
   "repository": {

diff --git a/src/list/components/list.tsx b/src/list/components/list.tsx
@@ -30,8 +30,10 @@ export interface ListProps<T, P extends {data?: T}> extends ListBaseProps<T, P>
     DetailComponent?: React.ComponentClass<{data: T}> | React.SFC<{data: T}>;
     /** Hauteur du composant de détail. Par défaut : 200. */
     detailHeight?: number | ((data: T) => number);
-    /** Cache le bouton "Ajouter." */
-    hideAddItemHandler?: boolean;
+    /** Component à afficher lorsque la liste est vide. Par défaut () => <div>{i18n.t("focus.list.empty")}</div> */
+    EmptyComponent?: React.ComponentClass<{addItemHandler?: () => void}> | React.SFC<{addItemHandler?: () => void}>;
+    /** Cache le bouton "Ajouter" dans la mosaïque et le composant vide. */
+    hideAdditionalItems?: boolean;
     /** Composant de ligne. */
     LineComponent?: React.ComponentClass<P> | React.SFC<P>;
     /** Mode des listes dans le wrapper. Par défaut : celui du composant fourni, ou "list". */
@@ -145,7 +147,7 @@ export class ListWithoutStyle<T, P extends {data?: T}, AP> extends ListBase<T, L
     /** Affiche ou non l'ajout d'élément dans la liste (en mosaïque). */
     @computed
     private get isAddItemShown() {
-        return !!(!this.props.hideAddItemHandler && this.addItemHandler && this.mode === "mosaic");
+        return !!(!this.props.hideAdditionalItems && this.addItemHandler && this.mode === "mosaic");
     }
 
     /**
@@ -262,8 +264,12 @@ export class ListWithoutStyle<T, P extends {data?: T}, AP> extends ListBase<T, L
     }
 
     render() {
-        const {theme} = this.props;
-        return (
+        const {EmptyComponent, hideAdditionalItems, i18nPrefix = "focus", theme} = this.props;
+        return !hideAdditionalItems && !this.displayedData.length && EmptyComponent ?
+            <EmptyComponent addItemHandler={this.addItemHandler} />
+        : !hideAdditionalItems && !this.displayedData.length ?
+            <div>{i18n.t(`${i18nPrefix}.list.empty`)}</div>
+        : (
             <div>
                 <TransitionMotion
                     willEnter={() => ({height: 0})}

diff --git a/src/search/components/advanced-search.tsx b/src/search/components/advanced-search.tsx
@@ -24,6 +24,8 @@ export interface AdvancedSearchProps {
     canRemoveSort?: boolean;
     DetailComponent?: React.ComponentClass<any> | React.SFC<any>;
     detailHeight?: number | ((data: {}) => number);
+    /** Component à afficher lorsque la liste est vide. Par défaut () => <div>{i18n.t("focus.list.empty")}</div> */
+    EmptyComponent?: React.ComponentClass<{addItemHandler?: () => void}> | React.SFC<{addItemHandler?: () => void}>;
     /** Par défaut : "left" */
     facetBoxPosition?: "action-bar" | "left" | "none";
     groupOperationLists?: {[scope: string]: GroupOperationListItem<{}>[]};
@@ -127,12 +129,13 @@ export class AdvancedSearch extends React.Component<AdvancedSearchProps, void> {
     }
 
     protected renderResults() {
-        const {theme, groupOperationLists, hasSelection, i18nPrefix, lineComponentMapper, lineProps, lineOperationLists, mosaicComponentMapper, scopeFacetKey, store, DetailComponent, detailHeight, canOpenDetail} = this.props;
+        const {theme, groupOperationLists, hasSelection, i18nPrefix, lineComponentMapper, lineProps, lineOperationLists, mosaicComponentMapper, scopeFacetKey, store, EmptyComponent, DetailComponent, detailHeight, canOpenDetail} = this.props;
         return (
             <Results
                 canOpenDetail={canOpenDetail}
                 detailHeight={detailHeight}
                 DetailComponent={DetailComponent}
+                EmptyComponent={EmptyComponent}
                 theme={{mosaicAdd: theme && theme.mosaicAdd}}
                 groupOperationLists={groupOperationLists}
                 hasSelection={!!hasSelection}

diff --git a/src/search/components/results/group.tsx b/src/search/components/results/group.tsx
@@ -20,6 +20,8 @@ export interface Props {
     canOpenDetail?: (data?: {}) => boolean;
     DetailComponent?: React.ComponentClass<any> | React.SFC<any>;
     detailHeight?: number | ((data: {}) => number);
+    /** Component à afficher lorsque la liste est vide. Par défaut () => <div>{i18n.t("focus.list.empty")}</div> */
+    EmptyComponent?: React.ComponentClass<{addItemHandler?: () => void}> | React.SFC<{addItemHandler?: () => void}>;
     group: GroupResult<{}>;
     groupOperationList?: GroupOperationListItem<{}>[];
     hasSelection?: boolean;
@@ -47,7 +49,7 @@ export class Group extends React.Component<Props, void> {
     }
 
     private renderList() {
-        const {theme, group, hasSelection, i18nPrefix = "focus", perPage, LineComponent, lineProps, lineOperationList, MosaicComponent, showAllHandler, store, DetailComponent, detailHeight, canOpenDetail} = this.props;
+        const {theme, group, hasSelection, i18nPrefix = "focus", perPage, LineComponent, lineProps, lineOperationList, MosaicComponent, showAllHandler, store, EmptyComponent, DetailComponent, detailHeight, canOpenDetail} = this.props;
         const List = StoreList as new () => StoreList<any, any>;
         return (
             <div>
@@ -57,8 +59,9 @@ export class Group extends React.Component<Props, void> {
                     data={group.list}
                     detailHeight={detailHeight}
                     DetailComponent={DetailComponent}
+                    EmptyComponent={EmptyComponent}
                     hasSelection={hasSelection}
-                    hideAddItemHandler={!!group.code}
+                    hideAdditionalItems={!!group.code}
                     i18nPrefix={i18nPrefix}
                     isManualFetch={!!group.code}
                     LineComponent={LineComponent}

diff --git a/src/search/components/results/index.tsx b/src/search/components/results/index.tsx
@@ -15,6 +15,8 @@ export interface ResultsProps {
     canOpenDetail?: (data?: {}) => boolean;
     DetailComponent?: React.ComponentClass<any> | React.SFC<any>;
     detailHeight?: number | ((data: {}) => number);
+    /** Component à afficher lorsque la liste est vide. Par défaut () => <div>{i18n.t("focus.list.empty")}</div> */
+    EmptyComponent?: React.ComponentClass<{addItemHandler?: () => void}> | React.SFC<{addItemHandler?: () => void}>;
     groupOperationLists?: {[scope: string]: GroupOperationListItem<{}>[]};
     /** Par défaut: 5 */
     groupPageSize?: number;
@@ -66,7 +68,7 @@ export class Results extends React.Component<ResultsProps, void> {
     }
 
     private renderSingleGroup(group: GroupResult<{}>) {
-        const {theme, groupOperationLists = {}, groupPageSize = 5, hasSelection, i18nPrefix, lineComponentMapper, mosaicComponentMapper, lineProps, lineOperationLists = {}, store, DetailComponent, detailHeight, canOpenDetail} = this.props;
+        const {theme, groupOperationLists = {}, groupPageSize = 5, hasSelection, i18nPrefix, lineComponentMapper, mosaicComponentMapper, lineProps, lineOperationLists = {}, store, EmptyComponent, DetailComponent, detailHeight, canOpenDetail} = this.props;
         const groupKey = store.scope === "ALL" && group.code ? group.code : store.scope;
         return (
             <Group
@@ -79,6 +81,7 @@ export class Results extends React.Component<ResultsProps, void> {
                 i18nPrefix={i18nPrefix}
                 DetailComponent={DetailComponent}
                 detailHeight={detailHeight}
+                EmptyComponent={EmptyComponent}
                 LineComponent={lineComponentMapper && lineComponentMapper(groupKey)}
                 MosaicComponent={mosaicComponentMapper && mosaicComponentMapper(groupKey)}
                 lineProps={lineProps}

diff --git a/src/translation/fr.ts b/src/translation/fr.ts
@@ -13,6 +13,7 @@ export const fr = {
     },
     list: {
         add: "Ajouter",
+        empty: "Aucun élément",
         mode: {
             list: "Liste",
             mosaic: "Mosaïque"