@kep-platform/basic-component 1.0.12 → 1.0.13

package/dist/Button/Button.d.ts

@@ -6,7 +6,7 @@ export type ButtonProps = {
     children: ReactNode;
 } & HtmlHTMLAttributes<HTMLButtonElement>;
 declare const Button: React.ForwardRefExoticComponent<{
-    type?: "default" | "primary" | "danger" | undefined;
+    type?: "default" | "danger" | "primary" | undefined;
     size?: SizeType | undefined;
     children: ReactNode;
 } & React.HtmlHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;

package/dist/Tree/MainProperties.d.ts

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-export declare const MainArea: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("../Flex").FlexItemProps | keyof React.HtmlHTMLAttributes<HTMLDivElement>> & import("../Flex").FlexItemProps & React.HtmlHTMLAttributes<HTMLDivElement>, "ref"> & {
+export declare const MainArea: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HtmlHTMLAttributes<HTMLDivElement> | keyof import("../Flex").FlexItemProps> & import("../Flex").FlexItemProps & React.HtmlHTMLAttributes<HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
 }, never>> & string;
 type MainPropertyProps = {

package/dist/Window/Window.js

@@ -21,7 +21,7 @@ var WindowHeader = styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !['isDragging'].includes(prop);
   }
-})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n\theight: 40px;\n\tpadding: 6px 12px;\n\tline-height: 26px;\n\tfont-size: 16px;\n\tbackground-color: var(--kep-platform-color-bg-layout-header);\n\ttransition: margin 0.35s, opacity 0.7s, box-shadow 0.7s;\n\tposition: relative;\n\tcolor: #000;\n\tcursor: move;\n\t& > h5 {\n\t\tcolor: #000;\n\t}\n"])));
+})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n\theight: 40px;\n\tpadding: 6px 12px;\n\tline-height: 26px;\n\tfont-size: 16px;\n\tbackground-color: var(--kep-platform-color-bg-layout-header);\n\ttransition: margin 0.35s, opacity 0.7s, box-shadow 0.7s;\n\tposition: relative;\n\tcolor: #000;\n\t& > h5 {\n\t\tcolor: #000;\n\t}\n"])));
 var WindowHeaderOptions = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n\tposition: absolute;\n\tright: 0;\n\ttop: 0;\n\theight: 100%;\n\tdisplay: flex;\n\tz-index: 3;\n"])));
 var WindowBody = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n\toverflow: auto;\n\tpadding: 12px;\n\tflex: 1;\n"])));
 var WindowControllerLeft = styled(WindowController)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n\tposition: absolute;\n\twidth: 6px;\n\tleft: 0;\n\ttop: 0;\n\tbottom: 0;\n\tcursor: e-resize;\n\tz-index: 2;\n"])));

package/dist/Window/WindowStore.d.ts

@@ -30,6 +30,8 @@ export default class WindowStore {
     isMinimize: boolean;
     isClosed: boolean;
     onClosedHandler: ((id: string) => void) | undefined;
+    private cachedStyle?;
+    private lastStatus?;
     constructor(id: string, onClosedHandler?: (id: string) => void);
     fullscreenWindow(func?: () => void): void;
     fullscreenExitWindow(): void;

package/dist/Window/WindowStore.js

@@ -1,11 +1,13 @@
 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 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 _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); }
