wini-web-components 0.9.7 → 0.9.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.
@@ -25,22 +25,85 @@ var __assign = (this && this.__assign) || function () {
25
25
  };
26
26
  return __assign.apply(this, arguments);
27
27
  };
28
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
29
+ if (k2 === undefined) k2 = k;
30
+ var desc = Object.getOwnPropertyDescriptor(m, k);
31
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
32
+ desc = { enumerable: true, get: function() { return m[k]; } };
33
+ }
34
+ Object.defineProperty(o, k2, desc);
35
+ }) : (function(o, m, k, k2) {
36
+ if (k2 === undefined) k2 = k;
37
+ o[k2] = m[k];
38
+ }));
39
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
40
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
41
+ }) : function(o, v) {
42
+ o["default"] = v;
43
+ });
44
+ var __importStar = (this && this.__importStar) || function (mod) {
45
+ if (mod && mod.__esModule) return mod;
46
+ var result = {};
47
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
48
+ __setModuleDefault(result, mod);
49
+ return result;
50
+ };
51
+ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
52
+ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
53
+ return new (P || (P = Promise))(function (resolve, reject) {
54
+ function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
55
+ function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
56
+ function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
57
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
58
+ });
59
+ };
60
+ var __generator = (this && this.__generator) || function (thisArg, body) {
61
+ var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
62
+ return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
63
+ function verb(n) { return function (v) { return step([n, v]); }; }
64
+ function step(op) {
65
+ if (f) throw new TypeError("Generator is already executing.");
66
+ while (g && (g = 0, op[0] && (_ = 0)), _) try {
67
+ if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
68
+ if (y = 0, t) op = [op[0] & 2, t.value];
69
+ switch (op[0]) {
70
+ case 0: case 1: t = op; break;
71
+ case 4: _.label++; return { value: op[1], done: false };
72
+ case 5: _.label++; y = op[1]; op = [0]; continue;
73
+ case 7: op = _.ops.pop(); _.trys.pop(); continue;
74
+ default:
75
+ if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
76
+ if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
77
+ if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
78
+ if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
79
+ if (t[2]) _.ops.pop();
80
+ _.trys.pop(); continue;
81
+ }
82
+ op = body.call(thisArg, _);
83
+ } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
84
+ if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
85
+ }
86
+ };
28
87
  var __importDefault = (this && this.__importDefault) || function (mod) {
29
88
  return (mod && mod.__esModule) ? mod : { "default": mod };
30
89
  };
31
90
  Object.defineProperty(exports, "__esModule", { value: true });
32
91
  exports.Select1 = void 0;
33
- var react_1 = __importDefault(require("react"));
34
92
  var free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
35
93
  var react_fontawesome_1 = require("@fortawesome/react-fontawesome");
94
+ var react_1 = __importStar(require("react"));
36
95
  var react_dom_1 = __importDefault(require("react-dom"));
37
96
  require("./select1.css");
