wini-web-components 1.3.1 → 1.3.3

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 (6) hide show
  1. package/dist/component/input-multi-select/input-multi-select.d.ts +1 -0
  2. package/dist/component/input-multi-select/input-multi-select.js +4 -4
  3. package/dist/component/select1/select1.d.ts +1 -0
  4. package/dist/component/select1/select1.js +13 -11
  5. package/dist/index.js +1 -1
  6. package/package.json +1 -1
package/dist/component/input-multi-select/input-multi-select.d.ts CHANGED
@@ -14,6 +14,7 @@ interface SelectMultipleProps {
14
14
  style?: CSSProperties;
15
15
  handleSearch?: (e: string) => Promise<Array<OptionsItem>>;
16
16
  showClearValueButton?: boolean;
17
+ popupClassName?: string;
17
18
  }
18
19
  interface SelectMultipleState {
19
20
  value: Array<string | number>;
package/dist/component/input-multi-select/input-multi-select.js CHANGED
@@ -256,7 +256,7 @@ var SelectMultiple = /** @class */ (function (_super) {
256
256
  };
257
257
  SelectMultiple.prototype.render = function () {
258
258
  var _this = this;
259
- var _a, _b, _c, _d, _e, _f, _g, _h;
259
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j;
260
260
  return react_1.default.createElement("div", { id: this.props.id, ref: this.containerRef, className: "select-multi-container row ".concat(this.props.disabled ? 'disabled' : '', " ").concat(((_a = this.props.helperText) === null || _a === void 0 ? void 0 : _a.length) && 'helper-text', " ").concat((_b = this.props.className) !== null && _b !== void 0 ? _b : 'body-3'), "helper-text": this.props.helperText, style: this.props.style ? __assign(__assign({}, { '--helper-text-color': (_c = this.props.helperTextColor) !== null && _c !== void 0 ? _c : '#e14337' }), this.props.style) : { '--helper-text-color': (_d = this.props.helperTextColor) !== null && _d !== void 0 ? _d : '#e14337' }, onClick: function () {
261
261
  var _a, _b;
262
262
  if (!_this.state.isOpen)
@@ -282,7 +282,7 @@ var SelectMultiple = /** @class */ (function (_super) {
282
282
  } },
283
283
  react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faXmarkCircle, style: { fontSize: '1.6rem', color: '#161C24' } })),
284
284
  this.state.isOpen &&
285
- react_dom_1.default.createPortal(react_1.default.createElement("div", { className: 'select-multi-popup col', style: (_e = this.state.style) !== null && _e !== void 0 ? _e : {
285
+ react_dom_1.default.createPortal(react_1.default.createElement("div", { className: "select-multi-popup col ".concat((_e = this.props.popupClassName) !== null && _e !== void 0 ? _e : ""), style: (_f = this.state.style) !== null && _f !== void 0 ? _f : {
286
286
  top: this.state.offset.y + this.state.offset.height + 2 + 'px',
287
287
  left: this.state.offset.x + 'px',
288
288
  width: this.state.offset.width,
@@ -307,8 +307,8 @@ var SelectMultiple = /** @class */ (function (_super) {
307
307
  }, className: 'button-text-3', style: { color: _list.length ? 'var(--infor-color)' : '#00204D99', } }, _list.length && isSelectedAll ? 'Bỏ chọn tất cả' : 'Chọn tất cả');
308
308
  })()),
309
309
  react_1.default.createElement("div", { className: 'col select-body' },
310
- ((_f = this.state.search) !== null && _f !== void 0 ? _f : this.state.options).filter(function (e) { return !e.parentId; }).map(function (item) { return _this.renderOptions(item); }),
311
- (((_g = this.state.search) === null || _g === void 0 ? void 0 : _g.length) === 0 || ((_h = this.props.options) === null || _h === void 0 ? void 0 : _h.length) === 0) && (react_1.default.createElement("div", { className: 'no-results-found' }, "No result found")))), document.body));
310
+ ((_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); }),
311
+ (((_h = this.state.search) === null || _h === void 0 ? void 0 : _h.length) === 0 || ((_j = this.props.options) === null || _j === void 0 ? void 0 : _j.length) === 0) && (react_1.default.createElement("div", { className: 'no-results-found' }, "No result found")))), document.body));
312
312
  };
313
313
  return SelectMultiple;
314
314
  }(react_1.default.Component));
package/dist/component/select1/select1.d.ts CHANGED
@@ -21,6 +21,7 @@ interface Select1Props {
21
21
  handleSearch?: (e: string) => Promise<Array<OptionsItem>>;
22
22
  showClearValueButton?: boolean;
23
23
  readOnly?: boolean;
24
+ popupClassName?: string;
24
25
  }
