@king-design/react 2.0.0-beta.0

package/components/datepicker/index.vdt.js

@@ -0,0 +1,142 @@
+import { createElementVNode as _$ce, createUnknownComponentVNode as _$cc, superCall as _$su, extend as _$ex, EMPTY_OBJ as _$em, className as _$cn, map as _$ma, createTextVNode as _$ct } from 'intact-react';
+import { linkEvent } from 'intact';
+import { DropdownMenu } from '../dropdown';
+import { DatepickerCalendar } from './calendar';
+import { DatepickerTime } from './time';
+import { Icon } from '../icon';
+import { Button } from '../button';
+import { _$ } from '../../i18n';
+import { makePanelStyles } from './styles';
+import { PanelTypes, PanelFlags } from './usePanel';
+import { isFunction } from 'intact-shared';
+import { Tabs, Tab } from '../tabs';
+var _$tmp0 = {
+  'className': 'k-datepicker'
+};
+var _$tmp1 = {
+  'className': 'k-icon-calendar'
+};
+export default function ($props, $blocks, $__proto__) {
+  var _classNameObj,
+      _this = this;
+
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+
+  var _this$get = this.get(),
+      className = _this$get.className,
+      type = _this$get.type,
+      range = _this$get.range,
+      multiple = _this$get.multiple,
+      shortcuts = _this$get.shortcuts;
+
+  var _this$value = this.value,
+      value = _this$value.value.value,
+      onChangeDate = _this$value.onChangeDate,
+      onConfirm = _this$value.onConfirm,
+      onChangeTime = _this$value.onChangeTime,
+      onChangeDateForRange = _this$value.onChangeDateForRange,
+      getTimeValue = _this$value.getTimeValue;
+  var classNameObj = (_classNameObj = {
+    'k-datepicker-content': true
+  }, _classNameObj[className] = className, _classNameObj[makePanelStyles()] = true, _classNameObj);
+  var _this$disabled = this.disabled,
+      isDisabledTime = _this$disabled.isDisabledTime,
+      isDisabledConfirm = _this$disabled.isDisabledConfirm;
+  var _this$panel = this.panel,
+      startPanel = _this$panel.startPanel,
+      endPanel = _this$panel.endPanel,
+      getPanel = _this$panel.getPanel,
+      startRef = _this$panel.startRef,
+      endRef = _this$panel.endRef;
+
+  var generatePanel = function generatePanel(flag) {
+    var panel = getPanel(flag);
+    var timeValue = getTimeValue(flag);
+    return _$ce(2, 'div', [function () {
+      if (type === 'datetime') {
+        var dateString = '0000-00-00';
+        var timeString = '00:00:00';
+
+        if (timeValue) {
+          var valueString = _this.formats.getShowString(timeValue).split(/\s+/);
+
+          dateString = valueString[0];
+          timeString = valueString[1];
+        }
+
+        return _$cc(Tabs, {
+          'type': 'border-card',
+          'value': panel.value,
+          'ev-$change:value': panel.set,
+          'children': [_$cc(Tab, {
+            'value': PanelTypes.Date,
+            'children': dateString
+          }), _$cc(Tab, {
+            'value': PanelTypes.Time,
+            'disabled': !timeValue,
+            'children': timeString
+          })]
+        });
+      }
+    }(), panel.value === PanelTypes.Date ? _$cc(DatepickerCalendar, {
+      'value': value,
+      'ev-change': onChangeDate,
+      'type': type === 'datetime' ? 'date' : type,
+      'flag': flag,
+      'ref': flag === PanelFlags.Start ? startRef : endRef
+    }, null, flag === PanelFlags.Start ? startRef : endRef) : _$cc(DatepickerTime, {
+      'value': timeValue,
+      'ev-$change:value': function ev$changeValue(v) {
+        return onChangeTime(v, flag);
+      },
+      'format': _this.formats.getValueFormat(),
+      'flag': flag,
+      'isDisabledTime': isDisabledTime
+    })], 0, 'k-datepicker-calendar-wrapper');
+  };
+
+  return _$su.call($this, _$tmp0, function ($blocks) {
+    var _$blocks = {},
+        __$blocks = _$ex({}, $blocks);
+
+    return (_$blocks['base-menu'] = function ($super) {
+      return _$cc(DropdownMenu, {
+        'className': _$cn(classNameObj),
+        'children': [shortcuts && shortcuts.length ? _$ce(2, 'div', _$ma(shortcuts, function ($value, $key) {
+          return _$ce(2, 'div', isFunction($value.label) ? $value.label() : $value.label, 0, 'k-datepicker-shortcut', {
+            'ev-click': linkEvent($value, this.setByShortcut)
+          });
+        }, $this), 4, 'k-datepicker-shortcuts') : undefined, _$ce(2, 'div', [_$ce(2, 'div', [generatePanel(PanelFlags.Start), _$ct('\n                    '), range ? generatePanel(PanelFlags.End) : null], 0, 'k-datepicker-calendars'), type === 'datetime' ? _$ce(2, 'div', _$cc(Button, {
+          'type': 'primary',
+          'size': 'small',
+          'disabled': isDisabledConfirm(),
+          'ev-click': onConfirm,
+          'children': _$('确定')
+        }), 2, 'k-datepicker-footer') : undefined], 0, 'k-datepicker-wrapper')]
+      });
+    }, __$blocks['base-menu'] = function ($super, data) {
+      var block = $blocks['base-menu'];
+
+      var callBlock = function callBlock() {
+        return _$blocks['base-menu'].call($this, $super, data);
+      };
+
+      return block ? block.call($this, callBlock, data) : callBlock();
+    }), (_$blocks['suffix'] = function ($super) {
+      return _$cc(Icon, _$tmp1);
+    }, __$blocks['suffix'] = function ($super, data) {
+      var block = $blocks['suffix'];
+
+      var callBlock = function callBlock() {
+        return _$blocks['suffix'].call($this, $super, data);
+      };
+
+      return block ? block.call($this, callBlock, data) : callBlock();
+    }), __$blocks;
+  }.call($this, $blocks), $__proto__);
+}
+;
+
+export {normalize} from 'intact-react';

