intelicoreact 0.1.86 → 0.1.89

package/dist/Atomic/UI/NavLine/NavLine.js

@@ -9,7 +9,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
 
 var _reactRouterDom = require("react-router-dom");
 
@@ -19,10 +23,16 @@ var Icons = _interopRequireWildcard(require("react-feather"));
 
 require("./NavLine.scss");
 
+var _utils = require("../../../Functions/utils");
+
 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 NavLine = function NavLine(_ref) {
   var root = _ref.root,
       activeTab = _ref.activeTab,
@@ -32,16 +42,175 @@ var NavLine = function NavLine(_ref) {
       items = _ref.items,
       children = _ref.children,
       isLocal = _ref.isLocal,
-      mode = _ref.mode;
+      mode = _ref.mode,
+      _ref$scrollMode = _ref.scrollMode,
+      scrollMode = _ref$scrollMode === void 0 ? false : _ref$scrollMode;
+
+  var _useState = (0, _react.useState)([]),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      navLineItems = _useState2[0],
+      setNavLineItems = _useState2[1];
+
+  var wrapperRef = (0, _react.useRef)(null);
+  var wrapperInnerRef = (0, _react.useRef)(null);
+
+  var _useState3 = (0, _react.useState)(0),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      wrapperRefWidth = _useState4[0],
+      setWrapperRefWidth = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(0),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      totalScrolledItems = _useState6[0],
+      setTotalScrolledItems = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(0),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      scrollLeft = _useState8[0],
+      setScrollLeft = _useState8[1];
+
+  var _useState9 = (0, _react.useState)(0),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      navLineItemsTotalWidth = _useState10[0],
+      setNavLineItemsTotalWidth = _useState10[1];
+
+  var _useState11 = (0, _react.useState)(0),
+      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+      navLineFirstItemOffset = _useState12[0],
+      setNavLineFirstItemOffset = _useState12[1];
+
+  var getVisibleNavLineItems = function getVisibleNavLineItems() {
+    var wrapperInner = wrapperInnerRef === null || wrapperInnerRef === void 0 ? void 0 : wrapperInnerRef.current;
+    var wrapperInnerProps = wrapperInner.getBoundingClientRect();
+    return navLineItems === null || navLineItems === void 0 ? void 0 : navLineItems.filter(function (item) {
+      var ref = item.ref,
+          label = item.label;
+      var element = ref === null || ref === void 0 ? void 0 : ref.current;
+      if (!element) return false;
+
+      var _element$getBoundingC = element.getBoundingClientRect(),
+          x = _element$getBoundingC.x;
+
+      return x - wrapperInnerProps.x >= 0 && x - wrapperInnerProps.x <= wrapperRefWidth;
+    });
+  };
+
+  var getUnvisibleLeftSideNavLineItems = function getUnvisibleLeftSideNavLineItems() {
+    var wrapperInner = wrapperInnerRef === null || wrapperInnerRef === void 0 ? void 0 : wrapperInnerRef.current;
+    var wrapperInnerProps = wrapperInner.getBoundingClientRect();
+    return navLineItems === null || navLineItems === void 0 ? void 0 : navLineItems.filter(function (item) {
+      var ref = item.ref,
+          label = item.label;
+      var element = ref === null || ref === void 0 ? void 0 : ref.current;
+      if (!element) return false;
+
+      var _element$getBoundingC2 = element.getBoundingClientRect(),
+          x = _element$getBoundingC2.x;
+
+      return x - wrapperInnerProps.x <= 0;
+    });
+  };
+
+  var scroll = function scroll() {
+    var offset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+    var wrapperInner = wrapperInnerRef === null || wrapperInnerRef === void 0 ? void 0 : wrapperInnerRef.current;
+    var wrapperInnerProps = wrapperInner.getBoundingClientRect();
+    var leftOffset = wrapperInner.scrollLeft;
+    setTotalScrolledItems(function (state) {
+      return offset > 0 ? ++state : --state;
+    });
+    setScrollLeft(leftOffset + offset);
+    wrapperInner === null || wrapperInner === void 0 ? void 0 : wrapperInner.scrollBy({
+      left: offset,
+      behavior: 'smooth'
+    });
+  };
+
+  var scrollToPrevItem = function scrollToPrevItem() {
+    var _prevItem$ref, _prevItem$ref$current;
+
+    var wrapperInner = wrapperInnerRef === null || wrapperInnerRef === void 0 ? void 0 : wrapperInnerRef.current;
+    var navLineUnvisibleItems = getUnvisibleLeftSideNavLineItems();
+
+    var _navLineUnvisibleItem = navLineUnvisibleItems.reverse(),
+        _navLineUnvisibleItem2 = (0, _slicedToArray2.default)(_navLineUnvisibleItem, 1),
+        prevItem = _navLineUnvisibleItem2[0];
+
+    var wrapperInnerProps = wrapperInner.getBoundingClientRect();
+    var prevItemProps = prevItem === null || prevItem === void 0 ? void 0 : (_prevItem$ref = prevItem.ref) === null || _prevItem$ref === void 0 ? void 0 : (_prevItem$ref$current = _prevItem$ref.current) === null || _prevItem$ref$current === void 0 ? void 0 : _prevItem$ref$current.getBoundingClientRect();
+    var scrollOffset = (prevItemProps === null || prevItemProps === void 0 ? void 0 : prevItemProps.x) - (wrapperInnerProps === null || wrapperInnerProps === void 0 ? void 0 : wrapperInnerProps.x);
+    scroll(scrollOffset);
+  };
+
+  var scrollToNextItem = function scrollToNextItem() {
+    var _firstVisibleItem$ref, _firstVisibleItem$ref2, _secondVisibleItem$re, _secondVisibleItem$re2;
+
+    var wrapperInner = wrapperInnerRef === null || wrapperInnerRef === void 0 ? void 0 : wrapperInnerRef.current;
+    var navLineVisibleItems = getVisibleNavLineItems();
+
+    var _navLineVisibleItems = (0, _slicedToArray2.default)(navLineVisibleItems, 2),
+        firstVisibleItem = _navLineVisibleItems[0],
+        secondVisibleItem = _navLineVisibleItems[1];
+
+    var wrapperInnerProps = wrapperInner.getBoundingClientRect();
+    var firstVisibleItemProps = firstVisibleItem === null || firstVisibleItem === void 0 ? void 0 : (_firstVisibleItem$ref = firstVisibleItem.ref) === null || _firstVisibleItem$ref === void 0 ? void 0 : (_firstVisibleItem$ref2 = _firstVisibleItem$ref.current) === null || _firstVisibleItem$ref2 === void 0 ? void 0 : _firstVisibleItem$ref2.getBoundingClientRect();
+    var secondVisibleItemProps = secondVisibleItem === null || secondVisibleItem === void 0 ? void 0 : (_secondVisibleItem$re = secondVisibleItem.ref) === null || _secondVisibleItem$re === void 0 ? void 0 : (_secondVisibleItem$re2 = _secondVisibleItem$re.current) === null || _secondVisibleItem$re2 === void 0 ? void 0 : _secondVisibleItem$re2.getBoundingClientRect();
+    var scrollOffset = secondVisibleItemProps.x - wrapperInnerProps.x;
+    scroll(scrollOffset);
+  }; // Count Total NavLine Items Width
+
+
+  (0, _react.useEffect)(function () {
+    var _navLineItems$0$ref$c, _navLineItems$, _navLineItems$$ref, _navLineItems$$ref$cu;
+
+    setNavLineItemsTotalWidth(function () {
+      return navLineItems.reduce(function (totalWidth, item) {
+        var _item$ref;
+
+        var element = item === null || item === void 0 ? void 0 : (_item$ref = item.ref) === null || _item$ref === void 0 ? void 0 : _item$ref.current;
+
+        if (element) {
+          var _element$getBoundingC3;
+
+          totalWidth += element === null || element === void 0 ? void 0 : (_element$getBoundingC3 = element.getBoundingClientRect()) === null || _element$getBoundingC3 === void 0 ? void 0 : _element$getBoundingC3.width;
+        }
+
+        return totalWidth;
+      }, 0);
+    });
+    setNavLineFirstItemOffset((_navLineItems$0$ref$c = (_navLineItems$ = navLineItems[0]) === null || _navLineItems$ === void 0 ? void 0 : (_navLineItems$$ref = _navLineItems$.ref) === null || _navLineItems$$ref === void 0 ? void 0 : (_navLineItems$$ref$cu = _navLineItems$$ref.current) === null || _navLineItems$$ref$cu === void 0 ? void 0 : _navLineItems$$ref$cu.getBoundingClientRect().x) !== null && _navLineItems$0$ref$c !== void 0 ? _navLineItems$0$ref$c : 0);
+  }, [navLineItems === null || navLineItems === void 0 ? void 0 : navLineItems.length]); // Count Wrapper Width
+
+  (0, _react.useEffect)(function () {
+    var _wrapperRef$current$g, _wrapperRef$current, _wrapperRef$current$g2;
+
+    setWrapperRefWidth((_wrapperRef$current$g = wrapperRef === null || wrapperRef === void 0 ? void 0 : (_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : (_wrapperRef$current$g2 = _wrapperRef$current.getBoundingClientRect()) === null || _wrapperRef$current$g2 === void 0 ? void 0 : _wrapperRef$current$g2.width) !== null && _wrapperRef$current$g !== void 0 ? _wrapperRef$current$g : 0);
+  }, [wrapperRef]); //Init NavLine Items
+
+  (0, _react.useEffect)(function () {
+    setNavLineItems(items.map(function (item) {
+      return _objectSpread(_objectSpread({}, item), {}, {
+        ref: /*#__PURE__*/(0, _react.createRef)()
+      });
+    }));
+  }, [items]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)({
       'nav-line': !variant
     }, {
       'nav-line--simple': variant === 'simple'
-    }, className)
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(variant === 'simple' ? 'nav-line--simple__inner' : 'nav-line__inner')
-  }, items.map(function (item) {
+    }, {
+      'nav-line--scroll-mode': scrollMode
+    }, className),
+    ref: scrollMode ? wrapperRef : null
+  }, scrollMode && totalScrolledItems > 0 && /*#__PURE__*/_react.default.createElement("div", {
+    className: "nav-line--simple__arrow nav-line--simple__arrow--prev",
+    onClick: scrollToPrevItem
+  }, /*#__PURE__*/_react.default.createElement(Icons.ChevronLeft, null)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(variant === 'simple' ? 'nav-line--simple__inner' : 'nav-line__inner'),
+    ref: scrollMode ? wrapperInnerRef : null
+  }, navLineItems.map(function (item) {
+    var ref = item.ref;
     var Icon = Icons[item === null || item === void 0 ? void 0 : item.icon];
     return isLocal ? /*#__PURE__*/_react.default.createElement("span", {
       onClick: function onClick() {
@@ -56,7 +225,8 @@ var NavLine = function NavLine(_ref) {
         active: activeTab === item.tabId
       }, {
         disabled: item.disabled || mode === 'create' && item.tabId !== 'general'
-      })
+      }),
+      ref: (0, _utils.checkedRef)(ref)
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "j4"
     }, item.icon && /*#__PURE__*/_react.default.createElement("div", {
@@ -78,7 +248,8 @@ var NavLine = function NavLine(_ref) {
         active: activeTab === item.tabId
       }, {
         disabled: item.disabled || mode === 'create' && item.tabId !== 'general'
-      })
+      }),
+      ref: (0, _utils.checkedRef)(ref)
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "j4"
     }, item.icon && /*#__PURE__*/_react.default.createElement("div", {
@@ -90,7 +261,10 @@ var NavLine = function NavLine(_ref) {
     }, item.label), item.count !== undefined ? /*#__PURE__*/_react.default.createElement("span", {
       className: "nav-line--count ml5"
     }, "(", item.count || 0, ")") : null));
