@king-design/react 3.5.2 → 3.6.0

package/components/timepicker/panelPicker.d.ts

@@ -2,46 +2,49 @@ import { TypeDefs } from 'intact-react';
 import { BasePicker } from '../datepicker/basepicker';
 import dayjs from '../datepicker/dayjs';
 import { State } from '../../hooks/useState';
-import { PanelTypes } from '../datepicker/usePanel';
 import { TimepickerProps, TimepickerEvents, TimepickerBlocks } from './constants';
+import { StateValueItem } from '../datepicker/useValueBase';
 export declare class PanelPicker<Multipe extends boolean = false, Range extends boolean = false> extends BasePicker<TimepickerProps<Multipe, Range>, TimepickerEvents, TimepickerBlocks> {
     static template: string | import('intact-react').Template<any>;
     static typeDefs: Required<TypeDefs<TimepickerProps<boolean, boolean>>>;
     formats: {
         getValueFormat: () => string;
         getShowFormat: () => string;
-        createDateByValueFormat: (value: import("../datepicker/basepicker").Value) => dayjs.Dayjs;
-        createDateByShowFormat: (value: import("../datepicker/basepicker").Value) => dayjs.Dayjs;
+        createDateByValueFormat: (value: import("../datepicker/useValueBase").Value) => dayjs.Dayjs;
+        createDateByShowFormat: (value: import("../datepicker/useValueBase").Value) => dayjs.Dayjs;
         getShowString: (value: dayjs.Dayjs) => string;
         getValueString: (value: dayjs.Dayjs) => string;
     };
+    defaultValue: {
+        get: () => StateValueItem;
+    };
     disabled: {
-        isDisabled: (value: dayjs.Dayjs, type?: dayjs.OpUnitType) => boolean;
-        isDisabledConfirm: () => boolean;
+        isDisabled: (value: dayjs.Dayjs, type?: "h" | "s" | "y" | "date" | "month" | "week" | "millisecond" | "second" | "minute" | "hour" | "day" | "year" | "milliseconds" | "seconds" | "minutes" | "hours" | "days" | "months" | "years" | "dates" | "d" | "D" | "M" | "m" | "ms" | "weeks" | "w" | "quarter" | "quarters" | "Q") => boolean;
         maxDate: State<dayjs.Dayjs | null>;
         minDate: State<dayjs.Dayjs | null>;
-        isDisabledTime: (value: dayjs.Dayjs, flag: import("../datepicker/usePanel").PanelFlags) => boolean;
+        isDisabledTime: (value: dayjs.Dayjs) => boolean;
         isDisabledTimeByStep: (value: string, flag: import("../datepicker/usePanel").PanelFlags) => boolean;
+        isDisabledConfirm: () => boolean;
+        isDisabledValue: (value: StateValueItem) => boolean;
     };
     panel: {
-        startPanel: State<PanelTypes>;
-        endPanel: State<PanelTypes>;
-        changePanel: (type: PanelTypes, flag?: import("../datepicker/usePanel").PanelFlags) => void;
-        getPanel: (flag: import("../datepicker/usePanel").PanelFlags) => State<PanelTypes>;
-        reset: () => void;
         startRef: import('intact-react').RefObject<import("../datepicker/calendar").DatepickerCalendar>;
         endRef: import('intact-react').RefObject<import("../datepicker/calendar").DatepickerCalendar>;
     };
     value: {
         format: () => string | string[];
-        onConfirm: () => void;
-        getTimeValue: (flag: import("../datepicker/usePanel").PanelFlags) => dayjs.Dayjs | null | undefined;
-        convertToDayjs: (v: import("../datepicker/basepicker").Value | [import("../datepicker/basepicker").Value, import("../datepicker/basepicker").Value] | import("../datepicker/basepicker").Value[] | [import("../datepicker/basepicker").Value, import("../datepicker/basepicker").Value][] | null | undefined) => import("../datepicker/basepicker").DayjsValue;
-        value: State<import("../datepicker/basepicker").StateValue>;
-        setValue: (v: import("../datepicker/basepicker").StateValueItem, fromInput: boolean) => void;
-        getDayjsValue: () => import("../datepicker/basepicker").DayjsValue;
+        formatSingleValue: (value: StateValueItem) => string;
+        convertToDayjs: (v: import("../datepicker/useValueBase").Value | [import("../datepicker/useValueBase").Value, import("../datepicker/useValueBase").Value] | import("../datepicker/useValueBase").Value[] | [import("../datepicker/useValueBase").Value, import("../datepicker/useValueBase").Value][] | null | undefined) => import("../datepicker/useValueBase").DayjsValue;
+        unique: () => void;
+        setMoment: () => void;
+        updateValue: () => void;
+        allValuesUpdatedInMultipleMode: () => boolean | undefined;
+        value: State<import("../datepicker/useValueBase").StateValue>;
+        setValue: (v: StateValueItem, fromInput: boolean) => void;
+        getDayjsValue: () => import("../datepicker/useValueBase").DayjsValue;
         onChangeTime: (date: dayjs.Dayjs, flag: import("../datepicker/usePanel").PanelFlags) => void;
         onChangeTimeByStep: (v: string, flag: import("../datepicker/usePanel").PanelFlags) => void;
+        getTimeValue: (flag: import("../datepicker/usePanel").PanelFlags) => dayjs.Dayjs | null | undefined;
     };
     step: {
         options: State<{
@@ -49,6 +52,9 @@ export declare class PanelPicker<Multipe extends boolean = false, Range extends
             label: string;
         }[] | null>;
     };
+    confirm: {
+        onConfirm: () => void;
+    };
     protected getPlaceholder(): string | number | boolean | import("misstime/dist/utils/types").VNode<any> | import('intact-react').Children[];
     protected getLabel(): string | string[];
 }

