@king-design/react 2.0.0-beta.0

package/components/pagination/index.spec.js

@@ -0,0 +1,146 @@
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import BasicDemo from '~/components/pagination/demos/basic';
+import GotoDemo from '~/components/pagination/demos/goto';
+import CurrentDemo from '~/components/pagination/demos/current';
+import { mount, unmount, dispatchEvent, wait } from '../../test/utils';
+describe('Pagination', function () {
+  afterEach(function () {
+    return unmount();
+  });
+  it('basic test', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var _mount, instance, element, pagination, btns, prev, next;
+
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _mount = mount(BasicDemo), instance = _mount[0], element = _mount[1];
+            pagination = element.querySelector('.k-pagination');
+            btns = pagination.querySelectorAll('.k-btns .k-btn');
+            prev = btns[0];
+            next = btns[btns.length - 1];
+            prev.click();
+            _context.next = 8;
+            return wait();
+
+          case 8:
+            expect(pagination.innerHTML).to.matchSnapshot();
+            expect(instance.get('value1')).to.eql(1);
+            next.click();
+            next.click();
+            _context.next = 14;
+            return wait();
+
+          case 14:
+            expect(pagination.innerHTML).to.matchSnapshot();
+            expect(instance.get('value1')).to.eql(3);
+            prev.click();
+            _context.next = 19;
+            return wait();
+
+          case 19:
+            expect(pagination.innerHTML).to.matchSnapshot();
+            expect(instance.get('value1')).to.eql(2);
+            pagination.querySelector('.k-pagination-ellipsis').click();
+            _context.next = 24;
+            return wait();
+
+          case 24:
+            expect(pagination.innerHTML).to.matchSnapshot();
+            expect(instance.get('value1')).to.eql(6);
+            pagination.querySelector('.k-pagination-ellipsis').click();
+            _context.next = 29;
+            return wait();
+
+          case 29:
+            expect(pagination.innerHTML).to.matchSnapshot();
+            expect(instance.get('value1')).to.eql(2); // change limit
+
+            instance.refs.__test.set('limit', 20);
+
+            _context.next = 34;
+            return wait();
+
+          case 34:
+            expect(pagination.innerHTML).to.matchSnapshot();
+            expect(instance.get('value1')).to.eql(1);
+
+          case 36:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+  it('goto test', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    var _mount2, instance, element, input;
+
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            _mount2 = mount(GotoDemo), instance = _mount2[0], element = _mount2[1];
+            input = element.querySelector('.k-input-inner');
+            input.value = '45';
+            dispatchEvent(input, 'change');
+            _context2.next = 6;
+            return wait();
+
+          case 6:
+            expect(element.innerHTML).to.matchSnapshot();
+            expect(instance.get('value')).to.eql(20);
+            input.value = '-10';
+            dispatchEvent(input, 'change');
+            _context2.next = 12;
+            return wait();
+
+          case 12:
+            expect(element.innerHTML).to.matchSnapshot();
+            expect(instance.get('value')).to.eql(1);
+
+          case 14:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
+  it('should trigger change event once', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+    var fn, _mount3, instance, element;
+
+    return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+      while (1) {
+        switch (_context3.prev = _context3.next) {
+          case 0:
+            fn = CurrentDemo.prototype._fetch2 = sinon.spy(function () {
+              instance.forceUpdate();
+            });
+            _mount3 = mount(CurrentDemo), instance = _mount3[0], element = _mount3[1];
+            instance.set('value2', 2);
+            _context3.next = 5;
+            return wait();
+
+          case 5:
+            expect(fn.callCount).to.eql(1);
+            instance.set('limit', 50);
+            _context3.next = 9;
+            return wait();
+
+          case 9:
+            expect(fn.callCount).to.eql(2);
+            expect(fn.lastCall.lastArg).to.eql({
+              value: 1,
+              limit: 50
+            });
+
+          case 11:
+          case "end":
+            return _context3.stop();
+        }
+      }
+    }, _callee3);
+  })));
+});
+
+export {normalize} from 'intact-react';

package/components/pagination/index.vdt.js