package/components/datepicker/shortcuts.d.ts

@@ -0,0 +1,24 @@
+import { Children } from 'intact-react';
+import { Value } from './basepicker';
+export declare type Shortcut = {
+    label: (() => Children) | Children;
+    value: () => Value | [Value, Value];
+};
+export declare const today: Shortcut;
+export declare const yesterday: Shortcut;
+export declare const tomorrow: Shortcut;
+export declare const afterOneWeek: Shortcut;
+export declare const afterOneMonth: Shortcut;
+export declare const afterThreeMonths: Shortcut;
+export declare const beforeOneWeek: Shortcut;
+export declare const beforeOneMonth: Shortcut;
+export declare const beforeThreeMonths: Shortcut;
+export declare const lastWeek: Shortcut;
+export declare const nextWeek: Shortcut;
+export declare const lastMonth: Shortcut;
+export declare const nextMonth: Shortcut;
+export declare const lastThreeMonths: Shortcut;
+export declare const nextThreeMonths: Shortcut;
+
+
+export {normalize} from 'intact-react';

package/components/datepicker/shortcuts.js

@@ -0,0 +1,140 @@
+import { _$ } from '../../i18n';
+
+function now() {
+  return new Date();
+}
+
+function days(days) {
+  var now = new Date();
+  now.setDate(now.getDate() + days);
+  return now;
+}
+
+function months(months) {
+  var now = new Date();
+  now.setMonth(now.getMonth() + months);
+  return now;
+}
+
+export var today = {
+  label: function label() {
+    return _$('今天');
+  },
+  value: function value() {
+    return now();
+  }
+};
+export var yesterday = {
+  label: function label() {
+    return _$('昨天');
+  },
+  value: function value() {
+    return days(-1);
+  }
+};
+export var tomorrow = {
+  label: function label() {
+    return _$('明天');
+  },
+  value: function value() {
+    return days(1);
+  }
+};
+export var afterOneWeek = {
+  label: function label() {
+    return _$('一周后');
+  },
+  value: function value() {
+    return days(7);
+  }
+};
+export var afterOneMonth = {
+  label: function label() {
+    return _$('一月后');
+  },
+  value: function value() {
+    return months(1);
+  }
+};
+export var afterThreeMonths = {
+  label: function label() {
+    return _$('三月后');
+  },
+  value: function value() {
+    return months(3);
+  }
+};
+export var beforeOneWeek = {
+  label: function label() {
+    return _$('一周前');
+  },
+  value: function value() {
+    return days(-7);
+  }
+};
+export var beforeOneMonth = {
+  label: function label() {
+    return _$('一月前');
+  },
+  value: function value() {
+    return months(-1);
+  }
+};
+export var beforeThreeMonths = {
+  label: function label() {
+    return _$('三月前');
+  },
+  value: function value() {
+    return months(-3);
+  }
+};
+export var lastWeek = {
+  label: function label() {
+    return _$('上一周');
+  },
+  value: function value() {
+    return [days(-7), now()];
+  }
+};
+export var nextWeek = {
+  label: function label() {
+    return _$('下一周');
+  },
+  value: function value() {
+    return [now(), days(7)];
+  }
+};
+export var lastMonth = {
+  label: function label() {
+    return _$('上一个月');
+  },
+  value: function value() {
+    return [months(-1), now()];
+  }
+};
+export var nextMonth = {
+  label: function label() {
+    return _$('下一个月');
+  },
+  value: function value() {
+    return [now(), months(1)];
+  }
+};
+export var lastThreeMonths = {
+  label: function label() {
+    return _$('前三个月');
+  },
+  value: function value() {
+    return [months(-3), now()];
+  }
+};
+export var nextThreeMonths = {
+  label: function label() {
+    return _$('后三个月');
+  },
+  value: function value() {
+    return [now(), months(3)];
+  }
+};
+
+export {normalize} from 'intact-react';