-import { action, computed, makeObservable, observable } from 'mobx';
+import { action, computed, makeObservable, observable, runInAction } from 'mobx';
 var WindowStore = /*#__PURE__*/function () {
   function WindowStore(id, onClosedHandler) {
     _classCallCheck(this, WindowStore);
@@ -33,6 +35,8 @@ var WindowStore = /*#__PURE__*/function () {
     _defineProperty(this, "isMinimize", false);
     _defineProperty(this, "isClosed", false);
     _defineProperty(this, "onClosedHandler", void 0);
+    _defineProperty(this, "cachedStyle", void 0);
+    _defineProperty(this, "lastStatus", void 0);
     makeObservable(this, {
       width: observable,
       height: observable,
@@ -101,33 +105,31 @@ var WindowStore = /*#__PURE__*/function () {
   }, {
     key: "controll",
     value: function controll(transform, type) {
+      var _this = this;
       var offsetTransform = this.calculateTransform(transform);
-      if (type === 'move') {
-        this.isMoving = true;
-        this.isResizing = false;
-      } else {
-        this.isMoving = false;
-        this.isResizing = true;
-      }
-      if (type.includes('left')) {
-        this.left = Math.round(this.left + offsetTransform.x);
-        this.width = Math.round(this.width - offsetTransform.x);
-      }
-      if (type.includes('right')) {
-        this.width = Math.round(this.width + offsetTransform.x);
-      }
-      if (type.includes('top')) {
-        this.top = Math.round(this.top + offsetTransform.y);
-        this.height = Math.round(this.height - offsetTransform.y);
-      }
-      if (type.includes('bottom')) {
-        this.height = Math.round(this.height + offsetTransform.y);
-      }
-      if (type.includes('move')) {
-        this.left = Math.round(this.left + offsetTransform.x);
-        this.top = Math.round(this.top + offsetTransform.y);
-      }
-      this.transform = transform;
+      runInAction(function () {
+        _this.isMoving = type === 'move';
+        _this.isResizing = type !== 'move';
+        if (type.includes('left')) {
+          _this.left = Math.round(_this.left + offsetTransform.x);
+          _this.width = Math.round(_this.width - offsetTransform.x);
+        }
+        if (type.includes('right')) {
+          _this.width = Math.round(_this.width + offsetTransform.x);
+        }
+        if (type.includes('top')) {
+          _this.top = Math.round(_this.top + offsetTransform.y);
+          _this.height = Math.round(_this.height - offsetTransform.y);
+        }
+        if (type.includes('bottom')) {
+          _this.height = Math.round(_this.height + offsetTransform.y);
+        }
+        if (type.includes('move')) {
+          _this.left = Math.round(_this.left + offsetTransform.x);
+          _this.top = Math.round(_this.top + offsetTransform.y);
+        }
+        _this.transform = transform;
+      });
     }
   }, {
     key: "endControll",
@@ -185,9 +187,14 @@ var WindowStore = /*#__PURE__*/function () {
   }, {
     key: "style",
     get: function get() {
+      var currentStatus = this.status;
+      if (this.cachedStyle && this.lastStatus === currentStatus) {
+        return this.cachedStyle;
+      }
+      var newStyle;
       switch (this.status) {
         case 'closed':
-          return {
+          newStyle = {
             left: this.left + 'px',
             top: this.top + 'px',
             width: this.width + 'px',
@@ -198,7 +205,7 @@ var WindowStore = /*#__PURE__*/function () {
             transition: 'all 0.3s ease-in-out'
           };
         case 'minimize':
-          return {
+          newStyle = {
             left: this.minimizePos.left + 'px',
             top: this.minimizePos.top + 'px',
             width: this.width + 'px',
@@ -209,7 +216,7 @@ var WindowStore = /*#__PURE__*/function () {
             transition: 'all 0.3s ease-in-out'
           };
         case 'fullscreen':
-          return {
+          newStyle = {
             left: this.fullscreenPos.left + 'px',
             top: this.fullscreenPos.top + 'px',
             width: this.fullscreenPos.width + 'px',
@@ -221,7 +228,7 @@ var WindowStore = /*#__PURE__*/function () {
         case 'normal':
         default:
           if (this.isMoving || this.isResizing) {
-            return {
+            newStyle = {
               left: this.left + 'px',
               top: this.top + 'px',
               width: this.width + 'px',
@@ -231,7 +238,7 @@ var WindowStore = /*#__PURE__*/function () {
               transition: 'none'
             };
           } else {
-            return {
+            newStyle = {
               left: this.left + 'px',
               top: this.top + 'px',
               width: this.width + 'px',
@@ -242,6 +249,11 @@ var WindowStore = /*#__PURE__*/function () {
             };
           }
       }
+      this.cachedStyle = _objectSpread(_objectSpread({}, newStyle), {}, {
+        willChange: 'transform, left, top, width, height'
+      });
+      this.lastStatus = currentStatus;
+      return this.cachedStyle;
     }
   }, {
     key: "info",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kep-platform/basic-component",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "description": "A react library developed with dumi",
   "license": "MIT",
   "module": "dist/index.js",
@@ -86,5 +86,5 @@
   "authors": [
     "less-step-jss 1599925910@qq.com"
   ],
-  "gitHead": "7783ce84a532de38c3ecb9d0691425dccf9d7545"
+  "gitHead": "cb302cb7c03530680e81816d3b178f98f4f0b299"
 }