forstok-ui-lib 7.5.1 → 7.5.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "forstok-ui-lib",
-  "version": "7.5.1",
+  "version": "7.5.3",
   "description": "Forstok UI Components Library",
   "path": "dist",
   "main": "dist/index.js",

package/src/components/date/range.tsx

@@ -1,30 +1,31 @@
-import { useState, useRef, useEffect } from 'react'
-import moment, { Moment } from 'moment'
+import { useState, useRef, useEffect } from 'react';
+import moment, { Moment } from 'moment';
 import { RangePicker } from 'rc-picker';
 import { RangePickerRef } from 'rc-picker/lib/interface';
+
 import generateMoment from 'rc-picker/lib/generate/moment.js';
 import enUS from 'rc-picker/lib/locale/en_US.js';
 
-import IconComponent from '../icon'
+import IconComponent from '../icon';
 
-import 'rc-picker/assets/index.css'
-import { RangeContainer } from './styles'
+import 'rc-picker/assets/index.css';
+import { RangeContainer } from './styles';
 
-import { TMoment, TState } from '../../typeds/base.typed'
-import { TModerateDateAntFunction } from './typed'
+import { TMoment, TState } from '../../typeds/base.typed';
+import { TModerateDateAntFunction } from './typed';
 
-import { configDateRangeAnt } from '../../maps/common'
+import { configDateRangeAnt } from '../../maps/common';
 
 type TDateRange = {
-  $mode?: 'white'
-  startDate?: TMoment
-  endDate?: TMoment
-  minDate?: TMoment
-  maxDate?: TMoment
-  evModDate: TModerateDateAntFunction
-  isForceUpdate?: boolean
-  setForceUpdate?: TState<boolean | undefined>
-}
+  $mode?: 'white';
+  startDate?: TMoment;
+  endDate?: TMoment;
+  minDate?: TMoment;
+  maxDate?: TMoment;
+  evModDate: TModerateDateAntFunction;
+  isForceUpdate?: boolean;
+  setForceUpdate?: TState<boolean | undefined>;
+};
 
 const DateRangeComponent = (props: TDateRange) => {
   const {
@@ -35,104 +36,83 @@ const DateRangeComponent = (props: TDateRange) => {
     maxDate,
     evModDate,
     isForceUpdate,
-    setForceUpdate 
-  } = props
+    setForceUpdate,
+  } = props;
+
+  // Ensure ALWAYS Moment objects
+  const _minDate: Moment = moment(minDate ?? configDateRangeAnt.minDate);
+  let _startDate: Moment = moment(startDate ?? configDateRangeAnt.startDate);
+  let _endDate: Moment = moment(endDate ?? configDateRangeAnt.endDate);
 
-  const _minDate: Moment = minDate || configDateRangeAnt.minDate
-  let  _startDate: Moment = startDate || configDateRangeAnt.startDate
-  let _endDate: Moment = endDate || configDateRangeAnt.endDate
-  
-  _minDate > _startDate && (_startDate = _minDate);
-  (maxDate && (maxDate < _endDate)) && (_endDate = maxDate);
+  if (_startDate < _minDate) _startDate = _minDate;
+  if (maxDate && moment(maxDate).isBefore(_endDate)) {
+    _endDate = moment(maxDate);
+  }
 
-  const [value, setValue] = useState<[TMoment, TMoment]>([_startDate, _endDate])
+  const [value, setValue] = useState<[Moment, Moment]>([_startDate, _endDate]);
 
   useEffect(() => {
     if (isForceUpdate) {
-      _startDate && _endDate && setValue([_startDate, _endDate]);
-      setForceUpdate && setForceUpdate(false)
+      setValue([_startDate, _endDate]);
+      setForceUpdate && setForceUpdate(false);
     }
-  },[isForceUpdate, setForceUpdate, _startDate, _endDate])
+  }, [isForceUpdate]);
 
