awing-library 2.1.145-beta → 2.1.145

package/lib/AWING/DataForm/DataInput.js

@@ -10,6 +10,29 @@ var __assign = (this && this.__assign) || function () {
     };
     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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __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)
@@ -28,7 +51,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = require("react");
 var jsx_runtime_1 = require("react/jsx-runtime");
 // @ts-nocheck
-var react_2 = __importDefault(require("react"));
+var react_2 = __importStar(require("react"));
 var moment_1 = __importDefault(require("moment"));
 var react_i18next_1 = require("react-i18next");
 var material_1 = require("@mui/material");
@@ -41,16 +64,25 @@ var AsyncAutocomplete_1 = __importDefault(require("../../AWING/AsyncAutocomplete
 var LogicExpression_1 = __importDefault(require("../../AWING/LogicExpression"));
 var GeoFencing_1 = __importDefault(require("../../ACM-AXN/GeoFencing"));
 var i18n_1 = __importDefault(require("../../i18n"));
+var icons_material_1 = require("@mui/icons-material");
 var omit = require('lodash/omit');
 function DataInput(props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
     var t = (0, react_i18next_1.useTranslation)(undefined, { i18n: i18n_1.default }).t;
     var fieldDefinition = props.fieldDefinition, onChange = props.onChange, value = props.value, error = props.error, disableHelperText = props.disableHelperText;
     var fieldName = fieldDefinition.fieldName, type = fieldDefinition.type, onValidate = fieldDefinition.onValidate, min = fieldDefinition.min, max = fieldDefinition.max, pattern = fieldDefinition.pattern, other = __rest(fieldDefinition, ["fieldName", "type", "onValidate", "min", "max", "pattern"]);
-    var _k = react_2.default.useState(t('Common.InvalidData')), errorText = _k[0], setErrorText = _k[1];
+    var _o = react_2.default.useState(t('Common.InvalidData')), errorText = _o[0], setErrorText = _o[1];
+    var _p = react_2.default.useState(type === 'number' ? value : ''), numberValue = _p[0], setNumberValue = _p[1];
+    var _q = react_2.default.useState(false), showPassword = _q[0], setShowPassword = _q[1];
+    var handleClickShowPassword = function () {
+        setShowPassword(!showPassword);
+    };
     var checkValidationValue = function (fieldDefinition, val) {
         if (!fieldDefinition.required &&
-            (val === undefined || val === null || val === '' || (Array.isArray(val) && val.length === 0)))
+            (val === undefined ||
+                val === null ||
+                val === '' ||
+                (Array.isArray(val) && val.length === 0)))
             return true;
         if (fieldDefinition.onValidate)
             return fieldDefinition.onValidate(val, fieldDefinition === null || fieldDefinition === void 0 ? void 0 : fieldDefinition.length, fieldDefinition === null || fieldDefinition === void 0 ? void 0 : fieldDefinition.pattern);
@@ -94,6 +126,18 @@ function DataInput(props) {
                 return (0, validation_1.notNullValid)(val);
         }
     };
+    (0, react_2.useEffect)(function () {
+        if (type === 'number' && Number(value) !== Number(numberValue))
+            setNumberValue(Number(value));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [type, value]);
+    var handleParamValueChange = function () {
+        var newValue = Number(numberValue);
+        setNumberValue(newValue);
+        if (type === 'number' && Number(value) !== newValue) {
+            onChange(newValue, checkValidationValue(fieldDefinition, newValue));
+        }
+    };
     switch (type) {
         case 'logic-expression': {
             return ((0, jsx_runtime_1.jsx)(LogicExpression_1.default, __assign({ cf: function (newValue, valid) {
@@ -108,6 +152,7 @@ function DataInput(props) {
                         : '' }) }));
         }
         case 'autocomplete': {
+            var autocompleteValue_1 = (_b = fieldDefinition.value) !== null && _b !== void 0 ? _b : value;
             return ((0, jsx_runtime_1.jsx)(material_1.Autocomplete, { multiple: fieldDefinition.multiple, options: fieldDefinition.options, getOptionLabel: function (option) { var _a, _b; return (_b = (_a = option.label) !== null && _a !== void 0 ? _a : option.text) !== null && _b !== void 0 ? _b : ''; }, isOptionEqualToValue: function (option, value) {
                     return (option === null || option === void 0 ? void 0 : option.value) === (value === null || value === void 0 ? void 0 : value.value);
                 }, getOptionKey: function (option) { return option.value; }, disableclearable: fieldDefinition.disableClearable, getOptionDisabled: function (option) { return option === null || option === void 0 ? void 0 : option.disabled; }, onChange: function (e, value) {
@@ -117,9 +162,11 @@ function DataInput(props) {
                     onChange(newValue, checkValidationValue(fieldDefinition, newValue));
                 }, value: fieldDefinition.multiple
                     ? fieldDefinition.options.filter(function (x) {
-                        return (value !== null && value !== void 0 ? value : []).includes(x.value);
+                        return (autocompleteValue_1 !== null && autocompleteValue_1 !== void 0 ? autocompleteValue_1 : []).includes(x.value);
                     })
-                    : fieldDefinition.options.find(function (x) { return x.value === value; }) || null, clearOnEscape: true, fullWidth: true, disableCloseOnSelect: fieldDefinition.multiple, readOnly: fieldDefinition.readOnly, renderInput: function (params) {
+                    : (_c = fieldDefinition.options.find(function (x) {
+                        return x.value === autocompleteValue_1;
+                    })) !== null && _c !== void 0 ? _c : '', clearOnEscape: true, fullWidth: true, disableCloseOnSelect: fieldDefinition.multiple, readOnly: fieldDefinition.readOnly, renderInput: function (params) {
                     var _a;
                     return ((0, jsx_runtime_1.jsx)(material_1.TextField, __assign({}, params, other, { variant: "standard", error: error, helperText: !disableHelperText && error
                             ? (_a = fieldDefinition.helperText) !== null && _a !== void 0 ? _a : t('Common.InvalidData')
@@ -134,7 +181,7 @@ function DataInput(props) {
                     : undefined }));
         }
         case 'checkbox': {
-            return ((0, jsx_runtime_1.jsx)(material_1.FormControl, { fullWidth: true, children: (0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { id: fieldName.toString(), name: fieldName.toString(), checked: value, onChange: function (event) {
+            return ((0, jsx_runtime_1.jsx)(material_1.FormControl, { fullWidth: true, children: (0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { disabled: (_d = fieldDefinition.disabled) !== null && _d !== void 0 ? _d : false, id: fieldName.toString(), name: fieldName.toString(), checked: value, onChange: function (event) {
                             return onChange(event.target.checked, checkValidationValue(fieldDefinition, event.target.checked));
                         }, color: "primary", readOnly: fieldDefinition.readOnly }), label: fieldDefinition.label }) }));
         }
@@ -143,7 +190,7 @@ function DataInput(props) {
                     return onChange(date === null || date === void 0 ? void 0 : date.toDate(), checkValidationValue(fieldDefinition, date === null || date === void 0 ? void 0 : date.toDate()));
                 }, readOnly: fieldDefinition.readOnly, slotProps: {
                     textField: __assign(__assign({ required: fieldDefinition.required, fullWidth: true, variant: 'standard' }, other), { error: error, helperText: !disableHelperText && error
-                            ? (_b = fieldDefinition.helperText) !== null && _b !== void 0 ? _b : t('Common.InvalidData')
+                            ? (_e = fieldDefinition.helperText) !== null && _e !== void 0 ? _e : t('Common.InvalidData')
                             : '' }),
                 } }));
         }
@@ -152,12 +199,12 @@ function DataInput(props) {
                     return onChange(date === null || date === void 0 ? void 0 : date.toDate(), checkValidationValue(fieldDefinition, date === null || date === void 0 ? void 0 : date.toDate()));
                 }, slotProps: {
                     textField: __assign(__assign({ required: fieldDefinition.required, fullWidth: true, variant: 'standard' }, other), { error: error, helperText: !disableHelperText && error
-                            ? (_c = fieldDefinition.helperText) !== null && _c !== void 0 ? _c : t('Common.InvalidData')
+                            ? (_f = fieldDefinition.helperText) !== null && _f !== void 0 ? _f : t('Common.InvalidData')
                             : '' }),
                 }, readOnly: fieldDefinition.readOnly }));
         }
         case 'date-range': {
-            var _l = other, isDayBlocked = _l.isDayBlocked, isOutsideRange = _l.isOutsideRange;
+            var _r = other, isDayBlocked = _r.isDayBlocked, isOutsideRange = _r.isOutsideRange;
             return ((0, jsx_runtime_1.jsx)(AWING_1.DateRangePicker, { noBorder: true, variant: "standard", textFieldProps: __assign({ fullWidth: true, style: { margin: '8px 0px' } }, omit(other, ['isDayBlocked', 'isOutsideRange'])), value: {
                     startDate: (value === null || value === void 0 ? void 0 : value[0]) || null,
                     endDate: (value === null || value === void 0 ? void 0 : value[1]) || null,
@@ -165,15 +212,16 @@ function DataInput(props) {
                     var newValue = [dateRange.startDate, dateRange.endDate];
                     onChange(newValue, checkValidationValue(fieldDefinition, newValue));
                 }, label: fieldDefinition.label, error: error, helperText: !disableHelperText && error
-                    ? (_d = fieldDefinition.helperText) !== null && _d !== void 0 ? _d : t('Common.InvalidData')
+                    ? (_g = fieldDefinition.helperText) !== null && _g !== void 0 ? _g : t('Common.InvalidData')
                     : '', disableHelperText: disableHelperText, isDayBlocked: isDayBlocked, isOutsideRange: isOutsideRange }));
         }
         case 'number': {
-            return ((0, jsx_runtime_1.jsx)(AWING_1.NumberFormat, __assign({ id: fieldName.toString(), name: fieldName.toString(), fullWidth: true, variant: "standard" }, other, { value: value !== null && value !== void 0 ? value : '', onChange: function (event) {
-                    var newValue = Number(event.target.value);
-                    onChange(newValue, checkValidationValue(fieldDefinition, newValue));
-                }, error: error, helperText: !disableHelperText && error
-                    ? (_e = fieldDefinition.helperText) !== null && _e !== void 0 ? _e : t('Common.InvalidData')
+            return ((0, jsx_runtime_1.jsx)(AWING_1.NumberFormat, __assign({ id: fieldName.toString(), name: fieldName.toString(), fullWidth: true, variant: "standard" }, other, { value: numberValue !== null && numberValue !== void 0 ? numberValue : '', onChange: function (event) {
+                    var newValue = event.target.value;
+                    setNumberValue(newValue);
+                    onChange(Number(newValue), checkValidationValue(fieldDefinition, Number(newValue)));
+                }, onBlur: handleParamValueChange, error: error, helperText: !disableHelperText && error
+                    ? (_h = fieldDefinition.helperText) !== null && _h !== void 0 ? _h : t('Common.InvalidData')
                     : '' })));
         }
         case 'radio': {
@@ -188,19 +236,19 @@ function DataInput(props) {
         case 'text':
         case 'text-area': {
             return ((0, jsx_runtime_1.jsx)(material_1.TextField, __assign({ id: fieldName.toString(), name: fieldName.toString(), type: 'text', fullWidth: true, variant: "standard", multiline: fieldDefinition.type === 'text-area', error: error, helperText: !disableHelperText && error
-                    ? (_f = fieldDefinition.helperText) !== null && _f !== void 0 ? _f : errorText
+                    ? (_j = fieldDefinition.helperText) !== null && _j !== void 0 ? _j : errorText
                     : '' }, other, { value: value !== null && value !== void 0 ? value : '', onChange: function (event) {
                     return onChange(event.target.value, checkValidationValue(fieldDefinition, event.target.value));
                 } })));
         }
         case 'select': {
-            return ((0, jsx_runtime_1.jsxs)(material_1.TextField, __assign({ id: fieldName.toString(), name: fieldName.toString(), fullWidth: true, select: true, variant: "standard", value: value !== null && value !== void 0 ? value : "", onChange: function (event) {
+            return ((0, jsx_runtime_1.jsxs)(material_1.TextField, __assign({ id: fieldName.toString(), name: fieldName.toString(), fullWidth: true, select: true, variant: "standard", value: value !== null && value !== void 0 ? value : '', onChange: function (event) {
                     var newValue = fieldDefinition.multiple
                         ? event.target.value.split(',')
                         : event.target.value;
                     onChange(event.target.value, checkValidationValue(fieldDefinition, newValue));
                 }, error: error, helperText: !disableHelperText && error
-                    ? (_g = fieldDefinition.helperText) !== null && _g !== void 0 ? _g : t('Common.InvalidData')
+                    ? (_k = fieldDefinition.helperText) !== null && _k !== void 0 ? _k : t('Common.InvalidData')
                     : '' }, other, { children: [!fieldDefinition.required && ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: "", children: (0, jsx_runtime_1.jsx)("em", { children: t('Common.None') }) })), fieldDefinition.options.map(function (item, index) {
                         var _a;
                         return ((0, jsx_runtime_1.jsx)(material_1.MenuItem, __assign({ value: item.value, disabled: item.disabled ||
@@ -214,7 +262,7 @@ function DataInput(props) {
             return ((0, jsx_runtime_1.jsx)(AWING_1.MultipleHierarchicalChoice, __assign({}, fieldDefinition, { variant: "standard", value: value, onChange: function (value) {
                     onChange(value, checkValidationValue(fieldDefinition, value));
                 }, error: error, helperText: !disableHelperText && error
-                    ? (_h = fieldDefinition.helperText) !== null && _h !== void 0 ? _h : t('Common.InvalidData')
+                    ? (_l = fieldDefinition.helperText) !== null && _l !== void 0 ? _l : t('Common.InvalidData')
                     : '' })));
         }
         case 'geo-fencing': {
@@ -224,10 +272,44 @@ function DataInput(props) {
                     } }) }));
         }
         default: {
-            return ((0, jsx_runtime_1.jsx)(material_1.TextField, __assign({ id: fieldName.toString(), name: fieldName.toString(), type: fieldDefinition.type, fullWidth: true, variant: "standard" }, other, { value: value !== null && value !== void 0 ? value : '', onChange: function (event) {
+            return ((0, jsx_runtime_1.jsx)(material_1.TextField, __assign({ id: fieldName.toString(), name: fieldName.toString(), type: showPassword ? 'text' : fieldDefinition.type, fullWidth: true, variant: "standard" }, other, { value: value !== null && value !== void 0 ? value : '', onChange: function (event) {
                     return onChange(event.target.value, checkValidationValue(fieldDefinition, event.target.value));
-                }, error: error, helperText: !disableHelperText && error
-                    ? (_j = fieldDefinition.helperText) !== null && _j !== void 0 ? _j : t('Common.InvalidData')
+                }, autoComplete: "new-password", InputProps: fieldDefinition.type === 'password'
+                    ? {
+                        endAdornment: ((0, jsx_runtime_1.jsxs)(material_1.InputAdornment, { position: "end", children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, { "aria-label": "toggle password visibility", onClick: handleClickShowPassword, edge: "end", disabled: fieldDefinition.disabled, children: showPassword ? ((0, jsx_runtime_1.jsx)(icons_material_1.VisibilityOff, {})) : ((0, jsx_runtime_1.jsx)(icons_material_1.Visibility, {})) }), (0, jsx_runtime_1.jsx)(material_1.Button, { size: "small", variant: "outlined", onClick: function () {
+                                        var password = fieldDefinition.onGeneratePassword();
+                                        onChange(password, checkValidationValue(fieldDefinition, password));
+                                        if (!showPassword)
+                                            setShowPassword(true);
+                                    }, disabled: !fieldDefinition.onGeneratePassword ||
+                                        fieldDefinition.disabled, sx: {
+                                        height: '24px',
+                                        fontSize: 14,
+                                        lineHeight: 1.5,
+                                        marginRight: '0px',
+                                        marginLeft: '8px',
+                                        marginBottom: '2px',
+                                        color: '#0000008a',
+                                        borderColor: '#0000008a',
+                                        '&:hover': {
+                                            boxShadow: 'none',
+                                            borderColor: '#0000008a',
+                                            backgroundColor: 'unset',
+                                        },
+                                        '&:active': {
+                                            boxShadow: 'none',
+                                            borderColor: '#0000008a',
+                                            backgroundColor: 'unset',
+                                        },
+                                        '&:focus': {
+                                            boxShadow: 'none',
+                                            borderColor: '#0000008a',
+                                            backgroundColor: 'unset',
+                                        },
+                                    }, children: t('Campaign.Password.AutoGenerate') })] })),
+                    }
+                    : undefined, error: error, helperText: !disableHelperText && error
+                    ? (_m = fieldDefinition.helperText) !== null && _m !== void 0 ? _m : t('Common.InvalidData')
                     : '' })));
         }
     }

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

@@ -68,6 +68,7 @@ export interface NumberFieldDefinition<T extends DataObject> extends BaseFieldDe
     onValidate?(value?: number): boolean;
     defaultValue?: number;
     autoFormula?: string;
+    isFloat?: boolean;
     min?: number;
     max?: number;
 }
@@ -97,6 +98,7 @@ export interface TextFieldDefinition<T extends DataObject> extends BaseFieldDefi
     onValidate?(value?: string, length?: number, pattern?: RegExp | false): boolean;
     defaultValue?: string;
     autoFormula?: string;
+    onGeneratePassword?: () => void;
 }
 export interface LogicExpressionDefinition<T extends DataObject> extends BaseFieldDefinition<T> {
     type: 'logic-expression';

package/lib/AWING/DataGrid/index.js

@@ -38,7 +38,8 @@ var NoData_1 = __importDefault(require("../NoData"));
 var constants_1 = require("../constants");
 var Helpers_1 = require("../../Utils/Helpers");
 var get_1 = __importDefault(require("../Form/Utils/get"));
-var i18n_1 = __importDefault(require("../../i18n"));
+var lodash_1 = require("lodash");
+var Constant_1 = require("../../ACM-AXN/Common/Constant");
 var StyledTableRow = (0, styles_1.styled)(material_1.TableRow)({
     '& .MuiTableCell-root:last-child .MuiButtonBase-root': {
         visibility: 'hidden',
@@ -74,13 +75,6 @@ var SpanSortIndex = (0, styles_1.styled)('span')({
 });
 var DataGrid = function (props) {
     var columns = props.columns, rows = props.rows, _a = props.hideHeader, hideHeader = _a === void 0 ? false : _a, spanningRows = props.spanningRows, _b = props.spanningRowsPosition, spanningRowsPosition = _b === void 0 ? 'bottom' : _b, getRowId = props.getRowId, onRowClick = props.onRowClick, rowActions = props.rowActions, sortModel = props.sortModel, onSortModelChange = props.onSortModelChange, selected = props.selected, onSelectedChange = props.onSelectedChange, selectionActions = props.selectionActions, _c = props.pageIndex, pageIndex = _c === void 0 ? constants_1.PAGE_INDEX_DEFAULT : _c, _d = props.pageSize, pageSize = _d === void 0 ? constants_1.PAGE_SIZE_DEFAULT : _d, _e = props.totalOfRows, totalOfRows = _e === void 0 ? rows.length : _e, _f = props.rowsPerPageOptions, rowsPerPageOptions = _f === void 0 ? [10, 20, 30] : _f, onPageIndexChange = props.onPageIndexChange, onPageSizeChange = props.onPageSizeChange;
-    var _g = react_1.default.useState(), forceUpdate = _g[1];
-    react_1.default.useEffect(function () {
-        var language = localStorage.getItem('i18nextLng');
-        i18n_1.default.changeLanguage(language || 'vi');
-        forceUpdate({});
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [localStorage.getItem('i18nextLng')]);
     var createSortHandler = function (fieldName) { return function (event) {
         var _a, _b, _c;
         if (onSortModelChange) {
@@ -177,6 +171,10 @@ var DataGrid = function (props) {
         }
     };
     var calcOrder = function (index) { return pageIndex * pageSize + 1 + index; };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    var handleAction = react_1.default.useCallback((0, lodash_1.debounce)(function (rowAction, id) {
+        rowAction.action(id);
+    }, Constant_1.Constants.DEBOUNCE_TIME_300), []);
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.TableContainer, { component: material_1.Paper, children: [(0, jsx_runtime_1.jsxs)(material_1.Table, { "aria-label": "simple table", style: { tableLayout: 'fixed' }, children: [!hideHeader && ((0, jsx_runtime_1.jsx)(material_1.TableHead, { children: (0, jsx_runtime_1.jsxs)(material_1.TableRow, { children: [selected && onSelectedChange && ((0, jsx_runtime_1.jsx)(material_1.TableCell, { padding: "checkbox", children: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { color: "primary", indeterminate: selected.length > 0 &&
                                                     selected.length < rows.length, checked: selected.length > 0 &&
                                                     selected.length === rows.length, onChange: function () { return handleSelectAll(); }, inputProps: {
@@ -255,7 +253,7 @@ var DataGrid = function (props) {
                                                                 : undefined, title: actionDef.tooltipTitle, children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: function (e) {
                                                                     if (!isShouldHide) {
                                                                         e.stopPropagation();
-                                                                        actionDef.action(id);
+                                                                        handleAction(actionDef, id);
                                                                     }
                                                                 }, style: {
                                                                     marginLeft: '4px',
@@ -273,10 +271,7 @@ var DataGrid = function (props) {
                                                                     })
                                                                     : actionDef.icon }) }, "".concat(id, "-").concat(actIdx)));
                                                     }) }))] }), id));
-                                    }), spanningRowsPosition == 'bottom' && spanningRows] })] }), !rows.length && (0, jsx_runtime_1.jsx)(NoData_1.default, {})] }), onPageIndexChange && onPageSizeChange && ((0, jsx_runtime_1.jsx)(Pagination_1.default, { rowsPerPageOptions: rowsPerPageOptions, colSpan: 3, count: totalOfRows, rowsPerPage: pageSize, page: pageIndex, SelectProps: {
-                    inputProps: { 'aria-label': 'rows per page' },
-                    native: true,
-                }, onPageChange: function (e, page) { return onPageIndexChange(page); }, onRowsPerPageChange: function (e) {
+                                    }), spanningRowsPosition == 'bottom' && spanningRows] })] }), !rows.length && (0, jsx_runtime_1.jsx)(NoData_1.default, {})] }), onPageIndexChange && onPageSizeChange && ((0, jsx_runtime_1.jsx)(Pagination_1.default, { rowsPerPageOptions: rowsPerPageOptions, colSpan: 3, count: totalOfRows, rowsPerPage: pageSize, page: pageIndex, onPageChange: function (e, page) { return onPageIndexChange(page); }, onRowsPerPageChange: function (e) {
                     return onPageSizeChange(parseInt(e.target.value, 10));
                 } }))] }));
 };

package/lib/AWING/DateRangePicker/component.js

@@ -50,6 +50,18 @@ 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",
+    "vi": "vi",
+    "en": "en",
+    "ind": "hi",
+    "mys": "ms",
+    "id": "id",
+    "lao": "lo"
+};
 var moment = require('moment');
 require('moment/locale/vi');
 var omit = require('lodash/omit');
@@ -143,8 +155,9 @@ var defaultProps = {
     handleDateRangePopover: function () { },
 };
 var DateRangePickerWrapper = function (props) {
+    var _a;
     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;
+    var value = props.value, error = props.error, helperText = props.helperText, _b = props.autoFocus, autoFocus = _b === void 0 ? false : _b, _c = props.autoFocusEndDate, autoFocusEndDate = _c === void 0 ? false : _c, _d = props.initialStartDate, initialStartDate = _d === void 0 ? null : _d, _e = props.initialEndDate, initialEndDate = _e === void 0 ? null : _e, _f = props.callback, callback = _f === void 0 ? function () { } : _f, _g = props.label, label = _g === void 0 ? null : _g, _h = props.isShowCalendarInfo, isShowCalendarInfo = _h === void 0 ? false : _h, variant = props.variant, openDirection = props.openDirection, _j = props.isDayBlocked, isDayBlocked = _j === void 0 ? function (day) { return false; } : _j, _k = props.handleValid, handleValid = _k === void 0 ? function () { } : _k, _l = props.handleDateRangePopover, handleDateRangePopover = _l === void 0 ? function () { } : _l, disableHelperText = props.disableHelperText, _m = props.isFutureDate, isFutureDate = _m === void 0 ? false : _m, _o = props.required, required = _o === void 0 ? false : _o;
     var initialFocusedInput = null;
     if (autoFocus) {
         initialFocusedInput = constants_1.START_DATE;
@@ -152,12 +165,12 @@ var DateRangePickerWrapper = function (props) {
     else if (autoFocusEndDate) {
         initialFocusedInput = constants_1.END_DATE;
     }
-    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 _p = (0, react_1.useState)(initialFocusedInput), focusedInput = _p[0], setFocusedInput = _p[1];
+    var _q = (0, react_1.useState)(initialStartDate), startDate = _q[0], setStartDate = _q[1];
+    var _r = (0, react_1.useState)(initialEndDate), endDate = _r[0], setEndDate = _r[1];
+    var _s = (0, react_1.useState)(true), isValid = _s[0], setIsValid = _s[1];
+    var _t = (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 = _t[0], setInputValue = _t[1];
+    var _u = (0, react_i18next_1.useTranslation)(undefined, { i18n: i18n_1.default }), i18n = _u.i18n, t = _u.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) {
@@ -177,10 +190,11 @@ var DateRangePickerWrapper = function (props) {
         }
     }, [value]);
     (0, react_1.useEffect)(function () {
-        if (momentLanguage !== 'en') {
+        var lang = languageMap[momentLanguage] || momentLanguage;
+        if (lang !== 'en') {
             try {
-                Promise.resolve("".concat("moment/locale/".concat(momentLanguage))).then(function (s) { return __importStar(require(s)); }).then(function () {
-                    moment.locale(momentLanguage);
+                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);
@@ -191,12 +205,12 @@ var DateRangePickerWrapper = function (props) {
             }
         }
         else {
-            moment.locale(momentLanguage);
+            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() !==
-                momentLanguage) {
-            setStartDate(moment(value ? value === null || value === void 0 ? void 0 : value.startDate : startDate).locale(momentLanguage));
+                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 () {
@@ -235,42 +249,60 @@ 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 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() &&
             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 presets = (0, configDate_1.default)(t, isFutureDate);
+    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;
@@ -312,8 +344,10 @@ var DateRangePickerWrapper = function (props) {
         'isDayBlocked',
         'handleValid',
         'handleDateRangePopover',
+        'required',
     ]);
-    var _t = react_1.default.useState(null), anchorElPopover = _t[0], setAnchorElPopover = _t[1];
+    var isHindi = (0, react_1.useMemo)(function () { return momentLanguage === 'ind'; }, [momentLanguage]);
+    var _v = react_1.default.useState(null), anchorElPopover = _v[0], setAnchorElPopover = _v[1];
     var openPopper = Boolean(anchorElPopover);
     var id = openPopper ? 'datePicker-popper' : undefined;
     var popperRef = react_1.default.useRef();
@@ -332,9 +366,23 @@ var DateRangePickerWrapper = function (props) {
         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 () {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isHindi ? ((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)(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({ "aria-describedby": id, variant: variant, label: label, error: !isValid || error, helperText: !disableHelperText
+                    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
@@ -349,7 +397,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

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

package/lib/AWING/DateRangePicker/configDate.js

@@ -4,63 +4,63 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var moment_1 = __importDefault(require("moment"));
-var configInitialDate = function (t, isFutureDate) {
+var configInitialDate = function (isFutureDate) {
     var today = (0, moment_1.default)();
     var initDatePast = [
         {
-            text: t('DatePicker.ToDay'),
+            text: 'DatePicker.ToDay',
             start: today,
             end: today,
         },
         {
-            text: t('DatePicker.Yesterday'),
+            text: 'DatePicker.Yesterday',
             start: (0, moment_1.default)().subtract(1, 'days'),
             end: (0, moment_1.default)().subtract(1, 'days'),
         },
         {
-            text: t('DatePicker.LastSevenDay'),
+            text: 'DatePicker.LastSevenDay',
             start: (0, moment_1.default)().subtract(6, 'days'),
             end: today,
         },
         {
-            text: t('DatePicker.LastThirtyDay'),
+            text: 'DatePicker.LastThirtyDay',
             start: (0, moment_1.default)().subtract(29, 'days'),
             end: today,
         },
         {
-            text: t('DatePicker.ThisMonth'),
+            text: 'DatePicker.ThisMonth',
             start: (0, moment_1.default)().startOf('month'),
             end: (0, moment_1.default)().endOf('month'),
         },
         {
-            text: t('DatePicker.LastMonth'),
+            text: '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'),
+            text: 'DatePicker.ToDay',
             start: today,
             end: today,
         },
         {
-            text: t('DatePicker.Tomorrow'),
+            text: 'DatePicker.Tomorrow',
             start: (0, moment_1.default)(),
             end: (0, moment_1.default)().add(1, 'days'),
         },
         {
-            text: t('DatePicker.NextSevenDay'),
+            text: 'DatePicker.NextSevenDay',
             start: today,
             end: (0, moment_1.default)().add(6, 'days'),
         },
         {
-            text: t('DatePicker.NextThirtyDay'),
+            text: 'DatePicker.NextThirtyDay',
             start: today,
             end: (0, moment_1.default)().add(29, 'days'),
         },
         {
-            text: t('DatePicker.NextMonth'),
+            text: 'DatePicker.NextMonth',
             start: (0, moment_1.default)().add(1, 'month').startOf('month'),
             end: (0, moment_1.default)().add(1, 'month').endOf('month'),
         },

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

@@ -1,5 +1,6 @@
 import { MomentInput, Moment } from "moment";
 export interface DateRangePickerProps {
+    required?: boolean;
     disabled?: boolean;
     autoFocus?: boolean;
     autoFocusEndDate?: boolean;