wini-web-components 1.4.1 → 1.5.0

package/dist/component/button/button.d.ts

@@ -0,0 +1,16 @@
+import React, { CSSProperties, ReactNode } from 'react';
+interface ButtonProps {
+    id?: string;
+    label: string;
+    prefix?: ReactNode;
+    suffix?: ReactNode;
+    disabled?: boolean;
+    style?: CSSProperties;
+    type?: "button" | "reset" | "submit";
+    className?: string;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+}
+export declare class Button extends React.Component<ButtonProps> {
+    render(): React.JSX.Element;
+}
+export {};

package/dist/component/button/button.js

@@ -0,0 +1,37 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = void 0;
+var react_1 = __importDefault(require("react"));
+var text_1 = require("../text/text");
+var button_module_css_1 = __importDefault(require("./button.module.css"));
+var Button = /** @class */ (function (_super) {
+    __extends(Button, _super);
+    function Button() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Button.prototype.render = function () {
+        var _a, _b;
+        return react_1.default.createElement("button", { id: this.props.id, type: (_a = this.props.type) !== null && _a !== void 0 ? _a : "button", disabled: this.props.disabled, className: "".concat(button_module_css_1.default['button-container'], " row ").concat((_b = this.props.className) !== null && _b !== void 0 ? _b : "button-text-3"), style: this.props.style, onClick: this.props.onClick },
+            react_1.default.createElement(text_1.Text, { maxLine: 1, className: button_module_css_1.default['button-label'] }, this.props.label));
+    };
+    return Button;
+}(react_1.default.Component));
+exports.Button = Button;

package/dist/component/checkbox/checkbox.d.ts

@@ -1,5 +1,4 @@
 import React, { CSSProperties } from 'react';
