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.
@@ -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,2CAgGlE"}
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;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,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,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,CA+bjD,CAAC;AAEF,eAAe,cAAc,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
- value ? setValueDateRangeField(formatDateRange(value)) : setValueDateRangeField(dateFormat);
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 isStartValid = moment(startStr, 'DD/MM/YYYY', true).isValid();
308
- const isEndValid = moment(endStr, 'DD/MM/YYYY', true).isValid();
309
- if (isStartValid && isEndValid || 'DD/MM/YYYY - DD/MM/YYYY' === newValue) if (isStartValid && isEndValid && moment(startStr, 'DD/MM/YYYY').isAfter(moment(endStr, 'DD/MM/YYYY'))) {
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
- if (onChange && isStartValid && isEndValid) onChange(moment(startStr, 'DD/MM/YYYY'), moment(endStr, 'DD/MM/YYYY'));
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(()=>{
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "awing-library",
3
- "version": "2.1.2-dev.530",
3
+ "version": "2.1.2-dev.531",
4
4
  "license": "MIT",
5
5
  "exports": {
6
6
  ".": {