package/components/datepicker/styles.d.ts

@@ -0,0 +1,9 @@
+import '../../styles/global';
+declare let datepicker: any;
+export { datepicker };
+export declare function makePanelStyles(): string;
+export declare function makeCalendarStyles(): string;
+export declare function makeTimeStyles(): string;
+
+
+export {normalize} from 'intact-react';

package/components/datepicker/styles.js

@@ -0,0 +1,89 @@
+import { css } from '@emotion/css';
+import { theme, setDefault } from '../../styles/theme';
+import { deepDefaults, palette } from '../../styles/utils';
+import '../../styles/global';
+var defaults = {
+  width: "300px",
+  padding: "16px 16px 4px",
+  border: "1px solid #e5e5e5",
+  item: {
+    gutter: "7px",
+    height: "24px",
+
+    get hoverBgColor() {
+      return theme.color.bg;
+    },
+
+    get exceedColor() {
+      return theme.color.disabled;
+    },
+
+    get todayBorder() {
+      return "1px solid " + theme.color.border;
+    },
+
+    get borderRadius() {
+      return theme.borderRadius;
+    },
+
+    active: {
+      get bgColor() {
+        return theme.color.primary;
+      },
+
+      color: "#fff",
+      todayBorderColor: "transparent"
+    },
+    disabled: {
+      color: '#ccc',
+      hoverBgColor: 'none'
+    },
+    range: {
+      get bgColor() {
+        return palette(datepicker.item.active.bgColor, -4);
+      }
+
+    }
+  },
+  weekday: {
+    padding: "10px 0"
+  },
+  month: {
+    padding: "0 6px 12px",
+    fontSize: "14px",
+    valueGap: "3px"
+  },
+  footer: {
+    padding: "8px 16px"
+  },
+  shortcuts: {
+    width: '100px',
+    padding: '12px 0',
+    shortcut: {
+      get hoverBgcolor() {
+        return theme.color.bg;
+      },
+
+      height: '32px',
+      padding: '0 16px'
+    }
+  }
+};
+var datepicker;
+setDefault(function () {
+  datepicker = deepDefaults(theme, {
+    datepicker: defaults
+  }).datepicker;
+});
+export { datepicker };
+export function makePanelStyles() {
+  return /*#__PURE__*/css("display:flex;.k-datepicker-shortcuts{width:", datepicker.shortcuts.width, ";padding:", datepicker.shortcuts.padding, ";border-right:", datepicker.border, ";}.k-datepicker-shortcut{height:", datepicker.shortcuts.shortcut.height, ";line-height:", datepicker.shortcuts.shortcut.height, ";padding:", datepicker.shortcuts.shortcut.padding, ";cursor:pointer;&:hover{background:", datepicker.shortcuts.shortcut.hoverBgcolor, ";}}.k-datepicker-calendars{display:flex;}.k-datepicker-calendar-wrapper{&:nth-child(2){border-left:", datepicker.border, ";}.k-tabs{border:none;.k-tabs-wrapper{float:none;}.k-tab{width:50%;}}}.k-datepicker-footer{border-top:", datepicker.border, ";padding:", datepicker.footer.padding, ";text-align:right;}");
+}
+export function makeCalendarStyles() {
+  return /*#__PURE__*/css("padding:", datepicker.padding, ";width:", datepicker.width, ";position:relative;.k-datepicker-month{display:flex;padding:", datepicker.month.padding, ";}.k-month-values{flex:1;font-size:14px;text-align:center;cursor:pointer;overflow:hidden;position:relative;}.k-month-value{margin:0 ", datepicker.month.valueGap, ";line-height:", theme.small.height, ";&:hover{color:", theme.color.primary, ";}},.k-weekdays{display:flex;border-bottom:", datepicker.border, ";padding:", datepicker.weekday.padding, ";}.k-weekday{flex:1;text-align:center;}.k-calendar-item{text-align:center;margin:", datepicker.item.gutter, ";aspect-ratio:1;display:flex;align-items:center;cursor:pointer;position:relative;border-radius:", datepicker.item.borderRadius, ";&.k-hover{background:", datepicker.item.hoverBgColor, ";}&.k-exceed{color:", datepicker.item.exceedColor, ";}&.k-today{border:", datepicker.item.todayBorder, ";}&.k-active{background:", datepicker.item.active.bgColor, ";color:", datepicker.item.active.color, ";&.k-today{border-color:", datepicker.item.active.todayBorderColor, ";}}&.k-disabled{color:", datepicker.item.disabled.color, ";cursor:not-allowed;background:", datepicker.item.disabled.hoverBgColor, ";}&.k-in-range:after{content:'';display:block;position:absolute;box-sizing:content-box;background:", datepicker.item.range.bgColor, ";width:100%;height:100%;left:-", datepicker.item.gutter, ";padding:0 ", datepicker.item.gutter, ";z-index:-1;}.k-value{flex:1;}}.k-days{display:grid;grid-template-columns:repeat(7, 1fr);}.k-years{display:grid;grid-template-columns:repeat(4, 1fr);}");
+}
+export function makeTimeStyles() {
+  return /*#__PURE__*/css("display:flex;padding:", datepicker.padding, ";width:", datepicker.width, ";position:relative;.k-scroll-select{flex:1;height:305px;}");
+}
+
+export {normalize} from 'intact-react';

