@kep-platform/basic-component 1.0.16 → 1.0.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/Button/Button.d.ts +1 -1
  2. package/dist/Button/Button.js +12 -14
  3. package/dist/ViewPort/ViewPortWindow.d.ts +6 -1
  4. package/dist/ViewPort/ViewPortWindow.js +27 -5
  5. package/dist/ViewPort/test.js +11 -2
  6. package/dist/Window/Window.d.ts +2 -1
  7. package/dist/Window/Window.js +41 -3
  8. package/dist/Window/WindowStore.d.ts +3 -0
  9. package/dist/Window/WindowStore.js +25 -1
  10. package/package.json +89 -88
package/dist/Button/Button.d.ts CHANGED
@@ -6,7 +6,7 @@ export type ButtonProps = {
6
6
  children: ReactNode;
7
7
  } & HtmlHTMLAttributes<HTMLButtonElement>;
8
8
  declare const Button: React.ForwardRefExoticComponent<{
9
- type?: "danger" | "default" | "primary" | undefined;
9
+ type?: "default" | "primary" | "danger" | undefined;
10
10
  size?: SizeType | undefined;
11
11
  children: ReactNode;
12
12
  } & React.HtmlHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
package/dist/Button/Button.js CHANGED
@@ -1,5 +1,5 @@
1
1
  var _excluded = ["type", "size"];
2
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
2
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
3
3
  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); }
4
4
  function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
5
5
  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."); }
@@ -21,33 +21,31 @@ var StyledButton = styled('button').withConfig({
21
21
  shouldForwardProp: function shouldForwardProp(prop) {
22
22
  return !['isActive'].includes(prop);
23
23
  }
24
- })(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n font-weight: ", ";\n outline: none;\n border-width: ", ";\n border-style: solid;\n padding: var(--kep-platform-padding-block) var(--kep-platform-padding-inline);\n font-size: var(--kep-platform-font-size);\n word-break: normal;\n white-space: nowrap;\n ", ";\n /* type \u63A7\u5236 */\n ", "\n /* \u662F\u5426\u70B9\u51FBactive */\n ", "\n /* size\u63A7\u5236 */\n ", "\n &:hover {\n opacity: 0.7;\n }\n"])), function (props) {
25
- return props.theme.buttonFontWeight || theme.fontWeight;
26
- }, function (props) {
27
- return props.theme.background || theme.borderWidth;
28
- }, function (props) {
29
- if (props.theme.buttonBorderRadius) return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n border-radius: ", ";\n "])), props.theme.buttonBorderRadius);else return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n border-radius: var(--kep-platform-border-radius);\n "])));
24
+ })(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n\tfont-weight: ", ";\n\toutline: none;\n\tborder-width: ", ";\n\tborder-style: solid;\n\tpadding: var(--kep-platform-padding-block) var(--kep-platform-padding-inline);\n\tfont-size: var(--kep-platform-font-size);\n\tword-break: normal;\n\twhite-space: nowrap;\n\tborder-radius: var(--kep-platform-border-radius);\n\n\t/* type \u63A7\u5236 */\n\t", "\n\t/* \u662F\u5426\u70B9\u51FBactive */\n ", "\n /* size\u63A7\u5236 */\n ", "\n &:hover {\n\t\topacity: 0.7;\n\t}\n"])), function () {
25
+ return theme.fontWeight;
26
+ }, function () {
27
+ return theme.borderWidth;
30
28
  }, function (props) {
31
29
  switch (props.type) {
32
30
  case 'danger':
33
- return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n color: var(--kep-platform-color-white);\n border-color: transparent;\n background-color: var(--kep-platform-red);\n "])));
31
+ return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n\t\t\t\t\tcolor: var(--kep-platform-color-white);\n\t\t\t\t\tborder-color: transparent;\n\t\t\t\t\tbackground-color: var(--kep-platform-red);\n\t\t\t\t"])));
34
32
  case 'default':
35
- return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n color: ", ";\n border-color: var(--kep-platform-color-border);\n background-color: ", ";\n &:hover {\n border-color: var(--kep-platform-color-primary);\n color: var(--kep-platform-color-primary);\n }\n "])), theme.color, theme.backgroundColor);
33
+ return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n\t\t\t\t\tcolor: ", ";\n\t\t\t\t\tborder-color: var(--kep-platform-color-border);\n\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t\t&:hover {\n\t\t\t\t\t\tborder-color: var(--kep-platform-color-primary);\n\t\t\t\t\t\tcolor: var(--kep-platform-color-primary);\n\t\t\t\t\t}\n\t\t\t\t"])), theme.color, theme.backgroundColor);
36
34
  case 'primary':
37
- return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n color: ", ";\n border-color: transparent;\n background-color: ", ";\n "])), theme.backgroundColor, theme.primaryColor);
35
+ return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n\t\t\t\t\tcolor: ", ";\n\t\t\t\t\tborder-color: transparent;\n\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t"])), theme.backgroundColor, theme.primaryColor);
38
36
  }
39
37
  }, function (props) {
40
38
  if (props.isActive) {
41
- if (props.type === 'danger') return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n animation: ", " 0.5s linear;\n "])), dangerShadowAnimation);else {
42
- return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n animation: ", " 0.5s linear;\n "])), defaultShadowAnimation);
39
+ if (props.type === 'danger') return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n\t\t\t\t\tanimation: ", " 0.5s linear;\n\t\t\t\t"])), dangerShadowAnimation);else {
40
+ return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n\t\t\t\t\tanimation: ", " 0.5s linear;\n\t\t\t\t"])), defaultShadowAnimation);
43
41
  }
44
42
  }
