wini-web-components 1.0.6 → 1.0.8
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.
- package/dist/component/date-picker/date-picker.js +2 -2
- package/dist/component/select1/select1.d.ts +1 -0
- package/dist/component/select1/select1.js +10 -8
- package/dist/component/text-area/text-area.js +1 -1
- package/dist/component/text-field/text-field.js +1 -1
- package/dist/index.js +1 -1
- package/package.json +1 -1
|
@@ -214,7 +214,7 @@ var DatePicker = /** @class */ (function (_super) {
|
|
|
214
214
|
default:
|
|
215
215
|
break;
|
|
216
216
|
}
|
|
217
|
-
return react_1.default.createElement("label", { className: "date-picker-container row ".concat((_a = this.props.className) !== null && _a !== void 0 ? _a : '
|
|
217
|
+
return react_1.default.createElement("label", { className: "date-picker-container row ".concat((_a = this.props.className) !== null && _a !== void 0 ? _a : 'body-3', " ").concat(this.props.disabled ? 'disabled' : '', " ").concat(((_b = this.props.helperText) === null || _b === void 0 ? void 0 : _b.length) && 'helper-text'), "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' } },
|
|
218
218
|
react_1.default.createElement("div", { className: 'input-field-value row', style: { height: '4rem' } },
|
|
219
219
|
react_1.default.createElement("input", { autoComplete: 'off', value: (_e = this.state.value) !== null && _e !== void 0 ? _e : '', onChange: function (ev) { return _this.setState(__assign(__assign({}, _this.state), { value: ev.target.value })); }, placeholder: this.props.placeholder, maxLength: maxLength, onBlur: function (ev) {
|
|
220
220
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
|
|
@@ -310,7 +310,7 @@ var DatePicker = /** @class */ (function (_super) {
|
|
|
310
310
|
if (ev.target.classList.contains('popup-overlay'))
|
|
311
311
|
_this.setState(__assign(__assign({}, _this.state), { isOpen: false }));
|
|
312
312
|
} },
|
|
313
|
-
react_1.default.createElement(index_1.Calendar, { value: this.getNewValue(), type: (_f = this.props.pickerType) !== null && _f !== void 0 ? _f : index_1.CalendarType.DATE, className: 'date-picker-popup-container', style: (_g = this.state.style) !== null && _g !== void 0 ? _g : { top: this.state.offset.y + this.state.offset.height + 2 + 'px', left: this.state.offset.x + 'px', border: 'none', boxShadow: '-20px 20px 40px -4px rgba(145, 158, 171, 0.24), 0px 0px 2px 0px rgba(145, 158, 171, 0.24)' }, onSelect: function (dateValue) {
|
|
313
|
+
react_1.default.createElement(index_1.Calendar, { min: this.props.min, max: this.props.max, value: this.getNewValue(), type: (_f = this.props.pickerType) !== null && _f !== void 0 ? _f : index_1.CalendarType.DATE, className: 'date-picker-popup-container', style: (_g = this.state.style) !== null && _g !== void 0 ? _g : { top: this.state.offset.y + this.state.offset.height + 2 + 'px', left: this.state.offset.x + 'px', border: 'none', boxShadow: '-20px 20px 40px -4px rgba(145, 158, 171, 0.24), 0px 0px 2px 0px rgba(145, 158, 171, 0.24)' }, onSelect: function (dateValue) {
|
|
314
314
|
var _a;
|
|
315
315
|
switch (_this.props.pickerType) {
|
|
316
316
|
case index_1.CalendarType.YEAR:
|
|
@@ -155,7 +155,9 @@ var Select1 = /** @class */ (function (_super) {
|
|
|
155
155
|
});
|
|
156
156
|
};
|
|
157
157
|
Select1.prototype.onSelect = function (item) {
|
|
158
|
-
|
|
158
|
+
var _a;
|
|
159
|
+
this.setState(__assign(__assign({}, this.state), { isOpen: false, value: item.id, onSelect: undefined }));
|
|
160
|
+
(_a = this.inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
|
|
159
161
|
if (this.props.onChange)
|
|
160
162
|
this.props.onChange(item);
|
|
161
163
|
};
|
|
@@ -232,6 +234,7 @@ var Select1 = /** @class */ (function (_super) {
|
|
|
232
234
|
Select1.prototype.render = function () {
|
|
233
235
|
var _this = this;
|
|
234
236
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
237
|
+
var _value = this.state.options.find(function (e) { return e.id === _this.state.value; });
|
|
235
238
|
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 () {
|
|
236
239
|
var _a, _b, _c;
|
|
237
240
|
if (!_this.state.isOpen) {
|
|
@@ -239,13 +242,12 @@ var Select1 = /** @class */ (function (_super) {
|
|
|
239
242
|
(_c = _this.inputRef.current) === null || _c === void 0 ? void 0 : _c.focus();
|
|
240
243
|
}
|
|
241
244
|
} },
|
|
242
|
-
react_1.default.createElement("div", { className: 'row', style: { flexWrap: 'wrap', flex: 1, width: '100%', gap: '0.6rem 0.4rem' } },
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
} })),
|
|
245
|
+
react_1.default.createElement("div", { className: 'row', style: { flexWrap: 'wrap', flex: 1, width: '100%', gap: '0.6rem 0.4rem' } }, (!_value || typeof _value.name === "string") ? react_1.default.createElement("input", { ref: this.inputRef, readOnly: this.props.readOnly, onChange: this.search, placeholder: this.props.placeholder, onBlur: function (ev) {
|
|
246
|
+
if (_this.state.onSelect)
|
|
247
|
+
ev.target.focus();
|
|
248
|
+
else
|
|
249
|
+
_this.setState(__assign(__assign({}, _this.state), { isOpen: false, onSelect: null }));
|
|
250
|
+
} }) : _value.name),
|
|
249
251
|
this.props.showClearValueButton && react_1.default.createElement("button", { type: 'button', className: 'row', style: { padding: '0.4rem' }, onClick: function (ev) {
|
|
250
252
|
ev.stopPropagation();
|
|
251
253
|
if (_this.state.value)
|
|
@@ -39,7 +39,7 @@ var TextArea = /** @class */ (function (_super) {
|
|
|
39
39
|
}
|
|
40
40
|
TextArea.prototype.render = function () {
|
|
41
41
|
var _a, _b, _c, _d;
|
|
42
|
-
return react_1.default.createElement("div", { className: "text-area-container row ".concat((_a = this.props.className) !== null && _a !== void 0 ? _a : '
|
|
42
|
+
return react_1.default.createElement("div", { className: "text-area-container row ".concat((_a = this.props.className) !== null && _a !== void 0 ? _a : 'body-3', " ").concat(((_b = this.props.helperText) === null || _b === void 0 ? void 0 : _b.length) && 'helper-text'), 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' } }, this.props.register ?
|
|
43
43
|
react_1.default.createElement("textarea", __assign({ autoFocus: this.props.autoFocus }, this.props.register, { maxLength: this.props.maxLength, name: this.props.name, placeholder: this.props.placeholder, readOnly: this.props.readOnly, disabled: this.props.disabled, onFocus: this.props.onFocus })) : react_1.default.createElement("textarea", { autoFocus: this.props.autoFocus, maxLength: this.props.maxLength, name: this.props.name, defaultValue: this.props.defaultValue, value: this.props.value, placeholder: this.props.placeholder, readOnly: this.props.readOnly, disabled: this.props.disabled, onChange: this.props.onChange, onFocus: this.props.onFocus, onBlur: this.props.onBlur }));
|
|
44
44
|
};
|
|
45
45
|
return TextArea;
|
|
@@ -39,7 +39,7 @@ var TextField = /** @class */ (function (_super) {
|
|
|
39
39
|
}
|
|
40
40
|
TextField.prototype.render = function () {
|
|
41
41
|
var _a, _b, _c, _d, _e, _f;
|
|
42
|
-
return react_1.default.createElement("div", { className: "text-field-container row ".concat((_a = this.props.className) !== null && _a !== void 0 ? _a : '
|
|
42
|
+
return react_1.default.createElement("div", { className: "text-field-container row ".concat((_a = this.props.className) !== null && _a !== void 0 ? _a : 'body-3', " ").concat(((_b = this.props.helperText) === null || _b === void 0 ? void 0 : _b.length) && 'helper-text'), "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' } },
|
|
43
43
|
this.props.prefix,
|
|
44
44
|
this.props.register ?
|
|
45
45
|
react_1.default.createElement("input", __assign({}, this.props.register, { autoFocus: this.props.autoFocus, maxLength: this.props.maxLength, name: this.props.name, type: (_e = this.props.type) !== null && _e !== void 0 ? _e : 'text', placeholder: this.props.placeholder, readOnly: this.props.readOnly, disabled: this.props.disabled, onFocus: this.props.onFocus })) : react_1.default.createElement("input", { autoFocus: this.props.autoFocus, maxLength: this.props.maxLength, name: this.props.name, type: (_f = this.props.type) !== null && _f !== void 0 ? _f : 'text', defaultValue: this.props.defaultValue, value: this.props.value, placeholder: this.props.placeholder, readOnly: this.props.readOnly, disabled: this.props.disabled, onChange: this.props.onChange, onFocus: this.props.onFocus, onBlur: this.props.onBlur }),
|