@king-design/react 2.0.0-beta.0

package/components/dialog/staticMethods.js

@@ -0,0 +1,66 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _Promise from "@babel/runtime-corejs3/core-js/promise";
+import template from './alert.vdt';
+export function addStaticMethods(Component) {
+  var AlertDialog = /*#__PURE__*/function (_Component) {
+    _inheritsLoose(AlertDialog, _Component);
+
+    function AlertDialog() {
+      return _Component.apply(this, arguments) || this;
+    }
+
+    return AlertDialog;
+  }(Component);
+
+  AlertDialog.template = template;
+
+  AlertDialog.defaults = function () {
+    return _extends({}, Component.defaults(), {
+      title: undefined,
+      type: 'success',
+      size: 'mini',
+      hideClose: true
+    });
+  };
+
+  function show(options) {
+    if (options === void 0) {
+      options = {};
+    }
+
+    return new _Promise(function (resolve, reject) {
+      var dialog = new AlertDialog(options, null, false, [], null);
+      dialog.show();
+      dialog.on('ok', function () {
+        resolve();
+      });
+      dialog.on('cancel', function () {
+        reject();
+      }); // if press esc, treat it as cancel too
+
+      dialog.on('terminate', function () {
+        reject();
+      });
+    });
+  }
+
+  ['success', 'warning', 'error', 'confirm'].forEach(function (type) {
+    Component[type] = function (options) {
+      if (options === void 0) {
+        options = {};
+      }
+
+      var closable = type === 'confirm';
+      options = _extends({
+        closable: closable,
+        escClosable: closable
+      }, options, {
+        type: type
+      });
+      return show(options);
+    };
+  });
+}
+
+export {normalize} from 'intact-react';

package/components/dialog/styles.d.ts

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

package/components/dialog/styles.js

