sag_components 2.0.0-beta27 → 2.0.0-beta29

package/dist/stories/components/DropdownMulti.js

@@ -0,0 +1,290 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.DropdownMulti = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _Autocomplete = _interopRequireDefault(require("@mui/material/Autocomplete"));
+var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
+var _Checkbox = _interopRequireDefault(require("@mui/material/Checkbox"));
+var _styles = require("@mui/material/styles");
+var _CheckBoxOutlineBlank = _interopRequireDefault(require("@mui/icons-material/CheckBoxOutlineBlank"));
+var _CheckBox = _interopRequireDefault(require("@mui/icons-material/CheckBox"));
+var _ArrowDropDownIcon = require("./icons/ArrowDropDownIcon");
+var _DropdownMulti = require("./DropdownMulti.style");
+const icon = /*#__PURE__*/_react.default.createElement(_CheckBoxOutlineBlank.default, {
+  fontSize: "small"
+});
+const checkedIcon = /*#__PURE__*/_react.default.createElement(_CheckBox.default, {
+  fontSize: "small"
+});
+
+/**
+ *  SAG DropdownMulti
+ */
+const DropdownMulti = props => {
+  const {
+    name,
+    width = '100%',
+    size,
+    text,
+    shape,
+    placeHolder,
+    limitTagsOnMultiSelect,
+    showPopupIcon,
+    options,
+    onChange,
+    onInputChange,
+    labelColor = '#1B30AA',
+    required,
+    inputRef,
+    allowedInput = 'all',
+    reset = false,
+    disableClearable = false,
+    disabled = false,
+    dropdownListfontSize = '14px',
+    placeHolderFontSize = '14px',
+    dropdownMultiMaxWidth
+  } = props;
+  const [currentInputValue, setCurrentInputValue] = (0, _react.useState)(null);
+  const [selectedOptionsState, setSelectedOptionsState] = (0, _react.useState)([]);
+  (0, _react.useEffect)(() => {
+    setSelectedOptionsState([]);
+  }, [reset]);
+  (0, _react.useEffect)(() => {
+    const delayDebounceFn = setTimeout(() => {
+      onInputChange(currentInputValue);
+    }, 1000);
+    return () => clearTimeout(delayDebounceFn);
+  }, [currentInputValue]);
+  const theme = (0, _styles.createTheme)({
+    components: {
+      MuiFormLabel: {
+        styleOverrides: {
+          asterisk: {
+            color: '#db3131'
+          }
+        }
+      }
+    }
+  });
+
+  // ---------------------------- Multi Text Style -----------------------------------------
+  const getTextFieldStyleMulti = () => {
+    if (shape === 'round') {
+      // round
+      return {
+        '& .MuiOutlinedInput-root': {
+          borderRadius: '12px',
+          legend: {
+            marginLeft: '10px'
+          }
+          // '& .MuiAutocomplete-endAdornment': {
+          //   marginRight: '10px',
+          // },
+        },
+        '& .MuiAutocomplete-inputRoot': {
+          paddingLeft: '10px !important',
+          borderRadius: '12px',
+          // This matches the specificity of the default styles at https://github.com/mui-org/material-ui/blob/v4.11.3/packages/material-ui-lab/src/Autocomplete/Autocomplete.js#L90
+          '&[class*="MuiOutlinedInput-root"] .MuiAutocomplete-input:first-of-type': {
+            // Default left padding is 6px
+            paddingLeft: '10px'
+          },
+          '& .MuiOutlinedInput-notchedOutline': {
+            borderColor: '#E7E7E7'
+          },
+          '&:hover .MuiOutlinedInput-notchedOutline': {
+            borderColor: disabled ? '#E7E7E7' : labelColor
+          },
+          '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+            borderColor: disabled ? '#E7E7E7' : labelColor
+          }
+        },
+        '& .MuiInputLabel-outlined:not(.MuiInputLabel-shrink)': {
+          // Default transform is "translate(14px, 20px) scale(1)""
+          // This lines up the label with the initial cursor position in the input
+          // after changing its padding-left.
+          transform: 'translate(14px, 18px) scale(1);',
+          fontSize: '14px',
+          color: disabled ? '#E7E7E7' : currentInputValue && currentInputValue.length > 0 ? '#212121' : '#757575'
+        },
+        '& .MuiInputLabel-outlined': {
+          paddingLeft: '10px',
+          color: disabled ? '#E7E7E7' : labelColor,
+          fontSize: '18px'
+        },
+        '& .MuiInputLabel-shrink': {
+          marginLeft: '1px',
+          paddingLeft: '4px',
+          paddingRight: '6px',
+          background: 'white'
+        }
+      };
+    }
+    // square
+    return null;
+  };
+  const onInputChangeHandler = (event, newInputValue) => {
+    setCurrentInputValue({
+      syntheticBaseEvent: event,
+      inputValue: newInputValue
+    });
+  };
+  const onChangeHandler = (event, newValue) => {
+    // const newSelectedOptionsSet = new Set(newValue?.map((item) => item) ?? []);
+    // const newSelectedOptions = Array.from(newSelectedOptionsSet).map((item) => {
+    //   return item;
+    // });
+
+    const newSelectedOptions = newValue === null || newValue === void 0 ? void 0 : newValue.filter((value, index, self) => index === self.findIndex(item => item.id === value.id && item.label === value.label));
+    setSelectedOptionsState(newSelectedOptions);
+    onChange({
+      syntheticBaseEvent: event,
+      newValue: newSelectedOptions
+    });
+  };
+  const isInputAllowed = inputChar => {
+    const NUMERIC_REGEX = /^[0-9-]+$/;
+    const ALPHA_REGEX = /^[a-zA-Z]+$/;
+    const ALPHA_NUMERIC_REGEX = /^[a-zA-Z0-9-]+$/;
+    switch (allowedInput) {
+      case 'all':
+        return true;
+      case 'alpha':
+        if (ALPHA_REGEX.test(inputChar)) return true;
+        return false;
+      case 'numeric':
+        if (NUMERIC_REGEX.test(inputChar)) return true;
+        return false;
+      case 'alphaNumeric':
+        if (ALPHA_NUMERIC_REGEX.test(inputChar)) return true;
+        return false;
+      default:
+        return true;
+    }
+  };
+
+  // --------------------------------------- DropdownMulti--------------------------------
+  const getAutocompleteMulti = () => selectedOptionsState && /*#__PURE__*/_react.default.createElement(_styles.ThemeProvider, {
+    theme: theme
+  }, /*#__PURE__*/_react.default.createElement(_Autocomplete.default, {
+    class: name,
+    onChange: (event, newValue) => {
+      onChangeHandler(event, newValue);
+    },
+    onInputChange: (event, newInputValue) => {
+      onInputChangeHandler(event, newInputValue);
+    },
+    multiple: true,
+    style: {
+      maxWidth: dropdownMultiMaxWidth ? `${dropdownMultiMaxWidth}` : undefined
+    },
+    limitTags: limitTagsOnMultiSelect,
+    id: "checkboxes-tags",
+    options: options,
+    value: selectedOptionsState,
+    disabled: disabled,
+    disableCloseOnSelect: true,
+    disableClearable: disableClearable,
+    getOptionLabel: option => option.label,
+    popupIcon: showPopupIcon ? /*#__PURE__*/_react.default.createElement(_ArrowDropDownIcon.ArrowDropDownIcon, {
+      width: "0.5em",
+      height: "0.5em"
+    }) : null,
+    renderOption: (props, option, _ref) => {
+      let {
+        selected
+      } = _ref;
+      return /*#__PURE__*/_react.default.createElement("li", props, /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
+        icon: icon,
+        checkedIcon: checkedIcon,
+        checked: isOptionChecked(option)
+      }), option.label);
+    },
+    renderInput: params =>
+    /*#__PURE__*/
+    // showSearchIcon &&
+    _react.default.createElement(_TextField.default, Object.assign({}, params, {
+      variant: "outlined",
+      label: text,
+      size: size,
+      sx: getTextFieldStyleMulti(),
+      placeholder: placeHolder,
+      InputProps: {
+        ...params.InputProps,
+        style: {
+          fontSize: placeHolderFontSize,
+          fontFamily: 'Poppins'
+        }
+
+        //   endAdornment: (
+        //     <>
+        //       { selectedOptionsState && Object.values( selectedOptionsState)?.map((option, index) => (
+        //         <span key={index} style={{ margin: '0 5px' }}>
+        //           {option.label}
+        //         </span>
+        //       ))}
+        //       {params.InputProps.endAdornment}
+
+        //     </>
+        //   ),
+      },
+      onKeyDown: event => {
+        if (!isInputAllowed(event.key)) {
+          event.preventDefault();
+        }
+      },
+      inputRef: inputRef || null,
+      required: required
+    })),
+    ListboxProps: {
+      style: {
+        fontSize: dropdownListfontSize,
+        // default: 14px
+        fontFamily: 'Poppins'
+      }
+    }
+  }));
+  const isOptionChecked = option => {
+    var _Object$values;
+    if (selectedOptionsState && (_Object$values = Object.values(selectedOptionsState)) !== null && _Object$values !== void 0 && _Object$values.map(itemFilter => itemFilter.label).includes(option.label)) {
+      return true;
+    }
+    return false;
+  };
+
+  // --------------------------------- MAIN -------------------------------------
+  return /*#__PURE__*/_react.default.createElement(_DropdownMulti.DropdownContainer, {
+    className: "DropdownContainer",
+    width: width
+  }, getAutocompleteMulti());
+};
+exports.DropdownMulti = DropdownMulti;
+var _default = exports.default = DropdownMulti;
+DropdownMulti.defaultProps = {
+  name: 'MultiSelectLarge',
+  width: '500px',
+  size: 'large',
+  text: 'Retailer',
+  limitTagsOnMultiSelect: 2,
+  placeHolder: 'Type...',
+  shape: 'round',
+  showPopupIcon: true,
+  options: [],
+  onChange: () => {},
+  onInputChange: () => {},
+  labelColor: '#1B30AA',
+  required: true,
+  inputRef: undefined,
+  allowedInput: 'all',
+  disableClearable: false,
+  disabled: false,
+  reset: false,
+  dropdownListfontSize: '14px',
+  placeHolderFontSize: '14px',
+  dropdownMultiMaxWidth: undefined
+};

