@king-design/react 2.0.0-beta.0

package/components/timepicker/selectPicker.js

@@ -0,0 +1,33 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import { Component } from 'intact-react';
+import { typeDefs } from './constants';
+import template from './selectPicker.vdt';
+import { useFormats } from './useFormats';
+import { useDisabled } from '../datepicker/useDisabled';
+import { useStep } from './useStep';
+export var SelectPicker = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(SelectPicker, _Component);
+
+  function SelectPicker() {
+    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.formats = useFormats();
+    _this.disabled = useDisabled(_this.formats);
+    _this.step = useStep(_this.disabled, _this.formats);
+    return _this;
+  }
+
+  return SelectPicker;
+}(Component);
+SelectPicker.template = template;
+SelectPicker.typeDefs = typeDefs;
+
+export {normalize} from 'intact-react';

package/components/timepicker/selectPicker.vdt.js

@@ -0,0 +1,57 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime-corejs3/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["className", "value", "placeholder"];
+import { createUnknownComponentVNode as _$cc, className as _$cn, map as _$ma, extend as _$ex, EMPTY_OBJ as _$em } from 'intact-react';
+import { Select, Option } from '../select';
+import { Icon } from '../icon';
+import { _$ } from '../../i18n';
+var _$tmp0 = {
+  'className': 'k-icon-time'
+};
+export default function ($props, $blocks, $__proto__) {
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+
+  var _this$get = this.get(),
+      className = _this$get.className,
+      value = _this$get.value,
+      placeholder = _this$get.placeholder,
+      rest = _objectWithoutPropertiesLoose(_this$get, _excluded);
+
+  var options = this.step.options.value;
+  return _$cc(Select, _extends({}, rest, {
+    'placeholder': placeholder || _$('请选择时间'),
+    'filterable': true,
+    'className': _$cn(className),
+    'children': _$ma(options, function ($value, $key) {
+      return _$cc(Option, {
+        'value': $value.value,
+        'children': $value.label
+      });
+    }, $this),
+    '$blocks': function ($blocks) {
+      var _$blocks = {},
+          __$blocks = _$ex({}, $blocks);
+
+      return (_$blocks['suffix'] = function ($super) {
+        return _$cc(Icon, _$tmp0);
+      }, __$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, _$em),
+    'ev-$model:value': function ev$modelValue($v) {
+      $this.set('value', $v);
+    },
+    'value': $this.get('value')
+  }));
+}
+;
+
+export {normalize} from 'intact-react';

package/components/timepicker/styles.d.ts

@@ -0,0 +1,5 @@
+import '../../styles/global';
+export declare function makePanelStyles(): string;
+
+
+export {normalize} from 'intact-react';

package/components/timepicker/styles.js

@@ -0,0 +1,31 @@
+import { css, cx } from '@emotion/css';
+import { theme, setDefault } from '../../styles/theme';
+import { deepDefaults } from '../../styles/utils';
+import '../../styles/global';
+import { datepicker, makePanelStyles as makePanelStylesBase } from '../datepicker/styles';
+var defaults = {
+  get border() {
+    return datepicker.border;
+  },
+
+  padding: "16px",
+  scrollHeight: "160px",
+  // range
+  range: {
+    width: "200px",
+    padding: "16px",
+    titleGap: "8px",
+    scrollHeight: "140px"
+  }
+};
+var timepicker;
+setDefault(function () {
+  timepicker = deepDefaults(theme, {
+    timepicker: defaults
+  }).timepicker;
+});
+export function makePanelStyles() {
+  return cx(makePanelStylesBase(), /*#__PURE__*/css("&.k-time-content{.k-datepicker-time{padding:", timepicker.padding, ";}.k-scroll-select{height:", timepicker.scrollHeight, ";}}&.k-range{.k-datepicker-time{width:auto;border:", timepicker.border, ";}.k-scroll-select{height:", timepicker.range.scrollHeight, ";}.k-datepicker-calendar-wrapper{padding:", timepicker.range.padding, ";width:", timepicker.range.width, ";border:none;}.k-timepicker-title{text-align:center;margin-bottom:", timepicker.range.titleGap, ";}}"));
+}
+
+export {normalize} from 'intact-react';

package/components/timepicker/useDisabled.d.ts

@@ -0,0 +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;
+    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;
+    isDisabledTimeByStep: (value: string, flag: PanelFlags) => boolean;
+};
+
+
+export {normalize} from 'intact-react';

