awing-library 2.1.20 → 2.1.21

package/lib/ACM-AXN/Template/Types.d.ts

@@ -0,0 +1,84 @@
+import { DirectoryRoot } from '../../ACM-AXN/Campaign/Enum';
+import { Directory } from '../../ACM-AXN/Campaign/Types';
+import { IDirectory } from '../../ACM-AXN/Directory/interface';
+import { FileParameter, PhysicalFolder, Template } from '../../ACM-AXN/Page/Types';
+import { PageCode } from '../../ACM-AXN/Page/enums';
+import { FileResponse } from '../../Commons/Types';
+export interface ITemplateType {
+    id?: number;
+    name?: string;
+    templateTypeCode?: string;
+}
+export interface ITemplateParameter {
+    id?: string;
+    templateId?: string;
+    fieldName?: string;
+    fieldType?: string;
+    defaultValue?: string;
+    labelName?: string;
+    isRequired?: boolean;
+    childrens?: ITemplateParameter[];
+    isAdvanced?: boolean;
+}
+export interface ITemplateEvent {
+    id?: number;
+    templateId?: string;
+    event?: string;
+}
+export interface ITemplateModel {
+    template: ITemplate;
+    templateParameters: ITemplateParameter[];
+    templateEvents: ITemplateEvent[];
+}
+export interface ITemplate {
+    id?: string;
+    directoryId?: string;
+    directoryPath?: string;
+    name?: string;
+    templateHtml?: string;
+    layoutId?: string;
+    pageCode?: string;
+    description?: string;
+    templateTypeId?: number;
+    validation?: string;
+    autoField?: string;
+    isDeprecated?: boolean;
+}
+export interface ITemplatesPaging {
+    templates?: ITemplate[];
+    total?: number;
+}
+export interface ITemplateFileService {
+    templatesGetDirectories: () => Promise<Directory[]>;
+    templateTypesGet: () => Promise<ITemplateType[]>;
+    templatesGetByDirectoryId: (directoryId: string) => Promise<Template[]>;
+    templatesGet: ITemplateService['templatesGet'];
+    pageFilesCreateCreateUpload: (parentDirectoryId: string, code: PageCode, objectId: string, path: string, files: FileParameter[]) => Promise<void>;
+    pageFilesUpdateUpload: (code: PageCode, objectId: string, path: string, files: FileParameter[]) => Promise<void>;
+    pagesGenerateId: () => Promise<string>;
+    pageFilesUpdateGetTreeFolder: (code: PageCode, objectId: string) => Promise<PhysicalFolder>;
+    pageFilesCreateGetTreeFolder: (parentDirectoryId: string, code: PageCode, objectId: string) => Promise<PhysicalFolder>;
+    pageFilesCreateDownload: (parentDirectoryId: string, code: PageCode, objectId: string, pathFile: string) => Promise<FileResponse>;
+    pageFilesUpdateDownload: (code: PageCode, objectId: string, pathFile: string) => Promise<FileResponse>;
+    pageFilesUpdateDownloadFolder: (code: PageCode, objectId: string, path: string) => Promise<FileResponse>;
+    pageFilesCreateDownloadFolder: (parentDirectoryId: string, code: PageCode, objectId: string, path: string) => Promise<FileResponse>;
+    pageFilesCreateCreateFolder: (parentDirectoryId: string, code: PageCode, objectId: string, path: string, name: string) => Promise<void>;
+    pageFilesUpdateCreateFolder: (code: PageCode, objectId: string, path: string, name: string) => Promise<void>;
+    pageFilesCreateDelete: (parentDirectoryId: string, code: PageCode, objectId: string, path: string) => Promise<void>;
+    pageFilesUpdateDelete: (code: PageCode, objectId: string, path: string) => Promise<void>;
+}
+export interface ITemplateService extends ITemplateFileService {
+    templatesPaging: (searchString: string | undefined, pageSize: number | undefined, pageIndexc: number | undefined) => Promise<ITemplatesPaging>;
+    templatesExport(id: string | undefined): Promise<FileResponse>;
+    templatesDelete(id: string): Promise<void>;
+    directoriesGetByObjectTypeCode(objectTypeCode: DirectoryRoot): Promise<IDirectory[]>;
+    templatesImport(newDirectoryId: string | undefined, id: string | undefined, name: string | undefined, file: FileParameter | undefined): Promise<void>;
+    templateTypesGet(): Promise<ITemplateType[]>;
+    templatesGet(id: string): Promise<ITemplateModel>;
+    directoriesGenerateId(): Promise<string>;
+    templatesPut(id: string, body: ITemplateModel): Promise<void>;
+    templatesPost(body: ITemplateModel): Promise<void>;
+}
+export interface TemplateProps {
+    service: ITemplateService;
+}