@@ -0,0 +1,100 @@
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
+import { css } from '@emotion/css';
+import { theme, setDefault } from '../../styles/theme';
+import { deepDefaults } from '../../styles/utils';
+import '../../styles/global';
+var defaults = {
+  width: '800px',
+  bgColor: '#fff',
+
+  get borderRadius() {
+    return theme.borderRadius;
+  },
+
+  padding: '0',
+  margin: '0 20px',
+
+  get color() {
+    return theme.color.text;
+  },
+
+  get fontSize() {
+    return theme.fontSize;
+  },
+
+  get boxShadow() {
+    return theme.boxShadow;
+  },
+
+  // header
+  header: {
+    fontSize: '16px',
+
+    get color() {
+      return theme.color.title;
+    },
+
+    height: '61px',
+    border: "1px solid #eaeaea",
+    closeTop: '16px',
+    closeRight: '-9px',
+    closeIconFontSize: '44px'
+  },
+  // body
+  body: {
+    padding: "20px"
+  },
+  // footer
+  footer: {
+    padding: "20px 0",
+    btnGap: "12px",
+    border: "1px solid #eaeaea"
+  },
+  // transition
+  transform: 'translateY(-10px) scale(1.05)',
+  // size
+  largeWidth: '1000px',
+  smallWidth: '600px',
+  miniWidth: '400px',
+  // alert dialog
+  alert: {
+    padding: "0 20px",
+    bodyMarginTop: "-25px",
+    tipIconMarginBottom: '10px',
+    tipIconFontSize: '37px',
+    tipIconLineHeight: '37px',
+    // with title
+    titleTipIconFontSize: '37px',
+    titleFontSize: '14px',
+    wrapperPaddingLeft: '8px',
+    titleBodyMarginTop: '-36px'
+  }
+};
+var dialog;
+setDefault(function () {
+  dialog = deepDefaults(theme, {
+    dialog: defaults
+  }).dialog;
+});
+export function makeDialogStyles() {
+  var _context;
+
+  return /*#__PURE__*/css("position:absolute;width:", dialog.width, ";border-radius:", dialog.borderRadius, ";background:", dialog.bgColor, ";font-size:", dialog.fontSize, ";color:", dialog.color, ";box-shadow:", dialog.boxShadow, ";max-width:100%;z-index:", theme.maxZIndex, ";&.k-dragging{cursor:move;user-select:none;}&.transition-enter-active,&.transition-leave-active,&.transition-appear-active{transition:all ", theme.transition, ";}&.transition-enter-from,&.transition-leave-to,&.transition-appear-from{transform:", dialog.transform, ";opacity:0;}", _mapInstanceProperty(_context = ['large', 'small', 'mini']).call(_context, function (size) {
+    return /*#__PURE__*/css("&.k-", size, "{width:", dialog[size + "Width"], ";}");
+  }), ".k-dialog-header{padding:0 ", dialog.padding, ";margin:", dialog.margin, ";border-bottom:", dialog.header.border, ";height:", dialog.header.height, ";line-height:", dialog.header.height, ";font-size:", dialog.header.fontSize, ";color:", dialog.header.color, ";position:relative;}.k-dialog-title{display:inline-block;}.k-dialog-close{position:absolute;right:", dialog.header.closeRight, ";top:", dialog.header.closeTop, ";.k-icon{font-size:", dialog.header.closeIconFontSize, ";}}.k-dialog-body{padding:", dialog.body.padding, ";}.k-dialog-footer{text-align:right;padding:", dialog.footer.padding, ";margin:", dialog.margin, ";border-top:", dialog.footer.border, ";.k-btn{margin-left:", dialog.footer.btnGap, ";}}");
+}
+export function makeWrapperStyles() {
+  // k-fade-leave-active will add position absolute to the styles
+  // so we must set fixed with important to .k-dialog-overlay
+  return /*#__PURE__*/css("position:absolute;z-index:", theme.maxZIndex, ";top:0;left:0;width:100%;.k-dialog-overlay{position:fixed!important;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, .5);}");
+}
+export function makeAlertStyles() {
+  var _context2;
+
+  return /*#__PURE__*/css("&.k-alert-dialog{.k-dialog-body{margin-top:", dialog.alert.bodyMarginTop, ";padding:", dialog.alert.padding, ";text-align:center;position:relative;z-index:1;}.k-dialog-header,.k-dialog-footer{border:none;}.k-dialog-tip-icon{margin-bottom:", dialog.alert.tipIconMarginBottom, ";.k-icon{font-size:", dialog.alert.tipIconFontSize, ";line-height:", dialog.alert.tipIconLineHeight, ";}}", _mapInstanceProperty(_context2 = ['success', 'warning', 'error', 'confirm']).call(_context2, function (type) {
+    var color = type === 'error' ? theme.color.danger : type === 'confirm' ? theme.color.primary : theme.color[type];
+    return /*#__PURE__*/css("&.k-", type, "{.k-dialog-tip-icon{color:", color, ";}}");
+  }), " &:not(.k-confirm){.k-dialog-cancel{display:none;}}&.k-with-title{.k-dialog-body{margin-top:", dialog.alert.titleBodyMarginTop, ";text-align:left;}.k-dialog-tip-icon{float:left;.k-icon{font-size:", dialog.alert.titleTipIconFontSize, ";}}.k-alert-dialog-wrapper{overflow:hidden;padding-left:", dialog.alert.wrapperPaddingLeft, ";}.k-alert-dialog-title{line-height:", dialog.alert.tipIconLineHeight, ";font-size:", dialog.alert.titleFontSize, ";}}}");
+}
+
+export {normalize} from 'intact-react';

package/components/dialog/useDraggable.d.ts

@@ -0,0 +1,8 @@
+import { RefObject } from 'intact-react';
+export declare function useDraggable(dialogRef: RefObject<HTMLDivElement>, areaRef: RefObject<HTMLDivElement>): {
+    start: (e: MouseEvent) => void;
+    dragging: import("../../hooks/useState").State<boolean>;
+};
+
+
+export {normalize} from 'intact-react';

package/components/dialog/useDraggable.js

@@ -0,0 +1,56 @@
+import { useInstance } from 'intact-react';
+import { useDraggable as useBaseDraggable } from '../../hooks/useDraggable';
+import { scrollbarWidth } from '../position';
+export function useDraggable(dialogRef, areaRef) {
+  var component = useInstance();
+  var x = 0;
+  var y = 0;
+  var width = 0;
+  var height = 0;
+  var areaWidth = 0;
+  var areaHeight = 0;
+
+  function onStart(e) {
+    var dialog = dialogRef.value;
+    x = dialog.offsetLeft - e.clientX;
+    y = dialog.offsetTop - e.clientY;
+    width = dialog.offsetWidth;
+    height = dialog.offsetHeight;
+    var body = document.body;
+    var html = document.documentElement;
+
+    if (!component.get('overlay')) {
+      areaWidth = Math.max(body.scrollWidth, html.scrollWidth);
+      areaHeight = Math.max(body.scrollHeight, html.scrollHeight);
+    } else {
+      areaWidth = Math.max(html.offsetWidth, window.innerWidth);
+      areaHeight = Math.max(html.offsetHeight, window.innerHeight);
+    }
+  }
+
+  function onMove(e) {
+    var style = dialogRef.value.style;
+    var _areaWidth = areaWidth;
+    var area = areaRef.value;
+
+    if (area) {
+      // detect the wrapper has scrollbar or not
+      if (area.scrollHeight > area.offsetHeight) {
+        var scrollBarWidth = scrollbarWidth();
+        _areaWidth -= scrollBarWidth;
+      }
+    }
+
+    var left = Math.min(Math.max(x + e.clientX, 0), Math.max(_areaWidth - width, 0));
+    var top = Math.min(Math.max(y + e.clientY, 0), Math.max(areaHeight - height, 0));
+    style.left = left + "px";
+    style.top = top + "px";
+  }
+
+  return useBaseDraggable({
+    onStart: onStart,
+    onMove: onMove
+  });
+}
+
+export {normalize} from 'intact-react';