package/components/timepicker/useDisabled.js

@@ -0,0 +1,20 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime-corejs3/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["isDisabledTime"];
+import { useDisabled as useDisabledBase } from '../datepicker/useDisabled';
+export function useDisabled(formats) {
+  var _useDisabledBase = useDisabledBase(formats),
+      isDisabledTime = _useDisabledBase.isDisabledTime,
+      rest = _objectWithoutPropertiesLoose(_useDisabledBase, _excluded);
+
+  function isDisabledTimeByStep(value, flag) {
+    return isDisabledTime(formats.createDateByValueFormat(value), flag);
+  }
+
+  return _extends({
+    isDisabledTime: isDisabledTime,
+    isDisabledTimeByStep: isDisabledTimeByStep
+  }, rest);
+}
+
+export {normalize} from 'intact-react';

package/components/timepicker/useFormats.d.ts

@@ -0,0 +1,15 @@
+import { Component } from 'intact-react';
+import dayjs, { Dayjs } from '../datepicker/dayjs';
+import type { TimepickerProps } from './';
+import type { Value } from '../datepicker/basepicker';
+export declare function useFormats<T extends Component<TimepickerProps>>(): {
+    getValueFormat: () => string;
+    getShowFormat: () => string;
+    createDateByValueFormat: (value: Value) => dayjs.Dayjs;
+    createDateByShowFormat: (value: Value) => dayjs.Dayjs;
+    getShowString: (value: Dayjs) => string;
+    getValueString: (value: Dayjs) => string;
+};
+
+
+export {normalize} from 'intact-react';

package/components/timepicker/useFormats.js

@@ -0,0 +1,49 @@
+import { useInstance } from 'intact-react';
+import dayjs from '../datepicker/dayjs';
+import { YEAR_FORMAT, TIME_FORMAT, PREFIX } from './constants';
+export function useFormats() {
+  var instance = useInstance();
+
+  function getValueFormat() {
+    var _instance$get = instance.get(),
+        format = _instance$get.format,
+        valueFormat = _instance$get.valueFormat;
+
+    return valueFormat || format || TIME_FORMAT;
+  }
+
+  function getShowFormat() {
+    var _instance$get2 = instance.get(),
+        format = _instance$get2.format,
+        showFormat = _instance$get2.showFormat;
+
+    return showFormat || format || TIME_FORMAT;
+  }
+
+  function createDateByValueFormat(value) {
+    return dayjs(PREFIX + value, YEAR_FORMAT + getValueFormat());
+  }
+
+  function createDateByShowFormat(value) {
+    return dayjs(PREFIX + value, YEAR_FORMAT + getShowFormat(), true); // strict parsing 
+  }
+
+  function getShowString(value) {
+    return value.format(getShowFormat());
+  }
+
+  function getValueString(value) {
+    return value.format(getValueFormat());
+  }
+
+  return {
+    getValueFormat: getValueFormat,
+    getShowFormat: getShowFormat,
+    createDateByValueFormat: createDateByValueFormat,
+    createDateByShowFormat: createDateByShowFormat,
+    getShowString: getShowString,
+    getValueString: getValueString
+  };
+}
+
+export {normalize} from 'intact-react';

package/components/timepicker/useStep.d.ts

@@ -0,0 +1,13 @@
+import type { useDisabled } from '../datepicker/useDisabled';
+import type { useFormats } from './useFormats';
+declare type Option = {
+    value: string;
+    label: string;
+};
+export declare function useStep({ maxDate, minDate }: ReturnType<typeof useDisabled>, { getValueString, getShowString }: ReturnType<typeof useFormats>): {
+    options: import("../../hooks/useState").State<Option[] | null>;
+};
+export {};
+
+
+export {normalize} from 'intact-react';

package/components/timepicker/useStep.js

