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.
Files changed (63) hide show
  1. package/dist/component/button/button.d.ts +16 -16
  2. package/dist/component/button/button.js +39 -39
  3. package/dist/component/calendar/calendar.d.ts +30 -46
  4. package/dist/component/calendar/calendar.js +437 -432
  5. package/dist/component/checkbox/checkbox.d.ts +22 -22
  6. package/dist/component/checkbox/checkbox.js +80 -81
  7. package/dist/component/component-status.d.ts +8 -8
  8. package/dist/component/component-status.js +39 -39
  9. package/dist/component/date-picker/date-picker.d.ts +25 -36
  10. package/dist/component/date-picker/date-picker.js +362 -359
  11. package/dist/component/dialog/dialog.d.ts +36 -34
  12. package/dist/component/dialog/dialog.js +99 -97
  13. package/dist/component/import-file/import-file.d.ts +24 -36
  14. package/dist/component/import-file/import-file.js +154 -119
  15. package/dist/component/infinite-scroll/infinite-scroll.d.ts +17 -17
  16. package/dist/component/infinite-scroll/infinite-scroll.js +103 -103
  17. package/dist/component/input-multi-select/input-multi-select.d.ts +21 -38
  18. package/dist/component/input-multi-select/input-multi-select.js +334 -323
  19. package/dist/component/input-opt/input-opt.d.ts +21 -0
  20. package/dist/component/input-opt/input-opt.js +157 -0
  21. package/dist/component/number-picker/number-picker.d.ts +19 -19
  22. package/dist/component/number-picker/number-picker.js +137 -127
  23. package/dist/component/pagination/pagination.d.ts +13 -13
  24. package/dist/component/pagination/pagination.js +93 -82
  25. package/dist/component/popup/popup.d.ts +33 -33
  26. package/dist/component/popup/popup.js +138 -105
  27. package/dist/component/progress-bar/progress-bar.d.ts +16 -16
  28. package/dist/component/progress-bar/progress-bar.js +35 -36
  29. package/dist/component/progress-circle/progress-circle.d.ts +14 -14
  30. package/dist/component/progress-circle/progress-circle.js +30 -31
  31. package/dist/component/radio-button/radio-button.d.ts +20 -20
  32. package/dist/component/radio-button/radio-button.js +64 -64
  33. package/dist/component/rating/rating.d.ts +23 -23
  34. package/dist/component/rating/rating.js +73 -74
  35. package/dist/component/select1/select1.d.ts +31 -50
  36. package/dist/component/select1/select1.js +320 -309
  37. package/dist/component/slider/slider.d.ts +31 -31
  38. package/dist/component/slider/slider.js +80 -81
  39. package/dist/component/switch/switch.d.ts +23 -23
  40. package/dist/component/switch/switch.js +80 -81
  41. package/dist/component/table/table.d.ts +51 -51
  42. package/dist/component/table/table.js +119 -119
  43. package/dist/component/tag/tag.d.ts +17 -17
  44. package/dist/component/tag/tag.js +39 -39
  45. package/dist/component/text/text.d.ts +16 -16
  46. package/dist/component/text/text.js +51 -51
  47. package/dist/component/text-area/text-area.d.ts +28 -28
  48. package/dist/component/text-area/text-area.js +83 -73
  49. package/dist/component/text-field/text-field.d.ts +33 -33
  50. package/dist/component/text-field/text-field.js +107 -97
  51. package/dist/component/toast-noti/toast-noti.d.ts +5 -5
  52. package/dist/component/toast-noti/toast-noti.js +28 -28
  53. package/dist/component/wini-icon/winicon.d.ts +16 -16
  54. package/dist/component/wini-icon/winicon.js +121 -112
  55. package/dist/form/login/view.d.ts +40 -40
  56. package/dist/form/login/view.js +66 -65
  57. package/dist/i18n.d.ts +2 -0
  58. package/dist/i18n.js +125 -0
  59. package/dist/index.d.ts +32 -30
  60. package/dist/index.js +1 -1
  61. package/dist/language/i18n.d.ts +2 -0
  62. package/dist/language/i18n.js +125 -0
  63. 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 (mod) {
30
- if (mod && mod.__esModule) return mod;
31
- var result = {};
32
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
33
- __setModuleDefault(result, mod);
34
- return result;
35
- };
36
- var __importDefault = (this && this.__importDefault) || function (mod) {
37
- return (mod && mod.__esModule) ? mod : { "default": mod };
38
- };
39
- Object.defineProperty(exports, "__esModule", { value: true });
40
- exports.NumberPicker = void 0;
41
- var react_1 = __importStar(require("react"));
42
- var number_picker_module_css_1 = __importDefault(require("./number-picker.module.css"));
43
- var NumberPicker = function (_a) {
44
- 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;
45
- var _d = (0, react_1.useState)(0), val = _d[0], setValue = _d[1];
46
- var inputRef = (0, react_1.useRef)(null);
47
- (0, react_1.useEffect)(function () {
48
- if (inputRef.current) {
49
- setValue(value !== null && value !== void 0 ? value : 0);
50
- inputRef.current.value = "".concat(value !== null && value !== void 0 ? value : 0);
51
- }
52
- }, [value, inputRef]);
53
- 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' } },
54
- react_1.default.createElement("div", { className: "row", onClick: function () {
55
- var newValue = val - volume;
56
- if (min === undefined || newValue >= min) {
57
- if (volume % 1 === 0)
58
- newValue = Math.round(newValue);
59
- else
60
- newValue = parseFloat(newValue.toFixed(1));
61
- setValue(newValue);
62
- if (inputRef.current)
63
- inputRef.current.value = "".concat(newValue);
64
- if (onChange)
65
- onChange(newValue);
66
- }
67
- } },
68
- react_1.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
69
- 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" }))),
70
- react_1.default.createElement("input", { ref: inputRef, readOnly: readOnly, disabled: disabled, onKeyDown: function (ev) {
71
- switch (ev.key.toLowerCase()) {
72
- case "enter":
73
- ev.target.blur();
74
- break;
75
- default:
76
- break;
77
- }
78
- }, onFocus: function (ev) { ev.target.select(); }, onBlur: function (ev) {
79
- var newValue = volume % 1 === 0 ? parseInt(ev.target.value.trim()) : parseFloat(ev.target.value.trim());
80
- if (isNaN(newValue))
81
- ev.target.value = "".concat(val);
82
- else {
83
- if (volume % 1 === 0)
84
- newValue = Math.round(newValue);
85
- else
86
- newValue = parseFloat(newValue.toFixed(1));
87
- if (min !== undefined && newValue < min) {
88
- setValue(min);
89
- if (inputRef.current)
90
- inputRef.current.value = "".concat(min);
91
- if (onChange)
92
- onChange(min);
93
- }
94
- else if (max !== undefined && newValue > max) {
95
- setValue(max);
96
- if (inputRef.current)
97
- inputRef.current.value = "".concat(max);
98
- if (onChange)
99
- onChange(max);
100
- }
101
- else {
102
- setValue(newValue);
103
- if (inputRef.current)
104
- inputRef.current.value = "".concat(newValue);
105
- if (onChange)
106
- onChange(newValue);
107
- }
108
- }
109
- } }),
110
- react_1.default.createElement("div", { className: "row", onClick: function () {
111
- var newValue = val + volume;
112
- if (max === undefined || newValue <= max) {
113
- if (volume % 1 === 0)
114
- newValue = Math.round(newValue);
115
- else
116
- newValue = parseFloat(newValue.toFixed(1));
117
- setValue(newValue);
118
- if (inputRef.current)
119
- inputRef.current.value = "".concat(newValue);
120
- if (onChange)
121
- onChange(newValue);
122
- }
123
- } },
124
- react_1.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
125
- 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" }))));
126
- };
127
- exports.NumberPicker = NumberPicker;
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 {};