package/components/dialog/useEscClosable.d.ts

@@ -0,0 +1,4 @@
+export declare function useEscClosable(): void;
+
+
+export {normalize} from 'intact-react';

package/components/dialog/useEscClosable.js

@@ -0,0 +1,46 @@
+import { useInstance, onUnmounted } from 'intact-react';
+import { SHOW, HIDE } from './constants'; // only close the top dialog when press ESC
+
+var dialogs = [];
+
+var escClose = function escClose(e) {
+  var dialog = dialogs[dialogs.length - 1];
+
+  if (e.keyCode === 27 && dialog.get('escClosable')) {
+    dialog.terminate();
+  }
+};
+
+export function useEscClosable() {
+  var instance = useInstance();
+  instance.on(SHOW, function () {
+    if (!dialogs.length) {
+      document.addEventListener('keydown', escClose);
+    }
+
+    dialogs.push(instance);
+  });
+
+  function onHide() {
+    var dialog = dialogs.pop(); // const dialog = dialogs.shift();
+
+    if (process.env.NODE_ENV !== 'production') {
+      if (dialog !== instance) {
+        throw new Error('The dialog has handled hide callback. It is a bug of KPC');
+      }
+    }
+
+    if (!dialogs.length) {
+      document.removeEventListener('keydown', escClose);
+    }
+  }
+
+  instance.on(HIDE, onHide);
+  onUnmounted(function () {
+    if (instance.get('value')) {
+      onHide();
+    }
+  });
+}
+
+export {normalize} from 'intact-react';

package/components/dialog/useFixBody.d.ts

@@ -0,0 +1,5 @@
+import { RefObject } from 'intact-react';
+export declare function useFixBody(elementRef: RefObject<HTMLDivElement>): void;
+
+
+export {normalize} from 'intact-react';

package/components/dialog/useFixBody.js

@@ -0,0 +1,71 @@
+import _Set from "@babel/runtime-corejs3/core-js/set";
+import { useInstance, onBeforeUnmount } from 'intact-react';
+import { scrollbarWidth } from '../position';
+import { SHOW } from './constants';
+var dialogs = new _Set();
+var originalStyle = null;
+export function useFixBody(elementRef) {
+  var instance = useInstance();
+  var fixedBody = false;
+  instance.on(SHOW, onEnter);
+  instance.on('afterClose', onAfterLeave);
+  onBeforeUnmount(function () {
+    if (fixedBody && instance.get('value')) {
+      // maybe HIDE event has not triggered
+      onClosed(instance);
+    }
+  });
+
+  function onEnter() {
+    if (instance.get('overlay')) {
+      fixedBody = true;
+      onOpen(instance);
+    }
+  }
+
+  function onAfterLeave() {
+    if (fixedBody) {
+      fixedBody = false;
+      onClosed(instance);
+    }
+  }
+}
+
+function onOpen(dialog) {
+  var body = document.body;
+
+  if (dialogs.size === 0) {
+    var bodyStyle = body.style;
+    originalStyle = body.getAttribute('style');
+    bodyStyle.overflow = 'hidden';
+    var scrollBarWidth = shouldFixBody();
+
+    if (scrollBarWidth) {
+      bodyStyle.paddingRight = scrollBarWidth + "px";
+    }
+  }
+
+  dialogs.add(dialog);
+}
+
+function onClosed(dialog) {
+  var body = document.body;
+  dialogs.delete(dialog);
+
+  if (dialogs.size === 0) {
+    if (originalStyle) {
+      // console.log(originalStyle);
+      body.setAttribute('style', originalStyle);
+    } else {
+      body.removeAttribute('style');
+    }
+  }
+}
+
+function shouldFixBody() {
+  if (document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight)) {
+    return scrollbarWidth();
+  }
+}
+
+export {normalize} from 'intact-react';

