awing-library 2.1.78-beta → 2.1.78

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

@@ -7,7 +7,45 @@ export interface GridSortModel {
     field: string;
     sort: GridSortDirection;
 }
-export interface DataGridColumnDefinition {
+interface DataGridColumnDefinitionBase {
+    /**
+     * Tên trường
+     */
+    field: string;
+    /**
+     * Nội dung hiển thị ở header
+     */
+    headerName: ReactNode;
+    /**
+     * Nếu bằng true thì sẽ cho phép sort theo trường này
+     */
+    sortable?: boolean;
+    options?: any[];
+    /**
+     * Hàm kiểm tra giá trị điền khi sửa trực tiếp trường này
+     *
+     * @param value Giá trị
+     */
+    checkValid?(value: any): boolean;
+    /**
+     * Kiểu dữ liệu của trường
+     */
+    type?: 'text' | 'number';
+    /**
+     * Cách lấy nội dung hiển thị khác, nếu có
+     *
+     * @param row Một đối tượng trong danh sách hiển thị
+     * @param idx Số thứ tự của đối tượng trong danh sách
+     */
+    valueGetter?(row: any, idx: number, stt: number): ReactNode;
+    /**
+     * Độ rộng của cột
+     */
+    width?: string | number;
+    TableCellProps?: TableCellProps;
+    dynamicTableCellProps?: (row: any) => TableCellProps;
+}
+export interface DataGridColumnDefinition extends DataGridColumnDefinitionBase {
     /**
      * Tên trường
      */
@@ -78,7 +116,7 @@ export interface SelectionActionDefinition {
     /**
      * Hành động thực hiện khi nhấn nút
      */
-    action(): void;
+    action(ids?: Array<string>): void;
     disabled?: boolean;
 }
 export interface DataGridProps {

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);
@@ -234,81 +235,67 @@ var DateRangePickerWrapper = function (props) {
         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 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);
         }
-        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,
-                minute: 0,
-                second: 0,
-                millisecond: 0,
-            });
-            momentEndDate.set({
-                hour: 0,
-                minute: 0,
-                second: 0,
-                millisecond: 0,
-            });
-            callback({ startDate: momentStartDate, endDate: momentEndDate });
             setIsValid(true);
+            callback({
+                startDate: getDataSet(momentStartDate),
+                endDate: getDataSet(momentEndDate),
+            });
         }
         else
             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 +304,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 +354,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 +367,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;

package/lib/AWING/DateRangePicker/configDate.js

@@ -0,0 +1,71 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var moment_1 = __importDefault(require("moment"));
+var configInitialDate = function (t, isFutureDate) {
+    var today = (0, moment_1.default)();
+    var initDatePast = [
+        {
+            text: t('DatePicker.ToDay'),
+            start: today,
+            end: today,
+        },
+        {
+            text: t('DatePicker.Yesterday'),
+            start: (0, moment_1.default)().subtract(1, 'days'),
+            end: (0, moment_1.default)().subtract(1, 'days'),
+        },
+        {
+            text: t('DatePicker.LastSevenDay'),
+            start: (0, moment_1.default)().subtract(6, 'days'),
+            end: today,
+        },
+        {
+            text: t('DatePicker.LastThirtyDay'),
+            start: (0, moment_1.default)().subtract(29, 'days'),
+            end: today,
+        },
+        {
+            text: t('DatePicker.ThisMonth'),
+            start: (0, moment_1.default)().startOf('month'),
+            end: (0, moment_1.default)().endOf('month'),
+        },
+        {
+            text: t('DatePicker.LastMonth'),
+            start: (0, moment_1.default)().subtract(1, 'month').startOf('month'),
+            end: (0, moment_1.default)().subtract(1, 'month').endOf('month'),
+        },
+    ];
+    var initDateFuture = [
+        {
+            text: t('DatePicker.ToDay'),
+            start: today,
+            end: today,
+        },
+        {
+            text: t('DatePicker.Tomorrow'),
+            start: (0, moment_1.default)(),
+            end: (0, moment_1.default)().add(1, 'days'),
+        },
+        {
+            text: t('DatePicker.NextSevenDay'),
+            start: today,
+            end: (0, moment_1.default)().add(6, 'days'),
+        },
+        {
+            text: t('DatePicker.NextThirtyDay'),
+            start: today,
+            end: (0, moment_1.default)().add(29, 'days'),
+        },
+        {
+            text: t('DatePicker.NextMonth'),
+            start: (0, moment_1.default)().add(1, 'month').startOf('month'),
+            end: (0, moment_1.default)().add(1, 'month').endOf('month'),
+        },
+    ];
+    var initDate = isFutureDate ? initDateFuture : initDatePast;
+    return initDate;
+};
+exports.default = configInitialDate;

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

