@hipay/hipay-material-ui 1.0.0-beta.9 → 2.0.0-beta.36

package/es/HiSelect/index.js

@@ -1,11 +1,5 @@
 export { default } from './HiSelect';
-import _HiSelect from './HiSelect';
-export { _HiSelect as HiSelect };
-import _HiSelectField from './HiSelectField';
-export { _HiSelectField as HiSelectField };
-import _SelectInput from './SelectInput';
-export { _SelectInput as SelectInput };
-import _HiSuggestSelect from './HiSuggestSelect';
-export { _HiSuggestSelect as HiSuggestSelect };
-import _HiSuggestSelectField from './HiSuggestSelectField';
-export { _HiSuggestSelectField as HiSuggestSelectField };
+export { default as HiSelectField } from './HiSelectField';
+export { default as SelectInput } from './SelectInput';
+export { default as HiSuggestSelect } from './HiSuggestSelect';
+export { default as HiSuggestSelectField } from './HiSuggestSelectField';

package/es/HiSelectNew/HiDynamicSelect.js

@@ -0,0 +1,203 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectSpread from "@babel/runtime/helpers/objectSpread";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+// @inheritedComponent HiSelect
+import React from 'react';
+import PropTypes from 'prop-types';
+import HiSelect from './HiSelect';
+/**
+ * HiDynamicSelect hérite du composant HiSelect
+ *
+ * Sa fonction buildSelectProps construit la liste des options
+ * selon l'état du chargement des options.
+ * La valeur de l'input n'est pas définie et hérite donc du comportement de HiSelect.
+ * La prop nextPage définit le comportement pour la demande de nouvelle donnée:
+ * - none: aucune nouvelles données
+ * - auto: (ex infinity scroll) nouvelle demande lorsqu'on atteint le bas de scroll vertical
+ * - manual: ajoute un bouton en bas de la liste.
+ */
+
+class HiDynamicSelect extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.handleScrollReachBottom = () => {
+      if (!this.props.loading && this.props.nextPage === 'auto' && this.props.onNextPage) {
+        this.props.onNextPage();
+      }
+    };
+
+    this.handleSelect = (event, item) => {
+      const {
+        multiple,
+        onChange,
+        value
+      } = this.props;
+
+      if (item.id === '_next_page' && !this.props.loading && this.props.nextPage === 'manual' && this.props.onNextPage) {
+        this.props.onNextPage();
+      }
+
+      if (!multiple) {
+        // single value
+        onChange(event, item.id, item);
+      } else if (value.includes(item.id)) {
+        // unselect item
+        onChange(event, value.filter(id => id !== item.id), item);
+      } else {
+        onChange(event, [...value, item.id], item);
+      }
+    };
+
+    this.buildSelectProps = (options, value = [], search = '', loading = false) => {
+      const {
+        nextPage,
+        translations
+      } = this.props;
+      const itemList = [// Empty and not loading => no result
+      ...(options.length === 0 && !loading ? [{
+        id: '_no_result',
+        type: 'text',
+        disabled: true,
+        centered: true,
+        hideCheckbox: true,
+        label: translations.no_result_match
+      }] : []), // options
+      ...options, // Not loading and nextPage as manual button => manual button
+      ...(!loading && nextPage === 'manual' ? [{
+        id: '_next_page',
+        type: 'button',
+        centered: true,
+        hideCheckbox: true,
+        label: translations.next_page
+      }] : []), // Loading => loader
+      ...(loading ? [{
+        id: '_loading',
+        type: 'loader',
+        disabled: true,
+        centered: true,
+        hideCheckbox: true,
+        label: 'loading'
+      }] : [])];
+      return {
+        itemList
+      };
+    };
+
+    this.handleScrollReachBottom = this.handleScrollReachBottom.bind(this);
+    this.handleSelect = this.handleSelect.bind(this);
+  }
+
+  render() {
+    const _this$props = this.props,
+          {
+      hiSelectableListProps,
+      multiple,
+      nextPage,
+      options,
+      translations,
+      value
+    } = _this$props,
+          other = _objectWithoutProperties(_this$props, ["hiSelectableListProps", "multiple", "nextPage", "options", "translations", "value"]);
+
+    return React.createElement(HiSelect, _extends({
+      buildSelectProps: this.buildSelectProps,
+      hiSelectableListProps: _objectSpread({
+        onSelect: this.handleSelect
+      }, hiSelectableListProps),
+      multiple: multiple,
+      options: options,
+      searchable: true,
+      translations: translations,
+      value: value
+    }, nextPage === 'auto' && {
+      onScrollReachBottom: this.handleScrollReachBottom
+    }, other));
+  }
+
+}
+
+HiDynamicSelect.defaultProps = {
+  loading: false,
+  multiple: false,
+  nextPage: 'none',
+  translations: {
+    no_result_match: 'No result match',
+    search: 'Search',
+    n_items_selected: '%s items selected',
+    one_item_selected: '%s item selected',
+    n_children: '%s items',
+    one_child: '%s item',
+    next_page: 'Load more'
+  }
+};
+HiDynamicSelect.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object,
+
+  /**
+   * id du select
+   */
+  id: PropTypes.string,
+
+  /**
+   * Ajoute un loader
+   */
+  loading: PropTypes.bool,
+
+  /**
+   * Autorise la sélection de plusieurs valeurs
+   */
+  multiple: PropTypes.bool,
+
+  /**
+   * Nom du champ de formulaire
+   */
+  name: PropTypes.string.isRequired,
+
+  /**
+   * Variante sur la manière de demander des nouvelles données
+   * - none: (default) il n'y a pas de nouvelles données
+   * - auto: demande de nouvelles données lorsqu'on atteint le bas du scroll (infinite scroll)
+   * - manual: ajoute un bouton en bas de la liste d'options
+   */
+  nextPage: PropTypes.oneOf(['none', 'auto', 'manual']),
+
+  /**
+   * Fonction de callback qui renvoit la valeur sélectionnée
+   */
+  onChange: PropTypes.func.isRequired,
+
+  /**
+   * Requête de nouvelles données
+   */
+  onNextPage: PropTypes.func.isRequired,
+
+  /**
+   * Fonction de callback qui renvoit la valeur de l'input de recherche
+   */
+  onSearch: PropTypes.func.isRequired,
+
+  /**
+   * Listes des options du select
+   */
+  options: PropTypes.array.isRequired,
+
+  /**
+   * Valeur de l'input de recherche
+   */
+  searchValue: PropTypes.string.isRequired,
+
+  /**
+   * Traductions (par défaut en anglais)
+   */
+  translations: PropTypes.object,
+
+  /**
+   * Value(s) du select
+   */
+  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.array])
+} : {};
+export default HiDynamicSelect;

