tenjin-ui-kit 0.2.173 → 0.2.174

package/components/InputWithChip/index.js

@@ -12,7 +12,7 @@ var _Clear = _interopRequireDefault(require("@mui/icons-material/Clear"));
 var _styles = require("@mui/material/styles");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _text = _interopRequireDefault(require("../text"));
-var _excluded = ["value", "id", "onChange", "fullWidth", "label", "isRequired", "isDisabled", "errorMessage", "error", "initialValue"];
+var _excluded = ["value", "id", "onChange", "fullWidth", "label", "isRequired", "isDisabled", "errorMessage", "error", "initialValue", "height"];
 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; }
@@ -40,8 +40,9 @@ var InputWithChip = function InputWithChip(_ref) {
     errorMessage = _ref.errorMessage,
     error = _ref.error,
     initialValue = _ref.initialValue,
+    height = _ref.height,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var _useState = (0, _react.useState)(initialValue ? _toConsumableArray(initialValue) : []),
+  var _useState = (0, _react.useState)(value ? _toConsumableArray(value) : []),
     _useState2 = _slicedToArray(_useState, 2),
     chips = _useState2[0],
     setChips = _useState2[1];
@@ -50,6 +51,10 @@ var InputWithChip = function InputWithChip(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     txtValue = _useState4[0],
     setTxtValue = _useState4[1];
+  var _useState5 = (0, _react.useState)(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    duplicateWarnig = _useState6[0],
+    setDuplicateWarning = _useState6[1];
   (0, _react.useEffect)(function () {
     if (onChange) {
       onChange(chips);
@@ -60,14 +65,26 @@ var InputWithChip = function InputWithChip(_ref) {
     setTxtValue(value.replace(",", ""));
   };
   var handleAddChip = function handleAddChip(event) {
+    setDuplicateWarning({
+      status: false,
+      message: ""
+    });
     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(",", "").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]));
-      setTxtValue("");
-      event.target.parentNode.querySelector("input").value = "";
+      var isPresent = chips.includes(newValue);
+      if (isPresent) {
+        setDuplicateWarning({
+          status: true,
+          message: "".concat(newValue, " already exists")
+        });
+      } else {
+        setChips([].concat(_toConsumableArray(chips), [newValue]));
+        onChange([].concat(_toConsumableArray(chips), [newValue]));
+        setTxtValue("");
+        event.target.parentNode.querySelector("input").value = "";
+      }
     }
   };
   var handleDeleteChip = function handleDeleteChip(chipToDelete) {
@@ -120,25 +137,42 @@ var InputWithChip = function InputWithChip(_ref) {
     },
     onChange: onTextValueChange,
     helperText: errorMessage,
-    error: error,
-    InputProps: {
-      startAdornment: chips.map(function (chip, index) {
-        return /*#__PURE__*/_react.default.createElement(_Chip.default, {
-          key: "".concat(chip, "-").concat(index),
-          label: /*#__PURE__*/_react.default.createElement(_text.default, null, chip),
-          onDelete: function onDelete() {
-            return handleDeleteChip(chip);
-          },
-          deleteIcon: /*#__PURE__*/_react.default.createElement(_Clear.default, {
-            fontSize: "small"
-          }),
-          style: {
-            margin: "0.2rem"
-          },
-          size: "small"
-        });
-      })
-    }
+    error: error
+    // InputProps={{
+    //   startAdornment: chips.map((chip, index) => (
+    // <Chip
+    //   key={`${chip}-${index}`}
+    //   label={<Text>{chip}</Text>}
+    //   onDelete={() => handleDeleteChip(chip)}
+    //   deleteIcon={<ClearIcon fontSize="small" />}
+    //   style={{ margin: "0.2rem" }}
+    //   size="small"
+    // />
+    //   )),
+    // }}
+  }))), (duplicateWarnig === null || duplicateWarnig === void 0 ? void 0 : duplicateWarnig.status) && /*#__PURE__*/_react.default.createElement(_material.Alert, {
+    severity: "warning"
+  }, duplicateWarnig === null || duplicateWarnig === void 0 ? void 0 : duplicateWarnig.message), !!chips && /*#__PURE__*/_react.default.createElement(_material.Box, {
+    maxHeight: theme.spacing(20),
+    overflow: "auto"
+    // border={!!chips && "1px solid #E7E7E7"}
+    ,
+    mt: theme.spacing(2)
+  }, /*#__PURE__*/_react.default.createElement(_text.default, null, chips.map(function (chip, index) {
+    return /*#__PURE__*/_react.default.createElement(_Chip.default, {
+      key: "".concat(chip, "-").concat(index),
+      label: /*#__PURE__*/_react.default.createElement(_text.default, null, chip),
+      onDelete: function onDelete() {
+        return handleDeleteChip(chip);
+      },
+      deleteIcon: /*#__PURE__*/_react.default.createElement(_Clear.default, {
+        fontSize: "small"
+      }),
+      style: {
+        margin: "0.2rem"
+      },
+      size: "small"
+    });
   }))));
 };
 InputWithChip.propTypes = {

package/package.json

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