intelicoreact 0.1.94 → 0.1.97
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.
- package/dist/Atomic/FormElements/CheckboxInput/CheckboxInput.scss +4 -0
- package/dist/Atomic/FormElements/Input/Input.js +1 -1
- package/dist/Atomic/FormElements/NumericInput/NumericInput.js +2 -2
- package/dist/Atomic/FormElements/RangeInputs/RangeInputs.js +7 -2
- package/dist/Atomic/FormElements/TieredCheckboxes/TieredCheckboxes.js +12 -4
- package/dist/Atomic/UI/TagList/TagList.js +40 -39
- package/dist/Atomic/UI/TagList/TagList.scss +18 -3
- package/dist/Atomic/UI/TagList/TagListStories.scss +2 -0
- package/package.json +1 -1
|
@@ -122,7 +122,7 @@ var Input = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
|
122
122
|
|
|
123
123
|
if (!isNotValidateASCII) inputValue = (0, _fieldValueFormatters.formatToOnlyASCIICodeText)(inputValue);
|
|
124
124
|
if (symbolsLimit && inputValue.length > +symbolsLimit) inputValue = inputValue.substring(0, +symbolsLimit);
|
|
125
|
-
if (isCropFirstNool
|
|
125
|
+
if (isCropFirstNool && inputValue[0] == 0) return '';
|
|
126
126
|
if (onlyNumbers && isOnlyString || isOnlyString) inputValue = (0, _fieldValueFormatters.formatToLetters)(inputValue, softStringMode);else if (onlyNumbers) inputValue = (0, _fieldValueFormatters.filterNumeric)(inputValue, onlyNumbers);
|
|
127
127
|
onChange(inputValue.toString());
|
|
128
128
|
},
|
|
@@ -189,10 +189,10 @@ var NumericInput = function NumericInput(_ref) {
|
|
|
189
189
|
if (onKeyUp) onKeyUp(e.keyCode, e.target.value);
|
|
190
190
|
},
|
|
191
191
|
decrement: function decrement(e) {
|
|
192
|
-
handle.change(+intMemoVal - +numStep);
|
|
192
|
+
handle.change(+intMemoVal.toString().replace(/,/g, '') - +numStep);
|
|
193
193
|
},
|
|
194
194
|
increment: function increment(e) {
|
|
195
|
-
handle.change(+intMemoVal + +numStep);
|
|
195
|
+
handle.change(+intMemoVal.toString().replace(/,/g, '') + +numStep);
|
|
196
196
|
}
|
|
197
197
|
}; //Check Outside Click
|
|
198
198
|
|
|
@@ -67,7 +67,12 @@ var RangeInputs = function RangeInputs(_ref) {
|
|
|
67
67
|
|
|
68
68
|
var inputFromRef = (0, _react.useRef)(null);
|
|
69
69
|
var inputToRef = (0, _react.useRef)(null);
|
|
70
|
-
|
|
70
|
+
|
|
71
|
+
var isValidRange = function isValidRange(from, to) {
|
|
72
|
+
var correctFrom = +(from === null || from === void 0 ? void 0 : from.replace(/[^\d]/g, ''));
|
|
73
|
+
var correntTo = +(to === null || to === void 0 ? void 0 : to.replace(/[^\d]/g, ''));
|
|
74
|
+
return !!(correctFrom && correntTo && correctFrom <= correntTo);
|
|
75
|
+
};
|
|
71
76
|
|
|
72
77
|
var valueFormatter = function valueFormatter(value) {
|
|
73
78
|
if (type === 'float') return (0, _fieldValueFormatters.filterFloat)(value);else if (isPrice) return (0, _utils.addBitDepthPoints)(value.replace(/[^\d]/g, ''));else return (0, _fieldValueFormatters.formatOnlyNumbers)(value);
|
|
@@ -90,7 +95,7 @@ var RangeInputs = function RangeInputs(_ref) {
|
|
|
90
95
|
} else if (!valueObj[oppositeKey]) {
|
|
91
96
|
var mustToFocus = key === 'from' ? inputToRef.current : inputFromRef.current;
|
|
92
97
|
mustToFocus.focus();
|
|
93
|
-
} else if (!isValidRange) {
|
|
98
|
+
} else if (!isValidRange(valueObj === null || valueObj === void 0 ? void 0 : valueObj.from, valueObj === null || valueObj === void 0 ? void 0 : valueObj.to)) {
|
|
94
99
|
if (!(valueObj !== null && valueObj !== void 0 && valueObj.from)) setError(_objectSpread(_objectSpread({}, error), {}, {
|
|
95
100
|
from: 'Invalid range'
|
|
96
101
|
}));else setError(_objectSpread(_objectSpread({}, error), {}, {
|
|
@@ -7,6 +7,10 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
});
|
|
8
8
|
exports.default = void 0;
|
|
9
9
|
|
|
10
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
11
|
+
|
|
12
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
13
|
+
|
|
10
14
|
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
11
15
|
|
|
12
16
|
var _react = _interopRequireDefault(require("react"));
|
|
@@ -20,7 +24,8 @@ require("./TieredCheckboxes.scss");
|
|
|
20
24
|
var TieredCheckboxes = function TieredCheckboxes(_ref) {
|
|
21
25
|
var items = _ref.items,
|
|
22
26
|
className = _ref.className,
|
|
23
|
-
onChange = _ref.onChange
|
|
27
|
+
onChange = _ref.onChange,
|
|
28
|
+
isUseParentsClassesAsDataset = _ref.isUseParentsClassesAsDataset;
|
|
24
29
|
var handle = {
|
|
25
30
|
changeParent: function changeParent(value, key) {
|
|
26
31
|
var parent = items.find(function (item) {
|
|
@@ -57,10 +62,13 @@ var TieredCheckboxes = function TieredCheckboxes(_ref) {
|
|
|
57
62
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
58
63
|
className: (0, _classnames.default)('tiered-checkboxes', className)
|
|
59
64
|
}, items.map(function (parent) {
|
|
60
|
-
|
|
65
|
+
var datasetProp = isUseParentsClassesAsDataset ? {
|
|
66
|
+
'data-key': parent === null || parent === void 0 ? void 0 : parent.className
|
|
67
|
+
} : {};
|
|
68
|
+
return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, datasetProp, {
|
|
61
69
|
key: parent.key,
|
|
62
|
-
className:
|
|
63
|
-
}, /*#__PURE__*/_react.default.createElement(_CheckboxInput.default, {
|
|
70
|
+
className: (0, _classnames.default)('tiered-checkboxes__parents', (0, _defineProperty2.default)({}, "".concat(parent.className), !isUseParentsClassesAsDataset))
|
|
71
|
+
}), /*#__PURE__*/_react.default.createElement(_CheckboxInput.default, {
|
|
64
72
|
isStark: handle.isAllChecked(parent),
|
|
65
73
|
label: parent.label,
|
|
66
74
|
value: parent.value,
|
|
@@ -13,6 +13,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
|
|
|
13
13
|
|
|
14
14
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
15
15
|
|
|
16
|
+
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
17
|
+
|
|
16
18
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
17
19
|
|
|
18
20
|
var _react = _interopRequireWildcard(require("react"));
|
|
@@ -59,12 +61,12 @@ var TagList = function TagList(_ref) {
|
|
|
59
61
|
tagList = _useState4[0],
|
|
60
62
|
setTagList = _useState4[1];
|
|
61
63
|
|
|
62
|
-
var _useState5 = (0, _react.useState)(
|
|
64
|
+
var _useState5 = (0, _react.useState)(-1),
|
|
63
65
|
_useState6 = (0, _slicedToArray2.default)(_useState5, 2),
|
|
64
|
-
|
|
65
|
-
|
|
66
|
+
staticTagsCount = _useState6[0],
|
|
67
|
+
setStaticTagsCount = _useState6[1];
|
|
66
68
|
|
|
67
|
-
var _useState7 = (0, _react.useState)(
|
|
69
|
+
var _useState7 = (0, _react.useState)(-1),
|
|
68
70
|
_useState8 = (0, _slicedToArray2.default)(_useState7, 2),
|
|
69
71
|
renderItemsCount = _useState8[0],
|
|
70
72
|
setRenderItemsCount = _useState8[1];
|
|
@@ -74,17 +76,17 @@ var TagList = function TagList(_ref) {
|
|
|
74
76
|
renderAll = _useState10[0],
|
|
75
77
|
setRenderAll = _useState10[1];
|
|
76
78
|
|
|
77
|
-
var _useState11 = (0, _react.useState)(
|
|
79
|
+
var _useState11 = (0, _react.useState)(-1),
|
|
78
80
|
_useState12 = (0, _slicedToArray2.default)(_useState11, 2),
|
|
79
|
-
|
|
80
|
-
|
|
81
|
+
lastCheckTime = _useState12[0],
|
|
82
|
+
setLastCheckTime = _useState12[1];
|
|
81
83
|
|
|
82
84
|
var _useState13 = (0, _react.useState)(Date.now()),
|
|
83
85
|
_useState14 = (0, _slicedToArray2.default)(_useState13, 2),
|
|
84
86
|
checkTagsRefDate = _useState14[0],
|
|
85
87
|
setCheckTagsRefDate = _useState14[1];
|
|
86
88
|
|
|
87
|
-
var
|
|
89
|
+
var isTagsRefSet = function isTagsRefSet() {
|
|
88
90
|
if (!tagList.length) return false;
|
|
89
91
|
return tagList.map(function (_ref2) {
|
|
90
92
|
var itemRef = _ref2.itemRef;
|
|
@@ -95,43 +97,43 @@ var TagList = function TagList(_ref) {
|
|
|
95
97
|
}, true);
|
|
96
98
|
};
|
|
97
99
|
|
|
98
|
-
var
|
|
99
|
-
var _tagList$map$reduce;
|
|
100
|
-
|
|
100
|
+
var getStaticTagsCount = function getStaticTagsCount() {
|
|
101
101
|
if (typeof shownItemsCount === 'number') return shownItemsCount;
|
|
102
|
-
|
|
102
|
+
var result = tagList.map(function (_ref3) {
|
|
103
103
|
var itemRef = _ref3.itemRef;
|
|
104
104
|
return itemRef;
|
|
105
105
|
}).reduce(function (result, itemRef) {
|
|
106
|
-
|
|
107
|
-
|
|
106
|
+
// const itemWidth = itemRef.current.getBoundingClientRect();
|
|
107
|
+
var itemWidth = parseInt(window.getComputedStyle(itemRef === null || itemRef === void 0 ? void 0 : itemRef.current).getPropertyValue('width')) + parseInt(window.getComputedStyle(itemRef === null || itemRef === void 0 ? void 0 : itemRef.current).getPropertyValue('margin-left')) + parseInt(window.getComputedStyle(itemRef === null || itemRef === void 0 ? void 0 : itemRef.current).getPropertyValue('margin-right'));
|
|
108
108
|
|
|
109
|
-
if (itemWidth > 0 && itemWidth + result.width < wrapperWidth) {
|
|
109
|
+
if (!isNaN(itemWidth) && itemWidth > 0 && itemWidth + result.width < wrapperWidth) {
|
|
110
110
|
result = {
|
|
111
111
|
count: result.count + 1,
|
|
112
|
-
width: result.width + itemWidth
|
|
112
|
+
width: result.width + itemWidth,
|
|
113
|
+
items: [].concat((0, _toConsumableArray2.default)(result.items), [{
|
|
114
|
+
w: itemWidth,
|
|
115
|
+
r: itemRef === null || itemRef === void 0 ? void 0 : itemRef.current
|
|
116
|
+
}])
|
|
113
117
|
};
|
|
114
118
|
}
|
|
115
119
|
|
|
116
120
|
return result;
|
|
117
121
|
}, {
|
|
118
122
|
count: 0,
|
|
119
|
-
width: 0
|
|
120
|
-
|
|
123
|
+
width: 0,
|
|
124
|
+
items: []
|
|
125
|
+
});
|
|
126
|
+
return result === null || result === void 0 ? void 0 : result.count;
|
|
121
127
|
}; // Set TagList Wrapper Width
|
|
122
128
|
|
|
123
129
|
|
|
124
130
|
(0, _react.useLayoutEffect)(function () {
|
|
125
|
-
var wrapperNewWidth = parseInt(window.getComputedStyle(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current).getPropertyValue('width')) -
|
|
131
|
+
var wrapperNewWidth = parseInt(window.getComputedStyle(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current).getPropertyValue('width')) - 48;
|
|
126
132
|
|
|
127
133
|
if (wrapperRef.current && wrapperNewWidth !== wrapperWidth) {
|
|
128
134
|
setWrapperWidth(wrapperNewWidth);
|
|
129
135
|
}
|
|
130
|
-
});
|
|
131
|
-
(0, _react.useEffect)(function () {
|
|
132
|
-
setRenderItemsCount(items.length);
|
|
133
|
-
setIsInit(false);
|
|
134
|
-
}, [wrapperWidth]); // Set TagList Items
|
|
136
|
+
}); // Set TagList Items
|
|
135
137
|
|
|
136
138
|
(0, _react.useEffect)(function () {
|
|
137
139
|
setTagList(items.map(function (item) {
|
|
@@ -142,29 +144,28 @@ var TagList = function TagList(_ref) {
|
|
|
142
144
|
}, [items]); // Count Row Tags
|
|
143
145
|
|
|
144
146
|
(0, _react.useEffect)(function () {
|
|
145
|
-
if (!withToggle
|
|
147
|
+
if (!withToggle) return false;
|
|
146
148
|
|
|
147
|
-
if (!
|
|
148
|
-
|
|
149
|
+
if (!isTagsRefSet()) {
|
|
150
|
+
setLastCheckTime(Date.now());
|
|
149
151
|
return false;
|
|
150
152
|
}
|
|
151
153
|
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
154
|
+
setStaticTagsCount(getStaticTagsCount());
|
|
155
|
+
}, [tagList, wrapperWidth, lastCheckTime]); //
|
|
156
|
+
|
|
155
157
|
(0, _react.useEffect)(function () {
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
}, [rowTagsCount]);
|
|
158
|
+
setRenderItemsCount(staticTagsCount);
|
|
159
|
+
}, [staticTagsCount]); // Toggle Show/Hide More Tags
|
|
160
|
+
|
|
160
161
|
(0, _react.useEffect)(function () {
|
|
161
|
-
setRenderItemsCount(renderAll ? tagList.length :
|
|
162
|
+
setRenderItemsCount(renderAll ? tagList.length : staticTagsCount);
|
|
162
163
|
}, [renderAll]);
|
|
163
164
|
|
|
164
165
|
var renderTags = function renderTags() {
|
|
165
166
|
return tagList.map(function (item, i) {
|
|
166
167
|
return _objectSpread(_objectSpread({}, item), {}, {
|
|
167
|
-
isHidden: renderItemsCount
|
|
168
|
+
isHidden: renderItemsCount !== -1 ? i >= renderItemsCount : false
|
|
168
169
|
});
|
|
169
170
|
}).map(function (item, i) {
|
|
170
171
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
@@ -179,7 +180,7 @@ var TagList = function TagList(_ref) {
|
|
|
179
180
|
|
|
180
181
|
var renderMoreTags = function renderMoreTags() {
|
|
181
182
|
var restItems = tagList.length - renderItemsCount;
|
|
182
|
-
if (restItems === 0 || !withToggle) return null;
|
|
183
|
+
if (restItems === 0 || !withToggle || staticTagsCount === -1) return null;
|
|
183
184
|
return /*#__PURE__*/_react.default.createElement(_Tag.default, {
|
|
184
185
|
label: "+".concat(restItems),
|
|
185
186
|
className: "tag-list_wrapper_render-more",
|
|
@@ -190,7 +191,7 @@ var TagList = function TagList(_ref) {
|
|
|
190
191
|
};
|
|
191
192
|
|
|
192
193
|
var renderHideTags = function renderHideTags() {
|
|
193
|
-
if (renderItemsCount !== tagList.length || !withToggle) return null;
|
|
194
|
+
if (renderItemsCount !== tagList.length || !withToggle || staticTagsCount === -1 || staticTagsCount === tagList.length) return null;
|
|
194
195
|
return /*#__PURE__*/_react.default.createElement(_Tag.default, {
|
|
195
196
|
label: "...",
|
|
196
197
|
className: "tag-list_wrapper_hide-more",
|
|
@@ -201,7 +202,7 @@ var TagList = function TagList(_ref) {
|
|
|
201
202
|
};
|
|
202
203
|
|
|
203
204
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
204
|
-
className: "tag-list_wrapper ".concat(className !== null && className !== void 0 ? className : ''),
|
|
205
|
+
className: "tag-list_wrapper ".concat(renderItemsCount !== tagList.length || !withToggle || staticTagsCount === -1 || staticTagsCount === tagList.length ? 'tag-list_wrapper--only-static-items' : 'tag-list_wrapper--all-items', " ").concat(className !== null && className !== void 0 ? className : ''),
|
|
205
206
|
ref: wrapperRef
|
|
206
207
|
}, renderTags(), renderMoreTags(), renderHideTags());
|
|
207
208
|
};
|
|
@@ -1,10 +1,19 @@
|
|
|
1
1
|
.tag-list_wrapper{
|
|
2
|
-
display:
|
|
2
|
+
display: block;
|
|
3
3
|
width: 100%;
|
|
4
|
+
max-width: 100%;
|
|
5
|
+
min-width: 100%;
|
|
6
|
+
|
|
7
|
+
&--only-static-items{
|
|
8
|
+
.tag-list_wrapper_item{
|
|
9
|
+
margin-bottom: 0!important;
|
|
10
|
+
}
|
|
11
|
+
}
|
|
4
12
|
|
|
5
13
|
&_item{
|
|
6
|
-
display:
|
|
7
|
-
margin:
|
|
14
|
+
display: inline-block;
|
|
15
|
+
margin-right: 8px;
|
|
16
|
+
margin-bottom: 8px;
|
|
8
17
|
|
|
9
18
|
&--hidden{
|
|
10
19
|
display: none;
|
|
@@ -16,4 +25,10 @@
|
|
|
16
25
|
background: #FFEDC8;
|
|
17
26
|
cursor: pointer;
|
|
18
27
|
}
|
|
28
|
+
|
|
29
|
+
.tag{
|
|
30
|
+
margin-bottom: 0!important;
|
|
31
|
+
margin-right: 0!important;
|
|
32
|
+
margin: 0!important;
|
|
33
|
+
}
|
|
19
34
|
}
|