@kep-platform/basic-component 0.0.28 → 0.0.32

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.
@@ -27,4 +27,5 @@ export declare const Column: import("styled-components/dist/types").IStyledCompo
27
27
  left?: string | undefined;
28
28
  right?: string | undefined;
29
29
  }>> & string & Omit<React.FC<ListItemProps>, keyof React.Component<any, {}, any>>;
30
- export default function Columns({ columns, rowData, rowIndex, isFlex, leftBase, columnsKey, ...columnsRestProps }: ColumnsProps): React.JSX.Element;
30
+ declare const _default: React.FunctionComponent<ColumnsProps>;
31
+ export default _default;
@@ -3,6 +3,7 @@ var _excluded = ["columns", "rowData", "rowIndex", "isFlex", "leftBase", "column
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 _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; }
5
5
  function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
6
+ import { observer } from 'mobx-react-lite';
6
7
  import React, { useMemo } from 'react';
7
8
  import styled, { css } from 'styled-components';
8
9
  import { List, ListItem } from "../List";
@@ -57,7 +58,7 @@ export var Column = styled(ListItem).withConfig({
57
58
  }
58
59
  });
59
60
  var displayColumnsCache = {};
60
- export default function Columns(_ref) {
61
+ export default observer(function Columns(_ref) {
61
62
  var columns = _ref.columns,
62
63
  rowData = _ref.rowData,
63
64
  _ref$rowIndex = _ref.rowIndex,
@@ -129,4 +130,4 @@ export default function Columns(_ref) {
129
130
  isFlex: isFlex
130
131
  }), (render === null || render === void 0 ? void 0 : render(rowData[dataIndex], rowData, rowIndex)) || rowData[dataIndex]);
131
132
  }));
132
- }
133
+ });
@@ -0,0 +1,6 @@
1
+ import React, { ReactNode } from 'react';
2
+ type DraggableProps = {
3
+ children: ReactNode;
4
+ };
5
+ export default function Draggable(props: DraggableProps): React.JSX.Element;
6
+ export {};
@@ -0,0 +1,34 @@
1
+ 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); }
2
+ 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); }
3
+ 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; }
4
+ 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; }
5
+ 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; }
6
+ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
7
+ 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); }
8
+ import { useDraggable } from '@dnd-kit/core';
9
+ import React from 'react';
10
+ export default function Draggable(props) {
11
+ var _useDraggable = useDraggable({
12
+ id: 'draggable'
13
+ }),
14
+ attributes = _useDraggable.attributes,
15
+ listeners = _useDraggable.listeners,
16
+ setNodeRef = _useDraggable.setNodeRef,
17
+ setActivatorNodeRef = _useDraggable.setActivatorNodeRef,
18
+ transform = _useDraggable.transform;
19
+ var style = transform ? {
20
+ transform: "translate3d(".concat(transform.x, "px, ").concat(transform.y, "px, 0)")
21
+ } : undefined;
22
+ return /*#__PURE__*/React.createElement("div", {
23
+ style: _objectSpread({
24
+ width: '200px',
25
+ height: '200px',
26
+ backgroundColor: 'pink'
27
+ }, style),
28
+ ref: setNodeRef
29
+ }, /*#__PURE__*/React.createElement("button", _extends({
30
+ type: "button"
31
+ }, listeners, attributes, {
32
+ ref: setActivatorNodeRef
33
+ }), props.children));
34
+ }
@@ -0,0 +1,6 @@
1
+ import React, { ReactNode } from 'react';
2
+ type DroppableProps = {
3
+ children: ReactNode;
4
+ };
5
+ export default function Droppable(props: DroppableProps): React.JSX.Element;
6
+ export {};
@@ -0,0 +1,16 @@
1
+ import { useDroppable } from '@dnd-kit/core';
2
+ import React from 'react';
3
+ export default function Droppable(props) {
4
+ var _useDroppable = useDroppable({
5
+ id: 'droppable'
6
+ }),
7
+ isOver = _useDroppable.isOver,
8
+ setNodeRef = _useDroppable.setNodeRef;
9
+ var style = {
10
+ color: isOver ? 'green' : undefined
11
+ };
12
+ return /*#__PURE__*/React.createElement("div", {
13
+ ref: setNodeRef,
14
+ style: style
15
+ }, props.children);
16
+ }
File without changes
File without changes
@@ -0,0 +1,13 @@
1
+ import { DndContext } from '@dnd-kit/core';
2
+ import React from 'react';
3
+ import Draggable from "./Draggable";
4
+ import Droppable from "./Droppable";
5
+ export default (function () {
6
+ return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DndContext, {
7
+ onDragStart: function onDragStart() {}
8
+ }, /*#__PURE__*/React.createElement(DndContext, {
9
+ onDragEnd: function onDragEnd() {}
10
+ }, /*#__PURE__*/React.createElement(Draggable, null, "123"), /*#__PURE__*/React.createElement(Droppable, null, "456")), /*#__PURE__*/React.createElement(DndContext, {
11
+ onDragEnd: function onDragEnd() {}
12
+ }, /*#__PURE__*/React.createElement(Draggable, null, "123"), /*#__PURE__*/React.createElement(Droppable, null, "456"))));
13
+ });
package/dist/Grid/Row.js CHANGED
@@ -47,7 +47,6 @@ var Row = function Row(props) {
47
47
  return child;
48
48
  }
