tenjin-ui-kit 0.2.64 → 0.2.66

package/components/InputWithChip/index.js

@@ -11,7 +11,7 @@ var _material = require("@mui/material");
 var _Clear = _interopRequireDefault(require("@mui/icons-material/Clear"));
 var _styles = require("@mui/material/styles");
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _excluded = ["value", "onChange", "fullWidth", "label", "isRequired", "isDisabled", "errorMessage", "error"];
+var _excluded = ["value", "id", "onChange", "fullWidth", "label", "isRequired", "isDisabled", "errorMessage", "error", "initialValue"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -30,6 +30,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 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; }
 var InputWithChip = function InputWithChip(_ref) {
   var value = _ref.value,
+    id = _ref.id,
     onChange = _ref.onChange,
     fullWidth = _ref.fullWidth,
     label = _ref.label,
@@ -37,25 +38,35 @@ var InputWithChip = function InputWithChip(_ref) {
     isDisabled = _ref.isDisabled,
     errorMessage = _ref.errorMessage,
     error = _ref.error,
+    initialValue = _ref.initialValue,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var _useState = (0, _react.useState)([]),
+  var _useState = (0, _react.useState)(initialValue ? _toConsumableArray(initialValue) : []),
     _useState2 = _slicedToArray(_useState, 2),
     chips = _useState2[0],
     setChips = _useState2[1];
   var theme = (0, _styles.useTheme)();
+  var _useState3 = (0, _react.useState)(""),
+    _useState4 = _slicedToArray(_useState3, 2),
+    txtValue = _useState4[0],
+    setTxtValue = _useState4[1];
   (0, _react.useEffect)(function () {
     if (onChange) {
       onChange(chips);
     }
   }, [chips]);
+  var onTextValueChange = function onTextValueChange(e) {
+    var value = e.target.value.trim();
+    setTxtValue(value.replace(",", ""));
+  };
   var handleAddChip = function handleAddChip(event) {
-    if (event.key === 'Enter' || event.keyCode === 188 || event.keyCode === 9 || event.type === 'blur') {
+    if ((event.key === "Enter" || event.keyCode === 32 || event.keyCode === 188 || event.keyCode === 9 || event.type === "blur") && event.target.value.replace(",", "")) {
       var _value = event.target.value;
-      var newValue = typeof _value === 'string' ? _value.replace(',', '') : _value;
+      var newValue = typeof _value === "string" ? _value.replace(",", "").trim() : _value.trim();
+      // if (chips.includes(newValue)) return; //add if any info or anything needs to be shown
       setChips([].concat(_toConsumableArray(chips), [newValue]));
       onChange([].concat(_toConsumableArray(chips), [newValue]));
-      event.target.value = '';
-      event.target.parentNode.querySelector('input').value = '';
+      setTxtValue("");
+      event.target.parentNode.querySelector("input").value = "";
     }
   };
   var handleDeleteChip = function handleDeleteChip(chipToDelete) {
@@ -71,38 +82,42 @@ var InputWithChip = function InputWithChip(_ref) {
   }, label && /*#__PURE__*/_react.default.createElement(_material.InputLabel, {
     sx: {
       fontWeight: 500,
-      '& .MuiFormLabel-asterisk': {
-        color: '#FF0000'
+      "& .MuiFormLabel-asterisk": {
+        color: "#FF0000"
       }
     },
     size: "small",
     shrink: true,
     required: isRequired
-  }, label), /*#__PURE__*/_react.default.createElement(_material.TextField, _extends({}, rest, {
+  }, label), /*#__PURE__*/_react.default.createElement(_material.TextField, _extends({
+    value: txtValue
+  }, rest, {
+    id: id,
     required: isRequired,
     disabled: isDisabled,
     onKeyDown: handleAddChip,
     onBlur: function onBlur(e) {
-      if (e.target.value !== '') {
+      if (e.target.value !== "") {
         handleAddChip(e);
       }
     },
     style: {
-      backgroundColor: isDisabled && '#E7E7E7'
+      backgroundColor: isDisabled && "#E7E7E7"
     },
     sx: {
-      '& MuiOutlinedInput': {
-        backgroundColor: isDisabled && '#E7E7E7'
+      "& MuiOutlinedInput": {
+        backgroundColor: isDisabled && "#E7E7E7"
       },
-      '& input': {
+      "& input": {
         // backgroundColor: isDisabled && '#E7E7E7',
-        color: isDisabled && '#000000'
+        color: isDisabled && "#000000"
       },
       marginTop: label ? theme.spacing(2.5) : 0,
-      '& label': {
+      "& label": {
         fontWeight: 500
       }
     },
+    onChange: onTextValueChange,
     helperText: errorMessage,
     error: error,
     InputProps: {
@@ -117,7 +132,7 @@ var InputWithChip = function InputWithChip(_ref) {
             fontSize: "small"
           }),
           style: {
-            margin: '0.2rem'
+            margin: "0.2rem"
           },
           size: "small"
         });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tenjin-ui-kit",
-  "version": "0.2.64",
+  "version": "0.2.66",
   "repository": {
     "url": "https://gitlab.com/yethi/react/tenjin-ui-kit.git"
   },