@@ -0,0 +1,70 @@
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
+import { useInstance } from 'intact-react';
+import { useState } from '../../hooks/useState';
+import { NOW } from './constants';
+import { useReceive } from '../../hooks/useReceive';
+export function useStep(_ref, _ref2) {
+  var maxDate = _ref.maxDate,
+      minDate = _ref.minDate;
+  var getValueString = _ref2.getValueString,
+      getShowString = _ref2.getShowString;
+  var instance = useInstance();
+  var options = useState(null);
+  useReceive(['step', 'min', 'max'], generateOptions);
+
+  function generateOptions() {
+    var _instance$get = instance.get(),
+        step = _instance$get.step;
+
+    if (step) {
+      var data = [];
+      var maxValue = maxDate.value || NOW.hour(23).minute(59).second(59);
+      var stepValue = parseTime(step);
+      var value = minDate.value || NOW;
+
+      var push = function push(value) {
+        data.push({
+          value: getValueString(value),
+          label: getShowString(value)
+        });
+      };
+
+      for (;; value = value.add(stepValue, 'second')) {
+        if (value <= maxValue) {
+          push(value);
+          if (+value === +maxValue) break;
+        } else if (data.length) {
+          // it the last value is less than maxValue,
+          // add the maxValue to the last
+          push(maxValue);
+          break;
+        } else {
+          break;
+        }
+      }
+
+      options.set(data);
+    } else {
+      options.set(null);
+    }
+  }
+
+  function parseTime(time) {
+    var _context;
+
+    var _time$split$map = _mapInstanceProperty(_context = time.split(':')).call(_context, function (item) {
+      return parseInt(item, 10);
+    }),
+        hours = _time$split$map[0],
+        minutes = _time$split$map[1],
+        seconds = _time$split$map[2];
+
+    return (hours * 60 + (minutes || 0)) * 60 + (seconds || 0);
+  }
+
+  return {
+    options: options
+  };
+}
+
+export {normalize} from 'intact-react';

package/components/timepicker/useValue.d.ts

@@ -0,0 +1,19 @@
+import type { useFormats } from './useFormats';
+import { StateValueItem } from '../datepicker/basepicker';
+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>): {
+    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>;
+    setValue: (v: StateValueItem, fromInput: boolean) => void;
+    getDayjsValue: () => import("../datepicker/basepicker").DayjsValue;
+    onChangeTime: (date: import("dayjs").Dayjs, flag: PanelFlags) => void;
+    onChangeTimeByStep: (v: string, flag: PanelFlags) => void;
+};
+
+
+export {normalize} from 'intact-react';

package/components/timepicker/useValue.js

@@ -0,0 +1,54 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime-corejs3/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["value", "getDayjsValue", "setValue", "onChangeTime"];
+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 } from './constants';
+export function useValue(formats, disabled, panel) {
+  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();
+    setValue(v, true);
+  }, function () {
+    return 'second';
+  }, function (dayjsValue, value) {
+    value.set(_sliceInstanceProperty(dayjsValue).call(dayjsValue, 0));
+  }),
+      value = _useValueBase.value,
+      getDayjsValue = _useValueBase.getDayjsValue,
+      setValue = _useValueBase.setValue,
+      onChangeTime = _useValueBase.onChangeTime,
+      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, NOW] : NOW;
+  }
+
+  function onChangeTimeByStep(v, flag) {
+    var date = formats.createDateByValueFormat(v);
+    onChangeTime(date, flag);
+  }
+
+  return _extends({
+    value: value,
+    setValue: setValue,
+    getDayjsValue: getDayjsValue,
+    onChangeTime: onChangeTime,
+    onChangeTimeByStep: onChangeTimeByStep
+  }, rest);
+}
+
+export {normalize} from 'intact-react';

package/components/tip/index.d.ts

@@ -0,0 +1,15 @@
+import { Tag, TagProps, TagEvents, TagBlocks } from '../tag/base';
+export interface TipProps extends TagProps {
+}
+export interface TipEvents extends TagEvents {
+}
+export interface TipBlocks extends TagBlocks {
+    title: null;
+    close: null;
+}
+export declare class Tip extends Tag<TipProps, TipEvents, TipBlocks> {
+    static template: string | import("vdt").Template<any>;
+}
+
+
+export {normalize} from 'intact-react';

package/components/tip/index.js

