@king-design/intact 3.5.2 → 3.6.0

package/components/datepicker/useHighlight.ts

@@ -0,0 +1,81 @@
+import {useInstance, onMounted, nextTick} from 'intact';
+import type {Datepicker} from '.';
+import { useState, watchState, State } from '../../hooks/useState';
+import {last} from '../utils';
+import { StateValue, StateValueRange, Value } from './useValueBase';
+import dayjs, {Dayjs} from 'dayjs';
+
+type FullDatepickerType = 
+    | Datepicker<Value, true, true>
+    | Datepicker<Value, true, false>
+    | Datepicker<Value, false, true>
+    | Datepicker<Value, false, false>;
+
+export enum Position {
+    Start,
+    End
+}
+
+const DELIMITER_WIDTH = 14;
+const fakeDate = dayjs();
+
+export function useHighlight(
+    value: State<StateValue>,
+    getShowString: (value: Dayjs) => string,
+    keywords: State<string>,
+) {
+    const instance = useInstance() as FullDatepickerType;
+    const position = useState<Position>(Position.Start);
+    const highlightWidth = useState<number>(0);
+    const highlightLeft = useState<number>(0);
+
+    /**
+     * calculate the real width by rendering the showString to fake div
+     */
+    onMounted(() => {
+        const showString = getShowString(fakeDate);
+        instance.input.inputRef.value!.getStringWidth(showString).then((width) => {
+            highlightWidth.set(width);
+        });
+    });
+
+    /**
+     * change the left of style on position changed
+     */
+    watchState(position, (position) => {
+        highlightLeft.set(position === Position.Start ? 0 : highlightWidth.value + DELIMITER_WIDTH);
+    });
+
+    // if value is cleared reset the position to start
+    instance.watch('value', (v) => {
+        if (!v || Array.isArray(v) && !v.length) {
+            position.set(Position.Start);
+        }
+    });
+
+    function handleInputClick() {
+        const { range, type } = instance.get();
+        if (!range) return;
+
+        const cursorPosition = instance.input.inputRef.value!.getSelectionStart();
+
+        const showString = getShowString(fakeDate);
+        if (!cursorPosition || cursorPosition <= showString.length + 1 /* one whitespace */) {
+            position.set(Position.Start);
+        } else {
+            position.set(Position.End);
+        }
+    }
+
+    function togglePosition() {
+        position.set(position.value === Position.Start ? Position.End : Position.Start);
+    }
+
+    return {
+        position,
+        handleInputClick,
+        togglePosition,
+        highlightWidth,
+        highlightLeft,
+    };
+}

package/components/datepicker/useKeyboards.ts

@@ -92,7 +92,8 @@ export function useKeyboards(
         }
 
         let _focusDate = focusDate.value;
-        _focusDate = _focusDate.add(offset, type === 'date' ? 'day' : type);
+        const unit = type === 'date' ? 'day' : type;
+        _focusDate = _focusDate.add(offset, unit as any);
         focusDate.set(_focusDate);
 
         // change panel show date

package/components/datepicker/useMergeRange.ts

@@ -0,0 +1,54 @@
+import {useInstance} from 'intact';
+import {Dayjs} from './dayjs';
+import type {Datepicker} from './index';
+import {DayjsValueRange, DayjsValue} from './useValueBase';
+import type {useFormats} from './useFormats';
+
+// TODO isMerge
+export function useMergeRange(formats: ReturnType<typeof useFormats>) {
+    const instance = useInstance() as Datepicker;
+
+    function _mergeRanges(dayjsValue: DayjsValue, getShowString: (value: Dayjs) => string) {
+        const ranges = dayjsValue
+            .filter(Array.isArray)
+            .map(range => ({
+                start: (range as DayjsValueRange)[0],
+                end: (range as DayjsValueRange)[1]
+            }))
+            .sort((a, b) => a.start.valueOf() - b.start.valueOf());
+        
+        if (ranges.length === 0) return [];
+        
+        // 合并有交集的时间范围
+        const mergedRange = ranges.reduce((acc, curr) => {
+            if (!acc) return curr;
+            
+            return {
+                start: acc.start,
+                end: curr.end.valueOf() > acc.end.valueOf() ? curr.end : acc.end
+            };
+        });
+        
+        return [`${getShowString(mergedRange.start)} ~ ${getShowString(mergedRange.end)}`];
+    }
+
+    function formatMultipleValues(dayjsValue: DayjsValue, results: string[]): string[] {
+        // const {isMerge, nowrap} = instance.get();
+        
+        // if (isMerge && nowrap) {
+        //     const mergedResults = _mergeRanges(dayjsValue, (v: Dayjs) => v.format(formats.getShowFormat()));
+        //     if (mergedResults.length > 0) {
+        //         return [
+        //             ...mergedResults,
+        //             ...results.slice(1).map((result, index) => `${result}-${index}`)
+        //         ];
+        //     }
+        // }
+        
+        return results;
+    }
+
+    return {
+        formatMultipleValues
+    };
+}

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/useQuarters.ts

@@ -0,0 +1,47 @@
+import {useInstance} from 'intact';
+import dayjs, {Dayjs} from 'dayjs';
+import {isEqual} from './helpers';
+import type {DatepickerCalendar} from './calendar';
+import {State} from '../../hooks/useState';
+import {_$} from '../../i18n';
+import type {useStatus} from './useStatus';
+
+export function useQuarters(
+    showDate: State<Dayjs>,
+    status: ReturnType<typeof useStatus>,
+    focusDate: State<Dayjs | null>
+) {
+    const instance = useInstance() as DatepickerCalendar;
+
+    function getQuarters(now: Dayjs) {  
+        const ret = [];  
+        const year = showDate.value.year();  
+  
+        for (let i = 1; i <= 4; i++) {  
+            const 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: Dayjs) {
+        const quarterStart = date.startOf('quarter');
+        showDate.set(quarterStart);
+        const datepickerType = instance.datepicker.get('type');  
+        if (datepickerType === 'quarter') {  
+            instance.triggerChange(quarterStart);  
+        }  
+    }
+
+    return {getQuarters, onClick};
+}

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,10 +79,12 @@ 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');
+            case 'quarter':
+                return date.add(isEnd ? 1 : -1, 'quarter');
             default:
                 return date.add(isEnd ? 1 : -1, 'month');
-                break;
         }
     }
 
@@ -88,11 +93,17 @@ export function useShowDate(panel: ReturnType<typeof usePanel>) {
             MM: _$(`${showDate.value.get('month') + 1}月`),
             YYYY: _$(`{n}年`, {n: showDate.value.get('year')}),
         };
-
+        
         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)[];
 
         return format.map(item => ({

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,51 +1,59 @@
 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));
         }
     );
 
@@ -55,36 +63,29 @@ export function useValue(
 
         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;
+            const 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)];
-                (_value as DayjsValueRange).sort((a, b) => 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 as StateValueRange).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 as StateValueRange).length === 2)) {
+        if (range) {
+            instance.trigger('selecting', _value as StateValueRange, false);
+        } else if (!multiple && type !== 'datetime') {
             instance.hide();
         }
     }
@@ -99,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};
 }