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

package/components/datepicker/index.ts

@@ -1,29 +1,27 @@
 import {TypeDefs, provide} from 'intact';
 import template from './index.vdt';
-import {BaseSelect, BaseSelectProps} from '../select/base';
 import {DATEPICKER} from './constants';
 import dayjs, {Dayjs} from './dayjs';
 import {useValue} from './useValue';
 import {isNullOrUndefined} from 'intact-shared'
 import {_$} from '../../i18n';
 import {bind} from '../utils';
-import {State} from '../../hooks/useState';
 import {useDisabled} from './useDisabled';
 import {useFormats} from './useFormats';
 import {usePanel} from './usePanel';
 import {useFocusDate} from './useFocusDate';
 import {useKeyboards} from './useKeyboards';
 import {Shortcut} from './shortcuts';
-import {usePosition} from './usePosition';
-import {useMergeRange} from './useMergeRange';
-
+import {useHighlight} from './useHighlight';
+// import {useMergeRange} from './useMergeRange';
 import {
     BasePicker,
     BasePickerProps,
     BasePickerEvents,
     BasePickerBlocks,
-    Value
 } from './basepicker';
+import {Value} from './useValueBase';
+import { useConfirm } from './useConfirm';
 
 export * as shortcuts from './shortcuts';
 export { dayjs };
@@ -35,7 +33,7 @@ export interface DatepickerProps<
 > extends BasePickerProps<V extends string ? V : V | string, M, R> {
     type?: 'date' | 'datetime' | 'year' | 'month' | 'week' | 'quarter'
     shortcuts?: Shortcut[],
-    isMerge?: boolean
+    // isMerge?: boolean
 }
 
 export interface DatepickerEvents extends BasePickerEvents { }
@@ -49,13 +47,13 @@ const typeDefs: Required<TypeDefs<DatepickerProps>> = {
     ...BasePicker.typeDefs,
     type: ['date', 'datetime', 'year', 'month', 'week', 'quarter'],
     shortcuts: Array,
-    isMerge: Boolean
+    // isMerge: Boolean
 };
 
 const defaults = (): Partial<DatepickerProps> => ({
     ...BasePicker.defaults(),
     type: 'date',
-    isMerge: false
+    // isMerge: false
 });
 
 export class Datepicker<
@@ -68,18 +66,18 @@ export class Datepicker<
     static defaults = defaults;
 
     public formats = useFormats();
-    public disabled = useDisabled(this.formats);
+    public disabled = useDisabled(this.formats, () => this.highlight.position);
     public panel = usePanel();
     public focusDate = useFocusDate();
-    public value = useValue(this.formats, this.disabled, this.panel);
-    public activePosition = usePosition();
-    public mergeRange = useMergeRange(this.formats);
+    public value = useValue(this.formats, this.disabled, this.panel, () => this.highlight.position);
+    public highlight = useHighlight(this.value.value, this.formats.getShowString, this.input.keywords);
+    // public mergeRange = useMergeRange(this.formats);
+    private confirm = useConfirm(this.highlight, this.value, this.formats.getValueString);
     
     init() {
         super.init();
         provide(DATEPICKER, this);
         useKeyboards(this.panel.startRef, this.focusDate.focusDate);
-        this.activePosition.setupEventListeners();
     }
 
     protected getPlaceholder() {
@@ -90,37 +88,22 @@ export class Datepicker<
             case 'datetime':
                 return range ? _$('开始时间 ~ 结束时间') : _$('请选择日期和时间');
             case 'year':
-                return _$('请选择年份');
+                return range ? _$('开始年份 ~ 结束年份') : _$('请选择年份');
             case 'month':
-                return _$('请选择月份');
+                return range ? _$('开始月份 ~ 结束月份') : _$('请选择月份');
             case 'week':
-                return _$('请选择周');
+                return range ? _$('开始周 ~ 结束周') : _$('请选择周');
             case 'quarter':
-                return _$('请选择季度');
+                return range ? _$('开始季度 ~ 结束季度') : _$('请选择季度');
             default:
                 return range ? _$('开始日期 ~ 结束日期') : _$('请选择日期');
         }
     }
 
     protected getLabel() {
-        const {multiple} = this.get();
-        if(multiple) {
-            const results = this.value.format();
-            const dayjsValue = this.value.getDayjsValue();
-            return this.mergeRange.formatMultipleValues(dayjsValue, results as string[]);
-        }
         return this.value.format();
     }
 
