@kep-platform/basic-component 1.0.22 → 1.0.23

package/dist/PopupBox/PopupBox.d.ts

@@ -18,5 +18,5 @@ export declare function Popup(props: {
     trigger?: TriggerType;
     content?: ReactNode;
     onVisibleChange?: (visible: boolean) => void;
-}): string | number | boolean | React.JSX.Element | Iterable<React.ReactNode> | null | undefined;
+}): string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined;
 export default PopupBox;

package/dist/Tree/Tree.js

@@ -6,6 +6,8 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
@@ -113,7 +115,7 @@ var Tree = observer(function (_ref) {
     var p;
     var newColumns = [];
     for (var i = 0; i < columns.length; i++) {
-      p = columns[i];
+      p = _objectSpread({}, columns[i]);
       if (p.hideInTable) {
         continue;
       }

package/dist/ViewPort/ViewPort.d.ts

@@ -4,8 +4,7 @@ import { ViewPortWindowProps } from './ViewPortWindow';
 type ViewPortProps = {
     children: ReactNode;
     viewPortStore: ViewPortStore;
-    onScale?: (left: number, top: number, scale: number, ratio: number) => void;
-    onScroll?: (left: number, top: number, scale: number, ratio: number) => void;
+    onScroll?: (left: number, top: number) => void;
 } & HtmlHTMLAttributes<HTMLDivElement>;
 declare const ViewPort: React.FunctionComponent<ViewPortProps> & {
     Window: FunctionComponent<ViewPortWindowProps>;

package/dist/ViewPort/ViewPort.js

@@ -1,4 +1,4 @@
-var _excluded = ["children", "viewPortStore", "onScroll", "onScale"];
+var _excluded = ["children", "viewPortStore", "onScroll"];
 var _templateObject, _templateObject2, _templateObject3;
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
@@ -9,17 +9,14 @@ import { runInAction } from 'mobx';
 import { observer } from 'mobx-react-lite';
 import React, { useCallback, useEffect, useRef } from 'react';
 import styled from 'styled-components';
-import { RippleManagerStore } from "./Ripple";
 import { ViewPortWindow } from "./ViewPortWindow";
 var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\tposition: relative;\n\tborder: 1px solid #eee;\n\tbox-shadow: 0 0 7px 0 inset #fefefe;\n"])));
 var Content = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\tposition: absolute;\n"])));
 var Overlay = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral([""])));
-var rippleManagerStore = new RippleManagerStore();
 var ViewPortComponent = observer(function (props) {
   var children = props.children,
     viewPortStore = props.viewPortStore,
     onScroll = props.onScroll,
-    onScale = props.onScale,
     rest = _objectWithoutProperties(props, _excluded);
   var _useDraggable = useDraggable({
       id: 'ViewPortEntity'
@@ -35,23 +32,13 @@ var ViewPortComponent = observer(function (props) {
   useEffect(function () {
     if (transform) {
       viewPortStore.move(transform);
-      onScroll === null || onScroll === void 0 || onScroll(viewPortStore.transform.left, viewPortStore.transform.top, viewPortStore.scale, viewPortStore.ratio);
+      onScroll === null || onScroll === void 0 || onScroll(viewPortStore.transform.left, viewPortStore.transform.top);
     } else {
       viewPortStore.endMove();
     }
   }, [transform]);
   useEffect(function () {
-    var _contentRef$current, _contentRef$current2, _contentRef$current3;
-    function scaleHandler(e) {
-      e.stopPropagation();
-      e.preventDefault();
-      if (e.deltaY > 0) {
-        viewPortStore.increaseScale();
-      } else {
-        viewPortStore.decreaseScale();
-      }
-      onScale === null || onScale === void 0 || onScale(viewPortStore.transform.left, viewPortStore.transform.top, viewPortStore.scale, viewPortStore.ratio);
-    }
+    var _contentRef$current, _contentRef$current2;
     function onContentTransitionEnd(e) {
       if (e.target === contentRef.current) {
         runInAction(function () {
@@ -66,14 +53,54 @@ var ViewPortComponent = observer(function (props) {
         });
       }
     }
-    (_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 || _contentRef$current.addEventListener('wheel', scaleHandler, {
-      passive: false
+    (_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 || _contentRef$current.addEventListener('transitionend', onContentTransitionEnd);
+    (_contentRef$current2 = contentRef.current) === null || _contentRef$current2 === void 0 || _contentRef$current2.addEventListener('transitionstart', onContentTransitionStart);
+    return function () {
+      var _contentRef$current3, _contentRef$current4;
+      (_contentRef$current3 = contentRef.current) === null || _contentRef$current3 === void 0 || _contentRef$current3.removeEventListener('transitionend', onContentTransitionEnd);
+      (_contentRef$current4 = contentRef.current) === null || _contentRef$current4 === void 0 || _contentRef$current4.removeEventListener('transitionstart', onContentTransitionStart);
+    };
+  }, []);
+  useEffect(function () {
+    function measure() {
+      var el = containerRef.current;
+      if (!el) return;
+      var r = el.getBoundingClientRect();
+      var left = r.left + (window.scrollX || window.pageXOffset || 0);
+      var top = r.top + (window.scrollY || window.pageYOffset || 0);
+      viewPortStore.setContainerRect({
+        left: left,
+        top: top,
+        right: left + r.width,
+        bottom: top + r.height,
+        width: r.width,
+        height: r.height
+      });
+    }
+    measure();
+    var ro;
+    var Rz = window.ResizeObserver;
+    if (Rz) {
+      ro = new Rz(function () {
+        return measure();
+      });
+      if (ro && containerRef.current) ro.observe(containerRef.current);
+    }
+    function onScroll() {
+      measure();
+    }
+    function onResize() {
+      measure();
+    }
+    window.addEventListener('scroll', onScroll, {
+      passive: true
     });
-    (_contentRef$current2 = contentRef.current) === null || _contentRef$current2 === void 0 || _contentRef$current2.addEventListener('transitionend', onContentTransitionEnd);
-    (_contentRef$current3 = contentRef.current) === null || _contentRef$current3 === void 0 || _contentRef$current3.addEventListener('transitionstart', onContentTransitionStart);
+    window.addEventListener('resize', onResize);
     return function () {
-      var _contentRef$current4;
-      (_contentRef$current4 = contentRef.current) === null || _contentRef$current4 === void 0 || _contentRef$current4.removeEventListener('wheel', scaleHandler);
+      window.removeEventListener('scroll', onScroll);
+      window.removeEventListener('resize', onResize);
+      if (ro && containerRef.current) ro.unobserve(containerRef.current);
+      if (ro && typeof ro.disconnect === 'function') ro.disconnect();
     };
   }, []);
   var onContentPointerDownHandler = useCallback(function (e) {
@@ -95,7 +122,7 @@ var ViewPortComponent = observer(function (props) {
     ref: containerRef
   }, rest), /*#__PURE__*/React.createElement(Overlay, {
     style: viewPortStore.overlayStyle
-  }), rippleManagerStore.rippleInfo, /*#__PURE__*/React.createElement(Content, _extends({
+  }), /*#__PURE__*/React.createElement(Content, _extends({
     ref: function ref(dom) {
       contentRef.current = dom;
       setNodeRef(contentRef.current);
@@ -105,10 +132,6 @@ var ViewPortComponent = observer(function (props) {
     onPointerDown: onContentPointerDownHandler,
     onPointerUp: onContentPointerUpHandler,
     onDoubleClick: function onDoubleClick(e) {
-      if (viewPortStore.scale !== 1 / viewPortStore.ratio) {
-        viewPortStore.unfocus();
-        return;
-      }
       var target = e.target;
       var rect = target.getBoundingClientRect();
       viewPortStore.focus(e.clientX - rect.left, e.clientY - rect.top);

package/dist/ViewPort/ViewPortStore.d.ts

@@ -9,26 +9,22 @@ export declare class ViewPortStore {
         x: number;
         y: number;
     };
-    scale: number;
     width: number;
     height: number;
-    ratio: number;
+    containerRect: {
+        left: number;
+        top: number;
+        right: number;
+        bottom: number;
+        width: number;
+        height: number;
+    };
     isMoving: boolean;
     maxZIndex: number;
     isTransition: boolean;
-    constructor(width?: number, height?: number, ratio?: number);
-    get scaleStep(): number;
-    increaseScale(): void;
-    decreaseScale(): void;
-    validScale(scale: number): number;
-    setScale(scale: number): void;
+    animationEasing: string;
+    constructor(width?: number, height?: number);
     setTransform(left: number, top: number): void;
-    get offsetLeft(): number;
-    get offsetTop(): number;
-    formatedTransform(left: number, top: number): {
-        left: number;
-        top: number;
-    };
     focus(left: number, top: number): void;
     unfocus(): void;
     move(transform: Transform): void;
@@ -41,13 +37,35 @@ export declare class ViewPortStore {
         top: number;
         width: number;
         height: number;
-        scale: number;
+    };
+    setContainerRect(rect: {
+        left: number;
+        top: number;
+        right: number;
+        bottom: number;
+        width: number;
+        height: number;
+    }): void;
+    get pageBounds(): {
+        left: number;
+        top: number;
+        right: number;
+        bottom: number;
+        width: number;
+        height: number;
+    };
+    get bounds(): {
+        left: number;
+        top: number;
+        right: number;
+        bottom: number;
+        width: number;
+        height: number;
     };
     posInViewPort(left: number, top: number, width: number, height: number): {
         left: number;
         top: number;
         width: number;
         height: number;
-        scale: number;
     };
 }

package/dist/ViewPort/ViewPortStore.js

@@ -5,10 +5,9 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-import { action, computed, makeObservable, observable } from 'mobx';
+import { computed, makeObservable, observable } from 'mobx';
 export var ViewPortStore = /*#__PURE__*/function () {
-  //在动画执行期间，禁止任何鼠标操作
-  function ViewPortStore(width, height, ratio) {
+  function ViewPortStore(width, height) {
     _classCallCheck(this, ViewPortStore);
     _defineProperty(this, "transform", {
       left: 0,
@@ -18,120 +17,53 @@ export var ViewPortStore = /*#__PURE__*/function () {
       x: 0,
       y: 0
     });
-    _defineProperty(this, "scale", 0.2);
     _defineProperty(this, "width", 600);
     _defineProperty(this, "height", 600);
-    _defineProperty(this, "ratio", 5);
-    //缩放比例
+    _defineProperty(this, "containerRect", {
+      left: 0,
+      top: 0,
+      right: 0,
+      bottom: 0,
+      width: 0,
+      height: 0
+    });
     _defineProperty(this, "isMoving", false);
     _defineProperty(this, "maxZIndex", 1);
     _defineProperty(this, "isTransition", false);
-    if (ratio) {
-      this.ratio = ratio;
-      this.scale = 1 / this.ratio;
-    }
+    //在动画执行期间，禁止任何鼠标操作
+    _defineProperty(this, "animationEasing", 'ease-in-out');
     if (width) this.width = width;
     if (height) this.height = height;
     makeObservable(this, {
       transform: observable.struct,
       offset: observable.struct,
-      scale: observable,
       width: observable,
       height: observable,
-      ratio: observable,
+      containerRect: observable.struct,
       isMoving: observable,
       maxZIndex: observable,
       isTransition: observable,
-      scaleStep: computed,
-      increaseScale: action,
-      decreaseScale: action,
-      setScale: action,
-      setTransform: action,
-      offsetLeft: computed,
-      offsetTop: computed,
-      focus: action,
-      unfocus: action,
-      move: action,
-      endMove: action,
-      containerStyle: computed.struct,
-      contentStyle: computed.struct,
+      animationEasing: observable,
       viewPortRect: computed.struct,
       overlayStyle: computed.struct
     });
   }
   _createClass(ViewPortStore, [{
-    key: "scaleStep",
-    get: function get() {
-      return 1 / this.ratio * 0.125;
-    }
-  }, {
-    key: "increaseScale",
-    value: function increaseScale() {
-      this.setScale(this.scale + this.scaleStep);
-      this.setTransform(this.transform.left, this.transform.top);
-    }
-  }, {
-    key: "decreaseScale",
-    value: function decreaseScale() {
-      this.setScale(this.scale - this.scaleStep);
-      this.setTransform(this.transform.left, this.transform.top);
-    }
-  }, {
-    key: "validScale",
-    value: function validScale(scale) {
-      return Math.min(1, Math.max(1 / this.ratio, scale));
-    }
-  }, {
-    key: "setScale",
-    value: function setScale(scale) {
-      this.scale = this.validScale(scale);
-    }
-  }, {
     key: "setTransform",
     value: function setTransform(left, top) {
-      this.transform = this.formatedTransform(left, top);
-    }
-
-    /* 这个函数是获取left偏移量 */
-  }, {
-    key: "offsetLeft",
-    get: function get() {
-      return (this.width * this.ratio * this.scale - this.width) / 2;
-    }
-    /* 获取top偏移量 */
-  }, {
-    key: "offsetTop",
-    get: function get() {
-      return (this.height * this.ratio * this.scale - this.height) / 2;
-    }
-  }, {
-    key: "formatedTransform",
-    value: function formatedTransform(left, top) {
-      var areaLimit = {
-        left: {
-          min: -this.offsetLeft,
-          max: this.offsetLeft
-        },
-        top: {
-          min: -this.offsetTop,
-          max: this.offsetTop
-        }
-      };
-      return {
-        left: Math.max(areaLimit.left.min, Math.min(left, areaLimit.left.max)),
-        top: Math.max(areaLimit.top.min, Math.min(top, areaLimit.top.max))
+      this.transform = {
+        left: left,
+        top: top
       };
     }
   }, {
     key: "focus",
     value: function focus(left, top) {
-      this.setScale(1);
-      this.setTransform((1 - this.ratio) * left + this.offsetLeft, (1 - this.ratio) * top + this.offsetTop);
+      this.setTransform(left, top);
     }
   }, {
     key: "unfocus",
     value: function unfocus() {
-      this.setScale(1 / this.ratio);
       this.setTransform(0, 0);
     }
   }, {
@@ -158,11 +90,11 @@ export var ViewPortStore = /*#__PURE__*/function () {
         position: 'absolute',
         left: 0,
         top: 0,
-        transform: " translate(".concat(this.transform.left - this.offsetLeft, "px,").concat(this.transform.top - this.offsetTop, "px) scale(").concat(this.scale, ")"),
-        width: this.width * this.ratio + 'px',
-        height: this.height * this.ratio + 'px',
+        transform: " translate(".concat(this.transform.left, "px,").concat(this.transform.top, "px)"),
+        width: this.width + 'px',
+        height: this.height + 'px',
         transformOrigin: 'left top',
-        transition: this.isMoving ? 'none' : 'all 0.3s ease-in-out',
+        transition: this.isMoving ? 'none' : "all 0.3s ".concat(this.animationEasing),
         background: '#188fff67',
         cursor: this.isMoving ? 'grab' : 'default'
       };
@@ -197,17 +129,38 @@ export var ViewPortStore = /*#__PURE__*/function () {
     get: function get() {
       return this.posInViewPort(0, 0, this.width, this.height);
     }
+  }, {
+    key: "setContainerRect",
+    value: function setContainerRect(rect) {
+      this.containerRect = rect;
+    }
+  }, {
+    key: "pageBounds",
+    get: function get() {
+      return this.containerRect;
+    }
 
-    /* 这个函数比较重要，因为你想要让content中的元素在视窗相对位置显示，这个函数会帮你计算偏移量和缩放量，直接得出你的元素应该在content中的偏移量 */
+    // 暴露视窗的空间坐标（容器坐标系）
+  }, {
+    key: "bounds",
+    get: function get() {
+      return {
+        left: 0,
+        top: 0,
+        right: this.width,
+        bottom: this.height,
+        width: this.width,
+        height: this.height
+      };
+    }
   }, {
     key: "posInViewPort",
     value: function posInViewPort(left, top, width, height) {
       return {
-        left: (-this.transform.left + this.offsetLeft + left) / this.scale,
-        top: (-this.transform.top + this.offsetTop + top) / this.scale,
-        width: width / this.scale,
-        height: height / this.scale,
-        scale: this.scale
+        left: -this.transform.left + left,
+        top: -this.transform.top + top,
+        width: width,
+        height: height
       };
     }
   }]);

package/dist/ViewPort/ViewPortWindow.js

@@ -60,7 +60,7 @@ export var ViewPortWindowStore = /*#__PURE__*/function (_WindowStore) {
             zIndex: this.zIndex,
             transform: 'scale(0)',
             transformOrigin: 'center',
-            transition: 'all 0.3s ease-out'
+            transition: "all ".concat(this.animationDurationClose, " ").concat(this.animationEasing)
           };
         case 'minimize':
           return {
@@ -71,18 +71,18 @@ export var ViewPortWindowStore = /*#__PURE__*/function (_WindowStore) {
             zIndex: this.zIndex,
             transform: 'scale(0)',
             transformOrigin: 'left top',
-            transition: "all ".concat(0.5 + this.viewPortStore.scale, "s ease-out")
+            transition: "all ".concat(this.animationDurationMinimize, " ").concat(this.animationEasing)
           };
         case 'fullscreen':
           return {
             left: this.fullscreenPos.left + 'px',
             top: this.fullscreenPos.top + 'px',
-            width: this.fullscreenPos.width * this.viewPortStore.scale + 'px',
-            height: this.fullscreenPos.height * this.viewPortStore.scale + 'px',
-            transform: "scale(".concat(1 / this.viewPortStore.scale, ")"),
+            width: this.fullscreenPos.width + 'px',
+            height: this.fullscreenPos.height + 'px',
+            transform: 'none',
             zIndex: this.zIndex,
             transformOrigin: 'left top',
-            transition: 'all 0.3s ease-out'
+            transition: "all ".concat(this.animationDurationFullscreen, " ").concat(this.animationEasing)
           };
         case 'normal':
         default:
@@ -104,7 +104,7 @@ export var ViewPortWindowStore = /*#__PURE__*/function (_WindowStore) {
               height: this.height + 'px',
               zIndex: this.zIndex,
               transform: 'none',
-              transition: 'all 0.3s ease-out'
+              transition: "all ".concat(this.animationDurationNormal, " ").concat(this.animationEasing)
             };
           }
       }
@@ -123,9 +123,10 @@ export var ViewPortWindowStore = /*#__PURE__*/function (_WindowStore) {
     key: "calculateTransform",
     value: function calculateTransform(transform) {
       var _this$transform, _this$transform2;
+      // 固定正常尺寸下，直接使用像素位移
       return {
-        x: (transform.x - (((_this$transform = this.transform) === null || _this$transform === void 0 ? void 0 : _this$transform.x) || 0)) / this.viewPortStore.scale,
-        y: (transform.y - (((_this$transform2 = this.transform) === null || _this$transform2 === void 0 ? void 0 : _this$transform2.y) || 0)) / this.viewPortStore.scale
+        x: transform.x - (((_this$transform = this.transform) === null || _this$transform === void 0 ? void 0 : _this$transform.x) || 0),
+        y: transform.y - (((_this$transform2 = this.transform) === null || _this$transform2 === void 0 ? void 0 : _this$transform2.y) || 0)
       };
     }
   }, {

package/dist/ViewPort/test.js

@@ -1,5 +1,12 @@
 var _templateObject;
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
@@ -7,16 +14,18 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { QuestionCircleOutlined } from '@ant-design/icons';
 import { DndContext } from '@dnd-kit/core';
+import { Space } from 'antd';
 import { makeAutoObservable, runInAction } from 'mobx';
 import { observer } from 'mobx-react-lite';
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
 import { Button, GlobalStyles } from '..';
 import ViewPort from "./ViewPort";
 import { ViewPortStore } from "./ViewPortStore";
 import { ViewPortWindowStore } from "./ViewPortWindow";
-var viewPortStore = new ViewPortStore(600, 600, 1);
+var viewPortStore = new ViewPortStore(600, 600);
 var WindowManager = /*#__PURE__*/function () {
   function WindowManager() {
     _classCallCheck(this, WindowManager);
@@ -67,6 +76,15 @@ var WindowManager = /*#__PURE__*/function () {
 var windowManager = new WindowManager();
 var StyledViewPort = styled(ViewPort)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\tborder: 1px solid #eee;\n"])));
 export default observer(function Test() {
+  var _useState = useState(600),
+    _useState2 = _slicedToArray(_useState, 2),
+    w = _useState2[0],
+    setW = _useState2[1];
+  var _useState3 = useState(600),
+    _useState4 = _slicedToArray(_useState3, 2),
+    h = _useState4[0],
+    setH = _useState4[1];
+  var containerRef = useRef(null);
   useEffect(function () {
     function setWidthHeight() {
       runInAction(function () {
@@ -80,9 +98,45 @@ export default observer(function Test() {
       window.removeEventListener('resize', setWidthHeight);
     };
   }, []);
+  useEffect(function () {
+    var el = containerRef.current;
+    if (!el) return;
+    var ro = new ResizeObserver(function (entries) {
+      var _iterator = _createForOfIteratorHelper(entries),
+        _step;
+      try {
+        var _loop = function _loop() {
+          var entry = _step.value;
+          var cr = entry.contentRect;
+          runInAction(function () {
+            // 保证写入的是数字（像素）
+            viewPortStore.width = Math.round(cr.width);
+            viewPortStore.height = Math.round(cr.height);
+          });
+        };
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          _loop();
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+    });
+    ro.observe(el);
+    // 立刻触发一次初始尺寸写入
+    var rect = el.getBoundingClientRect();
+    runInAction(function () {
+      viewPortStore.width = Math.round(rect.width);
+      viewPortStore.height = Math.round(rect.height);
+    });
+    return function () {
+      return ro.disconnect();
+    };
+  }, []);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(GlobalStyles, {
     $css: []
-  }), /*#__PURE__*/React.createElement(Button, {
+  }), /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(Button, {
     onClick: function onClick() {
       windowManager.createWindow();
     }
@@ -90,18 +144,40 @@ export default observer(function Test() {
     onClick: function onClick() {
       windowManager.toggleWindowIdIsJss();
     }
-  }, "\u5207\u6362"), /*#__PURE__*/React.createElement(DndContext, null, /*#__PURE__*/React.createElement(StyledViewPort, {
+  }, "\u5207\u6362"), /*#__PURE__*/React.createElement(Button, {
+    onClick: function onClick() {
+      setW(function (v) {
+        return v + 100;
+      });
+      setH(function (v) {
+        return v + 100;
+      });
+    }
+  }, "\u53D8\u5927"), "x: ", viewPortStore.pageBounds.left, " y: ", viewPortStore.pageBounds.top), /*#__PURE__*/React.createElement("div", {
+    ref: containerRef,
+    style: {
+      width: w,
+      height: h
+    }
+  }, /*#__PURE__*/React.createElement(DndContext, null, /*#__PURE__*/React.createElement(StyledViewPort, {
     viewPortStore: viewPortStore
   }, windowManager.windows.map(function (windowStore) {
     return /*#__PURE__*/React.createElement(ViewPort.Window, {
       window: windowStore,
       key: windowStore.id,
-      title: windowStore.id
+      title: windowStore.id,
+      options: [{
+        icon: /*#__PURE__*/React.createElement(QuestionCircleOutlined, null),
+        'aria-label': 'help',
+        onClick: function onClick() {
+          alert('help clicked');
+        }
+      }]
     }, /*#__PURE__*/React.createElement("div", {
       style: {
         height: '2000px',
         backgroundColor: 'pink'
       }
     }));
-  }))));
+  })))));
 });

package/dist/Window/Window.d.ts

@@ -1,5 +1,6 @@
-import React, { ReactNode } from 'react';
+import React, { FunctionComponent, ReactNode } from 'react';
 import { ViewPortWindowStore } from '../ViewPort';
+import { WindowOptionProps } from './WindowOption';
 import WindowStore from './WindowStore';
 export type WindowProps = {
     window: WindowStore | ViewPortWindowStore;
@@ -8,8 +9,14 @@ export type WindowProps = {
     onFullscreenHandler?: () => void;
     onFocusHandler?: () => void;
     onShareWindow?: () => void;
+    options?: {
+        'aria-label': string;
+        icon: ReactNode;
+        onClick: () => void;
+        danger?: boolean;
+    }[];
 };
-declare const Window: ((props: WindowProps) => React.JSX.Element) & {
-    displayName: string;
+declare const Window: React.FunctionComponent<WindowProps> & {
+    WindowOption: FunctionComponent<WindowOptionProps>;
 };
 export default Window;

package/dist/Window/Window.js

@@ -42,13 +42,14 @@ var WindowSplitPanelItem = styled.div.withConfig({
 })(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n\twidth: ", ";\n\theight: 100%;\n\tborder: 2px solid #b4b4b6;\n\tborder-radius: 4px;\n\ttransition: all 0.3s;\n\tbox-sizing: border-box;\n\tbackground-color: #d7d7d9;\n\tcursor: pointer;\n\n\t&:hover {\n\t\tbackground-color: var(--kep-platform-color-primary);\n\t}\n"])), function (props) {
   return props.width;
 });
-var Window = observer(function (props) {
+var WindowComponent = observer(function (props) {
   var window = props.window,
     title = props.title,
     children = props.children,
     onFullscreenHandler = props.onFullscreenHandler,
     onFocusHandler = props.onFocusHandler,
-    onShareWindow = props.onShareWindow;
+    onShareWindow = props.onShareWindow,
+    options = props.options;
   var windowContainerRef = useRef(null);
   useEffect(function () {
     var _windowContainerRef$c, _windowContainerRef$c2, _windowContainerRef$c3;
@@ -167,7 +168,18 @@ var Window = observer(function (props) {
     onPointerDown: function onPointerDown(e) {
       e.stopPropagation();
     }
-  }, /*#__PURE__*/React.createElement(WindowOption, {
+  }, Array.isArray(options) && options.map(function (i) {
+    if (!i.icon) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null);
+    } else {
+      return /*#__PURE__*/React.createElement(WindowOption, {
+        "aria-label": i === null || i === void 0 ? void 0 : i['aria-label'],
+        icon: i === null || i === void 0 ? void 0 : i.icon,
+        onClick: i === null || i === void 0 ? void 0 : i.onClick,
+        danger: i === null || i === void 0 ? void 0 : i.danger
+      });
+    }
+  }), /*#__PURE__*/React.createElement(WindowOption, {
     "aria-label": "\u5206\u4EAB\u7A97\u53E3",
     icon: /*#__PURE__*/React.createElement(ShareAltOutlined, null),
     onClick: onShareWindow
@@ -212,4 +224,6 @@ var Window = observer(function (props) {
     }
   })))), /*#__PURE__*/React.createElement(WindowBody, null, children)));
 });
+var Window = WindowComponent;
+Window.WindowOption = WindowOption;
 export default Window;

package/dist/Window/WindowOption.d.ts

@@ -1,8 +1,7 @@
 import React, { HtmlHTMLAttributes, ReactNode } from 'react';
-type WindowOptionProps = {
+export type WindowOptionProps = {
     icon: ReactNode;
     color?: string;
     danger?: boolean;
 } & HtmlHTMLAttributes<HTMLSpanElement>;
 export default function WindowOption(props: WindowOptionProps): React.JSX.Element;
-export {};

package/dist/Window/WindowStore.d.ts

@@ -31,6 +31,11 @@ export default class WindowStore {
     isClosed: boolean;
     splitPanelVisible: boolean;
     onClosedHandler: ((id: string) => void) | undefined;
+    animationDurationClose: string;
+    animationDurationMinimize: string;
+    animationDurationFullscreen: string;
+    animationDurationNormal: string;
+    animationEasing: string;
     constructor(id: string, onClosedHandler?: (id: string) => void);
     fullscreenWindow(func?: () => void): void;
     fullscreenExitWindow(): void;

package/dist/Window/WindowStore.js

@@ -34,6 +34,11 @@ var WindowStore = /*#__PURE__*/function () {
     _defineProperty(this, "isClosed", false);
     _defineProperty(this, "splitPanelVisible", false);
     _defineProperty(this, "onClosedHandler", void 0);
+    _defineProperty(this, "animationDurationClose", '0.3s');
+    _defineProperty(this, "animationDurationMinimize", '0.3s');
+    _defineProperty(this, "animationDurationFullscreen", '0.3s');
+    _defineProperty(this, "animationDurationNormal", '0.3s');
+    _defineProperty(this, "animationEasing", 'ease-in-out');
     makeObservable(this, {
       width: observable,
       height: observable,
@@ -46,6 +51,11 @@ var WindowStore = /*#__PURE__*/function () {
       isTransition: observable,
       isResizing: observable,
       isClosed: observable,
+      animationDurationClose: observable,
+      animationDurationMinimize: observable,
+      animationDurationFullscreen: observable,
+      animationDurationNormal: observable,
+      animationEasing: observable,
       fullscreenExitWindow: action,
       fullscreenWindow: action,
       control: action,
@@ -216,7 +226,7 @@ var WindowStore = /*#__PURE__*/function () {
             zIndex: this.zIndex,
             transform: 'scale(0)',
             transformOrigin: 'center center',
-            transition: 'all 0.3s ease-in-out'
+            transition: "all ".concat(this.animationDurationClose, " ").concat(this.animationEasing)
           };
         case 'minimize':
           return {
@@ -227,7 +237,7 @@ var WindowStore = /*#__PURE__*/function () {
             zIndex: this.zIndex,
             transform: 'scale(0)',
             transformOrigin: 'left top',
-            transition: 'all 0.3s ease-in-out'
+            transition: "all ".concat(this.animationDurationMinimize, " ").concat(this.animationEasing)
           };
         case 'fullscreen':
           return {
@@ -237,7 +247,7 @@ var WindowStore = /*#__PURE__*/function () {
             height: this.fullscreenPos.height + 'px',
             zIndex: this.zIndex,
             transform: 'none',
-            transition: 'all 0.3s ease-in-out'
+            transition: "all ".concat(this.animationDurationFullscreen, " ").concat(this.animationEasing)
           };
         case 'normal':
         default:
@@ -259,7 +269,7 @@ var WindowStore = /*#__PURE__*/function () {
               height: this.height + 'px',
               zIndex: this.zIndex,
               transform: 'none',
-              transition: 'all 0.3s ease-in-out'
+              transition: "all ".concat(this.animationDurationNormal, " ").concat(this.animationEasing)
             };
           }
       }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@kep-platform/basic-component",
-	"version": "1.0.22",
+	"version": "1.0.23",
 	"description": "A react library developed with dumi",
 	"license": "MIT",
 	"module": "dist/index.js",
@@ -87,5 +87,5 @@
 	"authors": [
 		"less-step-jss 1599925910@qq.com"
 	],
-	"gitHead": "15bac3be22032d6bc72a3d08502801bf3d1d5901"
+	"gitHead": "1405b843c379237db0900f5ed07a4c3dfc7a05f3"
 }

package/dist/ViewPort/Ripple.d.ts

@@ -1,15 +0,0 @@
-import React from 'react';
-type RippleType = {
-    id: number;
-    left: number;
-    top: number;
-};
-export declare const Ripple: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare class RippleManagerStore {
-    list: RippleType[];
-    constructor();
-    clearList(): void;
-    addRipple(left: number, top: number): void;
-    get rippleInfo(): React.JSX.Element[];
-}
-export {};

package/dist/ViewPort/Ripple.js

@@ -1,55 +0,0 @@
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _templateObject, _templateObject2;
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-import { makeAutoObservable } from 'mobx';
-import React from 'react';
-import styled, { keyframes } from 'styled-components';
-var rippleAnimation = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    from {\n        transform: scale(1);\n    }\n    to {\n\n        transform: scale(4);\n        opacity: 0;\n    }\n"])));
-export var Ripple = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    position: absolute;\n    border-radius: 50%;\n    width: 10px;\n    height: 10px;\n    background-color: #fff0;\n    & > div {\n        position: absolute;\n        left: 0;\n        top: 0;\n        width: 10px;\n        height: 10px;\n        background-color: #fff;\n        border-radius: 50%;\n        margin-left: -5px;\n        margin-top: -5px;\n        transform: scale(0);\n        animation: ", " 500ms linear;\n    }\n    & .first {\n    }\n    & .second {\n        animation-delay: 150ms;\n    }\n"])), rippleAnimation);
-export var RippleManagerStore = /*#__PURE__*/function () {
-  function RippleManagerStore() {
-    _classCallCheck(this, RippleManagerStore);
-    _defineProperty(this, "list", []);
-    makeAutoObservable(this);
-  }
-  _createClass(RippleManagerStore, [{
-    key: "clearList",
-    value: function clearList() {
-      this.list = [];
-    }
-  }, {
-    key: "addRipple",
-    value: function addRipple(left, top) {
-      this.list.push({
-        id: new Date().getTime(),
-        left: left,
-        top: top
-      });
-    }
-  }, {
-    key: "rippleInfo",
-    get: function get() {
-      return this.list.map(function (ripple) {
-        return /*#__PURE__*/React.createElement(Ripple, {
-          key: ripple.id,
-          style: {
-            left: ripple.left,
-            top: ripple.top,
-            zIndex: 10
-          }
-        }, /*#__PURE__*/React.createElement("div", {
-          className: "first"
-        }), /*#__PURE__*/React.createElement("div", {
-          className: "second"
-        }));
-      });
-    }
-  }]);
-  return RippleManagerStore;
-}();