@@ -0,0 +1,173 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { createCommentVNode as _$ccv, createUnknownComponentVNode as _$cc, createElementVNode as _$ce, createTextVNode as _$ct, createVNode as _$cv, className as _$cn, map as _$ma } from 'intact-react';
+import { getRestProps, mapChildren } from '../utils';
+import { ButtonGroup, Button } from '../button';
+import { Select, Option } from '../select';
+import { Input } from '../input';
+import { Icon } from '../icon';
+import { _$ } from '../../i18n';
+import { makeStyles } from './styles';
+var _$tmp0 = {
+  'className': 'ion-ios-arrow-left'
+};
+var _$tmp1 = {
+  'className': 'ion-ios-arrow-right'
+};
+export default function ($props, $blocks, $__proto__) {
+  var _classNameObj;
+
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+
+  var _this$get = this.get(),
+      total = _this$get.total,
+      size = _this$get.size,
+      noBorder = _this$get.noBorder,
+      simple = _this$get.simple,
+      className = _this$get.className,
+      showTotal = _this$get.showTotal,
+      showGoto = _this$get.showGoto,
+      counts = _this$get.counts,
+      value = _this$get.value,
+      limit = _this$get.limit,
+      limits = _this$get.limits,
+      showLimits = _this$get.showLimits;
+
+  if (!total) return _$ccv(' pagination ');
+  var classNameObj = (_classNameObj = {
+    'k-pagination': true
+  }, _classNameObj[className] = className, _classNameObj["k-" + size] = size !== 'default', _classNameObj['k-no-border'] = noBorder, _classNameObj['k-simple'] = simple, _classNameObj[makeStyles()] = true, _classNameObj);
+  var type = 'default';
+
+  if (noBorder || simple) {
+    type = 'none';
+  }
+
+  var totalPages = Math.ceil(total / limit) || 0;
+
+  var paginationButton = function paginationButton(page) {
+    return _$cc(Button, {
+      'type': type,
+      'size': size,
+      'icon': true,
+      'value': page,
+      'children': page
+    });
+  };
+
+  var paginationDot = function paginationDot(callback) {
+    return _$cc(Button, {
+      'type': type,
+      'size': size,
+      'icon': true,
+      'className': 'k-pagination-ellipsis',
+      'ev-click': callback,
+      'children': '...'
+    });
+  };
+
+  var paginationItems = [];
+  var minCount = Math.ceil(counts / 2);
+  var maxCount = totalPages - minCount;
+  var prevPage = value - 1;
+  var nextPage = value + 1;
+
+  if (!simple) {
+    if (totalPages > counts) {
+      if (value <= minCount) {
+        var max = counts - 2;
+
+        for (var i = 1; i <= max; i++) {
+          paginationItems.push(paginationButton(i));
+        }
+
+        paginationItems.push(paginationDot(this.fastNext));
+        paginationItems.push(paginationButton(totalPages));
+      } else if (value > minCount && value <= maxCount) {
+        paginationItems.push(paginationButton(1));
+        paginationItems.push(paginationDot(this.fastPrev));
+        var midCount = counts - 4;
+        var mid = Math.floor(midCount / 2);
+        var min = value - mid;
+
+        var _max = midCount % 2 === 1 ? value + mid : value + mid - 1;
+
+        for (var _i = min; _i <= _max; _i++) {
+          paginationItems.push(paginationButton(_i));
+        }
+
+        paginationItems.push(paginationDot(this.fastNext));
+        paginationItems.push(paginationButton(totalPages));
+      } else {
+        paginationItems.push(paginationButton(1));
+        paginationItems.push(paginationDot(this.fastPrev));
+
+        var _min = totalPages - counts + 3;
+
+        for (var _i2 = _min; _i2 <= totalPages; _i2++) {
+          paginationItems.push(paginationButton(_i2));
+        }
+      }
+    } else {
+      for (var _i3 = 1; _i3 <= totalPages; _i3++) {
+        paginationItems.push(paginationButton(_i3));
+      }
+    }
+  } else {
+    paginationItems = [_$cc(Input, {
+      'size': size === 'mini' || size === 'small' ? 'mini' : 'small',
+      'autoWidth': true,
+      'value': value,
+      'ev-change': this.goto
+    }), _$ce(2, 'span', [_$ct(' / '), totalPages], 0, 'k-pagination-text')];
+  }
+
+  return _$cv('div', _extends({
+    'className': _$cn(classNameObj)
+  }, getRestProps(this)), [_$cc(ButtonGroup, {
+    'checkType': 'radio',
+    'children': [_$cc(Button, {
+      'icon': true,
+      'size': size,
+      'type': type,
+      'disabled': value <= 1,
+      'ev-click': this.prev,
+      'children': _$cc(Icon, _$tmp0)
+    }), paginationItems, _$cc(Button, {
+      'icon': true,
+      'size': size,
+      'type': type,
+      'disabled': value >= totalPages,
+      'ev-click': this.next,
+      'children': _$cc(Icon, _$tmp1)
+    })],
+    'ev-$model:value': function ev$modelValue($v) {
+      $this.set('value', $v);
+    },
+    'value': $this.get('value')
+  }), !simple ? [showLimits ? _$ce(2, 'div', _$cc(Select, {
+    'size': size,
+    'children': _$ma(limits, function ($value, $key) {
+      return _$cc(Option, {
+        'value': $value,
+        'children': _$('{n} 条 / 页', {
+          n: $value
+        })
+      });
+    }, $this),
+    'ev-$model:value': function ev$modelValue($v) {
+      $this.set('limit', $v);
+    },
+    'value': $this.get('limit')
+  }), 2, 'k-pagination-limits') : undefined, showGoto ? _$ce(2, 'div', [_$ce(2, 'span', _$('跳至'), 0, 'c-middle'), _$cc(Input, {
+    'size': size,
+    'value': value,
+    'ev-change': this.goto
+  }), _$ce(2, 'span', _$('页'), 0, 'c-middle')], 4, 'k-pagination-goto') : undefined, showTotal ? _$ce(2, 'div', _$('共 {n} 条', {
+    n: total
+  }), 0, 'k-pagination-total') : undefined] : undefined]);
+}
+;
+
+export {normalize} from 'intact-react';