-    @bind
-    protected clear(e: MouseEvent) {
-        super.clear(e);
-        if (this.get('type') === 'datetime') {
-            // reset the state to let user re-select
-            this.panel.reset();
-        }
-    }
-
     @bind
     private setByShortcut(shortcut: Shortcut) {
         const {setValue, convertToDayjs} = this.value;

package/components/datepicker/index.vdt

@@ -5,26 +5,26 @@ import {DatepickerTime} from './time';
 import {Icon} from '../icon';
 import {Button} from '../button';
 import {_$} from '../../i18n';
-import {makePanelStyles, makeDatePickRangeStyles} from './styles';
-import {PanelTypes, PanelFlags} from './usePanel';
+import {makeStyles, makePanelStyles, makeHighlightStyles} from './styles';
+import {PanelFlags} from './usePanel';
 import {isFunction} from 'intact-shared';
 import {Tabs, Tab} from '../tabs';
+import {Position} from './useHighlight';
 
-const {className, type, range, multiple, shortcuts} = this.get();
+const { k } = this.config;
+const {className, type, range, multiple, shortcuts, size} = this.get();
 const {
     value: {value},
     onChangeDate,
-    onConfirm,
+    /* onConfirm, */
     onChangeTime,
     onChangeDateForRange,
     getTimeValue,
 } = this.value;
-const { position, charLength, startTextLength, handleInputClick } = this.activePosition
-const { k } = this.config;
-const showPanel = range && position.value === 'end';
-const positionDisplay = !multiple && range && (type === 'datetime' || type === 'date');
+const { onConfirm } = this.confirm;
+const { position, handleInputClick, highlightWidth, highlightLeft } = this.highlight;
 // 判断是否显示双面板
-const showDualPanels = range && (type === 'date' || type === 'month' || type === 'year')
+const showDualPanels = range && type !== 'datetime';
 
 const classNameObj = {
     [`${k}-datepicker-content`]: true,
@@ -33,22 +33,12 @@ const classNameObj = {
 };
 const classDatePickerObj = {
     [`${k}-datepicker`]: true,
-    [makeDatePickRangeStyles(k, position.value, positionDisplay, charLength.value, startTextLength.value)]: true,
+    [makeHighlightStyles(k, size, highlightWidth.value, highlightLeft.value)]: range,
+    [makeStyles(k)]: true,
 }
 const {isDisabledTime, isDisabledConfirm} = this.disabled;
-const {startPanel, endPanel, getPanel, startRef, endRef} = this.panel;
+const {startRef, endRef} = this.panel;
 const generatePanel = (flag) => {
-    const panel = getPanel(flag);
-    const timeValue = getTimeValue(flag);
-    let dateString = '0000-00-00';
-    let timeString = '00:00:00';
-
-    if (type === 'datetime' && timeValue) {
-        const valueString = this.formats.getShowString(timeValue).split(/\s+/);
-        dateString = valueString[0];
-        timeString = valueString[1];
-    }
-
     return (
         <div class={`${k}-datepicker-calendar-time-wrapper`}>
             <DatepickerCalendar
@@ -57,22 +47,38 @@ const generatePanel = (flag) => {
                 type={type === 'datetime' ? 'date' : type}
                 flag={flag}
                 ref={flag === PanelFlags.Start ? startRef : endRef}
+                highlightPosition={position.value}
             />
-            <div class={`${k}-datepicker-time-wrapper`} v-if={type === 'datetime'}>
-                <div class={`${k}-datepicker-time-time`}>{timeString}</div> 
-                <DatepickerTime
-                    value={timeValue}
-                    ev-$change:value={v => onChangeTime(v, flag)}
-                    format={this.formats.getValueFormat()}
-                    flag={flag}
-                    isDisabledTime={isDisabledTime}
-                />
-            </div> 
+            <div class={`${k}-datepicker-time-wrapper`} v-if={type === 'datetime'}>{
+                (() => {
+                    let timeValue = getTimeValue(flag);
+                    if (flag === PanelFlags.End && !timeValue) {
+                        timeValue = getTimeValue(PanelFlags.Start);
+                    }
+                    let timeString = '00:00:00';
+
+                    if (timeValue) {
+                        const valueString = this.formats.getShowString(timeValue).split(/\s+/);
+                        timeString = valueString[1];
+                    }
+
+                    return <template>
+                        <div class={`${k}-datepicker-time-time`}>{timeString}</div> 
+                        <DatepickerTime
+                            value={timeValue}
+                            ev-$change:value={v => onChangeTime(v, flag)}
+                            format={this.formats.getValueFormat()}
+                            flag={flag}
+                            isDisabledTime={isDisabledTime}
+                        />
+                    </template>
+                })()
+            }</div> 
         </div>
     );
 };
 
-<t:super class={classDatePickerObj} onClick={handleInputClick}>
+<t:super class={classDatePickerObj} onClick={handleInputClick} alwaysShowOnClick={true}>
     <b:base-menu>
         <DropdownMenu class={classNameObj}>
             <div class={`${k}-datepicker-shortcuts`} v-if={shortcuts && shortcuts.length}>
@@ -86,8 +92,8 @@ const generatePanel = (flag) => {
             </div>
             <div class={`${k}-datepicker-wrapper`}>
                 <div class={`${k}-datepicker-calendars`}>
-                    { showDualPanels ? generatePanel(PanelFlags.Start) : (showPanel ? null : generatePanel(PanelFlags.Start))}
-                    { showDualPanels ? generatePanel(PanelFlags.End) : (showPanel ? generatePanel(PanelFlags.End) : null)}
+                    {generatePanel(!showDualPanels && position.value === Position.End ? PanelFlags.End : PanelFlags.Start)}
+                    {showDualPanels ? generatePanel(PanelFlags.End) :  null}
                 </div>
                 <div v-if={type === 'datetime'} class={`${k}-datepicker-footer`}>
                     <Button type="primary" size="small"

package/components/datepicker/shortcuts.ts

@@ -1,6 +1,6 @@
 import {Children} from 'intact';
 import {_$} from '../../i18n';
-import {Value} from './basepicker';
+import {Value} from './useValueBase';
 
 export type Shortcut = {
     label: (() => Children) | Children 

package/components/datepicker/styles.ts

@@ -3,6 +3,7 @@ import {theme, setDefault} from '../../styles/theme';
 import {deepDefaults, sizes, Sizes, getRight, getLeft, palette} from '../../styles/utils';
 import '../../styles/global';
 import { cache } from '../utils';
+import { select } from '../select/styles';
 
 const defaults = {
     width: `300px`,
@@ -81,10 +82,21 @@ setDefault(() => {
     makePanelStyles?.clearCache();
     makeCalendarStyles?.clearCache();
     makeTimeStyles?.clearCache();
+    makeHighlightStyles?.clearCache();
 });
 
 export {datepicker};
 
+export const makeStyles = cache((k: string) => {
+    return css`
+        &.${k}-dropdown-open {
+            .${k}-input-inner {
+                color: ${theme.color.placeholder};
+            }
+        }
+    `;
+});
+
 export const makePanelStyles = cache(function makePanelStyles(k: string) {
     return css`
         display: flex;
@@ -298,29 +310,26 @@ export const makeTimeStyles = cache(function makeTimeStyles(k: string) {
         position: relative;
         .${k}-scroll-select {
             flex: 1;
-            height: 305px;
+            height: 265px;
         }
     `;
 });
 
-export const makeDatePickRangeStyles = cache(function makeTimeStyles(k: string, activePositionValue: string, display: boolean, charLength: number = 10, startTextLength: number = 10) {
-    const displayType = display ? 'block' : 'none';
-    const charWidthPx = 8;
-    const highlightWidthPx = charLength * charWidthPx;
-    
-    // 计算结束文本的起始位置 - 紧接着开始文本
-    const endTextStartPos = startTextLength * charWidthPx;
-    
+export const makeHighlightStyles = cache(function makeHighlightStyles(k: string, size: Sizes, highlightWidth: number, highlightLeft: number) {
+    const paddingLeft = getLeft(select[size].padding);
     return css`
-        &:hover:before, &:focus:before{
-            content: '';
-            display: ${displayType};
-            width: ${highlightWidthPx}px;
-            height: 1px;
-            position: absolute;
-            background-color: ${datepicker.item.active.bgColor};
-            left: ${activePositionValue === 'start' ? '0' : endTextStartPos + 'px'};
-            bottom: 0;
+        &.${k}-dropdown-open {
+            &:before {
+                content: '';
+                display: block;
+                width: ${highlightWidth ? highlightWidth + 'px' :  '50%'};
+                height: 1px;
+                position: absolute;
+                background-color: ${datepicker.item.active.bgColor};
+                left: calc(${paddingLeft} + ${highlightLeft}px);
+                bottom: 0;
+                transition: left ${theme.transition.middle};
+            }
         }   
     `;
 });

package/components/datepicker/useConfirm.ts

@@ -0,0 +1,82 @@
+import {useInstance, Component, TypeDefs} from 'intact';
+import {useState, watchState, State} from '../../hooks/useState';
+import dayjs, {Dayjs, OpUnitType, QUnitType} from './dayjs';
+import {findValueIndex} from './helpers';
+import type {useFormats} from './useFormats';
+import type {useDisabled} from './useDisabled';
+import {isEqualArray, last, bind} from '../utils';
+import {PanelFlags, usePanel} from './usePanel';
+import type {BasePicker, BasePickerProps} from './basepicker';
+import type { Datepicker } from '.';
+import { Position, useHighlight } from './useHighlight';
+import { useValue } from './useValue';
+import { StateValueRange, StateValue, DayjsValueRange } from './useValueBase';
+
+export function useConfirm(
+    highlight: ReturnType<typeof useHighlight>,
+    value: ReturnType<typeof useValue>,
+    getValueString: ReturnType<typeof useFormats>['getValueString'],
+) {
+    const instance = useInstance() as Datepicker;
+    let selectionState = [false, false];
+
+    /**
+     * can not use hide event to do it
+     * because value will be reset to dayjsValue on hide in useValue
+     */
+    instance.on('$change:show', (show) => {
+        if (!show) {
+            reset();
+            if (instance.get('range') && hasWholeRangeValue()) {
+                // to fix the order
+                value.updateValue();
+            }
+        }
+    });
+
+    instance.on('selecting', () => {
+        const { type } = instance.get();
+        if (type !== 'datetime') {
+            onConfirm();
+        }
+    });
+
+    function reset() {
+        selectionState = [false, false];
+    }
+
+    function onConfirm() {
+        const { multiple, range } = instance.get();
+        if (range) {
+            const position = highlight.position.value; 
+            selectionState[position] = true;
+
+            if (selectionState.every(state => state)) {
+                if (!multiple) {
+                    instance.hide(); 
+                } else {
+                    // update value directly on multiple mode
+                    reset();
+                    value.unique();
+                    value.updateValue();
+                }
+            }
+
+            highlight.togglePosition();
+        } else {
+            if (!multiple) {
+                instance.hide();
+            } else {
+                value.unique();
+            }
+            value.updateValue();
+        }
+    }
+
+    function hasWholeRangeValue() {
+        const lastValue = last(value.value.value) as StateValueRange;
+        return lastValue && lastValue.length === 2;
+    }
+
+    return { onConfirm }
+}

package/components/datepicker/useDisabled.ts

@@ -5,10 +5,14 @@ import type {Datepicker} from './index';
 import {isNullOrUndefined} from 'intact-shared';
 import {isGT, isLT, last} from './helpers';
 import type {useFormats} from './useFormats';
-import {PanelFlags, PanelTypes} from './usePanel';
-import {Value} from './basepicker';
+import {PanelFlags} from './usePanel';
+import {Value, StateValueRange, StateValueItem} from './useValueBase';
+import { Position } from './useHighlight';
 
-export function useDisabled({createDateByValueFormat}: ReturnType<typeof useFormats>) {
+export function useDisabled(
+    {createDateByValueFormat}: ReturnType<typeof useFormats>,
+    getHighlightPosition?: () => State<Position>
+) {
     const instance = useInstance() as Datepicker;
     const maxDate = useState<Dayjs | null>(null);
     const minDate = useState<Dayjs | null>(null);
@@ -35,50 +39,44 @@ export function useDisabled({createDateByValueFormat}: ReturnType<typeof useForm
             !!disabledDate && disabledDate(value);
     }
 
-    function isDisabledTime(value: Dayjs, flag: PanelFlags): boolean {
-        if (!isDisabled(value, 'second')) {
-            if (!instance.get('range')) return false;
-
-            // compare the start and the end datetime 
-            const anotherDatetime = instance.value.getTimeValue(
-                flag === PanelFlags.Start ? PanelFlags.End : PanelFlags.Start
-            );
-            if (!anotherDatetime) return false;
-            if (flag === PanelFlags.Start) {
-                return value.isAfter(anotherDatetime, 'second');
-            } else {
-                return value.isBefore(anotherDatetime, 'second');
-            }
-        }
-        return true;
+    function isDisabledTime(value: Dayjs): boolean {
+        return isDisabled(value, 'second');
     }
 
     function isDisabledConfirm(): boolean {
         const lastValue = last(instance.value.value.value);
-        if (!lastValue) return true;
+        const {range, multiple} = instance.get();
+        if (!lastValue || instance.value.allValuesUpdatedInMultipleMode()) return true;
 
-        const {range} = instance.get();
-        if (range && (lastValue as [Dayjs, Dayjs?]).length === 1) return false;
-
-        const {startPanel, endPanel} = instance.panel;
-        if (startPanel.value === PanelTypes.Date && endPanel.value === PanelTypes.Date) {
-            return true;
+        if (range && getHighlightPosition) {
+            const position = getHighlightPosition();
+            // if the position is not selected, it should be disabled
+            if (!(lastValue as StateValueRange)[position.value]) {
+                return true;
+            }
         }
 
+        return isDisabledValue(lastValue);
+    }
+
+    function isDisabledValue(value: StateValueItem): boolean {
+        const { range } = instance.get();
         let start: Dayjs;
         let end: Dayjs | undefined;
+
         if (range) {
-            start = (lastValue as [Dayjs, Dayjs])[0];
-            end = (lastValue as [Dayjs, Dayjs])[1];
+            start = (value as [Dayjs, Dayjs])[0];
+            end = (value as [Dayjs, Dayjs])[1];
         } else {
-            start = lastValue as Dayjs;
+            start = value as Dayjs;
         }
-        if (isDisabledTime(start, PanelFlags.Start) || end && isDisabledTime(end, PanelFlags.End)) {
+
+        if (isDisabledTime(start) || end && isDisabledTime(end)) {
             return true;
         }
 
         return false;
     }
 
-    return {isDisabled, isDisabledTime, isDisabledConfirm, maxDate, minDate};
+    return {isDisabled, isDisabledTime, isDisabledConfirm, isDisabledValue, maxDate, minDate};
 }

package/components/datepicker/useFormats.ts

@@ -1,8 +1,8 @@
 import {useInstance} from 'intact';
-import dayjs, {Dayjs} from './dayjs';
+import dayjs, {Dayjs} from 'dayjs';
 import {isString} from 'intact-shared';
 import type {Datepicker} from './index';
-import {Value} from './basepicker';
+import type {Value} from './useValueBase';
 
 const FORMATS = {
     date: 'YYYY-MM-DD',
@@ -25,9 +25,13 @@ export function useFormats() {
         const {format, showFormat, type} = instance.get();
         return showFormat || format || FORMATS[type!];
     }
-
+    
+    /**
+     * 根据日期字符串，按照格式创建日期对象
+     */
     function createDateByValueFormat(value: Value) {
-        return dayjs(value, isString(value) ? getValueFormat() : undefined);
+        const format = isString(value) ? getValueFormat() : undefined;
+        return dayjs(value, format);
     }
 
     function createDateByShowFormat(value: string) {

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

@@ -1,10 +1,10 @@
 import {useInstance} from 'intact';
 import {Dayjs} from './dayjs';
 import type {Datepicker} from './index';
-import {DayjsValueRange, DayjsValue} from './basepicker';
+import {DayjsValueRange, DayjsValue} from './useValueBase';
 import type {useFormats} from './useFormats';
 
-
+// TODO isMerge
 export function useMergeRange(formats: ReturnType<typeof useFormats>) {
     const instance = useInstance() as Datepicker;
 
@@ -33,17 +33,17 @@ export function useMergeRange(formats: ReturnType<typeof useFormats>) {
     }
 
     function formatMultipleValues(dayjsValue: DayjsValue, results: string[]): string[] {
-        const {isMerge, nowrap} = instance.get();
+        // 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}`)
-                ];
-            }
-        }
+        // 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;
     }