package/components/datepicker/time.d.ts

@@ -0,0 +1,33 @@
+import { Component } from 'intact-react';
+import { Dayjs } from 'dayjs';
+import { PanelFlags } from './usePanel';
+export interface DatepickerTimeProps {
+    value: Dayjs | undefined;
+    format: string;
+    flag: PanelFlags;
+    isDisabledTime: (v: Dayjs, flag: PanelFlags) => boolean;
+}
+declare type Value = {
+    h: number;
+    m: number;
+    s: number;
+};
+export declare class DatepickerTime extends Component<DatepickerTimeProps> {
+    static template: string | import("intact").Template<any>;
+    value: import("../../hooks/useState").State<Value | null>;
+    disabled: {
+        disableSeconds: import("../../hooks/useState").State<boolean>;
+        disableMinutes: import("../../hooks/useState").State<boolean>;
+        disableHours: import("../../hooks/useState").State<boolean>;
+        disableItem: (v: number, type: keyof Value) => boolean;
+    };
+    init(): void;
+    changeHour(v: number): void;
+    changeMinute(v: number): void;
+    changeSecond(v: number): void;
+    private changeValue;
+}
+export {};
+
+
+export {normalize} from 'intact-react';

package/components/datepicker/time.js

@@ -0,0 +1,107 @@
+import _assertThisInitialized from "@babel/runtime-corejs3/helpers/assertThisInitialized";
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import { __decorate } from "tslib";
+import { Component } from 'intact-react';
+import template from './time.vdt';
+import { useState } from '../../hooks/useState';
+import { bind } from '../utils';
+import { getNowDate } from './helpers';
+var defaultValue = {
+  h: 0,
+  m: 0,
+  s: 0
+};
+export var DatepickerTime = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(DatepickerTime, _Component);
+
+  function DatepickerTime() {
+    var _context;
+
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
+    _this.value = useState(null);
+    _this.disabled = useDisable(_assertThisInitialized(_this));
+    return _this;
+  }
+
+  var _proto = DatepickerTime.prototype;
+
+  _proto.init = function init() {
+    var _this2 = this;
+
+    this.watch('value', function (v) {
+      _this2.value.set(v ? {
+        h: v.hour(),
+        m: v.minute(),
+        s: v.second()
+      } : defaultValue);
+    });
+  };
+
+  _proto.changeHour = function changeHour(v) {
+    this.changeValue(v, 'h');
+  };
+
+  _proto.changeMinute = function changeMinute(v) {
+    this.changeValue(v, 'm');
+  };
+
+  _proto.changeSecond = function changeSecond(v) {
+    this.changeValue(v, 's');
+  };
+
+  _proto.changeValue = function changeValue(v, type) {
+    var value = this.get('value') || getNowDate();
+    this.set('value', value.set(type, v));
+  };
+
+  return DatepickerTime;
+}(Component);
+DatepickerTime.template = template;
+
+__decorate([bind], DatepickerTime.prototype, "changeHour", null);
+
+__decorate([bind], DatepickerTime.prototype, "changeMinute", null);
+
+__decorate([bind], DatepickerTime.prototype, "changeSecond", null);
+
+var hourRegExp = /h/i;
+var secondRegExp = /s/;
+var minuteRegExp = /m/;
+
+function useDisable(instance) {
+  var disableSeconds = useState(false);
+  var disableMinutes = useState(false);
+  var disableHours = useState(false);
+  instance.on('$receive:format', function (format) {
+    disableSeconds.set(!secondRegExp.test(format));
+    disableMinutes.set(!minuteRegExp.test(format));
+    disableHours.set(!hourRegExp.test(format));
+  });
+
+  function disableItem(v, type) {
+    var _instance$get = instance.get(),
+        value = _instance$get.value,
+        isDisabledTime = _instance$get.isDisabledTime,
+        flag = _instance$get.flag;
+
+    if (!value) return false;
+    value = value.set(type, v);
+    return isDisabledTime(value, flag);
+  }
+
+  return {
+    disableSeconds: disableSeconds,
+    disableMinutes: disableMinutes,
+    disableHours: disableHours,
+    disableItem: disableItem
+  };
+}
+
+export {normalize} from 'intact-react';

