wini-web-components 2.5.2 → 2.5.4
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.
|
@@ -109,7 +109,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
109
109
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
110
110
|
exports.SelectMultiple = void 0;
|
|
111
111
|
var react_1 = __importStar(require("react"));
|
|
112
|
-
var react_dom_1 = __importDefault(require("react-dom"));
|
|
113
112
|
var input_multi_select_module_css_1 = __importDefault(require("./input-multi-select.module.css"));
|
|
114
113
|
var checkbox_1 = require("../checkbox/checkbox");
|
|
115
114
|
var text_1 = require("../text/text");
|
|
@@ -237,7 +236,7 @@ var TSelectMultiple = /** @class */ (function (_super) {
|
|
|
237
236
|
this.setState(__assign(__assign({}, this.state), { value: (_a = this.props.value) !== null && _a !== void 0 ? _a : [] }));
|
|
238
237
|
//
|
|
239
238
|
if (this.state.isOpen && (prevState.isOpen !== this.state.isOpen || prevState.value.length !== this.state.value.length)) {
|
|
240
|
-
var thisPopupRect = (_b =
|
|
239
|
+
var thisPopupRect = (_b = this.containerRef.current.querySelector(".select-multi-popup")) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
|
|
241
240
|
if (thisPopupRect) {
|
|
242
241
|
var style = void 0;
|
|
243
242
|
if (prevState.isOpen !== this.state.isOpen && thisPopupRect.right > document.body.offsetWidth) {
|
|
@@ -295,43 +294,42 @@ var TSelectMultiple = /** @class */ (function (_super) {
|
|
|
295
294
|
iconRef.style.display = "none";
|
|
296
295
|
}, className: 'row' },
|
|
297
296
|
react_1.default.createElement(winicon_1.Winicon, { src: this.state.isOpen ? "fill/arrows/up-arrow" : "fill/arrows/down-arrow", size: '1.2rem' })),
|
|
298
|
-
this.state.isOpen &&
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
297
|
+
this.state.isOpen && react_1.default.createElement(popup_1.PopupOverlay, { className: "hidden-overlay", onClose: function (ev) {
|
|
298
|
+
if (ev.target !== _this.inputRef.current)
|
|
299
|
+
_this.setState(__assign(__assign({}, _this.state), { isOpen: false }));
|
|
300
|
+
} },
|
|
301
|
+
react_1.default.createElement("div", { className: "".concat(input_multi_select_module_css_1.default['select-multi-popup'], " select-multi-popup col ").concat((_e = this.props.popupClassName) !== null && _e !== void 0 ? _e : ""), style: (_f = this.state.style) !== null && _f !== void 0 ? _f : {
|
|
302
|
+
top: this.state.offset.y + this.state.offset.height + 2 + 'px',
|
|
303
|
+
left: this.state.offset.x + 'px',
|
|
304
|
+
width: this.state.offset.width,
|
|
302
305
|
} },
|
|
303
|
-
react_1.default.createElement("div", {
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
if (isSelectedAll) {
|
|
316
|
-
newValue = _this.state.value.filter(function (vl) { return _list.every(function (item) { return vl !== item.id || item.disabled; }); });
|
|
317
|
-
}
|
|
318
|
-
else {
|
|
319
|
-
newValue = __spreadArray(__spreadArray([], _this.state.value, true), _list.filter(function (item) { return _this.state.value.every(function (vl) { return vl !== item.id; }) && !item.disabled; }).map(function (e) { return e.id; }), true);
|
|
320
|
-
}
|
|
306
|
+
react_1.default.createElement("div", { style: { padding: '1.2rem 1.6rem', width: '100%', borderBottom: "var(--neutral-main-border)" } }, (function () {
|
|
307
|
+
var _a, _b;
|
|
308
|
+
var _list = ((_b = (_a = _this.state.search) !== null && _a !== void 0 ? _a : _this.props.options) !== null && _b !== void 0 ? _b : []);
|
|
309
|
+
var isSelectedAll = _list.every(function (item) { return _this.state.value.some(function (vl) { return vl === item.id; }); });
|
|
310
|
+
return react_1.default.createElement(text_1.Text, { onClick: function () {
|
|
311
|
+
var newValue = [];
|
|
312
|
+
if (_list.length) {
|
|
313
|
+
if (isSelectedAll) {
|
|
314
|
+
newValue = _this.state.value.filter(function (vl) { return _list.every(function (item) { return vl !== item.id || item.disabled; }); });
|
|
315
|
+
}
|
|
316
|
+
else {
|
|
317
|
+
newValue = __spreadArray(__spreadArray([], _this.state.value, true), _list.filter(function (item) { return _this.state.value.every(function (vl) { return vl !== item.id; }) && !item.disabled; }).map(function (e) { return e.id; }), true);
|
|
321
318
|
}
|
|
322
|
-
_this.setState(__assign(__assign({}, _this.state), { value: newValue }));
|
|
323
|
-
if (_this.props.onChange)
|
|
324
|
-
_this.props.onChange(newValue);
|
|
325
|
-
}, className: 'button-text-3', style: { color: _list.length ? 'var(--infor-main-color)' : 'var(--neutral-text-title-color)' } }, _list.length && isSelectedAll ? "".concat(t("remove"), " ").concat(t("all").toLowerCase()) : "".concat(t("select"), " ").concat(t("all").toLowerCase()));
|
|
326
|
-
})()),
|
|
327
|
-
react_1.default.createElement("div", { className: "col ".concat(input_multi_select_module_css_1.default['select-body']), onScroll: this.props.handleLoadmore ? function (ev) {
|
|
328
|
-
if (_this.props.handleLoadmore) {
|
|
329
|
-
var scrollElement = ev.target;
|
|
330
|
-
_this.props.handleLoadmore(Math.round(scrollElement.offsetHeight + scrollElement.scrollTop) >= (scrollElement.scrollHeight - 1), ev);
|
|
331
319
|
}
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
320
|
+
_this.setState(__assign(__assign({}, _this.state), { value: newValue }));
|
|
321
|
+
if (_this.props.onChange)
|
|
322
|
+
_this.props.onChange(newValue);
|
|
323
|
+
}, className: 'button-text-3', style: { color: _list.length ? 'var(--infor-main-color)' : 'var(--neutral-text-title-color)' } }, _list.length && isSelectedAll ? "".concat(t("remove"), " ").concat(t("all").toLowerCase()) : "".concat(t("select"), " ").concat(t("all").toLowerCase()));
|
|
324
|
+
})()),
|
|
325
|
+
react_1.default.createElement("div", { className: "col ".concat(input_multi_select_module_css_1.default['select-body']), onScroll: this.props.handleLoadmore ? function (ev) {
|
|
326
|
+
if (_this.props.handleLoadmore) {
|
|
327
|
+
var scrollElement = ev.target;
|
|
328
|
+
_this.props.handleLoadmore(Math.round(scrollElement.offsetHeight + scrollElement.scrollTop) >= (scrollElement.scrollHeight - 1), ev);
|
|
329
|
+
}
|
|
330
|
+
} : undefined },
|
|
331
|
+
((_g = this.state.search) !== null && _g !== void 0 ? _g : this.state.options).filter(function (e) { return !e.parentId; }).map(function (item) { return _this.renderOptions(item); }),
|
|
332
|
+
(!((_h = this.state.search) === null || _h === void 0 ? void 0 : _h.length) && !((_j = this.props.options) === null || _j === void 0 ? void 0 : _j.length)) && (react_1.default.createElement("div", { className: input_multi_select_module_css_1.default['no-results-found'] }, t("noResultFound")))))));
|
|
335
333
|
};
|
|
336
334
|
return TSelectMultiple;
|
|
337
335
|
}(react_1.default.Component));
|
|
@@ -101,7 +101,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
101
101
|
exports.Select1 = void 0;
|
|
102
102
|
var select1_module_css_1 = __importDefault(require("./select1.module.css"));
|
|
103
103
|
var react_1 = __importStar(require("react"));
|
|
104
|
-
var react_dom_1 = __importDefault(require("react-dom"));
|
|
105
104
|
var winicon_1 = require("../wini-icon/winicon");
|
|
106
105
|
var text_1 = require("../text/text");
|
|
107
106
|
var react_i18next_1 = require("react-i18next");
|
|
@@ -227,7 +226,7 @@ var TSelect1 = /** @class */ (function (_super) {
|
|
|
227
226
|
this.inputRef.current.value = "".concat((_d = (_c = this.state.options.find(function (e) { return e.id === _this.state.value; })) === null || _c === void 0 ? void 0 : _c.name) !== null && _d !== void 0 ? _d : "");
|
|
228
227
|
//
|
|
229
228
|
if (this.state.isOpen && prevState.isOpen !== this.state.isOpen) {
|
|
230
|
-
var thisPopupRect = (_e =
|
|
229
|
+
var thisPopupRect = (_e = this.containerRef.current.querySelector(".select1-popup")) === null || _e === void 0 ? void 0 : _e.getBoundingClientRect();
|
|
231
230
|
if (thisPopupRect) {
|
|
232
231
|
var style = void 0;
|
|
233
232
|
if (thisPopupRect.right > document.body.offsetWidth) {
|
|
@@ -278,27 +277,26 @@ var TSelect1 = /** @class */ (function (_super) {
|
|
|
278
277
|
iconRef.style.display = "none";
|
|
279
278
|
}, className: 'row' },
|
|
280
279
|
react_1.default.createElement(winicon_1.Winicon, { src: this.state.isOpen ? "fill/arrows/up-arrow" : "fill/arrows/down-arrow", size: "1.2rem" })),
|
|
281
|
-
this.state.isOpen &&
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
280
|
+
this.state.isOpen && react_1.default.createElement(popup_1.PopupOverlay, { onOpen: this.props.onOpenOptions, className: "hidden-overlay", onClose: function (ev) {
|
|
281
|
+
if (ev.target !== _this.inputRef.current)
|
|
282
|
+
_this.setState(__assign(__assign({}, _this.state), { isOpen: false }));
|
|
283
|
+
} },
|
|
284
|
+
react_1.default.createElement("div", { className: "".concat(select1_module_css_1.default['select1-popup'], " select1-popup col ").concat((_f = this.props.popupClassName) !== null && _f !== void 0 ? _f : ""), style: (_g = this.state.style) !== null && _g !== void 0 ? _g : {
|
|
285
|
+
top: this.state.offset.y + this.state.offset.height + 2 + 'px',
|
|
286
|
+
left: this.state.offset.x + 'px',
|
|
287
|
+
width: this.state.offset.width,
|
|
285
288
|
} },
|
|
286
|
-
react_1.default.createElement("div", { className: "".concat(select1_module_css_1.default['
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
((_h = this.state.search) !== null && _h !== void 0 ? _h : this.state.options).filter(function (e) { return !e.parentId; }).map(function (item) {
|
|
298
|
-
var _a, _b;
|
|
299
|
-
return react_1.default.createElement(OptionsItemTile, { key: item.id, item: item, children: ((_a = _this.state.search) !== null && _a !== void 0 ? _a : _this.state.options).filter(function (e) { return e.parentId === item.id; }), selected: _this.state.selected === item.id, onClick: _this.onSelect, treeData: ((_b = _this.state.search) !== null && _b !== void 0 ? _b : _this.state.options).some(function (e) { return e.parentId; }) });
|
|
300
|
-
}),
|
|
301
|
-
(!((_j = this.state.search) === null || _j === void 0 ? void 0 : _j.length) && !((_k = this.props.options) === null || _k === void 0 ? void 0 : _k.length)) && (react_1.default.createElement("div", { className: select1_module_css_1.default['no-results-found'] }, t("noResultFound")))))), document.body));
|
|
289
|
+
react_1.default.createElement("div", { className: "col ".concat(select1_module_css_1.default['select-body']), onScroll: this.props.handleLoadmore ? function (ev) {
|
|
290
|
+
if (_this.props.handleLoadmore) {
|
|
291
|
+
var scrollElement = ev.target;
|
|
292
|
+
_this.props.handleLoadmore(Math.round(scrollElement.offsetHeight + scrollElement.scrollTop) >= (scrollElement.scrollHeight - 1), ev);
|
|
293
|
+
}
|
|
294
|
+
} : undefined },
|
|
295
|
+
((_h = this.state.search) !== null && _h !== void 0 ? _h : this.state.options).filter(function (e) { return !e.parentId; }).map(function (item) {
|
|
296
|
+
var _a, _b;
|
|
297
|
+
return react_1.default.createElement(OptionsItemTile, { key: item.id, item: item, children: ((_a = _this.state.search) !== null && _a !== void 0 ? _a : _this.state.options).filter(function (e) { return e.parentId === item.id; }), selected: _this.state.selected === item.id, onClick: _this.onSelect, treeData: ((_b = _this.state.search) !== null && _b !== void 0 ? _b : _this.state.options).some(function (e) { return e.parentId; }) });
|
|
298
|
+
}),
|
|
299
|
+
(!((_j = this.state.search) === null || _j === void 0 ? void 0 : _j.length) && !((_k = this.props.options) === null || _k === void 0 ? void 0 : _k.length)) && (react_1.default.createElement("div", { className: select1_module_css_1.default['no-results-found'] }, t("noResultFound")))))));
|
|
302
300
|
};
|
|
303
301
|
return TSelect1;
|
|
304
302
|
}(react_1.default.Component));
|