-  const onChange = (newValue: [TMoment, TMoment] | null, formatStrings?: string[]) => {
-    // console.log('Change:', newValue, formatStrings)
-    if (newValue) {
-      setValue(newValue)
-      evModDate(newValue[0], newValue[1])
-    }
-  }
+  const onChange = (
+    dates: [Moment | null, Moment | null] | null,
+    dateStrings: [string, string],
+  ) => {
+    if (!dates) return;
 
-  // can detect start and end action
-  // const onCalendarChange = (
-  //   newValue: [TMoment, TMoment] | null,
-  //   formatStrings?: string[],
-  // ) => {
-  //   console.log('Calendar Change:', newValue, formatStrings)
-  // }
-
-  const rest = {
-    generateConfig: generateMoment,
-    value,
-    onChange,
-    // onCalendarChange,
-  }
+    const [start, end] = dates;
+
+    if (!start || !end) return;
 
-  const rangePickerRef = useRef<RangePickerRef>(null)
+    setValue([start, end]);
+    evModDate(start, end);
+  };
+
+  const rangePickerRef = useRef<RangePickerRef>(null);
 
   return (
-    <RangeContainer className='_refRangeContainer' $mode={$mode}>
+    <RangeContainer className="_refRangeContainer" $mode={$mode}>
       <RangePicker
-        onOpenChange={open => {
-          const parentEl = rangePickerRef.current?.nativeElement?.closest('._refRangeContainer')
-          if (parentEl) {
-            if (open) {
-              parentEl.classList.add('is-actived')
-            } else {
-              parentEl.classList.remove('is-actived')
-            }
-          }
-        }}
+        ref={rangePickerRef}
+        generateConfig={generateMoment}
+        locale={enUS}
+        value={value}                 // controlled
+        onChange={onChange}
         allowEmpty
         allowClear={false}
-        locale={enUS}
-        ref={rangePickerRef}
-        separator='-'
+        separator="-"
         format="MMM D, YYYY"
         placeholder={['Start Date', 'End Date']}
         minDate={_minDate}
-        maxDate={maxDate || moment().clone()}
-        defaultValue={value}
-        suffixIcon={<IconComponent $width='14px' $name='calendar' />}
-        prevIcon={<IconComponent $width='12px' $name='arrow-left' />}
-        nextIcon={<IconComponent $width='12px' $name='arrow-right' />}
-        superPrevIcon={<IconComponent $width='12px' $name='arrow-left-double' />}
-        superNextIcon={<IconComponent $width='12px' $name='arrow-right-double' />}
+        maxDate={maxDate ? moment(maxDate) : moment()}
+        suffixIcon={<IconComponent $width="14px" $name="calendar" />}
+        prevIcon={<IconComponent $width="12px" $name="arrow-left" />}
+        nextIcon={<IconComponent $width="12px" $name="arrow-right" />}
+        superPrevIcon={<IconComponent $width="12px" $name="arrow-left-double" />}
+        superNextIcon={<IconComponent $width="12px" $name="arrow-right-double" />}
         presets={[
-          {
-            label: 'Today',
-            value: [moment().clone(), moment()],
-          },
-          {
-            label: 'Last 7 days',
-            value: [moment().subtract(6, 'days'), moment()],
-          },
-          {
-            label: 'Last 14 days',
-            value: [moment().subtract(13, 'days'), moment()],
-          },
-          {
-            label: 'Last 30 days',
-            value: [moment().subtract(29, 'days'), moment()],
-          },
-          {
-            label: 'Last 90 days',
-            value: [moment().subtract(89, 'days'), moment()],
-          },
+          { label: 'Today', value: [moment(), moment()] },
+          { label: 'Last 7 days', value: [moment().subtract(6, 'days'), moment()] },
+          { label: 'Last 14 days', value: [moment().subtract(13, 'days'), moment()] },
+          { label: 'Last 30 days', value: [moment().subtract(29, 'days'), moment()] },
+          { label: 'Last 90 days', value: [moment().subtract(89, 'days'), moment()] },
         ]}
-        {...rest}
+        onOpenChange={(open) => {
+          const parentEl = rangePickerRef.current?.nativeElement?.closest(
+            '._refRangeContainer'
+          );
+          if (!parentEl) return;
+          open
+            ? parentEl.classList.add('is-actived')
+            : parentEl.classList.remove('is-actived');
+        }}
       />
     </RangeContainer>
-  )
-}
+  );
+};
 
-export default DateRangeComponent
+export default DateRangeComponent;