49
49
  } else {
50
- console.warn('行组件内部只能渲染列组件');
51
50
  return false;
52
51
  }
53
52
  }));
@@ -77,6 +77,6 @@ export function Popup(props) {
77
77
  visible: visible,
78
78
  ref: popupBox
79
79
  }, content), /*#__PURE__*/React.cloneElement(children, mergeProps));
80
- } else console.warn('PopupMenu需要一个触发元素!');
80
+ }
81
81
  }
82
82
  export default PopupBox;
@@ -17,5 +17,7 @@ export type TreeProps = {
17
17
  bordered?: boolean;
18
18
  groupBy?: string | null;
19
19
  };
20
- declare const Tree: React.FC<TreeProps>;
20
+ declare const Tree: (({ treeData, columns, fieldNames, title: treeTitle, titleWidth, titleRender, selectedKeys, expandedKeys, isFlex, onSelect, onExpand, contextMenuRender, onContextMenuItemSelect, multiple, bordered, }: TreeProps) => React.JSX.Element) & {
21
+ displayName: string;
22
+ };
21
23
  export default Tree;
package/dist/Tree/Tree.js CHANGED
@@ -2,7 +2,8 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
2
2
  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; }
3
3
  function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
4
4
  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); }
5
- import React, { useMemo, useRef } from 'react';
5
+ import { observer } from 'mobx-react-lite';
6
+ import React, { useCallback, useMemo, useRef } from 'react';
6
7
  import styled, { css } from 'styled-components';
7
8
  import { BoxShadowBox } from "../BoxShadowBox";
8
9
  import { Column, Columns } from "../Columns";
@@ -40,7 +41,7 @@ var TreeHeader = styled('div').withConfig({
40
41
  }
41
42
  }, Column, MainArea);
42
43
  var rootLevel = -1;
