@king-design/react 2.0.0-beta.0

package/components/datepicker/calendar.vdt.js

@@ -0,0 +1,128 @@
+import { map as _$ma, createElementVNode as _$ce, className as _$cn, createUnknownComponentVNode as _$cc } from 'intact-react';
+import { Transition } from 'intact';
+import { Button } from '../button';
+import { Icon } from '../icon';
+import { _$ } from '../../i18n';
+import { makeCalendarStyles } from './styles';
+import { getNowDate } from './helpers';
+var _$tmp0 = {
+  'className': 'ion-ios-arrow-left',
+  'size': 'small'
+};
+var _$tmp1 = {
+  'className': 'ion-ios-arrow-left',
+  'size': 'small'
+};
+var _$tmp2 = {
+  'className': 'ion-ios-arrow-left',
+  'size': 'small'
+};
+var _$tmp3 = {
+  'className': 'ion-ios-arrow-right',
+  'size': 'small'
+};
+var _$tmp4 = {
+  'className': 'ion-ios-arrow-right',
+  'size': 'small'
+};
+var _$tmp5 = {
+  'className': 'ion-ios-arrow-right',
+  'size': 'small'
+};
+export default function ($props, $blocks, $__proto__) {
+  var _classNameObj;
+
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+  var type = this.type.value;
+  var isYear = type === 'year';
+  var isYearOrMonth = isYear || type === 'month';
+  var classNameObj = (_classNameObj = {
+    'k-datepicker-calendar': true
+  }, _classNameObj[makeCalendarStyles()] = true, _classNameObj);
+  var now = getNowDate();
+  var _this$datepicker$focu = this.datepicker.focusDate,
+      focusDate = _this$datepicker$focu.focusDate,
+      resetFocusDate = _this$datepicker$focu.reset;
+
+  var getItems = function getItems(data, onClick) {
+    return _$ma(data, function ($value, $key) {
+      return _$ce(2, 'div', _$ce(2, 'div', $value.label, 0, 'k-value'), 2, _$cn({
+        "k-calendar-item": true,
+        "k-exceed": $value.isExceed,
+        "k-active": $value.isActive,
+        "k-today": $value.isToday,
+        "k-disabled": $value.isDisabled,
+        "k-hover": $value.isHover,
+        "k-in-range": $value.isInRange
+      }), {
+        'ev-click': !$value.isDisabled ? function (e) {
+          e._ignore = true;
+          onClick($value.value);
+        } : null,
+        'ev-mouseenter': function evMouseenter() {
+          return focusDate.set($value.value);
+        }
+      });
+    }, $this);
+  };
+
+  var _this$days = this.days,
+      getDays = _this$days.getDays,
+      onClickDay = _this$days.onClick;
+  var _this$showDate = this.showDate,
+      getDateLabel = _this$showDate.getDateLabel,
+      prevMonth = _this$showDate.prevMonth,
+      nextMonth = _this$showDate.nextMonth,
+      prevYear = _this$showDate.prevYear,
+      nextYear = _this$showDate.nextYear,
+      prevTenYears = _this$showDate.prevTenYears,
+      nextTenYears = _this$showDate.nextTenYears;
+  return _$ce(2, 'div', [_$ce(2, 'div', [_$ce(2, 'div', [_$cc(Button, {
+    'icon': true,
+    'type': 'none',
+    'size': 'small',
+    'className': 'k-prev',
+    'tagName': 'div',
+    'ev-click': isYear ? prevTenYears : prevYear,
+    'children': [_$cc(Icon, _$tmp0), _$cc(Icon, _$tmp1)]
+  }), !isYearOrMonth ? _$cc(Button, {
+    'icon': true,
+    'type': 'none',
+    'size': 'small',
+    'className': 'k-prev',
+    'tagName': 'div',
+    'ev-click': prevMonth,
+    'children': _$cc(Icon, _$tmp2)
+  }) : undefined], 0, 'k-left-btns'), _$ce(2, 'div', !isYear ? _$ma(getDateLabel(), function ($value, $key) {
+    return _$ce(2, 'span', $value.value, 0, 'k-month-value', {
+      'ev-click': $value.onClick
+    });
+  }, $this) : _$ce(2, 'span', this.years.getYearLabel(), 0, 'k-month-value'), 0, 'k-month-values'), _$ce(2, 'div', [!isYearOrMonth ? _$cc(Button, {
+    'icon': true,
+    'type': 'none',
+    'size': 'small',
+    'className': 'k-next',
+    'tagName': 'div',
+    'ev-click': nextMonth,
+    'children': _$cc(Icon, _$tmp3)
+  }) : undefined, _$cc(Button, {
+    'icon': true,
+    'type': 'none',
+    'size': 'small',
+    'className': 'k-next',
+    'tagName': 'div',
+    'ev-click': isYear ? nextTenYears : nextYear,
+    'children': [_$cc(Icon, _$tmp4), _$cc(Icon, _$tmp5)]
+  })], 0, 'k-right-btns')], 4, 'k-datepicker-month'), !isYearOrMonth ? [_$ce(2, 'div', _$ma([_$('日'), _$('一'), _$('二'), _$('三'), _$('四'), _$('五'), _$('六')], function ($value, $key) {
+    return _$ce(2, 'div', $value, 0, 'k-weekday');
+  }, $this), 4, 'k-weekdays'), _$ce(2, 'div', getItems(getDays(now), onClickDay), 0, 'k-days', {
+    'ev-mouseleave': resetFocusDate
+  })] : _$ce(2, 'div', isYear ? getItems(this.years.getYears(now), this.years.onClick) : getItems(this.months.getMonths(now), this.months.onClick), 0, 'k-years', {
+    'ev-mouseleave': resetFocusDate
+  })], 0, _$cn(classNameObj));
+}
+;
+
+export {normalize} from 'intact-react';

