awing-library 2.1.2-dev.99 → 2.1.2-stable.2

package/lib/AWING/DataGridGroup/DataGridGroup.js

@@ -0,0 +1,94 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = DataGridGroup;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var i18n_1 = __importDefault(require("../../i18n"));
+var GroupTable_1 = __importDefault(require("../GroupTable"));
+var material_1 = require("@mui/material");
+var ControlPanel_1 = __importDefault(require("./ControlPanel"));
+function DataGridGroup(props) {
+    var initHeadCells = props.initHeadCells, other = __rest(props, ["initHeadCells"]);
+    var _a = (0, react_1.useState)([]), groupByValues = _a[0], setGroupByValues = _a[1];
+    (0, react_1.useEffect)(function () {
+        var language = localStorage.getItem("i18nextLng");
+        i18n_1.default.changeLanguage(language || "vi");
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [localStorage.getItem("i18nextLng")]);
+    var handleDragStart = function (e) {
+        var groupId = e.target.id;
+        e.dataTransfer.setData("text", groupId);
+    };
+    var getHeadCells = function () {
+        if (groupByValues && groupByValues.length) {
+            var results = [];
+            var _loop_1 = function (grp) {
+                var cell = initHeadCells.find(function (x) { return x.field === grp; });
+                if (cell) {
+                    results.push(__assign(__assign({}, cell), { isGrouping: true }));
+                }
+            };
+            for (var _i = 0, groupByValues_1 = groupByValues; _i < groupByValues_1.length; _i++) {
+                var grp = groupByValues_1[_i];
+                _loop_1(grp);
+            }
+            var _loop_2 = function (cell) {
+                if (groupByValues.some(function (x) { return x === cell.field; }))
+                    return "continue";
+                results.push(cell);
+            };
+            for (var _a = 0, initHeadCells_1 = initHeadCells; _a < initHeadCells_1.length; _a++) {
+                var cell = initHeadCells_1[_a];
+                _loop_2(cell);
+            }
+            return results;
+        }
+        else {
+            return initHeadCells;
+        }
+    };
+    var headCells = getHeadCells();
+    var groupHeaders = initHeadCells
+        .filter(function (h) { return !h.isFixed; })
+        .map(function (h) { return ({
+        id: h.field,
+        label: h.label,
+    }); });
+    return ((0, jsx_runtime_1.jsxs)(material_1.Grid, { container: true, spacing: 2, style: { padding: "0px 16px 16px" }, children: [(0, jsx_runtime_1.jsx)(ControlPanel_1.default, { groupHeaders: groupHeaders, onQueryData: function (newGroupByValues) {
+                    setGroupByValues(newGroupByValues);
+                } }), (0, jsx_runtime_1.jsx)(material_1.TableContainer, { children: (0, jsx_runtime_1.jsxs)(material_1.Table, { size: "medium", children: [(0, jsx_runtime_1.jsx)(material_1.TableHead, { children: (0, jsx_runtime_1.jsxs)(material_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, { align: "right", style: { width: "50px" }, children: "#" }), groupByValues.map(function (header) {
+                                        var headerInfo = groupHeaders.find(function (x) { return x.id === header; });
+                                        return ((0, jsx_runtime_1.jsx)(material_1.TableCell, { children: headerInfo === null || headerInfo === void 0 ? void 0 : headerInfo.label }, header));
+                                    }), groupHeaders
+                                        .filter(function (x) {
+                                        return !groupByValues.some(function (g) { return g === x.id; });
+                                    })
+                                        .map(function (header) { return ((0, jsx_runtime_1.jsx)(material_1.TableCell, { id: header.id, draggable: true, style: { cursor: "move" }, onDragStart: handleDragStart, children: header.label }, header.id)); }), headCells
+                                        .filter(function (x) { return x.isFixed; })
+                                        .map(function (header, idx) { return ((0, jsx_runtime_1.jsx)(material_1.TableCell, { children: header.label }, idx)); })] }) }), (0, jsx_runtime_1.jsx)(material_1.TableBody, { children: (0, jsx_runtime_1.jsx)(GroupTable_1.default, __assign({ headCells: headCells, filters: [] }, other), "place-group-table") })] }) })] }));
+}

