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

package/components/timepicker/panelPicker.ts

@@ -10,14 +10,18 @@ import {useValue} from './useValue';
 import {useDisabled} from './useDisabled';
 import {usePanel} from '../datepicker/usePanel';
 import {State} from '../../hooks/useState';
-import {PanelTypes} from '../datepicker/usePanel';
 import {useStep} from './useStep';
 import {
     TimepickerProps,
     TimepickerEvents,
     TimepickerBlocks,
     typeDefs,
+    NOW_START,
+    NOW_END,
 } from './constants';
+import { useConfirm } from './useConfirm';
+import { StateValueItem } from '../datepicker/useValueBase';
+import { useDefaultValue } from './useDefaultValue';
 
 export class PanelPicker<
     Multipe extends boolean = false,
@@ -31,10 +35,12 @@ export class PanelPicker<
     static typeDefs = typeDefs;
 
     public formats = useFormats();
-    public disabled = useDisabled(this.formats);
-    public panel = usePanel(PanelTypes.Time);
-    public value = useValue(this.formats, this.disabled, this.panel);
+    public defaultValue = useDefaultValue();
+    public disabled = useDisabled(this.formats, this.defaultValue);
+    public panel = usePanel();
+    public value = useValue(this.formats, this.disabled, this.panel, this.defaultValue);
     public step = useStep(this.disabled, this.formats);