25
26
  interface Select1State {
26
27
  value?: string | number;
package/dist/component/select1/select1.js CHANGED
@@ -233,19 +233,21 @@ var Select1 = /** @class */ (function (_super) {
233
233
  };
234
234
  Select1.prototype.componentDidUpdate = function (prevProps, prevState) {
235
235
  var _this = this;
236
- var _a, _b, _c, _d, _e, _f, _g, _h;
236
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
237
237
  if (prevProps.options !== this.props.options) {
238
238
  this.setState(__assign(__assign({}, this.state), { options: this.props.options }));
239
239
  if (this.inputRef.current)
240
240
  this.inputRef.current.value = "".concat((_b = (_a = this.props.options.find(function (e) { return e.id === _this.state.value; })) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : "");
241
241
  }
242
- if (prevProps.value !== this.props.value)
242
+ if (prevProps.value !== this.props.value && this.inputRef.current) {
243
243
  this.setState(__assign(__assign({}, this.state), { value: this.props.value }));
244
- if (prevState.value !== this.state.value && this.inputRef.current)
245
244
  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 : "");
245
+ }
246
+ if (prevState.value !== this.state.value && this.inputRef.current)
247
+ this.inputRef.current.value = "".concat((_f = (_e = this.state.options.find(function (e) { return e.id === _this.state.value; })) === null || _e === void 0 ? void 0 : _e.name) !== null && _f !== void 0 ? _f : "");
246
248
  //
247
249
  if (this.state.isOpen && prevState.isOpen !== this.state.isOpen) {
248
- var thisPopupRect = (_e = document.body.querySelector('.select1-popup')) === null || _e === void 0 ? void 0 : _e.getBoundingClientRect();
250
+ var thisPopupRect = (_g = document.body.querySelector('.select1-popup')) === null || _g === void 0 ? void 0 : _g.getBoundingClientRect();
249
251
  if (thisPopupRect) {
250
252
  var style = void 0;
251
253
  if (thisPopupRect.right > document.body.offsetWidth) {
@@ -255,15 +257,15 @@ var Select1 = /** @class */ (function (_super) {
255
257
  };
256
258
  }
257
259
  var _bottom = thisPopupRect.bottom - 8;
258
- var thisContainerRect = (_f = this.containerRef.current) === null || _f === void 0 ? void 0 : _f.getBoundingClientRect();
260
+ var thisContainerRect = (_h = this.containerRef.current) === null || _h === void 0 ? void 0 : _h.getBoundingClientRect();
259
261
  if (thisContainerRect) {
260
262
  if (_bottom > document.body.offsetHeight) {
261
263
  style = __assign(__assign({}, (style !== null && style !== void 0 ? style : {})), { top: "".concat(thisContainerRect.y - 2 - thisPopupRect.height, "px") });
262
264
  }
263
265
  }
264
266
  if (style) {
265
- (_g = style.left) !== null && _g !== void 0 ? _g : (style.left = style.right ? undefined : "".concat(this.state.offset.x, "px"));
266
- (_h = style.width) !== null && _h !== void 0 ? _h : (style.width = "".concat(this.state.offset.width, "px"));
267
+ (_j = style.left) !== null && _j !== void 0 ? _j : (style.left = style.right ? undefined : "".concat(this.state.offset.x, "px"));
268
+ (_k = style.width) !== null && _k !== void 0 ? _k : (style.width = "".concat(this.state.offset.width, "px"));
267
269
  this.setState(__assign(__assign({}, this.state), { style: style }));
268
270
  }
269
271
  }
@@ -271,7 +273,7 @@ var Select1 = /** @class */ (function (_super) {
271
273
  };
272
274
  Select1.prototype.render = function () {
273
275
  var _this = this;
274
- var _a, _b, _c, _d, _e, _f, _g, _h;
276
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j;
275
277
  var _value = this.state.options.find(function (e) { return e.id === _this.state.value; });
276
278
  return react_1.default.createElement("div", { id: this.props.id, ref: this.containerRef, className: "select1-container row ".concat(this.props.disabled ? 'disabled' : '', " ").concat(((_a = this.props.helperText) === null || _a === void 0 ? void 0 : _a.length) && 'helper-text', " ").concat((_b = this.props.className) !== null && _b !== void 0 ? _b : 'body-3'), "helper-text": this.props.helperText, style: this.props.style ? __assign(__assign({}, { '--helper-text-color': (_c = this.props.helperTextColor) !== null && _c !== void 0 ? _c : '#e14337' }), this.props.style) : { '--helper-text-color': (_d = this.props.helperTextColor) !== null && _d !== void 0 ? _d : '#e14337' }, onClick: function () {
277
279
  var _a, _b, _c;
@@ -293,14 +295,14 @@ var Select1 = /** @class */ (function (_super) {
293
295
  } },
294
296
  react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faXmarkCircle, style: { fontSize: '1.6rem', color: '#161C24' } })),
295
297
  this.state.isOpen &&
296
- react_dom_1.default.createPortal(react_1.default.createElement("div", { className: 'select1-popup col', style: (_e = this.state.style) !== null && _e !== void 0 ? _e : {
298
+ react_dom_1.default.createPortal(react_1.default.createElement("div", { className: "select1-popup col ".concat((_e = this.props.popupClassName) !== null && _e !== void 0 ? _e : ""), style: (_f = this.state.style) !== null && _f !== void 0 ? _f : {
297
299
  top: this.state.offset.y + this.state.offset.height + 2 + 'px',
298
300
  left: this.state.offset.x + 'px',
299
301
  width: this.state.offset.width,
300
302
  }, onMouseOver: function (ev) { return _this.setState(__assign(__assign({}, _this.state), { onSelect: ev.target })); }, onMouseOut: function () { return _this.setState(__assign(__assign({}, _this.state), { onSelect: null })); } },
301
303
  react_1.default.createElement("div", { className: 'col select-body' },
302
- ((_f = this.state.search) !== null && _f !== void 0 ? _f : this.state.options).filter(function (e) { return !e.parentId; }).map(function (item) { return _this.renderOptions(item); }),
303
- (((_g = this.state.search) === null || _g === void 0 ? void 0 : _g.length) === 0 || ((_h = this.props.options) === null || _h === void 0 ? void 0 : _h.length) === 0) && (react_1.default.createElement("div", { className: 'no-results-found' }, "No result found")))), document.body));
304
+ ((_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); }),
305
+ (((_h = this.state.search) === null || _h === void 0 ? void 0 : _h.length) === 0 || ((_j = this.props.options) === null || _j === void 0 ? void 0 : _j.length) === 0) && (react_1.default.createElement("div", { className: 'no-results-found' }, "No result found")))), document.body));
304
306
  };
305
307
  return Select1;
306
308
  }(react_1.default.Component));