@hipay/hipay-material-ui 2.3.0-rcstyleguide-beta2 → 2.3.0-rcstyleguide-beta4

package/es/old_components/HiSelect/HiDynamicSelectField.js

@@ -0,0 +1,98 @@
+"use strict";
+
+var _interopRequireDefault = require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _classCallCheck2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/getPrototypeOf"));
+
+var _inherits2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/inherits"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _HiFormControl = _interopRequireDefault(require("../HiForm/HiFormControl"));
+
+var _HiDynamicSelect = _interopRequireDefault(require("./HiDynamicSelect"));
+
+// @inheritedComponent HiDynamicSelect
+
+/**
+ * Champs input pour formulaire
+ */
+var HiDynamicSelectField =
+/*#__PURE__*/
+function (_React$PureComponent) {
+  (0, _inherits2.default)(HiDynamicSelectField, _React$PureComponent);
+
+  function HiDynamicSelectField() {
+    (0, _classCallCheck2.default)(this, HiDynamicSelectField);
+    return (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiDynamicSelectField).apply(this, arguments));
+  }
+
+  (0, _createClass2.default)(HiDynamicSelectField, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          label = _this$props.label,
+          required = _this$props.required,
+          disabled = _this$props.disabled,
+          error = _this$props.error,
+          errorText = _this$props.errorText,
+          helperText = _this$props.helperText,
+          helperIcon = _this$props.helperIcon,
+          id = _this$props.id,
+          name = _this$props.name,
+          value = _this$props.value,
+          options = _this$props.options,
+          type = _this$props.type,
+          multiple = _this$props.multiple,
+          iconAll = _this$props.iconAll,
+          checkbox = _this$props.checkbox,
+          searchable = _this$props.searchable,
+          translations = _this$props.translations,
+          className = _this$props.className,
+          others = (0, _objectWithoutProperties2.default)(_this$props, ["label", "required", "disabled", "error", "errorText", "helperText", "helperIcon", "id", "name", "value", "options", "type", "multiple", "iconAll", "checkbox", "searchable", "translations", "className"]);
+      return _react.default.createElement(_HiFormControl.default, {
+        id: id,
+        label: label,
+        required: required,
+        disabled: disabled,
+        error: error,
+        errorText: errorText,
+        helperText: helperText,
+        helperIcon: helperIcon,
+        className: className
+      }, _react.default.createElement(_HiDynamicSelect.default, (0, _extends2.default)({
+        id: id,
+        name: name,
+        value: value,
+        options: options,
+        type: type,
+        multiple: multiple,
+        iconAll: iconAll,
+        checkbox: checkbox,
+        searchable: searchable,
+        translations: translations,
+        disabled: disabled,
+        error: error
+      }, others)));
+    }
+  }]);
+  return HiDynamicSelectField;
+}(_react.default.PureComponent);
+
+var _default = HiDynamicSelectField;
+exports.default = _default;

package/es/old_components/HiSelect/HiNestedSelect.js