package/components/dialog/usePosition.d.ts

@@ -0,0 +1,5 @@
+import { RefObject } from 'intact-react';
+export declare function usePosition(elementRef: RefObject<HTMLDivElement>): void;
+
+
+export {normalize} from 'intact-react';

package/components/dialog/usePosition.js

@@ -0,0 +1,42 @@
+import { useInstance, remove } from 'intact-react';
+import { position } from '../position';
+import { SHOW } from './constants';
+export function usePosition(elementRef) {
+  var instance = useInstance();
+  instance.on(SHOW, center);
+  instance.on('afterClose', onAfterLeave);
+
+  function center() {
+    position(elementRef.value, {
+      // ensure title visible always
+      using: function using(feedback, position) {
+        var height = feedback.element.height;
+        var scrollTop = window.pageYOffset;
+        var outerHeight = window.document.documentElement.clientHeight;
+
+        if (height > outerHeight) {
+          position.top = scrollTop;
+        }
+      },
+      // let dialog padding top half of padding bottom
+      my: 'center center+16%',
+      at: 'center center-16%'
+    });
+  }
+
+  function onAfterLeave() {
+    var element = elementRef.value;
+
+    if (element) {
+      // in `destroy` mode, the elementRef.value doesn't exist
+      var style = element.style;
+      style.left = style.top = '';
+    }
+
+    if (!instance.useAsComponent) {
+      remove(instance.$vNode, document.body, false);
+    }
+  }
+}
+
+export {normalize} from 'intact-react';

package/components/drawer/index.d.ts

@@ -0,0 +1,14 @@
+import { TypeDefs } from 'intact-react';
+import { BaseDialog, BaseDialogProps } from '../dialog/base';
+import { Placement } from './styles';
+export interface DrawerProps extends BaseDialogProps {
+    placement?: Placement;
+}
+export declare class Drawer extends BaseDialog<DrawerProps> {
+    static template: string | import("intact").Template<any>;
+    static typeDefs: Required<TypeDefs<DrawerProps>>;
+    static defaults: () => Partial<DrawerProps>;
+}
+
+
+export {normalize} from 'intact-react';

package/components/drawer/index.js

@@ -0,0 +1,30 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import template from './index.vdt';
+import { BaseDialog } from '../dialog/base';
+import { placements } from './styles';
+
+var typeDefs = _extends({}, BaseDialog.typeDefs, {
+  placement: placements
+});
+
+var defaults = function defaults() {
+  return _extends({}, BaseDialog.defaults(), {
+    placement: 'right'
+  });
+};
+
+export var Drawer = /*#__PURE__*/function (_BaseDialog) {
+  _inheritsLoose(Drawer, _BaseDialog);
+
+  function Drawer() {
+    return _BaseDialog.apply(this, arguments) || this;
+  }
+
+  return Drawer;
+}(BaseDialog);
+Drawer.template = template;
+Drawer.typeDefs = typeDefs;
+Drawer.defaults = defaults;
+
+export {normalize} from 'intact-react';

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

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

package/components/drawer/index.spec.js

