x-star-design 0.0.8 → 0.0.10
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.
|
@@ -1 +1,17 @@
|
|
|
1
|
-
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8"?>
|
|
2
|
+
<svg width="10px" height="10px" viewBox="0 0 10 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
3
|
+
<title>钻石@2x@1x</title>
|
|
4
|
+
<g id="融合题页面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
|
5
|
+
<g id="融合题-页面布局-方案二" transform="translate(-301.000000, -255.000000)" fill-rule="nonzero">
|
|
6
|
+
<g id="左侧" transform="translate(50.000000, 88.000000)">
|
|
7
|
+
<g id="钻石@2x" transform="translate(251.000000, 167.000000)">
|
|
8
|
+
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="10" height="10"></rect>
|
|
9
|
+
<path d="M0.872226562,3.85555664 L2.67777344,2.02777344 C2.72973904,1.9747577 2.8007639,1.94474903 2.875,1.94444336 L7.13055664,1.94444336 C7.20478935,1.94475164 7.27581021,1.9747601 7.32777344,2.02777344 L9.13333984,3.85555664 C9.23404118,3.95751045 9.24065669,4.11933664 9.14861328,4.22916992 L5.10693359,9.04027344 C5.08318856,9.06847295 5.04920637,9.0860752 5.01247406,9.08920202 C4.97574175,9.09232884 4.9392733,9.08072366 4.91110352,9.05694336 L4.89303711,9.04027344 L0.856953125,4.22916992 C0.764912348,4.11933417 0.771532091,3.95750788 0.872236328,3.85555664 L0.872226562,3.85555664 Z" id="路径" fill="#FFD491"></path>
|
|
10
|
+
<polygon id="路径" fill="#FFE7C1" points="5 1.94444336 3.05555664 4.02777344 6.94443359 4.02777344"></polygon>
|
|
11
|
+
<polygon id="路径" fill="#FFDBA3" points="3.05555664 4.02777344 5 9.44444336 6.94444336 4.02777344 3.05556641 4.02777344"></polygon>
|
|
12
|
+
<path d="M9.21348878,4.02777344 C9.21047396,4.07705252 9.20362683,4.11591585 9.19294739,4.1443634 C9.18226794,4.17281096 9.16099719,4.20884714 9.12913513,4.25247192 L5,9.44444336 L6.94444336,4.02777344 L9.21348878,4.02777344 Z M3.05555664,4.02777344 L0.792082109,4.02777344 C0.784532737,4.07548092 0.784532737,4.11105343 0.792082109,4.13449097 C0.799631481,4.15792851 0.821255153,4.18948816 0.856953125,4.22916992 L5,9.44444336 L3.05555664,4.02777344 Z" id="形状" fill="#FFA768"></path>
|
|
13
|
+
</g>
|
|
14
|
+
</g>
|
|
15
|
+
</g>
|
|
16
|
+
</g>
|
|
17
|
+
</svg>
|
|
@@ -3,11 +3,13 @@ interface DraggableLayoutProps {
|
|
|
3
3
|
className?: string;
|
|
4
4
|
style?: React.CSSProperties;
|
|
5
5
|
dividerClassName?: string;
|
|
6
|
-
|
|
7
|
-
|
|
6
|
+
dividerWidth?: string;
|
|
7
|
+
dividerChildren?: React.ReactNode;
|
|
8
|
+
defaultWidth?: string;
|
|
9
|
+
minWidth?: [string, string];
|
|
10
|
+
collapsible?: [boolean, boolean];
|
|
8
11
|
left: React.ReactNode;
|
|
9
12
|
right: React.ReactNode;
|
|
10
|
-
barWidth: number;
|
|
11
13
|
}
|
|
12
14
|
/**
|
|
13
15
|
* 可拖拽布局
|
|
@@ -4,105 +4,155 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
|
|
|
4
4
|
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
5
|
function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
|
|
6
6
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
7
|
-
import { useMemoizedFn
|
|
7
|
+
import { useMemoizedFn } from 'ahooks';
|
|
8
8
|
import classNames from 'classnames';
|
|
9
|
-
import React, {
|
|
10
|
-
import { useDelayedMount } from 'x-star-utils';
|
|
9
|
+
import React, { useRef, useState } from 'react';
|
|
11
10
|
import { prefix } from "../utils/global";
|
|
12
11
|
/**
|
|
13
12
|
* 可拖拽布局
|
|
14
13
|
*/
|
|
15
14
|
var DraggableLayout = function DraggableLayout(_ref) {
|
|
16
|
-
var
|
|
17
|
-
className = _ref$className === void 0 ? '' : _ref$className,
|
|
15
|
+
var className = _ref.className,
|
|
18
16
|
style = _ref.style,
|
|
19
17
|
dividerClassName = _ref.dividerClassName,
|
|
20
|
-
|
|
21
|
-
|
|
18
|
+
_ref$dividerWidth = _ref.dividerWidth,
|
|
19
|
+
dividerWidth = _ref$dividerWidth === void 0 ? '0%' : _ref$dividerWidth,
|
|
20
|
+
dividerChildren = _ref.dividerChildren,
|
|
21
|
+
_ref$defaultWidth = _ref.defaultWidth,
|
|
22
|
+
defaultWidth = _ref$defaultWidth === void 0 ? '50%' : _ref$defaultWidth,
|
|
23
|
+
_ref$minWidth = _ref.minWidth,
|
|
24
|
+
minWidth = _ref$minWidth === void 0 ? ['25%', '25%'] : _ref$minWidth,
|
|
25
|
+
_ref$collapsible = _ref.collapsible,
|
|
26
|
+
collapsible = _ref$collapsible === void 0 ? [true, true] : _ref$collapsible,
|
|
22
27
|
left = _ref.left,
|
|
23
|
-
right = _ref.right
|
|
24
|
-
|
|
25
|
-
var _useState = useState(300),
|
|
28
|
+
right = _ref.right;
|
|
29
|
+
var _useState = useState(false),
|
|
26
30
|
_useState2 = _slicedToArray(_useState, 2),
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
var
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
var
|
|
34
|
-
var
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
setWidth(defaultWidth / 100 * size.width);
|
|
31
|
+
dragging = _useState2[0],
|
|
32
|
+
setDragging = _useState2[1];
|
|
33
|
+
var transition = useRef(false);
|
|
34
|
+
var wrapperRef = useRef(null);
|
|
35
|
+
var dividerRef = useRef(null);
|
|
36
|
+
var leftRef = useRef(null);
|
|
37
|
+
var rightRef = useRef(null);
|
|
38
|
+
var enableTransition = useMemoizedFn(function () {
|
|
39
|
+
if (dividerRef.current && leftRef.current && rightRef.current) {
|
|
40
|
+
dividerRef.current.style.transition = 'color 0.3s, background 0.3s, border 0.3s, left 0.3s';
|
|
41
|
+
leftRef.current.style.transition = 'left 0.3s, right 0.3s';
|
|
42
|
+
rightRef.current.style.transition = 'left 0.3s, right 0.3s';
|
|
40
43
|
}
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
if (
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
44
|
+
});
|
|
45
|
+
var disableTransition = useMemoizedFn(function () {
|
|
46
|
+
if (dividerRef.current && leftRef.current && rightRef.current) {
|
|
47
|
+
dividerRef.current.style.transition = 'color 0.3s, background 0.3s, border 0.3s';
|
|
48
|
+
leftRef.current.style.transition = '';
|
|
49
|
+
rightRef.current.style.transition = '';
|
|
50
|
+
}
|
|
51
|
+
});
|
|
52
|
+
var dragHandler = useMemoizedFn(function (e) {
|
|
53
|
+
if (!transition.current && wrapperRef.current && dividerRef.current && leftRef.current && rightRef.current) {
|
|
54
|
+
if (collapsible[0] && e.offsetX < leftRef.current.offsetWidth / 2) {
|
|
55
|
+
if (leftRef.current.style.right !== '100%') {
|
|
56
|
+
// 左侧收起
|
|
57
|
+
enableTransition();
|
|
58
|
+
transition.current = true;
|
|
59
|
+
setTimeout(function () {
|
|
60
|
+
return transition.current = false;
|
|
61
|
+
}, 300);
|
|
62
|
+
dividerRef.current.classList.add("".concat(prefix, "draggable-divider-active"));
|
|
63
|
+
dividerRef.current.style.left = '0';
|
|
64
|
+
leftRef.current.style.left = "-".concat(minWidth[0]);
|
|
65
|
+
leftRef.current.style.right = '100%';
|
|
66
|
+
rightRef.current.style.left = dividerWidth;
|
|
67
|
+
rightRef.current.style.right = '0';
|
|
68
|
+
}
|
|
69
|
+
} else if (collapsible[1] && e.offsetX > wrapperRef.current.offsetWidth - rightRef.current.offsetWidth / 2) {
|
|
70
|
+
if (rightRef.current.style.left !== '100%') {
|
|
71
|
+
// 右侧收起
|
|
72
|
+
enableTransition();
|
|
73
|
+
transition.current = true;
|
|
74
|
+
setTimeout(function () {
|
|
75
|
+
return transition.current = false;
|
|
76
|
+
}, 300);
|
|
77
|
+
dividerRef.current.classList.add("".concat(prefix, "draggable-divider-active"));
|
|
78
|
+
dividerRef.current.style.left = "calc(100% - ".concat(dividerWidth, ")");
|
|
79
|
+
leftRef.current.style.left = '0';
|
|
80
|
+
leftRef.current.style.right = dividerWidth;
|
|
81
|
+
rightRef.current.style.left = '100%';
|
|
82
|
+
rightRef.current.style.right = "-".concat(minWidth[1]);
|
|
83
|
+
}
|
|
52
84
|
} else {
|
|
53
|
-
|
|
85
|
+
// 同时展示
|
|
86
|
+
if (leftRef.current.style.right === '100%' || rightRef.current.style.left === '100%') {
|
|
87
|
+
transition.current = true;
|
|
88
|
+
setTimeout(function () {
|
|
89
|
+
transition.current = false;
|
|
90
|
+
disableTransition();
|
|
91
|
+
}, 300);
|
|
92
|
+
}
|
|
93
|
+
var width = "min(max(".concat(e.offsetX, "px, calc(").concat(minWidth[0], " + ").concat(dividerWidth, " / 2)), calc(100% - ").concat(minWidth[1], " - ").concat(dividerWidth, " / 2))");
|
|
94
|
+
dividerRef.current.classList.remove("".concat(prefix, "draggable-divider-active"));
|
|
95
|
+
dividerRef.current.style.left = "calc(".concat(width, " - ").concat(dividerWidth, " / 2)");
|
|
96
|
+
leftRef.current.style.left = '0';
|
|
97
|
+
leftRef.current.style.right = "calc(100% - ".concat(width, " + ").concat(dividerWidth, " / 2)");
|
|
98
|
+
rightRef.current.style.left = "calc(".concat(width, " + ").concat(dividerWidth, " / 2)");
|
|
99
|
+
rightRef.current.style.right = '0';
|
|
54
100
|
}
|
|
55
101
|
}
|
|
56
|
-
}, [dragging, size, elementX, minWidth]);
|
|
57
|
-
var dragEnd = useMemoizedFn(function () {
|
|
58
|
-
setDragging(false);
|
|
59
|
-
if (wrapper.current) {
|
|
60
|
-
wrapper.current.style.cursor = 'unset';
|
|
61
|
-
wrapper.current.removeEventListener('mouseup', dragEnd);
|
|
62
|
-
}
|
|
63
102
|
});
|
|
64
103
|
var dragStart = useMemoizedFn(function () {
|
|
65
104
|
setDragging(true);
|
|
66
|
-
if (
|
|
67
|
-
|
|
68
|
-
|
|
105
|
+
if (wrapperRef.current) {
|
|
106
|
+
wrapperRef.current.style.cursor = 'col-resize';
|
|
107
|
+
wrapperRef.current.addEventListener('mousemove', dragHandler, {
|
|
108
|
+
capture: true,
|
|
109
|
+
passive: true
|
|
110
|
+
});
|
|
111
|
+
document.addEventListener('mouseup', function () {
|
|
112
|
+
setDragging(false);
|
|
113
|
+
if (wrapperRef.current) {
|
|
114
|
+
wrapperRef.current.style.cursor = 'unset';
|
|
115
|
+
wrapperRef.current.removeEventListener('mousemove', dragHandler, {
|
|
116
|
+
capture: true
|
|
117
|
+
});
|
|
118
|
+
}
|
|
119
|
+
}, {
|
|
120
|
+
capture: true,
|
|
121
|
+
passive: true,
|
|
122
|
+
once: true
|
|
123
|
+
});
|
|
69
124
|
}
|
|
70
125
|
});
|
|
71
|
-
var leftHide = width === 0;
|
|
72
|
-
var rightHide = width === (size === null || size === void 0 ? void 0 : size.width);
|
|
73
|
-
var _useDelayedMount = useDelayedMount(leftHide || rightHide, 300),
|
|
74
|
-
_useDelayedMount2 = _slicedToArray(_useDelayedMount, 1),
|
|
75
|
-
transition = _useDelayedMount2[0];
|
|
76
126
|
return /*#__PURE__*/React.createElement("div", {
|
|
77
|
-
ref:
|
|
78
|
-
className: classNames("".concat(prefix, "
|
|
127
|
+
ref: wrapperRef,
|
|
128
|
+
className: classNames("".concat(prefix, "draggable-layout"), className),
|
|
79
129
|
style: style
|
|
80
|
-
},
|
|
81
|
-
|
|
130
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
131
|
+
ref: dividerRef,
|
|
132
|
+
className: dividerClassName !== null && dividerClassName !== void 0 ? dividerClassName : classNames("".concat(prefix, "draggable-divider")),
|
|
82
133
|
style: {
|
|
83
|
-
left:
|
|
84
|
-
transition: transition ? 'all 0.3s' : 'color 0.3s, background-color 0.3s'
|
|
134
|
+
left: "calc(".concat(defaultWidth, " - ").concat(dividerWidth, " / 2)")
|
|
85
135
|
},
|
|
86
136
|
onDragStart: function onDragStart(e) {
|
|
87
137
|
return e.preventDefault();
|
|
88
138
|
},
|
|
89
139
|
onMouseDown: dragStart
|
|
90
|
-
},
|
|
91
|
-
className: "".concat(prefix, "
|
|
140
|
+
}, dividerChildren), dragging && /*#__PURE__*/React.createElement("div", {
|
|
141
|
+
className: "".concat(prefix, "draggable-mask")
|
|
92
142
|
}), /*#__PURE__*/React.createElement("div", {
|
|
93
|
-
|
|
143
|
+
ref: leftRef,
|
|
144
|
+
className: "".concat(prefix, "draggable-children"),
|
|
94
145
|
style: {
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
transition: transition ? 'all 0.3s' : ''
|
|
146
|
+
left: 0,
|
|
147
|
+
right: "calc(100% - ".concat(defaultWidth, " + ").concat(dividerWidth, " / 2)")
|
|
98
148
|
}
|
|
99
149
|
}, left), /*#__PURE__*/React.createElement("div", {
|
|
100
|
-
|
|
150
|
+
ref: rightRef,
|
|
151
|
+
className: "".concat(prefix, "draggable-children"),
|
|
101
152
|
style: {
|
|
102
|
-
left:
|
|
103
|
-
right:
|
|
104
|
-
transition: transition ? 'all 0.3s' : ''
|
|
153
|
+
left: "calc(".concat(defaultWidth, " + ").concat(dividerWidth, " / 2)"),
|
|
154
|
+
right: 0
|
|
105
155
|
}
|
|
106
|
-
}, right))
|
|
156
|
+
}, right));
|
|
107
157
|
};
|
|
108
158
|
export default DraggableLayout;
|
package/dist/styles/index.css
CHANGED
|
@@ -44,58 +44,42 @@
|
|
|
44
44
|
outline: unset;
|
|
45
45
|
}
|
|
46
46
|
|
|
47
|
-
.x-star-design-
|
|
48
|
-
cursor: col-resize;
|
|
49
|
-
position: relative;
|
|
50
|
-
background-color: #fafafa;
|
|
51
|
-
width: 16px;
|
|
52
|
-
background-size: cover;
|
|
53
|
-
background-position: center;
|
|
54
|
-
font-size: 32px;
|
|
55
|
-
color: #9f9f9f;
|
|
56
|
-
user-select: none;
|
|
57
|
-
height: 100%;
|
|
58
|
-
display: flex;
|
|
59
|
-
align-items: center;
|
|
60
|
-
justify-content: center;
|
|
61
|
-
transition: all 0.3s;
|
|
62
|
-
z-index: 91;
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
.x-star-design-draggableLayout {
|
|
47
|
+
.x-star-design-draggable-layout {
|
|
66
48
|
position: relative;
|
|
67
|
-
height: 100%;
|
|
68
49
|
width: 100%;
|
|
50
|
+
height: 100%;
|
|
69
51
|
overflow: hidden;
|
|
70
52
|
}
|
|
71
53
|
|
|
72
|
-
.x-star-design-
|
|
54
|
+
.x-star-design-draggable-divider {
|
|
73
55
|
position: absolute;
|
|
74
56
|
top: 0;
|
|
75
57
|
bottom: 0;
|
|
76
58
|
border-left: 4px transparent solid;
|
|
77
|
-
|
|
59
|
+
transform: translate(-2px);
|
|
60
|
+
z-index: 90;
|
|
61
|
+
transition: color 0.3s, background 0.3s, border 0.3s;
|
|
62
|
+
cursor: col-resize;
|
|
78
63
|
}
|
|
79
64
|
|
|
80
|
-
.x-star-design-
|
|
81
|
-
.x-star-design-
|
|
82
|
-
.x-star-design-
|
|
65
|
+
.x-star-design-draggable-divider:hover,
|
|
66
|
+
.x-star-design-draggable-divider:active,
|
|
67
|
+
.x-star-design-draggable-divider.x-star-design-draggable-divider-active {
|
|
83
68
|
border-left: 4px #1890ff solid;
|
|
84
|
-
cursor: col-resize;
|
|
85
69
|
}
|
|
86
70
|
|
|
87
|
-
.x-star-design-
|
|
71
|
+
.x-star-design-draggable-mask {
|
|
88
72
|
position: absolute;
|
|
89
73
|
inset: 0;
|
|
90
|
-
z-index:
|
|
74
|
+
z-index: 91;
|
|
91
75
|
}
|
|
92
76
|
|
|
93
|
-
.x-star-design-
|
|
77
|
+
.x-star-design-draggable-children {
|
|
94
78
|
position: absolute;
|
|
95
79
|
top: 0;
|
|
96
80
|
bottom: 0;
|
|
97
81
|
}
|
|
98
|
-
.x-star-design-
|
|
82
|
+
.x-star-design-draggable-children > * {
|
|
99
83
|
height: 100%;
|
|
100
84
|
}
|
|
101
85
|
|