package/components/timepicker/panelPicker.js

@@ -8,9 +8,10 @@ import { useFormats } from './useFormats';
 import { useValue } from './useValue';
 import { useDisabled } from './useDisabled';
 import { usePanel } from '../datepicker/usePanel';
-import { PanelTypes } from '../datepicker/usePanel';
 import { useStep } from './useStep';
 import { typeDefs } from './constants';
+import { useConfirm } from './useConfirm';
+import { useDefaultValue } from './useDefaultValue';
 export var PanelPicker = /*#__PURE__*/function (_BasePicker) {
   _inheritsLoose(PanelPicker, _BasePicker);
   function PanelPicker() {
@@ -21,10 +22,12 @@ export var PanelPicker = /*#__PURE__*/function (_BasePicker) {
     }
     _this = _BasePicker.call.apply(_BasePicker, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
     _this.formats = useFormats();
-    _this.disabled = useDisabled(_this.formats);
-    _this.panel = usePanel(PanelTypes.Time);
-    _this.value = useValue(_this.formats, _this.disabled, _this.panel);
+    _this.defaultValue = useDefaultValue();
+    _this.disabled = useDisabled(_this.formats, _this.defaultValue);
+    _this.panel = usePanel();
+    _this.value = useValue(_this.formats, _this.disabled, _this.panel, _this.defaultValue);
     _this.step = useStep(_this.disabled, _this.formats);
+    _this.confirm = useConfirm(_this.value, _this.formats.getValueString, _this.defaultValue);
     return _this;
   }
   var _proto = PanelPicker.prototype;

package/components/timepicker/panelPicker.vdt.js

@@ -8,6 +8,7 @@ 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';
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;
   $blocks || ($blocks = {});
@@ -16,15 +17,18 @@ export default function ($props, $blocks, $__proto__) {
   var _this$get = this.get(),
     className = _this$get.className,
     range = _this$get.range,
-    multiple = _this$get.multiple;
+    multiple = _this$get.multiple,
+    min = _this$get.min,
+    max = _this$get.max;
   var _this$value = this.value,
     value = _this$value.value.value,
-    onConfirm = _this$value.onConfirm,
     onChangeTime = _this$value.onChangeTime,
     onChangeTimeByStep = _this$value.onChangeTimeByStep,
-    getTimeValue = _this$value.getTimeValue;
+    getTimeValue = _this$value.getTimeValue,
+    setMoment = _this$value.setMoment;
   var lastValue = last(value);
   var k = this.config.k;
+  var onConfirm = this.confirm.onConfirm;
   var classNameObj = (_classNameObj = {}, _classNameObj[k + "-time-content"] = true, _classNameObj[k + "-range"] = range, _classNameObj[className] = className, _classNameObj[makePanelStyles(k)] = true, _classNameObj);
   var options = this.step.options.value;
   var _this$disabled = this.disabled,
@@ -56,7 +60,7 @@ export default function ($props, $blocks, $__proto__) {
     }), 2, _$cn(k + "-datepicker-time"))], 0, _$cn(k + "-datepicker-calendar-wrapper"));
   };
   return _$su.call($this, {
-    'className': _$cn(k + "-timepicker")
+    'className': _$cn(k + "-timepicker " + makeStylesInheritDatepicker(k))
   }, function ($blocks) {
     var _$blocks = {},
       __$blocks = _$ex({}, $blocks);

package/components/timepicker/selectPicker.d.ts

@@ -6,15 +6,16 @@ export declare class SelectPicker extends Component<TimepickerProps, TimepickerE
     formats: {
         getValueFormat: () => string;
         getShowFormat: () => string;
-        createDateByValueFormat: (value: import("../datepicker/basepicker").Value) => import("dayjs").Dayjs;
-        createDateByShowFormat: (value: import("../datepicker/basepicker").Value) => import("dayjs").Dayjs;
+        createDateByValueFormat: (value: import("../datepicker/useValueBase").Value) => import("dayjs").Dayjs;
+        createDateByShowFormat: (value: import("../datepicker/useValueBase").Value) => import("dayjs").Dayjs;
         getShowString: (value: import("dayjs").Dayjs) => string;
         getValueString: (value: import("dayjs").Dayjs) => string;
     };
     disabled: {
-        isDisabled: (value: import("dayjs").Dayjs, type?: import("dayjs").OpUnitType) => boolean;
-        isDisabledTime: (value: import("dayjs").Dayjs, flag: import("../datepicker/usePanel").PanelFlags) => boolean;
+        isDisabled: (value: import("dayjs").Dayjs, type?: "h" | "s" | "y" | "date" | "month" | "week" | "millisecond" | "second" | "minute" | "hour" | "day" | "year" | "milliseconds" | "seconds" | "minutes" | "hours" | "days" | "months" | "years" | "dates" | "d" | "D" | "M" | "m" | "ms" | "weeks" | "w" | "quarter" | "quarters" | "Q") => boolean;
+        isDisabledTime: (value: import("dayjs").Dayjs) => boolean;
         isDisabledConfirm: () => boolean;
+        isDisabledValue: (value: import("../datepicker/useValueBase").StateValueItem) => boolean;
         maxDate: import("../../hooks/useState").State<import("dayjs").Dayjs | null>;
         minDate: import("../../hooks/useState").State<import("dayjs").Dayjs | null>;
     };

package/components/timepicker/useConfirm.d.ts

@@ -0,0 +1,6 @@
+import type { useFormats } from './useFormats';
+import { useValue } from './useValue';
+import type { useDefaultValue } from './useDefaultValue';
+export declare function useConfirm(value: ReturnType<typeof useValue>, getValueString: ReturnType<typeof useFormats>['getValueString'], defaultValue: ReturnType<typeof useDefaultValue>): {
+    onConfirm: () => void;
+};

package/components/timepicker/useConfirm.js

@@ -0,0 +1,19 @@
+import { useInstance } from 'intact-react';
+export function useConfirm(value, getValueString, defaultValue) {
+  var instance = useInstance();
+  function onConfirm() {
+    var _instance$get = instance.get(),
+      multiple = _instance$get.multiple;
+    // 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: onConfirm
+  };
+}

package/components/timepicker/useDefaultValue.d.ts

@@ -0,0 +1,4 @@
+import { StateValueItem } from '../datepicker/useValueBase';
+export declare function useDefaultValue(): {
+    get: () => StateValueItem;
+};

package/components/timepicker/useDefaultValue.js

@@ -0,0 +1,27 @@
+import _Object$assign from "@babel/runtime-corejs3/core-js/object/assign";
+import { useInstance } from 'intact-react';
+import { last } from '../datepicker/helpers';
+import { NOW_START, NOW_END } from './constants';
+import { isArray } from 'intact-shared';
+export function useDefaultValue() {
+  var instance = useInstance();
+  function get() {
+    var _value = instance.value.value.value;
+    var lastValue = last(_value);
+    var _instance$get = instance.get(),
+      range = _instance$get.range;
+    if (range) {
+      // consider the second last value to maintain consistency
+      var penulimate = getPenulimate(_value);
+      return _Object$assign([NOW_START, NOW_END], penulimate, lastValue);
+    }
+    return lastValue || NOW_START;
+  }
+  return {
+    get: get
+  };
+}
+function getPenulimate(value) {
+  if (!isArray(value)) return;
+  return value[value.length - 2];
+}

package/components/timepicker/useDisabled.d.ts

@@ -1,10 +1,13 @@
 import type { useFormats } from './useFormats';
 import { PanelFlags } from '../datepicker/usePanel';
-export declare function useDisabled(formats: ReturnType<typeof useFormats>): {
-    isDisabled: (value: import("dayjs").Dayjs, type?: import("dayjs").OpUnitType) => boolean;
-    isDisabledConfirm: () => boolean;
+import { StateValueItem } from '../datepicker/useValueBase';
+import type { useDefaultValue } from './useDefaultValue';
+export declare function useDisabled(formats: ReturnType<typeof useFormats>, defaultValue: ReturnType<typeof useDefaultValue>): {
+    isDisabled: (value: import("dayjs").Dayjs, type?: "h" | "s" | "y" | "date" | "month" | "week" | "millisecond" | "second" | "minute" | "hour" | "day" | "year" | "milliseconds" | "seconds" | "minutes" | "hours" | "days" | "months" | "years" | "dates" | "d" | "D" | "M" | "m" | "ms" | "weeks" | "w" | "quarter" | "quarters" | "Q") => boolean;
     maxDate: import("../../hooks/useState").State<import("dayjs").Dayjs | null>;
     minDate: import("../../hooks/useState").State<import("dayjs").Dayjs | null>;
-    isDisabledTime: (value: import("dayjs").Dayjs, flag: PanelFlags) => boolean;
+    isDisabledTime: (value: import("dayjs").Dayjs) => boolean;
     isDisabledTimeByStep: (value: string, flag: PanelFlags) => boolean;
+    isDisabledConfirm: () => boolean;
+    isDisabledValue: (value: StateValueItem) => boolean;
 };

package/components/timepicker/useDisabled.js

@@ -1,16 +1,25 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime-corejs3/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["isDisabledTime"];
+var _excluded = ["isDisabledTime", "isDisabledConfirm", "isDisabledValue"];
+import { useInstance } from 'intact-react';
 import { useDisabled as useDisabledBase } from '../datepicker/useDisabled';
-export function useDisabled(formats) {
+export function useDisabled(formats, defaultValue) {
+  var instance = useInstance();
   var _useDisabledBase = useDisabledBase(formats),
     isDisabledTime = _useDisabledBase.isDisabledTime,
+    isDisabledConfirmBase = _useDisabledBase.isDisabledConfirm,
+    isDisabledValue = _useDisabledBase.isDisabledValue,
     rest = _objectWithoutPropertiesLoose(_useDisabledBase, _excluded);
   function isDisabledTimeByStep(value, flag) {
-    return isDisabledTime(formats.createDateByValueFormat(value), flag);
+    return isDisabledTime(formats.createDateByValueFormat(value));
+  }
+  function isDisabledConfirm() {
+    return isDisabledValue(defaultValue.get());
   }
   return _extends({
     isDisabledTime: isDisabledTime,
-    isDisabledTimeByStep: isDisabledTimeByStep
+    isDisabledTimeByStep: isDisabledTimeByStep,
+    isDisabledConfirm: isDisabledConfirm,
+    isDisabledValue: isDisabledValue
   }, rest);
 }

package/components/timepicker/useFormats.d.ts

@@ -1,7 +1,7 @@
 import { Component } from 'intact-react';
 import dayjs, { Dayjs } from '../datepicker/dayjs';
 import type { TimepickerProps } from './';
-import type { Value } from '../datepicker/basepicker';
+import type { Value } from '../datepicker/useValueBase';
 export declare function useFormats<T extends Component<TimepickerProps>>(): {
     getValueFormat: () => string;
     getShowFormat: () => string;

package/components/timepicker/useValue.d.ts

@@ -1,16 +1,22 @@
 import type { useFormats } from './useFormats';
-import { StateValueItem } from '../datepicker/basepicker';
+import { StateValueItem, DayjsValue } from '../datepicker/useValueBase';
 import type { useDisabled } from '../datepicker/useDisabled';
 import type { usePanel } from '../datepicker/usePanel';
 import { PanelFlags } from '../datepicker/usePanel';
-export declare function useValue(formats: ReturnType<typeof useFormats>, disabled: ReturnType<typeof useDisabled>, panel: ReturnType<typeof usePanel>): {
+import type Dayjs from 'dayjs';
+import type { useDefaultValue } from './useDefaultValue';
+export declare function useValue(formats: ReturnType<typeof useFormats>, disabled: ReturnType<typeof useDisabled>, panel: ReturnType<typeof usePanel>, defaultValue: ReturnType<typeof useDefaultValue>): {
     format: () => string | string[];
-    onConfirm: () => void;
-    getTimeValue: (flag: PanelFlags) => import("dayjs").Dayjs | null | undefined;
-    convertToDayjs: (v: import("../datepicker/basepicker").Value | [import("../datepicker/basepicker").Value, import("../datepicker/basepicker").Value] | import("../datepicker/basepicker").Value[] | [import("../datepicker/basepicker").Value, import("../datepicker/basepicker").Value][] | null | undefined) => import("../datepicker/basepicker").DayjsValue;
-    value: import("../../hooks/useState").State<import("../datepicker/basepicker").StateValue>;
+    formatSingleValue: (value: StateValueItem) => string;
+    convertToDayjs: (v: import("../datepicker/useValueBase").Value | [import("../datepicker/useValueBase").Value, import("../datepicker/useValueBase").Value] | import("../datepicker/useValueBase").Value[] | [import("../datepicker/useValueBase").Value, import("../datepicker/useValueBase").Value][] | null | undefined) => DayjsValue;
+    unique: () => void;
+    setMoment: () => void;
+    updateValue: () => void;
+    allValuesUpdatedInMultipleMode: () => boolean | undefined;
+    value: import("../../hooks/useState").State<import("../datepicker/useValueBase").StateValue>;
     setValue: (v: StateValueItem, fromInput: boolean) => void;
-    getDayjsValue: () => import("../datepicker/basepicker").DayjsValue;
-    onChangeTime: (date: import("dayjs").Dayjs, flag: PanelFlags) => void;
+    getDayjsValue: () => DayjsValue;
+    onChangeTime: (date: Dayjs.Dayjs, flag: PanelFlags) => void;
     onChangeTimeByStep: (v: string, flag: PanelFlags) => void;
+    getTimeValue: (flag: PanelFlags) => Dayjs.Dayjs | null | undefined;
 };

package/components/timepicker/useValue.js

@@ -1,19 +1,17 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime-corejs3/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["value", "getDayjsValue", "setValue", "onChangeTime"];
+var _excluded = ["value", "getDayjsValue", "setValue", "onChangeTime", "getTimeValue"];
 import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/slice";
 import { useInstance } from 'intact-react';
-import { last } from '../utils';
-import { useValue as useValueBase } from '../datepicker/basepicker';
-import { NOW_START, NOW_END } from './constants';
-export function useValue(formats, disabled, panel) {
+import { useValueBase } from '../datepicker/useValueBase';
+export function useValue(formats, disabled, panel, defaultValue) {
   var instance = useInstance();
   var _useValueBase = useValueBase(formats, disabled, panel, function (v) {
       return false;
     }, function (v) {
       // 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 () {
       return 'second';
@@ -24,24 +22,25 @@ export function useValue(formats, disabled, panel) {
     getDayjsValue = _useValueBase.getDayjsValue,
     setValue = _useValueBase.setValue,
     onChangeTime = _useValueBase.onChangeTime,
+    getTimeValueBase = _useValueBase.getTimeValue,
     rest = _objectWithoutPropertiesLoose(_useValueBase, _excluded);
-  setValue(getPlaceholderDates(), false);
-  instance.watch('value', function (value) {
-    var dayjsValue = getDayjsValue();
-    setValue(last(dayjsValue) || getPlaceholderDates(), false);
-  });
-  function getPlaceholderDates() {
-    return instance.get('range') ? [NOW_START, NOW_END] : NOW_START;
-  }
   function onChangeTimeByStep(v, flag) {
     var date = formats.createDateByValueFormat(v);
     onChangeTime(date, flag);
   }
+  function getTimeValue(flag) {
+    var value = defaultValue.get();
+    if (instance.get('range')) {
+      return value[flag];
+    }
+    return value;
+  }
   return _extends({
     value: value,
     setValue: setValue,
     getDayjsValue: getDayjsValue,
     onChangeTime: onChangeTime,
-    onChangeTimeByStep: onChangeTimeByStep
+    onChangeTimeByStep: onChangeTimeByStep,
+    getTimeValue: getTimeValue
   }, rest);
 }

package/components/tour/index.d.ts

@@ -0,0 +1,2 @@
+export * from './tour';
+export * from './step';

package/components/tour/index.js

@@ -0,0 +1,2 @@
+export * from './tour';
+export * from './step';

package/components/tour/index.spec.d.ts

@@ -0,0 +1 @@
+export {};