97
+ var text_1 = require("../text/text");
98
+ ;
38
99
  var Select1 = /** @class */ (function (_super) {
39
100
  __extends(Select1, _super);
40
101
  function Select1(props) {
41
102
  var _this = _super.call(this, props) || this;
103
+ _this.containerRef = (0, react_1.createRef)();
42
104
  _this.state = {
43
- value: _this.props.value,
105
+ value: props.value,
106
+ options: props.options,
44
107
  offset: {
45
108
  x: 0,
46
109
  y: 0,
@@ -57,126 +120,133 @@ var Select1 = /** @class */ (function (_super) {
57
120
  isOpen: false,
58
121
  onSelect: null,
59
122
  };
60
- _this.parseValue = _this.parseValue.bind(_this);
61
- _this.onChangeValue = _this.onChangeValue.bind(_this);
62
123
  _this.search = _this.search.bind(_this);
63
124
  return _this;
64
125
  }
65
- Select1.prototype.parseValue = function (value) {
66
- if (value === null || value === undefined || value === '') {
67
- return null;
68
- }
69
- switch (typeof this.props.options[0].id) {
70
- case 'number':
71
- return parseFloat(value);
72
- default:
73
- return value;
74
- }
126
+ Select1.prototype.search = function (ev) {
127
+ var _a;
128
+ return __awaiter(this, void 0, void 0, function () {
129
+ var res;
130
+ return __generator(this, function (_b) {
131
+ switch (_b.label) {
132
+ case 0:
133
+ if (!ev.target.value.trim().length) return [3 /*break*/, 4];
134
+ if (!((_a = this.props) === null || _a === void 0 ? void 0 : _a.handleSearch)) return [3 /*break*/, 2];
135
+ return [4 /*yield*/, this.props.handleSearch(ev.target.value.trim())];
136
+ case 1:
137
+ res = _b.sent();
138
+ this.setState(__assign(__assign({}, this.state), { search: res }));
139
+ return [3 /*break*/, 3];
140
+ case 2:
141
+ this.setState(__assign(__assign({}, this.state), { search: this.props.options.filter(function (e) { return typeof e.name === "string" && e.name.toLowerCase().includes(ev.target.value.trim().toLowerCase()); }) }));
142
+ _b.label = 3;
143
+ case 3: return [3 /*break*/, 5];
144
+ case 4:
145
+ this.setState(__assign(__assign({}, this.state), { search: undefined }));
146
+ _b.label = 5;
147
+ case 5: return [2 /*return*/];
148
+ }
149
+ });
150
+ });
151
+ };
152
+ Select1.prototype.onSelect = function (item) {
153
+ this.setState(__assign(__assign({}, this.state), { isOpen: false, value: item.id }));
154
+ if (this.props.onChange)
155
+ this.props.onChange(item);
156
+ };
157
+ Select1.prototype.renderOptions = function (item) {
158
+ var _this = this;
159
+ var _a, _b;
160
+ var children = [];
161
+ if (!item.parentId)
162
+ children = ((_a = this.state.search) !== null && _a !== void 0 ? _a : this.state.options).filter(function (e) { return e.parentId === item.id; });
163
+ //
164
+ return react_1.default.createElement("div", { key: item.id, className: 'col', style: { width: '100%' } },
165
+ react_1.default.createElement("div", { className: 'select-tile row', style: { paddingLeft: item.parentId ? '4.4rem' : undefined }, onClick: children.length ? function () {
166
+ if (_this.state.search) {
167
+ _this.setState(__assign(__assign({}, _this.state), { search: _this.state.search.map(function (e) {
168
+ if (e.id === item.id)
169
+ return __assign(__assign({}, e), { isOpen: !item.isOpen });
170
+ else
171
+ return e;
172
+ }) }));
173
+ }
174
+ else {
175
+ _this.setState(__assign(__assign({}, _this.state), { options: _this.state.options.map(function (e) {
176
+ if (e.id === item.id)
177
+ return __assign(__assign({}, e), { isOpen: !item.isOpen });
178
+ else
179
+ return e;
180
+ }) }));
181
+ }
182
+ } : function () {
183
+ _this.onSelect(item);
184
+ } },
185
+ ((_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(react_fontawesome_1.FontAwesomeIcon, { icon: item.isOpen ? free_solid_svg_icons_1.faCaretDown : free_solid_svg_icons_1.faCaretRight, style: { fontSize: '1.2rem', color: '#161C2499' } }) : null),
186
+ react_1.default.createElement(text_1.Text, { className: 'body-3' }, item.name)),
187
+ react_1.default.createElement("div", { className: 'col', style: { display: item.isOpen ? "flex" : "none", width: '100%' } }, children.map(function (e) { return _this.renderOptions(e); })));
75
188
  };
76
189
  Select1.prototype.componentDidUpdate = function (prevProps, prevState) {
77
- var _a;
78
- if (prevProps.value !== this.props.value) {
190
+ var _a, _b, _c, _d;
191
+ if (prevProps.options !== this.props.options)
192
+ this.setState(__assign(__assign({}, this.state), { options: this.props.options }));
193
+ if (prevProps.value !== this.props.value)
79
194
  this.setState(__assign(__assign({}, this.state), { value: this.props.value }));
80
- }
81
- if (prevState.isOpen !== this.state.isOpen && this.state.isOpen) {
195
+ //
196
+ if (this.state.isOpen && prevState.isOpen !== this.state.isOpen) {
82
197
  var thisPopupRect = (_a = document.body.querySelector('.select1-popup')) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
83
198
  if (thisPopupRect) {
84
199
  var style = void 0;
85
200
  if (thisPopupRect.right > document.body.offsetWidth) {
86
201
  style = {
87
202
  top: this.state.offset.y + this.state.offset.height + 2 + 'px',
88
- width: "".concat(this.state.offset.width, "px"),
89
203
  right: document.body.offsetWidth - this.state.offset.right + 'px'
90
204
  };
91
205
  }
92
- if (thisPopupRect.bottom > document.body.offsetHeight) {
93
- style = style ? __assign(__assign({}, style), { top: undefined, bottom: document.body.offsetHeight - this.state.offset.bottom + 'px' }) : {
94
- left: this.state.offset.x + 'px',
95
- width: "".concat(this.state.offset.width, "px"),
96
- bottom: document.body.offsetHeight - this.state.offset.bottom + 'px'
97
- };
206
+ var _bottom = thisPopupRect.bottom - 8;
207
+ var thisContainerRect = (_b = this.containerRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
208
+ if (thisContainerRect) {
209
+ if (_bottom > document.body.offsetHeight) {
210
+ style = __assign(__assign({}, (style !== null && style !== void 0 ? style : {})), { top: "".concat(thisContainerRect.y - 2 - thisPopupRect.height, "px") });
211
+ }
98
212
  }
99
- if (style)
213
+ if (style) {
214
+ (_c = style.left) !== null && _c !== void 0 ? _c : (style.left = style.right ? undefined : "".concat(this.state.offset.x, "px"));
215
+ (_d = style.width) !== null && _d !== void 0 ? _d : (style.width = "".concat(this.state.offset.width, "px"));
100
216
  this.setState(__assign(__assign({}, this.state), { style: style }));
217
+ }
101
218
  }
102
219
  }
103
220
  };
104
- Select1.prototype.onChangeValue = function (ev) {
105
- var _this = this;
106
- var _a, _b;
107
- if ((_b = (_a = this.state.onSelect) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.contains('select1-tile')) {
108
- var item = this.props.options.find(function (e) { return e.id === _this.parseValue(_this.state.onSelect.id); });
109
- this.setState(__assign(__assign({}, this.state), { isOpen: false, onSelect: null, value: item === null || item === void 0 ? void 0 : item.id }));
110
- if (this.props.onChange)
111
- this.props.onChange(item);
112
- }
113
- else if (this.state.onSelect) {
114
- ev.target.focus();
115
- }
116
- else {
117
- this.setState(__assign(__assign({}, this.state), { isOpen: false, onSelect: null }));
118
- }
119
- };
120
- Select1.prototype.search = function (ev) {
121
- var _this = this;
122
- if (ev.target.value.trim().length) {
123
- if (this.props.handleSearch) {
124
- this.props.handleSearch(ev.target.value.trim()).then(function (res) {
125
- _this.setState(__assign(__assign({}, _this.state), { search: res }));
126
- });
127
- }
128
- else {
129
- this.setState(__assign(__assign({}, this.state), { search: this.props.options.filter(function (e) { return typeof e.name === "string" && e.name.toLowerCase().includes(ev.target.value.trim().toLowerCase()); }) }));
130
- }
131
- }
132
- else {
133
- this.setState(__assign(__assign({}, this.state), { search: undefined }));
134
- }
135
- };
136
221
  Select1.prototype.render = function () {
137
222
  var _this = this;
138
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
139
- var selectedValue = ((_a = this.props.options) !== null && _a !== void 0 ? _a : []).find(function (e) { return e.id === _this.state.value; });
140
- return react_1.default.createElement("div", { className: "select1-container row ".concat((_b = this.props.className) !== null && _b !== void 0 ? _b : 'placeholder-2', " ").concat(this.props.disabled ? 'disabled' : '', " ").concat(((_c = this.props.helperText) === null || _c === void 0 ? void 0 : _c.length) && 'helper-text'), "helper-text": this.props.helperText, style: this.props.style ? __assign(__assign({}, { '--helper-text-color': (_d = this.props.helperTextColor) !== null && _d !== void 0 ? _d : '#e14337' }), this.props.style) : { '--helper-text-color': (_e = this.props.helperTextColor) !== null && _e !== void 0 ? _e : '#e14337' }, onClick: function (ev) {
141
- var _a;
142
- if (!_this.state.isOpen) {
143
- var _offset = ((_a = ev.target.closest('.select1-container')) !== null && _a !== void 0 ? _a : ev.target).getBoundingClientRect();
144
- if (_offset.bottom + 32 > document.body.offsetHeight) {
145
- _this.setState(__assign(__assign({}, _this.state), { isOpen: true, offset: _offset, style: {
146
- left: _offset.x + 'px',
147
- bottom: (document.body.offsetHeight - _offset.y) + 'px',
148
- width: "".concat(_offset.width / 10, "rem")
149
- } }));
150
- }
151
- else {
152
- _this.setState(__assign(__assign({}, _this.state), { isOpen: true, offset: _offset, style: undefined }));
153
- }
154
- }
223
+ var _a, _b, _c, _d, _e, _f, _g, _h;
224
+ return react_1.default.createElement("div", { 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 () {
225
+ var _a, _b;
226
+ if (!_this.state.isOpen)
227
+ _this.setState(__assign(__assign({}, _this.state), { isOpen: true, style: undefined, offset: (_b = (_a = _this.containerRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect() }));
155
228
  } },
156
- (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.name) ? (react_1.default.createElement("div", { className: 'select1-value-name' }, selectedValue.name)) : (react_1.default.createElement("div", { className: 'select1-placeholder' }, this.props.placeholder)),
157
- react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { icon: this.state.isOpen ? free_solid_svg_icons_1.faChevronUp : free_solid_svg_icons_1.faChevronDown, style: { fontSize: '1.2rem', color: '#888' } }),
229
+ react_1.default.createElement("div", { className: 'row', style: { flexWrap: 'wrap', flex: 1, width: '100%', gap: '0.6rem 0.4rem' } }, this.state.isOpen ? react_1.default.createElement("input", { autoFocus: true, defaultValue: this.state.value, onChange: this.search, placeholder: this.props.placeholder, onBlur: function (ev) {
230
+ if (_this.state.onSelect)
231
+ ev.target.focus();
232
+ else
233
+ _this.setState(__assign(__assign({}, _this.state), { isOpen: false, onSelect: null }));
234
+ } }) : react_1.default.createElement("input", { defaultValue: this.state.value, placeholder: this.props.placeholder, readOnly: true })),
235
+ react_1.default.createElement("button", { type: 'button', className: 'row', style: { padding: '0.4rem' }, onClick: function (ev) {
236
+ ev.stopPropagation();
237
+ if (_this.state.value)
238
+ _this.setState(__assign(__assign({}, _this.state), { isOpen: true, value: undefined }));
239
+ } },
240
+ react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faXmarkCircle, style: { fontSize: '1.6rem', color: '#161C24' } })),
158
241
  this.state.isOpen &&
159
- react_dom_1.default.createPortal(react_1.default.createElement("div", { className: 'select1-popup col', style: (_f = this.state.style) !== null && _f !== void 0 ? _f : {
242
+ react_dom_1.default.createPortal(react_1.default.createElement("div", { className: 'select1-popup col', style: (_e = this.state.style) !== null && _e !== void 0 ? _e : {
160
243
  top: this.state.offset.y + this.state.offset.height + 2 + 'px',
161
244
  left: this.state.offset.x + 'px',
162
245
  width: this.state.offset.width,
163
- }, onMouseOver: function (ev) {
164
- _this.setState(__assign(__assign({}, _this.state), { onSelect: ev.target }));
165
- }, onMouseOut: function () {
166
- return _this.setState(__assign(__assign({}, _this.state), { onSelect: null }));
167
- } },
168
- react_1.default.createElement("div", { className: 'row header-search', style: this.props.hideSearch ? { marginTop: '-4rem' } : undefined },
169
- react_1.default.createElement("input", { autoFocus: true, placeholder: (_g = this.props.searchPlaceholder) !== null && _g !== void 0 ? _g : 'Tìm kiếm', onChange: this.search, onBlur: function (ev) {
170
- _this.onChangeValue(ev);
171
- } }),
172
- react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faSearch, style: { fontSize: '1.2rem', color: '#161D24D9' } })),
173
- react_1.default.createElement("div", { className: 'col select1-body' },
174
- react_1.default.createElement("div", { className: 'col select1-scroll-view' },
175
- ((_h = this.state.search) !== null && _h !== void 0 ? _h : this.props.options).map(function (item) {
176
- var _a;
177
- return (react_1.default.createElement("button", { type: 'button', key: item.id, className: 'select1-tile label-3 row', id: "".concat(item.id), style: { backgroundColor: (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.id) === item.id ? 'var(--selected-background)' : '#00000000' } }, (_a = item.title) !== null && _a !== void 0 ? _a : item.name));
178
- }),
179
- (((_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: 'no-results-found' }, "No result found"))))), document.body));
246
+ }, onMouseOver: function (ev) { return _this.setState(__assign(__assign({}, _this.state), { onSelect: ev.target })); }, onMouseOut: function () { return _this.setState(__assign(__assign({}, _this.state), { onSelect: null })); } },
247
+ react_1.default.createElement("div", { className: 'col select-body' },
248
+ ((_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); }),
249
+ (((_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));
180
250
  };
181
251
  return Select1;
182
252
  }(react_1.default.Component));