sag_components 1.0.139 → 1.0.140

package/dist/stories/components/TextField.js

@@ -0,0 +1,197 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TextField = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _TextFieldStyle = require("./TextField.style.js");
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
+var _OutlinedInput = _interopRequireDefault(require("@mui/material/OutlinedInput"));
+var _InputLabel = _interopRequireDefault(require("@mui/material/InputLabel"));
+var _InputAdornment = _interopRequireDefault(require("@mui/material/InputAdornment"));
+var _FormControl = _interopRequireDefault(require("@mui/material/FormControl"));
+var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
+var _Visibility = _interopRequireDefault(require("@mui/icons-material/Visibility"));
+var _VisibilityOff = _interopRequireDefault(require("@mui/icons-material/VisibilityOff"));
+var _styles = require("@mui/material/styles");
+/**
+ *  SAG TextField
+ */
+var TextField = function TextField(_ref) {
+  var _ref$width = _ref.width,
+    width = _ref$width === void 0 ? "100%" : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? "100%" : _ref$height,
+    label = _ref.label,
+    shape = _ref.shape,
+    _ref$placeHolder = _ref.placeHolder,
+    placeHolder = _ref$placeHolder === void 0 ? "Type..." : _ref$placeHolder,
+    _ref$passwordField = _ref.passwordField,
+    passwordField = _ref$passwordField === void 0 ? false : _ref$passwordField,
+    defaultValue = _ref.defaultValue,
+    resetDefaultValue = _ref.resetDefaultValue,
+    required = _ref.required,
+    inputRef = _ref.inputRef,
+    _ref$allowedInput = _ref.allowedInput,
+    allowedInput = _ref$allowedInput === void 0 ? "all" : _ref$allowedInput,
+    onChange = _ref.onChange;
+  var _useState = (0, _react.useState)(null),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    currentInputValue = _useState2[0],
+    setCurrentInputValue = _useState2[1];
+  var _React$useState = _react.default.useState(false),
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    showPassword = _React$useState2[0],
+    setShowPassword = _React$useState2[1];
+  var handleClickShowPassword = function handleClickShowPassword() {
+    return setShowPassword(function (show) {
+      return !show;
+    });
+  };
+  (0, _react.useEffect)(function () {
+    var delayDebounceFn = setTimeout(function () {
+      onChange(currentInputValue);
+    }, 1000);
+    return function () {
+      return clearTimeout(delayDebounceFn);
+    };
+  }, [currentInputValue]);
+  var onChangeHandler = function onChangeHandler(event) {
+    setCurrentInputValue({
+      event: event,
+      value: event.target.value
+    });
+  };
+  var theme = (0, _styles.createTheme)({
+    components: {
+      MuiFormLabel: {
+        styleOverrides: {
+          asterisk: {
+            color: "#db3131"
+          }
+        }
+      }
+    }
+  });
+  var handleMouseDownPassword = function handleMouseDownPassword(event) {
+    event.preventDefault();
+  };
+
+  //defines shape: squire or round
+  var getTextFieldStyle = function getTextFieldStyle() {
+    if (shape === "round") {
+      // round
+      return {
+        "& .MuiOutlinedInput-root": {
+          //m: 1,
+          width: {
+            width: width
+          },
+          height: {
+            height: height
+          },
+          paddingTop: 0,
+          marginTop: 0,
+          borderRadius: "12px",
+          legend: {
+            marginLeft: "6px"
+          }
+        },
+        "& .MuiAutocomplete-inputRoot": {
+          paddingLeft: "10px !important",
+          borderRadius: "12px"
+        },
+        "& .MuiInputLabel-outlined": {
+          paddingLeft: "10px"
+        },
+        "& .MuiInputLabel-shrink": {
+          marginLeft: "1px",
+          paddingLeft: "4px",
+          paddingRight: 0,
+          background: "white"
+        }
+      };
+    } else {
+      //square
+      return null;
+    }
+  };
+  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;
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_TextFieldStyle.TextFieldContainer, {
+    width: width
+  }, /*#__PURE__*/_react.default.createElement(_styles.ThemeProvider, {
+    theme: theme
+  }, /*#__PURE__*/_react.default.createElement(_Box.default, {
+    sx: {
+      display: "flex",
+      flexWrap: "wrap"
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", null, !passwordField && /*#__PURE__*/_react.default.createElement(_TextField.default, {
+    key: resetDefaultValue,
+    label: label,
+    defaultValue: defaultValue,
+    placeHolder: placeHolder,
+    id: "outlined-start-adornment",
+    sx: getTextFieldStyle(),
+    required: required,
+    inputRef: inputRef !== null && inputRef !== void 0 ? inputRef : null,
+    onKeyDown: function onKeyDown(event) {
+      if (!isInputAllowed(event.key)) {
+        event.preventDefault();
+      }
+    },
+    onChange: function onChange(event) {
+      onChangeHandler(event);
+    }
+  }), passwordField && /*#__PURE__*/_react.default.createElement(_FormControl.default, {
+    sx: getTextFieldStyle(),
+    variant: "outlined"
+  }, /*#__PURE__*/_react.default.createElement(_InputLabel.default, {
+    htmlFor: "outlined-adornment-password"
+  }, label), /*#__PURE__*/_react.default.createElement(_OutlinedInput.default, {
+    id: "outlined-adornment-password",
+    type: showPassword ? "text" : "password",
+    endAdornment: /*#__PURE__*/_react.default.createElement(_InputAdornment.default, {
+      position: "end"
+    }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+      "aria-label": "toggle password visibility",
+      onClick: handleClickShowPassword,
+      onMouseDown: handleMouseDownPassword,
+      edge: "end"
+    }, showPassword ? /*#__PURE__*/_react.default.createElement(_Visibility.default, null) : /*#__PURE__*/_react.default.createElement(_VisibilityOff.default, null))),
+    label: label,
+    inputRef: inputRef !== null && inputRef !== void 0 ? inputRef : null,
+    onKeyDown: function onKeyDown(event) {
+      if (!isInputAllowed(event.key)) {
+        event.preventDefault();
+      }
+    },
+    onChange: function onChange(event) {
+      onChangeHandler(event);
+    }
+  }))))));
+};
+exports.TextField = TextField;
+var _default = TextField;
+exports.default = _default;

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

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TextFieldContainer = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject;
+//import './font.css';
+
+var TextFieldContainer = _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.TextFieldContainer = TextFieldContainer;

package/package.json

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