package/components/datepicker/constants.d.ts

@@ -0,0 +1,16 @@
+export declare const DATEPICKER = "Datepicker";
+export declare const hours: {
+    label: string;
+    value: number;
+}[];
+export declare const minutes: {
+    label: string;
+    value: number;
+}[];
+export declare const seconds: {
+    label: string;
+    value: number;
+}[];
+
+
+export {normalize} from 'intact-react';

package/components/datepicker/constants.js

@@ -0,0 +1,20 @@
+var _context, _context2;
+
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
+import { range, strPad } from '../utils';
+export var DATEPICKER = 'Datepicker';
+export var hours = _mapInstanceProperty(_context = range(0, 23)).call(_context, function (value) {
+  return {
+    label: strPad(value, 2),
+    value: value
+  };
+});
+export var minutes = _mapInstanceProperty(_context2 = range(0, 59)).call(_context2, function (value) {
+  return {
+    label: strPad(value, 2),
+    value: value
+  };
+});
+export var seconds = minutes;
+
+export {normalize} from 'intact-react';

package/components/datepicker/dayjs.d.ts

@@ -0,0 +1,6 @@
+import dayjs, { Dayjs, OpUnitType } from 'dayjs';
+export default dayjs;
+export type { Dayjs, OpUnitType };
+
+
+export {normalize} from 'intact-react';

package/components/datepicker/dayjs.js

@@ -0,0 +1,6 @@
+import dayjs, { Dayjs } from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+dayjs.extend(customParseFormat);
+export default dayjs;
+
+export {normalize} from 'intact-react';

package/components/datepicker/helpers.d.ts

@@ -0,0 +1,13 @@
+import dayjs, { Dayjs, OpUnitType } from 'dayjs';
+import { StateValueItem } from './basepicker';
+export declare function getNowDate(): dayjs.Dayjs;
+export declare function clearTime(date: Date): void;
+export declare function isEqual(a: Dayjs | undefined | null, b: Dayjs | undefined | null, type?: OpUnitType): boolean;
+export declare function isLT(a: Dayjs | undefined | null, b: Dayjs | undefined | null, type?: OpUnitType): boolean;
+export declare function isGT(a: Dayjs | undefined | null, b: Dayjs | undefined | null, type?: OpUnitType): boolean;
+export declare function createDate(date: string): Date;
+export declare function findValueIndex(values: StateValueItem[], value: StateValueItem, type: OpUnitType): number;
+export declare function last<T>(arr: T[]): T | undefined;
+
+
+export {normalize} from 'intact-react';

package/components/datepicker/helpers.js

