@king-design/react 3.1.4-beta.2 → 3.1.4

package/components/portal.js

@@ -10,16 +10,12 @@ var typeDefs = {
 };
 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);
@@ -29,21 +25,16 @@ export var Portal = /*#__PURE__*/function (_Component) {
     _this.config = useConfigContext();
     return _this;
   }
-
   Portal.template = function template() {
     if (process.env.NODE_ENV === 'production') {
       return createTextVNode('');
     }
-
     return createCommentVNode('portal');
   };
-
   var _proto = Portal.prototype;
-
   _proto.$render = function $render(lastVNode, nextVNode, parentDom, anchor, mountedQueue // in React, it has priority property to add some prior functions
   ) {
     var _this2 = this;
-
     /**
      * In React, we cannot render real elements in mountedQueue.
      * Because the rendering time of react element is uncontrollable
@@ -51,45 +42,34 @@ export var Portal = /*#__PURE__*/function (_Component) {
     var nextProps = nextVNode.props;
     var fakeContainer = document.createDocumentFragment();
     (mountedQueue.priority || mountedQueue).push(function () {
-      var parentDom = _this2.$lastInput.dom.parentElement; // maybe the <!-- portal --> has been removed by react, #938
-
+      var parentDom = _this2.$lastInput.dom.parentElement;
+      // maybe the <!-- portal --> has been removed by react, #938
       if (!parentDom) return;
-
       _this2.initContainer(nextProps.container, parentDom, anchor);
-
       _this2.container.appendChild(fakeContainer);
     });
     mount(nextProps.children, fakeContainer, this, this.$SVG, null, mountedQueue);
-
     _Component.prototype.$render.call(this, lastVNode, nextVNode, parentDom, anchor, mountedQueue);
   };
-
   _proto.$update = function $update(lastVNode, nextVNode, parentDom, anchor, mountedQueue, force) {
     var _this3 = this;
-
     // update container if it has changed
     var lastProps = lastVNode.props;
     var nextProps = nextVNode.props;
-
     var update = function update() {
       var lastContainer = _this3.container;
-
       if (lastProps.container !== nextProps.container) {
         _this3.initContainer(nextProps.container, parentDom, anchor);
       }
-
       var nextContainer = _this3.container;
-
       if (lastContainer === nextContainer) {
         patch(lastProps.children, nextProps.children, nextContainer, _this3, _this3.$SVG, anchor, mountedQueue, false);
       } else {
         remove(lastProps.children, lastContainer, false);
         mount(nextProps.children, nextContainer, _this3, _this3.$SVG, anchor, mountedQueue);
       }
-
       _Component.prototype.$update.call(_this3, lastVNode, nextVNode, parentDom, anchor, mountedQueue, force);
     };
-
     if (!this.container) {
       // in react, sometimes $update will be called before mountedQueue in $render
       (mountedQueue.priority || mountedQueue).push(update);
@@ -97,20 +77,16 @@ export var Portal = /*#__PURE__*/function (_Component) {
       update();
     }
   };
-
   _proto.$unmount = function $unmount(vNode, nextVNode) {
     var children = vNode.props.children;
     unmount(children, null);
-
     if (this.container) {
       // maybe the <!-- portal --> has been removed by react, #938
       // remove(children, this.container, false);
       removeVNodeDom(children, this.container);
     }
-
     _Component.prototype.$unmount.call(this, vNode, nextVNode);
   };
-
   _proto.initContainer = function initContainer(container, parentDom, anchor) {
     if (container) {
       if (isString(container)) {
@@ -122,12 +98,10 @@ export var Portal = /*#__PURE__*/function (_Component) {
       // let below logic to set container to default if container does not exist.
       this.container = null;
     }
-
     if (!this.container) {
       if (this.$senior instanceof BaseDialog) {
         // Dialog and Drawer must be inserted into document.body
         // this.container = document.body;
-
         /**
          * @Modify https://github.com/ksc-fe/kpc/issues/915
          * shoud insert to parent .k-dialog-wrapper to show nested dialog in Vue
@@ -147,10 +121,8 @@ export var Portal = /*#__PURE__*/function (_Component) {
       // } else {
       // this.container = document.body;
       // }
-
     }
   };
-
   return Portal;
 }(Component);
 Portal.typeDefs = typeDefs;

package/components/position.d.ts

@@ -1,4 +1,4 @@
-export declare type Options = {
+export type Options = {
     of?: Window | HTMLElement | Document | MouseEvent;
     at?: string | [string, string];
     my?: string | [string, string];
@@ -7,8 +7,8 @@ export declare type Options = {
     collisionDirection?: ['left'] | ['top'] | ['left', 'top'];
     using?: (feedback: Feedback, position: Offset) => void;
 };
-declare type Collision = keyof Rules | 'none';
-declare type WithinInfo = {
+type Collision = keyof Rules | 'none';
+type WithinInfo = {
     element: HTMLElement | Window | Document;
     isWindow: boolean;
     isDocument: boolean;
@@ -18,26 +18,26 @@ declare type WithinInfo = {
     scrollLeft: number;
     scrollTop: number;
 };
-declare type Offset = {
+type Offset = {
     top: number;
     left: number;
 };
-declare type Horizontal = 'left' | 'center' | 'right';
-declare type Vertical = 'top' | 'center' | 'bottom';
-declare type CollisionPosition = {
+type Horizontal = 'left' | 'center' | 'right';
+type Vertical = 'top' | 'center' | 'bottom';
+type CollisionPosition = {
     marginTop: number;
     marginLeft: number;
 };
-declare type Rules = {
+type Rules = {
     fit: Rule;
     flip: Rule;
     flipfit: Rule;
 };
-declare type Rule = {
+type Rule = {
     left: (position: Offset, data: RuleData) => void;
     top: (position: Offset, data: RuleData) => void;
 };
-declare type RuleData = {
+type RuleData = {
     targetWidth: number;
     targetHeight: number;
     elemWidth: number;
@@ -51,14 +51,14 @@ declare type RuleData = {
     within: WithinInfo;
     elem: Options['of'];
 };
-export declare type Feedback = {
+export type Feedback = {
     target: FeedbackElement;
     element: FeedbackElement;
     horizontal: Horizontal;
     vertical: Vertical;
     important: 'vertical' | 'horizontal';
 };
-export declare type FeedbackElement = {
+export type FeedbackElement = {
     element: Options['of'];
     left: number;
     top: number;

package/components/position.js

@@ -9,14 +9,12 @@ var rVertical = /top|center|bottom/;
 var rOffset = /[\+\-]\d+(\.[\d]+)?%?/;
 var rPosition = /^\w+/;
 var rPercent = /%$/;
-
 function getDimensions(elem) {
   if (elem.nodeType === 9) {
     // document
     var _getDocumentOrWindowR = getDocumentOrWindowRect(elem),
-        width = _getDocumentOrWindowR.width,
-        height = _getDocumentOrWindowR.height;
-
+      width = _getDocumentOrWindowR.width,
+      height = _getDocumentOrWindowR.height;
     return {
       width: width,
       height: height,
@@ -27,9 +25,8 @@ function getDimensions(elem) {
     };
   } else if (elem === window) {
     var _getDocumentOrWindowR2 = getDocumentOrWindowRect(elem),
-        _width = _getDocumentOrWindowR2.width,
-        _height = _getDocumentOrWindowR2.height;
-
+      _width = _getDocumentOrWindowR2.width,
+      _height = _getDocumentOrWindowR2.height;
     return {
       width: _width,
       height: _height,
@@ -48,9 +45,8 @@ function getDimensions(elem) {
         left: elem.pageX
       }
     };
-  } // dom
-
-
+  }
+  // dom
   var rect = elem.getBoundingClientRect();
   return {
     width: rect.width,
@@ -62,7 +58,6 @@ function getDimensions(elem) {
     rect: rect
   };
 }
-
 export function getDocumentOrWindowRect(elem) {
   if (elem === window) {
     var _d = elem.document.documentElement;
@@ -71,7 +66,6 @@ export function getDocumentOrWindowRect(elem) {
       height: _d.clientHeight
     };
   }
-
   var d = elem.documentElement;
   var b = elem.body;
   return {
@@ -79,38 +73,32 @@ export function getDocumentOrWindowRect(elem) {
     height: max(b.scrollHeight, d.scrollHeight, b.offsetHeight, d.offsetHeight, d.clientHeight)
   };
 }
-
 function getOffsets(offsets, width, height) {
   return [parseFloat(offsets[0]) * (rPercent.test(offsets[0]) ? width / 100 : 1), parseFloat(offsets[1]) * (rPercent.test(offsets[1]) ? height / 100 : 1)];
-} // reference: http://stackoverflow.com/questions/13382516/getting-scroll-bar-width-using-javascript
-
-
+}
+// reference: http://stackoverflow.com/questions/13382516/getting-scroll-bar-width-using-javascript
 var _scrollBarWidth;
-
 export function scrollbarWidth() {
   if (_scrollBarWidth !== undefined) {
     return _scrollBarWidth;
   }
-
   var outer = document.createElement("div");
   outer.style.visibility = "hidden";
   outer.style.width = "100px";
   outer.style.msOverflowStyle = "scrollbar"; // needed for WinJS apps
-
   document.body.appendChild(outer);
-  var widthNoScroll = outer.offsetWidth; // force scrollbars
-
-  outer.style.overflow = "scroll"; // add innerdiv
-
+  var widthNoScroll = outer.offsetWidth;
+  // force scrollbars
+  outer.style.overflow = "scroll";
+  // add innerdiv
   var inner = document.createElement("div");
   inner.style.width = "100%";
   outer.appendChild(inner);
-  var widthWithScroll = inner.offsetWidth; // remove divs
-
+  var widthWithScroll = inner.offsetWidth;
+  // remove divs
   outer.parentNode.removeChild(outer);
   return _scrollBarWidth = widthNoScroll - widthWithScroll;
 }
-
 function getScrollInfo(within) {
   var overflowX = within.isWindow || within.isDocument ? '' : within.element.style.overflowX;
   var overflowY = within.isWindow || within.isDocument ? '' : within.element.style.overflowY;
@@ -121,7 +109,6 @@ function getScrollInfo(within) {
     height: hasOverflowX ? scrollbarWidth() : 0
   };
 }
-
 function getWithinInfo(element) {
   element || (element = window);
   var isWindow = element === window;
@@ -132,7 +119,6 @@ function getWithinInfo(element) {
     isWindow: isWindow,
     isDocument: isDocument
   };
-
   if (hasOffset) {
     var rect = element.getBoundingClientRect();
     ret.offset = {
@@ -148,63 +134,50 @@ function getWithinInfo(element) {
       top: 0,
       left: 0
     };
-
     var _rect = getDocumentOrWindowRect(element);
-
     ret.width = _rect.width;
     ret.height = _rect.height;
     ret.scrollLeft = window.pageXOffset;
     ret.scrollTop = window.pageYOffset;
   }
-
   return ret;
 }
-
 function parseCss(style, property) {
   return parseInt(style[property], 10) || 0;
 }
-
 function isInViewport(rect) {
   if (!rect) return true;
   var top = rect.top,
-      bottom = rect.bottom,
-      left = rect.left,
-      right = rect.right;
+    bottom = rect.bottom,
+    left = rect.left,
+    right = rect.right;
   var windowHeight = window.innerHeight || document.documentElement.clientHeight;
   var windowWidth = window.innerWidth || document.documentElement.clientWidth;
   return top <= windowHeight && bottom >= 0 && left <= windowWidth && right >= 0;
 }
-
 export default function position(elem, options) {
   options = _Object$assign({}, options);
   var target = options.of || window;
-
   if (target.preventDefault) {
     options.at = "left top";
   }
-
   var _getDimensions = getDimensions(target),
-      targetWidth = _getDimensions.width,
-      targetHeight = _getDimensions.height,
-      targetOffset = _getDimensions.offset,
-      targetRect = _getDimensions.rect;
-
-  var basePosition = _Object$assign({}, targetOffset); // don't detect collison if the target is not in viewport
-
-
+    targetWidth = _getDimensions.width,
+    targetHeight = _getDimensions.height,
+    targetOffset = _getDimensions.offset,
+    targetRect = _getDimensions.rect;
+  var basePosition = _Object$assign({}, targetOffset);
+  // don't detect collison if the target is not in viewport
   var collision = isInViewport(targetRect) ? !isArray(options.collision) ? (options.collision || 'flip').split(' ') : options.collision : ['none', 'none'];
   var offsets = {};
   var within = getWithinInfo(options.within);
   var scrollInfo = getScrollInfo(within);
   ['my', 'at'].forEach(function (item) {
     var pos = (options[item] || '').split(' ');
-
     if (pos.length === 1) {
       var _context;
-
       pos = rHorizontal.test(pos[0]) ? _concatInstanceProperty(pos).call(pos, ['center']) : rVertical.test(pos[0]) ? _concatInstanceProperty(_context = ['center']).call(_context, pos) : ['center', 'center'];
     }
-
     pos[0] = rHorizontal.test(pos[0]) ? pos[0] : 'center';
     pos[1] = rVertical.test(pos[1]) ? pos[1] : 'center';
     var horizontalOffset = rOffset.exec(pos[0]);
@@ -212,37 +185,30 @@ export default function position(elem, options) {
     offsets[item] = [horizontalOffset ? horizontalOffset[0] : '0', verticalOffset ? verticalOffset[0] : '0'];
     options[item] = [rPosition.exec(pos[0])[0], rPosition.exec(pos[1])[0]];
   });
-
   if (collision.length === 1) {
     collision[1] = collision[0];
   }
-
   var at = _atInstanceProperty(options);
-
   if (at[0] === 'right') {
     basePosition.left += targetWidth;
   } else if (at[0] === 'center') {
     basePosition.left += targetWidth / 2;
   }
-
   if (at[1] === 'bottom') {
     basePosition.top += targetHeight;
   } else if (at[1] === 'center') {
     basePosition.top += targetHeight / 2;
   }
-
   var atOffset = getOffsets(_atInstanceProperty(offsets), targetWidth, targetHeight);
   basePosition.left += atOffset[0];
-  basePosition.top += atOffset[1]; // maybe it has scaled, so we use getBoundingClientRect
-
+  basePosition.top += atOffset[1];
+  // maybe it has scaled, so we use getBoundingClientRect
   var _elem$getBoundingClie = elem.getBoundingClientRect(),
-      elemWidth = _elem$getBoundingClie.width,
-      elemHeight = _elem$getBoundingClie.height; // const elemWidth = elem.offsetWidth;
+    elemWidth = _elem$getBoundingClie.width,
+    elemHeight = _elem$getBoundingClie.height;
+  // const elemWidth = elem.offsetWidth;
   // const elemHeight = elem.offsetHeight;
-
-
   var position = _Object$assign({}, basePosition);
-
   var myOffset = getOffsets(offsets.my, elemWidth, elemHeight);
   var computedStyle = window.getComputedStyle(elem);
   var marginLeft = parseCss(computedStyle, 'marginLeft');
@@ -254,25 +220,21 @@ export default function position(elem, options) {
     marginTop: marginTop
   };
   var my = options.my;
-
   if (my[0] === 'right') {
     position.left -= elemWidth;
   } else if (my[0] === 'center') {
     position.left -= elemWidth / 2;
   }
-
   if (my[1] === 'bottom') {
     position.top -= elemHeight;
   } else if (my[1] === 'center') {
     position.top -= elemHeight / 2;
   }
-
   position.left += myOffset[0];
   position.top += myOffset[1];
   var collisionDirection = options.collisionDirection || ['left', 'top'];
   collisionDirection.forEach(function (dir, i) {
     var coll = collision[i];
-
     if (rules[coll]) {
       rules[coll][dir](position, {
         targetWidth: targetWidth,
@@ -290,7 +252,6 @@ export default function position(elem, options) {
       });
     }
   });
-
   if (options.using) {
     var left = targetOffset.left - position.left;
     var right = left + targetWidth - elemWidth;
@@ -314,15 +275,12 @@ export default function position(elem, options) {
       horizontal: right < 0 ? 'left' : left > 0 ? 'right' : 'center',
       vertical: bottom < 0 ? 'top' : top > 0 ? 'bottom' : 'center'
     };
-
     if (targetWidth < elemWidth && abs(left + right) < targetWidth) {
       feedback.horizontal = 'center';
     }
-
     if (targetHeight < elemHeight && abs(top + bottom) < targetHeight) {
       feedback.vertical = 'center';
     }
-
     if (position.top + elemHeight <= targetOffset.top || position.top >= targetOffset.top + targetHeight) {
       feedback.important = 'vertical';
     } else if (position.left + elemWidth <= targetOffset.left || position.left >= targetOffset.left + targetWidth) {
@@ -332,16 +290,12 @@ export default function position(elem, options) {
     } else {
       feedback.important = 'vertical';
     }
-
     options.using(feedback, position);
   }
-
   var style = elem.style;
-
   if (computedStyle.position === 'static') {
     style.position = 'relative';
   }
-
   var curOffset = getDimensions(elem).offset;
   var curCSSTop = computedStyle.top;
   var curCSSLeft = computedStyle.left;
@@ -358,7 +312,6 @@ var rules = {
       var overLeft = withinOffset - collisionPosLeft;
       var overRight = collisionPosLeft + data.collisionWidth - outerWidth - withinOffset;
       var newOverRight;
-
       if (data.collisionWidth > outerWidth) {
         if (overLeft > 0 && overRight <= 0) {
           newOverRight = position.left + overLeft + data.collisionWidth - outerWidth - withinOffset;
@@ -386,7 +339,6 @@ var rules = {
       var overTop = withinOffset - collisionPosTop;
       var overBottom = collisionPosTop + data.collisionHeight - outerHeight - withinOffset;
       var newOverBottom;
-
       if (data.collisionHeight > outerHeight) {
         if (overTop > 0 && overBottom <= 0) {
           newOverBottom = position.top + overTop + data.collisionHeight - outerHeight - withinOffset;
@@ -421,17 +373,15 @@ var rules = {
       var offset = -2 * data.offset[0];
       var newOverRight;
       var newOverLeft;
-
       if (overLeft < 0) {
         newOverRight = position.left + myOffset + atOffset + offset + data.collisionWidth - outerWidth - withinOffset;
-
         if (newOverRight < 0 || newOverRight < abs(overLeft)) {
           position.left += myOffset + atOffset + offset;
         }
       } else if (overRight > 0) {
-        newOverLeft = position.left - data.collisionPosition.marginLeft + myOffset + atOffset + offset - offsetLeft; // the same to top
+        newOverLeft = position.left - data.collisionPosition.marginLeft + myOffset + atOffset + offset - offsetLeft;
+        // the same to top
         // if (newOverLeft > 0 || abs(newOverLeft) < overRight) {
-
         if (newOverLeft > 0) {
           position.left += myOffset + atOffset + offset;
         }
@@ -450,18 +400,16 @@ var rules = {
       var offset = -2 * data.offset[1];
       var newOverTop;
       var newOverBottom;
-
       if (overTop < 0) {
         newOverBottom = position.top + myOffset + atOffset + offset + data.collisionHeight - outerHeight - withinOffset;
-
         if (newOverBottom < 0 || newOverBottom < abs(overTop)) {
           position.top += myOffset + atOffset + offset;
         }
       } else if (overBottom > 0) {
-        newOverTop = position.top - data.collisionPosition.marginTop + myOffset + atOffset + offset - offsetTop; // because window can scroll down, when it beyond the top border,
+        newOverTop = position.top - data.collisionPosition.marginTop + myOffset + atOffset + offset - offsetTop;
+        // because window can scroll down, when it beyond the top border,
         // we can not scroll it to view. Don't flip it in this case
         // if (newOverTop > 0 || abs(newOverTop) < overBottom) {
-
         if (newOverTop > 0) {
           position.top += myOffset + atOffset + offset;
         }
@@ -471,16 +419,12 @@ var rules = {
   flipfit: {
     left: function left() {
       var _rules$flip, _rules$fit;
-
       (_rules$flip = rules.flip).left.apply(_rules$flip, arguments);
-
       (_rules$fit = rules.fit).left.apply(_rules$fit, arguments);
     },
     top: function top() {
       var _rules$flip2, _rules$fit2;
-
       (_rules$flip2 = rules.flip).top.apply(_rules$flip2, arguments);
-
       (_rules$fit2 = rules.fit).top.apply(_rules$fit2, arguments);
     }
   }

package/components/progress/index.d.ts

@@ -1,9 +1,9 @@
 import { Component, TypeDefs } from 'intact-react';
-declare type Sizes = 'default' | 'small' | 'mini';
-declare type Type = 'bar' | 'circle';
-declare type Status = 'active' | 'success' | 'error' | 'normal' | 'warning';
-declare type Percent = number | string;
-declare type Color = {
+type Sizes = 'default' | 'small' | 'mini';
+type Type = 'bar' | 'circle';
+type Status = 'active' | 'success' | 'error' | 'normal' | 'warning';
+type Percent = number | string;
+type Color = {
     percent: Percent;
     color: string;
 };
@@ -21,7 +21,7 @@ export declare class Progress extends Component<ProgressProps> {
     static template: string | import('intact-react').Template<any>;
     static typeDefs: Required<TypeDefs<ProgressProps>>;
     static defaults: () => Partial<ProgressProps>;
-    status: import("../../hooks/useState").State<Status>;
+    status: import("../../hooks/useState").State<NonNullable<Status | undefined>>;
     color: import("../../hooks/useState").State<string | Color[] | ((percent: number) => string) | undefined>;
     private config;
     init(): void;

package/components/progress/index.js

@@ -16,7 +16,6 @@ var typeDefs = {
   strokeWidth: Number,
   color: [String, Array, Function]
 };
-
 var defaults = function defaults() {
   return {
     type: 'bar',
@@ -27,45 +26,34 @@ var defaults = function defaults() {
     strokeWidth: 6
   };
 };
-
 export var Progress = /*#__PURE__*/function (_Component) {
   _inheritsLoose(Progress, _Component);
-
   function Progress() {
     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.status = useStatus();
     _this.color = useColor();
     _this.config = useConfigContext();
     return _this;
   }
-
   var _proto = Progress.prototype;
-
   _proto.init = function init() {
     var _this2 = this;
-
     this.on('$receive:percent', function (percent) {
       _this2.set('percent', fixPercent(percent));
     });
   };
-
   return Progress;
 }(Component);
 Progress.template = template;
 Progress.typeDefs = typeDefs;
 Progress.defaults = defaults;
-
 function fixPercent(percent) {
   var _percent = Number(percent);
-
   if (_percent > 100) _percent = 100;
   if (_percent < 0) _percent = 0;
   return _percent;