package/lib/AWING/DataGridGroup/index.d.ts

@@ -0,0 +1,4 @@
+import { DataGridGroupProps } from "./interface";
+export declare function DataGridGroup(props: DataGridGroupProps): import("react/jsx-runtime").JSX.Element;
+export * from "./interface";
+export default DataGridGroup;

package/lib/AWING/DataGridGroup/index.js

@@ -0,0 +1,40 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataGridGroup = DataGridGroup;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var DataGridGroup_1 = __importDefault(require("./DataGridGroup"));
+var i18n_1 = __importDefault(require("../../i18n"));
+var react_i18next_1 = require("react-i18next");
+function DataGridGroup(props) {
+    return ((0, jsx_runtime_1.jsx)(react_i18next_1.I18nextProvider, { i18n: i18n_1.default, children: (0, jsx_runtime_1.jsx)(DataGridGroup_1.default, __assign({}, props)) }));
+}
+__exportStar(require("./interface"), exports);
+exports.default = DataGridGroup;

package/lib/AWING/DataGridGroup/interface.d.ts

@@ -0,0 +1,21 @@
+import { DataObject } from '../../AWING';
+export interface HeadCell {
+    label: string;
+    field: string;
+    isGrouping: boolean;
+    isFixed: boolean;
+    getDisplay?: (info: DataObject) => any;
+    isDisplayTotal?: boolean;
+    sort?: 'ready' | 'asc' | 'desc';
+    numberic?: boolean;
+}
+export interface GroupFilter {
+    field: string;
+    value: any;
+}
+export interface DataGridGroupProps {
+    initHeadCells: HeadCell[];
+    onGetData: (groupFilters: GroupFilter[], pageIndex: number, pageSize: number) => Promise<any>;
+    onRowClicked?: (rowInfo: DataObject) => void;
+    customRow?: any;
+}

package/lib/AWING/DataGridGroup/interface.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/AWING/DateAutoFormat/index.d.ts

@@ -0,0 +1,10 @@
+import { FieldDefinition } from "../DataForm";
+import { DataObject } from "../../AWING";
+export interface DateAutoFormatProps<T extends DataObject> {
+    fieldDef: FieldDefinition<T>;
+    fieldValue?: any;
+    onChange: (date: any) => void;
+    error?: boolean;
+}
+export declare function DateAutoFormat<T extends DataObject>(props: DateAutoFormatProps<T>): import("react/jsx-runtime").JSX.Element;
+export default DateAutoFormat;

package/lib/AWING/DateAutoFormat/index.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DateAutoFormat = DateAutoFormat;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var x_date_pickers_1 = require("@mui/x-date-pickers");
+var AdapterDayjs_1 = require("@mui/x-date-pickers/AdapterDayjs");
+var shortFormat = "DD/MM/YY";
+var longFormat = "DD/MM/YYYY";
+function DateAutoFormat(props) {
+    var fieldDef = props.fieldDef, fieldValue = props.fieldValue, onChange = props.onChange, error = props.error;
+    var fieldDefClone = fieldDef;
+    var _a = (0, react_1.useState)(false), isFocus = _a[0], setIsFocus = _a[1];
+    var _b = (0, react_1.useState)(null), uncontrolValue = _b[0], setUncontrolValue = _b[1];
+    return ((0, jsx_runtime_1.jsx)(x_date_pickers_1.LocalizationProvider, { dateAdapter: AdapterDayjs_1.AdapterDayjs, children: (0, jsx_runtime_1.jsx)(x_date_pickers_1.DatePicker, { value: fieldValue || uncontrolValue || null, onChange: function (date, value) {
+                onChange(date);
+                setUncontrolValue(date);
+            }, reduceAnimations: true, format: isFocus ? shortFormat : longFormat, slotProps: {
+                textField: {
+                    id: fieldDef.fieldName,
+                    fullWidth: true,
+                    required: fieldDef.required,
+                    error: error,
+                    helperText: error ? fieldDef.helperText : "",
+                    style: (fieldDef === null || fieldDef === void 0 ? void 0 : fieldDef.style) || { margin: "8px 0px" },
+                    variant: "standard",
+                    label: fieldDef === null || fieldDef === void 0 ? void 0 : fieldDef.label,
+                    onBlur: function () {
+                        setIsFocus(false);
+                    },
+                    onFocus: function () {
+                        setIsFocus(true);
+                        setTimeout(function () {
+                            var _a;
+                            (_a = document
+                                .getElementById(fieldDef.fieldName)) === null || _a === void 0 ? void 0 : _a.focus();
+                        }, 100);
+                    },
+                },
+            }, disabled: fieldDef.disabled }, fieldDefClone.fieldName) }));
+}
+exports.default = DateAutoFormat;