package/lib/ACM-AXN/Template/Types.js

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

package/lib/ACM-AXN/Template/UploadButton.d.ts

@@ -0,0 +1,2 @@
+declare const UploadButton: () => import("react/jsx-runtime").JSX.Element;
+export default UploadButton;

package/lib/ACM-AXN/Template/UploadButton.js

@@ -0,0 +1,14 @@
+"use strict";
+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 CloudUpload_1 = __importDefault(require("@mui/icons-material/CloudUpload"));
+var material_1 = require("@mui/material");
+var react_i18next_1 = require("react-i18next");
+var UploadButton = function () {
+    var t = (0, react_i18next_1.useTranslation)().t;
+    return ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: t('Common.Upload'), children: (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "outlined", style: { marginTop: '16px' }, children: (0, jsx_runtime_1.jsx)(CloudUpload_1.default, {}) }) }));
+};
+exports.default = UploadButton;

package/lib/ACM-AXN/Template/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { TemplateProps } from './Types';
+export declare const TemplateFeature: React.FC<TemplateProps>;
+export * from './Types';
+export default TemplateFeature;

package/lib/ACM-AXN/Template/index.js

@@ -0,0 +1,44 @@
+"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 __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.TemplateFeature = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var Container_1 = __importDefault(require("./Container"));
+var Router_1 = require("../../AWING/Router");
+var react_1 = require("react");
+var Import_1 = __importDefault(require("./Import"));
+var CreateOrEdit_1 = __importDefault(require("./CreateOrEdit"));
+var Constants_1 = require("../../ACM-AXN/GroupUser/Constants");
+var Hooks_1 = require("./Hooks");
+var react_i18next_1 = require("react-i18next");
+var i18n_1 = __importDefault(require("../../i18n"));
+var TemplateFeature = function (props) {
+    var paths = [
+        { param: Constants_1.IMPORT_PATH, element: Import_1.default },
+        { param: Constants_1.CREATE_PATH, element: CreateOrEdit_1.default },
+        {
+            param: Constants_1.EDIT_PATH + '/:templateId',
+            element: CreateOrEdit_1.default,
+        },
+    ];
+    return ((0, jsx_runtime_1.jsx)(react_i18next_1.I18nextProvider, { i18n: i18n_1.default, children: (0, jsx_runtime_1.jsxs)(Hooks_1.templatePropsContext.Provider, { value: props, children: [(0, jsx_runtime_1.jsx)(Container_1.default, {}), (0, jsx_runtime_1.jsx)(Router_1.Routes, { children: paths.map(function (p) { return ((0, jsx_runtime_1.jsx)(Router_1.Route, { path: p.param, element: (0, react_1.createElement)(p.element) }, p.param)); }) })] }) }));
+};
+exports.TemplateFeature = TemplateFeature;
+__exportStar(require("./Types"), exports);
+exports.default = exports.TemplateFeature;

package/lib/ACM-AXN/TransactionLog/Container.js

