intelicoreact 0.1.86 → 0.1.87

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -9,7 +9,11 @@ Object.defineProperty(exports, "__esModule", {
9
9
  });
10
10
  exports.default = void 0;
11
11
 
12
- var _react = _interopRequireDefault(require("react"));
12
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
13
+
14
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
15
+
16
+ var _react = _interopRequireWildcard(require("react"));
13
17
 
14
18
  var _reactRouterDom = require("react-router-dom");
15
19
 
@@ -19,10 +23,16 @@ var Icons = _interopRequireWildcard(require("react-feather"));
19
23
 
20
24
  require("./NavLine.scss");
21
25
 
26
+ var _utils = require("../../../Functions/utils");
27
+
22
28
  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); }
23
29
 
24
30
  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; }
25
31
 
32
+ 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; }
33
+
34
+ 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; }
35
+
26
36
  var NavLine = function NavLine(_ref) {
27
37
  var root = _ref.root,
28
38
  activeTab = _ref.activeTab,
@@ -32,16 +42,159 @@ var NavLine = function NavLine(_ref) {
32
42
  items = _ref.items,
33
43
  children = _ref.children,
34
44
  isLocal = _ref.isLocal,
35
- mode = _ref.mode;
45
+ mode = _ref.mode,
46
+ _ref$scrollMode = _ref.scrollMode,
47
+ scrollMode = _ref$scrollMode === void 0 ? false : _ref$scrollMode;
48
+
49
+ var _useState = (0, _react.useState)([]),
50
+ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
51
+ navLineItems = _useState2[0],
52
+ setNavLineItems = _useState2[1];
53
+
54
+ var wrapperRef = (0, _react.useRef)(null);
55
+ var wrapperInnerRef = (0, _react.useRef)(null);
56
+
57
+ var _useState3 = (0, _react.useState)(0),
58
+ _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
59
+ wrapperRefWidth = _useState4[0],
60
+ setWrapperRefWidth = _useState4[1];
61
+
62
+ var _useState5 = (0, _react.useState)(0),
63
+ _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
64
+ navLineItemsTotalWidth = _useState6[0],
65
+ setNavLineItemsTotalWidth = _useState6[1];
66
+
67
+ var _useState7 = (0, _react.useState)(0),
68
+ _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
69
+ wrapperInnerScrollLeft = _useState8[0],
70
+ setWrapperInnerScrollLeft = _useState8[1];
71
+
72
+ var _useState9 = (0, _react.useState)(0),
73
+ _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
74
+ navLineFirstItemOffset = _useState10[0],
75
+ setNavLineFirstItemOffset = _useState10[1];
76
+
77
+ var getVisibleNavLineItems = function getVisibleNavLineItems() {
78
+ return navLineItems === null || navLineItems === void 0 ? void 0 : navLineItems.filter(function (item) {
79
+ var ref = item.ref,
80
+ label = item.label;
81
+ var element = ref === null || ref === void 0 ? void 0 : ref.current;
82
+ if (!element) return false;
83
+
84
+ var _element$getBoundingC = element.getBoundingClientRect(),
85
+ x = _element$getBoundingC.x;
86
+
87
+ return x >= 0 && x <= wrapperRefWidth;
88
+ });
89
+ };
90
+
91
+ var getUnvisibleLeftSideNavLineItems = function getUnvisibleLeftSideNavLineItems() {
92
+ return navLineItems === null || navLineItems === void 0 ? void 0 : navLineItems.filter(function (item) {
93
+ var ref = item.ref,
94
+ label = item.label;
95
+ var element = ref === null || ref === void 0 ? void 0 : ref.current;
96
+ if (!element) return false;
97
+
98
+ var _element$getBoundingC2 = element.getBoundingClientRect(),
99
+ x = _element$getBoundingC2.x;
100
+
101
+ return x <= 0;
102
+ });
103
+ };
104
+
105
+ var scroll = function scroll() {
106
+ var offset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
107
+ var wrapperInner = wrapperInnerRef === null || wrapperInnerRef === void 0 ? void 0 : wrapperInnerRef.current;
108
+ var leftOffset = wrapperInner.scrollLeft;
109
+ setWrapperInnerScrollLeft(leftOffset + offset - navLineFirstItemOffset / 2);
110
+ wrapperInner === null || wrapperInner === void 0 ? void 0 : wrapperInner.scrollBy({
111
+ left: offset,
112
+ behavior: 'smooth'
113
+ });
114
+ };
115
+
116
+ var scrollToPrevItem = function scrollToPrevItem() {
117
+ var _prevItem$ref, _prevItem$ref$current;
118
+
119
+ var navLineUnvisibleItems = getUnvisibleLeftSideNavLineItems();
120
+
121
+ var _navLineUnvisibleItem = navLineUnvisibleItems.reverse(),
122
+ _navLineUnvisibleItem2 = (0, _slicedToArray2.default)(_navLineUnvisibleItem, 1),
123
+ prevItem = _navLineUnvisibleItem2[0];
124
+
125
+ 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();
126
+ var scrollOffset = (prevItemProps === null || prevItemProps === void 0 ? void 0 : prevItemProps.x) - navLineFirstItemOffset / 2;
127
+ scroll(scrollOffset);
128
+ };
129
+
130
+ var scrollToNextItem = function scrollToNextItem() {
131
+ var _firstVisibleItem$ref, _firstVisibleItem$ref2, _secondVisibleItem$re, _secondVisibleItem$re2;
132
+
133
+ var navLineVisibleItems = getVisibleNavLineItems();
134
+
135
+ var _navLineVisibleItems = (0, _slicedToArray2.default)(navLineVisibleItems, 2),
136
+ firstVisibleItem = _navLineVisibleItems[0],
137
+ secondVisibleItem = _navLineVisibleItems[1];
138
+
139
+ 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();
140
+ 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();
141
+ var scrollOffset = secondVisibleItemProps.x - navLineFirstItemOffset / 2;
142
+ scroll(scrollOffset);
143
+ }; // Count Total NavLine Items Width
144
+
145
+
146
+ (0, _react.useEffect)(function () {
147
+ var _navLineItems$0$ref$c, _navLineItems$, _navLineItems$$ref, _navLineItems$$ref$cu;
148
+
149
+ setNavLineItemsTotalWidth(function () {
150
+ return navLineItems.reduce(function (totalWidth, item) {
151
+ var _item$ref;
152
+
153
+ var element = item === null || item === void 0 ? void 0 : (_item$ref = item.ref) === null || _item$ref === void 0 ? void 0 : _item$ref.current;
154
+
155
+ if (element) {
156
+ var _element$getBoundingC3;
157
+
158
+ totalWidth += element === null || element === void 0 ? void 0 : (_element$getBoundingC3 = element.getBoundingClientRect()) === null || _element$getBoundingC3 === void 0 ? void 0 : _element$getBoundingC3.width;
159
+ }
160
+
161
+ return totalWidth;
162
+ }, 0);
163
+ });
164
+ 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);
165
+ }, [navLineItems === null || navLineItems === void 0 ? void 0 : navLineItems.length]); // Count Wrapper Width
166
+
167
+ (0, _react.useEffect)(function () {
168
+ var _wrapperRef$current$g, _wrapperRef$current, _wrapperRef$current$g2;
169
+
170
+ 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);
171
+ }, [wrapperRef]); //Init NavLine Items
172
+
173
+ (0, _react.useEffect)(function () {
174
+ setNavLineItems(items.map(function (item) {
175
+ return _objectSpread(_objectSpread({}, item), {}, {
176
+ ref: /*#__PURE__*/(0, _react.createRef)()
177
+ });
178
+ }));
179
+ }, [items]);
36
180
  return /*#__PURE__*/_react.default.createElement("div", {
37
181
  className: (0, _classnames.default)({
38
182
  'nav-line': !variant
39
183
  }, {
40
184
  'nav-line--simple': variant === 'simple'
41
- }, className)
42
- }, /*#__PURE__*/_react.default.createElement("div", {
43
- className: "".concat(variant === 'simple' ? 'nav-line--simple__inner' : 'nav-line__inner')
44
- }, items.map(function (item) {
185
+ }, {
186
+ 'nav-line--scroll-mode': scrollMode
187
+ }, className),
188
+ ref: scrollMode ? wrapperRef : null
189
+ }, scrollMode && wrapperInnerScrollLeft > 0 && /*#__PURE__*/_react.default.createElement("div", {
190
+ className: "nav-line--simple__arrow nav-line--simple__arrow--prev"
191
+ }, /*#__PURE__*/_react.default.createElement(Icons.ChevronLeft, {
192
+ onClick: scrollToPrevItem
193
+ })), /*#__PURE__*/_react.default.createElement("div", {
194
+ className: "".concat(variant === 'simple' ? 'nav-line--simple__inner' : 'nav-line__inner'),
195
+ ref: scrollMode ? wrapperInnerRef : null
196
+ }, navLineItems.map(function (item) {
197
+ var ref = item.ref;
45
198
  var Icon = Icons[item === null || item === void 0 ? void 0 : item.icon];
46
199
  return isLocal ? /*#__PURE__*/_react.default.createElement("span", {
47
200
  onClick: function onClick() {
@@ -56,7 +209,8 @@ var NavLine = function NavLine(_ref) {
56
209
  active: activeTab === item.tabId
57
210
  }, {
58
211
  disabled: item.disabled || mode === 'create' && item.tabId !== 'general'
59
- })
212
+ }),
213
+ ref: (0, _utils.checkedRef)(ref)
60
214
  }, /*#__PURE__*/_react.default.createElement("div", {
61
215
  className: "j4"
62
216
  }, item.icon && /*#__PURE__*/_react.default.createElement("div", {
@@ -78,7 +232,8 @@ var NavLine = function NavLine(_ref) {
78
232
  active: activeTab === item.tabId
79
233
  }, {
80
234
  disabled: item.disabled || mode === 'create' && item.tabId !== 'general'
81
- })
235
+ }),
236
+ ref: (0, _utils.checkedRef)(ref)
82
237
  }, /*#__PURE__*/_react.default.createElement("div", {
83
238
  className: "j4"
84
239
  }, item.icon && /*#__PURE__*/_react.default.createElement("div", {
@@ -90,6 +245,10 @@ var NavLine = function NavLine(_ref) {
90
245
  }, item.label), item.count !== undefined ? /*#__PURE__*/_react.default.createElement("span", {
91
246
  className: "nav-line--count ml5"
92
247
  }, "(", item.count || 0, ")") : null));
248
+ })), scrollMode && navLineItemsTotalWidth > wrapperRefWidth && wrapperRefWidth + wrapperInnerScrollLeft < navLineItemsTotalWidth && /*#__PURE__*/_react.default.createElement("div", {
249
+ className: "nav-line--simple__arrow nav-line--simple__arrow--next"
250
+ }, /*#__PURE__*/_react.default.createElement(Icons.ChevronRight, {
251
+ onClick: scrollToNextItem
93
252
  })), /*#__PURE__*/_react.default.createElement("div", {
94
253
  className: "nav-line__body"
95
254
  }, children));
