intelicoreact 1.0.22 → 1.0.24

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.
Files changed (5) hide show
  1. package/dist/Atomic/FormElements/Dropdown/Dropdown.js +25 -16
  2. package/dist/Atomic/FormElements/Dropdown/Dropdown.scss +1 -1
  3. package/dist/Atomic/FormElements/TagsDropdown/TagsDropdown.js +49 -24
  4. package/dist/Atomic/FormElements/TagsDropdown/TagsDropdown.scss +1 -0
  5. package/package.json +1 -1
package/dist/Atomic/FormElements/Dropdown/Dropdown.js CHANGED
@@ -19,6 +19,8 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
19
19
 
20
20
  var _react = _interopRequireWildcard(require("react"));
21
21
 
22
+ var _reactDom = require("react-dom");
23
+
22
24
  var _classnames = _interopRequireDefault(require("classnames"));
23
25
 
24
26
  var _reactFeather = require("react-feather");
@@ -29,8 +31,6 @@ require("./Dropdown.scss");
29
31
 
30
32
  var _fieldValueFormatters = require("../../../Functions/fieldValueFormatters");
31
33
 
32
- var _reactDom = require("react-dom");
33
-
34
34
  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); }
35
35
 
36
36
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(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; }
@@ -78,12 +78,16 @@ var Dropdown = function Dropdown(_ref) {
78
78
  var dropdownRef = (0, _react.useRef)(null);
79
79
  var dropdownListRef = (0, _react.useRef)(null);
80
80
 
81
- var _useState5 = (0, _react.useState)(false),
81
+ var _useState5 = (0, _react.useState)(null),
82
82
  _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
83
- isFocusedByClick = _useState6[0],
84
- setIsFocusedByClick = _useState6[1];
83
+ initListHeight = _useState6[0],
84
+ setInitListHeight = _useState6[1];
85
+
86
+ var _useState7 = (0, _react.useState)(false),
87
+ _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
88
+ isFocusedByClick = _useState8[0],
89
+ setIsFocusedByClick = _useState8[1];
85
90
 
86
- var windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
87
91
  if (!options) return null;
88
92
 
89
93
  var moveOtherToEnd = function moveOtherToEnd(options) {
@@ -271,25 +275,30 @@ var Dropdown = function Dropdown(_ref) {
271
275
  };
272
276
 
273
277
  var setListContainerStyles = function setListContainerStyles() {
274
- var _getComputedStyle$mar, _getComputedStyle, _getComputedStyle$mar2, _sw$getBoundingClient;
278
+ var _dropdownRef$current$, _getComputedStyle$mar, _getComputedStyle, _getComputedStyle$mar2, _getComputedStyle$max, _getComputedStyle2, _getComputedStyle2$ma;
275
279
 
276
280
  var lc = getListContainer();
277
281
  if (!lc || !isOpen) return false;
282
+ var windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
278
283
 
279
- var _dropdownRef$current$ = dropdownRef === null || dropdownRef === void 0 ? void 0 : dropdownRef.current.getBoundingClientRect(),
280
- width = _dropdownRef$current$.width,
281
- height = _dropdownRef$current$.height,
282
- left = _dropdownRef$current$.left,
283
- top = _dropdownRef$current$.top,
284
- bottom = _dropdownRef$current$.bottom;
284
+ var _ref3 = (_dropdownRef$current$ = dropdownRef === null || dropdownRef === void 0 ? void 0 : dropdownRef.current.getBoundingClientRect()) !== null && _dropdownRef$current$ !== void 0 ? _dropdownRef$current$ : {},
285
+ width = _ref3.width,
286
+ height = _ref3.height,
287
+ left = _ref3.left,
288
+ top = _ref3.top;
285
289
 
286
290
  var sw = lc.getElementsByClassName('dropdown__list')[0];
287
291
  var margin = parseInt((_getComputedStyle$mar = (_getComputedStyle = getComputedStyle(sw)) === null || _getComputedStyle === void 0 ? void 0 : (_getComputedStyle$mar2 = _getComputedStyle.marginTop) === null || _getComputedStyle$mar2 === void 0 ? void 0 : _getComputedStyle$mar2.replace('px', '')) !== null && _getComputedStyle$mar !== void 0 ? _getComputedStyle$mar : 0);
288
- var swHeight = sw === null || sw === void 0 ? void 0 : (_sw$getBoundingClient = sw.getBoundingClientRect()) === null || _sw$getBoundingClient === void 0 ? void 0 : _sw$getBoundingClient.height;
292
+ var maxHeight = initListHeight !== null && initListHeight !== void 0 ? initListHeight : parseInt((_getComputedStyle$max = (_getComputedStyle2 = getComputedStyle(sw)) === null || _getComputedStyle2 === void 0 ? void 0 : (_getComputedStyle2$ma = _getComputedStyle2.maxHeight) === null || _getComputedStyle2$ma === void 0 ? void 0 : _getComputedStyle2$ma.replace('px', '')) !== null && _getComputedStyle$max !== void 0 ? _getComputedStyle$max : 0);
293
+ if (initListHeight === null) setInitListHeight(maxHeight);
294
+ var toTop = top - margin;
295
+ var toBottom = windowHeight - top - height - margin * 2;
296
+ var swHeight = toTop >= maxHeight || toBottom >= maxHeight ? maxHeight - 3 * margin : toTop > toBottom ? toTop - 3 * margin : toBottom - 4 * margin;
297
+ var listPos = toTop < toBottom || toBottom >= swHeight ? 'bottom' : 'top';
289
298
  lc.style.minWidth = "".concat(width, "px");
290
299
  lc.style.left = "".concat(left, "px");
291
- lc.style.top = "".concat(windowHeight - top - height >= swHeight ? top + height : top - swHeight - margin * 2, "px");
292
- lc.style.maxHeight = "".concat(swHeight, "px");
300
+ lc.style.top = "".concat(listPos === 'bottom' ? top + height : top - swHeight - 3 * margin, "px");
301
+ sw.style.maxHeight = "".concat(swHeight, "px");
293
302
  };
294
303
 
295
304
  var renderListContainer = function renderListContainer() {
package/dist/Atomic/FormElements/Dropdown/Dropdown.scss CHANGED
@@ -54,6 +54,7 @@
54
54
  }
55
55
 
56
56
  &__list {
57
+ box-sizing: border-box;
57
58
  position: relative;
58
59
  background: #ffffff;
59
60
  border: 1px solid #e2e5ec;
@@ -88,7 +89,6 @@
88
89
  &-item {
89
90
  display: flex;
90
91
  align-items: center;
91
- //justify-content: center;
92
92
  border: none;
93
93
  background: transparent;
94
94
  padding: 0 20px 0 30px;
package/dist/Atomic/FormElements/TagsDropdown/TagsDropdown.js CHANGED
@@ -88,15 +88,22 @@ var TagsDropdown = function TagsDropdown(_ref) {
88
88
 
89
89
  var dropdownRef = (0, _react.useRef)(null);
90
90
  var inputRef = (0, _react.useRef)(null);
91
- var windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
91
+
92
+ var _useState5 = (0, _react.useState)(null),
93
+ _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
94
+ initListHeight = _useState6[0],
95
+ setInitListHeight = _useState6[1];
96
+
92
97
  var singleLevelOptions = options === null || options === void 0 ? void 0 : options.reduce(function (acc, item) {
93
98
  return [].concat((0, _toConsumableArray2.default)(acc), (0, _toConsumableArray2.default)(item.groupName ? item.list : [item]));
94
99
  }, []);
95
100
 
96
- var handleClickOutside = function handleClickOutside(event) {
101
+ var handleClickOutside = function handleClickOutside(_ref2) {
97
102
  var _getListContainer;
98
103
 
99
- if (!((_getListContainer = getListContainer()) !== null && _getListContainer !== void 0 && _getListContainer.contains(event.target))) {
104
+ var target = _ref2.target;
105
+
106
+ if (!((_getListContainer = getListContainer()) !== null && _getListContainer !== void 0 && _getListContainer.contains(target)) && !isTargetInParent(target)) {
100
107
  setIsOpen(false);
101
108
  setSearchValue('');
102
109
  }
@@ -167,12 +174,12 @@ var TagsDropdown = function TagsDropdown(_ref) {
167
174
  var selectAllItems = function selectAllItems(e) {
168
175
  var _prepareOptions, _prepareOptions$filte;
169
176
 
170
- onChange([].concat((0, _toConsumableArray2.default)(chosenOptions), (0, _toConsumableArray2.default)((_prepareOptions = prepareOptions(options)) === null || _prepareOptions === void 0 ? void 0 : (_prepareOptions$filte = _prepareOptions.filter(function (_ref2) {
171
- var isFreezed = _ref2.isFreezed,
172
- value = _ref2.value;
177
+ onChange([].concat((0, _toConsumableArray2.default)(chosenOptions), (0, _toConsumableArray2.default)((_prepareOptions = prepareOptions(options)) === null || _prepareOptions === void 0 ? void 0 : (_prepareOptions$filte = _prepareOptions.filter(function (_ref3) {
178
+ var isFreezed = _ref3.isFreezed,
179
+ value = _ref3.value;
173
180
  return !isFreezed && !(chosenOptions !== null && chosenOptions !== void 0 && chosenOptions.includes(value));
174
- })) === null || _prepareOptions$filte === void 0 ? void 0 : _prepareOptions$filte.map(function (_ref3) {
175
- var value = _ref3.value;
181
+ })) === null || _prepareOptions$filte === void 0 ? void 0 : _prepareOptions$filte.map(function (_ref4) {
182
+ var value = _ref4.value;
176
183
  return value;
177
184
  }))), 'chosenOptions');
178
185
  if (closeOnSelect) setIsOpen(false);
@@ -182,8 +189,8 @@ var TagsDropdown = function TagsDropdown(_ref) {
182
189
  onChange(chosenOptions === null || chosenOptions === void 0 ? void 0 : chosenOptions.filter(function (item) {
183
190
  var _prepareOptions2, _prepareOptions2$find;
184
191
 
185
- return (_prepareOptions2 = prepareOptions(options)) === null || _prepareOptions2 === void 0 ? void 0 : (_prepareOptions2$find = _prepareOptions2.find(function (_ref4) {
186
- var value = _ref4.value;
192
+ return (_prepareOptions2 = prepareOptions(options)) === null || _prepareOptions2 === void 0 ? void 0 : (_prepareOptions2$find = _prepareOptions2.find(function (_ref5) {
193
+ var value = _ref5.value;
187
194
  return value === item;
188
195
  })) === null || _prepareOptions2$find === void 0 ? void 0 : _prepareOptions2$find.isFreezed;
189
196
  }), 'chosenOptions');
@@ -208,24 +215,32 @@ var TagsDropdown = function TagsDropdown(_ref) {
208
215
  };
209
216
 
210
217
  var setListContainerStyles = function setListContainerStyles() {
211
- var _sw$getBoundingClient, _ref5;
218
+ var _getComputedStyle$mar, _getComputedStyle, _getComputedStyle$mar2, _getComputedStyle$max, _getComputedStyle2, _getComputedStyle2$ma, _sw$getBoundingClient, _dl$getBoundingClient;
212
219
 
213
220
  var lc = getListContainer();
214
221
  if (!lc || !isOpen) return false;
222
+ var windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
215
223
 
216
224
  var _dropdownRef$current$ = dropdownRef === null || dropdownRef === void 0 ? void 0 : dropdownRef.current.getBoundingClientRect(),
217
225
  width = _dropdownRef$current$.width,
218
226
  height = _dropdownRef$current$.height,
219
227
  left = _dropdownRef$current$.left,
220
- top = _dropdownRef$current$.top,
221
- bottom = _dropdownRef$current$.bottom;
228
+ top = _dropdownRef$current$.top;
222
229
 
223
230
  var sw = lc.getElementsByClassName('tags-dropdown__selector-wrapper')[0];
224
- var swHeight = sw === null || sw === void 0 ? void 0 : (_sw$getBoundingClient = sw.getBoundingClientRect()) === null || _sw$getBoundingClient === void 0 ? void 0 : _sw$getBoundingClient.height;
225
- lc.style.width = isOpen ? width === null || width === void 0 ? void 0 : width.toString().concat('px') : 0;
226
- lc.style.left = isOpen ? left === null || left === void 0 ? void 0 : left.toString().concat('px') : 0;
227
- lc.style.top = isOpen ? (_ref5 = windowHeight - top - height >= swHeight ? top + height + 4 : top - swHeight - 4) === null || _ref5 === void 0 ? void 0 : _ref5.toString().concat('px') : 0;
228
- lc.style.maxHeight = isOpen ? swHeight === null || swHeight === void 0 ? void 0 : swHeight.toString().concat('px') : 0;
231
+ var dl = lc.getElementsByClassName('tags-dropdown__list')[0];
232
+ var margin = parseInt((_getComputedStyle$mar = (_getComputedStyle = getComputedStyle(sw)) === null || _getComputedStyle === void 0 ? void 0 : (_getComputedStyle$mar2 = _getComputedStyle.marginTop) === null || _getComputedStyle$mar2 === void 0 ? void 0 : _getComputedStyle$mar2.replace('px', '')) !== null && _getComputedStyle$mar !== void 0 ? _getComputedStyle$mar : 0);
233
+ var maxHeight = initListHeight !== null && initListHeight !== void 0 ? initListHeight : parseInt((_getComputedStyle$max = (_getComputedStyle2 = getComputedStyle(dl)) === null || _getComputedStyle2 === void 0 ? void 0 : (_getComputedStyle2$ma = _getComputedStyle2.maxHeight) === null || _getComputedStyle2$ma === void 0 ? void 0 : _getComputedStyle2$ma.replace('px', '')) !== null && _getComputedStyle$max !== void 0 ? _getComputedStyle$max : 0);
234
+ if (initListHeight === null) setInitListHeight(maxHeight);
235
+ var delta = ((_sw$getBoundingClient = sw.getBoundingClientRect()) === null || _sw$getBoundingClient === void 0 ? void 0 : _sw$getBoundingClient.height) - ((_dl$getBoundingClient = dl.getBoundingClientRect()) === null || _dl$getBoundingClient === void 0 ? void 0 : _dl$getBoundingClient.height);
236
+ var toTop = top - margin;
237
+ var toBottom = windowHeight - top - height - margin * 2;
238
+ var swHeight = toTop >= maxHeight || toBottom >= maxHeight ? maxHeight - 3 * margin : toTop > toBottom ? toTop - 3 * margin : toBottom - 4 * margin;
239
+ var listPos = toTop < toBottom || toBottom >= swHeight ? 'bottom' : 'top';
240
+ lc.style.minWidth = "".concat(width, "px");
241
+ lc.style.left = "".concat(left, "px");
242
+ lc.style.top = "".concat(listPos === 'bottom' ? top + height : top - swHeight - 3 * margin, "px");
243
+ dl.style.maxHeight = "".concat(swHeight - delta, "px");
229
244
  };
230
245
 
231
246
  var renderListContainer = function renderListContainer() {
@@ -234,6 +249,14 @@ var TagsDropdown = function TagsDropdown(_ref) {
234
249
  return /*#__PURE__*/(0, _reactDom.createPortal)(getListMarkUp(), lc);
235
250
  };
236
251
 
252
+ var isTargetInParent = function isTargetInParent(target) {
253
+ var _target$className, _target$className$ind, _target$className2, _target$className2$in;
254
+
255
+ if ((target === null || target === void 0 ? void 0 : target.tagName) === 'svg' && (target === null || target === void 0 ? void 0 : target.parentNodclassName) === 'tag__button' || (target === null || target === void 0 ? void 0 : target.tagName) === 'line') return false;
256
+ if ((target === null || target === void 0 ? void 0 : target.tagName) === 'svg' && (target === null || target === void 0 ? void 0 : target.parentNodclassName) !== 'tag__button' || (target === null || target === void 0 ? void 0 : (_target$className = target.className) === null || _target$className === void 0 ? void 0 : (_target$className$ind = _target$className.indexOf) === null || _target$className$ind === void 0 ? void 0 : _target$className$ind.call(_target$className, 'tag__label')) !== -1 || (target === null || target === void 0 ? void 0 : (_target$className2 = target.className) === null || _target$className2 === void 0 ? void 0 : (_target$className2$in = _target$className2.indexOf) === null || _target$className2$in === void 0 ? void 0 : _target$className2$in.call(_target$className2, 'tag-list_wrapper')) !== -1 || (target === null || target === void 0 ? void 0 : target.className) === "".concat(RC, "__trigger") || (target === null || target === void 0 ? void 0 : target.className) === "tags-dropdown__arrow") return true;
257
+ return false;
258
+ };
259
+
237
260
  var getListMarkUp = function getListMarkUp() {
238
261
  return /*#__PURE__*/_react.default.createElement("div", {
239
262
  className: "".concat(RC, "__selector-wrapper")
@@ -288,7 +311,7 @@ var TagsDropdown = function TagsDropdown(_ref) {
288
311
  return function () {
289
312
  return document.removeEventListener('click', handleClickOutside, true);
290
313
  };
291
- });
314
+ }, []);
292
315
  (0, _react.useEffect)(function () {
293
316
  var _selectAllButtonRef$c, _unselectAllButtonRef;
294
317
 
@@ -303,11 +326,13 @@ var TagsDropdown = function TagsDropdown(_ref) {
303
326
  className: (0, _classnames.default)("".concat(RC, "__trigger"), {
304
327
  'tags-dropdown__error': error
305
328
  }),
306
- onClick: function onClick(e) {
307
- var _e$target, _e$target2, _e$target2$parentNode, _e$target3, _e$target4, _e$target5, _e$target5$parentNode, _e$target6, _e$target6$className, _e$target6$className$, _e$target7, _e$target7$className, _e$target7$className$, _e$target8, _e$target9, _e$target10;
308
-
309
- if ((e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.tagName) === 'svg' && (e === null || e === void 0 ? void 0 : (_e$target2 = e.target) === null || _e$target2 === void 0 ? void 0 : (_e$target2$parentNode = _e$target2.parentNode) === null || _e$target2$parentNode === void 0 ? void 0 : _e$target2$parentNode.className) === 'tag__button' || (e === null || e === void 0 ? void 0 : (_e$target3 = e.target) === null || _e$target3 === void 0 ? void 0 : _e$target3.tagName) === 'line') return false;
310
- if ((e === null || e === void 0 ? void 0 : (_e$target4 = e.target) === null || _e$target4 === void 0 ? void 0 : _e$target4.tagName) === 'svg' && (e === null || e === void 0 ? void 0 : (_e$target5 = e.target) === null || _e$target5 === void 0 ? void 0 : (_e$target5$parentNode = _e$target5.parentNode) === null || _e$target5$parentNode === void 0 ? void 0 : _e$target5$parentNode.className) !== 'tag__button' || (e === null || e === void 0 ? void 0 : (_e$target6 = e.target) === null || _e$target6 === void 0 ? void 0 : (_e$target6$className = _e$target6.className) === null || _e$target6$className === void 0 ? void 0 : (_e$target6$className$ = _e$target6$className.indexOf) === null || _e$target6$className$ === void 0 ? void 0 : _e$target6$className$.call(_e$target6$className, 'tag__label')) !== -1 || (e === null || e === void 0 ? void 0 : (_e$target7 = e.target) === null || _e$target7 === void 0 ? void 0 : (_e$target7$className = _e$target7.className) === null || _e$target7$className === void 0 ? void 0 : (_e$target7$className$ = _e$target7$className.indexOf) === null || _e$target7$className$ === void 0 ? void 0 : _e$target7$className$.call(_e$target7$className, 'tag-list_wrapper')) !== -1 || (e === null || e === void 0 ? void 0 : (_e$target8 = e.target) === null || _e$target8 === void 0 ? void 0 : _e$target8.className) === "".concat(RC, "__trigger") || (e === null || e === void 0 ? void 0 : (_e$target9 = e.target) === null || _e$target9 === void 0 ? void 0 : _e$target9.className) === "tags-dropdown__arrow") setIsOpen(!isOpen);else if ((e === null || e === void 0 ? void 0 : (_e$target10 = e.target) === null || _e$target10 === void 0 ? void 0 : _e$target10.tagName) === 'INPUT') setIsOpen(true);
329
+ onClick: function onClick(_ref6) {
330
+ var target = _ref6.target;
331
+ if ((target === null || target === void 0 ? void 0 : target.tagName) === 'INPUT') setIsOpen(true);else if (isTargetInParent(target)) {
332
+ setIsOpen(function (isOpen) {
333
+ return !isOpen;
334
+ });
335
+ }
311
336
  }
312
337
  }, noTagsWrap ? /*#__PURE__*/_react.default.createElement(_TagList.default, {
313
338
  items: chosenOptions === null || chosenOptions === void 0 ? void 0 : chosenOptions.map(function (value, i) {
package/dist/Atomic/FormElements/TagsDropdown/TagsDropdown.scss CHANGED
@@ -71,6 +71,7 @@
71
71
  box-sizing: border-box;
72
72
  border: 1px solid #e2e5ec;
73
73
  box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.25);
74
+ margin-top: 4px;
74
75
  }
75
76
 
76
77
  &__list {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "intelicoreact",
3
- "version": "1.0.22",
3
+ "version": "1.0.24",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "files": [