-import './checkbox.css';
 interface CheckboxProps {
     id?: string;
     onChange?: (value: boolean) => void;

package/dist/component/checkbox/checkbox.js

@@ -31,7 +31,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Checkbox = void 0;
 var react_1 = __importDefault(require("react"));
-require("./checkbox.css");
+var checkbox_module_css_1 = __importDefault(require("./checkbox.module.css"));
 var Checkbox = /** @class */ (function (_super) {
     __extends(Checkbox, _super);
     function Checkbox() {
@@ -64,7 +64,7 @@ var Checkbox = /** @class */ (function (_super) {
             delete this.props.style.maxHeight;
             convertStyle = __assign(__assign({}, this.props.style), convertStyle);
         }
-        return react_1.default.createElement("label", { id: this.props.id, className: "checkbox-container row", style: convertStyle, "is-null-value": "".concat(this.state.value == undefined), onClick: this.props.onClick },
+        return react_1.default.createElement("label", { id: this.props.id, className: "".concat(checkbox_module_css_1.default['checkbox-container'], " row"), style: convertStyle, "is-null-value": "".concat(this.state.value == undefined), onClick: this.props.onClick },
             react_1.default.createElement("input", { type: "checkbox", checked: this.state.value, disabled: this.props.disabled, onChange: function (ev) {
                     ev.stopPropagation();
                     var newValue = !_this.state.value;
@@ -79,5 +79,3 @@ var Checkbox = /** @class */ (function (_super) {
     return Checkbox;
 }(react_1.default.Component));
 exports.Checkbox = Checkbox;
-react_1.default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-    react_1.default.createElement("rect", { width: "20", height: "20", rx: "4", fill: "#366AE2" }));

package/dist/component/pagination/pagination.d.ts

@@ -1,12 +1,11 @@
 import React, { CSSProperties } from "react";
-import './pagination.css';
-export declare function Pagination({ id, currentPage, itemPerPage, totalItem, onChangePage, hiddenPageSize, hiddenTotal, style }: {
+export declare function Pagination({ id, currentPage, itemPerPage, totalItem, onChangePage, hidePageSize, hideGoToPage, style }: {
     id?: string;
     currentPage: number;
     itemPerPage: number;
     totalItem: number;
     onChangePage: Function;
-    hiddenPageSize: boolean;
-    hiddenTotal: boolean;
+    hideGoToPage?: boolean;
+    hidePageSize?: boolean;
     style: CSSProperties;
 }): React.JSX.Element;

package/dist/component/pagination/pagination.js

@@ -1,46 +1,85 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Pagination = void 0;
-var react_1 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
 var react_paginate_1 = __importDefault(require("react-paginate"));
-require("./pagination.css");
-var index_1 = require("../../index");
+var pagination_module_css_1 = __importDefault(require("./pagination.module.css"));
+var react_fontawesome_1 = require("@fortawesome/react-fontawesome");
+var free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
+var select1_1 = require("../select1/select1");
+var text_1 = require("../text/text");
+var text_field_1 = require("../text-field/text-field");
 function Pagination(_a) {
-    var id = _a.id, currentPage = _a.currentPage, itemPerPage = _a.itemPerPage, totalItem = _a.totalItem, onChangePage = _a.onChangePage, _b = _a.hiddenPageSize, hiddenPageSize = _b === void 0 ? false : _b, _c = _a.hiddenTotal, hiddenTotal = _c === void 0 ? false : _c, style = _a.style;
+    var id = _a.id, currentPage = _a.currentPage, itemPerPage = _a.itemPerPage, totalItem = _a.totalItem, onChangePage = _a.onChangePage, _b = _a.hidePageSize, hidePageSize = _b === void 0 ? false : _b, _c = _a.hideGoToPage, hideGoToPage = _c === void 0 ? false : _c, style = _a.style;
+    var goToPageRef = (0, react_1.useRef)();
     if (currentPage > 1 && (totalItem === 0 || (Math.floor(totalItem / itemPerPage) + (totalItem % itemPerPage === 0 ? 0 : 1)) < currentPage)) {
         onChangePage(1, itemPerPage);
         return react_1.default.createElement("div", null);
     }
+    (0, react_1.useEffect)(function () {
+        if (goToPageRef.current) {
+            var _inputPage = goToPageRef.current.getInput();
+            if (_inputPage)
+                _inputPage.value = currentPage.toString();
+        }
+    }, [currentPage]);
     if (totalItem > 0) {
-        return (react_1.default.createElement("div", { id: id, className: "row custom-pagination", style: style },
-            hiddenTotal ? null : react_1.default.createElement(index_1.Text, { className: "regular2" },
-                "Hi\u1EC3n th\u1ECB ",
-                itemPerPage * (currentPage - 1) + 1,
-                "-",
-                ((itemPerPage * (currentPage - 1) + itemPerPage) > totalItem) ? totalItem : (itemPerPage * (currentPage - 1) + itemPerPage),
-                " trong t\u1ED5ng s\u1ED1 ",
-                totalItem,
-                " b\u1EA3n ghi"),
-            react_1.default.createElement("div", { className: "row " },
-                hiddenPageSize ? null : react_1.default.createElement("div", { className: "row items-per-page-container" },
-                    react_1.default.createElement(index_1.Text, { className: "regular2" }, "Items/page"),
-                    react_1.default.createElement("div", { className: "row" },
-                        react_1.default.createElement(index_1.Select1, { readOnly: true, style: { width: '8.6rem' }, placeholder: itemPerPage.toString(), options: [10, 20, 50, 100, 200].map(function (item, _) { return { id: item, name: item }; }), onChange: function (ev) {
-                                onChangePage(currentPage, isNaN(parseInt(ev.id)) ? itemPerPage : parseInt(ev.id));
-                            } }))),
-                react_1.default.createElement(react_paginate_1.default, { breakLabel: "...", nextLabel: "Next", onPageChange: function (ev) {
-                        onChangePage(ev.selected + 1, itemPerPage);
-                    }, forcePage: currentPage - 1, 
-                    // initialPage={currentPage - 1}
-                    pageCount: Math.ceil(totalItem / itemPerPage), previousLabel: "Previous", containerClassName: "pagination row", pageClassName: "", pageLinkClassName: "nav-link", previousClassName: "nav-link", previousLinkClassName: "nav-link", nextClassName: "nav-link regular2", nextLinkClassName: "nav-link", activeClassName: "active", hrefBuilder: function (pageIndex) {
-                        return pageIndex >= 1 && pageIndex <= Math.ceil(totalItem / itemPerPage) ? "/page/".concat(pageIndex) : '#';
-                    }, renderOnZeroPageCount: null }))));
-    }
-    else {
-        return (react_1.default.createElement("div", { id: id }));
+        return react_1.default.createElement("div", { id: id, className: "".concat(pagination_module_css_1.default['custom-pagination'], " row"), style: style },
+            hidePageSize ? null : react_1.default.createElement("div", { className: "row", style: { gap: '0.8rem' } },
+                react_1.default.createElement(select1_1.Select1, { readOnly: true, placeholder: itemPerPage.toString(), options: [10, 20, 50, 80, 100, 150, 200].map(function (item, _) { return { id: item, name: item }; }), style: { borderRadius: '0.4rem', width: '5.6rem', padding: '0 0.8rem', height: '2.4rem' }, onChange: function (ev) {
+                        onChangePage(currentPage, isNaN(parseInt(ev.id)) ? itemPerPage : parseInt(ev.id));
+                    } }),
+                react_1.default.createElement(text_1.Text, { className: "body-3" },
+                    "of ",
+                    totalItem,
+                    " items")),
+            react_1.default.createElement("div", { style: { flex: 1 } }),
+            react_1.default.createElement(react_paginate_1.default, { onPageChange: function (ev) {
+                    onChangePage(ev.selected + 1, itemPerPage);
+                }, forcePage: currentPage - 1, 
+                // initialPage={currentPage - 1}
+                breakClassName: "row button-text-3", breakLabel: "...", pageCount: Math.ceil(totalItem / itemPerPage), previousClassName: "row", previousLabel: react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faChevronLeft, style: { fontSize: '1.4rem' } }), nextClassName: "row", nextLabel: react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faChevronRight, style: { fontSize: '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) {
+                    return pageIndex >= 1 && pageIndex <= Math.ceil(totalItem / itemPerPage) ? "/page/".concat(pageIndex) : '#';
+                }, renderOnZeroPageCount: null }),
+            hideGoToPage ? null : react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement("div", { style: { height: '1.6rem', backgroundColor: "#00358033", width: 1 } }),
+                react_1.default.createElement(text_1.Text, { className: "label-3", style: { color: "#161C2499" } }, "Go to page"),
+                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) {
+                        var _tmp = ev.target.value.trim().length ? parseInt(ev.target.value.trim()) : undefined;
+                        if (_tmp && !isNaN(_tmp) && _tmp > 0 && _tmp <= Math.ceil(totalItem / itemPerPage)) {
+                            onChangePage(_tmp, itemPerPage);
+                        }
+                        else
+                            ev.target.value = "";
+                    } })));
     }
+    else
+        return react_1.default.createElement("div", { id: id });
 }
 exports.Pagination = Pagination;

package/dist/component/switch/switch.d.ts

@@ -1,5 +1,4 @@
 import React, { CSSProperties } from 'react';
-import './switch.css';
 interface SwitchProps {
     id?: string;
     onChange?: (value: boolean) => void;
@@ -11,7 +10,6 @@ interface SwitchProps {
     onBackground?: string;
     offBackground?: string;
     name?: string;
-    className?: string;
 }
 interface SwitchState {
     value?: boolean;

package/dist/component/switch/switch.js

@@ -31,7 +31,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Switch = void 0;
 var react_1 = __importDefault(require("react"));
-require("./switch.css");
+var switch_module_css_1 = __importDefault(require("./switch.module.css"));
 var Switch = /** @class */ (function (_super) {
     __extends(Switch, _super);
     function Switch() {
@@ -50,7 +50,7 @@ var Switch = /** @class */ (function (_super) {
     };
     Switch.prototype.render = function () {
         var _this = this;
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d;
         var propStyle = {
             '--off-bg': (_a = this.props.offBackground) !== null && _a !== void 0 ? _a : 'var(--background)',
             '--on-bg': (_b = this.props.onBackground) !== null && _b !== void 0 ? _b : 'var(--infor-color)',
@@ -67,14 +67,14 @@ var Switch = /** @class */ (function (_super) {
             delete this.props.style.maxHeight;
             convertStyle = __assign(__assign({}, this.props.style), convertStyle);
         }
-        return react_1.default.createElement("label", { id: this.props.id, className: "switch-container row ".concat((_e = this.props.className) !== null && _e !== void 0 ? _e : ''), style: convertStyle },
+        return react_1.default.createElement("label", { id: this.props.id, className: "".concat(switch_module_css_1.default['switch-container'], " row"), style: convertStyle },
             react_1.default.createElement("input", { type: "checkbox", checked: this.state.value, name: this.props.name, disabled: this.props.disabled, onChange: function () {
                     var newValue = !_this.state.value;
                     _this.setState({ value: newValue });
                     if (_this.props.onChange)
                         _this.props.onChange(newValue);
                 } }),
-            react_1.default.createElement("span", { className: "slider" }));
+            react_1.default.createElement("span", { className: switch_module_css_1.default['slider'] }));
     };
     return Switch;
 }(react_1.default.Component));

package/dist/component/text-field/text-field.d.ts

@@ -24,6 +24,8 @@ interface TextFieldProps {
     register?: UseFormRegister<{}>;
 }
 export declare class TextField extends React.Component<TextFieldProps> {
+    private containerRef;
+    getInput: () => HTMLInputElement | null | undefined;
     render(): React.ReactNode;
 }
 export {};

package/dist/component/text-field/text-field.js

@@ -25,21 +25,47 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextField = void 0;
-var react_1 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
 require("./text-field.css");
 var TextField = /** @class */ (function (_super) {
     __extends(TextField, _super);
     function TextField() {
-        return _super !== null && _super.apply(this, arguments) || this;
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.containerRef = (0, react_1.createRef)();
+        _this.getInput = function () {
+            var _a;
+            return (_a = _this.containerRef.current) === null || _a === void 0 ? void 0 : _a.querySelector("input");
+        };
+        return _this;
     }
     TextField.prototype.render = function () {
         var _a, _b, _c, _d, _e, _f;
-        return react_1.default.createElement("div", { id: this.props.id, 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' } },
+        return react_1.default.createElement("div", { ref: this.containerRef, id: this.props.id, 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' } },
             this.props.prefix,
             this.props.register ?
                 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 }),

package/dist/index.d.ts

@@ -25,4 +25,5 @@ import { ProgressCircle } from './component/progress-circle/progress-circle';
 import { CustomSlider } from './component/slider/slider';
 import { ToastContainer } from 'react-toastify';
 import { CardInfo } from './component/card/card';
-export { Calendar, CalendarType, ComponentStatus, getStatusIcon, Checkbox, Select1, OptionsItem, 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, CardInfo };
+import { Button } from './component/button/button';
+export { Calendar, CalendarType, ComponentStatus, getStatusIcon, Checkbox, Select1, OptionsItem, 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, CardInfo, Button };