@@ -0,0 +1,86 @@
+import _construct from "@babel/runtime-corejs3/helpers/construct";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
+import _findIndexInstanceProperty from "@babel/runtime-corejs3/core-js/instance/find-index";
+import dayjs from 'dayjs';
+export function getNowDate() {
+  // only date without time
+  var now = new Date();
+  clearTime(now);
+  return dayjs(now);
+}
+export function clearTime(date) {
+  date.setHours(0);
+  date.setMinutes(0);
+  date.setSeconds(0);
+  date.setMilliseconds(0);
+}
+export function isEqual(a, b, type) {
+  if (type === void 0) {
+    type = 'date';
+  }
+
+  if (a && b) {
+    return a.isSame(b, type);
+  }
+
+  return false;
+}
+export function isLT(a, b, type) {
+  if (type === void 0) {
+    type = 'date';
+  }
+
+  if (a && b) {
+    return a.isBefore(b, type);
+  }
+
+  return false;
+}
+export function isGT(a, b, type) {
+  if (type === void 0) {
+    type = 'date';
+  }
+
+  return isLT(b, a, type);
+}
+export function createDate(date) {
+  if (typeof date === 'string') {
+    var _context;
+
+    var _date$split = date.split(' '),
+        dateString = _date$split[0],
+        timeString = _date$split[1];
+
+    var args = _mapInstanceProperty(_context = dateString.split('-')).call(_context, Number);
+
+    args[1] = args[1] - 1;
+
+    if (timeString) {
+      var _context2;
+
+      args.push.apply(args, _mapInstanceProperty(_context2 = timeString.split(':')).call(_context2, Number));
+    }
+
+    return _construct(Date, args);
+  }
+
+  if (!date) return new Date();
+  return new Date(date);
+}
+export function findValueIndex(values, value, type) {
+  return _findIndexInstanceProperty(values).call(values, function (item) {
+    if (Array.isArray(item)) {
+      // is multipe range values
+      var start = value[0],
+          end = value[1];
+      return isEqual(item[0], start, type) && isEqual(item[1], end, type);
+    } else {
+      return isEqual(value, item, type);
+    }
+  });
+}
+export function last(arr) {
+  return arr[arr.length - 1];
+}
+
+export {normalize} from 'intact-react';

package/components/datepicker/index.d.ts

@@ -0,0 +1,66 @@
+import { TypeDefs } from 'intact-react';
+import dayjs from './dayjs';
+import { State } from '../../hooks/useState';
+import { Shortcut } from './shortcuts';
+import { BasePicker, BasePickerProps, BasePickerEvents, BasePickerBlocks, Value } from './basepicker';
+export * as shortcuts from './shortcuts';
+export interface DatepickerProps<V extends Value = Value, M extends boolean = boolean, R extends boolean = boolean> extends BasePickerProps<V extends string ? V : V | string, M, R> {
+    type?: 'date' | 'datetime' | 'year' | 'month';
+    shortcuts?: Shortcut[];
+}
+export interface DatepickerEvents extends BasePickerEvents {
+}
+export interface DatepickerBlocks<V extends Value = Value, R extends boolean = boolean> extends BasePickerBlocks<V, R> {
+}
+export declare class Datepicker<V extends Value = Value, M extends boolean = false, R extends boolean = false> extends BasePicker<DatepickerProps<V, M, R>, DatepickerEvents, DatepickerBlocks<V, R>> {
+    static template: string | import("intact").Template<any>;
+    static typeDefs: Required<TypeDefs<DatepickerProps<Value, boolean, boolean>>>;
+    static defaults: () => Partial<DatepickerProps<Value, boolean, boolean>>;
+    formats: {
+        getValueFormat: () => string;
+        getShowFormat: () => string;
+        createDateByValueFormat: (value: Value) => dayjs.Dayjs;
+        createDateByShowFormat: (value: string) => dayjs.Dayjs;
+        getShowString: (value: dayjs.Dayjs) => string;
+        getValueString: (value: dayjs.Dayjs) => string;
+    };
+    disabled: {
+        isDisabled: (value: dayjs.Dayjs, type?: dayjs.OpUnitType) => boolean;
+        isDisabledTime: (value: dayjs.Dayjs, flag: import("./usePanel").PanelFlags) => boolean;
+        isDisabledConfirm: () => boolean;
+        maxDate: State<dayjs.Dayjs | null>;
+        minDate: State<dayjs.Dayjs | null>;
+    };
+    panel: {
+        startPanel: State<import("./usePanel").PanelTypes>;
+        endPanel: State<import("./usePanel").PanelTypes>;
+        changePanel: (type: import("./usePanel").PanelTypes, flag?: import("./usePanel").PanelFlags) => void;
+        getPanel: (flag: import("./usePanel").PanelFlags) => State<import("./usePanel").PanelTypes>;
+        reset: () => void;
+        startRef: import("intact").RefObject<import("./calendar").DatepickerCalendar>;
+        endRef: import("intact").RefObject<import("./calendar").DatepickerCalendar>;
+    };
+    focusDate: {
+        focusDate: State<dayjs.Dayjs | null>;
+        reset: () => void;
+    };
+    value: {
+        format: () => string | string[];
+        onConfirm: () => void;
+        onChangeTime: (date: dayjs.Dayjs, flag: import("./usePanel").PanelFlags) => void;
+        getTimeValue: (flag: import("./usePanel").PanelFlags) => dayjs.Dayjs | null | undefined;
+        convertToDayjs: (v: Value | [Value, Value] | Value[] | [Value, Value][] | null | undefined) => import("./basepicker").DayjsValue;
+        getDayjsValue: () => import("./basepicker").DayjsValue;
+        value: State<import("./basepicker").StateValue>;
+        setValue: (v: import("./basepicker").StateValueItem, fromInput: boolean) => void;
+        onChangeDate: (v: dayjs.Dayjs, flag: import("./usePanel").PanelFlags) => void;
+    };
+    init(): void;
+    protected getPlaceholder(): string | number | boolean | import("misstime/dist/utils/types").VNode<any> | import("intact").Children[];
+    protected getLabel(): string | string[];
+    protected clear(e: MouseEvent): void;
+    private setByShortcut;
+}
+
+
+export {normalize} from 'intact-react';

