@king-design/react 2.0.0-beta.0

package/components/diagram/styles.d.ts

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

package/components/diagram/styles.js

@@ -0,0 +1,16 @@
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+import { css } from '@emotion/css';
+import '../../styles/global';
+export function makeStyles() {
+  return /*#__PURE__*/css(process.env.NODE_ENV === "production" ? {
+    name: "ohhwil",
+    styles: "display:inline-block;overflow:auto;.mxRubberband{position:absolute;overflow:hidden;border-style:solid;border-width:1px;border-color:#0000ff;background:#0077ff;}.mxCellEditor{background:url(\"data:image/gif;base64,R0lGODlhMAAwAIAAAP///wAAACH5BAEAAAAALAAAAAAwADAAAAIxhI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC8fyTNf2jef6zvf+DwwKh8Si8egpAAA7\");border-color:transparent;border-style:solid;display:inline-block;position:absolute;overflow:visible;word-wrap:normal;border-width:0;min-width:1px;resize:none;padding:0;margin:0;}.mxPlainTextEditor{padding:0;margin:0;}"
+  } : {
+    name: "ohhwil",
+    styles: "display:inline-block;overflow:auto;.mxRubberband{position:absolute;overflow:hidden;border-style:solid;border-width:1px;border-color:#0000ff;background:#0077ff;}.mxCellEditor{background:url(\"data:image/gif;base64,R0lGODlhMAAwAIAAAP///wAAACH5BAEAAAAALAAAAAAwADAAAAIxhI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC8fyTNf2jef6zvf+DwwKh8Si8egpAAA7\");border-color:transparent;border-style:solid;display:inline-block;position:absolute;overflow:visible;word-wrap:normal;border-width:0;min-width:1px;resize:none;padding:0;margin:0;}.mxPlainTextEditor{padding:0;margin:0;}",
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+  });
+}
+
+export {normalize} from 'intact-react';

package/components/dialog/alert.vdt.js