45
43
  }, function (props) {
46
44
  switch (props.size) {
47
45
  case 'small':
48
- return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n padding: var(--kep-platform-padding-block-sm) var(--kep-platform-padding-inline-sm);\n font-size: var(--kep-platform-font-size-sm);\n border-radius: var(--kep-platform-border-radius-sm);\n "])));
46
+ return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n\t\t\t\t\tpadding: var(--kep-platform-padding-block-sm) var(--kep-platform-padding-inline-sm);\n\t\t\t\t\tfont-size: var(--kep-platform-font-size-sm);\n\t\t\t\t\tborder-radius: var(--kep-platform-border-radius-sm);\n\t\t\t\t"])));
49
47
  case 'large':
50
- return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n padding: var(--kep-platform-padding-block-lg) var(--kep-platform-padding-inline-lg);\n font-size: var(--kep-platform-font-size-lg);\n border-radius: var(--kep-platform-border-radius-lg);\n "])));
48
+ return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n\t\t\t\t\tpadding: var(--kep-platform-padding-block-lg) var(--kep-platform-padding-inline-lg);\n\t\t\t\t\tfont-size: var(--kep-platform-font-size-lg);\n\t\t\t\t\tborder-radius: var(--kep-platform-border-radius-lg);\n\t\t\t\t"])));
51
49
  }
52
50
  });
53
51
  var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
package/dist/ViewPort/ViewPortWindow.d.ts CHANGED
@@ -6,6 +6,7 @@ import { WindowControllerType } from '../Window/WindowController';
6
6
  import { ViewPortStore } from './ViewPortStore';
7
7
  export declare class ViewPortWindowStore extends WindowStore {
8
8
  viewPortStore: ViewPortStore;
9
+ disableDefaultCenterDisplay: boolean;
9
10
  get style(): {
10
11
  left: string;
11
12
  top: string;
@@ -35,7 +36,11 @@ export declare class ViewPortWindowStore extends WindowStore {
35
36
  centerDisplay(): void;
36
37
  fullscreenWindow(func?: () => void): void;
37
38
  toggleWindow(): void;
38
- constructor(id: string, viewPort: ViewPortStore, onClosedHandler?: (id: string) => void);
39
+ onSplitWindowHandler(arr: string[], index: number): void;
40
+ constructor(id: string, viewPort: ViewPortStore, config?: {
41
+ disableDefaultCenterDisplay?: boolean;
42
+ onClosedHandler?: (id: string) => void;
43
+ });
39
44
  get disabled(): boolean;
40
45
  }
41
46
  export type ViewPortWindowProps = WindowProps & {
package/dist/ViewPort/ViewPortWindow.js CHANGED
@@ -16,7 +16,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
16
16
  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; }
17
17
  function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
18
18
  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); }
19
- import { action, makeObservable, override } from 'mobx';
19
+ import { action, makeObservable, observable, override } from 'mobx';
20
20
  import { observer } from 'mobx-react-lite';
21
21
  import React, { useEffect } from 'react';
22
22
  import { WindowStore } from "../Window";