@@ -33,7 +33,7 @@ function Container() {
     var t = (0, react_i18next_1.useTranslation)().t;
     var service = (0, Hooks_1.default)().service;
     var transactionType = (0, Context_1.useAwing)().transactionType;
-    var _a = (0, react_1.useState)(false), loading = _a[0], setLoading = _a[1];
+    var _a = (0, react_1.useState)(true), loading = _a[0], setLoading = _a[1];
     var _b = (0, react_1.useState)(), transactionLog = _b[0], setTransactionLog = _b[1];
     var _c = (0, react_1.useState)(), users = _c[0], setUsers = _c[1];
     (0, react_1.useEffect)(function () {

package/lib/ACM-AXN/ViewTemplate/index.d.ts

@@ -1,2 +1,3 @@
-export declare function ViewTemplate(props: any): import("react/jsx-runtime").JSX.Element;
+import { ViewTemplateProps } from "./interface";
+export declare function ViewTemplate(props: ViewTemplateProps): import("react/jsx-runtime").JSX.Element;
 export default ViewTemplate;

package/lib/ACM-AXN/ViewTemplate/interface.d.ts

@@ -1,3 +1,4 @@
+import { PageViewEvent } from "../../ACM-AXN/Page/Types";
 export interface Configs {
     TEMPLATE_FILE_PATH?: string;
     FILE_TEMP_PATH?: string;
@@ -48,6 +49,9 @@ export interface FieldProps {
     onNotifyError: (errorMessage: string) => void;
     onUploadFile: (files: any[]) => Promise<string>;
 }
+export interface ViewTemplateEvents extends Omit<PageViewEvent, 'viewNumber'> {
+    protected?: boolean;
+}
 export interface ViewTemplateProps {
     templateDatas: FieldInfo[];
     /**
@@ -90,5 +94,6 @@ export interface ViewTemplateProps {
      * Hiển thị thông báo lỗi
      */
     onNotifyError?: (errorMessage: string) => void;
-    onUploadFile: (files: any[]) => Promise<string>;
+    onUploadFile: (files: any[]) => Promise<any>;
+    viewEvents?: ViewTemplateEvents[];
 }

package/lib/AWING/ButtonSelect/index.js

@@ -59,9 +59,9 @@ var ButtonSelect = function (props) {
     var handleClose = function () {
         setAnchorEl(null);
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(material_1.Button, __assign({ id: "".concat(elementId, "-button-select"), "aria-controls": "".concat(elementId, "-menu"), "aria-haspopup": "true", "aria-expanded": open ? "true" : undefined, onClick: handleClick, endIcon: (0, jsx_runtime_1.jsx)(KeyboardArrowDown_1.default, {}), style: {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, __assign({ id: "".concat(elementId, "-button-select"), "aria-controls": "".concat(elementId, "-menu"), "aria-haspopup": "true", "aria-expanded": open ? "true" : undefined, onClick: handleClick, endIcon: (0, jsx_runtime_1.jsx)(KeyboardArrowDown_1.default, {}), sx: {
                     textTransform: "none",
-                    color: "white",
+                    color: function (theme) { return theme.palette.text.primary; },
                     fontWeight: "normal",
                 } }, other)), (0, jsx_runtime_1.jsx)(material_1.Menu, { id: "".concat(elementId, "-menu"), anchorEl: anchorEl, open: open, onClose: handleClose, MenuListProps: {
                     "aria-labelledby": "".concat(elementId, "-button-select"),

package/lib/AWING/DateRangePicker/component.js

@@ -49,62 +49,63 @@ 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 moment = require("moment");
-require("moment/locale/vi");
-var omit = require("lodash/omit");
+var configDate_1 = __importDefault(require("./configDate"));
+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",
+        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",
+        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",
+        '&:focus': {
+            outline: '0',
         },
     },
     CustomDateRangePicker_button__selected: {
-        color: "rgb(255, 255, 255)",
-        background: "#ed1d25",
+        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_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': {
+            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__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",
+        '& .CalendarDay__hovered_span:hover,.CalendarDay__hovered_span': {
+            background: 'rgb(240, 74, 80) !important',
+            border: '1px double rgb(240, 74, 80) !important',
+            color: '#ffffff',
         },
     },
 });
@@ -135,7 +136,7 @@ var defaultProps = {
     isOutsideRange: function (day) { return false; },
     isDayHighlighted: function () { return false; },
     // internationalization
-    monthFormat: "MMMM YYYY",
+    monthFormat: 'MMMM YYYY',
     label: null,
     isShowCalendarInfo: false,
     handleValid: function () { },
@@ -143,7 +144,7 @@ var defaultProps = {
 };
 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;
+    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;
     var initialFocusedInput = null;
     if (autoFocus) {
         initialFocusedInput = constants_1.START_DATE;
@@ -151,20 +152,20 @@ var DateRangePickerWrapper = function (props) {
     else if (autoFocusEndDate) {
         initialFocusedInput = constants_1.END_DATE;
     }
-    var _l = (0, react_1.useState)(initialFocusedInput), focusedInput = _l[0], setFocusedInput = _l[1];
-    var _m = (0, react_1.useState)(initialStartDate), startDate = _m[0], setStartDate = _m[1];
-    var _o = (0, react_1.useState)(initialEndDate), endDate = _o[0], setEndDate = _o[1];
-    var _p = (0, react_1.useState)(true), isValid = _p[0], setIsValid = _p[1];
-    var _q = (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 = _q[0], setInputValue = _q[1];
-    var _r = (0, react_i18next_1.useTranslation)(), i18n = _r.i18n, t = _r.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]);
+    var _m = (0, react_1.useState)(initialFocusedInput), focusedInput = _m[0], setFocusedInput = _m[1];
+    var _o = (0, react_1.useState)(initialStartDate), startDate = _o[0], setStartDate = _o[1];
+    var _p = (0, react_1.useState)(initialEndDate), endDate = _p[0], setEndDate = _p[1];
+    var _q = (0, react_1.useState)(true), isValid = _q[0], setIsValid = _q[1];
+    var _r = (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 = _r[0], setInputValue = _r[1];
+    var _s = (0, react_i18next_1.useTranslation)(), i18n = _s.i18n, t = _s.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"));
+            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);
+                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) {
@@ -176,7 +177,7 @@ var DateRangePickerWrapper = function (props) {
         }
     }, [value]);
     (0, react_1.useEffect)(function () {
-        if (momentLanguage !== "en") {
+        if (momentLanguage !== 'en') {
             try {
                 Promise.resolve("".concat("moment/locale/".concat(momentLanguage))).then(function (s) { return __importStar(require(s)); }).then(function () {
                     moment.locale(momentLanguage);
@@ -186,7 +187,7 @@ var DateRangePickerWrapper = function (props) {
                 });
             }
             catch (error) {
-                moment.locale("en");
+                moment.locale('en');
             }
         }
         else {
@@ -216,8 +217,8 @@ var DateRangePickerWrapper = function (props) {
             startDate: startDate,
             endDate: endDate,
         });
-        var momentStartDate = moment(startDate, "DD/MM/YYYY", true);
-        var momentEndDate = moment(endDate, "DD/MM/YYYY", true);
+        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) {
@@ -225,7 +226,7 @@ var DateRangePickerWrapper = function (props) {
         }
         else
             setIsValid(false);
-        setInputValue("".concat(moment(startDate).format("DD/MM/YYYY"), " - ").concat(moment(endDate).format("DD/MM/YYYY")));
+        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);
@@ -237,18 +238,18 @@ var DateRangePickerWrapper = function (props) {
     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 fieldValueArr = (fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue.split(' - ')) || [];
+        var year1900 = moment('1900-01-01');
+        var momentStartDate = moment(fieldValueArr[0], 'DD/MM/YYYY');
         if (momentStartDate.isValid() && momentStartDate.diff(year1900) >= 0) {
             setStartDate(momentStartDate);
         }
-        var momentEndDate = moment(fieldValueArr[1], "DD/MM/YYYY");
+        var momentEndDate = moment(fieldValueArr[1], 'DD/MM/YYYY');
         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() &&
+        if (moment(fieldValueArr[0], 'DD/MM/YYYY', true).isValid() &&
+            moment(fieldValueArr[1], 'DD/MM/YYYY', true).isValid() &&
             momentEndDate.diff(momentStartDate) >= 0) {
             momentStartDate.set({
                 hour: 0,
@@ -269,46 +270,14 @@ var DateRangePickerWrapper = function (props) {
             setIsValid(false);
     };
     var nextProps = __assign({}, props);
-    var today = moment();
-    var presets = [
-        {
-            text: t("DatePicker.ToDay"),
-            start: today,
-            end: today,
-        },
-        {
-            text: t("DatePicker.Yesterday"),
-            start: moment().subtract(1, "days"),
-            end: moment().subtract(1, "days"),
-        },
-        {
-            text: t("DatePicker.LastSevenDay"),
-            start: moment().subtract(6, "days"),
-            end: today,
-        },
-        {
-            text: t("DatePicker.LastThirtyDay"),
-            start: moment().subtract(29, "days"),
-            end: today,
-        },
-        {
-            text: t("DatePicker.ThisMonth"),
-            start: moment().startOf("month"),
-            end: moment().endOf("month"),
-        },
-        {
-            text: t("DatePicker.LastMonth"),
-            start: moment().subtract(1, "month").startOf("month"),
-            end: moment().subtract(1, "month").endOf("month"),
-        },
-    ];
+    var presets = (0, configDate_1.default)(t, isFutureDate);
     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 () {
+                        : ''), type: "button", onClick: function () {
                         return controlButtonClick({
                             startDate: start,
                             endDate: end,
@@ -317,36 +286,36 @@ var DateRangePickerWrapper = function (props) {
             }) }));
     };
     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",
+        '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',
     ]);
-    var _s = react_1.default.useState(null), anchorElPopover = _s[0], setAnchorElPopover = _s[1];
+    var _t = react_1.default.useState(null), anchorElPopover = _t[0], setAnchorElPopover = _t[1];
     var openPopper = Boolean(anchorElPopover);
-    var id = openPopper ? "datePicker-popper" : undefined;
+    var id = openPopper ? 'datePicker-popper' : undefined;
     var popperRef = react_1.default.useRef();
     var inputRef = react_1.default.useRef();
     var handleClickInput = function (event) {
@@ -367,11 +336,11 @@ var DateRangePickerWrapper = function (props) {
                     var _a;
                     return ((0, jsx_runtime_1.jsx)(material_1.TextField, __assign({ "aria-describedby": id, variant: variant, label: label, error: !isValid || error, helperText: !disableHelperText
                             ? error
-                                ? helperText || t("Common.InvalidData")
+                                ? helperText || t('Common.InvalidData')
                                 : !isValid
-                                    ? t("DatePicker.InvalidDateRange")
-                                    : ""
-                            : "" }, omit(props.textFieldProps, ["readOnly"]), { inputProps: {
+                                    ? 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;
@@ -380,7 +349,7 @@ var DateRangePickerWrapper = function (props) {
                         }, 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) {
+                } }), (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);

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

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