package/components/pagination/styles.d.ts

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

package/components/pagination/styles.js

@@ -0,0 +1,65 @@
+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';
+import { button } from '../button/styles';
+var btnGapMap = {
+  large: '8px',
+  small: '4px',
+  mini: '2px'
+};
+var iconFontSizeMap = {
+  large: '18px',
+  small: '16px',
+  mini: '14px'
+};
+var sizes = ['large', 'small', 'mini'];
+var defaults = deepDefaults({
+  get fontSize() {
+    return theme.default.fontSize;
+  },
+
+  gap: '16px',
+  btn: {
+    gap: '6px',
+    padding: '0 3px'
+  },
+  // goto
+  goto: {
+    width: '60px',
+    gap: '0 10px'
+  }
+}, sizes.reduce(function (memo, size) {
+  var styles = theme[size];
+  memo[size] = {
+    get fontSize() {
+      return styles.fontSize;
+    },
+
+    get btnGap() {
+      return btnGapMap[size];
+    },
+
+    get iconFontSize() {
+      return iconFontSizeMap[size];
+    }
+
+  };
+  return memo;
+}, {}));
+var pagination;
+setDefault(function () {
+  pagination = deepDefaults(theme, {
+    pagination: defaults
+  }).pagination;
+});
+export function makeStyles() {
+  return /*#__PURE__*/css("font-size:", pagination.fontSize, ";.k-pagination-limits,.k-pagination-goto,.k-pagination-total{margin-left:", pagination.gap, ";display:inline-block;vertical-align:middle;}.k-pagination-ellipsis{background-color:transparent;border:none;}.k-btns{.k-btn{width:auto!important;min-width:", button.height, ";padding:", pagination.btn.padding, ";margin-right:", pagination.btn.gap, ";&:last-of-type{margin:0!important;}}.k-icon{font-size:18px;}}.k-pagination-goto{.k-input{font-size:inherit;width:", pagination.goto.width, ";margin:", pagination.goto.gap, ";}}.k-select{width:auto;}", _mapInstanceProperty(sizes).call(sizes, function (size) {
+    var styles = pagination[size];
+    var btnStyles = button[size];
+    return /*#__PURE__*/css("&.k-", size, "{font-size:", styles.fontSize, ";.k-btn{margin-right:", styles.btnGap, ";min-width:", btnStyles.height, ";.k-icon{font-size:", styles.iconFontSize, ";}}}");
+  }), "&.k-no-border{.k-select{&,&:hover,&.k-show{border-color:transparent;}}}&.k-simple{.k-btn{margin:0;}.k-input-inner{text-align:center;}.k-pagination-text{vertical-align:middle;}}");
+}
+
+export {normalize} from 'intact-react';