package/dist/stories/components/DropdownMulti.style.js

@@ -0,0 +1,17 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DropdownContainer = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+const DropdownContainer = exports.DropdownContainer = _styledComponents.default.div`
+  width: ${props => props.width};
+  text-align: left;  
+  position: relative; 
+  align-items: center;
+  justify-content: center;
+  font-family: "Poppins", sans-serif; 
+  font-size: 14px;  
+`;

package/dist/stories/components/DropdownMultiNew.js

@@ -0,0 +1,292 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.DropdownMultiNew = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _CloseXIcon = require("./icons/CloseXIcon");
+var _MenuItemUpIcon = require("./icons/MenuItemUpIcon");
+var _MenuItemOpenIcon = require("./icons/MenuItemOpenIcon");
+var _CheckBoxCheckedIcon = require("./icons/CheckBoxCheckedIcon");
+var _CheckBoxNotCheckedIcon = require("./icons/CheckBoxNotCheckedIcon");
+var _DropdownMultiNew = require("./DropdownMultiNew.style");
+const DropdownMultiNew = _ref => {
+  let {
+    label,
+    labelEmptyValue,
+    options,
+    selectedValue,
+    onChange,
+    required,
+    disabled,
+    width,
+    error,
+    errorMessage,
+    labelColor,
+    xIconShow,
+    checkBoxColor,
+    showLabelOnTop,
+    orderBy,
+    elementType
+  } = _ref;
+  const [isFocused, setIsFocused] = (0, _react.useState)(false);
+  const [showOptions, setShowOptions] = (0, _react.useState)(false);
+  const [inputValue, setInputValue] = (0, _react.useState)("");
+  const [selectedOptions, setSelectedOptions] = (0, _react.useState)([]);
+  const [hoverInputContainer, setHoverInputContainer] = (0, _react.useState)(false);
+  const [hoverOptionsContainer, setHoverOptionsContainer] = (0, _react.useState)(false);
+  const inputRef = (0, _react.useRef)(null);
+  const containerRef = (0, _react.useRef)(null);
+  let filteredOptions = options === null || options === void 0 ? void 0 : options.filter(option => option.label.toLowerCase().includes(inputValue.toLowerCase()));
+  switch (orderBy) {
+    case "asc":
+      filteredOptions = filteredOptions.sort((a, b) => a.label.localeCompare(b.label));
+      break;
+    case "element":
+      if (elementType === "number") {
+        filteredOptions = filteredOptions.sort((a, b) => a.element - b.element);
+      } else {
+        filteredOptions = filteredOptions.sort((a, b) => {
+          const dateA = new Date(a.element.split("-").reverse().join("-"));
+          const dateB = new Date(b.element.split("-").reverse().join("-"));
+          return dateB - dateA;
+        });
+      }
+      break;
+    default:
+      break;
+  }
+  (0, _react.useEffect)(() => {
+    if (selectedValue) {
+      setSelectedOptions(selectedValue);
+    }
+  }, [selectedValue]);
+  (0, _react.useEffect)(() => {
+    if (isFocused && inputRef !== null && inputRef !== void 0 && inputRef.current) {
+      var _inputRef$current;
+      inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+    }
+  }, [isFocused]);
+  (0, _react.useEffect)(() => {
+    if (!hoverInputContainer && !hoverOptionsContainer) {
+      setIsFocused(false);
+      setShowOptions(false);
+    }
+  }, [hoverInputContainer, hoverOptionsContainer]);
+  const handleFocus = () => {
+    setIsFocused(true);
+    setShowOptions(true);
+  };
+  const toggleOption = option => {
+    if (disabled) return;
+    const selectedIndex = selectedOptions.findIndex(selectedOption => selectedOption.value === option.value);
+    let newDropdownedOptions;
+    if (selectedIndex === -1) {
+      newDropdownedOptions = [...selectedOptions, option];
+      setSelectedOptions([...selectedOptions, option]);
+    } else {
+      newDropdownedOptions = [...selectedOptions];
+      newDropdownedOptions.splice(selectedIndex, 1);
+      setSelectedOptions(newDropdownedOptions);
+    }
+    onChange({
+      newValue: newDropdownedOptions
+    });
+  };
+  const handleInputChange = e => {
+    setIsFocused(true);
+    setInputValue(e.target.value);
+  };
+  const isDropdowned = option => {
+    if (!selectedOptions || (selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) === 0 || !Array.isArray(selectedOptions)) return false;
+    const result = selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.some(selectedOption => selectedOption.value === option.value);
+    return result;
+  };
+  const handleLabelClick = () => {
+    if (disabled) return;
+    setIsFocused(true);
+    setShowOptions(true);
+  };
+  const handleOpenCloseMenuClick = () => {
+    if (disabled) return;
+    if (showOptions) {
+      setShowOptions(false);
+      setIsFocused(false);
+    } else {
+      setShowOptions(true);
+      setIsFocused(true);
+    }
+  };
+  const handleClearClick = () => {
+    if (disabled) return;
+    setSelectedOptions([]);
+    setIsFocused(true);
+    if (inputRef !== null && inputRef !== void 0 && inputRef.current) {
+      var _inputRef$current2;
+      inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus();
+    }
+    onChange({
+      newValue: []
+    });
+  };
+  const displaySelectedOptions = () => {
+    const content = /*#__PURE__*/_react.default.createElement(_DropdownMultiNew.SelectedOptionsContainer, {
+      className: "SelectedOptionsContainer"
+    }, selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.map((option, index) => {
+      var _option$label, _option$label2;
+      return index < 2 ? /*#__PURE__*/_react.default.createElement(_DropdownMultiNew.SelectedOptionItem, {
+        className: "SelectedOptionItem",
+        key: option.value,
+        onClick: () => {
+          toggleOption(option);
+          setIsFocused(true);
+          if (inputRef !== null && inputRef !== void 0 && inputRef.current) {
+            var _inputRef$current3;
+            inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.focus();
+          }
+        }
+      }, option.label && ((_option$label = option.label) === null || _option$label === void 0 ? void 0 : _option$label.length) > 10 ? `${(_option$label2 = option.label) === null || _option$label2 === void 0 ? void 0 : _option$label2.substring(0, 10)}...  ` : `${option.label}  `, /*#__PURE__*/_react.default.createElement(_CloseXIcon.CloseXIcon, {
+        width: "8px",
+        height: "8px",
+        fill: "#212121"
+      })) : " ";
+    }), selectedOptions.length > 2 ? /*#__PURE__*/_react.default.createElement(_DropdownMultiNew.SelectedOptionItem, {
+      className: "SelectedOptionItem"
+    }, selectedOptions.length - 2, "+") : "");
+    return content;
+  };
+  const getLabel = () => {
+    if (!showLabelOnTop && isFocused) {
+      return "";
+    }
+    if ((selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) > 0) {
+      return label;
+    }
+    return labelEmptyValue;
+  };
+  const getRequired = () => {
+    if (!showLabelOnTop && isFocused) {
+      return "";
+    }
+    if (!showLabelOnTop && !label && (selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) > 0) {
+      return "";
+    }
+    if (required) {
+      return /*#__PURE__*/_react.default.createElement("span", {
+        style: {
+          color: "red"
+        }
+      }, "*");
+    }
+    return "";
+  };
+  return /*#__PURE__*/_react.default.createElement(_DropdownMultiNew.DropdownWrapper, {
+    className: "DropdownWrapper",
+    width: width,
+    onMouseEnter: () => setHoverInputContainer(true),
+    onMouseLeave: () => setHoverInputContainer(false)
+  }, /*#__PURE__*/_react.default.createElement(_DropdownMultiNew.InputContainer, {
+    className: "InputContainer",
+    labelColor: labelColor,
+    disabled: disabled,
+    error: error,
+    isFocused: isFocused
+  }, /*#__PURE__*/_react.default.createElement(_DropdownMultiNew.InputSubContainer, {
+    className: "InputSubContainer",
+    ref: containerRef,
+    labelColor: labelColor,
+    disabled: disabled,
+    error: error,
+    onClick: handleLabelClick
+  }, /*#__PURE__*/_react.default.createElement(_DropdownMultiNew.Label, {
+    className: "Label",
+    isFocused: isFocused,
+    labelColor: labelColor,
+    hasValue: (selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) > 0 || inputValue,
+    disabled: disabled,
+    error: error,
+    errorMessage: errorMessage,
+    onClick: handleLabelClick,
+    showLabelOnTop: showLabelOnTop
+  }, getLabel(), getRequired()), displaySelectedOptions(), showOptions ? /*#__PURE__*/_react.default.createElement(_DropdownMultiNew.StyledInput, {
+    className: "StyledInput",
+    ref: inputRef,
+    value: inputValue,
+    onChange: handleInputChange,
+    onFocus: handleFocus,
+    onClick: handleLabelClick,
+    type: "search",
+    disabled: disabled,
+    placeholder: isFocused ? filteredOptions.length <= 5 ? "Select Option…" : "Type To Search" : "",
+    error: error,
+    isFocused: isFocused
+  }) : " "), selectedOptions.length > 0 && xIconShow && /*#__PURE__*/_react.default.createElement(_DropdownMultiNew.IconContainer, {
+    className: "IconContainer",
+    onClick: handleClearClick
+  }, /*#__PURE__*/_react.default.createElement(_CloseXIcon.CloseXIcon, {
+    width: "12px",
+    height: "12px",
+    fill: "#B1B1B1"
+  })), /*#__PURE__*/_react.default.createElement(_DropdownMultiNew.IconContainer, {
+    className: "IconContainer",
+    onClick: handleOpenCloseMenuClick
+  }, showOptions ? /*#__PURE__*/_react.default.createElement(_MenuItemUpIcon.MenuItemUpIcon, {
+    width: "12px",
+    height: "12px",
+    color: "#B1B1B1"
+  }) : /*#__PURE__*/_react.default.createElement(_MenuItemOpenIcon.MenuItemOpenIcon, {
+    width: "12px",
+    height: "12px",
+    color: "#B1B1B1"
+  }))), error && (errorMessage === null || errorMessage === void 0 ? void 0 : errorMessage.length) > 0 && /*#__PURE__*/_react.default.createElement(_DropdownMultiNew.ErrorMessage, null, errorMessage), /*#__PURE__*/_react.default.createElement(_DropdownMultiNew.OptionsContainer, {
+    className: "OptionsContainer",
+    onMouseEnter: () => setHoverOptionsContainer(true),
+    onMouseLeave: () => setHoverOptionsContainer(false),
+    showoptions: showOptions,
+    disabled: disabled,
+    filteredoptions: filteredOptions
+  }, /*#__PURE__*/_react.default.createElement(_DropdownMultiNew.OptionsSubContainer, {
+    className: "OptionsSubContainer",
+    showoptions: showOptions,
+    disabled: disabled,
+    filteredoptions: filteredOptions
+  }, filteredOptions.map(option => /*#__PURE__*/_react.default.createElement(_DropdownMultiNew.OptionItem, {
+    className: "OptionItem",
+    key: option.value,
+    onClick: () => toggleOption(option),
+    selected: isDropdowned(option)
+  }, " ", /*#__PURE__*/_react.default.createElement(_DropdownMultiNew.IconContainer, {
+    className: "IconContainer"
+  }, selectedOptions.find(itemSelectedOptions => option.value === itemSelectedOptions.value) ? /*#__PURE__*/_react.default.createElement(_CheckBoxCheckedIcon.CheckBoxCheckedIcon, {
+    width: "14px",
+    height: "14px",
+    color: disabled ? "#888" : checkBoxColor
+  }) : /*#__PURE__*/_react.default.createElement(_CheckBoxNotCheckedIcon.CheckBoxNotCheckedIcon, {
+    width: "14px",
+    height: "14px",
+    color: disabled ? "#888" : "#212121"
+  })), option.label)))));
+};
+exports.DropdownMultiNew = DropdownMultiNew;
+var _default = exports.default = DropdownMultiNew;
+DropdownMultiNew.defaultProps = {
+  placeHolder: "Type To Search",
+  label: "Label",
+  labelEmptyValue: "All Labels",
+  labelColor: "#066768",
+  checkBoxColor: "#229E38",
+  required: true,
+  width: "300px",
+  disabled: false,
+  error: false,
+  errorMessage: "",
+  options: [],
+  selectedValue: [],
+  xIconShow: true,
+  onChange: () => {},
+  showLabelOnTop: true,
+  orderBy: "asc",
+  elementType: "number"
+};