@@ -0,0 +1,164 @@
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import BasicDemo from '~/components/drawer/demos/basic';
+import PlacementDemo from '~/components/drawer/demos/placement';
+import overlayDemo from '~/components/drawer/demos/overlay';
+import { mount, unmount, dispatchEvent, getElement, wait } from '../../test/utils';
+describe('Drawer', function () {
+  afterEach(function (done) {
+    unmount();
+    setTimeout(done, 400);
+  });
+  it('should show drawer correctly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var _mount, instance, element, trigger, drawer;
+
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            this.timeout(0);
+            _mount = mount(BasicDemo), instance = _mount[0], element = _mount[1];
+            trigger = element.querySelector('.k-btn');
+            trigger.click();
+            _context.next = 6;
+            return wait();
+
+          case 6:
+            expect(element.outerHTML).to.matchSnapshot();
+            drawer = getElement('.k-dialog-wrapper');
+            expect(drawer.innerHTML).to.matchSnapshot();
+            _context.next = 11;
+            return wait(400);
+
+          case 11:
+            //hide
+            getElement('.k-dialog-overlay').click();
+            _context.next = 14;
+            return wait(400);
+
+          case 14:
+            expect(getElement('.k-drawer')).to.be.undefined;
+
+          case 15:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee, this);
+  })));
+  it('should show drawer from different placement correctly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+    var _mount2, instance, element, _element$querySelecto, top, bottom, left, right, test;
+
+    return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+      while (1) {
+        switch (_context3.prev = _context3.next) {
+          case 0:
+            this.timeout(0);
+            _mount2 = mount(PlacementDemo), instance = _mount2[0], element = _mount2[1];
+            _element$querySelecto = element.querySelectorAll('.k-btn'), top = _element$querySelecto[0], bottom = _element$querySelecto[1], left = _element$querySelecto[2], right = _element$querySelecto[3];
+
+            test = /*#__PURE__*/function () {
+              var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(btn, className) {
+                var classNames;
+                return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+                  while (1) {
+                    switch (_context2.prev = _context2.next) {
+                      case 0:
+                        dispatchEvent(btn, 'click');
+                        _context2.next = 3;
+                        return wait();
+
+                      case 3:
+                        classNames = getElement('.k-drawer').className;
+                        expect(classNames).to.include(className);
+                        _context2.next = 7;
+                        return wait(200);
+
+                      case 7:
+                        getElement('.k-dialog-overlay').click();
+                        _context2.next = 10;
+                        return wait(500);
+
+                      case 10:
+                        expect(getElement('.k-drawer')).to.be.undefined;
+
+                      case 11:
+                      case "end":
+                        return _context2.stop();
+                    }
+                  }
+                }, _callee2);
+              }));
+
+              return function test(_x, _x2) {
+                return _ref3.apply(this, arguments);
+              };
+            }();
+
+            _context3.next = 6;
+            return test(top, 'k-top');
+
+          case 6:
+            _context3.next = 8;
+            return test(bottom, 'k-bottom');
+
+          case 8:
+            _context3.next = 10;
+            return test(left, 'k-left');
+
+          case 10:
+            _context3.next = 12;
+            return test(right, 'k-right');
+
+          case 12:
+          case "end":
+            return _context3.stop();
+        }
+      }
+    }, _callee3, this);
+  })));
+  it('should show no overlay', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+    var _mount3, instance, element, trigger, overlay, dialog, btn;
+
+    return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+      while (1) {
+        switch (_context4.prev = _context4.next) {
+          case 0:
+            _mount3 = mount(overlayDemo), instance = _mount3[0], element = _mount3[1];
+            trigger = element.querySelector('.k-btn');
+            trigger.click();
+            _context4.next = 5;
+            return wait();
+
+          case 5:
+            overlay = getElement('.k-dialog-overlay');
+            expect(overlay).to.be.undefined;
+            _context4.next = 9;
+            return wait(200);
+
+          case 9:
+            dispatchEvent(document, 'click');
+            _context4.next = 12;
+            return wait(400);
+
+          case 12:
+            dialog = getElement('.k-dialog-wrapper');
+            expect(dialog.innerHTML).to.matchSnapshot();
+            btn = dialog.querySelector('.k-dialog-ok');
+            btn.click();
+            _context4.next = 18;
+            return wait(400);
+
+          case 18:
+            expect(getElement('.k-drawer')).to.be.undefined;
+
+          case 19:
+          case "end":
+            return _context4.stop();
+        }
+      }
+    }, _callee4);
+  })));
+});
+
+export {normalize} from 'intact-react';

package/components/drawer/index.vdt.js

@@ -0,0 +1,38 @@
+import { superCall as _$su, className as _$cn, extend as _$ex, EMPTY_OBJ as _$em, createElementVNode as _$ce } from 'intact-react';
+import { makeStyles } from './styles';
+export default function ($props, $blocks, $__proto__) {
+  var _classNameObj;
+
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+
+  var _this$get = this.get(),
+      placement = _this$get.placement,
+      overlay = _this$get.overlay;
+
+  var classNameObj = (_classNameObj = {
+    'k-drawer': true
+  }, _classNameObj["k-" + placement] = true, _classNameObj[makeStyles(overlay)] = true, _classNameObj);
+  return _$su.call($this, {
+    'className': _$cn(classNameObj)
+  }, function ($blocks) {
+    var _$blocks = {},
+        __$blocks = _$ex({}, $blocks);
+
+    return (_$blocks['content'] = function ($super) {
+      return _$ce(2, 'div', $super(), 0, 'k-drawer-content');
+    }, __$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;
+  }.call($this, $blocks), $__proto__);
+}
+;
+
+export {normalize} from 'intact-react';