wini-web-components 2.2.7 → 2.3.1
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/button/button.d.ts +16 -16
- package/dist/component/button/button.js +39 -39
- package/dist/component/calendar/calendar.d.ts +30 -46
- package/dist/component/calendar/calendar.js +437 -432
- package/dist/component/checkbox/checkbox.d.ts +22 -22
- package/dist/component/checkbox/checkbox.js +80 -81
- package/dist/component/component-status.d.ts +8 -8
- package/dist/component/component-status.js +39 -39
- package/dist/component/date-picker/date-picker.d.ts +25 -36
- package/dist/component/date-picker/date-picker.js +362 -359
- package/dist/component/dialog/dialog.d.ts +36 -34
- package/dist/component/dialog/dialog.js +99 -97
- package/dist/component/import-file/import-file.d.ts +24 -36
- package/dist/component/import-file/import-file.js +154 -119
- package/dist/component/infinite-scroll/infinite-scroll.d.ts +17 -17
- package/dist/component/infinite-scroll/infinite-scroll.js +103 -103
- package/dist/component/input-multi-select/input-multi-select.d.ts +21 -38
- package/dist/component/input-multi-select/input-multi-select.js +334 -323
- package/dist/component/input-opt/input-opt.d.ts +21 -0
- package/dist/component/input-opt/input-opt.js +157 -0
- package/dist/component/number-picker/number-picker.d.ts +19 -19
- package/dist/component/number-picker/number-picker.js +137 -127
- package/dist/component/pagination/pagination.d.ts +13 -13
- package/dist/component/pagination/pagination.js +93 -82
- package/dist/component/popup/popup.d.ts +33 -33
- package/dist/component/popup/popup.js +138 -105
- package/dist/component/progress-bar/progress-bar.d.ts +16 -16
- package/dist/component/progress-bar/progress-bar.js +35 -36
- package/dist/component/progress-circle/progress-circle.d.ts +14 -14
- package/dist/component/progress-circle/progress-circle.js +30 -31
- package/dist/component/radio-button/radio-button.d.ts +20 -20
- package/dist/component/radio-button/radio-button.js +64 -64
- package/dist/component/rating/rating.d.ts +23 -23
- package/dist/component/rating/rating.js +73 -74
- package/dist/component/select1/select1.d.ts +31 -50
- package/dist/component/select1/select1.js +320 -309
- package/dist/component/slider/slider.d.ts +31 -31
- package/dist/component/slider/slider.js +80 -81
- package/dist/component/switch/switch.d.ts +23 -23
- package/dist/component/switch/switch.js +80 -81
- package/dist/component/table/table.d.ts +51 -51
- package/dist/component/table/table.js +119 -119
- package/dist/component/tag/tag.d.ts +17 -17
- package/dist/component/tag/tag.js +39 -39
- package/dist/component/text/text.d.ts +16 -16
- package/dist/component/text/text.js +51 -51
- package/dist/component/text-area/text-area.d.ts +28 -28
- package/dist/component/text-area/text-area.js +83 -73
- package/dist/component/text-field/text-field.d.ts +33 -33
- package/dist/component/text-field/text-field.js +107 -97
- package/dist/component/toast-noti/toast-noti.d.ts +5 -5
- package/dist/component/toast-noti/toast-noti.js +28 -28
- package/dist/component/wini-icon/winicon.d.ts +16 -16
- package/dist/component/wini-icon/winicon.js +121 -112
- package/dist/form/login/view.d.ts +40 -40
- package/dist/form/login/view.js +66 -65
- package/dist/i18n.d.ts +2 -0
- package/dist/i18n.js +125 -0
- package/dist/index.d.ts +32 -30
- package/dist/index.js +1 -1
- package/dist/language/i18n.d.ts +2 -0
- package/dist/language/i18n.js +125 -0
- package/package.json +5 -3
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import React, { CSSProperties, ReactNode } from "react";
|
|
2
|
+
interface Props {
|
|
3
|
+
id?: string;
|
|
4
|
+
onChange?: (value: string, target: HTMLDivElement) => void;
|
|
5
|
+
disabled?: boolean;
|
|
6
|
+
value?: string;
|
|
7
|
+
length?: number;
|
|
8
|
+
inputStyle?: CSSProperties;
|
|
9
|
+
style?: CSSProperties;
|
|
10
|
+
className?: string;
|
|
11
|
+
helperText?: string;
|
|
12
|
+
helperTextColor?: string;
|
|
13
|
+
}
|
|
14
|
+
export declare class InputOpt extends React.Component<Props> {
|
|
15
|
+
private containerRef;
|
|
16
|
+
constructor(props: Props | Readonly<Props>);
|
|
17
|
+
getValue: () => string;
|
|
18
|
+
componentDidUpdate(prevProps: Readonly<Props>, prevState: Readonly<{}>, snapshot?: any): void;
|
|
19
|
+
render(): ReactNode;
|
|
20
|
+
}
|
|
21
|
+
export {};
|
|
@@ -0,0 +1,157 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __extends = (this && this.__extends) || (function () {
|
|
3
|
+
var extendStatics = function (d, b) {
|
|
4
|
+
extendStatics = Object.setPrototypeOf ||
|
|
5
|
+
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
|
6
|
+
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
|
|
7
|
+
return extendStatics(d, b);
|
|
8
|
+
};
|
|
9
|
+
return function (d, b) {
|
|
10
|
+
if (typeof b !== "function" && b !== null)
|
|
11
|
+
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
|
|
12
|
+
extendStatics(d, b);
|
|
13
|
+
function __() { this.constructor = d; }
|
|
14
|
+
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
15
|
+
};
|
|
16
|
+
})();
|
|
17
|
+
var __assign = (this && this.__assign) || function () {
|
|
18
|
+
__assign = Object.assign || function(t) {
|
|
19
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
20
|
+
s = arguments[i];
|
|
21
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
22
|
+
t[p] = s[p];
|
|
23
|
+
}
|
|
24
|
+
return t;
|
|
25
|
+
};
|
|
26
|
+
return __assign.apply(this, arguments);
|
|
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 () {
|
|
45
|
+
var ownKeys = function(o) {
|
|
46
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
47
|
+
var ar = [];
|
|
48
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
49
|
+
return ar;
|
|
50
|
+
};
|
|
51
|
+
return ownKeys(o);
|
|
52
|
+
};
|
|
53
|
+
return function (mod) {
|
|
54
|
+
if (mod && mod.__esModule) return mod;
|
|
55
|
+
var result = {};
|
|
56
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
57
|
+
__setModuleDefault(result, mod);
|
|
58
|
+
return result;
|
|
59
|
+
};
|
|
60
|
+
})();
|
|
61
|
+
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
62
|
+
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
63
|
+
if (ar || !(i in from)) {
|
|
64
|
+
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
65
|
+
ar[i] = from[i];
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
return to.concat(ar || Array.prototype.slice.call(from));
|
|
69
|
+
};
|
|
70
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
71
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
72
|
+
};
|
|
73
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
74
|
+
exports.InputOpt = void 0;
|
|
75
|
+
var react_1 = __importStar(require("react"));
|
|
76
|
+
var input_opt_module_css_1 = __importDefault(require("./input-opt.module.css"));
|
|
77
|
+
var InputOpt = /** @class */ (function (_super) {
|
|
78
|
+
__extends(InputOpt, _super);
|
|
79
|
+
function InputOpt(props) {
|
|
80
|
+
var _this = _super.call(this, props) || this;
|
|
81
|
+
_this.containerRef = (0, react_1.createRef)();
|
|
82
|
+
_this.getValue = function () {
|
|
83
|
+
var _a;
|
|
84
|
+
if (_this.containerRef.current)
|
|
85
|
+
return __spreadArray([], _this.containerRef.current.querySelectorAll("input"), true).map(function (v) { return v.value; }).join("");
|
|
86
|
+
else
|
|
87
|
+
return (_a = _this.props.value) !== null && _a !== void 0 ? _a : "";
|
|
88
|
+
};
|
|
89
|
+
_this.getValue = _this.getValue.bind(_this);
|
|
90
|
+
return _this;
|
|
91
|
+
}
|
|
92
|
+
InputOpt.prototype.componentDidUpdate = function (prevProps, prevState, snapshot) {
|
|
93
|
+
var _a;
|
|
94
|
+
if (prevProps.value !== this.props.value && this.containerRef.current) {
|
|
95
|
+
var inputList = __spreadArray([], this.containerRef.current.querySelectorAll("input"), true);
|
|
96
|
+
if ((_a = this.props.value) === null || _a === void 0 ? void 0 : _a.length) {
|
|
97
|
+
for (var i = 0; i < inputList.length; i++)
|
|
98
|
+
inputList[i].value = this.props.value[i];
|
|
99
|
+
}
|
|
100
|
+
else {
|
|
101
|
+
for (var i = 0; i < inputList.length; i++)
|
|
102
|
+
inputList[i].value = "";
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
};
|
|
106
|
+
InputOpt.prototype.render = function () {
|
|
107
|
+
var _this = this;
|
|
108
|
+
var _a, _b, _c, _d, _e;
|
|
109
|
+
return react_1.default.createElement("div", { id: this.props.id, ref: this.containerRef, "helper-text": this.props.helperText, style: this.props.style ? __assign(__assign({}, { '--helper-text-color': (_a = this.props.helperTextColor) !== null && _a !== void 0 ? _a : '#e14337' }), this.props.style) : { '--helper-text-color': (_b = this.props.helperTextColor) !== null && _b !== void 0 ? _b : '#e14337' }, className: "row body-1 ".concat(input_opt_module_css_1.default['input-opt-container'], " ").concat(((_c = this.props.helperText) === null || _c === void 0 ? void 0 : _c.length) && 'helper-text', " ").concat((_d = this.props.className) !== null && _d !== void 0 ? _d : ''), onMouseDown: function (ev) {
|
|
110
|
+
ev.stopPropagation();
|
|
111
|
+
ev.preventDefault();
|
|
112
|
+
var inputList = __spreadArray([], ev.target.closest("div").childNodes, true);
|
|
113
|
+
for (var _i = 0, _a = inputList.entries(); _i < _a.length; _i++) {
|
|
114
|
+
var _b = _a[_i], index = _b[0], input = _b[1];
|
|
115
|
+
if (!input.value.length || index === (inputList.length - 1)) {
|
|
116
|
+
input.focus();
|
|
117
|
+
break;
|
|
118
|
+
}
|
|
119
|
+
continue;
|
|
120
|
+
}
|
|
121
|
+
} }, Array.from({ length: (_e = this.props.length) !== null && _e !== void 0 ? _e : 6 }).map(function (_, i) { return react_1.default.createElement("input", { key: "opt-" + i, disabled: _this.props.disabled, onKeyDown: function (ev) {
|
|
122
|
+
var _a, _b;
|
|
123
|
+
var key = ev.key.toLowerCase();
|
|
124
|
+
switch (key) {
|
|
125
|
+
case "backspace":
|
|
126
|
+
if (ev.target.value.length)
|
|
127
|
+
ev.target.value = "";
|
|
128
|
+
else if (((_a = ev.target.previousSibling) === null || _a === void 0 ? void 0 : _a.localName) === "input")
|
|
129
|
+
ev.target.previousSibling.focus();
|
|
130
|
+
else
|
|
131
|
+
ev.target.blur();
|
|
132
|
+
break;
|
|
133
|
+
case "delete":
|
|
134
|
+
ev.target.value = "";
|
|
135
|
+
break;
|
|
136
|
+
default:
|
|
137
|
+
var numberCheck = /[0-9]/g;
|
|
138
|
+
if (numberCheck.test(key)) {
|
|
139
|
+
if (!ev.target.value.length)
|
|
140
|
+
ev.target.value = key;
|
|
141
|
+
if (((_b = ev.target.nextSibling) === null || _b === void 0 ? void 0 : _b.localName) === "input" && !ev.target.nextSibling.value.length)
|
|
142
|
+
ev.target.nextSibling.focus();
|
|
143
|
+
else
|
|
144
|
+
ev.target.blur();
|
|
145
|
+
}
|
|
146
|
+
else
|
|
147
|
+
ev.preventDefault();
|
|
148
|
+
break;
|
|
149
|
+
}
|
|
150
|
+
}, onBlur: function () {
|
|
151
|
+
if (_this.props.onChange)
|
|
152
|
+
_this.props.onChange(_this.getValue(), _this.containerRef.current);
|
|
153
|
+
} }); }));
|
|
154
|
+
};
|
|
155
|
+
return InputOpt;
|
|
156
|
+
}(react_1.default.Component));
|
|
157
|
+
exports.InputOpt = InputOpt;
|
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
import React, { CSSProperties } from "react";
|
|
2
|
-
interface Props {
|
|
3
|
-
id?: string;
|
|
4
|
-
value?: number;
|
|
5
|
-
onChange?: (ev: number) => void;
|
|
6
|
-
disabled?: boolean;
|
|
7
|
-
readOnly?: boolean;
|
|
8
|
-
className?: string;
|
|
9
|
-
helperText?: string;
|
|
10
|
-
helperTextColor?: string;
|
|
11
|
-
/** default: 1 */
|
|
12
|
-
volume?: number;
|
|
13
|
-
style?: CSSProperties;
|
|
14
|
-
min?: number;
|
|
15
|
-
max?: number;
|
|
16
|
-
type?: "outline" | "icon-button";
|
|
17
|
-
}
|
|
18
|
-
export declare const NumberPicker: ({ id, value, onChange, disabled, readOnly, className, helperText, helperTextColor, max, min, style, type, volume }: Props) => React.JSX.Element;
|
|
19
|
-
export {};
|
|
1
|
+
import React, { CSSProperties } from "react";
|
|
2
|
+
interface Props {
|
|
3
|
+
id?: string;
|
|
4
|
+
value?: number;
|
|
5
|
+
onChange?: (ev: number) => void;
|
|
6
|
+
disabled?: boolean;
|
|
7
|
+
readOnly?: boolean;
|
|
8
|
+
className?: string;
|
|
9
|
+
helperText?: string;
|
|
10
|
+
helperTextColor?: string;
|
|
11
|
+
/** default: 1 */
|
|
12
|
+
volume?: number;
|
|
13
|
+
style?: CSSProperties;
|
|
14
|
+
min?: number;
|
|
15
|
+
max?: number;
|
|
16
|
+
type?: "outline" | "icon-button";
|
|
17
|
+
}
|
|
18
|
+
export declare const NumberPicker: ({ id, value, onChange, disabled, readOnly, className, helperText, helperTextColor, max, min, style, type, volume }: Props) => React.JSX.Element;
|
|
19
|
+
export {};
|
|
@@ -1,127 +1,137 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
|
3
|
-
__assign = Object.assign || function(t) {
|
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
-
s = arguments[i];
|
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
-
t[p] = s[p];
|
|
8
|
-
}
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
14
|
-
if (k2 === undefined) k2 = k;
|
|
15
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
16
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
17
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
18
|
-
}
|
|
19
|
-
Object.defineProperty(o, k2, desc);
|
|
20
|
-
}) : (function(o, m, k, k2) {
|
|
21
|
-
if (k2 === undefined) k2 = k;
|
|
22
|
-
o[k2] = m[k];
|
|
23
|
-
}));
|
|
24
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
25
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
26
|
-
}) : function(o, v) {
|
|
27
|
-
o["default"] = v;
|
|
28
|
-
});
|
|
29
|
-
var __importStar = (this && this.__importStar) || function (
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
};
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
var
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
(
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
14
|
+
if (k2 === undefined) k2 = k;
|
|
15
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
16
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
17
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
18
|
+
}
|
|
19
|
+
Object.defineProperty(o, k2, desc);
|
|
20
|
+
}) : (function(o, m, k, k2) {
|
|
21
|
+
if (k2 === undefined) k2 = k;
|
|
22
|
+
o[k2] = m[k];
|
|
23
|
+
}));
|
|
24
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
25
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
26
|
+
}) : function(o, v) {
|
|
27
|
+
o["default"] = v;
|
|
28
|
+
});
|
|
29
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
30
|
+
var ownKeys = function(o) {
|
|
31
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
32
|
+
var ar = [];
|
|
33
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
34
|
+
return ar;
|
|
35
|
+
};
|
|
36
|
+
return ownKeys(o);
|
|
37
|
+
};
|
|
38
|
+
return function (mod) {
|
|
39
|
+
if (mod && mod.__esModule) return mod;
|
|
40
|
+
var result = {};
|
|
41
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
42
|
+
__setModuleDefault(result, mod);
|
|
43
|
+
return result;
|
|
44
|
+
};
|
|
45
|
+
})();
|
|
46
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
47
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
48
|
+
};
|
|
49
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
50
|
+
exports.NumberPicker = void 0;
|
|
51
|
+
var react_1 = __importStar(require("react"));
|
|
52
|
+
var number_picker_module_css_1 = __importDefault(require("./number-picker.module.css"));
|
|
53
|
+
var NumberPicker = function (_a) {
|
|
54
|
+
var id = _a.id, value = _a.value, onChange = _a.onChange, disabled = _a.disabled, readOnly = _a.readOnly, className = _a.className, helperText = _a.helperText, helperTextColor = _a.helperTextColor, max = _a.max, min = _a.min, style = _a.style, _b = _a.type, type = _b === void 0 ? "icon-button" : _b, _c = _a.volume, volume = _c === void 0 ? 1 : _c;
|
|
55
|
+
var _d = (0, react_1.useState)(0), val = _d[0], setValue = _d[1];
|
|
56
|
+
var inputRef = (0, react_1.useRef)(null);
|
|
57
|
+
(0, react_1.useEffect)(function () {
|
|
58
|
+
if (inputRef.current) {
|
|
59
|
+
setValue(value !== null && value !== void 0 ? value : 0);
|
|
60
|
+
inputRef.current.value = "".concat(value !== null && value !== void 0 ? value : 0);
|
|
61
|
+
}
|
|
62
|
+
}, [value, inputRef]);
|
|
63
|
+
return react_1.default.createElement("div", { id: id, className: "row ".concat(number_picker_module_css_1.default["number-picker-container"], " ").concat(className !== null && className !== void 0 ? className : "body-2", " ").concat((helperText === null || helperText === void 0 ? void 0 : helperText.length) && number_picker_module_css_1.default['helper-text']), "number-picker-type": type !== null && type !== void 0 ? type : "icon-button", "helper-text": helperText, style: style ? __assign(__assign({}, { '--helper-text-color': helperTextColor !== null && helperTextColor !== void 0 ? helperTextColor : '#e14337' }), style) : { '--helper-text-color': helperTextColor !== null && helperTextColor !== void 0 ? helperTextColor : '#e14337' } },
|
|
64
|
+
react_1.default.createElement("div", { className: "row", onClick: function () {
|
|
65
|
+
var newValue = val - volume;
|
|
66
|
+
if (min === undefined || newValue >= min) {
|
|
67
|
+
if (volume % 1 === 0)
|
|
68
|
+
newValue = Math.round(newValue);
|
|
69
|
+
else
|
|
70
|
+
newValue = parseFloat(newValue.toFixed(1));
|
|
71
|
+
setValue(newValue);
|
|
72
|
+
if (inputRef.current)
|
|
73
|
+
inputRef.current.value = "".concat(newValue);
|
|
74
|
+
if (onChange)
|
|
75
|
+
onChange(newValue);
|
|
76
|
+
}
|
|
77
|
+
} },
|
|
78
|
+
react_1.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
79
|
+
react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M1.3335 7.93907C1.3335 7.60435 1.60484 7.33301 1.93956 7.33301H14.0608C14.3955 7.33301 14.6668 7.60435 14.6668 7.93907C14.6668 8.27379 14.3955 8.54513 14.0608 8.54513H1.93956C1.60484 8.54513 1.3335 8.27379 1.3335 7.93907Z" }))),
|
|
80
|
+
react_1.default.createElement("input", { ref: inputRef, readOnly: readOnly, disabled: disabled, onKeyDown: function (ev) {
|
|
81
|
+
switch (ev.key.toLowerCase()) {
|
|
82
|
+
case "enter":
|
|
83
|
+
ev.target.blur();
|
|
84
|
+
break;
|
|
85
|
+
default:
|
|
86
|
+
break;
|
|
87
|
+
}
|
|
88
|
+
}, onFocus: function (ev) { ev.target.select(); }, onBlur: function (ev) {
|
|
89
|
+
var newValue = volume % 1 === 0 ? parseInt(ev.target.value.trim()) : parseFloat(ev.target.value.trim());
|
|
90
|
+
if (isNaN(newValue))
|
|
91
|
+
ev.target.value = "".concat(val);
|
|
92
|
+
else {
|
|
93
|
+
if (volume % 1 === 0)
|
|
94
|
+
newValue = Math.round(newValue);
|
|
95
|
+
else
|
|
96
|
+
newValue = parseFloat(newValue.toFixed(1));
|
|
97
|
+
if (min !== undefined && newValue < min) {
|
|
98
|
+
setValue(min);
|
|
99
|
+
if (inputRef.current)
|
|
100
|
+
inputRef.current.value = "".concat(min);
|
|
101
|
+
if (onChange)
|
|
102
|
+
onChange(min);
|
|
103
|
+
}
|
|
104
|
+
else if (max !== undefined && newValue > max) {
|
|
105
|
+
setValue(max);
|
|
106
|
+
if (inputRef.current)
|
|
107
|
+
inputRef.current.value = "".concat(max);
|
|
108
|
+
if (onChange)
|
|
109
|
+
onChange(max);
|
|
110
|
+
}
|
|
111
|
+
else {
|
|
112
|
+
setValue(newValue);
|
|
113
|
+
if (inputRef.current)
|
|
114
|
+
inputRef.current.value = "".concat(newValue);
|
|
115
|
+
if (onChange)
|
|
116
|
+
onChange(newValue);
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
} }),
|
|
120
|
+
react_1.default.createElement("div", { className: "row", onClick: function () {
|
|
121
|
+
var newValue = val + volume;
|
|
122
|
+
if (max === undefined || newValue <= max) {
|
|
123
|
+
if (volume % 1 === 0)
|
|
124
|
+
newValue = Math.round(newValue);
|
|
125
|
+
else
|
|
126
|
+
newValue = parseFloat(newValue.toFixed(1));
|
|
127
|
+
setValue(newValue);
|
|
128
|
+
if (inputRef.current)
|
|
129
|
+
inputRef.current.value = "".concat(newValue);
|
|
130
|
+
if (onChange)
|
|
131
|
+
onChange(newValue);
|
|
132
|
+
}
|
|
133
|
+
} },
|
|
134
|
+
react_1.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
135
|
+
react_1.default.createElement("path", { d: "M8.60622 1.93907C8.60622 1.60435 8.33488 1.33301 8.00016 1.33301C7.66544 1.33301 7.3941 1.60435 7.3941 1.93907V7.39361H1.93956C1.60484 7.39361 1.3335 7.66496 1.3335 7.99967C1.3335 8.33439 1.60484 8.60574 1.93956 8.60574H7.3941V14.0603C7.3941 14.395 7.66544 14.6663 8.00016 14.6663C8.33488 14.6663 8.60622 14.395 8.60622 14.0603V8.60574H14.0608C14.3955 8.60574 14.6668 8.33439 14.6668 7.99967C14.6668 7.66496 14.3955 7.39361 14.0608 7.39361H8.60622V1.93907Z" }))));
|
|
136
|
+
};
|
|
137
|
+
exports.NumberPicker = NumberPicker;
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import React, { CSSProperties } from "react";
|
|
2
|
-
interface Props {
|
|
3
|
-
id?: string;
|
|
4
|
-
currentPage: number;
|
|
5
|
-
itemPerPage: number;
|
|
6
|
-
totalItem: number;
|
|
7
|
-
onChangePage: Function;
|
|
8
|
-
hideGoToPage?: boolean;
|
|
9
|
-
hidePageSize?: boolean;
|
|
10
|
-
style: CSSProperties;
|
|
11
|
-
}
|
|
12
|
-
export declare function Pagination({ id, currentPage, itemPerPage, totalItem, onChangePage, hidePageSize, hideGoToPage, style }: Props): React.JSX.Element;
|
|
13
|
-
export {};
|
|
1
|
+
import React, { CSSProperties } from "react";
|
|
2
|
+
interface Props {
|
|
3
|
+
id?: string;
|
|
4
|
+
currentPage: number;
|
|
5
|
+
itemPerPage: number;
|
|
6
|
+
totalItem: number;
|
|
7
|
+
onChangePage: Function;
|
|
8
|
+
hideGoToPage?: boolean;
|
|
9
|
+
hidePageSize?: boolean;
|
|
10
|
+
style: CSSProperties;
|
|
11
|
+
}
|
|
12
|
+
export declare function Pagination({ id, currentPage, itemPerPage, totalItem, onChangePage, hidePageSize, hideGoToPage, style }: Props): React.JSX.Element;
|
|
13
|
+
export {};
|