43
- var Tree = function Tree(_ref) {
44
+ var Tree = observer(function (_ref) {
44
45
  var treeData = _ref.treeData,
45
46
  _ref$columns = _ref.columns,
46
47
  columns = _ref$columns === void 0 ? [] : _ref$columns,
@@ -125,19 +126,20 @@ var Tree = function Tree(_ref) {
125
126
  return newColumns;
126
127
  }, [columns, fieldNames]);
127
128
  var boxShadowBox = useRef(null);
129
+ var onScrollHandler = useCallback(function (e) {
130
+ var treeContainer = e.target;
131
+ if (boxShadowBox.current) {
132
+ if (treeContainer.scrollLeft === 0) {
133
+ boxShadowBox.current.style.opacity = '0';
134
+ } else {
135
+ boxShadowBox.current.style.opacity = '1';
136
+ }
137
+ boxShadowBox.current.style.left = treeContainer.scrollLeft + titleWidth + 'px';
138
+ }
139
+ }, [titleWidth]);
128
140
  /* 树组件的结构其实比较简单,就是一个树标题(TableMode下),然后树节点形成的列表 */
129
141
  return /*#__PURE__*/React.createElement(TreeContainer, {
130
- onScroll: function onScroll(e) {
131
- var treeContainer = e.target;
132
- if (boxShadowBox.current) {
133
- if (treeContainer.scrollLeft === 0) {
134
- boxShadowBox.current.style.opacity = '0';
135
- } else {
136
- boxShadowBox.current.style.opacity = '1';
137
- }
138
- boxShadowBox.current.style.left = treeContainer.scrollLeft + titleWidth + 'px';
139
- }
140
- },
142
+ onScroll: onScrollHandler,
141
143
  bordered: bordered
142
144
  }, isTableMode && !isFlex && /*#__PURE__*/React.createElement(BoxShadowBox, {
143
145
  ref: boxShadowBox,
@@ -160,7 +162,6 @@ var Tree = function Tree(_ref) {
160
162
  })), /*#__PURE__*/React.createElement(TreeBody, {
161
163
  direction: "column"
162
164
  }, /*#__PURE__*/React.createElement(TreeNodeController, {
163
- key: rootNode[fieldNames.key],
164
165
  selectedKeys: selectedKeys,
165
166
  onSelect: onSelect,
166
167
  expandedKeys: expandedKeys,
@@ -178,5 +179,5 @@ var Tree = function Tree(_ref) {
178
179
  onContextMenuItemSelect: onContextMenuItemSelect,
179
180
  titleRender: titleRender
180
181
  })));
181
- };
182
+ });
182
183
  export default Tree;
@@ -20,4 +20,6 @@ export type TreeNodeControllerProps = {
20
20
  export declare const nodeTypeMap: {
21
21
  virtual: string;
22
22
  };
23
- export declare const TreeNodeController: React.FC<TreeNodeControllerProps>;
23
+ export declare const TreeNodeController: (({ node, selectedKeys, width, isTableMode, fieldNames, columns, isFlex, onSelect, multiple, level, mainWidth, expandedKeys, onExpand, contextMenuRender, onContextMenuItemSelect, titleRender, }: TreeNodeControllerProps) => React.JSX.Element) & {
24
+ displayName: string;
25
+ };
@@ -5,6 +5,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
5
5
  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; } }
6
6
  function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
7
7
  import { CaretRightOutlined } from '@ant-design/icons';
8
+ import { observer } from 'mobx-react-lite';
8
9
  import React, { useCallback, useMemo, useState } from 'react';
9
10
  import styled, { css } from 'styled-components';
10
11
  import { Column, Columns } from "../Columns";
@@ -97,7 +98,7 @@ function groupTreeNodeByPropertyName(arr, propertyName, fieldNames) {
97
98
  export var nodeTypeMap = {
98
99
  virtual: 'virtual'
99
100
  };
100
- export var TreeNodeController = function TreeNodeController(_ref) {
101
+ export var TreeNodeController = observer(function (_ref) {
101
102
  var node = _ref.node,
102
103
  _ref$selectedKeys = _ref.selectedKeys,
103
104
  selectedKeys = _ref$selectedKeys === void 0 ? [] : _ref$selectedKeys,
@@ -249,4 +250,4 @@ export var TreeNodeController = function TreeNodeController(_ref) {
249
250
  });
250
251
  }));
251
252
  }));
