@king-design/react 3.5.2 → 3.6.0

package/components/datepicker/usePanel.d.ts

@@ -1,18 +1,9 @@
 import { DatepickerCalendar } from './calendar';
-export declare enum PanelTypes {
-    Date = 0,
-    Time = 1
-}
 export declare enum PanelFlags {
     Start = 0,
     End = 1
 }
-export declare function usePanel(type?: PanelTypes): {
-    startPanel: import("../../hooks/useState").State<PanelTypes>;
-    endPanel: import("../../hooks/useState").State<PanelTypes>;
-    changePanel: (type: PanelTypes, flag?: PanelFlags) => void;
-    getPanel: (flag: PanelFlags) => import("../../hooks/useState").State<PanelTypes>;
-    reset: () => void;
+export declare function usePanel(): {
     startRef: import('intact-react').RefObject<DatepickerCalendar>;
     endRef: import('intact-react').RefObject<DatepickerCalendar>;
 };

package/components/datepicker/usePanel.js

@@ -1,45 +1,32 @@
 import { useInstance, createRef } from 'intact-react';
-import { useState } from '../../hooks/useState';
-export var PanelTypes;
-(function (PanelTypes) {
-  PanelTypes[PanelTypes["Date"] = 0] = "Date";
-  PanelTypes[PanelTypes["Time"] = 1] = "Time";
-})(PanelTypes || (PanelTypes = {}));
+// export enum PanelTypes {
+//     Date,
+//     Time
+// } 
 export var PanelFlags;
 (function (PanelFlags) {
   PanelFlags[PanelFlags["Start"] = 0] = "Start";
   PanelFlags[PanelFlags["End"] = 1] = "End";
 })(PanelFlags || (PanelFlags = {}));
-export function usePanel(type) {
-  if (type === void 0) {
-    type = PanelTypes.Date;
-  }
+export function usePanel() {
   var instance = useInstance();
-  var startPanel = useState(type);
-  var endPanel = useState(type);
+  // const startPanel = useState<PanelTypes>(type);
+  // const endPanel = useState<PanelTypes>(type);
   var startRef = createRef();
   var endRef = createRef();
-  function changePanel(type, flag) {
-    if (flag === void 0) {
-      flag = PanelFlags.Start;
-    }
-    getPanel(flag).set(type);
-  }
-  function getPanel(flag) {
-    return flag === PanelFlags.Start ? startPanel : endPanel;
-  }
-  function reset() {
-    startPanel.set(type);
-    endPanel.set(type);
-  }
-  instance.on('show', reset);
+  // function changePanel(type: PanelTypes, flag: PanelFlags = PanelFlags.Start) {
+  //     getPanel(flag).set(type);
+  // }
+  // function getPanel(flag: PanelFlags) {
+  //     return flag === PanelFlags.Start ? startPanel : endPanel;
+  // }
+  // function reset() {
+  //     startPanel.set(type);
+  //     endPanel.set(type);
+  // }
+  // instance.on('show', reset);
   return {
-    startPanel: startPanel,
-    endPanel: endPanel,
-    changePanel: changePanel,
-    getPanel: getPanel,
-    reset: reset,
-    startRef: startRef,
+    /* startPanel, endPanel, changePanel, getPanel, reset,  */startRef: startRef,
     endRef: endRef
   };
 }

package/components/datepicker/useQuarters.d.ts

@@ -0,0 +1,15 @@
+import dayjs, { Dayjs } from 'dayjs';
+import { State } from '../../hooks/useState';
+import type { useStatus } from './useStatus';
+export declare function useQuarters(showDate: State<Dayjs>, status: ReturnType<typeof useStatus>, focusDate: State<Dayjs | null>): {
+    getQuarters: (now: Dayjs) => {
+        isActive: boolean;
+        isToday: boolean;
+        isDisabled: boolean;
+        isHover: boolean;
+        isInRange: boolean;
+        label: string;
+        value: dayjs.Dayjs;
+    }[];
+    onClick: (date: Dayjs) => void;
+};

package/components/datepicker/useQuarters.js

@@ -0,0 +1,36 @@
+import { useInstance } from 'intact-react';
+import dayjs from 'dayjs';
+import { isEqual } from './helpers';
+import { _$ } from '../../i18n';
+export function useQuarters(showDate, status, focusDate) {
+  var instance = useInstance();
+  function getQuarters(now) {
+    var ret = [];
+    var year = showDate.value.year();
+    for (var i = 1; i <= 4; i++) {
+      var quarterStart = dayjs().year(year).quarter(i).startOf('quarter');
+      ret.push({
+        isActive: status.isActive(quarterStart, 'quarter'),
+        isToday: now.isSame(quarterStart, 'quarter'),
+        isDisabled: status.isDisabled(quarterStart),
+        isHover: isEqual(quarterStart, focusDate.value, 'quarter'),
+        isInRange: status.isInRange(quarterStart, 'quarter'),
+        label: _$("Q" + i),
+        value: quarterStart
+      });
+    }
+    return ret;
+  }
+  function onClick(date) {
+    var quarterStart = date.startOf('quarter');
+    showDate.set(quarterStart);
+    var datepickerType = instance.datepicker.get('type');
+    if (datepickerType === 'quarter') {
+      instance.triggerChange(quarterStart);
+    }
+  }
+  return {
+    getQuarters: getQuarters,
+    onClick: onClick
+  };
+}

package/components/datepicker/useShowDate.js

@@ -35,6 +35,8 @@ export function useShowDate(panel) {
   });
   // ensure the start panel's date is before the end panel's
   watchState(showDate, function (v) {
+    // only check on dual panels
+    if (!panel.startRef.value || !panel.endRef.value) return;
     if (flag === PanelFlags.Start) {
       var endPanel = anotherPanel.value;
       if (endPanel) {
@@ -66,10 +68,12 @@ export function useShowDate(panel) {
         return date.add(isEnd ? 10 : -10, 'year');
       case 'month':
         return date.add(isEnd ? 1 : -1, 'year');
-        break;
+      case 'week':
+        return date.add(isEnd ? 1 : -1, 'week');
+      case 'quarter':
+        return date.add(isEnd ? 1 : -1, 'quarter');
       default:
         return date.add(isEnd ? 1 : -1, 'month');
-        break;
     }
   }
   function getDateLabel() {
@@ -83,6 +87,10 @@ export function useShowDate(panel) {
     if (yearMonthFormat === 'yearMonthFormat') {
       yearMonthFormat = 'YYYY MM';
     }
+    // quarter类型只显示年份
+    if (instance.get('type') === 'quarter') {
+      yearMonthFormat = 'YYYY';
+    }
     var format = yearMonthFormat.split(' ');
     return _mapInstanceProperty(format).call(format, function (item) {
       return {

package/components/datepicker/useStatus.d.ts

@@ -4,5 +4,5 @@ import type { DatepickerCalendarProps } from './calendar';
 export declare function useStatus(focusDate: State<Dayjs | null>): {
     isActive: (date: Dayjs, type: DatepickerCalendarProps['type']) => boolean;
     isInRange: (date: Dayjs, type: DatepickerCalendarProps['type']) => boolean;
-    isDisabled: (value: Dayjs, type?: import("dayjs").OpUnitType) => boolean;
+    isDisabled: (value: Dayjs, type?: "h" | "s" | "y" | "date" | "month" | "week" | "millisecond" | "second" | "minute" | "hour" | "day" | "year" | "milliseconds" | "seconds" | "minutes" | "hours" | "days" | "months" | "years" | "dates" | "d" | "D" | "M" | "m" | "ms" | "weeks" | "w" | "quarter" | "quarters" | "Q") => boolean;
 };

package/components/datepicker/useStatus.js

@@ -1,38 +1,55 @@
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/slice";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
 import _findInstanceProperty from "@babel/runtime-corejs3/core-js/instance/find";
 import { useInstance } from 'intact-react';
-import { isGT, isLT, isEqual } from './helpers';
+import { isGT, isLT, isEqual, last } from './helpers';
+import { Position } from './useHighlight';
 export function useStatus(focusDate) {
   var instance = useInstance();
+  // if focusDate exists, use it as the active date in range mode
+  function getValueByFocusDate() {
+    var _context;
+    var _instance$get = instance.get(),
+      value = _instance$get.value,
+      highlightPosition = _instance$get.highlightPosition;
+    var _instance$datepicker$ = instance.datepicker.get(),
+      range = _instance$datepicker$.range,
+      multiple = _instance$datepicker$.multiple;
+    if (!focusDate.value || !range || multiple) return value;
+    var lastValue = last(value);
+    if (!lastValue) return value;
+    lastValue = _sliceInstanceProperty(lastValue).call(lastValue);
+    if (highlightPosition === Position.Start) {
+      lastValue[0] = focusDate.value;
+    } else {
+      lastValue[1] = focusDate.value;
+    }
+    return _concatInstanceProperty(_context = _sliceInstanceProperty(value).call(value, 0, -1)).call(_context, [lastValue]);
+  }
   function isActive(date, type) {
-    var isActive = function isActive(values) {
+    var _isActive = function _isActive(values) {
       return Array.isArray(values) ? !!_findInstanceProperty(values).call(values, function (v) {
-        return isActive(v);
+        return _isActive(v);
       }) : isEqual(values, date, type);
     };
-    return isActive(instance.get('value'));
+    return _isActive(getValueByFocusDate());
   }
   function isInRange(date, type) {
-    var _instance$datepicker$ = instance.datepicker.get(),
-      range = _instance$datepicker$.range,
-      multiple = _instance$datepicker$.multiple;
-    var value = instance.get('value');
+    var _instance$datepicker$2 = instance.datepicker.get(),
+      range = _instance$datepicker$2.range;
+    var value = getValueByFocusDate();
     if (range) {
-      if (!value) {
-        return false;
-      }
+      if (!value) return false;
       return value.some(function (_ref) {
         var start = _ref[0],
           end = _ref[1];
-        if (!end) {
-          end = focusDate.value;
-          if (end && isLT(end, start, type)) {
+        if (start && end) {
+          if (isLT(end, start, type)) {
             // maybe the focusDate is less than start date
             var tmp = start;
             start = end;
             end = tmp;
           }
-        }
-        if (start && end) {
           return isGT(date, start, type) && isLT(date, end, type);
         }
         return false;

package/components/datepicker/useValue.d.ts

@@ -1,16 +1,22 @@
-import { StateValueItem, DayjsValue } from './basepicker';
+import { StateValueItem, DayjsValue } from './useValueBase';
 import dayjs, { Dayjs } from 'dayjs';
 import type { useFormats } from './useFormats';
 import type { useDisabled } from './useDisabled';
 import { PanelFlags, usePanel } from './usePanel';
-export declare function useValue(formats: ReturnType<typeof useFormats>, disabled: ReturnType<typeof useDisabled>, panel: ReturnType<typeof usePanel>): {
+import { State } from '../../hooks/useState';
+import { Position } from './useHighlight';
+export declare function useValue(formats: ReturnType<typeof useFormats>, disabled: ReturnType<typeof useDisabled>, panel: ReturnType<typeof usePanel>, getHighlightPosition: () => State<Position>): {
     format: () => string | string[];
-    onConfirm: () => void;
+    formatSingleValue: (value: StateValueItem) => string;
     onChangeTime: (date: dayjs.Dayjs, flag: PanelFlags) => void;
     getTimeValue: (flag: PanelFlags) => dayjs.Dayjs | null | undefined;
-    convertToDayjs: (v: import("./basepicker").Value | [import("./basepicker").Value, import("./basepicker").Value] | import("./basepicker").Value[] | [import("./basepicker").Value, import("./basepicker").Value][] | null | undefined) => DayjsValue;
-    getDayjsValue: () => DayjsValue;
-    value: import("../../hooks/useState").State<import("./basepicker").StateValue>;
+    convertToDayjs: (v: import("./useValueBase").Value | [import("./useValueBase").Value, import("./useValueBase").Value] | import("./useValueBase").Value[] | [import("./useValueBase").Value, import("./useValueBase").Value][] | null | undefined) => DayjsValue;
+    unique: () => void;
+    setMoment: () => void;
+    updateValue: () => void;
+    value: State<import("./useValueBase").StateValue>;
     setValue: (v: StateValueItem, fromInput: boolean) => void;
     onChangeDate: (v: Dayjs, flag: PanelFlags) => void;
+    getDayjsValue: () => DayjsValue;
+    allValuesUpdatedInMultipleMode: () => boolean | undefined;
 };

package/components/datepicker/useValue.js

@@ -1,37 +1,47 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime-corejs3/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["setValue", "value"];
-import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+var _excluded = ["setValue", "value", "getDayjsValue", "allValuesUpdatedInMultipleMode"];
 import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/slice";
-import _sortInstanceProperty from "@babel/runtime-corejs3/core-js/instance/sort";
 import { useInstance } from 'intact-react';
-import { useValue as useValueBase } from './basepicker';
-import dayjs from 'dayjs';
+import { useValueBase } from './useValueBase';
 import { last } from '../utils';
-import { endTime } from './helpers';
-import { PanelTypes, PanelFlags } from './usePanel';
-export function useValue(formats, disabled, panel) {
+import { Position } from './useHighlight';
+export function useValue(formats, disabled, panel, getHighlightPosition) {
   var instance = useInstance();
-  var _useValueBase = useValueBase(formats, disabled, panel, function (v) {
+  var _useValueBase = useValueBase(formats, disabled, panel,
+    // shouldUpdateValue
+    function (v) {
       var _instance$get = instance.get(),
         type = _instance$get.type,
         range = _instance$get.range;
-      return type !== 'datetime' && (!range || v.length === 2);
-    }, function (v) {
+      if (type === 'datetime') return false;
+      if (range) {
+        var start = v[0],
+          end = v[1];
+        if (!start || !end || end.isBefore(start)) {
+          return false;
+        }
+      }
+      return true;
+    },
+    // updateValueOnInput
+    function (v) {
       setValue(v, true);
-    }, function () {
+    },
+    // getEqualType
+    function () {
       var _instance$get2 = instance.get(),
         type = _instance$get2.type;
       return type === 'datetime' ? 'second' : type;
-    }, function (dayjsValue, value) {
-      if (instance.get('multiple') && panel.getPanel(PanelFlags.Start).value === PanelTypes.Time) {
-        value.set(_concatInstanceProperty(dayjsValue).call(dayjsValue, [last(value.value)]));
-      } else {
-        value.set(_sliceInstanceProperty(dayjsValue).call(dayjsValue, 0));
-      }
+    },
+    // updateStateValue
+    function (dayjsValue, value) {
+      value.set(_sliceInstanceProperty(dayjsValue).call(dayjsValue, 0));
     }),
     setValue = _useValueBase.setValue,
     value = _useValueBase.value,
+    getDayjsValue = _useValueBase.getDayjsValue,
+    allValuesUpdatedInMultipleMode = _useValueBase.allValuesUpdatedInMultipleMode,
     rest = _objectWithoutPropertiesLoose(_useValueBase, _excluded);
   function onChangeDate(v, flag) {
     var _instance$get3 = instance.get(),
@@ -41,36 +51,27 @@ export function useValue(formats, disabled, panel) {
     var _value;
     if (range) {
       var oldValue = last(value.value);
-      if (!oldValue || oldValue.length === 2) {
-        /**
-         * if we select the first value or re-select the value
-         * no matter what the flag is, we should set flag to start panel
-         * #877
-         */
-        flag = PanelFlags.Start;
+      var position = getHighlightPosition().value;
+      if (!oldValue || allValuesUpdatedInMultipleMode()) {
         _value = [fixDatetimeWithMinDate(v)];
+      } else if (position === Position.Start) {
+        if (oldValue.length === 1) {
+          _value = [fixDatetimeWithMinDate(v)];
+        } else {
+          _value = [fixDatetimeWithMinDate(v), oldValue[1]];
+        }
       } else {
         _value = [oldValue[0], fixDatetimeWithMaxDate(v)];
-        _sortInstanceProperty(_value).call(_value, function (a, b) {
-          return a.isAfter(b) ? 1 : -1;
-        });
       }
-      instance.trigger('selecting', _value);
+      // fix after selection is completed, refer to the updateValue function in useValueBase
+      // (_value as DayjsValueRange).sort((a, b) => a.isAfter(b) ? 1 : -1);
     } else {
       _value = fixDatetimeWithMinDate(v);
     }
     setValue(_value, false);
-    if (type === 'datetime') {
-      if (range) {
-        // only change to time panel after selected start and end date
-        if (_value.length === 2) {
-          panel.changePanel(PanelTypes.Time, PanelFlags.Start);
-          panel.changePanel(PanelTypes.Time, PanelFlags.End);
-        }
-      } else {
-        panel.changePanel(PanelTypes.Time, flag);
-      }
-    } else if (!multiple && (!range || _value.length === 2)) {
+    if (range) {
+      instance.trigger('selecting', _value, false);
+    } else if (!multiple && type !== 'datetime') {
       instance.hide();
     }
   }
@@ -83,11 +84,12 @@ export function useValue(formats, disabled, panel) {
     return v;
   }
   function fixDatetimeWithMaxDate(v) {
-    // the tiem of end datetime should be set to 23:59:59, #878
+    // the time of end datetime should be set to 23:59:59, #878
+    // @modify: don't set to 23:59:59 in new UE
     var maxDate = disabled.maxDate.value;
-    var date = v.toDate();
-    endTime(date);
-    v = dayjs(date);
+    // const date = v.toDate();
+    // endTime(date);
+    // v = dayjs(date);
     if (maxDate && v.isAfter(maxDate)) {
       return maxDate;
     }
@@ -96,6 +98,8 @@ export function useValue(formats, disabled, panel) {
   return _extends({
     value: value,
     setValue: setValue,
-    onChangeDate: onChangeDate
+    onChangeDate: onChangeDate,
+    getDayjsValue: getDayjsValue,
+    allValuesUpdatedInMultipleMode: allValuesUpdatedInMultipleMode
   }, rest);
 }

package/components/datepicker/useValueBase.d.ts

@@ -0,0 +1,28 @@
+import { State } from '../../hooks/useState';
+import { Dayjs, OpUnitType, QUnitType } from './dayjs';
+import type { useFormats } from './useFormats';
+import type { useDisabled } from './useDisabled';
+import { PanelFlags, usePanel } from './usePanel';
+import type { BasePickerProps } from './basepicker';
+export type Value = string | Date | number | Dayjs;
+export type StateValueRange = [Dayjs] | [Dayjs, Dayjs];
+export type StateValueItem = Dayjs | StateValueRange;
+export type StateValue = StateValueItem[];
+export type StringValue = string | string[] | [string, string] | [string, string][];
+export type DayjsValueRange = [Dayjs, Dayjs];
+export type DayjsValueItem = Dayjs | DayjsValueRange;
+export type DayjsValue = DayjsValueItem[];
+export declare function useValueBase({ createDateByValueFormat, createDateByShowFormat, getShowString, getValueString, }: ReturnType<typeof useFormats>, { isDisabled, minDate }: ReturnType<typeof useDisabled>, panel: ReturnType<typeof usePanel>, shouldUpdateValue: (v: StateValueItem) => boolean, updateValueOnInput: (v: DayjsValueItem) => void, getEqualType: () => OpUnitType | QUnitType, updateStateValue: (v: DayjsValue, value: State<StateValue>) => void): {
+    value: State<StateValue>;
+    format: () => string | string[];
+    formatSingleValue: (value: StateValueItem) => string;
+    onChangeTime: (date: Dayjs, flag: PanelFlags) => void;
+    getTimeValue: (flag: PanelFlags) => Dayjs | null | undefined;
+    setValue: (v: StateValueItem, fromInput: boolean) => void;
+    convertToDayjs: (v: BasePickerProps<Value>['value']) => DayjsValue;
+    getDayjsValue: () => DayjsValue;
+    unique: () => void;
+    setMoment: () => void;
+    updateValue: () => void;
+    allValuesUpdatedInMultipleMode: () => boolean | undefined;
+};