@@ -24,18 +24,22 @@ import { default as Window } from "../Window/Window";
24
24
  export var ViewPortWindowStore = /*#__PURE__*/function (_WindowStore) {
25
25
  _inherits(ViewPortWindowStore, _WindowStore);
26
26
  var _super = _createSuper(ViewPortWindowStore);
27
- function ViewPortWindowStore(id, viewPort, onClosedHandler) {
27
+ function ViewPortWindowStore(id, viewPort, config) {
28
28
  var _this;
29
29
  _classCallCheck(this, ViewPortWindowStore);
30
- _this = _super.call(this, id, onClosedHandler);
30
+ _this = _super.call(this, id, config === null || config === void 0 ? void 0 : config.onClosedHandler);
31
31
  _defineProperty(_assertThisInitialized(_this), "viewPortStore", void 0);
32
+ _defineProperty(_assertThisInitialized(_this), "disableDefaultCenterDisplay", false);
32
33
  _this.viewPortStore = viewPort;
34
+ _this.fullscreenPos = viewPort.viewPortRect;
35
+ _this.disableDefaultCenterDisplay = (config === null || config === void 0 ? void 0 : config.disableDefaultCenterDisplay) || false;
33
36
  makeObservable(_assertThisInitialized(_this), {
34
37
  style: override,
35
38
  controll: override,
36
39
  focus: override,
37
40
  centerDisplay: action,
38
- disabled: override
41
+ disabled: override,
42
+ disableDefaultCenterDisplay: observable
39
43
  });
40
44
  return _this;
41
45
  }
@@ -163,6 +167,7 @@ export var ViewPortWindowStore = /*#__PURE__*/function (_WindowStore) {
163
167
  key: "fullscreenWindow",
164
168
  value: function fullscreenWindow(func) {
165
169
  this.resetState();
170
+ this.focus();
166
171
  this.fullscreen = true;
167
172
  func === null || func === void 0 || func();
168
173
  this.fullscreenPos = this.viewPortStore.viewPortRect;
@@ -190,6 +195,21 @@ export var ViewPortWindowStore = /*#__PURE__*/function (_WindowStore) {
190
195
  break;
191
196
  }
192
197
  }
198
+ }, {
199
+ key: "onSplitWindowHandler",
200
+ value: function onSplitWindowHandler(arr, index) {
201
+ var _this2 = this;
202
+ this.restoreWindow();
203
+ this.splitPanelVisible = false;
204
+ var leftPieces = arr.slice(0, index);
205
+ var leftWidth = leftPieces.reduce(function (acc, cur) {
206
+ return acc + _this2.calculatePercentageValue(cur, _this2.viewPortStore.viewPortRect.width);
207
+ }, 0);
208
+ this.left = leftWidth;
209
+ this.top = 0;
210
+ this.width = this.calculatePercentageValue(arr[index], this.viewPortStore.viewPortRect.width);
211
+ this.height = this.viewPortStore.viewPortRect.height;
212
+ }
193
213
  }, {
194
214
  key: "disabled",
195
215
  get: function get() {
@@ -202,7 +222,9 @@ export var ViewPortWindow = observer(function ViewPortWindow(props) {
202
222
  var window = props.window,
203
223
  rest = _objectWithoutProperties(props, _excluded);
204
224
  useEffect(function () {
205
- window.centerDisplay();
225
+ if (!window.disableDefaultCenterDisplay) {
226
+ window.centerDisplay();
227
+ }
206
228
  }, []);
207
229
  return /*#__PURE__*/React.createElement(Window, _extends({
208
230
  window: window
package/dist/ViewPort/test.js CHANGED
@@ -20,13 +20,22 @@ var viewPortStore = new ViewPortStore(600, 600, 1);
20
20
  var WindowManager = /*#__PURE__*/function () {
21
21
  function WindowManager() {
22
22
  _classCallCheck(this, WindowManager);
23
- _defineProperty(this, "windows", [new ViewPortWindowStore('jss', viewPortStore, this.closeWindowHanlder.bind(this)), new ViewPortWindowStore('jss12', viewPortStore, this.closeWindowHanlder.bind(this))]);
23
+ _defineProperty(this, "windows", [new ViewPortWindowStore('jss', viewPortStore, {
24
+ onClosedHandler: this.closeWindowHanlder.bind(this)
25
+ }), new ViewPortWindowStore('jss12', viewPortStore, {
26
+ onClosedHandler: this.closeWindowHanlder.bind(this)
27
+ })]);
24
28
  makeAutoObservable(this);
25
29
  }
26
30
  _createClass(WindowManager, [{
27
31
  key: "createWindow",
28
32
  value: function createWindow() {
29
- this.windows.push(new ViewPortWindowStore('jss' + Math.random(), viewPortStore, this.closeWindowHanlder.bind(this)));
33
+ var newWindow = new ViewPortWindowStore('jss' + Math.random(), viewPortStore, {
34
+ onClosedHandler: this.closeWindowHanlder.bind(this),
35
+ disableDefaultCenterDisplay: true
36
+ });
37
+ newWindow.onSplitWindowHandler(['66%', '34%'], 1);
38
+ this.windows.push(newWindow);
30
39
  }
31
40
  }, {
32
41
  key: "closeWindowHanlder",
package/dist/Window/Window.d.ts CHANGED
@@ -1,7 +1,8 @@
1
1
  import React, { ReactNode } from 'react';
2
+ import { ViewPortWindowStore } from '../ViewPort';
2
3
  import WindowStore from './WindowStore';
3
4
  export type WindowProps = {
4
- window: WindowStore;
5
+ window: WindowStore | ViewPortWindowStore;
5
6
  children: ReactNode;
6
7
  title: ReactNode;
7
8
  onFullscreenHandler?: () => void;
package/dist/Window/Window.js CHANGED
@@ -1,6 +1,7 @@
1
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
1
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
2
2
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
3
- import { BorderOutlined, CloseOutlined, CompressOutlined, MinusOutlined, ShareAltOutlined } from '@ant-design/icons';
3
+ import { BorderOutlined, CloseOutlined, CompressOutlined, MinusOutlined, ShareAltOutlined, SplitCellsOutlined } from '@ant-design/icons';
4
+ import { Popover } from 'antd';
4
5
  import { runInAction } from 'mobx';
5
6
  import { observer } from 'mobx-react-lite';
6
7
  import React, { useEffect, useRef } from 'react';
@@ -32,6 +33,15 @@ var WindowControllerLeftTop = styled(WindowController)(_templateObject10 || (_te
32
33
  var WindowControllerLeftBottom = styled(WindowController)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n\tposition: absolute;\n\twidth: 6px;\n\theight: 6px;\n\tleft: 0;\n\tbottom: 0;\n\tcursor: nesw-resize;\n\tz-index: 2;\n"])));
33
34
  var WindowControllerRightTop = styled(WindowController)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n\tposition: absolute;\n\twidth: 6px;\n\theight: 6px;\n\tright: 0;\n\ttop: 0;\n\tcursor: nesw-resize;\n\tz-index: 2;\n"])));
34
35
  var WindowControllerRightBottom = styled(WindowController)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n\tposition: absolute;\n\twidth: 6px;\n\theight: 6px;\n\tright: 0;\n\tbottom: 0;\n\tcursor: nwse-resize;\n\tz-index: 2;\n"])));
36
+ var WindowSplitPanelContainer = styled.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n\twidth: 324px;\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: 12px;\n"])));
37
+ var WindowSplitPanel = styled.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n\twidth: 100px;\n\theight: 55px;\n\ttransition: all 0.3s;\n\tdisplay: flex;\n\tgap: 2px;\n\n\t&:hover > div {\n\t\tborder-color: var(--kep-platform-color-primary);\n\t}\n"])));
38
+ var WindowSplitPanelItem = styled.div.withConfig({
39
+ shouldForwardProp: function shouldForwardProp(prop) {
40
+ return !['width'].includes(prop);
41
+ }
42
+ })(_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) {
43
+ return props.width;
44
+ });
35
45
  var Window = observer(function (props) {
36
46
  var window = props.window,
37
47
  title = props.title,
@@ -81,6 +91,21 @@ var Window = observer(function (props) {
81
91
  (_windowContainerRef$c6 = windowContainerRef.current) === null || _windowContainerRef$c6 === void 0 || _windowContainerRef$c6.removeEventListener('transitionend', stopTransition);
82
92
  };
83
93
  }, []);
94
+ var renderPanelItem = function renderPanelItem(arr) {
95
+ return arr.map(function (item, index) {
96
+ return /*#__PURE__*/React.createElement(WindowSplitPanelItem, {
97
+ key: index,
98
+ width: item,
99
+ onClick: function onClick() {
100
+ runInAction(function () {
101
+ var _window$onSplitWindow;
102
+ (_window$onSplitWindow = window.onSplitWindowHandler) === null || _window$onSplitWindow === void 0 || _window$onSplitWindow.call(window, arr, index);
103
+ });
104
+ }
105
+ });
106
+ });
107
+ };
108
+ var SplitPanel = /*#__PURE__*/React.createElement(WindowSplitPanelContainer, null, /*#__PURE__*/React.createElement(WindowSplitPanel, null, renderPanelItem(['50%', '50%'])), /*#__PURE__*/React.createElement(WindowSplitPanel, null, renderPanelItem(['66%', '34%'])), /*#__PURE__*/React.createElement(WindowSplitPanel, null, renderPanelItem(['34%', '66%'])), /*#__PURE__*/React.createElement(WindowSplitPanel, null, renderPanelItem(['33%', '34%', '33%'])), /*#__PURE__*/React.createElement(WindowSplitPanel, null, renderPanelItem(['25%', '50%', '25%'])), /*#__PURE__*/React.createElement(WindowSplitPanel, null, renderPanelItem(['50%', '25%', '25%'])));
84
109
 
85
110
  /* style 的原因是因为性能问题 */
86
111
  return /*#__PURE__*/React.createElement(WindowContainer, {
@@ -145,7 +170,20 @@ var Window = observer(function (props) {
145
170
  }, /*#__PURE__*/React.createElement(WindowOption, {
146
171
  icon: /*#__PURE__*/React.createElement(ShareAltOutlined, null),
147
172
  onClick: onShareWindow
148
- }), /*#__PURE__*/React.createElement(WindowOption, {
173
+ }), 'viewPortStore' in window && window.viewPortStore && /*#__PURE__*/React.createElement(Popover, {
174
+ open: window.splitPanelVisible,
175
+ onOpenChange: function onOpenChange(open) {
176
+ runInAction(function () {
177
+ window.splitPanelVisible = open;
178
+ });
179
+ },
180
+ placement: "bottom",
181
+ arrow: false,
182
+ color: "#EFEFF1",
183
+ content: SplitPanel
184
+ }, /*#__PURE__*/React.createElement(WindowOption, {
185
+ icon: /*#__PURE__*/React.createElement(SplitCellsOutlined, null)
186
+ })), /*#__PURE__*/React.createElement(WindowOption, {
149
187
  icon: /*#__PURE__*/React.createElement(MinusOutlined, null),
150
188
  onClick: function onClick() {
151
189
  if (window.disabled) return;
package/dist/Window/WindowStore.d.ts CHANGED
@@ -29,6 +29,7 @@ export default class WindowStore {
29
29
  };
30
30
  isMinimize: boolean;
31
31
  isClosed: boolean;
32
+ splitPanelVisible: boolean;
32
33
  onClosedHandler: ((id: string) => void) | undefined;
33
34
  constructor(id: string, onClosedHandler?: (id: string) => void);
34
35
  fullscreenWindow(func?: () => void): void;
@@ -46,6 +47,8 @@ export default class WindowStore {
46
47
  restoreWindow(): void;
47
48
  closeWindow(): void;
48
49
  focus(): void;
50
+ calculatePercentageValue(percentageStr: string, baseValue: number): number;
51
+ onSplitWindowHandler(arr: string[], index: number): void;
49
52
  get status(): WindowStatus;
50
53
  get style(): CSSProperties;
51
54
  get info(): string;
package/dist/Window/WindowStore.js CHANGED
@@ -32,6 +32,7 @@ var WindowStore = /*#__PURE__*/function () {
32
32
  });
33
33
  _defineProperty(this, "isMinimize", false);
34
34
  _defineProperty(this, "isClosed", false);
35
+ _defineProperty(this, "splitPanelVisible", false);
35
36
  _defineProperty(this, "onClosedHandler", void 0);
36
37
  makeObservable(this, {
37
38
  width: observable,
@@ -60,7 +61,8 @@ var WindowStore = /*#__PURE__*/function () {
60
61
  resetState: action,
61
62
  focus: action,
62
63
  info: computed,
63
- disabled: computed
64
+ disabled: computed,
65
+ splitPanelVisible: observable
64
66
  });
65
67
  this.id = id;
66
68
  this.onClosedHandler = onClosedHandler;
@@ -166,6 +168,28 @@ var WindowStore = /*#__PURE__*/function () {
166
168
  value: function focus() {
167
169
  this.zIndex++;
168
170
  }
171
+ }, {
172
+ key: "calculatePercentageValue",
173
+ value: function calculatePercentageValue(percentageStr, baseValue) {
174
+ // 移除空格和百分号，转换为数值
175
+ var num = parseFloat(percentageStr.replace(/\s+|%/g, '')) || 0;
176
+ return Math.round(num / 100 * baseValue);
177
+ }
178
+ }, {
179
+ key: "onSplitWindowHandler",
180
+ value: function onSplitWindowHandler(arr, index) {
181
+ var _this2 = this;
182
+ this.restoreWindow();
183
+ this.splitPanelVisible = false;
184
+ var leftPieces = arr.slice(0, index);
185
+ var leftWidth = leftPieces.reduce(function (acc, cur) {
186
+ return acc + _this2.calculatePercentageValue(cur, _this2.fullscreenPos.width);
187
+ }, 0);
188
+ this.left = leftWidth;
189
+ this.top = 0;
190
+ this.width = this.calculatePercentageValue(arr[index], this.fullscreenPos.width);
191
+ this.height = this.fullscreenPos.height;
192
+ }
169
193
  }, {
170
194
  key: "status",
171
195
  get: function get() {
package/package.json CHANGED
@@ -1,90 +1,91 @@
1
1
  {
2
- "name": "@kep-platform/basic-component",
3
- "version": "1.0.16",
4
- "description": "A react library developed with dumi",
5
- "license": "MIT",
6
- "module": "dist/index.js",
7
- "types": "dist/index.d.ts",
8
- "files": [
9
- "dist"
10
- ],
11
- "scripts": {
12
- "build": "father build",
13
- "build:watch": "father dev",
14
- "dev": "dumi dev",
15
- "docs:build": "dumi build",
16
- "docs:preview": "dumi preview",
17
- "doctor": "father doctor",
18
- "lint": "npm run lint:es && npm run lint:css",
19
- "lint:css": "stylelint \"{src,test}/**/*.{css,less}\"",
20
- "lint:es": "eslint \"{src,test}/**/*.{js,jsx,ts,tsx}\"",
21
- "prepare": "dumi setup",
22
- "prepublishOnly": "npm run build",
23
- "start": "npm run dev"
24
- },
25
- "commitlint": {
26
- "extends": [
27
- "@commitlint/config-conventional"
28
- ]
29
- },
30
- "lint-staged": {
31
- "*.{md,json}": [
32
- "prettier --write --no-error-on-unmatched-pattern"
33
- ],
34
- "*.{css,less}": [
35
- "stylelint --fix",
36
- "prettier --write"
37
- ],
38
- "*.{js,jsx}": [
39
- "eslint --fix",
40
- "prettier --write"
41
- ],
42
- "*.{ts,tsx}": [
43
- "eslint --fix",
44
- "prettier --parser=typescript --write"
45
- ]
46
- },
47
- "dependencies": {
48
- "@ant-design/icons": "^5.3.7",
49
- "@kep-platform/hooks": "^1.0.2",
50
- "color": "^4.2.3",
51
- "rc-pagination": "^4.1.0"
52
- },
53
- "devDependencies": {
54
- "@babel/runtime": "^7.24.6",
55
- "@commitlint/cli": "^17.1.2",
56
- "@commitlint/config-conventional": "^17.1.0",
57
- "@types/color": "^3.0.6",
58
- "@types/react": "^18.0.0",
59
- "@types/react-dom": "^18.0.0",
60
- "@umijs/lint": "^4.0.0",
61
- "babel-plugin-transform-remove-console": "^6.9.4",
62
- "dumi": "^2.3.0",
63
- "eslint": "^8.23.0",
64
- "father": "^4.1.0",
65
- "husky": "^8.0.1",
66
- "lint-staged": "^13.0.3",
67
- "prettier": "^2.7.1",
68
- "prettier-plugin-organize-imports": "^3.0.0",
69
- "prettier-plugin-packagejson": "^2.2.18",
70
- "react": "^18.0.0",
71
- "react-dom": "^18.0.0",
72
- "stylelint": "^14.9.1"
73
- },
74
- "peerDependencies": {
75
- "@dnd-kit/core": ">=6.0.0",
76
- "@dnd-kit/utilities": ">=3.0.1",
77
- "mobx": "^6.12.3",
78
- "mobx-react-lite": "^4.0.7",
79
- "react": ">=16.9.0",
80
- "react-dom": ">=16.9.0",
81
- "styled-components": "^6.1.11"
82
- },
83
- "publishConfig": {
84
- "access": "public"
85
- },
86
- "authors": [
87
- "less-step-jss 1599925910@qq.com"
88
- ],
89
- "gitHead": "4d69e95d349dad5a6bc640dfc7a655ac8f72b1ae"
2
+ "name": "@kep-platform/basic-component",
3
+ "version": "1.0.20",
4
+ "description": "A react library developed with dumi",
5
+ "license": "MIT",
6
+ "module": "dist/index.js",
7
+ "types": "dist/index.d.ts",
8
+ "files": [
9
+ "dist"
10
+ ],
11
+ "scripts": {
12
+ "build": "father build",
13
+ "build:watch": "father dev",
14
+ "dev": "dumi dev",
15
+ "docs:build": "dumi build",
16
+ "docs:preview": "dumi preview",
17
+ "doctor": "father doctor",
18
+ "lint": "npm run lint:es && npm run lint:css",
19
+ "lint:css": "stylelint \"{src,test}/**/*.{css,less}\"",
20
+ "lint:es": "eslint \"{src,test}/**/*.{js,jsx,ts,tsx}\"",
21
+ "prepare": "dumi setup",
22
+ "prepublishOnly": "npm run build",
23
+ "start": "npm run dev"
24
+ },
25
+ "commitlint": {
26
+ "extends": [
27
+ "@commitlint/config-conventional"
28
+ ]
29
+ },
30
+ "lint-staged": {
31
+ "*.{md,json}": [
32
+ "prettier --write --no-error-on-unmatched-pattern"
33
+ ],
34
+ "*.{css,less}": [
35
+ "stylelint --fix",
36
+ "prettier --write"
37
+ ],
38
+ "*.{js,jsx}": [
39
+ "eslint --fix",
40
+ "prettier --write"
41
+ ],
42
+ "*.{ts,tsx}": [
43
+ "eslint --fix",
44
+ "prettier --parser=typescript --write"
45
+ ]
46
+ },
47
+ "dependencies": {
48
+ "@ant-design/icons": "^5.3.7",
49
+ "@kep-platform/hooks": "^1.0.2",
50
+ "antd": "^5.8.3",
51
+ "color": "^4.2.3",
52
+ "rc-pagination": "^4.1.0"
53
+ },
54
+ "devDependencies": {
55
+ "@babel/runtime": "^7.24.6",
56
+ "@commitlint/cli": "^17.1.2",
57
+ "@commitlint/config-conventional": "^17.1.0",
58
+ "@types/color": "^3.0.6",
59
+ "@types/react": "^18.0.0",
60
+ "@types/react-dom": "^18.0.0",
61
+ "@umijs/lint": "^4.0.0",
62
+ "babel-plugin-transform-remove-console": "^6.9.4",
63
+ "dumi": "^2.3.0",
64
+ "eslint": "^8.23.0",
65
+ "father": "^4.1.0",
66
+ "husky": "^8.0.1",
67
+ "lint-staged": "^13.0.3",
68
+ "prettier": "^2.7.1",
69
+ "prettier-plugin-organize-imports": "^3.0.0",
70
+ "prettier-plugin-packagejson": "^2.2.18",
71
+ "react": "^18.0.0",
72
+ "react-dom": "^18.0.0",
73
+ "stylelint": "^14.9.1"
74
+ },
75
+ "peerDependencies": {
76
+ "@dnd-kit/core": ">=6.0.0",
77
+ "@dnd-kit/utilities": ">=3.0.1",
78
+ "mobx": "^6.12.3",
79
+ "mobx-react-lite": "^4.0.7",
80
+ "react": ">=16.9.0",
81
+ "react-dom": ">=16.9.0",
82
+ "styled-components": "^6.1.11"
83
+ },
84
+ "publishConfig": {
85
+ "access": "public"
86
+ },
87
+ "authors": [
88
+ "less-step-jss 1599925910@qq.com"
89
+ ],
90
+ "gitHead": "111251d1ba815452a258dd87095534e1a783cf7f"
90
91
  }