package/lib/AWING/DateRangePicker/component.d.ts

@@ -0,0 +1,35 @@
+export default DateRangePickerWrapper;
+declare function DateRangePickerWrapper(props: any): import("react/jsx-runtime").JSX.Element;
+declare namespace DateRangePickerWrapper {
+    namespace defaultProps {
+        export let autoFocus: boolean;
+        export let autoFocusEndDate: boolean;
+        export let initialStartDate: null;
+        export let initialEndDate: null;
+        export function callback(): void;
+        export let disabled: boolean;
+        export let renderMonthText: null;
+        export { HORIZONTAL_ORIENTATION as orientation };
+        export let withPortal: boolean;
+        export let initialVisibleMonth: null;
+        export let numberOfMonths: number;
+        export let keepOpenOnDateSelect: boolean;
+        export let isRTL: boolean;
+        export let navPrev: null;
+        export let navNext: null;
+        export function onPrevMonthClick(): void;
+        export function onNextMonthClick(): void;
+        export function onClose(): void;
+        export let renderDayContents: null;
+        export let minimumNights: number;
+        export let enableOutsideDays: boolean;
+        export function isDayBlocked(day: any): boolean;
+        export function isOutsideRange(day: any): boolean;
+        export function isDayHighlighted(): boolean;
+        export let monthFormat: string;
+        export let label: null;
+        export let isShowCalendarInfo: boolean;
+        export function handleValid(): void;
+        export function handleDateRangePopover(): void;
+    }
+}

package/lib/AWING/DateRangePicker/component.js

