sag_components 1.0.85 → 1.0.86-7.2

package/dist/stories/components/Dropdown.js

@@ -1,257 +1,231 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 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.Dropdown = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
-var _DropdownStyle = require("./Dropdown.style.js");
 var _Autocomplete = _interopRequireDefault(require("@mui/material/Autocomplete"));
 var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
 var _Checkbox = _interopRequireDefault(require("@mui/material/Checkbox"));
 var _InputAdornment = _interopRequireDefault(require("@mui/material/InputAdornment"));
-var _Icon = _interopRequireDefault(require("@mui/material/Icon"));
+var _styles = require("@mui/material/styles");
 var _CheckBoxOutlineBlank = _interopRequireDefault(require("@mui/icons-material/CheckBoxOutlineBlank"));
 var _CheckBox = _interopRequireDefault(require("@mui/icons-material/CheckBox"));
-var _Search = _interopRequireDefault(require("@mui/icons-material/Search.js"));
-var _ArrowDropDown = _interopRequireDefault(require("@mui/icons-material/ArrowDropDown.js"));
-//import PropTypes from "prop-types";
-
-// import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-// import { faChevronDown, faAsterisk } from "@fortawesome/free-solid-svg-icons";
-var icon = /*#__PURE__*/_react.default.createElement(_CheckBoxOutlineBlank.default, {
+var _Search = _interopRequireDefault(require("@mui/icons-material/Search"));
+var _ArrowDropDownIcon = require("./icons/ArrowDropDownIcon");
+var _Dropdown = require("./Dropdown.style");
+const icon = /*#__PURE__*/_react.default.createElement(_CheckBoxOutlineBlank.default, {
   fontSize: "small"
 });
-var checkedIcon = /*#__PURE__*/_react.default.createElement(_CheckBox.default, {
+const checkedIcon = /*#__PURE__*/_react.default.createElement(_CheckBox.default, {
   fontSize: "small"
 });
 
-// import './fonts/Lato-Regular.ttf';
+// import './fonts/Poppins-Regular.ttf';
 
 /**
  *  SAG Dropdown
  */
-var Dropdown = function Dropdown(_ref) {
-  var _ref$width = _ref.width,
-    width = _ref$width === void 0 ? "300px" : _ref$width,
-    size = _ref.size,
-    text = _ref.text,
-    shape = _ref.shape,
-    placeHolder = _ref.placeHolder,
-    multiSelect = _ref.multiSelect,
-    limitTagsOnMultiSelect = _ref.limitTagsOnMultiSelect,
-    showPopupIcon = _ref.showPopupIcon,
-    showSearchIcon = _ref.showSearchIcon,
-    options = _ref.options,
-    onChange = _ref.onChange,
-    onInputChange = _ref.onInputChange,
-    _ref$labelColor = _ref.labelColor,
-    labelColor = _ref$labelColor === void 0 ? "#1B30AA" : _ref$labelColor;
+const Dropdown = _ref => {
+  let {
+    width = '100%',
+    size,
+    text,
+    shape,
+    placeHolder,
+    multiSelect,
+    showPopupIcon,
+    showSearchIcon,
+    options,
+    onChange,
+    onInputChange,
+    labelColor = '#1B30AA',
+    required,
+    inputRef,
+    defaultValue,
+    allowedInput = 'all',
+    reset = false,
+    disableClearable = false,
+    disabled = false,
+    dropdownListfontSize = '14px',
+    placeHolderFontSize = '14px'
+  } = _ref;
   /**
    *  SAG Dropdown
    */
-  var _useState = (0, _react.useState)(null),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    currentInputValue = _useState2[0],
-    setCurrentInputValue = _useState2[1];
-  var _useState3 = (0, _react.useState)(null),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    currentOption = _useState4[0],
-    setCurrentOption = _useState4[1];
-  (0, _react.useEffect)(function () {
-    var delayDebounceFn = setTimeout(function () {
+
+  const [currentInputValue, setCurrentInputValue] = (0, _react.useState)(null);
+  const [selectedOptionsState, setSelectedOptionsState] = (0, _react.useState)();
+  (0, _react.useEffect)(() => {
+    const delayDebounceFn = setTimeout(() => {
       onInputChange(currentInputValue);
     }, 1000);
-    return function () {
-      return clearTimeout(delayDebounceFn);
-    };
+    return () => clearTimeout(delayDebounceFn);
   }, [currentInputValue]);
+  const theme = (0, _styles.createTheme)({
+    components: {
+      MuiFormLabel: {
+        styleOverrides: {
+          asterisk: {
+            color: '#db3131'
+          }
+        }
+      }
+    }
+  });
 
-  //defines shape: squire or round
-  var getTextFieldStyle = function getTextFieldStyle() {
-    if (shape === "round") {
+  // Single Text Style
+  const getTextFieldStyleSingle = () => {
+    if (shape === 'round') {
       // round
       return {
-        "& .MuiOutlinedInput-root": {
-          borderRadius: "12px",
+        '& .MuiOutlinedInput-root': {
+          borderRadius: '12px',
           legend: {
-            marginLeft: "60px"
+            marginLeft: '10px'
           }
         },
-        "& .MuiAutocomplete-inputRoot": {
-          paddingLeft: "20px !important",
-          borderRadius: "12px"
+        '& .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: "20px"
+        '& .MuiInputLabel-outlined': {
+          paddingLeft: '10px',
+          color: disabled ? '#E7E7E7' : labelColor,
+          fontSize: '18px'
         },
-        "& .MuiInputLabel-shrink": {
-          marginLeft: "20px",
-          paddingLeft: "10px",
-          paddingRight: 0,
-          background: "white"
+        '& .MuiInputLabel-shrink': {
+          marginLeft: '1px',
+          paddingLeft: '4px',
+          paddingRight: '6px',
+          background: 'white'
         }
       };
-    } else {
-      //square
-      return null;
     }
+    // square
+    return null;
   };
-  var onInputChangeHandler = function onInputChangeHandler(event, newInputValue) {
+  const onInputChangeHandler = (event, newInputValue) => {
     setCurrentInputValue({
       syntheticBaseEvent: event,
       inputValue: newInputValue
     });
   };
-  var onChangeHandler = function onChangeHandler(event, newValue) {
-    setCurrentOption({
-      syntheticBaseEvent: event,
-      newValue: newValue
-    });
+  const onChangeHandler = (event, newValue) => {
+    setSelectedOptionsState(newValue);
     onChange({
       syntheticBaseEvent: event,
-      newValue: newValue
+      newValue
     });
   };
-  var getAutocompleteSingle = function getAutocompleteSingle() {
-    return /*#__PURE__*/_react.default.createElement(_Autocomplete.default, {
-      onChange: function onChange(event, newValue) {
+  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;
+    }
+  };
+
+  // --------------------------------------- DROPDOWN SINGLE --------------------------------
+  const getAutocompleteSingle = () => {
+    return /*#__PURE__*/_react.default.createElement(_styles.ThemeProvider, {
+      theme: theme
+    }, /*#__PURE__*/_react.default.createElement(_Autocomplete.default, {
+      key: reset,
+      onChange: (event, newValue) => {
         onChangeHandler(event, newValue);
       },
-      onInputChange: function onInputChange(event, newInputValue) {
+      onInputChange: (event, newInputValue) => {
         onInputChangeHandler(event, newInputValue);
       },
+      disabled: disabled,
       disablePortal: true,
+      disableClearable: disableClearable,
+      defaultValue: defaultValue,
       id: "combo-box",
       options: options,
-      sx: {
-        width: width
-      },
-      popupIcon: showPopupIcon ? /*#__PURE__*/_react.default.createElement(_ArrowDropDown.default, null) : null,
+      popupIcon: showPopupIcon ? /*#__PURE__*/_react.default.createElement(_ArrowDropDownIcon.ArrowDropDownIcon, {
+        width: "0.5em",
+        height: "0.5em"
+      }) : null,
       forcePopupIcon: "auto",
-      renderInput: function renderInput(params) {
-        return /*#__PURE__*/_react.default.createElement(_TextField.default, Object.assign({}, params, {
-          label: text,
-          size: size,
-          sx: getTextFieldStyle(),
-          placeholder: placeHolder,
-          InputProps: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, params.InputProps), {}, {
-            style: {
-              fontSize: "14px",
-              fontFamily: "Lato"
-            },
-            startAdornment: showSearchIcon ? /*#__PURE__*/_react.default.createElement(_InputAdornment.default, {
-              position: "start"
-            }, /*#__PURE__*/_react.default.createElement(_Search.default, {
-              fontSize: "medium"
-            })) : null
-          }),
-          InputLabelProps: {
-            style: {
-              color: labelColor,
-              fontSize: "16px",
-              fontFamily: "Lato"
-            }
+      renderInput: params => /*#__PURE__*/_react.default.createElement(_TextField.default, Object.assign({}, params, {
+        onKeyDown: event => {
+          if (!isInputAllowed(event.key)) {
+            event.preventDefault();
           }
-        }));
-      },
-      ListboxProps: {
-        style: {
-          fontSize: "14px",
-          fontFamily: "Lato"
-        }
-      }
-    });
-  };
-  var getAutocompleteMulti = function getAutocompleteMulti() {
-    return /*#__PURE__*/_react.default.createElement(_Autocomplete.default, {
-      style: {
-        width: width
-      },
-      onChange: function onChange(event, newValue) {
-        onChangeHandler(event, newValue);
-      },
-      onInputChange: function onInputChange(event, newInputValue) {
-        onInputChangeHandler(event, newInputValue);
-      },
-      multiple: true,
-      limitTags: limitTagsOnMultiSelect
-      //size={size}
-      ,
-      id: "checkboxes-tags",
-      options: options,
-      disableCloseOnSelect: true,
-      getOptionLabel: function getOptionLabel(option) {
-        return option.label;
-      },
-      popupIcon: showPopupIcon ? /*#__PURE__*/_react.default.createElement(_ArrowDropDown.default, null) : null,
-      renderOption: function renderOption(props, option, _ref2) {
-        var selected = _ref2.selected;
-        return /*#__PURE__*/_react.default.createElement("li", props, /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
-          icon: icon,
-          checkedIcon: checkedIcon,
+        },
+        required: required,
+        label: text,
+        inputRef: inputRef || null,
+        size: size,
+        sx: getTextFieldStyleSingle(),
+        placeholder: placeHolder,
+        InputProps: {
+          ...params.InputProps,
           style: {
-            marginRight: 8,
-            fontSize: "14px",
-            fontFamily: "Lato"
+            fontSize: placeHolderFontSize,
+            fontFamily: 'Poppins'
           },
-          checked: selected
-        }), option.label);
-      },
-      renderInput: function renderInput(params) {
-        return showSearchIcon && (!currentOption || currentOption && currentOption.length === 0) ? /*#__PURE__*/_react.default.createElement(_TextField.default, Object.assign({}, params, {
-          label: text,
-          size: size,
-          sx: getTextFieldStyle(),
-          placeholder: placeHolder,
-          InputProps: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, params.InputProps), {}, {
-            style: {
-              fontSize: "16px",
-              fontFamily: "Lato"
-            },
-            startAdornment: /*#__PURE__*/_react.default.createElement(_InputAdornment.default, {
-              position: "start"
-            }, /*#__PURE__*/_react.default.createElement(_Search.default, {
-              fontSize: "medium"
-            }))
-          }),
-          InputLabelProps: {
-            style: {
-              color: labelColor,
-              fontSize: "16px",
-              fontFamily: "Lato"
-            }
-          }
-        })) : /*#__PURE__*/_react.default.createElement(_TextField.default, Object.assign({}, params, {
-          label: text,
-          size: size,
-          sx: getTextFieldStyle(),
-          placeholder: placeHolder,
-          InputLabelProps: {
-            style: {
-              color: labelColor,
-              fontSize: "16px",
-              fontFamily: "Lato"
-            }
-          }
-        }));
-      },
+          startAdornment: showSearchIcon ? /*#__PURE__*/_react.default.createElement(_InputAdornment.default, {
+            position: "start"
+          }, /*#__PURE__*/_react.default.createElement(_Search.default, {
+            fontSize: "medium"
+          })) : null
+        }
+      })),
       ListboxProps: {
         style: {
-          fontSize: "14px",
-          fontFamily: "Lato"
+          fontSize: dropdownListfontSize,
+          // default: 14px
+          fontFamily: 'Poppins'
         }
       }
-    });
+    }));
   };
-  return /*#__PURE__*/_react.default.createElement(_DropdownStyle.DropdownContainer, {
+
+  // --------------------------------- MAIN -------------------------------------
+  return /*#__PURE__*/_react.default.createElement(_Dropdown.DropdownContainer, {
     width: width
-  }, multiSelect ? getAutocompleteMulti() : getAutocompleteSingle());
+  }, getAutocompleteSingle());
 };
 exports.Dropdown = Dropdown;
-var _default = Dropdown;
-exports.default = _default;
+var _default = exports.default = Dropdown;

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

@@ -8,9 +8,4 @@ exports.DropdownContainer = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject;
-//import './font.css';
-
-var DropdownContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: ", ";  \n  text-align: left;  \n  position: relative; \n  align-items: center;\n  justify-content: center;\n  font-family: Lato;  \n  font-size: \"14px\";\n"])), function (props) {
-  return props.width;
-});
-exports.DropdownContainer = DropdownContainer;
+const DropdownContainer = exports.DropdownContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: ", ";  \n  text-align: left;  \n  position: relative; \n  align-items: center;\n  justify-content: center;\n  font-family: Poppins;\n  font-size: 14px;\n"])), props => props.width);