sag_components 1.0.87 → 1.0.89

package/dist/stories/components/Dropdown.js

@@ -19,7 +19,7 @@ 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 _ArrowDropDownIcon = _interopRequireDefault(require("./icons/ArrowDropDownIcon.jsx"));
+var _ArrowDropDownIcon = require("./icons/ArrowDropDownIcon");
 //import PropTypes from "prop-types";
 
 // import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -53,10 +53,14 @@ var Dropdown = function Dropdown(_ref) {
     onInputChange = _ref.onInputChange,
     _ref$labelColor = _ref.labelColor,
     labelColor = _ref$labelColor === void 0 ? "#1B30AA" : _ref$labelColor,
-    required = _ref.required;
+    required = _ref.required,
+    defaultValue = _ref.defaultValue,
+    _ref$allowedInput = _ref.allowedInput,
+    allowedInput = _ref$allowedInput === void 0 ? "all" : _ref$allowedInput;
   /**
    *  SAG Dropdown
    */
+
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     currentInputValue = _useState2[0],
@@ -131,6 +135,31 @@ var Dropdown = function Dropdown(_ref) {
       newValue: newValue
     });
   };
+  var getOptionByLabel = function getOptionByLabel(label) {
+    if (!options) return null;
+    var foundOption = options.find(function (item) {
+      return item.label == label;
+    });
+    if (!foundOption) return null;
+    return foundOption;
+  };
+  var isInputAllowed = function isInputAllowed(inputChar) {
+    var NUMERIC_REGEX = /^[0-9-]+$/;
+    var ALPHA_REGEX = /^[a-zA-Z]+$/;
+    var ALPHA_NUMERIC_REGEX = /^[a-zA-Z0-9-]+$/;
+    switch (allowedInput) {
+      case "all":
+        return true;
+      case "alpha":
+        if (ALPHA_REGEX.test(inputChar)) return true;else return false;
+      case "numeric":
+        if (NUMERIC_REGEX.test(inputChar)) return true;else return false;
+      case "alphaNumeric":
+        if (ALPHA_NUMERIC_REGEX.test(inputChar)) return true;else return false;
+      default:
+        return true;
+    }
+  };
   var getAutocompleteSingle = function getAutocompleteSingle() {
     return /*#__PURE__*/_react.default.createElement(_styles.ThemeProvider, {
       theme: theme
@@ -142,18 +171,24 @@ var Dropdown = function Dropdown(_ref) {
         onInputChangeHandler(event, newInputValue);
       },
       disablePortal: true,
+      defaultValue: defaultValue && getOptionByLabel(defaultValue) != null ? getOptionByLabel(defaultValue) : null,
       id: "combo-box",
       options: options,
       sx: {
         width: width
       },
-      popupIcon: showPopupIcon ? /*#__PURE__*/_react.default.createElement(_ArrowDropDownIcon.default, {
+      popupIcon: showPopupIcon ? /*#__PURE__*/_react.default.createElement(_ArrowDropDownIcon.ArrowDropDownIcon, {
         width: "0.6em",
         height: "0.6em"
       }) : null,
       forcePopupIcon: "auto",
       renderInput: function renderInput(params) {
         return /*#__PURE__*/_react.default.createElement(_TextField.default, Object.assign({}, params, {
+          onKeyDown: function onKeyDown(event) {
+            if (!isInputAllowed(event.key)) {
+              event.preventDefault();
+            }
+          },
           required: required,
           label: text,
           size: size,
@@ -172,7 +207,7 @@ var Dropdown = function Dropdown(_ref) {
           }),
           InputLabelProps: {
             style: {
-              color: labelColor,
+              //color: labelColor,
               fontSize: "14px",
               fontFamily: "Lato"
             }
@@ -210,7 +245,7 @@ var Dropdown = function Dropdown(_ref) {
       getOptionLabel: function getOptionLabel(option) {
         return option.label;
       },
-      popupIcon: showPopupIcon ? /*#__PURE__*/_react.default.createElement(_ArrowDropDownIcon.default, {
+      popupIcon: showPopupIcon ? /*#__PURE__*/_react.default.createElement(_ArrowDropDownIcon.ArrowDropDownIcon, {
         width: "0.6em",
         height: "0.6em"
       }) : null,
@@ -233,6 +268,11 @@ var Dropdown = function Dropdown(_ref) {
           size: size,
           sx: getTextFieldStyle(),
           placeholder: placeHolder,
+          onKeyDown: function onKeyDown(event) {
+            if (!isInputAllowed(event.key)) {
+              event.preventDefault();
+            }
+          },
           required: required,
           InputProps: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, params.InputProps), {}, {
             style: {
@@ -247,7 +287,7 @@ var Dropdown = function Dropdown(_ref) {
           }),
           InputLabelProps: {
             style: {
-              color: labelColor,
+              //color: labelColor,
               fontSize: "16px",
               fontFamily: "Lato"
             }
@@ -257,10 +297,15 @@ var Dropdown = function Dropdown(_ref) {
           size: size,
           sx: getTextFieldStyle(),
           placeholder: placeHolder,
+          onKeyDown: function onKeyDown(event) {
+            if (!isInputAllowed(event.key)) {
+              event.preventDefault();
+            }
+          },
           required: required,
           InputLabelProps: {
             style: {
-              color: labelColor,
+              //color: labelColor,
               fontSize: "16px",
               fontFamily: "Lato"
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sag_components",
-  "version": "1.0.87",
+  "version": "1.0.89",
   "description": "",
   "main": "dist/index.js",
   "scripts": {