+    public confirm = useConfirm(this.value, this.formats.getValueString, this.defaultValue);
 
     protected getPlaceholder() {
         const {placeholder, range} = this.get();

package/components/timepicker/panelPicker.vdt

@@ -7,11 +7,11 @@ import {Button} from '../button';
 import {PanelFlags} from '../datepicker/usePanel';
 import {last} from '../datepicker/helpers';
 import {ScrollSelect} from '../scrollSelect';
+import { makeStyles as makeStylesInheritDatepicker } from '../datepicker/styles';
 
 const {className, range, multiple, min, max} = this.get();
 const {
     value: {value},
-    onConfirm,
     onChangeTime,
     onChangeTimeByStep,
     getTimeValue,
@@ -19,6 +19,7 @@ const {
 } = this.value;
 const lastValue = last(value);
 const { k } = this.config;
+const { onConfirm } = this.confirm;
 
 const classNameObj = {
     [`${k}-time-content`]: true,
@@ -57,7 +58,7 @@ const generatePanel = flag => {
     );
 };
 
-<t:super class={`${k}-timepicker`}>
+<t:super class={`${k}-timepicker ${makeStylesInheritDatepicker(k)}`}>
     <b:base-menu>
         <DropdownMenu class={classNameObj}>
             <div class={`${k}-datepicker-wrapper`}>
@@ -66,9 +67,6 @@ const generatePanel = flag => {
                     {range ? generatePanel(PanelFlags.End) : null} 
                 </div>
                 <div class={`${k}-datepicker-footer`}>
-                    <Button v-if={!range && !multiple && !max && !min} type="link" size="small"
-                        ev-click={setMoment}
-                    >{_$('此刻')}</Button>
                     <Button type="primary" size="small"
                         disabled={isDisabledConfirm()}
                         ev-click={onConfirm}

package/components/timepicker/styles.ts

@@ -40,6 +40,7 @@ export const makePanelStyles = cache(function makePanelStyles(k: string) {
             &.${k}-range {
                 .${k}-datepicker-time {
                     width: auto;
+                    border: ${timepicker.border};
                 }
                 .${k}-scroll-select {
                     height: ${timepicker.range.scrollHeight};

package/components/timepicker/useConfirm.ts

@@ -0,0 +1,33 @@
+import {useInstance, Component, TypeDefs} from 'intact';
+import {useState, watchState, State} from '../../hooks/useState';
+import type {useFormats} from './useFormats';
+import type {useDisabled} from './useDisabled';
+import {isEqualArray, last, bind} from '../utils';
+import type { PanelPicker } from './panelPicker';
+import { useValue } from './useValue';
+import { StateValueRange, StateValue, DayjsValueRange, StateValueItem } from '../datepicker/useValueBase';
+import type { useDefaultValue } from './useDefaultValue';
+
+export function useConfirm(
+    value: ReturnType<typeof useValue>,
+    getValueString: ReturnType<typeof useFormats>['getValueString'],
+    defaultValue: ReturnType<typeof useDefaultValue>,
+) {
+    const instance = useInstance() as PanelPicker;
+
+    function onConfirm() {
+        const { multiple } = instance.get();
+        // if we click confirm button directly, set the value to placeholder values
+        value.setValue(defaultValue.get(), false);
+
+        if (!multiple) {
+            instance.hide();
+        } else {
+            value.unique();
+        }
+
+        value.updateValue();
+    }
+
+    return { onConfirm }
+}

package/components/timepicker/useDefaultValue.ts

@@ -0,0 +1,30 @@
+import { useInstance } from 'intact';
+import { StateValueItem } from '../datepicker/useValueBase';
+import type { PanelPicker } from './panelPicker';
+import { last } from '../datepicker/helpers';
+import {NOW_START, NOW_END} from './constants';
+import { isArray } from 'intact-shared';
+
+export function useDefaultValue() {
+    const instance = useInstance() as PanelPicker; 
+
+    function get(): StateValueItem {
+        const _value = instance.value.value.value;
+        const lastValue = last(_value);
+        const { range } = instance.get();
+
+        if (range) {
+            // consider the second last value to maintain consistency
+            const penulimate = getPenulimate(_value);
+            return Object.assign([NOW_START, NOW_END], penulimate, lastValue);
+        }
+        return lastValue || NOW_START;
+    }
+
+    return { get };
+}
+
+function getPenulimate(value: unknown[]) {
+    if (!isArray(value)) return;
+    return value[value.length - 2];
+}

package/components/timepicker/useDisabled.ts

@@ -1,13 +1,26 @@
+import { useInstance } from 'intact';
 import {useDisabled as useDisabledBase} from '../datepicker/useDisabled';
 import type {useFormats} from './useFormats';
 import {PanelFlags} from '../datepicker/usePanel';
+import {isGT, isLT, last} from '../datepicker/helpers';
+import type { PanelPicker } from './panelPicker';
+import { StateValueItem } from '../datepicker/useValueBase';
+import type { useDefaultValue } from './useDefaultValue';
 
-export function useDisabled(formats: ReturnType<typeof useFormats>) {
-    const {isDisabledTime, ...rest} = useDisabledBase(formats);
+export function useDisabled(
+    formats: ReturnType<typeof useFormats>,
+    defaultValue: ReturnType<typeof useDefaultValue>,
+) {
+    const instance = useInstance() as PanelPicker; 
+    const {isDisabledTime, isDisabledConfirm: isDisabledConfirmBase, isDisabledValue, ...rest} = useDisabledBase(formats);
 
     function isDisabledTimeByStep(value: string, flag: PanelFlags) {
-        return isDisabledTime(formats.createDateByValueFormat(value), flag);
+        return isDisabledTime(formats.createDateByValueFormat(value));
     } 
 
-    return {isDisabledTime, isDisabledTimeByStep, ...rest};
+    function isDisabledConfirm(): boolean {
+        return isDisabledValue(defaultValue.get());
+    } 
+
+    return {isDisabledTime, isDisabledTimeByStep, isDisabledConfirm, isDisabledValue, ...rest};
 }

package/components/timepicker/useFormats.ts

@@ -2,7 +2,7 @@ import {useInstance, Component} from 'intact';
 import dayjs, {Dayjs} from '../datepicker/dayjs';
 import {isString} from 'intact-shared';
 import type {TimepickerProps} from './';
-import type {Value} from '../datepicker/basepicker';
+import type {Value} from '../datepicker/useValueBase';
 import {YEAR_FORMAT, TIME_FORMAT, PREFIX} from './constants'
 
 export function useFormats<T extends Component<TimepickerProps>>() {

package/components/timepicker/useValue.ts

@@ -2,23 +2,29 @@ import {useInstance} from 'intact';
 import type {PanelPicker} from './panelPicker';
 import type {useFormats} from './useFormats';
 import {last} from '../utils';
-import {
-    useValue as useValueBase,
-    StateValueItem,
-    DayjsValueItem
-} from '../datepicker/basepicker';
+import {useValueBase, StateValueItem, DayjsValueItem, DayjsValue, StateValueRange} from '../datepicker/useValueBase';
 import type {useDisabled} from '../datepicker/useDisabled';
 import type {usePanel} from '../datepicker/usePanel';
 import {NOW_START, NOW_END} from './constants';
 import {PanelFlags} from '../datepicker/usePanel';
+import type Dayjs from 'dayjs';
+import type { useDefaultValue } from './useDefaultValue';
 
 export function useValue(
     formats: ReturnType<typeof useFormats>,
     disabled: ReturnType<typeof useDisabled>,
     panel: ReturnType<typeof usePanel>,
+    defaultValue: ReturnType<typeof useDefaultValue>,
 ) {
     const instance = useInstance() as PanelPicker;
-    const {value, getDayjsValue, setValue, onChangeTime, ...rest} = useValueBase(
+    const {
+        value,
+        getDayjsValue,
+        setValue,
+        onChangeTime,
+        getTimeValue: getTimeValueBase,
+        ...rest
+    } = useValueBase(
         formats,
         disabled,
         panel,
@@ -28,7 +34,7 @@ export function useValue(
         function(v: DayjsValueItem) {
             // pop the last value when input
             // because it is a placeholder date
-            value.value.pop();
+            // value.value.pop(); // no placeholder any more 
             setValue(v, true);
         },
         function() {
@@ -39,21 +45,18 @@ export function useValue(
         }
     );
 
-    setValue(getPlaceholderDates(), false);
-
-    instance.watch('value', value => {
-        const dayjsValue = getDayjsValue(); 
-        setValue(last(dayjsValue) || getPlaceholderDates(), false);
-    });
-
-    function getPlaceholderDates(): StateValueItem {
-        return instance.get('range') ? [NOW_START, NOW_END] : NOW_START;
-    }
-
     function onChangeTimeByStep(v: string, flag: PanelFlags) {
         const date = formats.createDateByValueFormat(v);
         onChangeTime(date, flag);
     }
 
-    return {value, setValue, getDayjsValue, onChangeTime, onChangeTimeByStep, ...rest};
+    function getTimeValue(flag: PanelFlags): Dayjs.Dayjs | null | undefined {
+        const value = defaultValue.get();
+        if (instance.get('range')) {
+            return (value as StateValueRange)[flag];
+        }
+        return value as Dayjs.Dayjs;
+    }
+
+    return {value, setValue, getDayjsValue, onChangeTime, onChangeTimeByStep, getTimeValue, ...rest};
 }

package/components/tour/index.spec.ts

@@ -196,7 +196,7 @@ describe('Tour', () => {
         const [instance, element] = mount(CustomTextDemo);
         
         const buttons = element.querySelectorAll('.k-btn');
-        const startBtn = Array.from(buttons).find(btn => btn.textContent?.includes('启动引导')) as HTMLElement;
+        const startBtn = Array.from(buttons).find(btn => btn.textContent?.includes('开始自定义按钮引导')) as HTMLElement;
         startBtn.click();
         await wait(50);
         

package/es/components/cascader/index.spec.js

@@ -160,7 +160,7 @@ describe('Cascader', function () {
     }, _callee5);
   })));
   it('filter', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
-    var _mount5, instance, element, input, dropdown, dropdown1, _getElements2, _dropdown1, _dropdown2, _dropdown3;
+    var _mount5, instance, element, input, dropdown1, _getElements2, _dropdown1, _dropdown2, _dropdown3;
     return _regeneratorRuntime.wrap(function _callee6$(_context6) {
       while (1) switch (_context6.prev = _context6.next) {
         case 0:
@@ -170,53 +170,52 @@ describe('Cascader', function () {
           _context6.next = 5;
           return wait();
         case 5:
+          // FIXME: maybe we should show no-data layer
           // should show layer when input empty string
-          input.value = ' ';
+          // input.value = ' ';
+          // dispatchEvent(input, 'input');
+          // await wait();
+          // const dropdown = getElement('.k-cascader-menu')!;
+          // expect(dropdown.innerHTML).to.matchSnapshot();
+          // expect(dropdown.innerText).to.eql('北京\n湖南');
+          input.value = '长沙';
           dispatchEvent(input, 'input');
           _context6.next = 9;
           return wait();
         case 9:
-          dropdown = getElement('.k-cascader-menu');
-          expect(dropdown.innerHTML).to.matchSnapshot();
-          expect(dropdown.innerText).to.eql('北京\n湖南');
-          input.value = '长沙';
-          dispatchEvent(input, 'input');
-          _context6.next = 16;
-          return wait();
-        case 16:
           dropdown1 = getElement('.k-cascader-filter');
           expect(dropdown1.innerHTML).to.matchSnapshot();
           expect(dropdown1.innerText).to.eql('湖南 / 长沙市 / 岳麓区');
           // should show no-data layer
           input.value = 'xxx';
           dispatchEvent(input, 'input');
-          _context6.next = 23;
+          _context6.next = 16;
           return wait();
-        case 23:
+        case 16:
           expect(dropdown1.innerHTML).to.matchSnapshot();
           expect(dropdown1.innerText).to.eql('无匹配数据');
           input.value = '岳阳';
           dispatchEvent(input, 'input');
-          _context6.next = 29;
+          _context6.next = 22;
           return wait();
-        case 29:
+        case 22:
           expect(dropdown1.innerHTML).to.matchSnapshot();
           expect(dropdown1.childElementCount).to.eql(2);
           dropdown1.querySelector('.k-dropdown-item').click();
-          _context6.next = 34;
+          _context6.next = 27;
           return wait();
-        case 34:
+        case 27:
           expect(instance.get('value')).to.eql(['hunan', 'yueyang', 'yueyanglou']);
           // show again to test the position
           input.click();
-          _context6.next = 38;
+          _context6.next = 31;
           return wait();
-        case 38:
+        case 31:
           _getElements2 = getElements('.k-cascader-menu'), _dropdown1 = _getElements2[0], _dropdown2 = _getElements2[1], _dropdown3 = _getElements2[2];
           expect(_dropdown1.style.top).not.eql('0px');
           expect(_dropdown2.style.top).not.eql('0px');
           expect(_dropdown3.style.top).not.eql('0px');
-        case 42:
+        case 35:
         case "end":
           return _context6.stop();
       }

package/es/components/datepicker/basepicker.d.ts

@@ -2,20 +2,12 @@
  * The base hook for handling value of Datepicker and Timepicker
  */
 import { TypeDefs } from 'intact';
-import { State } from '../../hooks/useState';
-import { Dayjs, OpUnitType, QUnitType } from './dayjs';
+import { Dayjs } from './dayjs';
 import type { useFormats } from './useFormats';
-import type { useDisabled } from './useDisabled';
-import { PanelFlags, usePanel } from './usePanel';
+import { usePanel } from './usePanel';
 import { BaseSelect, BaseSelectProps, BaseSelectEvents, BaseSelectBlocks } from '../select/base';
 import type { Events } from '../types';
-export type StateValueRange = [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[];
+import type { useValueBase, StateValueRange, Value } from './useValueBase';
 export interface BasePickerProps<V extends Value = Value, Multipe extends boolean = boolean, Range extends boolean = boolean> extends BaseSelectProps<V | [V, V], Multipe> {
     value?: Multipe extends true ? Range extends true ? [
         V,
@@ -33,29 +25,16 @@ export interface BasePickerProps<V extends Value = Value, Multipe extends boolea
     disabledDate?: (v: Dayjs) => boolean;
 }
 export interface BasePickerEvents extends BaseSelectEvents {
-    selecting: [StateValueRange];
-    togglePosition: [];
+    selecting: [StateValueRange, boolean];
 }
 export interface BasePickerBlocks<V extends Value = Value, R extends boolean = boolean> extends BaseSelectBlocks<R extends true ? [Value, Value] : Value> {
 }
-export type Value = string | Date | number | Dayjs;
 export declare abstract class BasePicker<T extends BasePickerProps = BasePickerProps, E extends BasePickerEvents = BasePickerEvents, B extends BasePickerBlocks<any> = BasePickerBlocks<any>> extends BaseSelect<T, E, B> {
     static typeDefs: Required<TypeDefs<BasePickerProps<Value, boolean, boolean>>>;
     static defaults: () => Partial<BasePickerProps<any, boolean, boolean>>;
     static events: Events<BasePickerEvents>;
-    abstract value: ReturnType<typeof useValue>;
+    abstract value: ReturnType<typeof useValueBase>;
     abstract formats: ReturnType<typeof useFormats>;
     abstract panel: ReturnType<typeof usePanel>;
-    resetKeywords(keywords: State<string>): void;
+    resetKeywords(silent?: boolean): void;
 }
-export declare function useValue({ 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[];
-    onConfirm: () => void;
-    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;
-    setMoment: () => void;
-};