package/components/portal.d.ts

@@ -0,0 +1,23 @@
+import { Component, VNodeComponentClass, IntactDom, TypeDefs } from 'intact-react';
+export interface PortalProps {
+    container?: Container;
+}
+export declare type Container = string | ((parentDom: Element, anchor: IntactDom | null) => Element);
+export declare class Portal<T extends PortalProps = PortalProps> extends Component<T> {
+    static template(this: Portal): import("intact").VNodeTextElement;
+    static typeDefs: Required<TypeDefs<PortalProps>>;
+    private container;
+    private dialog;
+    private portal;
+    private rootPortal;
+    mountedQueue?: Function[];
+    mountedDone?: boolean;
+    init(): void;
+    $render(lastVNode: VNodeComponentClass<this> | null, nextVNode: VNodeComponentClass<this>, parentDom: Element, anchor: IntactDom | null, mountedQueue: Function[]): void;
+    $update(lastVNode: VNodeComponentClass<this>, nextVNode: VNodeComponentClass<this>, parentDom: Element, anchor: IntactDom | null, mountedQueue: Function[], force: boolean): void;
+    $unmount(vNode: VNodeComponentClass<this>, nextVNode: VNodeComponentClass<this> | null): void;
+    private initContainer;
+}
+
+
+export {normalize} from 'intact-react';

package/components/portal.js

@@ -0,0 +1,148 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import { Component, createCommentVNode, createTextVNode, mount, patch, remove, provide, inject, callAll } from 'intact-react';
+import { isString } from 'intact-shared';
+import { DIALOG } from './dialog/constants';
+var typeDefs = {
+  container: [String, Function]
+};
+var PORTAL = 'Portal';
+export var Portal = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(Portal, _Component);
+
+  function Portal() {
+    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.container = null;
+    _this.dialog = inject(DIALOG, null);
+    _this.portal = inject(PORTAL, null);
+    _this.rootPortal = inject(PORTAL, null);
+    _this.mountedQueue = void 0;
+    _this.mountedDone = void 0;
+    return _this;
+  }
+
+  Portal.template = function template() {
+    if (process.env.NODE_ENV === 'production') {
+      return createTextVNode('');
+    }
+
+    return createCommentVNode('portal');
+  };
+
+  var _proto = Portal.prototype;
+
+  _proto.init = function init() {
+    if (!this.rootPortal) {
+      provide(PORTAL, this);
+    }
+  };
+
+  _proto.$render = function $render(lastVNode, nextVNode, parentDom, anchor, mountedQueue) {
+    var _this2 = this;
+
+    var nextProps = nextVNode.props;
+    var $cid = Component.$cid;
+    var isVue = $cid === 'IntactVueNext' || $cid === 'IntactVue'; // add mount method to queue to let sub-component be appended after parent-component
+
+    if (!isVue) {
+      this.initContainer(nextProps.container, parentDom, anchor);
+      var rootPortal;
+      var shouldTrigger = false;
+
+      if (!this.rootPortal) {
+        rootPortal = this;
+        rootPortal.mountedQueue = [];
+        shouldTrigger = true;
+      } else {
+        rootPortal = this.rootPortal;
+
+        if (rootPortal.mountedDone) {
+          shouldTrigger = true;
+          rootPortal.mountedQueue = [];
+        }
+      }
+
+      var selfMountedQueue = rootPortal.mountedQueue;
+      selfMountedQueue.push(function () {
+        mount(nextProps.children, _this2.container, _this2, _this2.$SVG, null, mountedQueue);
+      });
+
+      if (shouldTrigger) {
+        callAll(selfMountedQueue);
+        rootPortal.mountedDone = true;
+      }
+    } else {
+      mountedQueue.push(function () {
+        parentDom = _this2.$lastInput.dom.parentElement;
+
+        _this2.initContainer(nextProps.container, parentDom, anchor);
+
+        mount(nextProps.children, _this2.container, _this2, _this2.$SVG, null, mountedQueue);
+      });
+    }
+
+    _Component.prototype.$render.call(this, lastVNode, nextVNode, parentDom, anchor, mountedQueue);
+  };
+
+  _proto.$update = function $update(lastVNode, nextVNode, parentDom, anchor, mountedQueue, force) {
+    // update container if it has changed
+    var lastProps = lastVNode.props;
+    var nextProps = nextVNode.props;
+    var lastContainer = this.container;
+
+    if (lastProps.container !== nextProps.container) {
+      this.initContainer(nextProps.container, parentDom, anchor);
+    }
+
+    var nextContainer = this.container;
+
+    if (lastContainer === nextContainer) {
+      patch(lastProps.children, nextProps.children, nextContainer, this, this.$SVG, anchor, mountedQueue, false);
+    } else {
+      remove(lastProps.children, lastContainer, false);
+      mount(nextProps.children, nextContainer, this, this.$SVG, anchor, mountedQueue);
+    }
+
+    _Component.prototype.$update.call(this, lastVNode, nextVNode, parentDom, anchor, mountedQueue, force);
+  };
+
+  _proto.$unmount = function $unmount(vNode, nextVNode) {
+    remove(vNode.props.children, this.container, false); // removeVNodeDom(vNode.props!.children as VNode, this.container!);
+
+    _Component.prototype.$unmount.call(this, vNode, nextVNode);
+  };
+
+  _proto.initContainer = function initContainer(container, parentDom, anchor) {
+    if (container) {
+      if (isString(container)) {
+        this.container = document.querySelector(container);
+      } else {
+        this.container = container(parentDom, anchor);
+      }
+    }
+
+    if (!this.container) {
+      // find the closest dialog if exists
+      var tmp;
+
+      if ((tmp = this.dialog) && (tmp = tmp.dialogRef.value)) {
+        this.container = tmp;
+      } else {
+        this.container = document.body;
+      }
+    }
+  };
+
+  return Portal;
+}(Component);
+Portal.typeDefs = typeDefs;
+
+export {normalize} from 'intact-react';