package/components/datepicker/time.vdt.js

@@ -0,0 +1,48 @@
+import { createElementVNode as _$ce, createUnknownComponentVNode as _$cc, className as _$cn } from 'intact-react';
+import { ScrollSelect } from '../scrollSelect';
+import { hours, minutes, seconds } from './constants';
+import { makeTimeStyles } from './styles';
+export default function ($props, $blocks, $__proto__) {
+  var _classNameObj;
+
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+  var value = this.value.value;
+  var _this$disabled = this.disabled,
+      disableHours = _this$disabled.disableHours,
+      disableMinutes = _this$disabled.disableMinutes,
+      disableSeconds = _this$disabled.disableSeconds,
+      disableItem = _this$disabled.disableItem;
+  var classNameObj = (_classNameObj = {
+    'k-datepicker-time': true
+  }, _classNameObj[makeTimeStyles()] = true, _classNameObj);
+  return _$ce(2, 'div', [_$cc(ScrollSelect, {
+    'data': hours,
+    'value': value.h,
+    'ev-$change:value': this.changeHour,
+    'disabled': disableHours.value,
+    'disable': function disable(v) {
+      return disableItem(v, 'h');
+    }
+  }), _$cc(ScrollSelect, {
+    'data': minutes,
+    'value': value.m,
+    'ev-$change:value': this.changeMinute,
+    'disabled': disableMinutes.value,
+    'disable': function disable(v) {
+      return disableItem(v, 'm');
+    }
+  }), _$cc(ScrollSelect, {
+    'data': seconds,
+    'value': value.s,
+    'ev-$change:value': this.changeSecond,
+    'disabled': disableSeconds.value,
+    'disable': function disable(v) {
+      return disableItem(v, 's');
+    }
+  })], 4, _$cn(classNameObj));
+}
+;
+
+export {normalize} from 'intact-react';

