intelicoreact 0.1.93 → 0.1.94

package/dist/Atomic/FormElements/Input/Input.js

@@ -122,7 +122,7 @@ var Input = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
 
       if (!isNotValidateASCII) inputValue = (0, _fieldValueFormatters.formatToOnlyASCIICodeText)(inputValue);
       if (symbolsLimit && inputValue.length > +symbolsLimit) inputValue = inputValue.substring(0, +symbolsLimit);
-      if (isPriceInput && isCropFirstNool) inputValue = inputValue[0] == 0 ? '' : (0, _fieldValueFormatters.filterNumeric)(inputValue, onlyNumbers);
+      if (isCropFirstNool) inputValue = inputValue[0] == 0 ? '' : (0, _fieldValueFormatters.filterNumeric)(inputValue, onlyNumbers);
       if (onlyNumbers && isOnlyString || isOnlyString) inputValue = (0, _fieldValueFormatters.formatToLetters)(inputValue, softStringMode);else if (onlyNumbers) inputValue = (0, _fieldValueFormatters.filterNumeric)(inputValue, onlyNumbers);
       onChange(inputValue.toString());
     },

package/dist/Atomic/UI/Tag/Tag.js

@@ -17,16 +17,21 @@ var _reactFeather = require("react-feather");
 
 require("./Tag.scss");
 
+var _utils = require("../../../Functions/utils");
+
 var Tag = function Tag(_ref) {
   var className = _ref.className,
       label = _ref.label,
       warning = _ref.warning,
       removeItem = _ref.removeItem,
-      name = _ref.name;
+      name = _ref.name,
+      _ref$onClick = _ref.onClick,
+      onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)('tag', className, {
       'tag-warn': warning
-    })
+    }),
+    onClick: onClick
   }, warning && /*#__PURE__*/_react.default.createElement(_io.IoWarningOutline, {
     className: "advanced-tags--warning-icon mr5"
   }), /*#__PURE__*/_react.default.createElement("span", {

package/dist/Atomic/UI/TagList/TagList.js

@@ -0,0 +1,210 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _io = require("react-icons/io5");
+
+var _reactFeather = require("react-feather");
+
+var _Tag = _interopRequireDefault(require("../Tag/Tag"));
+
+var _utils = require("../../../Functions/utils");
+
+require("./TagList.scss");
+
+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; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var TagList = function TagList(_ref) {
+  var className = _ref.className,
+      warning = _ref.warning,
+      _ref$removeItem = _ref.removeItem,
+      removeItem = _ref$removeItem === void 0 ? null : _ref$removeItem,
+      items = _ref.items,
+      _ref$withToggle = _ref.withToggle,
+      withToggle = _ref$withToggle === void 0 ? true : _ref$withToggle,
+      _ref$shownItemsCount = _ref.shownItemsCount,
+      shownItemsCount = _ref$shownItemsCount === void 0 ? 'auto' : _ref$shownItemsCount;
+  var wrapperRef = (0, _react.useRef)(null);
+
+  var _useState = (0, _react.useState)(-1),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      wrapperWidth = _useState2[0],
+      setWrapperWidth = _useState2[1];
+
+  var _useState3 = (0, _react.useState)([]),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      tagList = _useState4[0],
+      setTagList = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(0),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      rowTagsCount = _useState6[0],
+      setRowTagsCount = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(items.length),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      renderItemsCount = _useState8[0],
+      setRenderItemsCount = _useState8[1];
+
+  var _useState9 = (0, _react.useState)(!withToggle),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      renderAll = _useState10[0],
+      setRenderAll = _useState10[1];
+
+  var _useState11 = (0, _react.useState)(false),
+      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+      isInit = _useState12[0],
+      setIsInit = _useState12[1];
+
+  var _useState13 = (0, _react.useState)(Date.now()),
+      _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
+      checkTagsRefDate = _useState14[0],
+      setCheckTagsRefDate = _useState14[1];
+
+  var checkTagsRef = function checkTagsRef() {
+    if (!tagList.length) return false;
+    return tagList.map(function (_ref2) {
+      var itemRef = _ref2.itemRef;
+      return itemRef;
+    }).reduce(function (result, itemRef, i) {
+      if (!(itemRef !== null && itemRef !== void 0 && itemRef.current)) return false;
+      return result;
+    }, true);
+  };
+
+  var countTagsInRow = function countTagsInRow() {
+    var _tagList$map$reduce;
+
+    if (typeof shownItemsCount === 'number') return shownItemsCount;
+    return (_tagList$map$reduce = tagList.map(function (_ref3) {
+      var itemRef = _ref3.itemRef;
+      return itemRef;
+    }).reduce(function (result, itemRef) {
+      var _itemRef$current$getB = itemRef.current.getBoundingClientRect(),
+          itemWidth = _itemRef$current$getB.width;
+
+      if (itemWidth > 0 && itemWidth + result.width < wrapperWidth) {
+        result = {
+          count: result.count + 1,
+          width: result.width + itemWidth
+        };
+      }
+
+      return result;
+    }, {
+      count: 0,
+      width: 0
+    })) === null || _tagList$map$reduce === void 0 ? void 0 : _tagList$map$reduce.count;
+  }; // Set TagList Wrapper Width
+
+
+  (0, _react.useLayoutEffect)(function () {
+    var wrapperNewWidth = parseInt(window.getComputedStyle(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current).getPropertyValue('width')) - 24;
+
+    if (wrapperRef.current && wrapperNewWidth !== wrapperWidth) {
+      setWrapperWidth(wrapperNewWidth);
+    }
+  });
+  (0, _react.useEffect)(function () {
+    setRenderItemsCount(items.length);
+    setIsInit(false);
+  }, [wrapperWidth]); // Set TagList Items
+
+  (0, _react.useEffect)(function () {
+    setTagList(items.map(function (item) {
+      return _objectSpread(_objectSpread({}, item), {}, {
+        itemRef: /*#__PURE__*/(0, _react.createRef)()
+      });
+    }));
+  }, [items]); // Count Row Tags
+
+  (0, _react.useEffect)(function () {
+    if (!withToggle || isInit) return false;
+
+    if (!checkTagsRef()) {
+      setIsInit(false);
+      return false;
+    }
+
+    setRowTagsCount(countTagsInRow());
+    setIsInit(true);
+  }, [tagList.length, isInit, wrapperWidth]);
+  (0, _react.useEffect)(function () {
+    if (rowTagsCount > 0) {
+      setRenderItemsCount(rowTagsCount);
+    }
+  }, [rowTagsCount]);
+  (0, _react.useEffect)(function () {
+    setRenderItemsCount(renderAll ? tagList.length : rowTagsCount);
+  }, [renderAll]);
+
+  var renderTags = function renderTags() {
+    return tagList.map(function (item, i) {
+      return _objectSpread(_objectSpread({}, item), {}, {
+        isHidden: renderItemsCount === 0 ? true : !(i < renderItemsCount)
+      });
+    }).map(function (item, i) {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "tag-list_wrapper_item ".concat(item.isHidden ? 'tag-list_wrapper_item--hidden' : ''),
+        key: "tag-list-item-".concat(i),
+        ref: (0, _utils.checkedRef)(item === null || item === void 0 ? void 0 : item.itemRef)
+      }, /*#__PURE__*/_react.default.createElement(_Tag.default, (0, _extends2.default)({}, item, {
+        removeItem: removeItem
+      })));
+    });
+  };
+
+  var renderMoreTags = function renderMoreTags() {
+    var restItems = tagList.length - renderItemsCount;
+    if (restItems === 0 || !withToggle) return null;
+    return /*#__PURE__*/_react.default.createElement(_Tag.default, {
+      label: "+".concat(restItems),
+      className: "tag-list_wrapper_render-more",
+      onClick: function onClick() {
+        return setRenderAll(true);
+      }
+    });
+  };
+
+  var renderHideTags = function renderHideTags() {
+    if (renderItemsCount !== tagList.length || !withToggle) return null;
+    return /*#__PURE__*/_react.default.createElement(_Tag.default, {
+      label: "...",
+      className: "tag-list_wrapper_hide-more",
+      onClick: function onClick() {
+        return setRenderAll(false);
+      }
+    });
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "tag-list_wrapper ".concat(className !== null && className !== void 0 ? className : ''),
+    ref: wrapperRef
+  }, renderTags(), renderMoreTags(), renderHideTags());
+};
+
+var _default = TagList;
+exports.default = _default;