package/components/position.d.ts

@@ -0,0 +1,77 @@
+export declare type Options = {
+    of?: Window | HTMLElement | Document | MouseEvent;
+    at?: string | [string, string];
+    my?: string | [string, string];
+    collision?: Collision | [Collision, Collision];
+    within?: WithinInfo['element'];
+    collisionDirection?: ['left'] | ['top'] | ['left', 'top'];
+    using?: (feedback: Feedback, position: Offset) => void;
+};
+declare type Collision = keyof Rules | 'none';
+declare type WithinInfo = {
+    element: HTMLElement | Window | Document;
+    isWindow: boolean;
+    isDocument: boolean;
+    offset: Offset;
+    width: number;
+    height: number;
+    scrollLeft: number;
+    scrollTop: number;
+};
+declare type Offset = {
+    top: number;
+    left: number;
+};
+declare type Horizontal = 'left' | 'center' | 'right';
+declare type Vertical = 'top' | 'center' | 'bottom';
+declare type CollisionPosition = {
+    marginTop: number;
+    marginLeft: number;
+};
+declare type Rules = {
+    fit: Rule;
+    flip: Rule;
+    flipfit: Rule;
+};
+declare type Rule = {
+    left: (position: Offset, data: RuleData) => void;
+    top: (position: Offset, data: RuleData) => void;
+};
+declare type RuleData = {
+    targetWidth: number;
+    targetHeight: number;
+    elemWidth: number;
+    elemHeight: number;
+    collisionPosition: CollisionPosition;
+    collisionWidth: number;
+    collisionHeight: number;
+    offset: [number, number];
+    my: [string, string];
+    at: [string, string];
+    within: WithinInfo;
+    elem: Options['of'];
+};
+export declare type Feedback = {
+    target: FeedbackElement;
+    element: FeedbackElement;
+    horizontal: Horizontal;
+    vertical: Vertical;
+    important: 'vertical' | 'horizontal';
+};
+export declare type FeedbackElement = {
+    element: Options['of'];
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+};
+export declare function getDocumentOrWindowRect(elem: Document | Window): {
+    width: number;
+    height: number;
+};
+export declare function scrollbarWidth(): number;
+export default function position(elem: HTMLElement, options: Options): void;
+export { position };
+
+
+export {normalize} from 'intact-react';