@kep-platform/basic-component 0.0.44 → 0.0.46
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.
- package/dist/BoxShadowBox/BoxShadowBox.js +3 -4
- package/dist/Button/Button.js +13 -14
- package/dist/Columns/Columns.js +13 -17
- package/dist/Flex/flex.js +7 -11
- package/dist/Grid/Col.js +3 -4
- package/dist/Grid/Row.js +3 -4
- package/dist/Indent/Indent.js +3 -4
- package/dist/Input/Input.js +3 -4
- package/dist/List/List.js +5 -9
- package/dist/Menu/Menu.js +5 -9
- package/dist/Pagination/Pagination.js +3 -4
- package/dist/PopupBox/PopupBox.js +4 -5
- package/dist/Select/Select.js +12 -28
- package/dist/Space/Space.js +4 -8
- package/dist/Spin/Spin.js +4 -8
- package/dist/Table/Table.js +15 -46
- package/dist/Tag/Tag.js +3 -4
- package/dist/Tree/MainProperties.js +4 -8
- package/dist/Tree/Tree.js +7 -14
- package/dist/Tree/TreeNode.js +10 -20
- package/dist/Tree/test.js +3 -4
- package/dist/ViewPort/Ripple.js +4 -5
- package/dist/ViewPort/ViewPort.js +69 -32
- package/dist/ViewPort/ViewPortStore.d.ts +1 -0
- package/dist/ViewPort/ViewPortStore.js +7 -0
- package/dist/ViewPort/ViewPortWindow.d.ts +1 -0
- package/dist/ViewPort/ViewPortWindow.js +7 -1
- package/dist/ViewPort/test.js +3 -4
- package/dist/Window/Window.js +35 -56
- package/dist/Window/WindowController.d.ts +2 -2
- package/dist/Window/WindowController.js +7 -7
- package/dist/Window/WindowOption.js +4 -5
- package/dist/Window/WindowStore.d.ts +4 -19
- package/dist/Window/WindowStore.js +14 -1
- package/dist/Window/test.js +17 -44
- package/dist/__styles/GlobalStyles.js +3 -1
- package/package.json +7 -7
package/dist/Table/Table.js
CHANGED
@@ -1,5 +1,6 @@
|
|
1
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
2
|
var _excluded = ["render"];
|
3
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
|
3
4
|
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
5
|
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
6
|
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; }
|
@@ -18,6 +19,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
|
|
18
19
|
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; }
|
19
20
|
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; } }
|
20
21
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
22
|
+
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
21
23
|
import CaretDownOutlined from '@ant-design/icons/CaretDownOutlined';
|
22
24
|
import CaretUpOutlined from '@ant-design/icons/CaretUpOutlined';
|
23
25
|
import FilterOutlined from '@ant-design/icons/FilterOutlined';
|
@@ -32,59 +34,32 @@ import { List, ListItem } from "../List";
|
|
32
34
|
import { Pagination } from "../Pagination";
|
33
35
|
import { Popup } from "../PopupBox";
|
34
36
|
import { Space } from "../Space";
|
35
|
-
var TableContainer = styled.div
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
var
|
40
|
-
displayName: "TableTitle",
|
41
|
-
componentId: "basic-component-347b__sc-12r61fm-1"
|
42
|
-
})(["font-weight:600;padding:var(--kep-platform-padding-sm);"]);
|
43
|
-
var TableToolbar = styled.div.withConfig({
|
44
|
-
displayName: "TableToolbar",
|
45
|
-
componentId: "basic-component-347b__sc-12r61fm-2"
|
46
|
-
})(["text-align:right;padding:var(--kep-platform-padding-sm);"]);
|
47
|
-
var TableHeaderRow = styled(Columns).withConfig({
|
48
|
-
displayName: "TableHeaderRow",
|
49
|
-
componentId: "basic-component-347b__sc-12r61fm-3"
|
50
|
-
})(["border-bottom:var(--kep-platform-line-width) solid var(--kep-platform-color-table-border);position:sticky;top:0;left:0;z-index:calc(var(--kep-platform-z-index-fixed) + 5);& ", "{background-color:var(--kep-platform-header-bg);font-weight:600;position:sticky;&:not(:last-child):after{content:'';width:1px;height:calc(100% - 2 * var(--kep-platform-padding-xs));position:absolute;top:var(--kep-platform-padding-xs);right:0;background-color:var(--kep-platform-color-border-secondary);}}"], Column);
|
51
|
-
var TableBody = styled(List).withConfig({
|
52
|
-
displayName: "TableBody",
|
53
|
-
componentId: "basic-component-347b__sc-12r61fm-4"
|
54
|
-
})([""]);
|
37
|
+
var TableContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral([""])));
|
38
|
+
var TableTitle = styled.h5(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n font-weight: 600;\n padding: var(--kep-platform-padding-sm);\n"])));
|
39
|
+
var TableToolbar = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n text-align: right;\n padding: var(--kep-platform-padding-sm);\n"])));
|
40
|
+
var TableHeaderRow = styled(Columns)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n border-bottom: var(--kep-platform-line-width) solid var(--kep-platform-color-table-border);\n position: sticky;\n top: 0;\n left: 0;\n z-index: calc(var(--kep-platform-z-index-fixed) + 5);\n & ", " {\n background-color: var(--kep-platform-header-bg);\n font-weight: 600;\n position: sticky;\n &:not(:last-child):after {\n content: '';\n width: 1px;\n height: calc(100% - 2 * var(--kep-platform-padding-xs));\n position: absolute;\n top: var(--kep-platform-padding-xs);\n right: 0;\n background-color: var(--kep-platform-color-border-secondary);\n }\n }\n"])), Column);
|
41
|
+
var TableBody = styled(List)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral([""])));
|
55
42
|
var TableBodyRow = styled(ListItem).withConfig({
|
56
43
|
shouldForwardProp: function shouldForwardProp(prop) {
|
57
44
|
return !['isActive'].includes(prop);
|
58
45
|
}
|
59
|
-
})
|
60
|
-
displayName: "TableBodyRow",
|
61
|
-
componentId: "basic-component-347b__sc-12r61fm-5"
|
62
|
-
})(["& ", "{", "}"], Column, function (props) {
|
46
|
+
})(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n & ", " {\n ", "\n }\n"])), Column, function (props) {
|
63
47
|
if (props.isActive) {
|
64
|
-
return css(["background-color:var(--kep-platform-color-bg-active) !important
|
48
|
+
return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n background-color: var(--kep-platform-color-bg-active) !important;\n "])));
|
65
49
|
}
|
66
50
|
});
|
67
|
-
var TableContent = styled.div
|
68
|
-
displayName: "TableContent",
|
69
|
-
componentId: "basic-component-347b__sc-12r61fm-6"
|
70
|
-
})(["position:relative;overflow:auto;border-radius:var(--kep-platform-border-radius);box-shadow:var(--kep-platform-box-shadow-tertiary);", ""], function (props) {
|
51
|
+
var TableContent = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n position: relative;\n overflow: auto;\n border-radius: var(--kep-platform-border-radius);\n box-shadow: var(--kep-platform-box-shadow-tertiary);\n ", "\n"])), function (props) {
|
71
52
|
var _props$scroll;
|
72
53
|
if ((_props$scroll = props.scroll) !== null && _props$scroll !== void 0 && _props$scroll.y) {
|
73
|
-
return css(["height:", "px
|
54
|
+
return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n height: ", "px;\n "])), props.scroll.y);
|
74
55
|
}
|
75
56
|
});
|
76
|
-
var SortIconList = styled(List)
|
77
|
-
displayName: "SortIconList",
|
78
|
-
componentId: "basic-component-347b__sc-12r61fm-7"
|
79
|
-
})([""]);
|
57
|
+
var SortIconList = styled(List)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral([""])));
|
80
58
|
var SortIconListItem = styled(ListItem).withConfig({
|
81
59
|
shouldForwardProp: function shouldForwardProp(prop) {
|
82
60
|
return !['active'].includes(prop);
|
83
61
|
}
|
84
|
-
})
|
85
|
-
displayName: "SortIconListItem",
|
86
|
-
componentId: "basic-component-347b__sc-12r61fm-8"
|
87
|
-
})(["height:10px;line-height:10px;font-size:10px;cursor:pointer;user-select:none;color:", ";"], function (props) {
|
62
|
+
})(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n height: 10px;\n line-height: 10px;\n font-size: 10px;\n cursor: pointer;\n user-select: none;\n color: ", ";\n"])), function (props) {
|
88
63
|
return props.active ? 'var(--kep-platform-color-primary)' : 'currentColor';
|
89
64
|
});
|
90
65
|
var SortIconGroup = function SortIconGroup(_ref) {
|
@@ -115,14 +90,8 @@ var SortIconGroup = function SortIconGroup(_ref) {
|
|
115
90
|
active: sorter === 'desc'
|
116
91
|
}, /*#__PURE__*/React.createElement(CaretDownOutlined, null)));
|
117
92
|
};
|
118
|
-
var ColumnTitle = styled.div
|
119
|
-
|
120
|
-
componentId: "basic-component-347b__sc-12r61fm-9"
|
121
|
-
})([""]);
|
122
|
-
var FilterValue = styled.span.withConfig({
|
123
|
-
displayName: "FilterValue",
|
124
|
-
componentId: "basic-component-347b__sc-12r61fm-10"
|
125
|
-
})(["color:var(--kep-platform-color-primary);cursor:pointer;padding:var(--kep-platform-padding-xxs);border-radius:var(--kep-platform-border-radius-sm);&:hover{background-color:var(--kep-platform-color-bg-active);}"]);
|
93
|
+
var ColumnTitle = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral([""])));
|
94
|
+
var FilterValue = styled.span(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n color: var(--kep-platform-color-primary);\n cursor: pointer;\n padding: var(--kep-platform-padding-xxs);\n border-radius: var(--kep-platform-border-radius-sm);\n &:hover {\n background-color: var(--kep-platform-color-bg-active);\n }\n"])));
|
126
95
|
var ColumnTitleController = function ColumnTitleController(_ref2) {
|
127
96
|
var onSorterChange = _ref2.onSorterChange,
|
128
97
|
title = _ref2.title,
|
package/dist/Tag/Tag.js
CHANGED
@@ -1,13 +1,12 @@
|
|
1
1
|
var _excluded = ["children"];
|
2
|
+
var _templateObject;
|
2
3
|
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; }
|
3
4
|
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; }
|
5
|
+
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
4
6
|
import React from 'react';
|
5
7
|
import styled from 'styled-components';
|
6
8
|
import theme from "../__consts/theme";
|
7
|
-
var StyledTag = styled.span.
|
8
|
-
displayName: "StyledTag",
|
9
|
-
componentId: "basic-component-347b__sc-14fuyeq-0"
|
10
|
-
})(["background-color:", ";color:1px soild ", ";"], theme.defaultTagBackgroundColor, theme.defaultTagColor);
|
9
|
+
var StyledTag = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n background-color: ", ";\n color: 1px soild ", ";\n"])), theme.defaultTagBackgroundColor, theme.defaultTagColor);
|
11
10
|
var Tag = function Tag(_ref) {
|
12
11
|
var children = _ref.children,
|
13
12
|
rest = _objectWithoutProperties(_ref, _excluded);
|
@@ -1,14 +1,10 @@
|
|
1
|
+
var _templateObject, _templateObject2;
|
2
|
+
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
1
3
|
import React, { forwardRef } from 'react';
|
2
4
|
import styled from 'styled-components';
|
3
5
|
import { Flex, FlexItem } from "../Flex";
|
4
|
-
export var MainArea = styled(FlexItem)
|
5
|
-
|
6
|
-
componentId: "basic-component-347b__sc-u1pspr-0"
|
7
|
-
})(["overflow:hidden;position:sticky;left:0;z-index:20;align-self:stretch;display:flex;align-items:center;border-right:var(--kep-platform-line-width) var(--kep-platform-line-type) var(--kep-platform-color-border-secondary);border-bottom:var(--kep-platform-line-width) var(--kep-platform-line-type) var(--kep-platform-color-border-secondary);"]);
|
8
|
-
var PropertiesArea = styled(FlexItem).withConfig({
|
9
|
-
displayName: "PropertiesArea",
|
10
|
-
componentId: "basic-component-347b__sc-u1pspr-1"
|
11
|
-
})([""]);
|
6
|
+
export var MainArea = styled(FlexItem)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n overflow: hidden;\n position: sticky;\n left: 0;\n z-index: 20;\n align-self: stretch;\n display: flex;\n align-items: center;\n border-right: var(--kep-platform-line-width) var(--kep-platform-line-type)\n var(--kep-platform-color-border-secondary);\n border-bottom: var(--kep-platform-line-width) var(--kep-platform-line-type)\n var(--kep-platform-color-border-secondary);\n"])));
|
7
|
+
var PropertiesArea = styled(FlexItem)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([""])));
|
12
8
|
/* 有属性就渲染属性,没有属性就不处理 */
|
13
9
|
export var MainProperty = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
14
10
|
var mainWidth = _ref.mainWidth,
|
package/dist/Tree/Tree.js
CHANGED
@@ -1,7 +1,9 @@
|
|
1
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
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
|
2
3
|
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
4
|
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
4
5
|
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); }
|
6
|
+
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
5
7
|
import { observer } from 'mobx-react-lite';
|
6
8
|
import React, { useCallback, useMemo, useRef } from 'react';
|
7
9
|
import styled, { css } from 'styled-components';
|
@@ -15,29 +17,20 @@ var TreeContainer = styled('div').withConfig({
|
|
15
17
|
shouldForwardProp: function shouldForwardProp(prop) {
|
16
18
|
return !['bordered'].includes(prop);
|
17
19
|
}
|
18
|
-
})
|
19
|
-
displayName: "TreeContainer",
|
20
|
-
componentId: "basic-component-347b__sc-n4lkq9-0"
|
21
|
-
})(["position:relative;overflow-x:auto;border:1px solid var(--kep-platform-color-border-secondary);border-width:", ";"], function (props) {
|
20
|
+
})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: relative;\n overflow-x: auto;\n border: 1px solid var(--kep-platform-color-border-secondary);\n border-width: ", ";\n"])), function (props) {
|
22
21
|
return props.bordered ? '1px' : 0;
|
23
22
|
});
|
24
|
-
var TreeBody = styled(List)
|
25
|
-
displayName: "TreeBody",
|
26
|
-
componentId: "basic-component-347b__sc-n4lkq9-1"
|
27
|
-
})([""]);
|
23
|
+
var TreeBody = styled(List)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([""])));
|
28
24
|
var TreeHeader = styled('div').withConfig({
|
29
25
|
shouldForwardProp: function shouldForwardProp(prop) {
|
30
26
|
return !['width', 'isFlex'].includes(prop);
|
31
27
|
}
|
32
|
-
})
|
33
|
-
displayName: "TreeHeader",
|
34
|
-
componentId: "basic-component-347b__sc-n4lkq9-2"
|
35
|
-
})(["", " background-color:var(--kep-platform-header-bg);& ", ",& ", "{background-color:var(--kep-platform-header-bg);font-weight:600;position:sticky;}"], function (props) {
|
28
|
+
})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n ", "\n background-color: var(--kep-platform-header-bg);\n & ", ",& ", " {\n background-color: var(--kep-platform-header-bg);\n font-weight: 600;\n position: sticky;\n }\n"])), function (props) {
|
36
29
|
if (props.isFlex) {
|
37
|
-
return css(["width:100
|
30
|
+
return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n width: 100%;\n "])));
|
38
31
|
}
|
39
32
|
if (props.width) {
|
40
|
-
return css(["width:", "px
|
33
|
+
return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n width: ", "px;\n "])), props.width);
|
41
34
|
}
|
42
35
|
}, Column, MainArea);
|
43
36
|
var rootLevel = -1;
|
package/dist/Tree/TreeNode.js
CHANGED
@@ -1,9 +1,11 @@
|
|
1
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
|
1
2
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
2
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."); }
|
3
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); }
|
4
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; }
|
5
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; } }
|
6
7
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
8
|
+
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
7
9
|
import { CaretRightOutlined } from '@ant-design/icons';
|
8
10
|
import { observer } from 'mobx-react-lite';
|
9
11
|
import React, { useCallback, useMemo, useState } from 'react';
|
@@ -18,36 +20,24 @@ var ExpandedIcon = styled(CaretRightOutlined).withConfig({
|
|
18
20
|
shouldForwardProp: function shouldForwardProp(prop) {
|
19
21
|
return !['expanded'].includes(prop);
|
20
22
|
}
|
21
|
-
}).
|
22
|
-
displayName: "ExpandedIcon",
|
23
|
-
componentId: "basic-component-347b__sc-tzoomn-0"
|
24
|
-
})(["transition:transform 0.5s;display:block;user-select:none;", ";font-size:var(--kep-platform-font-size-sm);&:hover{color:var(--kep-platform-color-primary);}"], function (props) {
|
23
|
+
})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n transition: transform 0.5s;\n display: block;\n user-select: none;\n ", ";\n font-size: var(--kep-platform-font-size-sm);\n &:hover {\n color: var(--kep-platform-color-primary);\n }\n"])), function (props) {
|
25
24
|
if (props.expanded) {
|
26
|
-
return css(["transform:rotate(90deg)
|
25
|
+
return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n transform: rotate(90deg);\n "])));
|
27
26
|
}
|
28
27
|
});
|
29
|
-
var TitleArea = styled(FlexItem)
|
30
|
-
|
31
|
-
componentId: "basic-component-347b__sc-tzoomn-1"
|
32
|
-
})([""]);
|
33
|
-
var TreeNode = styled(ListItem).withConfig({
|
34
|
-
displayName: "TreeNode",
|
35
|
-
componentId: "basic-component-347b__sc-tzoomn-2"
|
36
|
-
})(["", " & ", ",& ", "{background-color:var(--kep-platform-color-bg-base);}&:hover{background-color:var(--kep-platform-color-bg-hover);& ", ",& ", "{background-color:var(--kep-platform-color-bg-hover);}& ", "{overflow-x:auto;& > ", "{width:auto;}}& ", "{overflow-x:auto;}}", ""], function (props) {
|
28
|
+
var TitleArea = styled(FlexItem)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral([""])));
|
29
|
+
var TreeNode = styled(ListItem)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n ", "\n & ", ",& ", " {\n background-color: var(--kep-platform-color-bg-base);\n }\n /* \u5904\u7406\u9F20\u6807\u79FB\u5165 */\n &:hover {\n background-color: var(--kep-platform-color-bg-hover);\n & ", ", & ", " {\n background-color: var(--kep-platform-color-bg-hover);\n }\n & ", " {\n overflow-x: auto;\n & > ", " {\n width: auto;\n }\n }\n & ", " {\n overflow-x: auto;\n }\n }\n /* \u5904\u7406\u8282\u70B9\u9009\u4E2D */\n ", "\n"])), function (props) {
|
37
30
|
if (props.width) {
|
38
|
-
return css(["width:", "px
|
31
|
+
return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n width: ", "px;\n "])), props.width);
|
39
32
|
}
|
40
33
|
}, Column, MainArea, Column, MainArea, MainArea, Flex, TitleArea, function (props) {
|
41
34
|
if (props.selected) {
|
42
|
-
return css(["background-color:var(--kep-platform-color-bg-active) !important
|
35
|
+
return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n background-color: var(--kep-platform-color-bg-active) !important;\n color: var(--kep-platform-color-text-active) !important;\n & ", ", & ", " {\n background-color: var(--kep-platform-color-bg-active) !important;\n color: var(--kep-platform-color-text-active) !important;\n }\n & ", " {\n overflow-x: auto;\n & > ", " {\n width: auto;\n }\n }\n & ", " {\n overflow-x: auto;\n }\n "])), Column, MainArea, MainArea, Flex, TitleArea);
|
43
36
|
}
|
44
37
|
});
|
45
|
-
var TreeNodeGroupNode = styled.li
|
46
|
-
displayName: "TreeNodeGroupNode",
|
47
|
-
componentId: "basic-component-347b__sc-tzoomn-3"
|
48
|
-
})(["height:40px;line-height:40px;background-color:var(--kep-platform-color-primary);color:var(--kep-platform-color-white);& span{color:var(--kep-platform-color-white) !important;}cursor:pointer;", ""], function (props) {
|
38
|
+
var TreeNodeGroupNode = styled.li(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n height: 40px;\n line-height: 40px;\n background-color: var(--kep-platform-color-primary);\n color: var(--kep-platform-color-white);\n & span {\n color: var(--kep-platform-color-white) !important;\n }\n cursor: pointer;\n ", "\n"])), function (props) {
|
49
39
|
if (props.width) {
|
50
|
-
return css(["width:", "px
|
40
|
+
return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n width: ", "px;\n "])), props.width);
|
51
41
|
}
|
52
42
|
});
|
53
43
|
var TreeNodeGroup = function TreeNodeGroup(props) {
|
package/dist/Tree/test.js
CHANGED
@@ -1,3 +1,4 @@
|
|
1
|
+
var _templateObject;
|
1
2
|
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
3
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
3
4
|
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."); }
|
@@ -5,6 +6,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
|
|
5
6
|
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
7
|
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
8
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
9
|
+
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
8
10
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
9
11
|
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
12
|
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
|
@@ -110,10 +112,7 @@ var mystore = new MyStore([{
|
|
110
112
|
count: 2
|
111
113
|
}]
|
112
114
|
}]);
|
113
|
-
var Title = styled.div
|
114
|
-
displayName: "Title",
|
115
|
-
componentId: "basic-component-347b__sc-bc9b32-0"
|
116
|
-
})(["width:100%;text-align:center;"]);
|
115
|
+
var Title = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: 100%;\n text-align: center;\n"])));
|
117
116
|
export default (function () {
|
118
117
|
var _useState = useState([]),
|
119
118
|
_useState2 = _slicedToArray(_useState, 2),
|
package/dist/ViewPort/Ripple.js
CHANGED
@@ -1,18 +1,17 @@
|
|
1
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
|
+
var _templateObject, _templateObject2;
|
2
3
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
3
4
|
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); } }
|
4
5
|
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
|
5
6
|
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
7
|
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
7
8
|
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); }
|
9
|
+
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
8
10
|
import { makeAutoObservable } from 'mobx';
|
9
11
|
import React from 'react';
|
10
12
|
import styled, { keyframes } from 'styled-components';
|
11
|
-
var rippleAnimation = keyframes(["from{transform:scale(1)
|
12
|
-
export var Ripple = styled.div
|
13
|
-
displayName: "Ripple",
|
14
|
-
componentId: "basic-component-347b__sc-zqrqyo-0"
|
15
|
-
})(["position:absolute;border-radius:50%;width:10px;height:10px;background-color:#fff0;& > div{position:absolute;left:0;top:0;width:10px;height:10px;background-color:#fff;border-radius:50%;margin-left:-5px;margin-top:-5px;transform:scale(0);animation:", " 500ms linear;}& .first{}& .second{animation-delay:150ms;}"], rippleAnimation);
|
13
|
+
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"])));
|
14
|
+
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);
|
16
15
|
export var RippleManagerStore = /*#__PURE__*/function () {
|
17
16
|
function RippleManagerStore() {
|
18
17
|
_classCallCheck(this, RippleManagerStore);
|
@@ -1,22 +1,20 @@
|
|
1
1
|
var _excluded = ["children", "viewPortStore", "onScroll", "onScale"],
|
2
2
|
_excluded2 = ["children", "viewPortStore"];
|
3
|
+
var _templateObject, _templateObject2;
|
3
4
|
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
5
|
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
6
|
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; }
|
7
|
+
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
6
8
|
import { DndContext, useDraggable } from '@dnd-kit/core';
|
9
|
+
import { useDebounce } from '@kep-platform/hooks';
|
10
|
+
import { runInAction } from 'mobx';
|
7
11
|
import { observer } from 'mobx-react-lite';
|
8
|
-
import React, { useEffect, useRef } from 'react';
|
12
|
+
import React, { useCallback, useEffect, useRef } from 'react';
|
9
13
|
import styled from 'styled-components';
|
10
14
|
import { RippleManagerStore } from "./Ripple";
|
11
15
|
import { ViewPortWindow } from "./ViewPortWindow";
|
12
|
-
var Container = styled.div
|
13
|
-
|
14
|
-
componentId: "basic-component-347b__sc-1qpmpop-0"
|
15
|
-
})(["position:relative;border:1px solid #eee;box-shadow:0 0 7px 0 inset #fefefe;"]);
|
16
|
-
var Content = styled.div.withConfig({
|
17
|
-
displayName: "Content",
|
18
|
-
componentId: "basic-component-347b__sc-1qpmpop-1"
|
19
|
-
})(["position:absolute;"]);
|
16
|
+
var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: relative;\n border: 1px solid #eee;\n box-shadow: 0 0 7px 0 inset #fefefe;\n"])));
|
17
|
+
var Content = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: absolute;\n"])));
|
20
18
|
var rippleManagerStore = new RippleManagerStore();
|
21
19
|
var ViewPortEntity = observer(function (props) {
|
22
20
|
var children = props.children,
|
@@ -25,18 +23,23 @@ var ViewPortEntity = observer(function (props) {
|
|
25
23
|
onScale = props.onScale,
|
26
24
|
rest = _objectWithoutProperties(props, _excluded);
|
27
25
|
var _useDraggable = useDraggable({
|
28
|
-
id: 'ViewPortEntity'
|
26
|
+
id: 'ViewPortEntity',
|
27
|
+
disabled: viewPortStore.isTransition
|
29
28
|
}),
|
30
29
|
setNodeRef = _useDraggable.setNodeRef,
|
31
30
|
attributes = _useDraggable.attributes,
|
32
31
|
listeners = _useDraggable.listeners,
|
33
32
|
setActivatorNodeRef = _useDraggable.setActivatorNodeRef,
|
34
33
|
transform = _useDraggable.transform;
|
35
|
-
var
|
34
|
+
var contentRef = useRef(null);
|
35
|
+
var containerRef = useRef(null);
|
36
|
+
var pointerDownTimer = useRef();
|
36
37
|
var createRipple = function createRipple(event) {
|
38
|
+
var _containerRef$current;
|
37
39
|
event.preventDefault();
|
38
40
|
event.stopPropagation();
|
39
|
-
var rect =
|
41
|
+
var rect = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.getBoundingClientRect();
|
42
|
+
if (!rect) return;
|
40
43
|
var left = event.clientX - rect.left;
|
41
44
|
var top = event.clientY - rect.top;
|
42
45
|
rippleManagerStore.addRipple(left, top);
|
@@ -53,7 +56,7 @@ var ViewPortEntity = observer(function (props) {
|
|
53
56
|
}
|
54
57
|
}, [transform]);
|
55
58
|
useEffect(function () {
|
56
|
-
var
|
59
|
+
var _contentRef$current;
|
57
60
|
function scaleHandler(e) {
|
58
61
|
e.stopPropagation();
|
59
62
|
e.preventDefault();
|
@@ -64,35 +67,69 @@ var ViewPortEntity = observer(function (props) {
|
|
64
67
|
}
|
65
68
|
onScale === null || onScale === void 0 || onScale(viewPortStore.transform.left, viewPortStore.transform.top, viewPortStore.scale, viewPortStore.ratio);
|
66
69
|
}
|
67
|
-
(
|
70
|
+
(_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 || _contentRef$current.addEventListener('wheel', scaleHandler, {
|
68
71
|
passive: false
|
69
72
|
});
|
70
73
|
return function () {
|
71
|
-
var
|
72
|
-
(
|
74
|
+
var _contentRef$current2;
|
75
|
+
(_contentRef$current2 = contentRef.current) === null || _contentRef$current2 === void 0 || _contentRef$current2.removeEventListener('wheel', scaleHandler);
|
73
76
|
};
|
74
77
|
}, []);
|
78
|
+
var debounceDoubleClick = useDebounce(function (e) {
|
79
|
+
//在transition期间禁止操作
|
80
|
+
if (viewPortStore.isTransition) {
|
81
|
+
return;
|
82
|
+
}
|
83
|
+
//双击的时候取消pointerDown的触发事件
|
84
|
+
if (pointerDownTimer.current) clearTimeout(pointerDownTimer.current);
|
85
|
+
pointerDownTimer.current = null;
|
86
|
+
createRipple(e);
|
87
|
+
var container = containerRef.current;
|
88
|
+
var _container$getBoundin = container.getBoundingClientRect(),
|
89
|
+
left = _container$getBoundin.left,
|
90
|
+
top = _container$getBoundin.top;
|
91
|
+
var offsetLeft = e.clientX - left;
|
92
|
+
var offsetTop = e.clientY - top;
|
93
|
+
if (viewPortStore.scale === 1) {
|
94
|
+
viewPortStore.unfocus();
|
95
|
+
} else viewPortStore.focus(offsetLeft, offsetTop);
|
96
|
+
}, 100);
|
97
|
+
var onContainerDoubleClickHandler = function onContainerDoubleClickHandler(e) {
|
98
|
+
debounceDoubleClick(e);
|
99
|
+
};
|
100
|
+
var onContainerTransitionEnd = useCallback(function () {
|
101
|
+
runInAction(function () {
|
102
|
+
viewPortStore.isTransition = false;
|
103
|
+
});
|
104
|
+
}, []);
|
105
|
+
var onContentPointerDownHandler = useCallback(function (e) {
|
106
|
+
if (viewPortStore.isTransition) return;
|
107
|
+
//鼠标点击的时候,先清除定时器,然后再异步触发pointerDown操作,这样保证doubleClick的优先级高于pointerDown
|
108
|
+
if (pointerDownTimer.current) clearTimeout(pointerDownTimer.current);
|
109
|
+
pointerDownTimer.current = setTimeout(function () {
|
110
|
+
var _onPointerDown, _ref;
|
111
|
+
listeners === null || listeners === void 0 || (_onPointerDown = (_ref = listeners).onPointerDown) === null || _onPointerDown === void 0 || _onPointerDown.call(_ref, e);
|
112
|
+
}, 0);
|
113
|
+
}, [listeners]);
|
114
|
+
var onContentPointerUpHandler = useCallback(function (e) {
|
115
|
+
var _onPointerUp, _ref2;
|
116
|
+
if (viewPortStore.isTransition) return;
|
117
|
+
listeners === null || listeners === void 0 || (_onPointerUp = (_ref2 = listeners).onPointerUp) === null || _onPointerUp === void 0 || _onPointerUp.call(_ref2, e);
|
118
|
+
}, [listeners]);
|
75
119
|
return /*#__PURE__*/React.createElement(Container, _extends({
|
76
120
|
style: viewPortStore.containerStyle,
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
var _container$getBoundin = container.getBoundingClientRect(),
|
81
|
-
left = _container$getBoundin.left,
|
82
|
-
top = _container$getBoundin.top;
|
83
|
-
var offsetLeft = e.clientX - left;
|
84
|
-
var offsetTop = e.clientY - top;
|
85
|
-
if (viewPortStore.scale === 1) {
|
86
|
-
viewPortStore.unfocus();
|
87
|
-
} else viewPortStore.focus(offsetLeft, offsetTop);
|
88
|
-
}
|
121
|
+
onDoubleClick: onContainerDoubleClickHandler,
|
122
|
+
onTransitionEnd: onContainerTransitionEnd,
|
123
|
+
ref: containerRef
|
89
124
|
}, rest), rippleManagerStore.rippleInfo, /*#__PURE__*/React.createElement(Content, _extends({
|
90
125
|
ref: function ref(dom) {
|
91
|
-
|
92
|
-
setNodeRef(
|
93
|
-
setActivatorNodeRef(
|
126
|
+
contentRef.current = dom;
|
127
|
+
setNodeRef(contentRef.current);
|
128
|
+
setActivatorNodeRef(contentRef.current);
|
94
129
|
}
|
95
|
-
}, attributes,
|
130
|
+
}, attributes, {
|
131
|
+
onPointerDown: onContentPointerDownHandler,
|
132
|
+
onPointerUp: onContentPointerUpHandler,
|
96
133
|
style: viewPortStore.contentStyle
|
97
134
|
}), children));
|
98
135
|
});
|
@@ -7,6 +7,7 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
|
|
7
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
8
|
import { makeAutoObservable } from 'mobx';
|
9
9
|
export var ViewPortStore = /*#__PURE__*/function () {
|
10
|
+
//在动画执行期间,禁止任何鼠标操作
|
10
11
|
function ViewPortStore(width, height, ratio) {
|
11
12
|
_classCallCheck(this, ViewPortStore);
|
12
13
|
_defineProperty(this, "transform", {
|
@@ -24,6 +25,7 @@ export var ViewPortStore = /*#__PURE__*/function () {
|
|
24
25
|
//缩放比例
|
25
26
|
_defineProperty(this, "isMoving", false);
|
26
27
|
_defineProperty(this, "maxZIndex", 1);
|
28
|
+
_defineProperty(this, "isTransition", false);
|
27
29
|
if (ratio) this.ratio = ratio;
|
28
30
|
if (width) this.width = width;
|
29
31
|
if (height) this.height = height;
|
@@ -39,12 +41,14 @@ export var ViewPortStore = /*#__PURE__*/function () {
|
|
39
41
|
value: function increaseScale() {
|
40
42
|
this.setScale(this.scale + this.scaleStep);
|
41
43
|
this.setTransform(this.transform.left, this.transform.top);
|
44
|
+
this.isTransition = true;
|
42
45
|
}
|
43
46
|
}, {
|
44
47
|
key: "decreaseScale",
|
45
48
|
value: function decreaseScale() {
|
46
49
|
this.setScale(this.scale - this.scaleStep);
|
47
50
|
this.setTransform(this.transform.left, this.transform.top);
|
51
|
+
this.isTransition = true;
|
48
52
|
}
|
49
53
|
}, {
|
50
54
|
key: "validScale",
|
@@ -97,12 +101,14 @@ export var ViewPortStore = /*#__PURE__*/function () {
|
|
97
101
|
value: function focus(left, top) {
|
98
102
|
this.setScale(1);
|
99
103
|
this.setTransform((1 - this.ratio) * left + this.offsetLeft, (1 - this.ratio) * top + this.offsetTop);
|
104
|
+
this.isTransition = true;
|
100
105
|
}
|
101
106
|
}, {
|
102
107
|
key: "unfocus",
|
103
108
|
value: function unfocus() {
|
104
109
|
this.setScale(1 / this.ratio);
|
105
110
|
this.setTransform(0, 0);
|
111
|
+
this.isTransition = true;
|
106
112
|
}
|
107
113
|
}, {
|
108
114
|
key: "move",
|
@@ -141,6 +147,7 @@ export var ViewPortStore = /*#__PURE__*/function () {
|
|
141
147
|
get: function get() {
|
142
148
|
return this.posInViewPort(0, 0, this.width, this.height);
|
143
149
|
}
|
150
|
+
|
144
151
|
/* 这个函数比较重要,因为你想要让content中的元素在视窗相对位置显示,这个函数会帮你计算偏移量和缩放量,直接得出你的元素应该在content中的偏移量 */
|
145
152
|
}, {
|
146
153
|
key: "posInViewPort",
|
@@ -34,6 +34,7 @@ export declare class ViewPortWindowStore extends WindowStore {
|
|
34
34
|
centerDisplay(): void;
|
35
35
|
fullscreenWindow(func?: () => void): void;
|
36
36
|
constructor(id: string, viewPort: ViewPortStore, onClosedHandler?: (id: string) => void);
|
37
|
+
get disabled(): boolean;
|
37
38
|
}
|
38
39
|
export declare const ViewPortWindow: React.FunctionComponent<WindowProps & {
|
39
40
|
window: ViewPortWindowStore;
|
@@ -34,7 +34,8 @@ export var ViewPortWindowStore = /*#__PURE__*/function (_WindowStore) {
|
|
34
34
|
style: override,
|
35
35
|
controll: override,
|
36
36
|
focus: override,
|
37
|
-
centerDisplay: action
|
37
|
+
centerDisplay: action,
|
38
|
+
disabled: override
|
38
39
|
});
|
39
40
|
return _this;
|
40
41
|
}
|
@@ -159,6 +160,11 @@ export var ViewPortWindowStore = /*#__PURE__*/function (_WindowStore) {
|
|
159
160
|
func === null || func === void 0 || func();
|
160
161
|
this.fullscreenPos = this.viewPortStore.viewPortRect;
|
161
162
|
}
|
163
|
+
}, {
|
164
|
+
key: "disabled",
|
165
|
+
get: function get() {
|
166
|
+
return this.viewPortStore.isTransition || this.isTransition;
|
167
|
+
}
|
162
168
|
}]);
|
163
169
|
return ViewPortWindowStore;
|
164
170
|
}(WindowStore);
|
package/dist/ViewPort/test.js
CHANGED
@@ -1,4 +1,6 @@
|
|
1
|
+
var _templateObject;
|
1
2
|
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); }
|
3
|
+
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
2
4
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
3
5
|
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); } }
|
4
6
|
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
|
@@ -43,10 +45,7 @@ var WindowManager = /*#__PURE__*/function () {
|
|
43
45
|
return WindowManager;
|
44
46
|
}();
|
45
47
|
var windowManager = new WindowManager();
|
46
|
-
var StyledViewPort = styled(ViewPort)
|
47
|
-
displayName: "StyledViewPort",
|
48
|
-
componentId: "basic-component-347b__sc-1b1xrkc-0"
|
49
|
-
})(["border:1px solid #eee;"]);
|
48
|
+
var StyledViewPort = styled(ViewPort)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n border: 1px solid #eee;\n"])));
|
50
49
|
export default observer(function Test() {
|
51
50
|
useEffect(function () {
|
52
51
|
function setWidthHeight() {
|