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

package/HiSelect/index.js

@@ -1,41 +1,47 @@
-'use strict';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.HiSuggestSelectField = exports.HiSuggestSelect = exports.SelectInput = exports.HiSelectField = exports.HiSelect = exports.default = undefined;
-
-var _HiSelect2 = require('./HiSelect');
-
-Object.defineProperty(exports, 'default', {
+Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
-    return _interopRequireDefault(_HiSelect2).default;
+    return _HiSelect.default;
+  }
+});
+Object.defineProperty(exports, "HiSelectField", {
+  enumerable: true,
+  get: function get() {
+    return _HiSelectField.default;
+  }
+});
+Object.defineProperty(exports, "SelectInput", {
+  enumerable: true,
+  get: function get() {
+    return _SelectInput.default;
+  }
+});
+Object.defineProperty(exports, "HiSuggestSelect", {
+  enumerable: true,
+  get: function get() {
+    return _HiSuggestSelect.default;
+  }
+});
+Object.defineProperty(exports, "HiSuggestSelectField", {
+  enumerable: true,
+  get: function get() {
+    return _HiSuggestSelectField.default;
   }
 });
 
-var _HiSelect3 = _interopRequireDefault(_HiSelect2);
-
-var _HiSelectField2 = require('./HiSelectField');
-
-var _HiSelectField3 = _interopRequireDefault(_HiSelectField2);
-
-var _SelectInput2 = require('./SelectInput');
-
-var _SelectInput3 = _interopRequireDefault(_SelectInput2);
-
-var _HiSuggestSelect2 = require('./HiSuggestSelect');
-
-var _HiSuggestSelect3 = _interopRequireDefault(_HiSuggestSelect2);
+var _HiSelect = _interopRequireDefault(require("./HiSelect"));
 
-var _HiSuggestSelectField2 = require('./HiSuggestSelectField');
+var _HiSelectField = _interopRequireDefault(require("./HiSelectField"));
 
-var _HiSuggestSelectField3 = _interopRequireDefault(_HiSuggestSelectField2);
+var _SelectInput = _interopRequireDefault(require("./SelectInput"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _HiSuggestSelect = _interopRequireDefault(require("./HiSuggestSelect"));
 
-exports.HiSelect = _HiSelect3.default;
-exports.HiSelectField = _HiSelectField3.default;
-exports.SelectInput = _SelectInput3.default;
-exports.HiSuggestSelect = _HiSuggestSelect3.default;
-exports.HiSuggestSelectField = _HiSuggestSelectField3.default;
+var _HiSuggestSelectField = _interopRequireDefault(require("./HiSuggestSelectField"));

package/HiSelectNew/HiDynamicSelect.js

@@ -0,0 +1,238 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _HiSelect = _interopRequireDefault(require("./HiSelect"));
+
+// @inheritedComponent 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.
+ */
+var HiDynamicSelect =
+/*#__PURE__*/
+function (_React$PureComponent) {
+  (0, _inherits2.default)(HiDynamicSelect, _React$PureComponent);
+
+  function HiDynamicSelect(props) {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, HiDynamicSelect);
+    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiDynamicSelect).call(this, props));
+
+    _this.handleScrollReachBottom = function () {
+      if (!_this.props.loading && _this.props.nextPage === 'auto' && _this.props.onNextPage) {
+        _this.props.onNextPage();
+      }
+    };
+
+    _this.handleSelect = function (event, item) {
+      var _this$props = _this.props,
+          multiple = _this$props.multiple,
+          onChange = _this$props.onChange,
+          value = _this$props.value;
+
+      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(function (id) {
+          return id !== item.id;
+        }), item);
+      } else {
+        onChange(event, (0, _toConsumableArray2.default)(value).concat([item.id]), item);
+      }
+    };
+
+    _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,
+          nextPage = _this$props2.nextPage,
+          translations = _this$props2.translations;
+      var itemList = (0, _toConsumableArray2.default)(options.length === 0 && !loading ? [{
+        id: '_no_result',
+        type: 'text',
+        disabled: true,
+        centered: true,
+        hideCheckbox: true,
+        label: translations.no_result_match
+      }] : []).concat((0, _toConsumableArray2.default)(options), (0, _toConsumableArray2.default)(!loading && nextPage === 'manual' ? [{
+        id: '_next_page',
+        type: 'button',
+        centered: true,
+        hideCheckbox: true,
+        label: translations.next_page
+      }] : []), (0, _toConsumableArray2.default)(loading ? [{
+        id: '_loading',
+        type: 'loader',
+        disabled: true,
+        centered: true,
+        hideCheckbox: true,
+        label: 'loading'
+      }] : []));
+      return {
+        itemList: itemList
+      };
+    };
+
+    _this.handleScrollReachBottom = _this.handleScrollReachBottom.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleSelect = _this.handleSelect.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    return _this;
+  }
+
+  (0, _createClass2.default)(HiDynamicSelect, [{
+    key: "render",
+    value: function render() {
+      var _this$props3 = this.props,
+          hiSelectableListProps = _this$props3.hiSelectableListProps,
+          multiple = _this$props3.multiple,
+          nextPage = _this$props3.nextPage,
+          options = _this$props3.options,
+          translations = _this$props3.translations,
+          value = _this$props3.value,
+          other = (0, _objectWithoutProperties2.default)(_this$props3, ["hiSelectableListProps", "multiple", "nextPage", "options", "translations", "value"]);
+      return _react.default.createElement(_HiSelect.default, (0, _extends2.default)({
+        buildSelectProps: this.buildSelectProps,
+        hiSelectableListProps: (0, _extends2.default)({
+          onSelect: this.handleSelect
+        }, hiSelectableListProps),
+        multiple: multiple,
+        options: options,
+        searchable: true,
+        translations: translations,
+        value: value
+      }, nextPage === 'auto' && {
+        onScrollReachBottom: this.handleScrollReachBottom
+      }, other));
+    }
+  }]);
+  return HiDynamicSelect;
+}(_react.default.PureComponent);
+
+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.default.object,
+
+  /**
+   * id du select
+   */
+  id: _propTypes.default.string,
+
+  /**
+   * Ajoute un loader
+   */
+  loading: _propTypes.default.bool,
+
+  /**
+   * Autorise la sélection de plusieurs valeurs
+   */
+  multiple: _propTypes.default.bool,
+
+  /**
+   * Nom du champ de formulaire
+   */
+  name: _propTypes.default.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.default.oneOf(['none', 'auto', 'manual']),
+
+  /**
+   * Fonction de callback qui renvoit la valeur sélectionnée
+   */
+  onChange: _propTypes.default.func.isRequired,
+
+  /**
+   * Requête de nouvelles données
+   */
+  onNextPage: _propTypes.default.func.isRequired,
+
+  /**
+   * Fonction de callback qui renvoit la valeur de l'input de recherche
+   */
+  onSearch: _propTypes.default.func.isRequired,
+
+  /**
+   * Listes des options du select
+   */
+  options: _propTypes.default.array.isRequired,
+
+  /**
+   * Valeur de l'input de recherche
+   */
+  searchValue: _propTypes.default.string.isRequired,
+
+  /**
+   * Traductions (par défaut en anglais)
+   */
+  translations: _propTypes.default.object,
+
+  /**
+   * Value(s) du select
+   */
+  value: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string, _propTypes.default.array])
+} : {};
+var _default = HiDynamicSelect;
+exports.default = _default;