@@ -0,0 +1,15 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import template from './index.vdt';
+import { Tag } from '../tag/base';
+export var Tip = /*#__PURE__*/function (_Tag) {
+  _inheritsLoose(Tip, _Tag);
+
+  function Tip() {
+    return _Tag.apply(this, arguments) || this;
+  }
+
+  return Tip;
+}(Tag);
+Tip.template = template;
+
+export {normalize} from 'intact-react';

package/components/tip/index.vdt.js

@@ -0,0 +1,86 @@
+import { superCall as _$su, className as _$cn, extend as _$ex, EMPTY_OBJ as _$em, createElementVNode as _$ce, noop as _$no, createUnknownComponentVNode as _$cc } from 'intact-react';
+import { Button } from '../button';
+import { Icon } from '../icon';
+import { makeStyles } from './styles';
+export default function ($props, $blocks, $__proto__) {
+  var _classNameObj;
+
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+  var _$blocks = {};
+  var __$blocks = {};
+
+  var _this$get = this.get(),
+      children = _this$get.children,
+      closable = _this$get.closable,
+      type = _this$get.type,
+      disabled = _this$get.disabled;
+
+  var classNameObj = (_classNameObj = {
+    'k-tip': true
+  }, _classNameObj[makeStyles()] = true, _classNameObj);
+  return _$su.call($this, {
+    'className': _$cn(classNameObj),
+    'name': 'k-fade'
+  }, function ($blocks) {
+    var _$blocks = {},
+        __$blocks = _$ex({}, $blocks);
+
+    return (_$blocks['body'] = function ($super) {
+      return _$ce(2, 'div', [$blocks.title ? _$ce(2, 'div', (_$blocks['title'] = function ($super) {
+        return null;
+      }, __$blocks['title'] = function ($super, data) {
+        var block = $blocks['title'];
+
+        var callBlock = function callBlock() {
+          return _$blocks['title'].call($this, $super, data);
+        };
+
+        return block ? block.call($this, callBlock, data) : callBlock();
+      }, __$blocks['title'](_$no)), 0, 'k-tip-title') : undefined, children], 0, 'k-tip-wrapper');
+    }, __$blocks['body'] = function ($super, data) {
+      var block = $blocks['body'];
+
+      var callBlock = function callBlock() {
+        return _$blocks['body'].call($this, $super, data);
+      };
+
+      return block ? block.call($this, callBlock, data) : callBlock();
+    }), (_$blocks['_close'] = function ($super) {
+      return closable ? _$cc(Button, {
+        'type': !$blocks.close ? 'none' : 'link',
+        'icon': !$blocks.close,
+        'ev-click': this.onClose,
+        'className': 'k-tip-close',
+        'children': (_$blocks['close'] = function ($super) {
+          return _$cc(Icon, {
+            'className': 'ion-ios-close-empty',
+            'size': 'large',
+            'color': type,
+            'hoverable': !disabled
+          });
+        }, __$blocks['close'] = function ($super, data) {
+          var block = $blocks['close'];
+
+          var callBlock = function callBlock() {
+            return _$blocks['close'].call($this, $super, data);
+          };
+
+          return block ? block.call($this, callBlock, data) : callBlock();
+        }, __$blocks['close'](_$no))
+      }) : undefined;
+    }, __$blocks['_close'] = function ($super, data) {
+      var block = $blocks['_close'];
+
+      var callBlock = function callBlock() {
+        return _$blocks['_close'].call($this, $super, data);
+      };
+
+      return block ? block.call($this, callBlock, data) : callBlock();
+    }), __$blocks;
+  }.call($this, $blocks), $__proto__);
+}
+;
+
+export {normalize} from 'intact-react';

package/components/tip/styles.d.ts

@@ -0,0 +1,5 @@
+import '../../styles/global';
+export declare function makeStyles(): string;
+
+
+export {normalize} from 'intact-react';

package/components/tip/styles.js