@@ -54,10 +54,29 @@
54
54
  margin-left: -32px;
55
55
  margin-right: -32px;
56
56
  background-color: #f7fafc;
57
+ position: relative;
58
+ bottom: -19px;
57
59
  &:empty {
58
60
  padding: 0 32px;
59
61
  }
60
62
  }
63
+
64
+ &--scroll-mode{
65
+ display: flex;
66
+ align-items: center;
67
+ position: relative;
68
+
69
+ .nav-line--simple__inner{
70
+ flex-wrap: nowrap;
71
+ overflow: hidden;
72
+ }
73
+
74
+ .nav-line--simple__item {
75
+ flex-wrap: nowrap;
76
+ white-space: nowrap;
77
+ margin-bottom: 0;
78
+ }
79
+ }
61
80
  }
62
81
 
63
82
  .nav-line--simple {
@@ -113,6 +132,43 @@
113
132
  }
114
133
  }
115
134
 
135
+ &__arrow {
136
+ position: absolute;
137
+ display: flex;
138
+ align-items: center;
139
+ height: 39px;
140
+ width: 16px;
141
+ background: #fff;
142
+ color:#424242;
143
+ box-sizing: border-box;
144
+ transition: all 0.5s;
145
+ z-index: 2;
146
+
147
+ &:hover {
148
+ cursor: pointer;
149
+ }
150
+
151
+ &--prev{
152
+ left: 0;
153
+ top: 0;
154
+ border-radius: 8px 0 0 8px;
155
+ transform: translate(-75%, -2px);
156
+ box-shadow: 10px 0px 10px -5px #dddddd;
157
+ }
158
+
159
+ &--next{
160
+ right: 0;
161
+ top: 0;
162
+ border-radius: 0 8px 8px 0;
163
+ transform: translate(75%, -2px);
164
+ box-shadow: -10px 0px 10px -5px #dddddd;
165
+ }
166
+
167
+ svg {
168
+ width: 36px;
169
+ }
170
+ }
171
+
116
172
  &__body {
117
173
  padding: 15px 10px;
118
174
  font-size: 13px;
@@ -126,3 +182,4 @@
126
182
  .post-log-tab__body {
127
183
  background-color: #f7fafc;
128
184
  }
185
+
@@ -0,0 +1,115 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ var _default = {
8
+ "activeTab": "",
9
+ "initialTab": "",
10
+ "variant": "simple",
11
+ "items": [{
12
+ "tabId": "",
13
+ "label": "All Industries"
14
+ }, {
15
+ "tabId": 0,
16
+ "label": "Doors"
17
+ }, {
18
+ "tabId": 1,
19
+ "label": "Flooring"
20
+ }, {
21
+ "tabId": 2,
22
+ "label": "Home Automation"
23
+ }, {
24
+ "tabId": 3,
25
+ "label": "HVAC"
26
+ }, {
27
+ "tabId": 4,
28
+ "label": "Pools and Spas"
29
+ }, {
30
+ "tabId": 5,
31
+ "label": "Roofing"
32
+ }, {
33
+ "tabId": 6,
34
+ "label": "Solar systems"
35
+ }, {
36
+ "tabId": 7,
37
+ "label": "Termite tenting"
38
+ }, {
39
+ "tabId": 8,
40
+ "label": "Water filtration"
41
+ }, {
42
+ "tabId": 9,
43
+ "label": "Water heaters"
44
+ }, {
45
+ "tabId": 10,
46
+ "label": "Windows"
47
+ }, {
48
+ "tabId": 11,
49
+ "label": "Audiology"
50
+ }, {
51
+ "tabId": 12,
52
+ "label": "Chiropractic"
53
+ }, {
54
+ "tabId": 13,
55
+ "label": "Cosmetic Surgery"
56
+ }, {
57
+ "tabId": 14,
58
+ "label": "Dental"
59
+ }, {
60
+ "tabId": 15,
61
+ "label": "Dermatology"
62
+ }, {
63
+ "tabId": 16,
64
+ "label": "Medical Devices"
65
+ }, {
66
+ "tabId": 17,
67
+ "label": "Non-invasive Cosmetics"
68
+ }, {
69
+ "tabId": 18,
70
+ "label": "Optometry"
71
+ }, {
72
+ "tabId": 19,
73
+ "label": "Vision"
74
+ }, {
75
+ "tabId": 20,
76
+ "label": "Weight Loss"
77
+ }, {
78
+ "tabId": 21,
79
+ "label": "Appliances"
80
+ }, {
81
+ "tabId": 22,
82
+ "label": "Electronics"
83
+ }, {
84
+ "tabId": 23,
85
+ "label": "Furniture"
86
+ }, {
87
+ "tabId": 24,
88
+ "label": "Mattress"
89
+ }, {
90
+ "tabId": 25,
91
+ "label": "Jewelry"
92
+ }, {
93
+ "tabId": 26,
94
+ "label": "Dog Training"
95
+ }, {
96
+ "tabId": 27,
97
+ "label": "Pet Retail"
98
+ }, {
99
+ "tabId": 28,
100
+ "label": "Veterinary"
101
+ }, {
102
+ "tabId": 29,
103
+ "label": "Coaching"
104
+ }, {
105
+ "tabId": 30,
106
+ "label": "Funeral"
107
+ }, {
108
+ "tabId": 31,
109
+ "label": "Legal"
110
+ }, {
111
+ "tabId": 32,
112
+ "label": "Tax resolution"
113
+ }]
114
+ };
115
+ exports.default = _default;
@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
- exports.firstLetterCapital = exports.changeMeta = exports.addBitDepthPoints = exports.throttle = exports.debounce = exports.getColorById = exports.getStyles = exports.logout = exports.useOutsideToggle = exports.handleObjectChange = void 0;
8
+ exports.checkedRef = exports.firstLetterCapital = exports.changeMeta = exports.addBitDepthPoints = exports.throttle = exports.debounce = exports.getColorById = exports.getStyles = exports.logout = exports.useOutsideToggle = exports.handleObjectChange = void 0;
9
9
 
10
10
  var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
11
11
 
@@ -161,4 +161,12 @@ var firstLetterCapital = function firstLetterCapital(str) {
161
161
  return "".concat(str.charAt(0).toUpperCase()).concat(str.slice(1));
162
162
  };
163
163
 
164
- exports.firstLetterCapital = firstLetterCapital;
164
+ exports.firstLetterCapital = firstLetterCapital;
165
+
166
+ var checkedRef = function checkedRef(ref) {
167
+ return ref ? typeof ref === 'function' ? function (node) {
168
+ return ref(node, key);
169
+ } : ref : null;
170
+ };
171
+
172
+ exports.checkedRef = checkedRef;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "intelicoreact",
3
- "version": "0.1.86",
4
- "description": "hotfix/InputMaskOnChange | Add Possibility To Revert Clear Value and Masked Value in OnChange Callback",
3
+ "version": "0.1.87",
4
+ "description": "Nav Line Fixes",
5
5
  "main": "dist/index.js",
6
6
  "files": [
7
7
  "dist/*",