wini-web-components 2.2.3 → 2.2.5
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/number-picker/number-picker.d.ts +19 -0
- package/dist/component/number-picker/number-picker.js +127 -0
- package/dist/component/pagination/pagination.d.ts +4 -2
- package/dist/component/pagination/pagination.js +3 -5
- package/dist/component/popup/popup.d.ts +6 -4
- package/dist/component/popup/popup.js +18 -18
- package/dist/component/progress-bar/progress-bar.d.ts +0 -1
- package/dist/component/progress-bar/progress-bar.js +10 -11
- package/dist/component/progress-circle/progress-circle.d.ts +1 -1
- package/dist/component/progress-circle/progress-circle.js +8 -8
- package/dist/component/radio-button/radio-button.js +2 -2
- package/dist/component/switch/switch.js +1 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.js +1 -1
- package/package.json +1 -1
|
@@ -0,0 +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 {};
|
|
@@ -0,0 +1,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 (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,5 +1,5 @@
|
|
|
1
1
|
import React, { CSSProperties } from "react";
|
|
2
|
-
|
|
2
|
+
interface Props {
|
|
3
3
|
id?: string;
|
|
4
4
|
currentPage: number;
|
|
5
5
|
itemPerPage: number;
|
|
@@ -8,4 +8,6 @@ export declare function Pagination({ id, currentPage, itemPerPage, totalItem, on
|
|
|
8
8
|
hideGoToPage?: boolean;
|
|
9
9
|
hidePageSize?: boolean;
|
|
10
10
|
style: CSSProperties;
|
|
11
|
-
}
|
|
11
|
+
}
|
|
12
|
+
export declare function Pagination({ id, currentPage, itemPerPage, totalItem, onChangePage, hidePageSize, hideGoToPage, style }: Props): React.JSX.Element;
|
|
13
|
+
export {};
|
|
@@ -61,14 +61,12 @@ function Pagination(_a) {
|
|
|
61
61
|
react_1.default.createElement("div", { style: { flex: 1 } }),
|
|
62
62
|
react_1.default.createElement(react_paginate_1.default, { onPageChange: function (ev) {
|
|
63
63
|
onChangePage(ev.selected + 1, itemPerPage);
|
|
64
|
-
}, forcePage: currentPage - 1,
|
|
65
|
-
// initialPage={currentPage - 1}
|
|
66
|
-
breakClassName: "row button-text-3", breakLabel: "...", pageCount: Math.ceil(totalItem / itemPerPage), previousClassName: "row", previousLabel: react_1.default.createElement(winicon_1.Winicon, { src: "fill/arrows/left-arrow", size: "1.4rem" }), nextClassName: "row", nextLabel: react_1.default.createElement(winicon_1.Winicon, { src: "fill/arrows/right-arrow", size: "1.4rem" }), containerClassName: "".concat(pagination_module_css_1.default['pagination'], " row"), pageClassName: "row button-text-3", activeClassName: pagination_module_css_1.default['active'], hrefBuilder: function (pageIndex) {
|
|
64
|
+
}, forcePage: currentPage - 1, breakClassName: "row button-text-3", breakLabel: "...", pageCount: Math.ceil(totalItem / itemPerPage), previousClassName: "row", previousLabel: react_1.default.createElement(winicon_1.Winicon, { src: "fill/arrows/left-arrow", size: "1.4rem" }), nextClassName: "row", nextLabel: react_1.default.createElement(winicon_1.Winicon, { src: "fill/arrows/right-arrow", size: "1.4rem" }), containerClassName: "".concat(pagination_module_css_1.default['pagination'], " row"), pageClassName: "row button-text-3", activeClassName: pagination_module_css_1.default['active'], hrefBuilder: function (pageIndex) {
|
|
67
65
|
return pageIndex >= 1 && pageIndex <= Math.ceil(totalItem / itemPerPage) ? "/page/".concat(pageIndex) : '#';
|
|
68
66
|
}, renderOnZeroPageCount: null }),
|
|
69
67
|
hideGoToPage ? null : react_1.default.createElement(react_1.default.Fragment, null,
|
|
70
|
-
react_1.default.createElement("div", { style: { height: '1.6rem', backgroundColor: "
|
|
71
|
-
react_1.default.createElement(text_1.Text, { className: "label-3"
|
|
68
|
+
react_1.default.createElement("div", { style: { height: '1.6rem', backgroundColor: "var(--neutral-bolder-border-color)", width: 1 } }),
|
|
69
|
+
react_1.default.createElement(text_1.Text, { className: "label-3" }, "Go to page"),
|
|
72
70
|
react_1.default.createElement(text_field_1.TextField, { ref: goToPageRef, style: { width: '4.8rem', textAlign: "center", padding: 0, height: '2.4rem', borderRadius: '0.4rem' }, className: "body-3", type: "number", onBlur: function (ev) {
|
|
73
71
|
var _tmp = ev.target.value.trim().length ? parseInt(ev.target.value.trim()) : undefined;
|
|
74
72
|
if (_tmp && !isNaN(_tmp) && _tmp > 0 && _tmp <= Math.ceil(totalItem / itemPerPage)) {
|
|
@@ -3,20 +3,22 @@ import './popup.css';
|
|
|
3
3
|
interface PopupState {
|
|
4
4
|
readonly open?: boolean;
|
|
5
5
|
heading?: ReactNode;
|
|
6
|
+
body?: ReactNode;
|
|
6
7
|
content?: ReactNode;
|
|
7
8
|
footer?: ReactNode;
|
|
8
9
|
clickOverlayClosePopup?: boolean;
|
|
9
10
|
style?: CSSProperties;
|
|
10
11
|
hideButtonClose?: boolean;
|
|
11
12
|
}
|
|
12
|
-
export declare const showPopup: (
|
|
13
|
+
export declare const showPopup: (props: {
|
|
13
14
|
ref: React.MutableRefObject<Popup | undefined>;
|
|
14
15
|
heading?: ReactNode;
|
|
15
16
|
content?: ReactNode;
|
|
17
|
+
body?: ReactNode;
|
|
16
18
|
footer?: ReactNode;
|
|
17
|
-
clickOverlayClosePopup?: boolean
|
|
18
|
-
style?:
|
|
19
|
-
hideButtonClose?: boolean
|
|
19
|
+
clickOverlayClosePopup?: boolean;
|
|
20
|
+
style?: CSSProperties;
|
|
21
|
+
hideButtonClose?: boolean;
|
|
20
22
|
}) => void;
|
|
21
23
|
export declare const closePopup: (ref: React.MutableRefObject<Popup>) => void;
|
|
22
24
|
export declare class Popup extends React.Component<Object, PopupState> {
|
|
@@ -33,16 +33,16 @@ exports.Popup = exports.closePopup = exports.showPopup = void 0;
|
|
|
33
33
|
var react_1 = __importDefault(require("react"));
|
|
34
34
|
var react_dom_1 = __importDefault(require("react-dom"));
|
|
35
35
|
require("./popup.css");
|
|
36
|
-
var showPopup = function (
|
|
37
|
-
var _b;
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
footer: footer,
|
|
43
|
-
clickOverlayClosePopup: clickOverlayClosePopup,
|
|
44
|
-
style: style,
|
|
45
|
-
hideButtonClose: hideButtonClose
|
|
36
|
+
var showPopup = function (props) {
|
|
37
|
+
var _a, _b;
|
|
38
|
+
(_b = (_a = props.ref) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.onOpen({
|
|
39
|
+
heading: props.heading,
|
|
40
|
+
content: props.content,
|
|
41
|
+
body: props.body,
|
|
42
|
+
footer: props.footer,
|
|
43
|
+
clickOverlayClosePopup: props.clickOverlayClosePopup,
|
|
44
|
+
style: props.style,
|
|
45
|
+
hideButtonClose: props.hideButtonClose
|
|
46
46
|
});
|
|
47
47
|
};
|
|
48
48
|
exports.showPopup = showPopup;
|
|
@@ -87,18 +87,18 @@ var Popup = /** @class */ (function (_super) {
|
|
|
87
87
|
};
|
|
88
88
|
Popup.prototype.render = function () {
|
|
89
89
|
var _this = this;
|
|
90
|
+
var _a;
|
|
90
91
|
return (react_1.default.createElement(react_1.default.Fragment, null, this.state.open &&
|
|
91
92
|
react_dom_1.default.createPortal(react_1.default.createElement("div", { className: "popup-overlay ".concat(this.state.clickOverlayClosePopup ? 'hidden-overlay' : ''), onClick: this.state.clickOverlayClosePopup ? function (ev) {
|
|
92
93
|
if (ev.target.classList.contains('popup-overlay'))
|
|
93
94
|
_this.onClose();
|
|
94
|
-
} : undefined },
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
react_1.default.createElement("
|
|
101
|
-
react_1.default.createElement("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: 'M16.4223 4.7559C16.7477 4.43047 16.7477 3.90283 16.4223 3.57739C16.0968 3.25195 15.5692 3.25195 15.2438 3.57739L9.99967 8.82147L4.7556 3.57739C4.43016 3.25195 3.90252 3.25195 3.57709 3.57739C3.25165 3.90283 3.25165 4.43047 3.57709 4.7559L8.82116 9.99998L3.57709 15.2441C3.25165 15.5695 3.25165 16.0971 3.57709 16.4226C3.90252 16.748 4.43016 16.748 4.7556 16.4226L9.99967 11.1785L15.2438 16.4226C15.5692 16.748 16.0968 16.748 16.4223 16.4226C16.7477 16.0971 16.7477 15.5695 16.4223 15.2441L11.1782 9.99998L16.4223 4.7559Z', fill: '#00204D', fillOpacity: 0.6 }))))), document.body)));
|
|
95
|
+
} : undefined }, (_a = this.state.content) !== null && _a !== void 0 ? _a : react_1.default.createElement("div", { ref: this.ref, className: 'popup-container col', onClick: function (e) { return e.stopPropagation(); }, style: this.state.style },
|
|
96
|
+
this.state.heading,
|
|
97
|
+
this.state.body,
|
|
98
|
+
this.state.footer,
|
|
99
|
+
this.state.hideButtonClose ? null : react_1.default.createElement("button", { type: 'button', onClick: function () { return _this.onClose(); }, className: 'popup-close-btn row' },
|
|
100
|
+
react_1.default.createElement("svg", { width: '100%', height: '100%', viewBox: '0 0 20 20', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', style: { width: '2rem', height: '2rem' } },
|
|
101
|
+
react_1.default.createElement("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: 'M16.4223 4.7559C16.7477 4.43047 16.7477 3.90283 16.4223 3.57739C16.0968 3.25195 15.5692 3.25195 15.2438 3.57739L9.99967 8.82147L4.7556 3.57739C4.43016 3.25195 3.90252 3.25195 3.57709 3.57739C3.25165 3.90283 3.25165 4.43047 3.57709 4.7559L8.82116 9.99998L3.57709 15.2441C3.25165 15.5695 3.25165 16.0971 3.57709 16.4226C3.90252 16.748 4.43016 16.748 4.7556 16.4226L9.99967 11.1785L15.2438 16.4226C15.5692 16.748 16.0968 16.748 16.4223 16.4226C16.7477 16.0971 16.7477 15.5695 16.4223 15.2441L11.1782 9.99998L16.4223 4.7559Z', fill: '#00204D', fillOpacity: 0.6 }))))), document.body)));
|
|
102
102
|
};
|
|
103
103
|
return Popup;
|
|
104
104
|
}(react_1.default.Component));
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { CSSProperties, ReactNode } from 'react';
|
|
2
|
-
import './progress-bar.css';
|
|
3
2
|
import React from 'react';
|
|
4
3
|
import { ComponentStatus } from '../../index';
|
|
5
4
|
export declare function ProgressBar({ id, status, percent, titleText, title, hideTitle, progressBarOnly, fullColor, percentColor, style, progressBarStyle }: {
|
|
@@ -16,21 +16,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
16
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
17
|
exports.ProgressBar = void 0;
|
|
18
18
|
var react_1 = require("react");
|
|
19
|
-
require("./progress-bar.css");
|
|
19
|
+
var progress_bar_module_css_1 = __importDefault(require("./progress-bar.module.css"));
|
|
20
20
|
var react_2 = __importDefault(require("react"));
|
|
21
21
|
var index_1 = require("../../index");
|
|
22
22
|
function ProgressBar(_a) {
|
|
23
|
-
var id = _a.id, _b = _a.status, status = _b === void 0 ? index_1.ComponentStatus.INFOR : _b, _c = _a.percent, percent = _c === void 0 ? 100 : _c, titleText = _a.titleText, title = _a.title, _d = _a.hideTitle, hideTitle = _d === void 0 ? false : _d, _e = _a.progressBarOnly, progressBarOnly = _e === void 0 ? false : _e, _f = _a.fullColor, fullColor = _f === void 0 ? 'var(--neutral-main-background-color)' : _f, _g = _a.percentColor, percentColor = _g === void 0 ? 'var(--
|
|
23
|
+
var id = _a.id, _b = _a.status, status = _b === void 0 ? index_1.ComponentStatus.INFOR : _b, _c = _a.percent, percent = _c === void 0 ? 100 : _c, titleText = _a.titleText, title = _a.title, _d = _a.hideTitle, hideTitle = _d === void 0 ? false : _d, _e = _a.progressBarOnly, progressBarOnly = _e === void 0 ? false : _e, _f = _a.fullColor, fullColor = _f === void 0 ? 'var(--neutral-main-background-color)' : _f, _g = _a.percentColor, percentColor = _g === void 0 ? 'var(--primary-main-color)' : _g, style = _a.style, progressBarStyle = _a.progressBarStyle;
|
|
24
24
|
var _h = (0, react_1.useState)(true), openDetails = _h[0], setOpenDetails = _h[1];
|
|
25
|
-
return react_2.default.createElement("div", { id: id, className: "progress-bar-container
|
|
26
|
-
(hideTitle || progressBarOnly) ? null : (title !== null && title !== void 0 ? title : react_2.default.createElement("div", { className: "progress-bar-title
|
|
27
|
-
react_2.default.createElement("div", { className: "heading-
|
|
28
|
-
react_2.default.createElement(
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
react_2.default.createElement("div", { className: "
|
|
32
|
-
progressBarOnly
|
|
33
|
-
progressBarOnly ? null : react_2.default.createElement("div", { className: 'text-value' },
|
|
25
|
+
return react_2.default.createElement("div", { id: id, className: "col ".concat(progress_bar_module_css_1.default["progress-bar-container"]), style: style ? __assign({ padding: progressBarOnly ? '0' : '1.6rem 2.4rem' }, style) : { padding: progressBarOnly ? '0' : '1.6rem 2.4rem' } },
|
|
26
|
+
(hideTitle || progressBarOnly) ? null : (title !== null && title !== void 0 ? title : react_2.default.createElement("div", { className: "row ".concat(progress_bar_module_css_1.default["progress-bar-title"]) },
|
|
27
|
+
react_2.default.createElement("div", { className: "heading-8" }, titleText),
|
|
28
|
+
react_2.default.createElement(index_1.Winicon, { src: openDetails ? "fill/arrows/down-arrow" : "fill/arrows/up-arrow", onClick: function () { setOpenDetails(!openDetails); } }))),
|
|
29
|
+
openDetails ? react_2.default.createElement("div", { className: "row ".concat(progress_bar_module_css_1.default["progress-bar-tile"]) },
|
|
30
|
+
react_2.default.createElement("div", { className: progress_bar_module_css_1.default["progress-bar-value"], style: __assign({ '--percent-color': percentColor, '--full-color': fullColor, '--percent': "".concat(percent, "%") }, (progressBarStyle !== null && progressBarStyle !== void 0 ? progressBarStyle : {})) }),
|
|
31
|
+
progressBarOnly || status === index_1.ComponentStatus.INFOR ? null : react_2.default.createElement("div", { className: "".concat(progress_bar_module_css_1.default["status-icon"]) }, (0, index_1.getStatusIcon)(status)),
|
|
32
|
+
progressBarOnly ? null : react_2.default.createElement("div", { className: 'label-4' },
|
|
34
33
|
percent,
|
|
35
34
|
"/100")) : null);
|
|
36
35
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { CSSProperties } from 'react';
|
|
2
2
|
import './progress-circle.css';
|
|
3
3
|
import React from 'react';
|
|
4
|
-
export declare function ProgressCircle(
|
|
4
|
+
export declare function ProgressCircle(props: {
|
|
5
5
|
id?: string;
|
|
6
6
|
/** value: 0 - 100 (%)*/
|
|
7
7
|
percent?: number;
|
|
@@ -17,15 +17,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
17
17
|
exports.ProgressCircle = void 0;
|
|
18
18
|
require("./progress-circle.css");
|
|
19
19
|
var react_1 = __importDefault(require("react"));
|
|
20
|
-
function ProgressCircle(
|
|
21
|
-
var
|
|
22
|
-
var radius = 30 - (strokeWidth !== null &&
|
|
20
|
+
function ProgressCircle(props) {
|
|
21
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
22
|
+
var radius = 30 - ((_a = props.strokeWidth) !== null && _a !== void 0 ? _a : 4);
|
|
23
23
|
var diameter = Math.PI * 2 * radius;
|
|
24
|
-
var strokeOffset = (1 - ((percent !== null &&
|
|
25
|
-
return react_1.default.createElement("svg", { id: id, width: "100%", height: "100%", viewBox: "0 0 60 60", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: __assign({ width:
|
|
26
|
-
react_1.default.createElement("path", { d: "M 30,30 m 0,-".concat(radius, " a ").concat(radius, ",").concat(radius, " 0 1 1 0,").concat(2 * radius, " a ").concat(radius, ",").concat(radius, " 0 1 1 0,-").concat(2 * radius), style: { fill: "none", stroke: strokeColor !== null &&
|
|
27
|
-
react_1.default.createElement("path", { d: "M 30,30 m 0,-".concat(radius, " a ").concat(radius, ",").concat(radius, " 0 1 1 0,").concat(2 * radius, " a ").concat(radius, ",").concat(radius, " 0 1 1 0,-").concat(2 * radius), style: { fill: fillColor !== null &&
|
|
28
|
-
react_1.default.createElement("text", { x: "50%", y: "50%",
|
|
24
|
+
var strokeOffset = (1 - (((_b = props.percent) !== null && _b !== void 0 ? _b : 0) / 100)) * diameter;
|
|
25
|
+
return react_1.default.createElement("svg", { id: props.id, width: "100%", height: "100%", viewBox: "0 0 60 60", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: __assign({ width: '6rem', height: '6rem' }, ((_c = props.style) !== null && _c !== void 0 ? _c : {})) },
|
|
26
|
+
react_1.default.createElement("path", { d: "M 30,30 m 0,-".concat(radius, " a ").concat(radius, ",").concat(radius, " 0 1 1 0,").concat(2 * radius, " a ").concat(radius, ",").concat(radius, " 0 1 1 0,-").concat(2 * radius), style: { fill: "none", stroke: (_d = props.strokeColor) !== null && _d !== void 0 ? _d : "var(--neutral-main-background-color)", strokeWidth: (_e = props.strokeWidth) !== null && _e !== void 0 ? _e : '4px', } }),
|
|
27
|
+
react_1.default.createElement("path", { d: "M 30,30 m 0,-".concat(radius, " a ").concat(radius, ",").concat(radius, " 0 1 1 0,").concat(2 * radius, " a ").concat(radius, ",").concat(radius, " 0 1 1 0,-").concat(2 * radius), style: { fill: (_f = props.fillColor) !== null && _f !== void 0 ? _f : "none", stroke: (_g = props.percentColor) !== null && _g !== void 0 ? _g : "var(--primary-main-color)", strokeWidth: (_h = props.strokeWidth) !== null && _h !== void 0 ? _h : '4px', strokeLinecap: 'round', strokeDasharray: "".concat(diameter, "px ").concat(diameter, "px"), strokeDashoffset: "".concat(strokeOffset, "px") } }),
|
|
28
|
+
react_1.default.createElement("text", { x: "50%", y: "50%", dy: ".3em", textAnchor: "middle", fontSize: "1.6rem", fontWeight: '600', style: __assign({ fill: "var(neutral-text-title-color)" }, ((_j = props.textStyle) !== null && _j !== void 0 ? _j : {})) }, (_k = props.percent) !== null && _k !== void 0 ? _k : 0,
|
|
29
29
|
"%"));
|
|
30
30
|
}
|
|
31
31
|
exports.ProgressCircle = ProgressCircle;
|
|
@@ -40,8 +40,8 @@ var RadioButton = /** @class */ (function (_super) {
|
|
|
40
40
|
RadioButton.prototype.render = function () {
|
|
41
41
|
var _a, _b, _c;
|
|
42
42
|
var convertStyle = {
|
|
43
|
-
'--off-color': (_a = this.props.offColor) !== null && _a !== void 0 ? _a : '
|
|
44
|
-
'--active-color': (_b = this.props.activeColor) !== null && _b !== void 0 ? _b : 'var(--
|
|
43
|
+
'--off-color': (_a = this.props.offColor) !== null && _a !== void 0 ? _a : 'var(--neutral-bolder-border-color)',
|
|
44
|
+
'--active-color': (_b = this.props.activeColor) !== null && _b !== void 0 ? _b : 'var(--primary-main-color)',
|
|
45
45
|
'--size': this.props.size ? (typeof this.props.size === 'number') ? "".concat(this.props.size, "px") : this.props.size : '20px'
|
|
46
46
|
};
|
|
47
47
|
if (this.props.style) {
|
|
@@ -53,7 +53,7 @@ var Switch = /** @class */ (function (_super) {
|
|
|
53
53
|
var _a, _b, _c, _d, _e;
|
|
54
54
|
var propStyle = {
|
|
55
55
|
'--off-bg': (_a = this.props.offBackground) !== null && _a !== void 0 ? _a : 'var(--neutral-main-background-color)',
|
|
56
|
-
'--on-bg': (_b = this.props.onBackground) !== null && _b !== void 0 ? _b : 'var(--
|
|
56
|
+
'--on-bg': (_b = this.props.onBackground) !== null && _b !== void 0 ? _b : 'var(--primary-main-color)',
|
|
57
57
|
'--dot-color': (_c = this.props.dotColor) !== null && _c !== void 0 ? _c : '#ffffff',
|
|
58
58
|
'--size': this.props.size ? (typeof this.props.size === 'number') ? "".concat(this.props.size, "px") : this.props.size : '2rem'
|
|
59
59
|
};
|
package/dist/index.d.ts
CHANGED
|
@@ -24,6 +24,7 @@ import { ToastContainer } from 'react-toastify';
|
|
|
24
24
|
import { Button } from './component/button/button';
|
|
25
25
|
import { Tag } from './component/tag/tag';
|
|
26
26
|
import { Winicon } from './component/wini-icon/winicon';
|
|
27
|
+
import { NumberPicker } from './component/number-picker/number-picker';
|
|
27
28
|
import { WLoginView } from './form/login/view';
|
|
28
|
-
export { Calendar, CalendarType, ComponentStatus, getStatusIcon, Checkbox, Select1, Switch, Popup, showPopup, closePopup, Dialog, showDialog, DialogAlignment, DatePicker, SelectMultiple, ProgressBar, Text, Pagination, Table, TbCell, TbHeader, TbBody, TbRow, CellAlignItems, TextField, RadioButton, TextArea, ImportFile, ToastMessage, InfiniteScroll, Rating, ProgressCircle, CustomSlider, ToastContainer, Button, Tag, Winicon, WLoginView };
|
|
29
|
+
export { Calendar, CalendarType, ComponentStatus, getStatusIcon, Checkbox, Select1, Switch, Popup, showPopup, closePopup, Dialog, showDialog, DialogAlignment, DatePicker, SelectMultiple, ProgressBar, Text, Pagination, Table, TbCell, TbHeader, TbBody, TbRow, CellAlignItems, TextField, RadioButton, TextArea, ImportFile, ToastMessage, InfiniteScroll, Rating, ProgressCircle, CustomSlider, ToastContainer, Button, Tag, Winicon, NumberPicker, WLoginView };
|
|
29
30
|
export type { OptionsItem };
|