package/es/HiSelectNew/HiNestedSelect.js

@@ -0,0 +1,401 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _objectSpread from "@babel/runtime/helpers/objectSpread";
+// @inheritedComponent HiSelect
+import React from 'react';
+import PropTypes from 'prop-types';
+import HiSelect from './HiSelect';
+import HiIcon from '../HiIcon';
+/**
+ * Return array of final item id in nested list (via props chlidren)
+ * @param itemList
+ * @param finalItemIdList
+ * @returns {*[]}
+ */
+
+function getRecursiveFinalItemIdList(itemList, finalItemIdList = []) {
+  return [...finalItemIdList, ...itemList.reduce((memo, item) => {
+    if (item.children) {
+      return getRecursiveFinalItemIdList(item.children, memo);
+    }
+
+    return [...memo, item.id];
+  }, [])];
+}
+/**
+ * Find item by id in nested list (via props children)
+ * @param itemList
+ * @param searchId
+ * @returns {boolean}
+ */
+
+
+function findFinalItemRecursively(itemList, searchId) {
+  let foundItem = false;
+  itemList.some(item => {
+    if (item.id === searchId) {
+      foundItem = item;
+    } else if (item.children && !foundItem) {
+      foundItem = findFinalItemRecursively(item.children, searchId);
+    }
+
+    return foundItem !== false;
+  });
+  return foundItem;
+}
+/**
+ * Build item list by settings item props relative to the nested parent/child situation
+ * Reduce the item list to build specified items (displayed, pinned, disabled, selected, indeterminate)
+ * Parent item is selected if each children item is include in selectedItemIdList (s stay to true)
+ * Parent item is indeterminate if it is not selected & not unselected (s goes false & u goes false)
+ *
+ * @param itemList - initial list of item
+ * @param selectedItemIdList - global list of selected id
+ * @param searchValue - search value on which filter item
+ * @param visibleParent - visibility of the list parent item (default false)
+ * @param pinnedParent - parent will be displayed as pinned items
+ * @param disabledParent - parent will not be selectable
+ * @returns {*}
+ */
+
+
+function buildFilteredItemList(itemList, selectedItemIdList = [], searchValue = '', visibleParent = false, pinnedParent = false, disabledParent = false) {
+  return itemList.reduce(({
+    l: memoItemList,
+    s: memoSelected,
+    u: memoUnselected,
+    v: memoVisible
+  }, item) => {
+    const itemVisible = searchValue === '' || item.label.toString().toLowerCase().search(searchValue.toLowerCase()) !== -1; // Parent item
+
+    if (item.children) {
+      const {
+        l: customizedChildren,
+        s: selected,
+        u: unselected,
+        v: visible
+      } = buildFilteredItemList(item.children, selectedItemIdList, searchValue, itemVisible, pinnedParent, disabledParent);
+      return {
+        l: [...memoItemList, _objectSpread({}, item, disabledParent && {
+          disabled: true,
+          hideCheckbox: true // don't display checkbox on disabled parent
+
+        }, {
+          pinned: pinnedParent,
+          children: customizedChildren,
+          selected,
+          indeterminate: !selected && !unselected,
+          displayed: itemVisible || visible
+        })],
+        s: memoSelected && selected,
+        u: memoUnselected && unselected,
+        v: memoVisible || itemVisible || visible
+      };
+    }
+
+    const itemSelected = selectedItemIdList.includes(item.id);
+    return {
+      l: [...memoItemList, _objectSpread({
+        displayed: itemVisible || visibleParent
+      }, item)],
+      s: itemSelected && memoSelected,
+      u: !itemSelected && memoUnselected,
+      v: itemVisible || visibleParent || memoVisible
+    };
+  }, {
+    l: [],
+    s: true,
+    u: true,
+    v: visibleParent
+  });
+}
+/**
+ * HiNestedSelect hérite du composant HiSelect
+ *
+ * Sa fonction buildSelectProps construit la liste des options selon le comportement d'un object nested
+ * (association parent/child via la prop children). Le composant accepte des props spécifique à cet utilisation,
+ * comme disableParent ou pinnedParent. Uniquement les ids des enfants finaux (n'ayant pas d'enfants) sont considérés.
+ * Comportement:
+ * - si un parent est sélectionné, on ajoute tous ses enfants dans la liste des éléments sélectionné (mais pas le parent)
+ * - si tous les enfants sont sélectionnés, le parent est affiché "selected".
+ * - si une partie des enfants sont sélectionné, le parent est affiché "indeterminate".
+ * - si aucun enfant n'est sélectionné, le parent est affiché "unselected".
+ */
+
+
+class HiNestedSelect extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.handleSelect = (event, item) => {
+      const {
+        hasAll,
+        multiple,
+        onChange,
+        options,
+        value
+      } = this.props;
+
+      if (!multiple) {
+        // single value
+        onChange(event, item.id, item);
+      } else if (hasAll && item.id === '_all') {
+        // ALL
+        const selectableItemIdList = getRecursiveFinalItemIdList(options);
+
+        if (value.length === selectableItemIdList.length) {
+          // unselect _all options
+          onChange(event, [], item);
+        } else {
+          // select _all options
+          onChange(event, selectableItemIdList, item);
+        }
+      } else if (item.children) {
+        // PARENT
+        const parentSelectableItemIdList = getRecursiveFinalItemIdList(item.children); // deselect parent if every selectable child id is includes in value.
+
+        if (parentSelectableItemIdList.every(pid => value.includes(pid))) {
+          onChange(event, value.filter(vid => !parentSelectableItemIdList.includes(vid)), item);
+        } else {
+          // select parent > add each selectable child without duplicates.
+          onChange(event, [...value.filter(vid => !parentSelectableItemIdList.includes(vid)), ...parentSelectableItemIdList], item);
+        }
+      } else if (value.includes(item.id)) {
+        // unselect item
+        onChange(event, value.filter(id => id !== item.id), item);
+      } else {
+        onChange(event, [...value, item.id], item);
+      }
+    };
+
+    this.buildSelectProps = (options, value = [], search = '', loading = false) => {
+      const {
+        classes,
+        disabledParent,
+        hasAll,
+        iconAll,
+        multiple,
+        pinnedParent,
+        translations
+      } = this.props; // build item list
+
+      const {
+        l: filteredItemList,
+        s: allSelected,
+        u: allUnselected,
+        v: visible
+      } = buildFilteredItemList(options, value, search, false, pinnedParent, disabledParent || !multiple);
+      const itemList = !visible ? [...(loading ? [{
+        id: '_loading',
+        type: 'loader',
+        disabled: true,
+        centered: true,
+        hideCheckbox: true,
+        label: 'loading'
+      }] : [{
+        id: '_no_result',
+        type: 'text',
+        disabled: true,
+        centered: true,
+        hideCheckbox: true,
+        label: translations.no_result_match
+      }])] : [...(loading ? [{
+        id: '_loading',
+        type: 'loader',
+        disabled: true,
+        centered: true,
+        hideCheckbox: true,
+        label: 'loading'
+      }] : []), ...(hasAll ? [{
+        id: '_all',
+        iconAll,
+        label: translations.all,
+        selected: allSelected,
+        indeterminate: !allSelected && !allUnselected,
+        displayed: search === ''
+      }] : []), ...filteredItemList]; // build input value
+
+      let inputValue = '';
+
+      if (allSelected) {
+        inputValue = translations.all;
+      } else if (value.length > 1) {
+        inputValue = translations.n_items_selected.replace('%s', value.length);
+      } else if (value.length === 1) {
+        const selectedItem = findFinalItemRecursively(options, value[0]);
+
+        if (selectedItem === false) {
+          inputValue = translations.one_item_selected;
+        } else if (selectedItem.type === 'icon') {
+          inputValue = React.createElement("span", {
+            className: classes.selectIconLabel
+          }, React.createElement(HiIcon, {
+            className: classes.labelIcon,
+            icon: selectedItem.icon
+          }), selectedItem.label);
+        } else if (selectedItem.type === 'image') {
+          inputValue = React.createElement("span", {
+            className: classes.selectIconLabel
+          }, React.createElement("img", {
+            className: classes.labelIcon,
+            src: selectedItem.img,
+            alt: selectedItem.label
+          }), selectedItem.label);
+        } else {
+          inputValue = selectedItem.label;
+        }
+      }
+
+      return {
+        itemList,
+        inputValue
+      };
+    };
+
+    this.handleSelect = this.handleSelect.bind(this);
+  }
+  /**
+   * Call onChange with the updated value
+   *
+   * - handle single value
+   * - handle multiple value
+   * - handle '_all' id
+   *
+   * @param event
+   * @param item
+   */
+
+
+  render() {
+    const _this$props = this.props,
+          {
+      hasAll,
+      hiSelectableListProps,
+      multiple,
+      options,
+      searchable,
+      translations,
+      value
+    } = _this$props,
+          other = _objectWithoutProperties(_this$props, ["hasAll", "hiSelectableListProps", "multiple", "options", "searchable", "translations", "value"]);
+
+    if (multiple) {
+      if (!Array.isArray(value)) {
+        throw new Error('HiPay Material-UI: the `value` property must be an array ' + 'when using the `HiSelect` component with `multiple`.');
+      }
+    }
+
+    return React.createElement(HiSelect, _extends({
+      buildSelectProps: this.buildSelectProps,
+      hasAll: hasAll,
+      hiSelectableListProps: _objectSpread({
+        onSelect: this.handleSelect
+      }, hiSelectableListProps),
+      multiple: multiple,
+      options: options,
+      searchable: searchable,
+      translations: translations,
+      value: value
+    }, other));
+  }
+
+}
+
+HiNestedSelect.defaultProps = {
+  disabledParent: false,
+  displayAsChip: false,
+  hasAll: false,
+  multiple: false,
+  pinnedParent: false,
+  searchable: false,
+  translations: {
+    all: 'All',
+    no_result_match: 'No result match',
+    search: 'Search',
+    n_items_selected: '%s items selected',
+    one_item_selected: '%s item selected',
+    n_children: '%s items',
+    one_child: '%s item'
+  }
+};
+HiNestedSelect.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object,
+
+  /**
+   * Parent items are not selectable
+   */
+  disabledParent: PropTypes.bool,
+
+  /**
+   * Option permettant d'afficher les sélection sous forme de Chip.
+   */
+  displayAsChip: PropTypes.bool,
+
+  /**
+   * Affiche l'élément 'All'
+   */
+  hasAll: PropTypes.bool,
+
+  /**
+   * id du select
+   */
+  id: PropTypes.string,
+
+  /**
+   * Ajoute un loader
+   */
+  loading: PropTypes.bool,
+
+  /**
+   * Autorise la sélection de plusieurs valeurs
+   */
+  multiple: PropTypes.bool,
+
+  /**
+   * Nom du champ de formulaire
+   */
+  name: PropTypes.string.isRequired,
+
+  /**
+   * Fonction de callback qui renvoit la/les valeurs sélectionnées
+   *
+   * @param {object} event
+   * @param {string || array} value
+   */
+  onChange: PropTypes.func.isRequired,
+
+  /**
+   * Listes des options du select
+   */
+  options: PropTypes.array.isRequired,
+
+  /**
+   * Parent items are pinned, with sticky behavior (hide checkboxes but still selectable)
+   */
+  pinnedParent: PropTypes.bool,
+
+  /**
+   * Placeholder affiché lorsque le select est fermé
+   * Surcharge le placeholder par défaut
+   */
+  placeholder: PropTypes.string,
+
+  /**
+   * Affiche un input de recherche permettant de filtrer les options
+   */
+  searchable: PropTypes.bool,
+
+  /**
+   * Traductions (par défaut en anglais)
+   */
+  translations: PropTypes.object,
+
+  /**
+   * Value(s) du select
+   */
+  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.array])
+} : {};
+export default HiNestedSelect;