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

package/components/datepicker/useMonths.ts

@@ -41,10 +41,13 @@ export function useMonths(
     function onClick(date: Dayjs) {
         showDate.set(date);
         const datepickerType = instance.datepicker.get('type');
-        if (datepickerType !== 'month' && datepickerType !== 'year') {
-            instance.type.set('date');
-        } else {
+        
+        if (datepickerType === 'month' || datepickerType === 'year') {
             instance.triggerChange(date);
+        } else if (datepickerType === 'week') {
+            instance.type.set('week');
+        } else {
+            instance.type.set('date');
         }
     }
 

package/components/datepicker/usePanel.ts

@@ -3,37 +3,37 @@ import {useState} from '../../hooks/useState';
 import {Datepicker} from './index';
 import {DatepickerCalendar} from './calendar';
 
-export enum PanelTypes {
-    Date,
-    Time
-} 
+// export enum PanelTypes {
+//     Date,
+//     Time
+// } 
 
 export enum PanelFlags {
     Start,
     End
 }
 
-export function usePanel(type: PanelTypes = PanelTypes.Date) {
+export function usePanel() {
     const instance = useInstance() as Datepicker;
-    const startPanel = useState<PanelTypes>(type);
-    const endPanel = useState<PanelTypes>(type);
+    // const startPanel = useState<PanelTypes>(type);
+    // const endPanel = useState<PanelTypes>(type);
     const startRef = createRef<DatepickerCalendar>();
     const endRef = createRef<DatepickerCalendar>();
 
-    function changePanel(type: PanelTypes, flag: PanelFlags = PanelFlags.Start) {
-        getPanel(flag).set(type);
-    }
+    // function changePanel(type: PanelTypes, flag: PanelFlags = PanelFlags.Start) {
+    //     getPanel(flag).set(type);
+    // }
 
-    function getPanel(flag: PanelFlags) {
-        return flag === PanelFlags.Start ? startPanel : endPanel;
-    }
+    // function getPanel(flag: PanelFlags) {
+    //     return flag === PanelFlags.Start ? startPanel : endPanel;
+    // }
 
-    function reset() {
-        startPanel.set(type);
-        endPanel.set(type);
-    }
+    // function reset() {
+    //     startPanel.set(type);
+    //     endPanel.set(type);
+    // }
 
-    instance.on('show', reset);
+    // instance.on('show', reset);
 
-    return {startPanel, endPanel, changePanel, getPanel, reset, startRef, endRef};
+    return {/* startPanel, endPanel, changePanel, getPanel, reset,  */startRef, endRef};
 }

package/components/datepicker/useShowDate.ts

@@ -45,6 +45,9 @@ export function useShowDate(panel: ReturnType<typeof usePanel>) {
     
     // ensure the start panel's date is before the end panel's
     watchState(showDate, v => {
+        // only check on dual panels
+        if (!panel.startRef.value || !panel.endRef.value) return
+
         if (flag === PanelFlags.Start) {
             const endPanel = anotherPanel.value;
             if (endPanel) {
@@ -76,61 +79,38 @@ export function useShowDate(panel: ReturnType<typeof usePanel>) {
                 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() {
-        const year = showDate.value.get('year');
-        const month = showDate.value.get('month') + 1;
-
-        const map: { [key: string]: string } = {
-            'MM': _$(`${month}月`),                // 月标签
-            'YYYY': _$(`{n}年`, {n: year}),       // 年标签
-            'YYYY MM': _$(`{n}年{y}月`, {n: year, y: month})  // 年月组合标签
+        const map = {
+            MM: _$(`${showDate.value.get('month') + 1}月`),
+            YYYY: _$(`{n}年`, {n: showDate.value.get('year')}),
         };
-
-        let format;
-        switch (type) {
-            case 'week':
-                format = ['YYYY MM'];  // week 类型显示年月组合
-                break;
-            case 'quarter':
-                format = ['YYYY'];     // quarter 类型仅显示年
-                break;
-            default:
-                let yearMonthFormat = _$('yearMonthFormat');
-                if (yearMonthFormat === 'yearMonthFormat') {
-                    yearMonthFormat = 'YYYY MM';  // 默认格式
-                }
-                format = yearMonthFormat.split(' ');  // 其他类型按配置拆分
-                break;
+        
+        let yearMonthFormat = _$('yearMonthFormat');
+        if (yearMonthFormat === 'yearMonthFormat') {
+            yearMonthFormat = 'YYYY MM';
         }
+        
+        // quarter类型只显示年份
+        if (instance.get('type') === 'quarter') {
+            yearMonthFormat = 'YYYY';
+        }
+        
+        const format = yearMonthFormat.split(' ') as (keyof typeof map)[];
 
-         // 根据 type 动态调整显示的格式
-         return format.map(item => ({
-            value: map[item],  // 根据 format 项目生成标签
-            onClick: (e: IgnoreClickEvent) => {
+        return format.map(item => ({
+            value: map[item],
+            onClick(e: IgnoreClickEvent) {
                 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/components/datepicker/useStatus.ts

@@ -1,41 +1,60 @@
 import {useInstance} from 'intact';
 import {State} from '../../hooks/useState';
 import {Dayjs} from 'dayjs';
-import {isGT, isLT, isEqual} from './helpers';
-import type {StateValueItem, StateValueRange} from './basepicker';
+import {isGT, isLT, isEqual, last} from './helpers';
+import type {StateValueItem, StateValueRange} from './useValueBase';
 import type {DatepickerCalendar, DatepickerCalendarProps} from './calendar';
+import { Position } from './useHighlight';
 
 export function useStatus(focusDate: State<Dayjs | null>) {
     const instance = useInstance() as DatepickerCalendar;
+
+    // if focusDate exists, use it as the active date in range mode
+    function getValueByFocusDate() {
+        const { value, highlightPosition } = instance.get();
+        const { range, multiple } = instance.datepicker.get();
+
+        if (!focusDate.value || !range || multiple) return value;
+        
+        let lastValue = last(value) as StateValueRange;
+        if (!lastValue) return value;
+
+        lastValue = lastValue.slice() as StateValueRange;
+        if (highlightPosition === Position.Start) {
+            lastValue[0] = focusDate.value;
+        } else {
+            lastValue[1] = focusDate.value;
+        }
+
+        return value.slice(0, -1).concat([lastValue]);
+    }
     
     function isActive(date: Dayjs, type: DatepickerCalendarProps['type']) {
-        const isActive = (values: StateValueItem | StateValueItem[] | undefined): boolean => {
+        const _isActive = (values: StateValueItem | StateValueItem[] | undefined): boolean => {
             return Array.isArray(values) ?
-                !!(values as StateValueItem[]).find(v => isActive(v)) :
+                !!(values as StateValueItem[]).find(v => _isActive(v)) :
                 isEqual(values, date, type);
         };
-        return isActive(instance.get('value'));
+
+        return _isActive(getValueByFocusDate());
     }
 
     function isInRange(date: Dayjs, type: DatepickerCalendarProps['type']) {
-        const {range, multiple} = instance.datepicker.get();
-        const value = instance.get('value');
+        const {range} = instance.datepicker.get();
+        const value = getValueByFocusDate();
 
         if (range) {
-            if (!value) {
-                return false;
-            }
+            if (!value) return false;
+
             return (value as StateValueRange[]).some(([start, end]): boolean => {
-                if (!end) {
-                    end = focusDate.value as Dayjs | undefined;
-                    if (end && isLT(end, start, type)) {
+                if (start && end) {
+                    if (isLT(end, start, type)) {
                         // maybe the focusDate is less than start date
                         const tmp = start;
                         start = end;
                         end = tmp;
                     }
-                }
-                if (start && end) {
+
                     return isGT(date, start, type) && isLT(date, end, type);
                 }
                 return false;

package/components/datepicker/useValue.ts

@@ -1,121 +1,91 @@
 import {useInstance} from 'intact';
 import {
-    useValue as useValueBase,
+    useValueBase,
     StateValueItem,
     StateValueRange,
     DayjsValueItem,
     DayjsValueRange,
     DayjsValue,
-} from './basepicker';
+} from './useValueBase';
 import dayjs, {Dayjs} from 'dayjs';
-import {Datepicker} from './index';
+import type {Datepicker} from './index';
 import type {useFormats} from './useFormats';
 import type {useDisabled} from './useDisabled';
 import {last} from '../utils';
 import { endTime } from './helpers';
-import {PanelTypes, PanelFlags, usePanel} from './usePanel';
+import {PanelFlags, usePanel} from './usePanel';
+import { State } from '../../hooks/useState';
+import { Position } from './useHighlight';
 
 export function useValue(
     formats: ReturnType<typeof useFormats>,
     disabled: ReturnType<typeof useDisabled>,
     panel: ReturnType<typeof usePanel>,
+    getHighlightPosition: () => State<Position>,
 ) {
     const instance = useInstance() as Datepicker;
 
-    const {setValue, value, ...rest} = useValueBase(
+    const {setValue, value, getDayjsValue, allValuesUpdatedInMultipleMode, ...rest} = useValueBase(
         formats,
         disabled,
         panel,
+        // shouldUpdateValue
         function(v: StateValueItem) {
             const {type, range} = instance.get();
-            return type !== 'datetime' && (!range || (v as StateValueRange).length === 2)
+            if (type === 'datetime') return false;
+            if (range) {
+                const [start, end] = v as StateValueRange;
+                if (!start || !end || end.isBefore(start)) {
+                    return false;
+                }
+            }
+
+            return true;
         },
+        // updateValueOnInput
         function(v: DayjsValueItem) {
             setValue(v, true); 
         },
+        // getEqualType
         function() {
             const {type} = instance.get();
             return type === 'datetime' ? 'second' : type!;
         },
+        // updateStateValue
         function(dayjsValue, value) {
-            if (
-                instance.get('multiple') && 
-                panel.getPanel(PanelFlags.Start).value === PanelTypes.Time
-            ) {
-                value.set(dayjsValue.concat([last(value.value)] as DayjsValue));
-            } else {
-                value.set(dayjsValue.slice(0));
-            }
+            value.set(dayjsValue.slice(0));
         }
     );
 
     function onChangeDate(v: Dayjs, flag: PanelFlags) {
         const {multiple, type, range} = instance.get();
-        const activePosition = instance.activePosition.position.value;
         let _value: StateValueItem;
+
         if (range) {
             const oldValue = last(value.value as StateValueRange[]);
-            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?.length === 2) {  
-                    // Use activePosition instead of Coordinate  
-                    _value = activePosition === 'end' ?   
-                        [oldValue[0], fixDatetimeWithMinDate(v)] :  multiple ? 
-                        [fixDatetimeWithMinDate(v)] : 
-                        [fixDatetimeWithMinDate(v), oldValue[1]]; 
-                } else {  
-                    _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]];
-                    }
+            const position = getHighlightPosition().value;
+            if (!oldValue || allValuesUpdatedInMultipleMode()) {
+                _value = [fixDatetimeWithMinDate(v)];
+            } else if (position === Position.Start) {
+                if (oldValue.length === 1) {
+                    _value = [fixDatetimeWithMinDate(v)];
                 } else {
-                    _value = [oldValue[0], fixDatetimeWithMaxDate(v)];
+                    _value = [fixDatetimeWithMinDate(v), oldValue[1]];
                 }
-                (_value as DayjsValueRange).sort((a, b) => 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 as StateValueRange).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 as StateValueRange).length === 2)) {
+        if (range) {
+            instance.trigger('selecting', _value as StateValueRange, false);
+        } else if (!multiple && type !== 'datetime') {
             instance.hide();
         }
     }
@@ -130,17 +100,18 @@ export function useValue(
     }
 
     function fixDatetimeWithMaxDate(v: Dayjs) {
-        // 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
         const maxDate = disabled.maxDate.value;
-        const date = v.toDate();
+        // const date = v.toDate();
 
-        endTime(date);
-        v = dayjs(date);
+        // endTime(date);
+        // v = dayjs(date);
         if (maxDate && v.isAfter(maxDate)) {
             return maxDate;
         }
         return v;
     }
 
-    return {value, setValue, onChangeDate, ...rest};
+    return {value, setValue, onChangeDate, getDayjsValue, allValuesUpdatedInMultipleMode, ...rest};
 }