@@ -0,0 +1,401 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __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 });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = __importStar(require("react"));
+// import momentPropTypes from "react-moment-proptypes";
+var react_dates_1 = require("react-dates");
+var constants_1 = require("react-dates/constants");
+var react_i18next_1 = require("react-i18next");
+require("react-dates/initialize");
+require("react-dates/lib/css/_datepicker.css");
+var material_1 = require("@mui/material");
+var icons_material_1 = require("@mui/icons-material");
+var react_input_mask_1 = __importDefault(require("react-input-mask"));
+var styles_1 = require("@mui/styles");
+var configDate_1 = __importDefault(require("./configDate"));
+var i18n_1 = __importDefault(require("../../i18n"));
+var languageMap = {
+    "tha": "th",
+    "jpn": "ja",
+    "phl": "tl-ph",
+};
+var moment = require('moment');
+require('moment/locale/vi');
+var omit = require('lodash/omit');
+var useStyles = (0, styles_1.makeStyles)({
+    CustomDateRangePicker_panel: {
+        // width: 250px;
+        display: 'flex',
+        boxSizing: 'border-box',
+        flexDirection: 'column',
+        padding: '0 8px 11px 22px',
+        marginTop: '18px',
+    },
+    CustomDateRangePicker_button: {
+        border: '1px solid',
+        cursor: 'pointer',
+        userSelect: 'none',
+        backgroundColor: 'rgb(255, 255, 255)',
+        color: 'rgb(117, 117, 117)',
+        borderWidth: '1px',
+        borderStyle: 'solid',
+        borderColor: 'rgb(228, 231, 231)',
+        borderImage: 'initial',
+        borderRadius: '3px',
+        padding: '6px',
+        marginBottom: '13px',
+        '&:active': {
+            outline: 'none',
+            borderColor: '#ed1d25',
+        },
+        '&:focus': {
+            outline: '0',
+        },
+    },
+    CustomDateRangePicker_button__selected: {
+        color: 'rgb(255, 255, 255)',
+        background: '#ed1d25',
+    },
+    CustomPickerSelected: {
+        '& .CalendarDay__selected_span': {
+            background: 'rgb(240, 74, 80) !important',
+            border: '1px double rgb(240, 74, 80) !important',
+            color: 'rgb(255, 255, 255) !important',
+        },
+        '& .CalendarDay__selected': {
+            background: 'rgb(237, 29, 37) !important',
+            border: '1px double rgb(237, 29, 37) !important',
+            color: 'rgb(255, 255, 255)!important',
+        },
+        '& .CalendarDay__selected:hover': {
+            background: 'rgb(237, 29, 37) !important',
+            color: '#ffffff',
+        },
+        '& .CalendarDay__hovered_span:hover,.CalendarDay__hovered_span': {
+            background: 'rgb(240, 74, 80) !important',
+            border: '1px double rgb(240, 74, 80) !important',
+            color: '#ffffff',
+        },
+    },
+});
+var defaultProps = {
+    autoFocus: false,
+    autoFocusEndDate: false,
+    initialStartDate: null,
+    initialEndDate: null,
+    callback: function () { },
+    disabled: false,
+    renderMonthText: null,
+    orientation: constants_1.HORIZONTAL_ORIENTATION,
+    withPortal: false,
+    initialVisibleMonth: null,
+    numberOfMonths: 2,
+    keepOpenOnDateSelect: false,
+    isRTL: false,
+    navPrev: null,
+    navNext: null,
+    onPrevMonthClick: function () { },
+    onNextMonthClick: function () { },
+    onClose: function () { },
+    // day presentation and interaction related props
+    renderDayContents: null,
+    minimumNights: 0,
+    enableOutsideDays: false,
+    isDayBlocked: function (day) { return false; },
+    isOutsideRange: function (day) { return false; },
+    isDayHighlighted: function () { return false; },
+    // internationalization
+    monthFormat: 'MMMM YYYY',
+    label: null,
+    isShowCalendarInfo: false,
+    handleValid: function () { },
+    handleDateRangePopover: function () { },
+};
+var DateRangePickerWrapper = function (props) {
+    var classes = useStyles();
+    var value = props.value, error = props.error, helperText = props.helperText, _a = props.autoFocus, autoFocus = _a === void 0 ? false : _a, _b = props.autoFocusEndDate, autoFocusEndDate = _b === void 0 ? false : _b, _c = props.initialStartDate, initialStartDate = _c === void 0 ? null : _c, _d = props.initialEndDate, initialEndDate = _d === void 0 ? null : _d, _e = props.callback, callback = _e === void 0 ? function () { } : _e, _f = props.label, label = _f === void 0 ? null : _f, _g = props.isShowCalendarInfo, isShowCalendarInfo = _g === void 0 ? false : _g, variant = props.variant, openDirection = props.openDirection, _h = props.isDayBlocked, isDayBlocked = _h === void 0 ? function (day) { return false; } : _h, _j = props.handleValid, handleValid = _j === void 0 ? function () { } : _j, _k = props.handleDateRangePopover, handleDateRangePopover = _k === void 0 ? function () { } : _k, disableHelperText = props.disableHelperText, _l = props.isFutureDate, isFutureDate = _l === void 0 ? false : _l, _m = props.required, required = _m === void 0 ? false : _m;
+    var initialFocusedInput = null;
+    if (autoFocus) {
+        initialFocusedInput = constants_1.START_DATE;
+    }
+    else if (autoFocusEndDate) {
+        initialFocusedInput = constants_1.END_DATE;
+    }
+    var _o = (0, react_1.useState)(initialFocusedInput), focusedInput = _o[0], setFocusedInput = _o[1];
+    var _p = (0, react_1.useState)(initialStartDate), startDate = _p[0], setStartDate = _p[1];
+    var _q = (0, react_1.useState)(initialEndDate), endDate = _q[0], setEndDate = _q[1];
+    var _r = (0, react_1.useState)(true), isValid = _r[0], setIsValid = _r[1];
+    var _s = (0, react_1.useState)("".concat(moment(value ? value === null || value === void 0 ? void 0 : value.startDate : startDate).format('DD/MM/YYYY'), " - ").concat(moment(value ? value === null || value === void 0 ? void 0 : value.endDate : endDate).format('DD/MM/YYYY'))), inputValue = _s[0], setInputValue = _s[1];
+    var _t = (0, react_i18next_1.useTranslation)(undefined, { i18n: i18n_1.default }), i18n = _t.i18n, t = _t.t;
+    var momentLanguage = (0, react_1.useMemo)(function () { var _a, _b; return ((_b = (_a = i18n === null || i18n === void 0 ? void 0 : i18n.language) === null || _a === void 0 ? void 0 : _a.split('-')) === null || _b === void 0 ? void 0 : _b[0]) || 'en'; }, [i18n.language]);
+    (0, react_1.useEffect)(function () {
+        if (value !== undefined) {
+            var inputUpdate = "".concat(moment(value ? value === null || value === void 0 ? void 0 : value.startDate : startDate).format('DD/MM/YYYY'), " - ").concat(moment(value ? value === null || value === void 0 ? void 0 : value.endDate : endDate).format('DD/MM/YYYY'));
+            if (inputUpdate != inputValue) {
+                setInputValue(inputUpdate);
+                var momentStartDate = moment(value ? value === null || value === void 0 ? void 0 : value.startDate : startDate, 'DD/MM/YYYY', true);
+                var momentEndDate = moment(value ? value === null || value === void 0 ? void 0 : value.endDate : endDate, 'DD/MM/YYYY', true);
+                if (momentStartDate.isValid() &&
+                    momentEndDate.isValid() &&
+                    momentEndDate.diff(momentStartDate) >= 0) {
+                    setIsValid(true);
+                }
+                else
+                    setIsValid(false);
+            }
+        }
+    }, [value]);
+    (0, react_1.useEffect)(function () {
+        var lang = languageMap[momentLanguage] || momentLanguage;
+        if (lang !== 'en') {
+            try {
+                Promise.resolve("".concat("moment/locale/".concat(lang))).then(function (s) { return __importStar(require(s)); }).then(function () {
+                    moment.locale(lang);
+                })
+                    .catch(function (error) {
+                    console.warn(error);
+                });
+            }
+            catch (error) {
+                moment.locale('en');
+            }
+        }
+        else {
+            moment.locale(lang);
+        }
+        if ((value ? value === null || value === void 0 ? void 0 : value.startDate : startDate) !== null &&
+            moment(value ? value === null || value === void 0 ? void 0 : value.startDate : startDate).locale() !==
+                lang) {
+            setStartDate(moment(value ? value === null || value === void 0 ? void 0 : value.startDate : startDate).locale(lang));
+        }
+    }, [momentLanguage, i18n.language, value ? value === null || value === void 0 ? void 0 : value.startDate : startDate]);
+    (0, react_1.useEffect)(function () {
+        handleValid(isValid);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isValid]);
+    var onDatesChange = function (_a) {
+        var startDate = _a.startDate, endDate = _a.endDate;
+        setStartDate(startDate);
+        setEndDate(endDate);
+        if (startDate && moment.isMoment(startDate)) {
+            startDate.set({ hour: 0, minute: 0, second: 0, millisecond: 0 });
+        }
+        if (endDate && moment.isMoment(endDate)) {
+            endDate.set({ hour: 0, minute: 0, second: 0, millisecond: 0 });
+        }
+        callback({
+            startDate: startDate,
+            endDate: endDate,
+        });
+        var momentStartDate = moment(startDate, 'DD/MM/YYYY', true);
+        var momentEndDate = moment(endDate, 'DD/MM/YYYY', true);
+        if (momentStartDate.isValid() &&
+            momentEndDate.isValid() &&
+            momentEndDate.diff(momentStartDate) >= 0) {
+            setIsValid(true);
+        }
+        else
+            setIsValid(false);
+        setInputValue("".concat(moment(startDate).format('DD/MM/YYYY'), " - ").concat(moment(endDate).format('DD/MM/YYYY')));
+    };
+    var onFocusChange = function (focusedInput) {
+        setFocusedInput(!focusedInput ? constants_1.START_DATE : focusedInput);
+    };
+    var controlButtonClick = function (daterange) {
+        onDatesChange(daterange);
+        // setFocusedInput(null);
+    };
+    var getDataSet = function (moment) {
+        return moment.set({
+            hour: 0,
+            minute: 0,
+            second: 0,
+            millisecond: 0,
+        });
+    };
+    var resetDate = function () {
+        setStartDate(initialStartDate);
+        setEndDate(initialEndDate);
+        setInputValue("".concat(moment(initialStartDate).format('DD/MM/YYYY'), " - ").concat(moment(initialEndDate).format('DD/MM/YYYY')));
+        callback({
+            startDate: getDataSet(moment(initialStartDate, 'DD/MM/YYYY')),
+            endDate: getDataSet(moment(initialEndDate, 'DD/MM/YYYY')),
+        });
+    };
+    var handleChangeInput = function (e) {
+        var fieldValue = e.target.value;
+        setInputValue(fieldValue);
+        var fieldValueArr = (fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue.split(' - ')) || [];
+        var year1900 = moment('1900-01-01');
+        var momentStartDate = moment(fieldValueArr[0], 'DD/MM/YYYY');
+        var momentEndDate = moment(fieldValueArr[1], 'DD/MM/YYYY');
+        if (isDayBlocked && isDayBlocked(momentStartDate)) {
+            setIsValid(true);
+            resetDate();
+            return;
+        }
+        if (isDayBlocked && isDayBlocked(momentEndDate)) {
+            setIsValid(true);
+            resetDate();
+            return;
+        }
+        if (momentStartDate.isValid() && momentStartDate.diff(year1900) >= 0) {
+            setStartDate(momentStartDate);
+        }
+        if (momentEndDate.isValid() && momentEndDate.diff(year1900) >= 0) {
+            setEndDate(momentEndDate);
+        }
+        if (moment(fieldValueArr[0], 'DD/MM/YYYY', true).isValid() &&
+            moment(fieldValueArr[1], 'DD/MM/YYYY', true).isValid() &&
+            momentEndDate.diff(momentStartDate) >= 0) {
+            setIsValid(true);
+            callback({
+                startDate: getDataSet(momentStartDate),
+                endDate: getDataSet(momentEndDate),
+            });
+        }
+        else
+            setIsValid(false);
+    };
+    var nextProps = __assign({}, props);
+    var presets = (0, configDate_1.default)(isFutureDate).map(function (item) { return (item.text = i18n.t(item.text), item); });
+    var renderDatePresets = function () {
+        return ((0, jsx_runtime_1.jsx)("div", { className: classes.CustomDateRangePicker_panel, children: presets.map(function (_a) {
+                var text = _a.text, start = _a.start, end = _a.end;
+                var isSelected = (0, react_dates_1.isSameDay)(start, value ? value === null || value === void 0 ? void 0 : value.startDate : startDate) && (0, react_dates_1.isSameDay)(end, value ? value === null || value === void 0 ? void 0 : value.endDate : endDate);
+                return ((0, jsx_runtime_1.jsx)("button", { className: "".concat(classes.CustomDateRangePicker_button, " ").concat(isSelected
+                        ? classes.CustomDateRangePicker_button__selected
+                        : ''), type: "button", onClick: function () {
+                        return controlButtonClick({
+                            startDate: start,
+                            endDate: end,
+                        });
+                    }, children: text }, text));
+            }) }));
+    };
+    nextProps = omit(nextProps, [
+        'helperText',
+        'disableHelperText',
+        'value',
+        'autoFocus',
+        'autoFocusEndDate',
+        'initialStartDate',
+        'initialEndDate',
+        'presets',
+        'callback',
+        'label',
+        'error',
+        'isShowCalendarInfo',
+        'isValid',
+        'variant',
+        'textFieldProps',
+        'startDatePlaceholderText',
+        'endDatePlaceholderText',
+        'openDirection',
+        'startDateId',
+        'endDateId',
+        'anchorDirection',
+        'verticalSpacing',
+        'className',
+        'isDayBlocked',
+        'handleValid',
+        'handleDateRangePopover',
+        'required',
+    ]);
+    var _u = react_1.default.useState(null), anchorElPopover = _u[0], setAnchorElPopover = _u[1];
+    var openPopper = Boolean(anchorElPopover);
+    var id = openPopper ? 'datePicker-popper' : undefined;
+    var popperRef = react_1.default.useRef();
+    var inputRef = react_1.default.useRef();
+    var handleClickInput = function (event) {
+        handleDateRangePopover(event.currentTarget);
+        setAnchorElPopover(anchorElPopover ? null : event.currentTarget);
+        setFocusedInput(!focusedInput ? constants_1.START_DATE : focusedInput);
+        setTimeout(function () {
+            if (popperRef.current) {
+                popperRef.current.update();
+            }
+        }, 250);
+    };
+    var handleClosePopover = function () {
+        setAnchorElPopover(null);
+        handleDateRangePopover(null);
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_input_mask_1.default, { mask: "99/99/9999 - 99/99/9999", maskplaceholder: "dd/mm/yyyy - dd/mm/yyyy", value: inputValue, onChange: handleChangeInput, disabled: props.disabled, children: function () {
+                    var _a;
+                    return ((0, jsx_runtime_1.jsx)(material_1.TextField, __assign({ required: required, "aria-describedby": id, variant: variant, label: label, error: !isValid || error, helperText: !disableHelperText
+                            ? error
+                                ? helperText || t('Common.InvalidData')
+                                : !isValid
+                                    ? t('DatePicker.InvalidDateRange')
+                                    : ''
+                            : '' }, omit(props.textFieldProps, ['readOnly']), { inputProps: {
+                            readOnly: (_a = props.textFieldProps) === null || _a === void 0 ? void 0 : _a.readOnly,
+                        }, disabled: props.disabled, onClick: function (e) {
+                            var _a;
+                            !((_a = props.textFieldProps) === null || _a === void 0 ? void 0 : _a.readOnly) &&
+                                handleClickInput(e);
+                        }, inputRef: inputRef, InputProps: {
+                            endAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, { position: "end", children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { children: (0, jsx_runtime_1.jsx)(icons_material_1.CalendarTodaySharp, {}) }) })),
+                        } })));
+                } }), (0, jsx_runtime_1.jsx)(material_1.Popper, { id: id, open: openPopper, anchorEl: anchorElPopover, onClose: handleClosePopover, style: { zIndex: 30000 }, placement: openDirection === 'up' ? 'top-start' : 'bottom-start', popperRef: popperRef, children: (0, jsx_runtime_1.jsx)(material_1.ClickAwayListener, { onClickAway: handleClosePopover, children: (0, jsx_runtime_1.jsx)(material_1.Paper, { elevation: 8, className: classes.CustomPickerSelected, children: (0, jsx_runtime_1.jsx)(react_dates_1.DayPickerRangeController, __assign({}, nextProps, { calendarInfoPosition: "before", renderCalendarInfo: isShowCalendarInfo ? renderDatePresets : null, onDatesChange: onDatesChange, onFocusChange: onFocusChange, focusedInput: focusedInput, startDate: value ? value === null || value === void 0 ? void 0 : value.startDate : startDate, endDate: value ? value === null || value === void 0 ? void 0 : value.endDate : endDate, hideKeyboardShortcutsPanel: true, numberOfMonths: 2, daySize: 32, transitionDuration: 0, isDayBlocked: function (day) {
+                                if (value ? value === null || value === void 0 ? void 0 : value.startDate : startDate) {
+                                    if (isDayBlocked(value ? value === null || value === void 0 ? void 0 : value.startDate : startDate))
+                                        setIsValid(false);
+                                }
+                                if (value ? value === null || value === void 0 ? void 0 : value.startDate : startDate) {
+                                    if (isDayBlocked(value ? value === null || value === void 0 ? void 0 : value.startDate : startDate))
+                                        setIsValid(false);
+                                }
+                                return isDayBlocked(day);
+                            } })) }) }) })] }));
+};
+DateRangePickerWrapper.defaultProps = __assign({}, defaultProps);
+exports.default = DateRangePickerWrapper;

package/lib/AWING/DateRangePicker/configDate.d.ts

@@ -0,0 +1,7 @@
+import moment from 'moment';
+declare const configInitialDate: (isFutureDate: boolean) => {
+    text: string;
+    start: moment.Moment;
+    end: moment.Moment;
+}[];
+export default configInitialDate;