package/dist/Atomic/UI/TagList/TagList.scss

@@ -0,0 +1,19 @@
+.tag-list_wrapper{
+  display: flex;
+  width: 100%;
+
+  &_item{
+    display: flex;
+    margin: 0 4px 8px 0;
+
+    &--hidden{
+      display: none;
+    }
+  }
+
+  &_render-more,
+  &_hide-more{
+    background: #FFEDC8;
+    cursor: pointer;
+  }
+}

package/dist/Atomic/UI/TagList/TagListStories.scss

@@ -0,0 +1,6 @@
+.tag-list_wrapper{
+  width: 25%!important;
+  background-color: #fbf9f9;
+  padding: 25px;
+  flex-wrap: wrap;
+}

package/dist/Functions/utils.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.firstLetterCapital = exports.changeMeta = exports.addBitDepthPoints = exports.throttle = exports.debounce = exports.getColorById = exports.getStyles = exports.logout = exports.useOutsideToggle = exports.handleObjectChange = void 0;
+exports.checkedRef = exports.firstLetterCapital = exports.changeMeta = exports.addBitDepthPoints = exports.throttle = exports.debounce = exports.getColorById = exports.getStyles = exports.logout = exports.useOutsideToggle = exports.handleObjectChange = void 0;
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
@@ -161,4 +161,12 @@ var firstLetterCapital = function firstLetterCapital(str) {
   return "".concat(str.charAt(0).toUpperCase()).concat(str.slice(1));
 };
 
-exports.firstLetterCapital = firstLetterCapital;
+exports.firstLetterCapital = firstLetterCapital;
+
+var checkedRef = function checkedRef(ref) {
+  return ref ? typeof ref === 'function' ? function (node) {
+    return ref(node, key);
+  } : ref : null;
+};
+
+exports.checkedRef = checkedRef;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "intelicoreact",
-  "version": "0.1.93",
-  "description": "Input crop first 0 and comma in rengeInputs",
+  "version": "0.1.94",
+  "description": "",
   "main": "dist/index.js",
   "files": [
     "dist/*",