oa-componentbook 0.17.91 → 0.17.92

package/build/components/oa-component-select/CustomSelect.js

@@ -2,23 +2,31 @@
 
 require("core-js/modules/es.symbol.description.js");
 require("core-js/modules/es.object.assign.js");
+require("core-js/modules/es.weak-map.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = CustomSelect;
-var _react = _interopRequireDefault(require("react"));
+require("core-js/modules/web.dom-collections.iterator.js");
+require("core-js/modules/es.array.includes.js");
+require("core-js/modules/es.string.includes.js");
+var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _antd = require("antd");
 var _KeyboardArrowDown = _interopRequireDefault(require("@material-ui/icons/KeyboardArrowDown"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _utils = require("../../utils");
 var _MaterialIcon = _interopRequireDefault(require("../oa-component-icons/MaterialIcon"));
 var _Typography = _interopRequireDefault(require("../oa-component-typography/Typography"));
 var _ColorVariablesMap = _interopRequireDefault(require("../../global-css/ColorVariablesMap"));
 require("antd/dist/reset.css");
 var _Elevation = require("../../global-css/Elevation");
-const _excluded = ["data-test", "options"],
-  _excluded2 = ["label", "disabled"];
+const _excluded = ["allText", "children", "data-test", "onSelectionChange", "options"],
+  _excluded2 = ["label", "disabled", "value"];
+var _templateObject;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -27,16 +35,25 @@ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typ
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+const {
+  Option
+} = _antd.Select;
+const StyledSelect = (0, _styledComponents.default)(_antd.Select)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  /* Hiding the last tag in case of All being selected. */\n .ant-select-selection-overflow-item.ant-select-selection-overflow-item-rest {\n    display: ", "\n }\n"])), props => props.maxTagCount === 1 ? 'none' : undefined);
 function CustomSelect(_ref) {
   let {
+      allText,
+      children,
       'data-test': dataTest,
+      onSelectionChange,
       options
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   const actualOptions = options === null || options === void 0 ? void 0 : options.map(option => {
     const {
         label,
-        disabled
+        disabled = false,
+        value
       } = option,
       otherProperties = _objectWithoutProperties(option, _excluded2);
     if ((0, _utils.isString)(label) || (0, _utils.isNumber)(label)) {
@@ -46,19 +63,83 @@ function CustomSelect(_ref) {
           typography: "type-b2-400",
           "data-test": dataTest ? "".concat(dataTest, "-(").concat(label, ")") : undefined
         }, label),
-        disabled
+        disabled,
+        value
       }, otherProperties);
     }
     if ( /*#__PURE__*/_react.default.isValidElement(label)) {
       return _objectSpread({
-        label: /*#__PURE__*/_react.default.cloneElement(label, {
-          'data-test': dataTest ? "".concat(dataTest, "-(").concat(label, ")") : undefined
-        }),
+        label: dataTest ? /*#__PURE__*/_react.default.cloneElement(label, {
+          'data-test': "".concat(dataTest, "-(").concat(label, ")")
+        }) : label,
+        disabled,
+        value
+      }, otherProperties);
+    }
+    if ((0, _utils.isString)(value) || (0, _utils.isNumber)(value)) {
+      return _objectSpread({
+        label: /*#__PURE__*/_react.default.createElement(_Typography.default, {
+          color: disabled ? 'placeholder-text' : undefined,
+          typography: "type-b2-400",
+          "data-test": dataTest ? "".concat(dataTest, "-(").concat(value, ")") : undefined
+        }, value),
+        value,
         disabled
       }, otherProperties);
     }
     return option;
   });
+  const [selectedOptions, setSelectedOptions] = (0, _react.useState)([]);
+  const getMaxTagPlaceholder = omittedValues => {
+    if (selectedOptions.indexOf(allText) !== -1) {
+      return null;
+    }
+    return "".concat("+".concat(omittedValues.length, " more"));
+  };
+  const safePush = (array, element) => {
+    if (!array.includes(element)) {
+      array.push(element);
+    }
+  };
+  const addAllOptions = (optionsToBeAdded, newlySelectedOptions) => {
+    optionsToBeAdded.forEach(option => {
+      if ((option === null || option === void 0 ? void 0 : option.disabled) !== true) {
+        if (option.value) {
+          safePush(newlySelectedOptions, option.value);
+        } else {
+          safePush(newlySelectedOptions, option);
+        }
+      }
+    });
+  };
+  const onOptionsChange = (select, value) => {
+    const newlySelectedOptions = selectedOptions.slice(0);
+    const allIndex = newlySelectedOptions.indexOf(allText);
+    if (allIndex !== -1) {
+      newlySelectedOptions.splice(allIndex, 1);
+    }
+    if (select) {
+      if (value === allText) {
+        newlySelectedOptions.length = 0; // Emptying the array.
+
+        safePush(newlySelectedOptions, allText);
+        addAllOptions(options, newlySelectedOptions);
+      } else {
+        safePush(newlySelectedOptions, value);
+        if (newlySelectedOptions.length === options.length && allText) {
+          newlySelectedOptions.unshift(allText);
+        }
+      }
+    } else if (value === allText) {
+      newlySelectedOptions.length = 0; // Emptying the array.
+    } else {
+      newlySelectedOptions.splice(newlySelectedOptions.indexOf(value), 1);
+    }
+
+    // Passing the data to parent, using a callback.
+    onSelectionChange(newlySelectedOptions);
+    setSelectedOptions(newlySelectedOptions);
+  };
   return /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
     theme: {
       components: {
@@ -122,32 +203,51 @@ function CustomSelect(_ref) {
         boxShadowSecondary: _Elevation.ElevationMap['elevation-white-1'] // Box shadow of dropdown.
       }
     }
-  }, /*#__PURE__*/_react.default.createElement(_antd.Select, _extends({
+  }, /*#__PURE__*/_react.default.createElement(StyledSelect, _extends({
     "data-test": dataTest,
-    options: (actualOptions === null || actualOptions === void 0 ? void 0 : actualOptions.length) > 0 ? actualOptions : undefined,
     dropdownStyle: {
       padding: '0px'
     },
-    maxTagCount: "responsive",
+    maxTagCount: selectedOptions.indexOf(allText) === -1 ? 'responsive' : 1,
+    maxTagPlaceholder: getMaxTagPlaceholder,
+    onDeselect: value => onOptionsChange(false, value),
+    onSelect: value => onOptionsChange(true, value),
     suffixIcon: /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
       icon: _KeyboardArrowDown.default,
       size: 20
-    })
-  }, props)));
+    }),
+    value: (options === null || options === void 0 ? void 0 : options.length) > 0 ? selectedOptions : [],
+    virtual: false
+  }, props), allText && /*#__PURE__*/_react.default.createElement(Option, {
+    value: allText
+  }, allText), actualOptions === null || actualOptions === void 0 ? void 0 : actualOptions.map(actualOption => {
+    var _actualOption$disable;
+    return /*#__PURE__*/_react.default.createElement(Option, {
+      disabled: (_actualOption$disable = actualOption.disabled) !== null && _actualOption$disable !== void 0 ? _actualOption$disable : false,
+      value: actualOption.value,
+      key: (0, _utils.getUUID)()
+    }, actualOption.label);
+  })));
 }
 CustomSelect.Option = _antd.Select.Option;
 CustomSelect.propTypes = {
+  allText: _propTypes.default.string,
+  children: _propTypes.default.node,
   'data-test': _propTypes.default.string,
-  size: _propTypes.default.oneOf(['small', 'middle']),
+  onSelectionChange: _propTypes.default.func,
   options: _propTypes.default.arrayOf(
   // Checked from antd's github
   _propTypes.default.shape({
     label: _propTypes.default.node,
     value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired
-  }))
+  })),
+  size: _propTypes.default.oneOf(['small', 'middle'])
 };
 CustomSelect.defaultProps = {
+  allText: null,
+  children: null,
   'data-test': null,
+  onSelectionChange: selection => {},
   options: [],
   size: 'middle'
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oa-componentbook",
-  "version": "0.17.91",
+  "version": "0.17.92",
   "private": false,
   "description": "Reusable components",
   "main": "build/index.js",