-  })), /*#__PURE__*/_react.default.createElement("div", {
+  })), scrollMode && navLineItemsTotalWidth > wrapperRefWidth && scrollLeft + wrapperRefWidth < navLineItemsTotalWidth && /*#__PURE__*/_react.default.createElement("div", {
+    className: "nav-line--simple__arrow nav-line--simple__arrow--next",
+    onClick: scrollToNextItem
+  }, /*#__PURE__*/_react.default.createElement(Icons.ChevronRight, null)), /*#__PURE__*/_react.default.createElement("div", {
     className: "nav-line__body"
   }, children));
 };

package/dist/Atomic/UI/NavLine/NavLine.scss

@@ -54,10 +54,26 @@
     margin-left: -32px;
     margin-right: -32px;
     background-color: #f7fafc;
+    position: relative;
+    bottom: 0px;
     &:empty {
       padding: 0 32px;
     }
   }
+
+  &--scroll-mode{
+    position: relative;
+
+    .nav-line--simple__inner{
+      flex-wrap: nowrap;
+      overflow: hidden;
+    }
+
+    .nav-line--simple__item {
+      flex-wrap: nowrap;
+      white-space: nowrap;
+    }
+  }
 }
 
 .nav-line--simple {
@@ -107,12 +123,52 @@
       opacity: 100%;
 
       &::after {
+        left: 0;
         width: 100%;
         opacity: 1;
       }
     }
   }
 
