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

package/components/timepicker/index.spec.ts

@@ -8,7 +8,6 @@ import {Timepicker} from 'kpc';
 import {Component} from 'intact';
 
 describe('Timepicker', () => {
-
     afterEach(async () => {
         unmount();
         await wait(500);
@@ -19,10 +18,18 @@ describe('Timepicker', () => {
         const [instance, element] = mount(BasicDemo);
 
         const [picker1, picker2] = element.querySelectorAll('.k-select') as NodeListOf<HTMLElement>;
+        const inputInner = picker1.querySelector('.k-input-inner') as HTMLInputElement;
+
+        expect(inputInner.value).eql('');
         picker1.click();
         await wait(500);
-        let dropdown = getElement('.k-time-content')!;
+        expect(inputInner.value).eql('');
+
+        const dropdown = getElement('.k-time-content')!;
+        const ok = dropdown.querySelector('.k-btn') as HTMLElement;
+        expect(ok.classList.contains('k-disabled')).eql(true);
         expect(dropdown.innerHTML).to.matchSnapshot();
+
         const next = dropdown.querySelector('.k-scroll-select-item:nth-child(11)') as HTMLElement;
         next.click();
         await wait();
@@ -32,7 +39,6 @@ describe('Timepicker', () => {
         await wait();
         expect(instance.get('time')).to.be.null;
         expect(dropdown.innerHTML).to.matchSnapshot();
-        const ok = dropdown.querySelector('.k-btn') as HTMLElement;
         ok.click();
         await wait(500);
         expect(instance.get('time')).to.eql('02:00:00');
@@ -43,27 +49,56 @@ describe('Timepicker', () => {
         await wait(500);
         expect(dropdown.innerHTML).to.matchSnapshot();
 
+        // should reset show value on hiding
+        const activeHour = dropdown.querySelector('.k-scroll-select-item.k-active') as HTMLElement;
+        dispatchEvent(activeHour.nextElementSibling!, 'click');
+        await wait();
+        expect(inputInner.value).eql('04:03:03');
+        expect(instance.get('time')).eql('03:03:03');
+        document.body.click();
+        await wait();
+        expect(inputInner.value).eql('03:03:03');
+        expect(instance.get('time')).eql('03:03:03');
+    });
+
+    it('multipe time', async function() {
+        const [instance, element] = mount(BasicDemo);
+        const [picker1, picker2] = element.querySelectorAll('.k-select') as NodeListOf<HTMLElement>;
+
         // multiple
         picker2.click();
-        await wait(500);
-        dropdown = getElement('.k-time-content')!;
-        dropdown.querySelector<HTMLElement>('.k-scroll-select-item:nth-child(11)')!.click();
+        await wait();
+        let dropdown = getElement('.k-time-content')!;
         const ok2 = dropdown.querySelector('.k-btn') as HTMLElement;
+        expect(ok2.classList.contains('k-disabled')).eql(false);
+
+        dropdown.querySelector<HTMLElement>('.k-scroll-select-item:nth-child(11)')!.click();
+        await wait();
+        const inputInner = picker2.querySelector('.k-input-inner') as HTMLInputElement;
+        expect(inputInner.value).eql('01:00:00');
+        expect(instance.get('timeArray')).eql([]);
+
         ok2.click();
-        dropdown.querySelector<HTMLElement>('.k-scroll-select-item:nth-child(12)')!.click();
+        await wait();
+        expect(instance.get('timeArray')).eql(['01:00:00']);
+
+        dropdown.querySelector<HTMLElement>('.k-scroll-select-item:nth-child(11)')!.click();
+        await wait();
         ok2.click();
         await wait();
         expect(instance.get('timeArray')).to.eql(['01:00:00', '02:00:00']);
+        expect(ok2.classList.contains('k-disabled')).eql(false);
+
         // click the same time will do nothing
         ok2.click();
         await wait();
         expect(instance.get('timeArray')).to.eql(['01:00:00', '02:00:00']);
+
         // remove one value
         const [, close] = picker2.querySelectorAll<HTMLElement>('.k-tag-close');
         close.click();
         await wait();
         expect(instance.get('timeArray')).to.eql(['01:00:00']);
-        expect(dropdown.innerHTML).to.matchSnapshot();
 
         // clear
         picker2.querySelector<HTMLElement>('.k-select-clear')!.click();
@@ -79,24 +114,107 @@ describe('Timepicker', () => {
         expect(dropdown.innerHTML).to.matchSnapshot();
     });
 
-    it('range', async () => {
-        const [instance, element] = mount(RangeDemo);
+    describe('range', () => {
+        it('basic', async () => {
+            const [instance, element] = mount(RangeDemo);
 
-        const picker = element.querySelector('.k-select') as HTMLElement;
-        picker.click();
-        await wait(500);
-        const dropdown = getElement('.k-time-content')!;
-        expect(dropdown.innerHTML).to.matchSnapshot();
-        const [start, end] = dropdown.querySelectorAll<HTMLElement>('.k-datepicker-calendar-wrapper');
-        (start.querySelector('.k-active')!.nextElementSibling as HTMLElement).click();
-        await wait();
-        expect(dropdown.innerHTML).to.matchSnapshot();
-        (end.querySelector('.k-active')!.nextElementSibling!.nextElementSibling as HTMLElement).click();
-        await wait();
-        expect(dropdown.innerHTML).to.matchSnapshot();
-        dropdown.querySelector<HTMLElement>('.k-btn')!.click();
-        await wait();
-        expect(instance.get('time')).to.eql(['01:00:00', '01:59:59']);
+            const picker = element.querySelector('.k-select') as HTMLElement;
+            picker.click();
+            await wait(500);
+            const dropdown = getElement('.k-time-content')!;
+            expect(dropdown.innerHTML).to.matchSnapshot();
+            const [start, end] = dropdown.querySelectorAll<HTMLElement>('.k-datepicker-calendar-wrapper');
+            (start.querySelector('.k-active')!.nextElementSibling as HTMLElement).click();
+            await wait();
+            expect(dropdown.innerHTML).to.matchSnapshot();
+            (end.querySelector('.k-active')!.nextElementSibling!.nextElementSibling as HTMLElement).click();
+            await wait();
+            expect(dropdown.innerHTML).to.matchSnapshot();
+            dropdown.querySelector<HTMLElement>('.k-btn')!.click();
+            await wait();
+            expect(instance.get('time')).to.eql(['01:00:00', '01:59:59']);
+
+            // clear
+            picker.querySelector<HTMLElement>('.k-select-clear')!.click();
+            await wait();
+            expect(instance.get('time')).to.eql(null);
+        });
+
+        it('only select one value then click confirm button directly', async () => {
+            const [instance, element] = mount(RangeDemo);
+
+            const picker = element.querySelector('.k-select') as HTMLElement;
+            picker.click();
+            await wait();
+            const dropdown = getElement('.k-time-content')!;
+            const [start, end] = dropdown.querySelectorAll<HTMLElement>('.k-datepicker-calendar-wrapper');
+            (start.querySelector('.k-active')!.nextElementSibling as HTMLElement).click();
+            await wait();
+
+            // skip select end and confirm
+            dropdown.querySelector<HTMLElement>('.k-btn')!.click();
+            await wait();
+            expect(instance.get('time')).eql(['01:00:00', '23:59:59']);
+
+            picker.querySelector<HTMLElement>('.k-select-clear')!.click();
+            await wait();
+            picker.click();
+            await wait();
+            (end.querySelector('.k-active')!.nextElementSibling as HTMLElement).click();
+            dropdown.querySelector<HTMLElement>('.k-btn')!.click();
+            await wait();
+            expect(instance.get('time')).eql(['00:00:00', '00:59:59']);
+
+            // click confirm directly
+            picker.querySelector<HTMLElement>('.k-select-clear')!.click();
+            await wait();
+            picker.click();
+            await wait();
+            dropdown.querySelector<HTMLElement>('.k-btn')!.click();
+            await wait();
+            expect(instance.get('time')).eql(['00:00:00', '23:59:59']);
+        });
+
+        it('should unique', async () => {
+            const [instance, element] = mount(RangeDemo);
+            const [, multipe] = element.querySelectorAll('.k-select') as NodeListOf<HTMLElement>;
+
+            // multiple
+            multipe.click();
+            await wait();
+            let dropdown = getElement('.k-time-content')!;
+            const confirm = dropdown.querySelector('.k-btn') as HTMLElement;
+
+            confirm.click();
+            await wait();
+            expect(instance.get('timeArr')).eql([['00:00:00', '23:59:59']]);
+
+            // confirm again
+            confirm.click();
+            await wait();
+            expect(instance.get('timeArr')).eql([['00:00:00', '23:59:59']]);
+        });
+
+        it('should maintain consistency when we select the next value', async () => {
+            const [instance, element] = mount(RangeDemo);
+            const [, multipe] = element.querySelectorAll('.k-select') as NodeListOf<HTMLElement>;
+            instance.set('timeArr', [['01:00:00', '02:00:00']]);
+
+            // multiple
+            multipe.click();
+            await wait();
+            let dropdown = getElement('.k-time-content')!;
+            const confirm = dropdown.querySelector('.k-btn') as HTMLElement;
+            const [start, end] = dropdown.querySelectorAll<HTMLElement>('.k-datepicker-calendar-wrapper');
+            (start.querySelector('.k-active')!.nextElementSibling as HTMLElement).click();
+            await wait();
+            confirm.click();
+            await wait();
+            expect(instance.get('timeArr')).eql([
+                ['01:00:00', '02:00:00'],
+                ['02:00:00', '02:00:00'],
+            ]);
+        });
     });
 
     it('step', async () => {
@@ -123,11 +241,11 @@ describe('Timepicker', () => {
         (start.querySelector('.k-active')!.nextElementSibling as HTMLElement).click();
         await wait();
         expect(dropdown.innerHTML).to.matchSnapshot();
-        (end.querySelector('.k-disabled')!.nextElementSibling as HTMLElement).click();
+        (end.querySelector('.k-active')!.previousElementSibling as HTMLElement).click();
         await wait();
         expect(dropdown.innerHTML).to.matchSnapshot();
         dropdown.querySelector<HTMLElement>('.k-btn')!.click();
-        expect(instance.get('time')).to.eql(['00:30:00', '00:30:00']);
+        expect(instance.get('time')).to.eql(['00:30:00', '23:30:00']);
     });
 
     it('format', async () => {

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();
       }