oa-componentbook 0.0.0-sit1.1

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

@@ -0,0 +1,432 @@
+"use strict";
+
+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;
+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");
+require("core-js/modules/es.array.reduce.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 = ["allText", "children", "defaultValue", "data-test", "mode", "onSelectionChange", "options", "placeholder", "maxSelectForMultiSelect", "onCustomSelect"],
+  _excluded2 = ["label", "disabled", "value"];
+var _templateObject;
+/* eslint-disable */
+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; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+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  .ant-select-selection-item-content {\n    max-width: 70px;\n  }\n"])), props => props.maxTagCount === 1 ? "none" : undefined);
+
+/**
+ * Takes an array of values and an object mapping values to labels and returns an
+ * array of objects with value and label keys.
+ *
+ * @param {Array} valuesArray - An array of values to be converted to options.
+ * @param {object} valueLabelMap - An object mapping values to labels.
+ * @returns {Array} - An array of objects with value and label keys.
+ */
+const valuesArrayToOptionArray = (valuesArray, valueLabelMap) => valuesArray.map(value => ({
+  value,
+  label: valueLabelMap === null || valueLabelMap === void 0 ? void 0 : valueLabelMap[value]
+}));
+
+/**
+ * A customized version of Ant Design's Select component.
+ *
+ * @param {string} allText - Text to be shown when all options are selected.
+ * @param {React.ReactNode} children - React children to be passed to the Select component.
+ * @param {string | number | Array<string | number>} defaultValue - Default value or values to be selected.
+ * @param {string} data-test - A string to be used for data-test attribute.
+ * @param {'multiple' | 'tags'} mode - If 'multiple' then the select box allows multiple selection and if 'tags' then the select box allows multiple selection and shows them as tags.
+ * @param {function} onSelectionChange - Callback function to be called when selection changes.
+ * @param {Array<React.ReactNode>} options - An array of React nodes to be passed as options to the Select component.
+ * @param {string} placeholder - Placeholder text to be shown when no option is selected.
+ *
+ * @returns {React.ReactElement} - A customized Select component.
+ */
+function CustomSelect(_ref) {
+  var _selectedOptions$inde2;
+  let {
+      allText,
+      children,
+      defaultValue,
+      "data-test": dataTest,
+      mode,
+      onSelectionChange,
+      options,
+      placeholder,
+      maxSelectForMultiSelect,
+      onCustomSelect
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  // If allText is present in default values, we select all the options manually.
+  const actualDefaultValue = mode === "multiple" ? [...defaultValue] : defaultValue;
+  if (mode === "multiple" && allText && defaultValue !== null && defaultValue !== void 0 && defaultValue.includes(allText)) {
+    var _options$filter$map, _options$filter;
+    // Emptying the array first.
+    actualDefaultValue.length = 0;
+
+    // Pushing the allText
+    actualDefaultValue === null || actualDefaultValue === void 0 || actualDefaultValue.push(allText);
+
+    // Pushing the enabled options.
+    actualDefaultValue.push(...((_options$filter$map = options === null || options === void 0 || (_options$filter = options.filter(option => {
+      var _option$disabled;
+      return !((_option$disabled = option === null || option === void 0 ? void 0 : option.disabled) !== null && _option$disabled !== void 0 ? _option$disabled : false);
+    })) === null || _options$filter === void 0 ? void 0 : _options$filter.map(option => option.value)) !== null && _options$filter$map !== void 0 ? _options$filter$map : []));
+  }
+  const [selectedOptions, setSelectedOptions] = (0, _react.useState)(actualDefaultValue);
+  const valueLabelMap = Array.isArray(options) && (options === null || options === void 0 ? void 0 : options.reduce((accumulator, option) => {
+    var _option$label;
+    accumulator[option.value] = (_option$label = option === null || option === void 0 ? void 0 : option.label) !== null && _option$label !== void 0 ? _option$label : option.value;
+    return accumulator;
+  }, {}));
+  const actualOptions = Array.isArray(options) && options.map(option => {
+    const {
+        label,
+        disabled = false,
+        value
+      } = option,
+      otherProperties = _objectWithoutProperties(option, _excluded2);
+    const shouldDisableOption = (option, selectedOptions, maxSelectForMultiSelect, allText) => {
+      var _selectedOptions$filt;
+      // If option is already disabled, keep it disabled
+      if (option.disabled) return true;
+
+      // If no max limit, don't disable
+      if (!maxSelectForMultiSelect) return false;
+
+      // If this option is already selected, don't disable it (so user can deselect)
+      if (selectedOptions !== null && selectedOptions !== void 0 && selectedOptions.includes(option.value)) return false;
+
+      // If this is the 'all' option, don't disable it
+      if (option.value === allText) return false;
+
+      // Check if we've reached the max limit (excluding allText)
+      const actualSelectionCount = (selectedOptions === null || selectedOptions === void 0 || (_selectedOptions$filt = selectedOptions.filter(val => val !== allText)) === null || _selectedOptions$filt === void 0 ? void 0 : _selectedOptions$filt.length) || 0;
+      return actualSelectionCount >= maxSelectForMultiSelect;
+    };
+
+    // Determine if this option should be disabled due to max limit
+    const shouldBeDisabled = shouldDisableOption(option, selectedOptions, maxSelectForMultiSelect, allText);
+    const finalDisabled = disabled || shouldBeDisabled;
+    if ((0, _utils.isString)(label) || (0, _utils.isNumber)(label)) {
+      return _objectSpread({
+        label: /*#__PURE__*/_react.default.createElement(_Typography.default, {
+          color: finalDisabled ? "placeholder-text" : undefined,
+          typography: "type-b2-400",
+          title: label,
+          "data-test": dataTest ? "".concat(dataTest, "-(").concat(label, ")") : undefined
+        }, label),
+        disabled: finalDisabled,
+        value
+      }, otherProperties);
+    }
+    if ( /*#__PURE__*/_react.default.isValidElement(label)) {
+      return _objectSpread({
+        label: dataTest ? /*#__PURE__*/_react.default.cloneElement(label, {
+          "data-test": "".concat(dataTest, "-(").concat(label, ")")
+        }) : label,
+        disabled: finalDisabled,
+        value
+      }, otherProperties);
+    }
+    if ((0, _utils.isString)(value) || (0, _utils.isNumber)(value)) {
+      return _objectSpread({
+        label: /*#__PURE__*/_react.default.createElement(_Typography.default, {
+          color: finalDisabled ? "placeholder-text" : undefined,
+          typography: "type-b2-400",
+          "data-test": dataTest ? "".concat(dataTest, "-(").concat(value, ")") : undefined
+        }, value),
+        value,
+        disabled: finalDisabled
+      }, otherProperties);
+    }
+    return _objectSpread(_objectSpread({}, option), {}, {
+      disabled: finalDisabled
+    });
+  });
+
+  /**
+   * Return a placeholder text for the maxTagCount option.
+   *
+   * If the allText option is selected, return null, otherwise return the string
+   * "+X more" where X is the number of omitted values.
+   *
+   * @param {Array} omittedValues - The array of values that are omitted when
+   *   maxTagCount is exceeded.
+   * @returns {String|null} - The placeholder text or null if allText is selected.
+   */
+  const getMaxTagPlaceholder = omittedValues => {
+    var _selectedOptions$inde;
+    if ((selectedOptions === null || selectedOptions === void 0 || (_selectedOptions$inde = selectedOptions.indexOf) === null || _selectedOptions$inde === void 0 ? void 0 : _selectedOptions$inde.call(selectedOptions, allText)) !== -1) {
+      return null;
+    }
+    return "".concat("+".concat(omittedValues.length, " more"));
+  };
+  const safePush = (array, element) => {
+    if (!array.includes(element)) {
+      array.push(element);
+    }
+  };
+
+  /**
+   * Given an array of options, add all non-disabled options to the newlySelectedOptions array.
+   * If the option has a value property, add the value to the array. Otherwise add the option itself.
+   * @param {Array} optionsToBeAdded - The array of options to be added.
+   * @param {Array} newlySelectedOptions - The array to which the options are added.
+   */
+  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);
+        }
+      }
+    });
+  };
+
+  /**
+   * This function is called whenever the selection changes for a single select.
+   * @param {Boolean} select - True if the option was selected, false if it was deselected.
+   * @param {String|Number} value - The value of the option that was selected or deselected.
+   */
+  const onOptionsChangeForSingle = (select, value) => {
+    if (select) {
+      setSelectedOptions(value);
+    } else {
+      setSelectedOptions(null);
+    }
+    onSelectionChange({
+      label: valueLabelMap[value],
+      value
+    });
+  };
+  /**
+   * Checks if maximum selection limit has been reached
+   * @param {Array} currentSelection - Current selected options array
+   * @param {Boolean} isSelecting - Whether we're selecting (true) or deselecting (false)
+   * @returns {Boolean} - True if max limit would be exceeded
+   */
+  const isMaxSelectReached = currentSelection => {
+    var _currentSelection$fil;
+    // Count selections excluding allText if present
+    const actualSelectionCount = (currentSelection === null || currentSelection === void 0 || (_currentSelection$fil = currentSelection.filter(option => option !== allText)) === null || _currentSelection$fil === void 0 ? void 0 : _currentSelection$fil.length) || 0;
+    return actualSelectionCount >= maxSelectForMultiSelect;
+  };
+  /**
+   * This function is called whenever the selection changes for a multiple select.
+   * @param {Boolean} select - True if the option was selected, false if it was deselected.
+   * @param {String|Number} value - The value of the option that was selected or deselected.
+   *
+   * If the user selects the "All" option, the selections are cleared, and all options are added to the selection.
+   * If all other options are selected, the "All" option is added to the selection.
+   * If the user deselects the "All" option, the selections are cleared.
+   * If the user deselects an option, it is removed from the selection.
+   */
+  const onOptionsChangeForMultiple = (select, value) => {
+    var _newlySelectedOptions;
+    const newlySelectedOptions = selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.slice(0);
+    const allIndex = newlySelectedOptions === null || newlySelectedOptions === void 0 || (_newlySelectedOptions = newlySelectedOptions.indexOf) === null || _newlySelectedOptions === void 0 ? void 0 : _newlySelectedOptions.call(newlySelectedOptions, allText);
+    if (allIndex !== -1) {
+      newlySelectedOptions.splice(allIndex, 1);
+    }
+    if (select) {
+      if (maxSelectForMultiSelect && value !== allText && isMaxSelectReached(newlySelectedOptions)) {
+        // Don't proceed with selection if max limit reached
+        return;
+      }
+      if (value === allText) {
+        newlySelectedOptions.length = 0; // Emptying the array.
+
+        safePush(newlySelectedOptions, allText);
+        addAllOptions(options, newlySelectedOptions);
+      } else {
+        safePush(newlySelectedOptions, value);
+        const enabledOptions = options === null || options === void 0 ? void 0 : options.filter(option => {
+          var _option$disabled2;
+          return !((_option$disabled2 = option === null || option === void 0 ? void 0 : option.disabled) !== null && _option$disabled2 !== void 0 ? _option$disabled2 : false);
+        });
+        if (newlySelectedOptions.length === enabledOptions.length && allText) {
+          newlySelectedOptions === null || newlySelectedOptions === void 0 || newlySelectedOptions.unshift(allText);
+        }
+      }
+    } else if (value === allText) {
+      newlySelectedOptions.length = 0; // Emptying the array.
+    } else {
+      var _newlySelectedOptions2;
+      newlySelectedOptions.splice((_newlySelectedOptions2 = newlySelectedOptions.indexOf) === null || _newlySelectedOptions2 === void 0 ? void 0 : _newlySelectedOptions2.call(newlySelectedOptions, value), 1);
+    }
+    const optionsWithoutAllText = newlySelectedOptions.filter(option => option !== allText);
+
+    // Passing the data to parent, using a callback.
+    onSelectionChange(valuesArrayToOptionArray(optionsWithoutAllText, valueLabelMap));
+    setSelectedOptions(newlySelectedOptions);
+  };
+  const onOptionsChange = mode === "multiple" ? onOptionsChangeForMultiple : onOptionsChangeForSingle;
+  return /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
+    theme: {
+      components: {
+        Select: {
+          optionHeight: (props === null || props === void 0 ? void 0 : props.size) === "small" ? "36px" : "52px",
+          optionSelectedBg: _ColorVariablesMap.default["--color-primary-background"],
+          optionSelectedColor: _ColorVariablesMap.default["--color-primary"]
+          // optionPadding: [3, 2],
+          // optionPadding: (props?.size === 'small') ? '8px 12px' : '16 16',
+          // activeShadow: '0px 0px 4px 0px red', // Box shadow for active select box.
+        }
+      },
+      token: {
+        // controlOutline: '4px 4px 4px 4px red', // an attempt at applying box shadow
+        colorTextPlaceholder: _ColorVariablesMap.default["--color-placeholder-text"],
+        // Color of placeholder text
+        colorTextQuaternary: _ColorVariablesMap.default["--color-secondary-content"],
+        // Color of dropdown arrow.
+
+        colorPrimary: _ColorVariablesMap.default["--color-primary"],
+        // for active color of select
+        colorPrimaryHover: _ColorVariablesMap.default["--color-primary"],
+        // for hover color of select
+        borderRadius: "4px",
+        // For border radius of select text field.
+        borderRadiusLG: "4px",
+        // For border radius of dropdown
+        controlHeight: 48,
+        // height of text field (tag height is half of this, i.e. 24px)
+        controlHeightSM: 32,
+        // height of small text field
+
+        // This controls padding of larger text box
+        controlPaddingHorizontalSM: (props === null || props === void 0 ? void 0 : props.size) === "small" ? 13 : 17,
+        // 1 extra so that it shows 12px and 16px in browser console.
+        paddingSM: (props === null || props === void 0 ? void 0 : props.size) === "small" ? 13 : 17,
+        // paddingSM is what determines padding of input box.
+
+        controlItemBgHover: _ColorVariablesMap.default["--color-background-info"],
+        // hover color of items
+        colorBgElevated: _ColorVariablesMap.default["--color-primary-background"],
+        // background color of dropdown
+        // multipleItemHeight: 100,
+        colorBgContainerDisabled: _ColorVariablesMap.default["--color-divider"],
+        // background color of disabled select
+        colorBorder: _ColorVariablesMap.default["--color-placeholder-text"],
+        colorFillSecondary: _ColorVariablesMap.default["--color-secondary-background"],
+        // background color for tags
+
+        colorText: _ColorVariablesMap.default["--color-primary-content"],
+        // Text color of unselected options in dropdown
+        colorTextDisabled: _ColorVariablesMap.default["--color-secondary-content"],
+        // Text color when disabled
+
+        colorIcon: _ColorVariablesMap.default["--color-primary-content"],
+        // Color of cross icon
+        colorError: _ColorVariablesMap.default["--color-negative"],
+        // Error color
+        colorErrorBorderHover: _ColorVariablesMap.default["--color-negative"],
+        // Hover error color should be same as error color
+        boxShadowSecondary: _Elevation.ElevationMap["elevation-white-1"] // Box shadow of dropdown.
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement(StyledSelect, _extends({
+    "data-test": dataTest,
+    dropdownStyle: {
+      padding: "0px"
+    },
+    mode: mode,
+    maxTagCount: (selectedOptions === null || selectedOptions === void 0 || (_selectedOptions$inde2 = selectedOptions.indexOf) === null || _selectedOptions$inde2 === void 0 ? void 0 : _selectedOptions$inde2.call(selectedOptions, allText)) === -1 ? "responsive" : 1,
+    maxTagPlaceholder: getMaxTagPlaceholder,
+    onDeselect: (0, _utils.isFunction)(onSelectionChange) ? value => onOptionsChange(false, value) : undefined,
+    onSelect: (0, _utils.isFunction)(onSelectionChange) || (0, _utils.isFunction)(onCustomSelect) ? value => {
+      if ((0, _utils.isFunction)(onSelectionChange)) {
+        onOptionsChange(true, value);
+      }
+      if ((0, _utils.isFunction)(onCustomSelect)) {
+        const fullOption = options === null || options === void 0 ? void 0 : options.find(opt => opt.value === value);
+        if (fullOption) {
+          onCustomSelect(fullOption);
+        }
+      }
+    } : undefined,
+    suffixIcon: /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+      icon: _KeyboardArrowDown.default,
+      size: 20
+    }),
+    value: (0, _utils.isFunction)(onSelectionChange) ? selectedOptions : undefined,
+    defaultValue: defaultValue,
+    virtual: false,
+    placeholder: placeholder
+  }, props), allText && /*#__PURE__*/_react.default.createElement(Option, {
+    value: allText
+  }, allText), children || Array.isArray(actualOptions) && (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)(),
+      label: actualOption.label
+    }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, actualOption.label, (actualOption === null || actualOption === void 0 ? void 0 : actualOption.subLabel) && /*#__PURE__*/_react.default.createElement("div", {
+      className: "margin-top-4"
+    }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      typography: "type-b3-400",
+      color: "secondary-content"
+    }, actualOption === null || actualOption === void 0 ? void 0 : actualOption.subLabel))));
+  }))));
+}
+CustomSelect.Option = _antd.Select.Option;
+CustomSelect.propTypes = {
+  allText: _propTypes.default.string,
+  children: _propTypes.default.node,
+  defaultValue: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.string, _propTypes.default.number]),
+  "data-test": _propTypes.default.string,
+  mode: _propTypes.default.oneOf(["multiple", "tags"]),
+  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"]),
+  placeholder: _propTypes.default.string,
+  maxSelectForMultiSelect: _propTypes.default.number
+};
+CustomSelect.defaultProps = {
+  allText: null,
+  children: null,
+  defaultValue: [],
+  "data-test": null,
+  mode: null,
+  onSelectionChange: null,
+  options: [],
+  size: "middle",
+  placeholder: "",
+  maxSelectForMultiSelect: null
+};