+  &__arrow {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    height: 39px;
+    width: 36px;
+    background: #fff;
+    color:#424242;
+    box-sizing: border-box;
+    transition: all 0.5s;
+    z-index: 2;
+    justify-content: center;
+
+    &:hover {
+      cursor: pointer;
+    }
+
+    &--prev{
+      left: 0;
+      top: 0;
+      border-radius: 8px 0 0 8px;
+      transform: translate(-100%, -2px);
+      box-shadow: 10px 0px 10px -5px #dddddd;
+    }
+
+    &--next{
+      right: 0;
+      top: 0;
+      border-radius: 0 8px 8px 0;
+      transform: translate(100%, -2px);
+      box-shadow: -10px 0px 10px -5px #dddddd;
+    }
+
+    svg {
+      width: 24px;
+      height: 24px;
+    }
+  }
+
   &__body {
     padding: 15px 10px;
     font-size: 13px;
@@ -126,3 +182,4 @@
 .post-log-tab__body {
   background-color: #f7fafc;
 }
+

package/dist/Atomic/UI/NavLine/Tabs.js

@@ -0,0 +1,115 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = {
+  "activeTab": "",
+  "initialTab": "",
+  "variant": "simple",
+  "items": [{
+    "tabId": "",
+    "label": "All Industries"
+  }, {
+    "tabId": 0,
+    "label": "Doors"
+  }, {
+    "tabId": 1,
+    "label": "Flooring"
+  }, {
+    "tabId": 2,
+    "label": "Home Automation"
+  }, {
+    "tabId": 3,
+    "label": "HVAC"
+  }, {
+    "tabId": 4,
+    "label": "Pools and Spas"
+  }, {
+    "tabId": 5,
+    "label": "Roofing"
+  }, {
+    "tabId": 6,
+    "label": "Solar systems"
+  }, {
+    "tabId": 7,
+    "label": "Termite tenting"
+  }, {
+    "tabId": 8,
+    "label": "Water filtration"
+  }, {
+    "tabId": 9,
+    "label": "Water heaters"
+  }, {
+    "tabId": 10,
+    "label": "Windows"
+  }, {
+    "tabId": 11,
+    "label": "Audiology"
+  }, {
+    "tabId": 12,
+    "label": "Chiropractic"
+  }, {
+    "tabId": 13,
+    "label": "Cosmetic Surgery"
+  }, {
+    "tabId": 14,
+    "label": "Dental"
+  }, {
+    "tabId": 15,
+    "label": "Dermatology"
+  }, {
+    "tabId": 16,
+    "label": "Medical Devices"
+  }, {
+    "tabId": 17,
+    "label": "Non-invasive Cosmetics"
+  }, {
+    "tabId": 18,
+    "label": "Optometry"
+  }, {
+    "tabId": 19,
+    "label": "Vision"
+  }, {
+    "tabId": 20,
+    "label": "Weight Loss"
+  }, {
+    "tabId": 21,
+    "label": "Appliances"
+  }, {
+    "tabId": 22,
+    "label": "Electronics"
+  }, {
+    "tabId": 23,
+    "label": "Furniture"
+  }, {
+    "tabId": 24,
+    "label": "Mattress"
+  }, {
+    "tabId": 25,
+    "label": "Jewelry"
+  }, {
+    "tabId": 26,
+    "label": "Dog Training"
+  }, {
+    "tabId": 27,
+    "label": "Pet Retail"
+  }, {
+    "tabId": 28,
+    "label": "Veterinary"
+  }, {
+    "tabId": 29,
+    "label": "Coaching"
+  }, {
+    "tabId": 30,
+    "label": "Funeral"
+  }, {
+    "tabId": 31,
+    "label": "Legal"
+  }, {
+    "tabId": 32,
+    "label": "Tax resolution"
+  }]
+};
+exports.default = _default;

package/dist/Functions/fieldValueFormatters.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.filterNumeric = exports.filterPhone = exports.filterToLimitLength = exports.filterFloat = exports.formatNumberValueToMask = exports.formatToCutOffDotAtTheEnd = exports.formatToRemoveComa = exports.formatToOnlyASCIICodeText = exports.formatToLetters = exports.formatToTwoDigitAfterDot = exports.formatToAddBitDepthPoints = exports.formatOnlyNumbers = void 0;
+exports.filterNumeric = exports.filterPhone = exports.filterToLimitLength = exports.filterFloat = exports.formatNumberValueToMask = exports.formatToCutOffDotAtTheEnd = exports.formatToRemoveComa = exports.formatToOnlyASCIICodeText = exports.formatToLetters = exports.formatToTwoDigitAfterDot = exports.formatToPriceInputAndDollarSymbol = exports.formatToAddBitDepthPoints = exports.formatDollarSign = exports.formatOnlyNumbers = void 0;
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
@@ -16,10 +16,18 @@ var _index = require("../Constants/index.constants");
 // *** format ***
 var formatOnlyNumbers = function formatOnlyNumbers(value) {
   return (!!value ? value.toString() : '').replace(/\D/g, '');
-};
+}; // format from 100 to $100
+
 
 exports.formatOnlyNumbers = formatOnlyNumbers;
 