252
- };
253
+ });
@@ -0,0 +1,3 @@
1
+ import React from 'react';
2
+ declare const _default: () => React.JSX.Element;
3
+ export default _default;
@@ -0,0 +1,190 @@
1
+ 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); }
2
+ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
3
+ 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."); }
4
+ 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); }
5
+ 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; }
6
+ 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; } }
7
+ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
8
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
9
+ 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); } }
10
+ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
11
+ 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; }
12
+ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
13
+ 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); }
14
+ import { Button, GlobalStyles, Tree } from "./..";
15
+ import { makeAutoObservable } from 'mobx';
16
+ import React, { useState } from 'react';
17
+ import styled from 'styled-components';
18
+ function findTreeNode(key, node) {
19
+ if (node.key === key) {
20
+ return node;
21
+ } else {
22
+ for (var i = 0; i < node.children.length; i++) {
23
+ var n = findTreeNode(key, node.children[i]);
24
+ if (n) {
25
+ return n;
26
+ }
27
+ }
28
+ }
29
+ }
30
+ var MyStore = /*#__PURE__*/function () {
31
+ function MyStore(treeData) {
32
+ _classCallCheck(this, MyStore);
33
+ _defineProperty(this, "root", {
34
+ key: Symbol('virtual root'),
35
+ children: []
36
+ });
37
+ makeAutoObservable(this);
38
+ if (treeData) {
39
+ this.root.children = treeData;
40
+ }
41
+ }
42
+ _createClass(MyStore, [{
43
+ key: "setTreeTitle",
44
+ value: function setTreeTitle(key, title) {
45
+ var node = findTreeNode(key, this.root);
46
+ if (node) {
47
+ node.title = title;
48
+ }
49
+ }
50
+ }, {
51
+ key: "setTreeName",
52
+ value: function setTreeName(key, name) {
53
+ var node = findTreeNode(key, this.root);
54
+ if (node) {
55
+ node.name = name;
56
+ }
57
+ }
58
+ }, {
59
+ key: "addNode",
60
+ value: function addNode(node) {
61
+ this.root.children.push(node);
62
+ }
63
+ }, {
64
+ key: "report",
65
+ get: function get() {
66
+ return JSON.stringify(this.root, null, 4);
67
+ }
68
+ }]);
69
+ return MyStore;
70
+ }();
71
+ var mystore = new MyStore([{
72
+ key: '1',
73
+ title: 'jss',
74
+ count: 1,
75
+ groupBy: 'count',
76
+ children: [{
77
+ key: '4',
78
+ title: 'skjdfkljasklfjkljdsklajfkl就是要长一的点点滴滴的点点滴滴哒哒哒哒哒哒哒哒哒哒哒哒哒哒',
79
+ children: []
80
+ }, {
81
+ key: '5',
82
+ title: 567,
83
+ children: []
84
+ }, {
85
+ key: '6',
86
+ title: 789,
87
+ children: []
88
+ }]
89
+ }, {
90
+ key: '2121212121212',
91
+ title: '2',
92
+ count: 1,
93
+ groupBy: 'count',
94
+ children: [{
95
+ key: '3',
96
+ title: 'jss',
97
+ name: 'jss',
98
+ children: [],
99
+ count: 2
100
+ }, {
101
+ key: '10',
102
+ title: 'jss',
103
+ name: 'jss',
104
+ children: [],
105
+ count: 2
106
+ }, {
107
+ key: '20',
108
+ title: '3',
109
+ children: [],
110
+ count: 2
111
+ }]
112
+ }]);
113
+ var Title = styled.div.withConfig({
114
+ displayName: "Title",
115
+ componentId: "basic-component-347b__sc-bc9b32-0"
116
+ })(["width:100%;text-align:center;"]);
117
+ export default (function () {
118
+ var _useState = useState([]),
119
+ _useState2 = _slicedToArray(_useState, 2),
120
+ selectedKeys = _useState2[0],
121
+ setSelectedKeys = _useState2[1];
122
+ var _useState3 = useState([]),
123
+ _useState4 = _slicedToArray(_useState3, 2),
124
+ expandedKeys = _useState4[0],
125
+ setExpandedKeys = _useState4[1];
126
+ return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(GlobalStyles, {
127
+ $css: []
128
+ }), /*#__PURE__*/React.createElement(Button, {
129
+ onClick: function onClick() {
130
+ mystore.setTreeName('2121212121212', 'name' + Math.random());
131
+ }
132
+ }, "\u70B9\u51FB"), /*#__PURE__*/React.createElement(Tree, {
133
+ title: /*#__PURE__*/React.createElement(Title, null, "\u6807\u8BC6"),
134
+ titleWidth: 400,
135
+ fieldNames: {
136
+ key: 'key',
137
+ title: 'treeTitle',
138
+ children: 'children'
139
+ },
140
+ contextMenuRender: function contextMenuRender(node) {
141
+ return [{
142
+ key: 'delete',
143
+ label: "\u5220\u9664 node".concat(node.key)
144
+ }, {
145
+ key: 'add',
146
+ label: '新增'
147
+ }, {
148
+ key: 'edit',
149
+ label: '编辑'
150
+ }];
151
+ },
152
+ treeData: mystore.root.children,
153
+ isFlex: false,
154
+ columns: [{
155
+ key: 'key',
156
+ title: '键值',
157
+ dataIndex: 'key',
158
+ align: 'center',
159
+ width: 400,
160
+ fixed: 'left'
161
+ }, {
162
+ key: 'title',
163
+ title: '标题',
164
+ dataIndex: 'title',
165
+ align: 'center',
166
+ width: 400
167
+ }, {
168
+ key: 'name',
169
+ title: '姓名',
170
+ dataIndex: 'name',
171
+ align: 'center'
172
+ }, {
173
+ key: 'count',
174
+ title: '数量',
175
+ dataIndex: 'count',
176
+ align: 'center'
177
+ }],
178
+ selectedKeys: selectedKeys,
179
+ expandedKeys: expandedKeys,
180
+ onSelect: function onSelect(selectedKeys) {
181
+ return setSelectedKeys(selectedKeys);
182
+ },
183
+ onExpand: function onExpand(expandedKeys) {
184
+ return setExpandedKeys(expandedKeys);
185
+ },
186
+ titleRender: function titleRender(node) {
187
+ return node.title;
188
+ }
189
+ }));
190
+ });
@@ -0,0 +1,15 @@
1
+ import React, { ReactNode } from 'react';
2
+ import WindowStore from './WindowStore';
3
+ export type WindowProps = {
4
+ window: WindowStore;
5
+ children: ReactNode;
6
+ title: ReactNode;
7
+ minimizePos?: {
8
+ left: number;
9
+ top: number;
10
+ };
11
+ };
12
+ declare const Window: ((props: WindowProps) => React.JSX.Element) & {
13
+ displayName: string;
14
+ };
15
+ export default Window;
@@ -0,0 +1,152 @@
1
+ import { CloseCircleOutlined, FullscreenExitOutlined, FullscreenOutlined, MinusCircleOutlined } from '@ant-design/icons';
2
+ import { observer } from 'mobx-react-lite';
3
+ import React from 'react';
4
+ import styled, { css } from 'styled-components';
5
+ import { Space } from "../Space";
6
+ import WindowController from "./WindowController";
7
+ import WindowOption from "./WindowOption";
8
+ var WindowContainer = styled.div.withConfig({
9
+ shouldForwardProp: function shouldForwardProp(prop) {
10
+ return !['isMinimize'].includes(prop);
11
+ }
12
+ }).withConfig({
13
+ displayName: "WindowContainer",
14
+ componentId: "basic-component-347b__sc-7yonmq-0"
15
+ })(["box-shadow:var(--kep-platform-box-shadow);position:absolute;padding:", ";border-radius:4px;background-color:#fff;overflow:hidden;"], function (props) {
16
+ return props.isMinimize ? '0px' : '6px';
17
+ });
18
+ var WindowEntity = styled.div.withConfig({
19
+ displayName: "WindowEntity",
20
+ componentId: "basic-component-347b__sc-7yonmq-1"
21
+ })(["width:100%;height:100%;"]);
22
+ var WindowHeader = styled.div.withConfig({
23
+ shouldForwardProp: function shouldForwardProp(prop) {
24
+ return !['isDragging'].includes(prop);
25
+ }
26
+ }).withConfig({
27
+ displayName: "WindowHeader",
28
+ componentId: "basic-component-347b__sc-7yonmq-2"
29
+ })(["height:40px;padding:6px;border-radius:4px;line-height:26px;font-size:16px;background-color:var(--kep-platform-color-primary);transition:margin 0.35s,opacity 0.7s,box-shadow 0.7s;position:relative;color:#fff;cursor:move;& > h5{color:#fff;}&:hover{opacity:0.9;}", ""], function (props) {
30
+ if (props.isDragging) {
31
+ return css(["margin:0 4px;"]);
32
+ }
33
+ });
34
+ var WindowHeaderOptions = styled.div.withConfig({
35
+ displayName: "WindowHeaderOptions",
36
+ componentId: "basic-component-347b__sc-7yonmq-3"
37
+ })(["position:absolute;right:6px;top:6px;"]);
38
+ var WindowBody = styled.div.withConfig({
39
+ displayName: "WindowBody",
40
+ componentId: "basic-component-347b__sc-7yonmq-4"
41
+ })(["overflow:auto;padding:12px;"]);
42
+ var WindowControllerLeft = styled(WindowController).withConfig({
43
+ displayName: "WindowControllerLeft",
44
+ componentId: "basic-component-347b__sc-7yonmq-5"
45
+ })(["position:absolute;width:6px;left:0;top:0;bottom:0;cursor:e-resize;"]);
46
+ var WindowControllerRight = styled(WindowController).withConfig({
47
+ displayName: "WindowControllerRight",
48
+ componentId: "basic-component-347b__sc-7yonmq-6"
49
+ })(["position:absolute;width:6px;height:100%;right:0;top:0;bottom:0;cursor:e-resize;"]);
50
+ var WindowControllerTop = styled(WindowController).withConfig({
51
+ displayName: "WindowControllerTop",
52
+ componentId: "basic-component-347b__sc-7yonmq-7"
53
+ })(["position:absolute;width:100%;height:6px;left:0;right:0;top:0;cursor:n-resize;"]);
54
+ var WindowControllerBottom = styled(WindowController).withConfig({
55
+ displayName: "WindowControllerBottom",
56
+ componentId: "basic-component-347b__sc-7yonmq-8"
57
+ })(["position:absolute;width:100%;height:6px;left:0;right:0;bottom:0;cursor:n-resize;"]);
58
+ var WindowControllerLeftTop = styled(WindowController).withConfig({
59
+ displayName: "WindowControllerLeftTop",
60
+ componentId: "basic-component-347b__sc-7yonmq-9"
61
+ })(["position:absolute;width:6px;height:6px;left:0;top:0;cursor:nwse-resize;"]);
62
+ var WindowControllerLeftBottom = styled(WindowController).withConfig({
63
+ displayName: "WindowControllerLeftBottom",
64
+ componentId: "basic-component-347b__sc-7yonmq-10"
65
+ })(["position:absolute;width:6px;height:6px;left:0;bottom:0;cursor:nesw-resize;"]);
66
+ var WindowControllerRightTop = styled(WindowController).withConfig({
67
+ displayName: "WindowControllerRightTop",
68
+ componentId: "basic-component-347b__sc-7yonmq-11"
69
+ })(["position:absolute;width:6px;height:6px;right:0;top:0;cursor:nesw-resize;"]);
70
+ var WindowControllerRightBottom = styled(WindowController).withConfig({
71
+ displayName: "WindowControllerRightBottom",
72
+ componentId: "basic-component-347b__sc-7yonmq-12"
73
+ })(["position:absolute;width:6px;height:6px;right:0;bottom:0;cursor:nwse-resize;"]);
74
+ var Window = observer(function (props) {
75
+ var window = props.window,
76
+ title = props.title,
77
+ children = props.children,
78
+ _props$minimizePos = props.minimizePos,
79
+ minimizePos = _props$minimizePos === void 0 ? {
80
+ left: 0,
81
+ top: 0
82
+ } : _props$minimizePos;
83
+ /* style 的原因是因为性能问题 */
84
+ return /*#__PURE__*/React.createElement(WindowContainer, {
85
+ style: window.style,
86
+ isMinimize: !!window.isMinimize,
87
+ onTransitionEnd: function onTransitionEnd(e) {
88
+ if (e.target === e.currentTarget && window.isClosed && e.nativeEvent.propertyName === 'transform') {
89
+ var _window$onClosedHandl;
90
+ (_window$onClosedHandl = window.onClosedHandler) === null || _window$onClosedHandl === void 0 || _window$onClosedHandl.call(window, window.id);
91
+ }
92
+ }
93
+ }, /*#__PURE__*/React.createElement(WindowControllerLeft, {
94
+ window: window,
95
+ type: "left"
96
+ }), /*#__PURE__*/React.createElement(WindowControllerRight, {
97
+ window: window,
98
+ type: "right"
99
+ }), /*#__PURE__*/React.createElement(WindowControllerTop, {
100
+ window: window,
101
+ type: "top"
102
+ }), /*#__PURE__*/React.createElement(WindowControllerBottom, {
103
+ window: window,
104
+ type: "bottom"
105
+ }), /*#__PURE__*/React.createElement(WindowControllerLeftTop, {
106
+ window: window,
107
+ type: "left-top"
108
+ }), /*#__PURE__*/React.createElement(WindowControllerLeftBottom, {
109
+ window: window,
110
+ type: "left-bottom"
111
+ }), /*#__PURE__*/React.createElement(WindowControllerRightTop, {
112
+ window: window,
113
+ type: "right-top"
114
+ }), /*#__PURE__*/React.createElement(WindowControllerRightBottom, {
115
+ window: window,
116
+ type: "right-bottom"
117
+ }), /*#__PURE__*/React.createElement(WindowEntity, null, /*#__PURE__*/React.createElement(WindowController, {
118
+ window: window,
119
+ type: "move"
120
+ }, /*#__PURE__*/React.createElement(WindowHeader, {
121
+ isDragging: window.isMoving
122
+ }, /*#__PURE__*/React.createElement("h5", null, title), /*#__PURE__*/React.createElement(WindowHeaderOptions, {
123
+ onPointerDown: function onPointerDown(e) {
124
+ e.stopPropagation();
125
+ }
126
+ }, /*#__PURE__*/React.createElement(Space, null, !window.fullscreen ? /*#__PURE__*/React.createElement(WindowOption, {
127
+ color: "var(--kep-platform-orange-4)",
128
+ icon: /*#__PURE__*/React.createElement(FullscreenOutlined, null),
129
+ onClick: function onClick() {
130
+ return window.fullscreenWindow();
131
+ }
132
+ }) : /*#__PURE__*/React.createElement(WindowOption, {
133
+ color: "var(--kep-platform-orange-4)",
134
+ icon: /*#__PURE__*/React.createElement(FullscreenExitOutlined, null),
135
+ onClick: function onClick() {
136
+ window.fullscreenExitWindow();
137
+ }
138
+ }), /*#__PURE__*/React.createElement(WindowOption, {
139
+ color: "var(--kep-platform-green-3)",
140
+ icon: /*#__PURE__*/React.createElement(MinusCircleOutlined, null),
141
+ onClick: function onClick() {
142
+ window.minimizeWindow(minimizePos);
143
+ }
144
+ }), /*#__PURE__*/React.createElement(WindowOption, {
145
+ onClick: function onClick() {
146
+ window.closeWindow();
147
+ },
148
+ icon: /*#__PURE__*/React.createElement(CloseCircleOutlined, null),
149
+ color: "var(--kep-platform-red)"
150
+ }))))), /*#__PURE__*/React.createElement(WindowBody, null, children)));
151
+ });
152
+ export default Window;
@@ -0,0 +1,10 @@
1
+ import React, { ReactNode } from 'react';
2
+ import WindowStore from './WindowStore';
3
+ export type WindowControllerType = 'left' | 'right' | 'top' | 'bottom' | 'left-top' | 'right-top' | 'left-bottom' | 'right-bottom' | 'move';
4
+ type WindowControllerProps = {
5
+ type: WindowControllerType;
6
+ window: WindowStore;
7
+ children?: ReactNode;
8
+ };
9
+ export default function WindowController(props: WindowControllerProps): React.JSX.Element;
10
+ export {};