wini-web-components 1.0.0 → 1.0.2
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.
|
@@ -275,7 +275,7 @@ var SelectMultiple = /** @class */ (function (_super) {
|
|
|
275
275
|
else
|
|
276
276
|
_this.setState(__assign(__assign({}, _this.state), { isOpen: false, onSelect: null }));
|
|
277
277
|
} })),
|
|
278
|
-
react_1.default.createElement("button", { type: 'button', className: 'row', style: { padding: '0.4rem' }, onClick: function (ev) {
|
|
278
|
+
this.props.hideClearValueButton && react_1.default.createElement("button", { type: 'button', className: 'row', style: { padding: '0.4rem' }, onClick: function (ev) {
|
|
279
279
|
ev.stopPropagation();
|
|
280
280
|
if (_this.state.value.length)
|
|
281
281
|
_this.setState(__assign(__assign({}, _this.state), { isOpen: true, value: [] }));
|
|
@@ -17,6 +17,7 @@ interface Select1Props {
|
|
|
17
17
|
helperTextColor?: string;
|
|
18
18
|
style?: CSSProperties;
|
|
19
19
|
handleSearch?: (e: string) => Promise<Array<OptionsItem>>;
|
|
20
|
+
hideClearValueButton?: boolean;
|
|
20
21
|
}
|
|
21
22
|
interface Select1State {
|
|
22
23
|
value?: string | number;
|
|
@@ -29,6 +30,7 @@ interface Select1State {
|
|
|
29
30
|
}
|
|
30
31
|
export declare class Select1 extends React.Component<Select1Props, Select1State> {
|
|
31
32
|
private containerRef;
|
|
33
|
+
private inputRef;
|
|
32
34
|
constructor(props: Select1Props);
|
|
33
35
|
private search;
|
|
34
36
|
private onSelect;
|
|
@@ -99,8 +99,11 @@ var text_1 = require("../text/text");
|
|
|
99
99
|
var Select1 = /** @class */ (function (_super) {
|
|
100
100
|
__extends(Select1, _super);
|
|
101
101
|
function Select1(props) {
|
|
102
|
-
var _this =
|
|
102
|
+
var _this = this;
|
|
103
|
+
var _a, _b;
|
|
104
|
+
_this = _super.call(this, props) || this;
|
|
103
105
|
_this.containerRef = (0, react_1.createRef)();
|
|
106
|
+
_this.inputRef = (0, react_1.createRef)();
|
|
104
107
|
_this.state = {
|
|
105
108
|
value: props.value,
|
|
106
109
|
options: props.options,
|
|
@@ -121,6 +124,8 @@ var Select1 = /** @class */ (function (_super) {
|
|
|
121
124
|
onSelect: null,
|
|
122
125
|
};
|
|
123
126
|
_this.search = _this.search.bind(_this);
|
|
127
|
+
if (_this.inputRef.current)
|
|
128
|
+
_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 : "");
|
|
124
129
|
return _this;
|
|
125
130
|
}
|
|
126
131
|
Select1.prototype.search = function (ev) {
|
|
@@ -187,14 +192,17 @@ var Select1 = /** @class */ (function (_super) {
|
|
|
187
192
|
react_1.default.createElement("div", { className: 'col', style: { display: item.isOpen ? "flex" : "none", width: '100%' } }, children.map(function (e) { return _this.renderOptions(e); })));
|
|
188
193
|
};
|
|
189
194
|
Select1.prototype.componentDidUpdate = function (prevProps, prevState) {
|
|
190
|
-
var
|
|
195
|
+
var _this = this;
|
|
196
|
+
var _a, _b, _c, _d, _e, _f;
|
|
191
197
|
if (prevProps.options !== this.props.options)
|
|
192
198
|
this.setState(__assign(__assign({}, this.state), { options: this.props.options }));
|
|
193
199
|
if (prevProps.value !== this.props.value)
|
|
194
200
|
this.setState(__assign(__assign({}, this.state), { value: this.props.value }));
|
|
201
|
+
if (prevState.value !== this.state.value && this.inputRef.current)
|
|
202
|
+
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 : "");
|
|
195
203
|
//
|
|
196
204
|
if (this.state.isOpen && prevState.isOpen !== this.state.isOpen) {
|
|
197
|
-
var thisPopupRect = (
|
|
205
|
+
var thisPopupRect = (_c = document.body.querySelector('.select1-popup')) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect();
|
|
198
206
|
if (thisPopupRect) {
|
|
199
207
|
var style = void 0;
|
|
200
208
|
if (thisPopupRect.right > document.body.offsetWidth) {
|
|
@@ -204,15 +212,15 @@ var Select1 = /** @class */ (function (_super) {
|
|
|
204
212
|
};
|
|
205
213
|
}
|
|
206
214
|
var _bottom = thisPopupRect.bottom - 8;
|
|
207
|
-
var thisContainerRect = (
|
|
215
|
+
var thisContainerRect = (_d = this.containerRef.current) === null || _d === void 0 ? void 0 : _d.getBoundingClientRect();
|
|
208
216
|
if (thisContainerRect) {
|
|
209
217
|
if (_bottom > document.body.offsetHeight) {
|
|
210
218
|
style = __assign(__assign({}, (style !== null && style !== void 0 ? style : {})), { top: "".concat(thisContainerRect.y - 2 - thisPopupRect.height, "px") });
|
|
211
219
|
}
|
|
212
220
|
}
|
|
213
221
|
if (style) {
|
|
214
|
-
(
|
|
215
|
-
(
|
|
222
|
+
(_e = style.left) !== null && _e !== void 0 ? _e : (style.left = style.right ? undefined : "".concat(this.state.offset.x, "px"));
|
|
223
|
+
(_f = style.width) !== null && _f !== void 0 ? _f : (style.width = "".concat(this.state.offset.width, "px"));
|
|
216
224
|
this.setState(__assign(__assign({}, this.state), { style: style }));
|
|
217
225
|
}
|
|
218
226
|
}
|
|
@@ -222,17 +230,20 @@ var Select1 = /** @class */ (function (_super) {
|
|
|
222
230
|
var _this = this;
|
|
223
231
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
224
232
|
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)
|
|
233
|
+
var _a, _b, _c;
|
|
234
|
+
if (!_this.state.isOpen) {
|
|
227
235
|
_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() }));
|
|
236
|
+
(_c = _this.inputRef.current) === null || _c === void 0 ? void 0 : _c.focus();
|
|
237
|
+
}
|
|
228
238
|
} },
|
|
229
|
-
react_1.default.createElement("div", { className: 'row', style: { flexWrap: 'wrap', flex: 1, width: '100%', gap: '0.6rem 0.4rem' } },
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
239
|
+
react_1.default.createElement("div", { className: 'row', style: { flexWrap: 'wrap', flex: 1, width: '100%', gap: '0.6rem 0.4rem' } },
|
|
240
|
+
react_1.default.createElement("input", { ref: this.inputRef, onChange: this.search, placeholder: this.props.placeholder, onBlur: function (ev) {
|
|
241
|
+
if (_this.state.onSelect)
|
|
242
|
+
ev.target.focus();
|
|
243
|
+
else
|
|
244
|
+
_this.setState(__assign(__assign({}, _this.state), { isOpen: false, onSelect: null }));
|
|
245
|
+
} })),
|
|
246
|
+
this.props.hideClearValueButton && react_1.default.createElement("button", { type: 'button', className: 'row', style: { padding: '0.4rem' }, onClick: function (ev) {
|
|
236
247
|
ev.stopPropagation();
|
|
237
248
|
if (_this.state.value)
|
|
238
249
|
_this.setState(__assign(__assign({}, _this.state), { isOpen: true, value: undefined }));
|