@@ -0,0 +1,30 @@
+import { theme, setDefault } from '../../styles/theme';
+import { css } from '@emotion/css';
+import '../../styles/global';
+import { deepDefaults } from '../../styles/utils';
+var defaults = {
+  title: {
+    fontSize: '14px',
+    gap: '8px'
+  },
+
+  get color() {
+    return theme.color.text;
+  },
+
+  get padding() {
+    return "6px " + theme.default.padding;
+  }
+
+};
+var tip;
+setDefault(function () {
+  tip = deepDefaults(theme, {
+    tip: defaults
+  }).tip;
+});
+export function makeStyles() {
+  return /*#__PURE__*/css("&.k-tip{display:flex;height:auto;padding:0;color:", tip.color, "!important;align-items:flex-start;}.k-tip-wrapper{flex:1;padding:", tip.padding, ";}.k-tip-title{font-size:", tip.title.fontSize, ";margin-bottom:", tip.title.gap, ";}&.k-fade-leave-active{position:relative;}");
+}
+
+export {normalize} from 'intact-react';

package/components/tooltip/content.d.ts

@@ -0,0 +1,21 @@
+import { DropdownMenu, DropdownMenuProps, DropdownMenuEvents, DropdownMenuBlocks } from '../dropdown/menu';
+export interface TooltipContentProps extends DropdownMenuProps {
+}
+export interface TooltipContentEvents extends DropdownMenuEvents {
+}
+export interface TooltipContentBlocks extends DropdownMenuBlocks {
+    buttons: null;
+}
+export declare class TooltipContent extends DropdownMenu<TooltipContentProps, TooltipContentEvents, TooltipContentBlocks> {
+    static template: string | import('intact-react').Template<any>;
+    private isEmptyChildren;
+    private arrow;
+    init(): void;
+    private onEnter;
+    protected onMouseEnter(e: MouseEvent): void;
+    private ok;
+    private cancel;
+}
+
+
+export {normalize} from 'intact-react';

package/components/tooltip/content.js

@@ -0,0 +1,94 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import { __decorate } from "tslib";
+import { DropdownMenu } from '../dropdown/menu';
+import template from './content.vdt';
+import { bind } from '../utils';
+import { useArrow } from './useArrow';
+export var TooltipContent = /*#__PURE__*/function (_DropdownMenu) {
+  _inheritsLoose(TooltipContent, _DropdownMenu);
+
+  function TooltipContent() {
+    var _context;
+
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _DropdownMenu.call.apply(_DropdownMenu, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
+    _this.isEmptyChildren = true;
+    _this.arrow = useArrow();
+    return _this;
+  }
+
+  var _proto = TooltipContent.prototype;
+
+  _proto.init = function init() {
+    var _this2 = this;
+
+    _DropdownMenu.prototype.init.call(this);
+
+    this.on('$receive:children', function (vNodes) {
+      _this2.isEmptyChildren = isEmptyChildren(vNodes);
+    });
+  };
+
+  _proto.onEnter = function onEnter() {
+    this.dropdown.position();
+  };
+
+  _proto.onMouseEnter = function onMouseEnter(e) {
+    var dropdown = this.dropdown;
+
+    if (dropdown.get('hoverable')) {
+      dropdown.show();
+    }
+
+    dropdown.trigger('mouseenter', e);
+  };
+
+  _proto.ok = function ok() {
+    var dropdown = this.dropdown;
+    dropdown.hide(true);
+    dropdown.trigger('ok');
+  };
+
+  _proto.cancel = function cancel() {
+    var dropdown = this.dropdown;
+    dropdown.hide(true);
+    dropdown.trigger('cancel');
+  };
+
+  return TooltipContent;
+}(DropdownMenu);
+TooltipContent.template = template;
+
+__decorate([bind], TooltipContent.prototype, "onEnter", null);
+
+__decorate([bind], TooltipContent.prototype, "onMouseEnter", null);
+
+__decorate([bind], TooltipContent.prototype, "ok", null);
+
+__decorate([bind], TooltipContent.prototype, "cancel", null);
+
+function isEmptyChildren(vNodes) {
+  if (!vNodes) return true;
+
+  if (Array.isArray(vNodes)) {
+    return vNodes.every(function (vNode) {
+      return isEmptyChildren(vNode);
+    });
+  }
+
+  if (vNodes.type === 1) {
+    return !vNodes.children;
+  }
+
+  return false;
+}
+
+;
+
+export {normalize} from 'intact-react';