@@ -0,0 +1,71 @@
+import { superCall as _$su, className as _$cn, extend as _$ex, EMPTY_OBJ as _$em, createElementVNode as _$ce, createUnknownComponentVNode as _$cc } from 'intact-react';
+import { Icon } from '../icon';
+import { Button } from '../button';
+import { makeAlertStyles } from './styles';
+export default function ($props, $blocks, $__proto__) {
+  var _classNameObj;
+
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+
+  var _this$get = this.get(),
+      type = _this$get.type,
+      content = _this$get.content,
+      hideIcon = _this$get.hideIcon,
+      hideFooter = _this$get.hideFooter,
+      hideClose = _this$get.hideClose,
+      title = _this$get.title;
+
+  var classNameObj = (_classNameObj = {
+    'k-alert-dialog': true
+  }, _classNameObj["k-" + type] = true, _classNameObj['k-with-title'] = title, _classNameObj[makeAlertStyles()] = true, _classNameObj);
+  return _$su.call($this, {
+    'className': _$cn(classNameObj)
+  }, function ($blocks) {
+    var _$blocks = {},
+        __$blocks = _$ex({}, $blocks);
+
+    return (_$blocks['header'] = function ($super) {
+      return null;
+    }, __$blocks['header'] = function ($super, data) {
+      var block = $blocks['header'];
+
+      var callBlock = function callBlock() {
+        return _$blocks['header'].call($this, $super, data);
+      };
+
+      return block ? block.call($this, callBlock, data) : callBlock();
+    }), (_$blocks['body'] = function ($super) {
+      return [_$ce(2, 'div', !hideIcon ? _$cc(Icon, {
+        'className': _$cn({
+          "ion-ios-checkmark": type === 'success',
+          "ion-ios-information": type === 'warning',
+          "ion-ios-close": type === 'error',
+          "ion-ios-help": type === 'confirm'
+        })
+      }) : undefined, 0, 'k-dialog-tip-icon'), _$ce(2, 'div', [title ? _$ce(2, 'div', title, 0, 'k-alert-dialog-title') : undefined, content], 0, 'k-alert-dialog-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['footer'] = function ($super) {
+      return hideFooter ? null : $super();
+    }, __$blocks['footer'] = function ($super, data) {
+      var block = $blocks['footer'];
+
+      var callBlock = function callBlock() {
+        return _$blocks['footer'].call($this, $super, data);
+      };
+
+      return block ? block.call($this, callBlock, data) : callBlock();
+    }), __$blocks;
+  }.call($this, $blocks), $__proto__);
+}
+;
+
+export {normalize} from 'intact-react';

package/components/dialog/base.d.ts

@@ -0,0 +1,70 @@
+import { Component, TypeDefs } from 'intact-react';
+import { Sizes } from '../../styles/utils';
+import { Container } from '../portal';
+import { SHOW, HIDE } from './constants';
+import type { Events } from '../types';
+export interface BaseDialogProps {
+    title?: string;
+    value?: boolean;
+    size?: Sizes;
+    loading?: boolean;
+    disabledOk?: boolean;
+    okText?: string;
+    cancelText?: string;
+    ok?: () => void;
+    cancel?: () => void;
+    container?: Container;
+    hideClose?: boolean;
+    overlay?: boolean;
+    closable?: boolean;
+    terminate?: () => void;
+    escClosable?: boolean;
+    width?: string | number;
+    mode?: 'destroy' | 'hide';
+}
+export interface BaseDialogEvents {
+    [SHOW]: [];
+    [HIDE]: [];
+    ok: [];
+    cancel: [];
+    terminate: [];
+    afterClose: [];
+}
+export interface BaseDialogBlocks {
+    content: null;
+    header: null;
+    body: null;
+    footerWrapper: null;
+    footer: null;
+}
+export declare class BaseDialog<T extends BaseDialogProps = BaseDialogProps, E extends BaseDialogEvents = BaseDialogEvents, B extends BaseDialogBlocks = BaseDialogBlocks> extends Component<T, E, B> {
+    static template: string | import("intact").Template<any>;
+    static typeDefs: Required<TypeDefs<BaseDialogProps>>;
+    static defaults: () => Partial<BaseDialogProps>;
+    static events: Events<BaseDialogEvents>;
+    dialogRef: import("intact").RefObject<HTMLDivElement>;
+    private overlayRef;
+    private drag;
+    private mouseOutsidable;
+    init(): void;
+    show(props?: T): void;
+    close(): void;
+    showLoading(): void;
+    hideLoading(): void;
+    disableOk(): void;
+    enableOk(): void;
+    /**
+     * @brief
+     * only be called by self when user clicks close button,
+     * presses ESC or clicks overlay
+     */
+    terminate(): void;
+    ok(): void;
+    cancel(): void;
+    private btnCallback;
+    private onClickWrapper;
+    private onAfterLeave;
+}
+
+
+export {normalize} from 'intact-react';

package/components/dialog/base.js

@@ -0,0 +1,167 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import { __decorate } from "tslib";
+import { Component, createRef, provide } from 'intact-react';
+import template from './base.vdt';
+import { sizes } from '../../styles/utils';
+import { _$ } from '../../i18n';
+import { useShowHideEvents } from '../../hooks/useShowHideEvents';
+import { bind } from '../utils';
+import { isFunction } from 'intact-shared';
+import { useMouseOutsidable } from '../../hooks/useMouseOutsidable';
+import { useDraggable } from './useDraggable';
+import { useEscClosable } from './useEscClosable';
+import { SHOW, HIDE, DIALOG } from './constants';
+import { useFixBody } from './useFixBody';
+var typeDefs = {
+  title: String,
+  value: Boolean,
+  size: sizes,
+  loading: Boolean,
+  disabledOk: Boolean,
+  okText: String,
+  cancelText: String,
+  ok: Function,
+  cancel: Function,
+  container: [String, Function],
+  hideClose: Boolean,
+  overlay: Boolean,
+  closable: Boolean,
+  terminate: Function,
+  escClosable: Boolean,
+  width: [String, Number],
+  mode: ['destroy', 'hide']
+};
+
+var defaults = function defaults() {
+  return {
+    title: _$('提示'),
+    value: false,
+    size: 'default',
+    okText: _$('确定'),
+    cancelText: _$('取消'),
+    overlay: true,
+    closable: true,
+    escClosable: true,
+    mode: 'hide'
+  };
+};
+
+var events = {
+  open: true,
+  close: true,
+  ok: true,
+  cancel: true,
+  terminate: true,
+  afterClose: true
+};
+export var BaseDialog = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(BaseDialog, _Component);
+
+  function BaseDialog() {
+    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.dialogRef = createRef();
+    _this.overlayRef = createRef();
+    _this.drag = useDraggable(_this.dialogRef, _this.overlayRef);
+    _this.mouseOutsidable = useMouseOutsidable(_this.dialogRef, false);
+    return _this;
+  }
+
+  var _proto = BaseDialog.prototype;
+
+  _proto.init = function init() {
+    useShowHideEvents('value', SHOW, HIDE);
+    useFixBody(this.dialogRef);
+    useEscClosable();
+    provide(DIALOG, this);
+  };
+
+  _proto.show = function show(props) {
+    this.set('value', true);
+  };
+
+  _proto.close = function close() {
+    this.set('value', false);
+  };
+
+  _proto.showLoading = function showLoading() {
+    this.set('loading', true);
+  };
+
+  _proto.hideLoading = function hideLoading() {
+    this.set('loading', false);
+  };
+
+  _proto.disableOk = function disableOk() {
+    this.set('disabledOk', true);
+  };
+
+  _proto.enableOk = function enableOk() {
+    this.set('disabledOk', false);
+  }
+  /**
+   * @brief
+   * only be called by self when user clicks close button,
+   * presses ESC or clicks overlay
+   */
+  ;
+
+  _proto.terminate = function terminate() {
+    this.btnCallback('terminate');
+  };
+
+  _proto.ok = function ok() {
+    this.btnCallback('ok');
+  };
+
+  _proto.cancel = function cancel() {
+    this.btnCallback('cancel');
+  };
+
+  _proto.btnCallback = function btnCallback(type) {
+    var callback = this.get(type);
+
+    if (isFunction(callback)) {
+      callback();
+    } else {
+      this.trigger(type);
+      this.close();
+    }
+  };
+
+  _proto.onClickWrapper = function onClickWrapper(e) {
+    if (this.get('closable')) {
+      this.terminate();
+    }
+  };
+
+  _proto.onAfterLeave = function onAfterLeave() {
+    this.trigger('afterClose');
+  };
+
+  return BaseDialog;
+}(Component);
+BaseDialog.template = template;
+BaseDialog.typeDefs = typeDefs;
+BaseDialog.defaults = defaults;
+BaseDialog.events = events;
+
+__decorate([bind], BaseDialog.prototype, "terminate", null);
+
+__decorate([bind], BaseDialog.prototype, "ok", null);
+
+__decorate([bind], BaseDialog.prototype, "cancel", null);
+
+__decorate([bind], BaseDialog.prototype, "onClickWrapper", null);
+
+__decorate([bind], BaseDialog.prototype, "onAfterLeave", null);
+
+export {normalize} from 'intact-react';

package/components/dialog/base.vdt.js

@@ -0,0 +1,146 @@
+import { createUnknownComponentVNode as _$cc, createElementVNode as _$ce, noop as _$no, className as _$cn } from 'intact-react';
+import { Button } from '../button';
+import { Icon } from '../icon';
+import { Portal } from '../portal';
+import { _$ } from '../../i18n';
+import { Transition } from 'intact';
+import { getRestProps, stopPropagation } from '../utils';
+import { makeDialogStyles, makeWrapperStyles } from './styles';
+var _$tmp0 = {
+  'className': 'ion-ios-close-empty'
+};
+export default function ($props, $blocks, $__proto__) {
+  var _classNameObj, _$cn2;
+
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+  var _$blocks = {};
+  var __$blocks = {};
+
+  var _this$get = this.get(),
+      size = _this$get.size,
+      container = _this$get.container,
+      hideClose = _this$get.hideClose,
+      overlay = _this$get.overlay,
+      value = _this$get.value,
+      width = _this$get.width,
+      mode = _this$get.mode,
+      className = _this$get.className,
+      cancelText = _this$get.cancelText,
+      okText = _this$get.okText,
+      loading = _this$get.loading,
+      disabledOk = _this$get.disabledOk,
+      title = _this$get.title,
+      children = _this$get.children;
+
+  var isHide = mode === 'hide';
+  var classNameObj = (_classNameObj = {
+    'k-dialog': true,
+    'k-dragging': this.drag.dragging.value
+  }, _classNameObj[className] = className, _classNameObj[$props.className] = $props.className, _classNameObj["k-" + size] = size !== 'default', _classNameObj[makeDialogStyles()] = true, _classNameObj);
+
+  var dialog = _$cc(Transition, {
+    'show': value,
+    'appear': value,
+    'key': 'dialog',
+    'onAfterLeave': this.onAfterLeave,
+    'children': (isHide ? true : value) ? _$ce(2, 'div', (_$blocks['content'] = function ($super) {
+      return [_$ce(2, 'div', [(_$blocks['header'] = function ($super) {
+        return _$ce(2, 'span', title, 0, 'k-dialog-title');
+      }, __$blocks['header'] = function ($super, data) {
+        var block = $blocks['header'];
+
+        var callBlock = function callBlock() {
+          return _$blocks['header'].call($this, $super, data);
+        };
+
+        return block ? block.call($this, callBlock, data) : callBlock();
+      }, __$blocks['header'](_$no)), !hideClose && !$props.hideClose ? _$cc(Button, {
+        'type': 'none',
+        'icon': true,
+        'title': _$("关闭"),
+        'className': 'k-dialog-close',
+        'ev-click': this.terminate,
+        'ev-mousedown': stopPropagation,
+        'children': _$cc(Icon, _$tmp0)
+      }) : undefined], 0, 'k-dialog-header', {
+        'ev-mousedown': this.drag.start
+      }), _$ce(2, 'div', (_$blocks['body'] = function ($super) {
+        return children;
+      }, __$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['body'](_$no)), 0, 'k-dialog-body'), (_$blocks['footer-wrapper'] = function ($super) {
+        return _$ce(2, 'div', (_$blocks['footer'] = function ($super) {
+          return [_$cc(Button, {
+            'className': 'k-dialog-ok',
+            'type': 'primary',
+            'ev-click': this.ok,
+            'loading': loading,
+            'disabled': disabledOk,
+            'children': okText
+          }), _$cc(Button, {
+            'className': 'k-dialog-cancel',
+            'type': 'secondary',
+            'ev-click': this.cancel,
+            'children': cancelText
+          })];
+        }, __$blocks['footer'] = function ($super, data) {
+          var block = $blocks['footer'];
+
+          var callBlock = function callBlock() {
+            return _$blocks['footer'].call($this, $super, data);
+          };
+
+          return block ? block.call($this, callBlock, data) : callBlock();
+        }, __$blocks['footer'](_$no)), 0, 'k-dialog-footer');
+      }, __$blocks['footer-wrapper'] = function ($super, data) {
+        var block = $blocks['footer-wrapper'];
+
+        var callBlock = function callBlock() {
+          return _$blocks['footer-wrapper'].call($this, $super, data);
+        };
+
+        return block ? block.call($this, callBlock, data) : callBlock();
+      }, __$blocks['footer-wrapper'](_$no))];
+    }, __$blocks['content'] = function ($super, data) {
+      var block = $blocks['content'];
+
+      var callBlock = function callBlock() {
+        return _$blocks['content'].call($this, $super, data);
+      };
+
+      return block ? block.call($this, callBlock, data) : callBlock();
+    }, __$blocks['content'](_$no)), 0, _$cn(classNameObj), {
+      'style': {
+        width: typeof width === 'number' ? width + "px" : width
+      },
+      'ev-mousedown': this.mouseOutsidable.onMouseDown
+    }, null, this.dialogRef) : undefined
+  }, 'dialog');
+
+  return _$cc(Portal, {
+    'container': container,
+    'children': _$ce(2, 'div', [overlay ? _$cc(Transition, {
+      'key': 'overlay',
+      'show': overlay ? value : false,
+      'appear': value,
+      'name': 'k-fade',
+      'children': _$ce(2, 'div', null, 1, 'k-dialog-overlay', {
+        'ev-click': this.onClickWrapper
+      }, null, this.overlayRef)
+    }, 'overlay') : undefined, dialog], 0, _$cn((_$cn2 = {
+      'k-dialog-wrapper': true,
+      'k-open': value
+    }, _$cn2[makeWrapperStyles()] = true, _$cn2)))
+  });
+}
+;
+
+export {normalize} from 'intact-react';

package/components/dialog/constants.d.ts

@@ -0,0 +1,6 @@
+export declare const SHOW = "open";
+export declare const HIDE = "close";
+export declare const DIALOG = "Dialog";
+
+
+export {normalize} from 'intact-react';

package/components/dialog/constants.js

@@ -0,0 +1,5 @@
+export var SHOW = 'open';
+export var HIDE = 'close';
+export var DIALOG = 'Dialog';
+
+export {normalize} from 'intact-react';

package/components/dialog/index.d.ts

@@ -0,0 +1,24 @@
+import { BaseDialog as _BaseDialog, BaseDialogProps, BaseDialogEvents, BaseDialogBlocks } from './base';
+import { VNodeComponentClass, Props, ComponentClass } from 'intact-react';
+import { StaticMethod } from './staticMethods';
+export interface DialogProps extends BaseDialogProps {
+}
+export interface DialogEvents extends BaseDialogEvents {
+}
+export interface DialogBlocks extends BaseDialogBlocks {
+}
+export declare class BaseDialog<P extends DialogProps = DialogProps, E extends DialogEvents = DialogEvents, B extends DialogBlocks = DialogBlocks> extends _BaseDialog<P, E> {
+    useAsComponent: boolean;
+    constructor(props?: Props<P, BaseDialog> | null | undefined, $vNode?: VNodeComponentClass, $SVG?: boolean, $mountedQueue?: Function[], $senior?: ComponentClass | null);
+    init(): void;
+    show(): Promise<void>;
+}
+export declare class Dialog extends BaseDialog<DialogProps, DialogEvents, DialogBlocks> {
+    static success: StaticMethod;
+    static warning: StaticMethod;
+    static error: StaticMethod;
+    static confirm: StaticMethod;
+}
+
+
+export {normalize} from 'intact-react';

package/components/dialog/index.js

@@ -0,0 +1,104 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _Promise from "@babel/runtime-corejs3/core-js/promise";
+import { BaseDialog as _BaseDialog } from './base';
+import { createVNode, callAll } from 'intact-react';
+import { addStaticMethods } from './staticMethods';
+import { usePosition } from './usePosition';
+export var BaseDialog = /*#__PURE__*/function (_BaseDialog2) {
+  _inheritsLoose(BaseDialog, _BaseDialog2);
+
+  function BaseDialog(props, $vNode, $SVG, $mountedQueue, $senior) {
+    var _this;
+
+    if (props === void 0) {
+      props = null;
+    }
+
+    if ($vNode === void 0) {
+      $vNode = null;
+    }
+
+    if ($SVG === void 0) {
+      $SVG = false;
+    }
+
+    if ($mountedQueue === void 0) {
+      $mountedQueue = [];
+    }
+
+    if ($senior === void 0) {
+      $senior = null;
+    }
+
+    _this = _BaseDialog2.call(this, props, $vNode, $SVG, $mountedQueue, $senior) || this;
+    _this.useAsComponent = false;
+    return _this;
+  }
+
+  var _proto = BaseDialog.prototype;
+
+  _proto.init = function init() {
+    _BaseDialog2.prototype.init.call(this);
+
+    usePosition(this.dialogRef);
+
+    if (this.$vNode) {
+      this.useAsComponent = true;
+    }
+  };
+
+  _proto.show = function show() {
+    var _this2 = this;
+
+    return new _Promise(function (resolve) {
+      if (_this2.get('value')) return resolve();
+
+      var show = function show() {
+        _this2.set('value', true);
+
+        resolve();
+      };
+
+      if (_this2.useAsComponent) {
+        return show();
+      } // use as intance
+
+
+      var mountedQueue = _this2.$mountedQueue;
+
+      _this2.$init(null);
+
+      var vNode = _this2.$vNode = createVNode(BaseDialog);
+      vNode.children = _this2;
+
+      _this2.$render(null, vNode, document.body, null, mountedQueue);
+
+      callAll(mountedQueue);
+
+      if (_this2.$inited) {
+        show();
+      } else {
+        _this2.on('$inited', show);
+      }
+    });
+  };
+
+  return BaseDialog;
+}(_BaseDialog); // for React/Vue type inference
+
+export var Dialog = /*#__PURE__*/function (_BaseDialog3) {
+  _inheritsLoose(Dialog, _BaseDialog3);
+
+  function Dialog() {
+    return _BaseDialog3.apply(this, arguments) || this;
+  }
+
+  return Dialog;
+}(BaseDialog);
+Dialog.success = void 0;
+Dialog.warning = void 0;
+Dialog.error = void 0;
+Dialog.confirm = void 0;
+addStaticMethods(Dialog);
+
+export {normalize} from 'intact-react';

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

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