@@ -11,6 +11,7 @@ export interface DateRangePickerProps {
     }) => void;
     label?: string;
     isShowCalendarInfo?: boolean;
+    isFutureDate?: boolean;
     variant?: string;
     className?: any;
     value?: {

package/lib/AWING/Directory/CreateDirectory.js

@@ -75,12 +75,12 @@ var CreateDirectory = function (props) {
             .directoriesPost(newDirectory)
             .then(function () { return ClassicDrawer_1.CloseAction.ReloadDirectory; });
     };
-    return ((0, jsx_runtime_1.jsx)(ClassicDrawer_1.default, { title: t('DirectoryManagement.CreateDirectory'), onSubmit: handleSubmit, disableButtonSubmit: !isValid, confirmExit: confirmExit, childrenWrapperStyle: { padding: 0 }, children: loading ? ((0, jsx_runtime_1.jsx)(AWING_1.CircularProgress, {})) : ((0, jsx_runtime_1.jsx)(AWING_1.DataForm, { onUpdate: handleUpdate, fields: [
+    return ((0, jsx_runtime_1.jsx)(ClassicDrawer_1.default, { title: t('DirectoryManagement.CreateDirectory'), onSubmit: handleSubmit, disableButtonSubmit: !(isValid && newDirectory.order && newDirectory.name), confirmExit: confirmExit, childrenWrapperStyle: { padding: 0 }, children: loading ? ((0, jsx_runtime_1.jsx)(AWING_1.CircularProgress, {})) : ((0, jsx_runtime_1.jsx)(AWING_1.DataForm, { onUpdate: handleUpdate, fields: [
                 {
                     fieldName: 'parentDirectoryId',
                     type: 'select',
-                    label: t('DirectoryManagement.ParentDirectory'),
                     required: true,
+                    label: t('DirectoryManagement.ParentDirectory'),
                     options: directories.map(function (directory) { return ({
                         value: directory.directoryId,
                         text: directory.name,

package/lib/AWING/Form/Utils/Types.d.ts

@@ -1 +1,5 @@
 export type FieldValues = Record<string, any>;
+export type FieldOptions = {
+    required: boolean;
+    onValidate: (value: any) => boolean;
+};

package/lib/AWING/Form/useForm.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { FieldOptions } from './Utils/Types';
 export declare const useForm: (props: {
     defaultValue: Record<string, any>;
 }) => {
@@ -9,9 +10,7 @@ export declare const useForm: (props: {
         watch: boolean;
     };
     formValue: Record<string, any>;
-    register: (fieldPath: string, options?: {
-        required: boolean;
-    }) => {
+    register: (fieldPath: string, options?: FieldOptions) => {
         required: boolean | undefined;
         name: string;
         value: any;

package/lib/AWING/Form/useForm.js

@@ -53,7 +53,8 @@ var useForm = function (props) {
     var _updateFieldArray = function (name, value) {
         (0, set_1.default)(_formControl.current, name, value);
     };
-    var getValues = function (fieldNames) {
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    var getValues = react_1.default.useCallback(function (fieldNames) {
         var data = (0, convertToArrayPayload_1.default)(fieldNames).map(function (fieldName) {
             return (0, cloneProxy_1.default)((0, get_1.default)(_formControl.current, fieldName));
         });
@@ -61,16 +62,17 @@ var useForm = function (props) {
             return data;
         if (data.length && data.length === 1)
             return data[0];
-    };
+    }, []);
     var register = function (fieldPath, options) {
         var isRequired = options === null || options === void 0 ? void 0 : options.required;
+        var onValidate = options === null || options === void 0 ? void 0 : options.onValidate;
         return {
             required: isRequired,
             name: fieldPath,
             value: getValues(fieldPath),
             onBlur: function (e) {
-                if (isRequired) {
-                    if (!getValues(fieldPath)) {
+                if (isRequired || onValidate) {
+                    if (!getValues(fieldPath) || (onValidate && !onValidate(getValues(fieldPath)))) {
                         _formError.current.push(fieldPath);
                     }
                     else {