@king-design/intact 3.6.0-beta.0 → 3.6.0

package/es/components/datepicker/usePanel.js

@@ -1,45 +1,32 @@
 import { useInstance, createRef } from 'intact';
-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/es/components/datepicker/useShowDate.d.ts

@@ -5,7 +5,7 @@ export declare function useShowDate(panel: ReturnType<typeof usePanel>): {
     date: import("../../hooks/useState").State<Dayjs>;
     getDateLabel: () => {
         value: string;
-        onClick: (e: IgnoreClickEvent) => void;
+        onClick(e: IgnoreClickEvent): void;
     }[];
     prevMonth: () => void;
     nextMonth: () => void;

package/es/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,63 +68,36 @@ 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');
-        break;
       case 'quarter':
         return date.add(isEnd ? 1 : -1, 'quarter');
-        break;
       default:
         return date.add(isEnd ? 1 : -1, 'month');
-        break;
     }
   }
   function getDateLabel() {
-    var year = showDate.value.get('year');
-    var month = showDate.value.get('month') + 1;
     var map = {
-      'MM': _$(month + "\u6708"),
-      'YYYY': _$("{n}\u5E74", {
-        n: year
-      }),
-      'YYYY MM': _$("{n}\u5E74{y}\u6708", {
-        n: year,
-        y: month
-      }) // 年月组合标签
+      MM: _$(showDate.value.get('month') + 1 + "\u6708"),
+      YYYY: _$("{n}\u5E74", {
+        n: showDate.value.get('year')
+      })
     };
-    var format;
-    switch (type) {
-      case 'week':
-        format = ['YYYY MM']; // week 类型显示年月组合
-        break;
-      case 'quarter':
-        format = ['YYYY']; // quarter 类型仅显示年
-        break;
-      default:
-        var yearMonthFormat = _$('yearMonthFormat');
-        if (yearMonthFormat === 'yearMonthFormat') {
-          yearMonthFormat = 'YYYY MM'; // 默认格式
-        }
-        format = yearMonthFormat.split(' '); // 其他类型按配置拆分
-        break;
+    var yearMonthFormat = _$('yearMonthFormat');
+    if (yearMonthFormat === 'yearMonthFormat') {
+      yearMonthFormat = 'YYYY MM';
+    }
+    // quarter类型只显示年份
+    if (instance.get('type') === 'quarter') {
+      yearMonthFormat = 'YYYY';
     }
-    // 根据 type 动态调整显示的格式
+    var format = yearMonthFormat.split(' ');
     return _mapInstanceProperty(format).call(format, function (item) {
       return {
         value: map[item],
         onClick: function onClick(e) {
           e._ignore = true;
-          // 根据点击的项设置不同的 type
-          if (item === 'YYYY MM') {
-            instance.type.set('week'); // 点击年月组合，保持 week
-          } else if (item === 'YYYY') {
-            instance.type.set(type === 'quarter' ? 'quarter' : 'year'); // 根据当前 type 决定
-          } else if (item === 'MM') {
-            instance.type.set('month'); // 点击月，切换到 month
-          } else {
-            instance.type.set('date'); // 默认切换到 date
-          }
+          instance.type.set(item === 'YYYY' ? 'year' : 'month');
         }
       };
     });

package/es/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';
-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/es/components/datepicker/useValue.d.ts

@@ -1,17 +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;
+    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;
-    value: import("../../hooks/useState").State<import("./basepicker").StateValue>;
+    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/es/components/datepicker/useValue.js

@@ -1,100 +1,77 @@
 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';
-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(),
       multiple = _instance$get3.multiple,
       type = _instance$get3.type,
       range = _instance$get3.range;
-    var activePosition = instance.activePosition.position.value;
     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;
-        if ((type === 'datetime' || type === 'date') && (oldValue == null ? void 0 : oldValue.length) === 2) {
-          // Use activePosition instead of Coordinate  
-          _value = activePosition === 'end' ? [oldValue[0], fixDatetimeWithMinDate(v)] : multiple ? [fixDatetimeWithMinDate(v)] : [fixDatetimeWithMinDate(v), oldValue[1]];
-        } else {
+      var position = getHighlightPosition().value;
+      if (!oldValue || allValuesUpdatedInMultipleMode()) {
+        _value = [fixDatetimeWithMinDate(v)];
+      } else if (position === Position.Start) {
+        if (oldValue.length === 1) {
           _value = [fixDatetimeWithMinDate(v)];
-        }
-      } else {
-        if (type === 'datetime') {
-          if (oldValue.length === 1) {
-            // 如果只有开始日期，根据activePosition决定是替换开始日期还是设置结束日期
-            _value = activePosition === 'end' ? [oldValue[0], fixDatetimeWithMaxDate(v)] : [fixDatetimeWithMaxDate(v)];
-          } else {
-            // oldValue.length === 2的情况
-            _value = activePosition === 'end' ? [oldValue[0], fixDatetimeWithMaxDate(v)] : multiple ? [fixDatetimeWithMaxDate(v)] : [fixDatetimeWithMaxDate(v), oldValue[1]];
-          }
         } else {
-          _value = [oldValue[0], fixDatetimeWithMaxDate(v)];
+          _value = [fixDatetimeWithMinDate(v), oldValue[1]];
         }
-        _sortInstanceProperty(_value).call(_value, function (a, b) {
-          return a.isAfter(b) ? 1 : -1;
-        });
+      } else {
+        _value = [oldValue[0], fixDatetimeWithMaxDate(v)];
       }
-      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 (type === 'week') {
-      _value = v.startOf('week');
-      setValue(_value, false);
-      instance.hide();
-    } else if (type === 'quarter') {
-      _value = v.startOf('quarter');
-      setValue(_value, false);
-      instance.hide();
-    } else if (!multiple && (!range || _value.length === 2)) {
+    if (range) {
+      instance.trigger('selecting', _value, false);
+    } else if (!multiple && type !== 'datetime') {
       instance.hide();
     }
   }
@@ -107,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;
     }
@@ -120,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/es/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;
+};