awing-library 2.1.2-dev.530 → 2.1.2-dev.531
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/AWING/DateRangePicker/Container.d.ts +1 -0
- package/dist/AWING/DateRangePicker/Container.d.ts.map +1 -1
- package/dist/AWING/DateRangePicker/Container.js +3 -0
- package/dist/AWING/DateRangePicker/DateRangeField.d.ts +4 -1
- package/dist/AWING/DateRangePicker/DateRangeField.d.ts.map +1 -1
- package/dist/AWING/DateRangePicker/DateRangeField.js +24 -7
- package/package.json +1 -1
|
@@ -7,6 +7,7 @@ export interface DateRangePickerProps {
|
|
|
7
7
|
endDate: Date;
|
|
8
8
|
};
|
|
9
9
|
onChange: (dateRange: DateRange) => void;
|
|
10
|
+
onError?: (error: boolean) => void;
|
|
10
11
|
textFieldProps?: Pick<TextFieldProps, 'size' | 'fullWidth' | 'classes' | 'className' | 'sx' | 'required' | 'error' | 'helperText' | 'disabled'>;
|
|
11
12
|
options?: OptionsDateRangePickerProps;
|
|
12
13
|
variant?: 'standard' | 'outlined' | 'filled';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Container.d.ts","sourceRoot":"","sources":["../../../src/AWING/DateRangePicker/Container.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,2BAA2B,EAAE,MAAM,SAAS,CAAC;AAEjE,MAAM,WAAW,oBAAoB;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE;QACJ,SAAS,EAAE,IAAI,CAAC;QAChB,OAAO,EAAE,IAAI,CAAC;KACjB,CAAC;IACF,QAAQ,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;IACzC,cAAc,CAAC,EAAE,IAAI,CACjB,cAAc,EACd,MAAM,GAAG,WAAW,GAAG,SAAS,GAAG,WAAW,GAAG,IAAI,GAAG,UAAU,GAAG,OAAO,GAAG,YAAY,GAAG,UAAU,CAC3G,CAAC;IACF,OAAO,CAAC,EAAE,2BAA2B,CAAC;IACtC,OAAO,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,QAAQ,CAAC;CAChD;AAED,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,KAAK,EAAE,oBAAoB,
|
|
1
|
+
{"version":3,"file":"Container.d.ts","sourceRoot":"","sources":["../../../src/AWING/DateRangePicker/Container.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,2BAA2B,EAAE,MAAM,SAAS,CAAC;AAEjE,MAAM,WAAW,oBAAoB;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE;QACJ,SAAS,EAAE,IAAI,CAAC;QAChB,OAAO,EAAE,IAAI,CAAC;KACjB,CAAC;IACF,QAAQ,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;IACzC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,cAAc,CAAC,EAAE,IAAI,CACjB,cAAc,EACd,MAAM,GAAG,WAAW,GAAG,SAAS,GAAG,WAAW,GAAG,IAAI,GAAG,UAAU,GAAG,OAAO,GAAG,YAAY,GAAG,UAAU,CAC3G,CAAC;IACF,OAAO,CAAC,EAAE,2BAA2B,CAAC;IACtC,OAAO,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,QAAQ,CAAC;CAChD;AAED,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,KAAK,EAAE,oBAAoB,2CAmGlE"}
|
|
@@ -53,6 +53,9 @@ function DateRangePicker(props) {
|
|
|
53
53
|
label: label,
|
|
54
54
|
onChange: handleDateChange,
|
|
55
55
|
onClickDateRange: handleClick,
|
|
56
|
+
onError: props.onError,
|
|
57
|
+
minDate: props.options?.minDate,
|
|
58
|
+
maxDate: props.options?.maxDate,
|
|
56
59
|
variant: variant,
|
|
57
60
|
required: props.textFieldProps?.required
|
|
58
61
|
}),
|
|
@@ -1,11 +1,14 @@
|
|
|
1
1
|
import { RefObject } from 'react';
|
|
2
2
|
import { TextFieldProps } from '@mui/material';
|
|
3
3
|
import { Moment } from 'moment';
|
|
4
|
-
interface DateRangeFieldProps extends Omit<TextFieldProps, 'onChange' | 'value'> {
|
|
4
|
+
interface DateRangeFieldProps extends Omit<TextFieldProps, 'onChange' | 'value' | 'onError'> {
|
|
5
5
|
label?: string;
|
|
6
6
|
dateFormat?: string;
|
|
7
|
+
minDate?: Date;
|
|
8
|
+
maxDate?: Date;
|
|
7
9
|
onChange?: (start: Moment, end: Moment) => void;
|
|
8
10
|
onClickDateRange?: (event: RefObject<HTMLInputElement | null>) => void;
|
|
11
|
+
onError?: (error: boolean) => void;
|
|
9
12
|
textFieldProps?: Pick<TextFieldProps, 'size' | 'fullWidth' | 'classes' | 'className' | 'sx'>;
|
|
10
13
|
value?: {
|
|
11
14
|
startDate: Date;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateRangeField.d.ts","sourceRoot":"","sources":["../../../src/AWING/DateRangePicker/DateRangeField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,SAAS,EAAE,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAyB,cAAc,EAAE,MAAM,eAAe,CAAC;AACtE,OAAe,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAMxC,UAAU,mBAAoB,SAAQ,IAAI,CAAC,cAAc,EAAE,UAAU,GAAG,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"DateRangeField.d.ts","sourceRoot":"","sources":["../../../src/AWING/DateRangePicker/DateRangeField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,SAAS,EAAE,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAyB,cAAc,EAAE,MAAM,eAAe,CAAC;AACtE,OAAe,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAMxC,UAAU,mBAAoB,SAAQ,IAAI,CAAC,cAAc,EAAE,UAAU,GAAG,OAAO,GAAG,SAAS,CAAC;IACxF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,KAAK,IAAI,CAAC;IACvE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,cAAc,CAAC,EAAE,IAAI,CAAC,cAAc,EAAE,MAAM,GAAG,WAAW,GAAG,SAAS,GAAG,WAAW,GAAG,IAAI,CAAC,CAAC;IAC7F,KAAK,CAAC,EAAE;QACJ,SAAS,EAAE,IAAI,CAAC;QAChB,OAAO,EAAE,IAAI,CAAC;KACjB,CAAC;IACF,oBAAoB,CAAC,EAAE;QACnB,SAAS,EAAE,IAAI,CAAC;QAChB,OAAO,EAAE,IAAI,CAAC;KACjB,CAAC;CACL;AAyBD,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAydjD,CAAC;AAEF,eAAe,cAAc,CAAC"}
|
|
@@ -27,7 +27,7 @@ const useStyles = makeStyles(()=>({
|
|
|
27
27
|
}
|
|
28
28
|
}
|
|
29
29
|
}));
|
|
30
|
-
const DateRangeField_DateRangeField = ({ label = 'Khoảng thời gian', dateFormat = 'DD/MM/YYYY - DD/MM/YYYY', onChange, onClickDateRange, value, valueDateRangePicker, textFieldProps, ...props })=>{
|
|
30
|
+
const DateRangeField_DateRangeField = ({ label = 'Khoảng thời gian', dateFormat = 'DD/MM/YYYY - DD/MM/YYYY', minDate, maxDate, onChange, onClickDateRange, onError, value, valueDateRangePicker, textFieldProps, ...props })=>{
|
|
31
31
|
const classes = useStyles();
|
|
32
32
|
const [valueDateRangeField, setValueDateRangeField] = useState(value ? formatDateRange(value) : dateFormat);
|
|
33
33
|
const [error, setError] = useState(false);
|
|
@@ -42,9 +42,15 @@ const DateRangeField_DateRangeField = ({ label = 'Khoảng thời gian', dateFor
|
|
|
42
42
|
});
|
|
43
43
|
const inputRef = useRef(null);
|
|
44
44
|
useEffect(()=>{
|
|
45
|
-
|
|
45
|
+
if (!value) return void setValueDateRangeField(dateFormat);
|
|
46
|
+
setValueDateRangeField((currentValue)=>{
|
|
47
|
+
const nextValue = formatDateRange(value);
|
|
48
|
+
return currentValue === nextValue ? currentValue : nextValue;
|
|
49
|
+
});
|
|
46
50
|
}, [
|
|
47
|
-
value
|
|
51
|
+
value?.startDate?.getTime(),
|
|
52
|
+
value?.endDate?.getTime(),
|
|
53
|
+
dateFormat
|
|
48
54
|
]);
|
|
49
55
|
const getPosition = ()=>{
|
|
50
56
|
const parts = dateFormat.split(' - ');
|
|
@@ -304,19 +310,30 @@ const DateRangeField_DateRangeField = ({ label = 'Khoảng thời gian', dateFor
|
|
|
304
310
|
const newValue = `${newStartParts.join('/')} - ${newEndParts.join('/')}`;
|
|
305
311
|
setValueDateRangeField(newValue);
|
|
306
312
|
const [startStr, endStr] = newValue.split(' - ');
|
|
307
|
-
const
|
|
308
|
-
const
|
|
309
|
-
|
|
313
|
+
const startMoment = moment(startStr, 'DD/MM/YYYY', true);
|
|
314
|
+
const endMoment = moment(endStr, 'DD/MM/YYYY', true);
|
|
315
|
+
const isStartValid = startMoment.isValid();
|
|
316
|
+
const isEndValid = endMoment.isValid();
|
|
317
|
+
const isBeforeMinDate = !!minDate && (isStartValid && startMoment.isBefore(moment(minDate), 'day') || isEndValid && endMoment.isBefore(moment(minDate), 'day'));
|
|
318
|
+
const isAfterMaxDate = !!maxDate && (isStartValid && startMoment.isAfter(moment(maxDate), 'day') || isEndValid && endMoment.isAfter(moment(maxDate), 'day'));
|
|
319
|
+
if (isStartValid && isEndValid || 'DD/MM/YYYY - DD/MM/YYYY' === newValue) if (isBeforeMinDate || isAfterMaxDate) {
|
|
320
|
+
setError(true);
|
|
321
|
+
setHelperText('Ngày nằm ngoài khoảng cho phép');
|
|
322
|
+
onError?.(true);
|
|
323
|
+
} else if (isStartValid && isEndValid && startMoment.isAfter(endMoment)) {
|
|
310
324
|
setError(true);
|
|
311
325
|
setHelperText('Ngày kết thúc phải sau ngày khởi đầu');
|
|
326
|
+
onError?.(true);
|
|
312
327
|
} else {
|
|
313
328
|
setError(false);
|
|
314
329
|
setHelperText('');
|
|
315
|
-
|
|
330
|
+
onError?.(false);
|
|
331
|
+
if (onChange && isStartValid && isEndValid) onChange(startMoment, endMoment);
|
|
316
332
|
}
|
|
317
333
|
else {
|
|
318
334
|
setError(true);
|
|
319
335
|
setHelperText('Ngày không hợp lệ');
|
|
336
|
+
onError?.(true);
|
|
320
337
|
}
|
|
321
338
|
};
|
|
322
339
|
useEffect(()=>{
|