+var formatDollarSign = function formatDollarSign(inputValue) {
+  var value = inputValue !== null && inputValue !== void 0 ? inputValue : '';
+  return value ? "$".concat(value.toString().replace(/\$/g, '')) : '';
+};
+
+exports.formatDollarSign = formatDollarSign;
+
 var formatToAddBitDepthPoints = function formatToAddBitDepthPoints(inputValue) {
   var step = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 3;
   var value = !!inputValue ? inputValue.toString() : ''; //содержит ли value точку
@@ -36,6 +44,13 @@ var formatToAddBitDepthPoints = function formatToAddBitDepthPoints(inputValue) {
 
 exports.formatToAddBitDepthPoints = formatToAddBitDepthPoints;
 
+var formatToPriceInputAndDollarSymbol = function formatToPriceInputAndDollarSymbol(val) {
+  var step = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 3;
+  return dollarSign(formatToAddBitDepthPoints(val, step));
+};
+
+exports.formatToPriceInputAndDollarSymbol = formatToPriceInputAndDollarSymbol;
+
 var formatToTwoDigitAfterDot = function formatToTwoDigitAfterDot(inputValue) {
   var value = !!inputValue ? inputValue.toString() : '';
   var arr = value.split('.');

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "intelicoreact",
-  "version": "0.1.86",
-  "description": "hotfix/InputMaskOnChange | Add Possibility To Revert Clear Value and Masked Value in OnChange Callback",
+  "version": "0.1.89",
+  "description": "dollar format ",
   "main": "dist/index.js",
   "files": [
     "dist/*",