package/build/components/oa-component-steps/CustomSteps.js

@@ -0,0 +1,117 @@
+"use strict";
+
+require("core-js/modules/es.object.assign.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.symbol.description.js");
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _antd = require("antd");
+var _utils = require("../../utils");
+var _styles = require("./styles");
+const _excluded = ["data", "data-test", "current", "direction", "size", "labelPlacement", "progressDot", "responsive", "onChange", "style"],
+  _excluded2 = ["key", "title", "subTitle", "description", "icon", "status", "disabled"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+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; }
+/**
+ * CustomSteps: Wrapper around Ant Design Steps with a data-driven API.
+ * - Parent controls current step and can customize via props.
+ * - Accepts `data.steps` array with step configs.
+ */
+function CustomSteps(_ref) {
+  var _data$steps;
+  let {
+      data,
+      'data-test': dataTest,
+      current,
+      direction,
+      size,
+      labelPlacement,
+      progressDot,
+      responsive,
+      onChange,
+      style
+    } = _ref,
+    antDesignProps = _objectWithoutProperties(_ref, _excluded);
+  const items = ((_data$steps = data === null || data === void 0 ? void 0 : data.steps) !== null && _data$steps !== void 0 ? _data$steps : []).map(_ref2 => {
+    let {
+        key,
+        title,
+        subTitle,
+        description,
+        icon,
+        status,
+        disabled
+      } = _ref2,
+      otherProps = _objectWithoutProperties(_ref2, _excluded2);
+    return _objectSpread({
+      key: key !== null && key !== void 0 ? key : (0, _utils.getUUID)(),
+      title: dataTest && ((0, _utils.isString)(title) || (0, _utils.isNumber)(title)) ? /*#__PURE__*/_react.default.createElement("span", {
+        "data-test": "".concat(dataTest, "--title-(").concat(title, ")")
+      }, title) : title,
+      subTitle,
+      description,
+      icon,
+      status,
+      disabled
+    }, otherProps);
+  });
+  return /*#__PURE__*/_react.default.createElement(_styles.StepsContainer, {
+    style: style
+  }, /*#__PURE__*/_react.default.createElement(_antd.Steps, _extends({
+    current: current,
+    direction: direction,
+    size: size,
+    labelPlacement: labelPlacement,
+    progressDot: progressDot,
+    responsive: responsive,
+    items: items,
+    onChange: onChange
+  }, antDesignProps)));
+}
+CustomSteps.propTypes = {
+  data: _propTypes.default.shape({
+    steps: _propTypes.default.arrayOf(_propTypes.default.shape({
+      key: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+      title: _propTypes.default.node,
+      subTitle: _propTypes.default.node,
+      description: _propTypes.default.node,
+      icon: _propTypes.default.node,
+      status: _propTypes.default.oneOf(['wait', 'process', 'finish', 'error']),
+      disabled: _propTypes.default.bool
+    }))
+  }),
+  'data-test': _propTypes.default.string,
+  current: _propTypes.default.number,
+  direction: _propTypes.default.oneOf(['horizontal', 'vertical']),
+  size: _propTypes.default.oneOf(['default', 'small']),
+  labelPlacement: _propTypes.default.oneOf(['horizontal', 'vertical']),
+  progressDot: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.func]),
+  responsive: _propTypes.default.bool,
+  onChange: _propTypes.default.func,
+  style: _propTypes.default.object
+};
+CustomSteps.defaultProps = {
+  data: {
+    steps: []
+  },
+  'data-test': null,
+  current: 0,
+  direction: 'horizontal',
+  size: 'default',
+  labelPlacement: 'horizontal',
+  progressDot: false,
+  responsive: true,
+  onChange: undefined,
+  style: {}
+};
+var _default = exports.default = CustomSteps;

package/build/components/oa-component-steps/styles.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.StepsContainer = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var _default = exports.default = {};
+const StepsContainer = exports.StepsContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\n"])));