intelicoreact 1.4.39 → 1.4.40

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 (2) hide show
  1. package/dist/Atomic/UI/TagList/TagList.js +100 -165
  2. package/package.json +1 -1
package/dist/Atomic/UI/TagList/TagList.js CHANGED
@@ -25,184 +25,119 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
25
25
 
26
26
  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; }
27
27
 
28
- const TagList = _ref => {
29
- var _wrapperRef$current$g, _wrapperRef$current, _wrapperRef$current$g2;
30
-
28
+ const TagListToDropdown = _ref => {
31
29
  let {
32
- disabled,
33
- className,
34
- onTagClick,
35
- removeItem = null,
36
- items = [],
37
- withToggle = true,
38
- disableShowMore = false,
39
- shownItemsCount = "auto",
40
- testId = "test-taglist",
41
- refProp,
42
- renderOrder,
43
- onEditClick,
44
- onToggleRenderAll
30
+ options,
31
+ value = [],
32
+ dropdownProps = {},
33
+ listProps = {},
34
+ onChange,
35
+ useDropdownCompactMode
45
36
  } = _ref;
46
- const wrapperRef = (0, _react.useRef)(null);
47
- const [tagList, setTagList] = (0, _react.useState)([]);
48
- const [staticTagsCount, setStaticTagsCount] = (0, _react.useState)(-1);
49
- const [renderItemsCount, setRenderItemsCount] = (0, _react.useState)(-1);
50
- const [renderAll, setRenderAll] = (0, _react.useState)(!withToggle);
51
- const wrapperWidth = (_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 : -1;
52
-
53
- const setRenderAllInterceptor = v => {
54
- setRenderAll(v);
55
- onToggleRenderAll === null || onToggleRenderAll === void 0 ? void 0 : onToggleRenderAll(v);
56
- };
57
-
58
- const isTagsRefSet = () => {
59
- if (!tagList.length) return false;
60
- return tagList.map(_ref2 => {
61
- let {
62
- itemRef
63
- } = _ref2;
64
- return itemRef;
65
- }).reduce((result, itemRef) => {
66
- if (!(itemRef !== null && itemRef !== void 0 && itemRef.current)) return false;
67
- return result;
68
- }, true);
37
+ const preparedValue = value.map(_ref2 => {
38
+ let {
39
+ value
40
+ } = _ref2;
41
+ return value;
42
+ });
43
+ const [isEditMode, setIsEditMode] = (0, _react.useState)(false);
44
+ const [isRenderAllTags, setIsRenderAllTags] = (0, _react.useState)(false);
45
+ const [newValue, setNewValue] = (0, _react.useState)(preparedValue);
46
+ const [isValueChanged, setIsValueChanged] = (0, _react.useState)(false);
47
+ const [isLoading, setIsLoading] = (0, _react.useState)(false);
48
+ const tagListRef = (0, _react.useRef)(null);
49
+
50
+ const onConfirmChangesClick = () => {
51
+ if (isValueChanged) {
52
+ var _Promise;
53
+
54
+ setIsLoading(true);
55
+ setIsValueChanged(false);
56
+ (_Promise = new Promise(r => {
57
+ const onChangeResult = onChange(options.filter(_ref3 => {
58
+ let {
59
+ value
60
+ } = _ref3;
61
+ return newValue.includes(value);
62
+ }));
63
+
64
+ if (onChangeResult instanceof Promise) {
65
+ onChangeResult.then(data => r(data));
66
+ } else {
67
+ r();
68
+ }
69
+ })) === null || _Promise === void 0 ? void 0 : _Promise.finally(() => {
70
+ setIsEditMode(false);
71
+ setIsLoading(false);
72
+ });
73
+ } else {
74
+ setIsEditMode(false);
75
+ }
69
76
  };
70
77
 
71
- const getStaticTagsCount = () => {
72
- if (typeof shownItemsCount === "number") return shownItemsCount;
73
- const result = tagList.map(_ref3 => {
74
- let {
75
- itemRef
76
- } = _ref3;
77
- return itemRef;
78
- }).reduce((result, itemRef) => {
79
- const itemStyle = window.getComputedStyle(itemRef === null || itemRef === void 0 ? void 0 : itemRef.current);
80
- const itemWidth = [parseInt(itemStyle === null || itemStyle === void 0 ? void 0 : itemStyle.width, 10), parseInt(itemStyle === null || itemStyle === void 0 ? void 0 : itemStyle.marginLeft, 10), parseInt(itemStyle === null || itemStyle === void 0 ? void 0 : itemStyle.marginRight, 10)].reduce((result, item) => {
81
- if (!isNaN(item)) result += item;
82
- return result;
83
- }, 0);
84
-
85
- if (!isNaN(itemWidth) && itemWidth > 0 && itemWidth + result.width < wrapperWidth - 30) {
86
- result = {
87
- count: result.count + 1,
88
- width: result.width + itemWidth,
89
- items: [...result.items, {
90
- w: itemWidth,
91
- r: itemRef === null || itemRef === void 0 ? void 0 : itemRef.current
92
- }]
93
- };
78
+ (0, _react.useEffect)(() => {
79
+ setNewValue(preparedValue); // eslint-disable-next-line react-hooks/exhaustive-deps
80
+ }, [isEditMode]);
81
+
82
+ const renderTagsDropdown = props => {
83
+ return /*#__PURE__*/_react.default.createElement(TagsDropdown, (0, _extends2.default)({}, dropdownProps, {
84
+ disabled: isLoading,
85
+ options: options,
86
+ chosenOptions: newValue,
87
+ renderOptionsAsTags: true,
88
+ withCreateLogic: true,
89
+ isUseLocalOptionsStore: false,
90
+ onOptionEdit: dropdownProps === null || dropdownProps === void 0 ? void 0 : dropdownProps.onOptionEdit,
91
+ onOptionDelete: dropdownProps === null || dropdownProps === void 0 ? void 0 : dropdownProps.onOptionDelete,
92
+ onOptionCreate: dropdownProps === null || dropdownProps === void 0 ? void 0 : dropdownProps.onOptionCreate,
93
+ onActionConfirmClick: onConfirmChangesClick,
94
+ onActionCancelClick: () => setIsEditMode(v => !v),
95
+ onChange: data => {
96
+ setNewValue(data);
97
+ setIsValueChanged(true);
94
98
  }
95
-
96
- return result;
97
- }, {
98
- count: 0,
99
- width: 0,
100
- items: []
101
- });
102
- return result === null || result === void 0 ? void 0 : result.count;
99
+ }, props, {
100
+ isDefaultOpened: isEditMode
101
+ }));
103
102
  };
104
103
 
105
- const cancelDefault = function (e) {
106
- let cb = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : () => {};
107
- e === null || e === void 0 ? void 0 : e.preventDefault();
108
- e === null || e === void 0 ? void 0 : e.stopPropagation();
109
- cb(e);
104
+ const renderTagsList = props => {
105
+ return /*#__PURE__*/_react.default.createElement(TagList, (0, _extends2.default)({
106
+ disabled: isLoading,
107
+ refProp: tagListRef
108
+ }, listProps, {
109
+ items: value,
110
+ onEditClick: () => setIsEditMode(v => !v)
111
+ }, props));
110
112
  };
111
113
 
112
- const renderTags = () => {
113
- const tagsRenderOrder = renderOrder !== null && renderOrder !== void 0 ? renderOrder : tagList.map(_ref4 => {
114
- let {
115
- value,
116
- id
117
- } = _ref4;
118
- return value !== null && value !== void 0 ? value : id;
119
- });
120
- return tagsRenderOrder.map((v, i) => {
121
- var _item$id, _item$id2;
122
-
123
- const item = tagList.find(_ref5 => {
114
+ const renderCompactMode = () => {
115
+ return renderTagsDropdown({
116
+ withActions: false,
117
+ withSearchInputInList: true,
118
+ customTriggerRef: tagListRef,
119
+ recalculateListContainerStylesTrigger: isRenderAllTags,
120
+ onDropdownListClose: onConfirmChangesClick,
121
+ renderCustomTrigger: _ref4 => {
124
122
  let {
125
- value,
126
- id
127
- } = _ref5;
128
- return (value !== null && value !== void 0 ? value : id) === v;
129
- });
130
- if (!item) return null;
131
- const isHidden = renderItemsCount !== -1 && staticTagsCount !== -1 ? i >= renderItemsCount : false;
132
- return /*#__PURE__*/_react.default.createElement("div", {
133
- className: "tag-list_wrapper_item ".concat(isHidden ? "tag-list_wrapper_item--hidden" : ""),
134
- key: "tag-list-item-".concat((_item$id = item === null || item === void 0 ? void 0 : item.id) !== null && _item$id !== void 0 ? _item$id : item === null || item === void 0 ? void 0 : item.value),
135
- ref: (0, _utils.checkedRef)(item === null || item === void 0 ? void 0 : item.itemRef)
136
- }, /*#__PURE__*/_react.default.createElement(_Tag.default, (0, _extends2.default)({
137
- testId: "test-taglist-item-".concat((_item$id2 = item === null || item === void 0 ? void 0 : item.id) !== null && _item$id2 !== void 0 ? _item$id2 : item === null || item === void 0 ? void 0 : item.value)
138
- }, item, {
139
- onClick: onTagClick,
140
- removeItem: removeItem
141
- })));
142
- });
143
- };
144
-
145
- const renderMoreTags = () => {
146
- if ((tagList === null || tagList === void 0 ? void 0 : tagList.length) < shownItemsCount || !(tagList !== null && tagList !== void 0 && tagList.length) || disableShowMore) return null;
147
- const restItems = tagList.length - renderItemsCount;
148
- if (restItems === 0 || !withToggle || staticTagsCount === -1) return null;
149
- return /*#__PURE__*/_react.default.createElement(_Tag.default, {
150
- label: "+".concat(restItems),
151
- className: "tag-list_wrapper_render-more",
152
- onClick: disableShowMore ? () => {} : e => cancelDefault(e, () => setRenderAllInterceptor(true))
123
+ isOpen,
124
+ setIsOpen,
125
+ inputRef
126
+ } = _ref4;
127
+ return renderTagsList({
128
+ onToggleRenderAll: v => setTimeout(() => setIsRenderAllTags(v), 1),
129
+ onEditClick: () => {
130
+ setIsOpen(!isEditMode);
131
+ if (isEditMode) onConfirmChangesClick();else setIsEditMode(true);
132
+ }
133
+ });
134
+ }
153
135
  });
154
136
  };
155
137
 
156
- const renderHideTags = () => {
157
- if (renderItemsCount !== (tagList === null || tagList === void 0 ? void 0 : tagList.length) || !withToggle || staticTagsCount === -1 || staticTagsCount === (tagList === null || tagList === void 0 ? void 0 : tagList.length)) return null;
158
- return /*#__PURE__*/_react.default.createElement(_Tag.default, {
159
- label: "...",
160
- className: "tag-list_wrapper_hide-more",
161
- onClick: e => cancelDefault(e, () => setRenderAllInterceptor(false))
162
- });
163
- }; // Set TagList Items
164
-
165
-
166
- (0, _react.useEffect)(() => {
167
- setStaticTagsCount(-1);
168
- setRenderItemsCount(-1);
169
- setRenderAllInterceptor(false);
170
- setTagList(items.map(item => ({ ...item,
171
- itemRef: /*#__PURE__*/(0, _react.createRef)()
172
- })));
173
- }, [items]); // Count Row Tags
174
-
175
- (0, _react.useLayoutEffect)(() => {
176
- if (withToggle && wrapperWidth !== -1) {
177
- setStaticTagsCount(getStaticTagsCount());
178
- }
179
- }, [tagList, wrapperWidth, withToggle]); //
180
-
181
- (0, _react.useLayoutEffect)(() => {
182
- setRenderItemsCount(staticTagsCount);
183
- }, [staticTagsCount]); // Toggle Show/Hide More Tags
184
-
185
- (0, _react.useEffect)(() => {
186
- setRenderItemsCount(renderAll ? tagList === null || tagList === void 0 ? void 0 : tagList.length : staticTagsCount);
187
- }, [renderAll]);
188
- (0, _react.useEffect)(() => {
189
- // eslint-disable-next-line react-hooks/exhaustive-deps
190
- if (wrapperRef !== null && wrapperRef !== void 0 && wrapperRef.current && refProp) refProp.current = wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current;
191
- }, [wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current]);
192
- return /*#__PURE__*/_react.default.createElement("div", {
193
- className: (0, _classnames.default)("tag-list_wrapper", "".concat(renderItemsCount !== (tagList === null || tagList === void 0 ? void 0 : tagList.length) || !withToggle || staticTagsCount === -1 || staticTagsCount === (tagList === null || tagList === void 0 ? void 0 : tagList.length) ? "tag-list_wrapper--only-static-items" : "tag-list_wrapper--all-items"), className, {
194
- "tag-list_wrapper--disabled": disabled
195
- }),
196
- style: {
197
- visibility: staticTagsCount === -1 ? "hidden" : "visible",
198
- zIndex: staticTagsCount === -1 ? "-1" : "auto"
199
- },
200
- ref: wrapperRef
201
- }, renderTags(), renderMoreTags(), renderHideTags(), typeof onEditClick === "function" && /*#__PURE__*/_react.default.createElement("div", {
202
- className: "tag-list__edit-trigger"
203
- }, /*#__PURE__*/_react.default.createElement(_reactFeather.Edit3, {
204
- onClick: onEditClick
205
- })));
138
+ return useDropdownCompactMode ? renderCompactMode() : isEditMode ? renderTagsDropdown({
139
+ withActions: true
140
+ }) : renderTagsList();
206
141
  };
207
142
 
208
143
  var _default = TagList;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "intelicoreact",
3
- "version": "1.4.39",
3
+ "version": "1.4.40",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "files": [