wini-web-components 2.1.8 → 2.1.9

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 (4) hide show
  1. package/dist/component/select1/select1.d.ts +3 -2
  2. package/dist/component/select1/select1.js +26 -35
  3. package/dist/index.js +1 -1
  4. package/package.json +1 -1
package/dist/component/select1/select1.d.ts CHANGED
@@ -3,7 +3,7 @@ export interface OptionsItem {
3
3
  id: string | number;
4
4
  parentId?: string;
5
5
  name: string | ReactNode;
6
- title?: string | ReactNode;
6
+ title?: string | ((onSelect: (e: OptionsItem) => void) => ReactNode);
7
7
  disabled?: boolean;
8
8
  }
9
9
  interface Select1Props {
@@ -19,10 +19,12 @@ interface Select1Props {
19
19
  style?: CSSProperties;
20
20
  handleSearch?: (e: string) => Promise<Array<OptionsItem>>;
21
21
  handleLoadmore?: (onLoadMore: boolean, ev: React.UIEvent<HTMLDivElement, UIEvent>) => void;
22
+ handleLoadChildren?: () => {};
22
23
  readOnly?: boolean;
23
24
  popupClassName?: string;
24
25
  prefix?: ReactNode;
25
26
  suffix?: ReactNode;
27
+ onOpenOptions?: (popupRef: HTMLDivElement) => void;
26
28
  }
27
29
  interface Select1State {
28
30
  value?: string | number;
@@ -40,7 +42,6 @@ export declare class Select1 extends React.Component<Select1Props, Select1State>
40
42
  constructor(props: Select1Props);
41
43
  private search;
42
44
  private onSelect;
43
- private renderOptions;
44
45
  private onKeyDown;
45
46
  componentDidUpdate(prevProps: Select1Props, prevState: Select1State): void;
46
47
  componentDidMount(): void;
package/dist/component/select1/select1.js CHANGED
@@ -92,8 +92,8 @@ exports.Select1 = void 0;
92
92
  var select1_module_css_1 = __importDefault(require("./select1.module.css"));
93
93
  var react_1 = __importStar(require("react"));
94
94
  var react_dom_1 = __importDefault(require("react-dom"));
95
- var text_1 = require("../text/text");
96
95
  var winicon_1 = require("../wini-icon/winicon");
96
+ var text_1 = require("../text/text");
97
97
  ;
98
98
  var Select1 = /** @class */ (function (_super) {
99
99
  __extends(Select1, _super);
@@ -154,6 +154,8 @@ var Select1 = /** @class */ (function (_super) {
154
154
  onSelect: null,
155
155
  };
156
156
  _this.search = _this.search.bind(_this);
157
+ _this.onSelect = _this.onSelect.bind(_this);
158
+ _this.onKeyDown = _this.onKeyDown.bind(_this);
157
159
  if (_this.inputRef.current)
158
160
  _this.inputRef.current.value = "".concat((_b = (_a = _this.state.options.find(function (e) { return e.id === _this.state.value; })) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : "");
159
161
  return _this;
@@ -197,38 +199,6 @@ var Select1 = /** @class */ (function (_super) {
197
199
  if (this.props.onChange)
198
200
  this.props.onChange(item);
199
201
  };
200
- Select1.prototype.renderOptions = function (item) {
201
- var _this = this;
202
- var _a, _b;
203
- var children = [];
204
- if (!item.parentId)
205
- children = ((_a = this.state.search) !== null && _a !== void 0 ? _a : this.state.options).filter(function (e) { return e.parentId === item.id; });
206
- //
207
- return react_1.default.createElement("div", { key: item.id, className: 'col', style: { width: '100%' } },
208
- react_1.default.createElement("div", { className: "".concat(select1_module_css_1.default['select-tile'], " row ").concat(item.disabled ? select1_module_css_1.default["disabled"] : ""), style: { paddingLeft: item.parentId ? '4.4rem' : undefined, backgroundColor: this.state.selected === item.id ? "var(--neutral-selected-background-color)" : undefined }, onClick: children.length ? function () {
209
- if (_this.state.search) {
210
- _this.setState(__assign(__assign({}, _this.state), { search: _this.state.search.map(function (e) {
211
- if (e.id === item.id)
212
- return __assign(__assign({}, e), { isOpen: !item.isOpen });
213
- else
214
- return e;
215
- }) }));
216
- }
217
- else {
218
- _this.setState(__assign(__assign({}, _this.state), { options: _this.state.options.map(function (e) {
219
- if (e.id === item.id)
220
- return __assign(__assign({}, e), { isOpen: !item.isOpen });
221
- else
222
- return e;
223
- }) }));
224
- }
225
- } : function () {
226
- _this.onSelect(item);
227
- } },
228
- ((_b = this.state.search) !== null && _b !== void 0 ? _b : this.state.options).some(function (e) { return e.parentId; }) && react_1.default.createElement("div", { className: 'row', style: { width: '1.4rem', height: '1.4rem' } }, children.length ? react_1.default.createElement(winicon_1.Winicon, { src: item.isOpen ? "fill/arrows/triangle-down" : "fill/arrows/triangle-right", size: "1.2rem" }) : null),
229
- react_1.default.createElement(text_1.Text, { className: 'body-3' }, item.name)),
230
- react_1.default.createElement("div", { className: 'col', style: { display: item.isOpen ? "flex" : "none", width: '100%' } }, children.map(function (e) { return _this.renderOptions(e); })));
231
- };
232
202
  Select1.prototype.componentDidUpdate = function (prevProps, prevState) {
233
203
  var _this = this;
234
204
  var _a, _b, _c, _d, _e, _f, _g, _h;
@@ -296,7 +266,10 @@ var Select1 = /** @class */ (function (_super) {
296
266
  }, className: 'row' },
297
267
  react_1.default.createElement(winicon_1.Winicon, { src: this.state.isOpen ? "fill/arrows/up-arrow" : "fill/arrows/down-arrow", size: "1.2rem" })),
298
268
  this.state.isOpen &&
299
- react_dom_1.default.createPortal(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 : {
269
+ react_dom_1.default.createPortal(react_1.default.createElement("div", { ref: function (popupRef) {
270
+ if (popupRef && _this.props.onOpenOptions)
271
+ _this.props.onOpenOptions(popupRef);
272
+ }, 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 : {
300
273
  top: this.state.offset.y + this.state.offset.height + 2 + 'px',
301
274
  left: this.state.offset.x + 'px',
302
275
  width: this.state.offset.width,
@@ -307,9 +280,27 @@ var Select1 = /** @class */ (function (_super) {
307
280
  _this.props.handleLoadmore(Math.round(scrollElement.offsetHeight + scrollElement.scrollTop) >= (scrollElement.scrollHeight - 1), ev);
308
281
  }
309
282
  } : undefined },
310
- ((_h = this.state.search) !== null && _h !== void 0 ? _h : this.state.options).filter(function (e) { return !e.parentId; }).map(function (item) { return _this.renderOptions(item); }),
283
+ ((_h = this.state.search) !== null && _h !== void 0 ? _h : this.state.options).filter(function (e) { return !e.parentId; }).map(function (item) {
284
+ var _a, _b;
285
+ 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; }) });
286
+ }),
311
287
  (((_j = this.state.search) === null || _j === void 0 ? void 0 : _j.length) === 0 || ((_k = this.props.options) === null || _k === void 0 ? void 0 : _k.length) === 0) && (react_1.default.createElement("div", { className: select1_module_css_1.default['no-results-found'] }, "No result found")))), document.body));
312
288
  };
313
289
  return Select1;
314
290
  }(react_1.default.Component));
315
291
  exports.Select1 = Select1;
292
+ function OptionsItemTile(_a) {
293
+ var item = _a.item, children = _a.children, selected = _a.selected, onClick = _a.onClick, treeData = _a.treeData;
294
+ var _b = (0, react_1.useState)(false), isOpen = _b[0], setIsOpen = _b[1];
295
+ return item.title && typeof item.title !== "string" ? react_1.default.createElement(react_1.default.Fragment, null, item.title(onClick)) : react_1.default.createElement("div", { className: 'col', style: { width: '100%' } },
296
+ react_1.default.createElement("div", { className: "".concat(select1_module_css_1.default['select-tile'], " row ").concat(item.disabled ? select1_module_css_1.default["disabled"] : ""), style: { paddingLeft: item.parentId ? '4.4rem' : undefined, backgroundColor: selected ? "var(--neutral-selected-background-color)" : undefined }, onClick: function () {
297
+ if (children === null || children === void 0 ? void 0 : children.length) {
298
+ setIsOpen(!isOpen);
299
+ }
300
+ else
301
+ onClick(item);
302
+ } },
303
+ treeData ? react_1.default.createElement("div", { className: 'row', style: { width: '1.4rem', height: '1.4rem' } }, (children === null || children === void 0 ? void 0 : children.length) ? react_1.default.createElement(winicon_1.Winicon, { src: isOpen ? "fill/arrows/triangle-down" : "fill/arrows/triangle-right", size: "1.2rem" }) : null) : undefined,
304
+ react_1.default.createElement(text_1.Text, { className: 'body-3' }, item.title && typeof item.title === "string" ? item.title : item.name)),
305
+ (children === null || children === void 0 ? void 0 : children.length) ? react_1.default.createElement("div", { className: 'col', style: { display: isOpen ? "flex" : "none", width: '100%' } }, children.map(function (e) { return react_1.default.createElement(OptionsItemTile, { key: e.id, item: e, onClick: onClick }); })) : undefined);
306
+ }