package/components/datepicker/useDays.d.ts

@@ -0,0 +1,19 @@
+import dayjs, { Dayjs } from 'dayjs';
+import { State } from '../../hooks/useState';
+import type { useStatus } from './useStatus';
+export declare function useDays(showDate: State<Dayjs>, status: ReturnType<typeof useStatus>, focusDate: State<Dayjs | null>): {
+    getDays: (now: Dayjs) => {
+        isExceed: boolean;
+        isActive: boolean;
+        isToday: boolean;
+        isDisabled: boolean;
+        isHover: boolean;
+        isInRange: boolean;
+        label: number;
+        value: dayjs.Dayjs;
+    }[];
+    onClick: (value: dayjs.Dayjs) => void;
+};
+
+
+export {normalize} from 'intact-react';

package/components/datepicker/useDays.js

@@ -0,0 +1,47 @@
+import { useInstance } from 'intact-react';
+import dayjs from 'dayjs';
+import { clearTime, isEqual } from './helpers';
+export function useDays(showDate, status, focusDate) {
+  var instance = useInstance();
+
+  function getDays(now) {
+    var days = []; // dayjs is immutable, so we convert to native Date
+
+    var start = showDate.value.toDate();
+    var month = start.getMonth();
+    start.setDate(1);
+    clearTime(start);
+    var startWeekday = start.getDay();
+    start.setDate(1 - startWeekday);
+
+    for (var i = 0; i < 42; i++) {
+      var dayjsDate = dayjs(start);
+
+      var _date = start.getDate();
+
+      var _month = start.getMonth();
+
+      var isExceed = _month !== month;
+      days.push({
+        isExceed: isExceed,
+        isActive: !isExceed && status.isActive(dayjsDate, 'date'),
+        isToday: isEqual(now, dayjsDate),
+        isDisabled: status.isDisabled(dayjsDate),
+        isHover: isEqual(focusDate.value, dayjsDate),
+        isInRange: !isExceed && status.isInRange(dayjsDate, 'date'),
+        label: _date,
+        value: dayjsDate
+      });
+      start.setDate(start.getDate() + 1);
+    }
+
+    return days;
+  }
+
+  return {
+    getDays: getDays,
+    onClick: instance.triggerChange
+  };
+}
+
+export {normalize} from 'intact-react';

package/components/datepicker/useDisabled.d.ts

@@ -0,0 +1,14 @@
+import { State } from '../../hooks/useState';
+import { Dayjs, OpUnitType } from 'dayjs';
+import type { useFormats } from './useFormats';
+import { PanelFlags } from './usePanel';
+export declare function useDisabled({ createDateByValueFormat }: ReturnType<typeof useFormats>): {
+    isDisabled: (value: Dayjs, type?: OpUnitType) => boolean;
+    isDisabledTime: (value: Dayjs, flag: PanelFlags) => boolean;
+    isDisabledConfirm: () => boolean;
+    maxDate: State<Dayjs | null>;
+    minDate: State<Dayjs | null>;
+};
+
+
+export {normalize} from 'intact-react';