@@ -0,0 +1,445 @@
+"use strict";
+
+var _interopRequireDefault = require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.styles = exports.filterValue = void 0;
+
+var _extends2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _classCallCheck2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/getPrototypeOf"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/inherits"));
+
+var _defineProperty2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/defineProperty"));
+
+var _objectSpread2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/objectSpread2"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/toConsumableArray"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _HiSelect = _interopRequireDefault(require("./HiSelect"));
+
+var _HiIcon = _interopRequireDefault(require("../HiIcon"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _helpers = require("../utils/helpers");
+
+// @inheritedComponent HiSelect
+
+/**
+ * Return array of final item id in nested list (via props chlidren)
+ * @param itemList
+ * @param finalItemIdList
+ * @returns {*[]}
+ */
+function getRecursiveFinalItemIdList(itemList) {
+  var finalItemIdList = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  return [].concat((0, _toConsumableArray2.default)(finalItemIdList), (0, _toConsumableArray2.default)(itemList.reduce(function (memo, item) {
+    if (item.children) {
+      return getRecursiveFinalItemIdList(item.children, memo);
+    }
+
+    return [].concat((0, _toConsumableArray2.default)(memo), [item.id]);
+  }, [])));
+}
+/**
+ * Find item by id in nested list (via props children)
+ * @param itemList
+ * @param searchId
+ * @returns {boolean}
+ */
+
+
+function findFinalItemRecursively(itemList, searchId) {
+  var foundItem = false;
+  itemList.some(function (item) {
+    if (item.id === searchId) {
+      foundItem = item;
+    } else if (item.children && !foundItem) {
+      foundItem = findFinalItemRecursively(item.children, searchId);
+    }
+
+    return foundItem !== false;
+  });
+  return foundItem;
+}
+
+var filterValue = function filterValue(item, searchValue) {
+  return searchValue === '' || (0, _helpers.foldAccents)(item.label.toString().toLowerCase()).search((0, _helpers.foldAccents)(searchValue.toLowerCase())) !== -1;
+};
+/**
+ * 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
+ * @param nbChildrenAsInfo - Show children number as info
+ * @param translations - Translations
+ * @returns {*}
+ */
+
+
+exports.filterValue = filterValue;
+
+function buildFilteredItemList(itemList) {
+  var selectedItemIdList = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  var searchValue = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
+  var visibleParent = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+  var pinnedParent = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
+  var disabledParent = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
+  var nbChildrenAsInfo = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
+  var translations = arguments.length > 7 ? arguments[7] : undefined;
+  var filterFunc = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : filterValue;
+  return itemList.reduce(function (_ref, item) {
+    var memoItemList = _ref.l,
+        memoSelected = _ref.s,
+        memoUnselected = _ref.u,
+        memoVisible = _ref.v;
+    var itemVisible = filterFunc(item, searchValue); // Parent item
+
+    if (item.children) {
+      var _buildFilteredItemLis = buildFilteredItemList(item.children, selectedItemIdList, searchValue, itemVisible, pinnedParent, disabledParent, nbChildrenAsInfo, translations, filterFunc),
+          customizedChildren = _buildFilteredItemLis.l,
+          selected = _buildFilteredItemLis.s,
+          unselected = _buildFilteredItemLis.u,
+          visible = _buildFilteredItemLis.v;
+
+      if (nbChildrenAsInfo) {
+        item.info = translations.n_children.replace('%s', item.children.length);
+      }
+
+      return {
+        l: [].concat((0, _toConsumableArray2.default)(memoItemList), [(0, _objectSpread2.default)({}, item, {}, disabledParent && {
+          disabled: true,
+          hideCheckbox: true // don't display checkbox on disabled parent
+
+        }, {
+          pinned: pinnedParent,
+          children: customizedChildren,
+          selected: selected,
+          indeterminate: !selected && !unselected,
+          displayed: itemVisible || visible
+        })]),
+        s: memoSelected && selected,
+        u: memoUnselected && unselected,
+        v: memoVisible || itemVisible || visible
+      };
+    }
+
+    var itemSelected = selectedItemIdList.includes(item.id);
+    return {
+      l: [].concat((0, _toConsumableArray2.default)(memoItemList), [(0, _objectSpread2.default)({
+        displayed: itemVisible || visibleParent
+      }, item)]),
+      s: itemSelected && memoSelected,
+      u: !itemSelected && memoUnselected,
+      v: itemVisible || visibleParent || memoVisible
+    };
+  }, {
+    l: [],
+    s: true,
+    u: true,
+    v: visibleParent
+  });
+}
+
+var styles = function styles(theme) {
+  return {
+    root: {
+      backgroundColor: theme.palette.background2,
+      maxWidth: 500,
+      width: '100%',
+      position: 'relative'
+    },
+    popper: {
+      // width: '100%',
+      zIndex: 1200
+    },
+    paper: {
+      borderRadius: '0px 2px',
+      maxHeight: 480,
+      transition: 'none !important'
+    },
+    labelImg: {
+      height: 18,
+      width: 'auto',
+      margin: '0 4px',
+      verticalAlign: 'middle'
+    },
+    selectIconLabel: (0, _objectSpread2.default)({
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      paddingRight: 16
+    }, theme.typography.b1, {
+      display: 'inline-flex',
+      width: '100%'
+    }),
+    selectImgLabel: (0, _objectSpread2.default)({
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      paddingRight: 16
+    }, theme.typography.b1, {
+      display: 'inline-flex',
+      width: '100%'
+    })
+  };
+};
+/**
+ * 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".
+ */
+
+
+exports.styles = styles;
+
+var HiNestedSelect =
+/*#__PURE__*/
+function (_React$PureComponent) {
+  (0, _inherits2.default)(HiNestedSelect, _React$PureComponent);
+
+  function HiNestedSelect(props) {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, HiNestedSelect);
+    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiNestedSelect).call(this, props));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleSelect", function (event, item) {
+      var _this$props = _this.props,
+          hasAll = _this$props.hasAll,
+          multiple = _this$props.multiple,
+          onChange = _this$props.onChange,
+          options = _this$props.options,
+          value = _this$props.value;
+
+      if (!multiple) {
+        // single value
+        onChange(event, item.id, item);
+      } else if (hasAll && item.id === '_all') {
+        // ALL
+        var 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
+        var parentSelectableItemIdList = getRecursiveFinalItemIdList(item.children); // deselect parent if every selectable child id is includes in value.
+
+        if (parentSelectableItemIdList.every(function (pid) {
+          return value.includes(pid);
+        })) {
+          onChange(event, value.filter(function (vid) {
+            return !parentSelectableItemIdList.includes(vid);
+          }), item);
+        } else {
+          // select parent > add each selectable child without duplicates.
+          onChange(event, [].concat((0, _toConsumableArray2.default)(value.filter(function (vid) {
+            return !parentSelectableItemIdList.includes(vid);
+          })), (0, _toConsumableArray2.default)(parentSelectableItemIdList)), item);
+        }
+      } else if (value.includes(item.id)) {
+        // unselect item
+        onChange(event, value.filter(function (id) {
+          return id !== item.id;
+        }), item);
+      } else {
+        onChange(event, [].concat((0, _toConsumableArray2.default)(value), [item.id]), item);
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "buildSelectProps", function (options) {
+      var value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+      var search = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
+      var loading = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+      var _this$props2 = _this.props,
+          classes = _this$props2.classes,
+          disabledParent = _this$props2.disabledParent,
+          hasAll = _this$props2.hasAll,
+          iconAll = _this$props2.iconAll,
+          multiple = _this$props2.multiple,
+          nbChildrenAsInfo = _this$props2.nbChildrenAsInfo,
+          pinnedParent = _this$props2.pinnedParent,
+          translations = _this$props2.translations,
+          filterFunc = _this$props2.filterFunc; // build item list
+
+      var _buildFilteredItemLis2 = buildFilteredItemList(options, value, search, false, pinnedParent, disabledParent || !multiple, nbChildrenAsInfo, translations, filterFunc),
+          filteredItemList = _buildFilteredItemLis2.l,
+          allSelected = _buildFilteredItemLis2.s,
+          allUnselected = _buildFilteredItemLis2.u,
+          visible = _buildFilteredItemLis2.v;
+
+      var itemList = !visible ? (0, _toConsumableArray2.default)(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
+      }]) : [].concat((0, _toConsumableArray2.default)(loading ? [{
+        id: '_loading',
+        type: 'loader',
+        disabled: true,
+        centered: true,
+        hideCheckbox: true,
+        label: 'loading'
+      }] : []), (0, _toConsumableArray2.default)(hasAll ? [{
+        id: '_all',
+        iconAll: iconAll,
+        label: translations.all,
+        selected: allSelected,
+        indeterminate: !allSelected && !allUnselected,
+        displayed: search === ''
+      }] : []), (0, _toConsumableArray2.default)(filteredItemList)); // build input value
+
+      var 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) {
+        var selectedItem = findFinalItemRecursively(options, value[0]);
+
+        if (selectedItem === false) {
+          inputValue = translations.one_item_selected;
+        } else if (selectedItem.type === 'icon') {
+          inputValue = _react.default.createElement("span", {
+            className: classes.selectIconLabel
+          }, _react.default.createElement(_HiIcon.default, {
+            className: classes.labelIcon,
+            icon: selectedItem.icon
+          }), selectedItem.label);
+        } else if (selectedItem.type === 'image') {
+          inputValue = _react.default.createElement("span", {
+            className: classes.selectImgLabel
+          }, _react.default.createElement("img", {
+            className: classes.labelImg,
+            src: selectedItem.img,
+            alt: selectedItem.label
+          }), selectedItem.label);
+        } else {
+          inputValue = selectedItem.label;
+        }
+      }
+
+      return {
+        itemList: itemList,
+        inputValue: inputValue
+      };
+    });
+    _this.handleSelect = _this.handleSelect.bind((0, _assertThisInitialized2.default)(_this));
+    return _this;
+  }
+  /**
+   * Call onChange with the updated value
+   *
+   * - handle single value
+   * - handle multiple value
+   * - handle '_all' id
+   *
+   * @param event
+   * @param item
+   */
+
+
+  (0, _createClass2.default)(HiNestedSelect, [{
+    key: "render",
+    value: function render() {
+      var _this$props3 = this.props,
+          hasAll = _this$props3.hasAll,
+          hiSelectableListProps = _this$props3.hiSelectableListProps,
+          multiple = _this$props3.multiple,
+          options = _this$props3.options,
+          searchable = _this$props3.searchable,
+          translations = _this$props3.translations,
+          value = _this$props3.value,
+          other = (0, _objectWithoutProperties2.default)(_this$props3, ["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.default.createElement(_HiSelect.default, (0, _extends2.default)({
+        buildSelectProps: this.buildSelectProps,
+        hasAll: hasAll,
+        hiSelectableListProps: (0, _objectSpread2.default)({
+          onSelect: this.handleSelect
+        }, hiSelectableListProps),
+        multiple: multiple,
+        options: options,
+        searchable: searchable,
+        translations: translations,
+        value: value
+      }, other));
+    }
+  }]);
+  return HiNestedSelect;
+}(_react.default.PureComponent);
+
+(0, _defineProperty2.default)(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',
+    one_child: '%s item'
+  },
+  filterFunc: filterValue
+});
+
+var _default = (0, _styles.withStyles)(styles, {
+  hiComponent: true,
+  name: 'HmuiHiNestedSelect'
+})(HiNestedSelect);
+
+exports.default = _default;