package/components/datepicker/index.js

@@ -0,0 +1,123 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import { __decorate } from "tslib";
+import { provide } from 'intact-react';
+import template from './index.vdt';
+import { DATEPICKER } from './constants';
+import { useValue } from './useValue';
+import { isNullOrUndefined } from 'intact-shared';
+import { _$ } from '../../i18n';
+import { bind } from '../utils';
+import { useDisabled } from './useDisabled';
+import { useFormats } from './useFormats';
+import { usePanel } from './usePanel';
+import { useFocusDate } from './useFocusDate';
+import { useKeyboards } from './useKeyboards';
+import { BasePicker } from './basepicker';
+import * as _shortcuts from './shortcuts';
+export { _shortcuts as shortcuts };
+
+var typeDefs = _extends({}, BasePicker.typeDefs, {
+  type: ['date', 'datetime', 'year', 'month'],
+  shortcuts: Array
+});
+
+var defaults = function defaults() {
+  return _extends({}, BasePicker.defaults(), {
+    type: 'date'
+  });
+};
+
+export var Datepicker = /*#__PURE__*/function (_BasePicker) {
+  _inheritsLoose(Datepicker, _BasePicker);
+
+  function Datepicker() {
+    var _context;
+
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _BasePicker.call.apply(_BasePicker, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
+    _this.formats = useFormats();
+    _this.disabled = useDisabled(_this.formats);
+    _this.panel = usePanel();
+    _this.focusDate = useFocusDate();
+    _this.value = useValue(_this.formats, _this.disabled, _this.panel);
+    return _this;
+  }
+
+  var _proto = Datepicker.prototype;
+
+  _proto.init = function init() {
+    _BasePicker.prototype.init.call(this);
+
+    provide(DATEPICKER, this);
+    useKeyboards(this.panel.startRef, this.focusDate.focusDate);
+  };
+
+  _proto.getPlaceholder = function getPlaceholder() {
+    var _this$get = this.get(),
+        placeholder = _this$get.placeholder,
+        type = _this$get.type,
+        range = _this$get.range;
+
+    if (!isNullOrUndefined(placeholder)) return placeholder;
+
+    switch (type) {
+      case 'datetime':
+        return range ? _$('开始时间 ~ 结束时间') : _$('请选择日期和时间');
+
+      case 'year':
+        return _$('请选择年份');
+
+      case 'month':
+        return _$('请选择月份');
+
+      default:
+        return range ? _$('开始日期 ~ 结束日期') : _$('请选择日期');
+    }
+  };
+
+  _proto.getLabel = function getLabel() {
+    return this.value.format();
+  };
+
+  _proto.clear = function clear(e) {
+    _BasePicker.prototype.clear.call(this, e);
+
+    if (this.get('type') === 'datetime') {
+      // reset the state to let user re-select
+      this.panel.reset();
+    }
+  };
+
+  _proto.setByShortcut = function setByShortcut(shortcut) {
+    var _this$value = this.value,
+        setValue = _this$value.setValue,
+        convertToDayjs = _this$value.convertToDayjs;
+
+    var _this$get2 = this.get(),
+        multiple = _this$get2.multiple;
+
+    setValue(convertToDayjs(shortcut.value())[0], true);
+
+    if (!multiple) {
+      this.hide();
+    }
+  };
+
+  return Datepicker;
+}(BasePicker);
+Datepicker.template = template;
+Datepicker.typeDefs = typeDefs;
+Datepicker.defaults = defaults;
+
+__decorate([bind], Datepicker.prototype, "clear", null);
+
+__decorate([bind], Datepicker.prototype, "setByShortcut", null);
+
+export {normalize} from 'intact-react';

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

@@ -0,0 +1,4 @@
+export {};
+
+
+export {normalize} from 'intact-react';