@elliemae/ds-resizeable-container 2.3.0-alpha.9 → 2.3.0-next.3
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/cjs/Resizable.js +323 -0
- package/cjs/defaultProps.js +10 -0
- package/cjs/index.js +11 -0
- package/cjs/props.js +24 -0
- package/esm/Resizable.js +309 -0
- package/esm/defaultProps.js +6 -0
- package/esm/index.js +1 -0
- package/esm/props.js +20 -0
- package/package.json +25 -27
- package/{dist/types → types}/Resizable.d.ts +0 -0
- package/{dist/types → types}/defaultProps.d.ts +0 -0
- package/{dist/types → types}/index.d.ts +0 -0
- package/{dist/types → types}/props.d.ts +0 -0
- package/{dist/types → types}/tests/DSResizableContainer.events.test.d.ts +0 -0
- package/dist/cjs/Resizable.js +0 -314
- package/dist/cjs/Resizable.js.map +0 -7
- package/dist/cjs/defaultProps.js +0 -38
- package/dist/cjs/defaultProps.js.map +0 -7
- package/dist/cjs/index.js +0 -36
- package/dist/cjs/index.js.map +0 -7
- package/dist/cjs/props.js +0 -42
- package/dist/cjs/props.js.map +0 -7
- package/dist/esm/Resizable.js +0 -285
- package/dist/esm/Resizable.js.map +0 -7
- package/dist/esm/defaultProps.js +0 -9
- package/dist/esm/defaultProps.js.map +0 -7
- package/dist/esm/index.js +0 -7
- package/dist/esm/index.js.map +0 -7
- package/dist/esm/props.js +0 -13
- package/dist/esm/props.js.map +0 -7
package/dist/esm/Resizable.js
DELETED
|
@@ -1,285 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import React2, { useRef, useState, useEffect } from "react";
|
|
3
|
-
import { describe } from "react-desc";
|
|
4
|
-
import styled from "styled-components";
|
|
5
|
-
import { mapGap } from "@elliemae/ds-system";
|
|
6
|
-
import { Grid } from "@elliemae/ds-grid";
|
|
7
|
-
import { props as rprops } from "./props";
|
|
8
|
-
import { defaultProps } from "./defaultProps";
|
|
9
|
-
const safeDifference = 15;
|
|
10
|
-
const minDifference = 8;
|
|
11
|
-
const EVENT_TYPE = { MOUSE: "mouse", KEY: "arrows" };
|
|
12
|
-
const DIRECTION = {
|
|
13
|
-
L: "left",
|
|
14
|
-
R: "right",
|
|
15
|
-
U: "up",
|
|
16
|
-
D: "down"
|
|
17
|
-
};
|
|
18
|
-
function calcPosition(arrow, position) {
|
|
19
|
-
let offset;
|
|
20
|
-
switch (arrow) {
|
|
21
|
-
case DIRECTION.U:
|
|
22
|
-
offset = position - 3;
|
|
23
|
-
break;
|
|
24
|
-
case DIRECTION.D:
|
|
25
|
-
offset = position + 3;
|
|
26
|
-
break;
|
|
27
|
-
case DIRECTION.L:
|
|
28
|
-
offset = position - 3;
|
|
29
|
-
break;
|
|
30
|
-
case DIRECTION.R:
|
|
31
|
-
offset = position + 3;
|
|
32
|
-
break;
|
|
33
|
-
default:
|
|
34
|
-
offset = position;
|
|
35
|
-
}
|
|
36
|
-
return offset;
|
|
37
|
-
}
|
|
38
|
-
function cursorResolver(nextPx, px, isVertical) {
|
|
39
|
-
const orientation = {
|
|
40
|
-
vertical: "row-resize",
|
|
41
|
-
horizontal: "col-resize",
|
|
42
|
-
left: "w-resize",
|
|
43
|
-
right: "e-resize",
|
|
44
|
-
up: "n-resize",
|
|
45
|
-
down: "s-resize"
|
|
46
|
-
};
|
|
47
|
-
if (isVertical && nextPx && nextPx <= safeDifference + 1)
|
|
48
|
-
return orientation.up;
|
|
49
|
-
if (isVertical && px > safeDifference + 1)
|
|
50
|
-
return orientation.vertical;
|
|
51
|
-
if (isVertical && px <= safeDifference + 1)
|
|
52
|
-
return orientation.down;
|
|
53
|
-
if (!isVertical && nextPx && nextPx <= safeDifference + 1)
|
|
54
|
-
return orientation.left;
|
|
55
|
-
if (!isVertical && px <= safeDifference + 1)
|
|
56
|
-
return orientation.right;
|
|
57
|
-
if (!isVertical && px > safeDifference + 1)
|
|
58
|
-
return orientation.horizontal;
|
|
59
|
-
return isVertical ? orientation.vertical : orientation.horizontal;
|
|
60
|
-
}
|
|
61
|
-
function ResizableItemComponent({ innerRef, ...p }) {
|
|
62
|
-
return /* @__PURE__ */ React2.createElement(Grid, {
|
|
63
|
-
ref: innerRef,
|
|
64
|
-
...p
|
|
65
|
-
});
|
|
66
|
-
}
|
|
67
|
-
const ResizableGrid = styled(Grid)``;
|
|
68
|
-
const ResizableItem = styled(ResizableItemComponent)`
|
|
69
|
-
position: relative;
|
|
70
|
-
`;
|
|
71
|
-
const ResizableBar = styled.div`
|
|
72
|
-
position: absolute;
|
|
73
|
-
cursor: ${({ container, nextContainer, v }) => cursorResolver(nextContainer, container, v)};
|
|
74
|
-
|
|
75
|
-
${(props) => {
|
|
76
|
-
if (props.v) {
|
|
77
|
-
return `
|
|
78
|
-
bottom: calc(${mapGap(props.gutter)} * -0.5);
|
|
79
|
-
left: 0;
|
|
80
|
-
width: 100%;
|
|
81
|
-
height: 10px;
|
|
82
|
-
margin-bottom: -5px;
|
|
83
|
-
display: flex;
|
|
84
|
-
flex-direction: column;
|
|
85
|
-
justify-content:space-around;
|
|
86
|
-
align-items: center;
|
|
87
|
-
&:after{
|
|
88
|
-
width: 100%;
|
|
89
|
-
height: 1px;
|
|
90
|
-
display: block;
|
|
91
|
-
background: ${props.theme.colors.neutral["300"]};
|
|
92
|
-
content: '';
|
|
93
|
-
}
|
|
94
|
-
&:hover{
|
|
95
|
-
&:after{
|
|
96
|
-
background: ${props.theme.colors.brand["600"]};
|
|
97
|
-
}
|
|
98
|
-
}
|
|
99
|
-
`;
|
|
100
|
-
}
|
|
101
|
-
return `
|
|
102
|
-
top: 0;
|
|
103
|
-
right: calc(${mapGap(props.gutter)} * -0.5);
|
|
104
|
-
height: 100%;
|
|
105
|
-
width: 10px;
|
|
106
|
-
margin-right: -5px;
|
|
107
|
-
display: flex;
|
|
108
|
-
flex-direction: row;
|
|
109
|
-
justify-content:space-around;
|
|
110
|
-
align-items: center;
|
|
111
|
-
&:after{
|
|
112
|
-
height: 100%;
|
|
113
|
-
width: 1px;
|
|
114
|
-
display: block;
|
|
115
|
-
background: ${props.theme.colors.neutral["300"]};
|
|
116
|
-
content: '';
|
|
117
|
-
}
|
|
118
|
-
&:hover{
|
|
119
|
-
&:after{
|
|
120
|
-
background: ${props.theme.colors.brand["600"]};
|
|
121
|
-
}
|
|
122
|
-
}
|
|
123
|
-
`;
|
|
124
|
-
}}
|
|
125
|
-
`;
|
|
126
|
-
const getWidths = (list) => list.map((l) => l.clientWidth);
|
|
127
|
-
const getHeights = (list) => list.map((l) => l.clientHeight);
|
|
128
|
-
function ResizableContainer({
|
|
129
|
-
children,
|
|
130
|
-
cols,
|
|
131
|
-
rows,
|
|
132
|
-
vertical,
|
|
133
|
-
horizontal,
|
|
134
|
-
...rest
|
|
135
|
-
}) {
|
|
136
|
-
const refs = useRef([]);
|
|
137
|
-
const [containers, setContainers] = useState(cols);
|
|
138
|
-
const [blocks, setBlocks] = useState(rows);
|
|
139
|
-
const [isDragging, setDragging] = useState(false);
|
|
140
|
-
const [start, setStartPoint] = useState(0);
|
|
141
|
-
const [resetPoint, setResetPoint] = useState();
|
|
142
|
-
useEffect(() => {
|
|
143
|
-
if (horizontal)
|
|
144
|
-
setContainers(getWidths(refs.current));
|
|
145
|
-
if (vertical)
|
|
146
|
-
setBlocks(getHeights(refs.current));
|
|
147
|
-
}, [refs.current, horizontal, vertical]);
|
|
148
|
-
const addRef = (node) => {
|
|
149
|
-
refs.current.push(node);
|
|
150
|
-
};
|
|
151
|
-
const resizePanels = (diff = 1, v = false) => {
|
|
152
|
-
const index = parseInt(start.index, 10);
|
|
153
|
-
if (!v) {
|
|
154
|
-
const newContainers = [...containers];
|
|
155
|
-
if (newContainers[index + 1] && newContainers[index + 1] > minDifference) {
|
|
156
|
-
newContainers[index + 1] = newContainers[index + 1] - diff;
|
|
157
|
-
newContainers[index] = diff + newContainers[index];
|
|
158
|
-
} else if (newContainers[index - 1] && newContainers[index - 1] > minDifference) {
|
|
159
|
-
newContainers[index - 1] = newContainers[index - 1] - diff;
|
|
160
|
-
newContainers[index] = diff + newContainers[index];
|
|
161
|
-
}
|
|
162
|
-
if (newContainers.every((c) => c > safeDifference))
|
|
163
|
-
setContainers(newContainers);
|
|
164
|
-
} else {
|
|
165
|
-
const newBlocks = [...blocks];
|
|
166
|
-
if (newBlocks[index + 1] && newBlocks[index + 1] > minDifference) {
|
|
167
|
-
newBlocks[index + 1] = newBlocks[index + 1] - diff;
|
|
168
|
-
newBlocks[index] = diff + newBlocks[index];
|
|
169
|
-
} else if (newBlocks[index - 1] && newBlocks[index - 1] > minDifference) {
|
|
170
|
-
newBlocks[index - 1] = newBlocks[index - 1] - diff;
|
|
171
|
-
newBlocks[index] = diff + newBlocks[index];
|
|
172
|
-
}
|
|
173
|
-
if (newBlocks.every((c) => c > safeDifference))
|
|
174
|
-
setBlocks(newBlocks);
|
|
175
|
-
}
|
|
176
|
-
};
|
|
177
|
-
const startResize = (event, index, v = false, type) => {
|
|
178
|
-
setDragging(type);
|
|
179
|
-
setStartPoint({
|
|
180
|
-
x: event.clientX,
|
|
181
|
-
y: event.clientY,
|
|
182
|
-
index,
|
|
183
|
-
v
|
|
184
|
-
});
|
|
185
|
-
setResetPoint({ containers, blocks });
|
|
186
|
-
};
|
|
187
|
-
const moveResize = (event, type) => {
|
|
188
|
-
if (isDragging && isDragging === type && !start.v) {
|
|
189
|
-
const diff = event.clientX - start.x;
|
|
190
|
-
if (diff === 0)
|
|
191
|
-
return;
|
|
192
|
-
setStartPoint({ x: event.clientX, index: start.index });
|
|
193
|
-
resizePanels(diff);
|
|
194
|
-
} else if (isDragging && isDragging === type && start.v) {
|
|
195
|
-
const diff = event.clientY - start.y;
|
|
196
|
-
if (diff === 0)
|
|
197
|
-
return;
|
|
198
|
-
setStartPoint({ ...start, y: event.clientY, index: start.index });
|
|
199
|
-
resizePanels(diff, true);
|
|
200
|
-
}
|
|
201
|
-
};
|
|
202
|
-
const endResize = (type) => {
|
|
203
|
-
if (isDragging === type) {
|
|
204
|
-
setDragging(false);
|
|
205
|
-
setStartPoint();
|
|
206
|
-
}
|
|
207
|
-
};
|
|
208
|
-
const handleKeyDown = (e, index, v = false) => {
|
|
209
|
-
const keyCodes = {
|
|
210
|
-
37: DIRECTION.L,
|
|
211
|
-
Left: DIRECTION.L,
|
|
212
|
-
ArrowLeft: DIRECTION.L,
|
|
213
|
-
38: DIRECTION.U,
|
|
214
|
-
Up: DIRECTION.U,
|
|
215
|
-
ArrowUp: DIRECTION.U,
|
|
216
|
-
39: DIRECTION.R,
|
|
217
|
-
Right: DIRECTION.R,
|
|
218
|
-
ArrowRight: DIRECTION.R,
|
|
219
|
-
40: DIRECTION.D,
|
|
220
|
-
Down: DIRECTION.D,
|
|
221
|
-
ArrowDown: DIRECTION.D
|
|
222
|
-
};
|
|
223
|
-
if (keyCodes[e.key || e.keyCode]) {
|
|
224
|
-
e.preventDefault();
|
|
225
|
-
const { top: y, left: x } = e.target.getBoundingClientRect();
|
|
226
|
-
if (!start) {
|
|
227
|
-
startResize({ clientX: x, clientY: y }, index, v, EVENT_TYPE.KEY);
|
|
228
|
-
} else {
|
|
229
|
-
const clientX = keyCodes[e.keyCode] === DIRECTION.L || keyCodes[e.keyCode] === DIRECTION.R ? calcPosition(keyCodes[e.keyCode], x) : x;
|
|
230
|
-
const clientY = keyCodes[e.keyCode] === DIRECTION.U || keyCodes[e.keyCode] === DIRECTION.D ? calcPosition(keyCodes[e.keyCode], y) : y;
|
|
231
|
-
moveResize({ clientX, clientY }, EVENT_TYPE.KEY);
|
|
232
|
-
}
|
|
233
|
-
}
|
|
234
|
-
};
|
|
235
|
-
const onLeave = (type) => {
|
|
236
|
-
if (isDragging === type) {
|
|
237
|
-
setDragging(false);
|
|
238
|
-
if (resetPoint && resetPoint.blocks)
|
|
239
|
-
setBlocks(resetPoint.blocks);
|
|
240
|
-
if (resetPoint && resetPoint.containers)
|
|
241
|
-
setContainers(resetPoint.containers);
|
|
242
|
-
}
|
|
243
|
-
};
|
|
244
|
-
const count = React2.Children.count(children);
|
|
245
|
-
return /* @__PURE__ */ React2.createElement(ResizableGrid, {
|
|
246
|
-
...rest,
|
|
247
|
-
cols: containers,
|
|
248
|
-
onKeyUp: () => endResize(EVENT_TYPE.KEY),
|
|
249
|
-
onMouseLeave: () => onLeave(EVENT_TYPE.MOUSE),
|
|
250
|
-
onMouseMove: (e) => moveResize(e, EVENT_TYPE.MOUSE),
|
|
251
|
-
onMouseUp: () => endResize(EVENT_TYPE.MOUSE),
|
|
252
|
-
rows: blocks
|
|
253
|
-
}, React2.Children.map(children, (child, index) => /* @__PURE__ */ React2.createElement(ResizableItem, {
|
|
254
|
-
"data-index": index,
|
|
255
|
-
innerRef: addRef
|
|
256
|
-
}, child, count - 1 !== index && horizontal && /* @__PURE__ */ React2.createElement(ResizableBar, {
|
|
257
|
-
container: containers[index],
|
|
258
|
-
"data-index": index,
|
|
259
|
-
gutter: rest.gutter,
|
|
260
|
-
nextContainer: containers[index + 1],
|
|
261
|
-
onKeyDown: (e) => handleKeyDown(e, index, false),
|
|
262
|
-
onMouseDown: (e) => startResize(e, index, false, EVENT_TYPE.MOUSE),
|
|
263
|
-
tabIndex: 0
|
|
264
|
-
}), count - 1 !== index && vertical && /* @__PURE__ */ React2.createElement(ResizableBar, {
|
|
265
|
-
container: blocks[index],
|
|
266
|
-
"data-index": index,
|
|
267
|
-
gutter: rest.gutter,
|
|
268
|
-
nextContainer: blocks[index + 1],
|
|
269
|
-
onKeyDown: (e) => handleKeyDown(e, index, true),
|
|
270
|
-
onMouseDown: (e) => startResize(e, index, true, EVENT_TYPE.MOUSE),
|
|
271
|
-
tabIndex: 0,
|
|
272
|
-
v: true
|
|
273
|
-
}))));
|
|
274
|
-
}
|
|
275
|
-
ResizableContainer.propTypes = rprops;
|
|
276
|
-
ResizableContainer.defaultProps = defaultProps;
|
|
277
|
-
const DSResizableContainerWithSchema = describe(ResizableContainer);
|
|
278
|
-
DSResizableContainerWithSchema.propTypes = rprops;
|
|
279
|
-
var Resizable_default = ResizableContainer;
|
|
280
|
-
export {
|
|
281
|
-
DSResizableContainerWithSchema,
|
|
282
|
-
ResizableContainer,
|
|
283
|
-
Resizable_default as default
|
|
284
|
-
};
|
|
285
|
-
//# sourceMappingURL=Resizable.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/Resizable.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable max-lines */\n/* eslint-disable max-statements */\nimport React, { useRef, useState, useEffect } from 'react';\nimport { describe } from 'react-desc';\nimport styled from 'styled-components';\nimport { mapGap } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { props as rprops } from './props';\nimport { defaultProps } from './defaultProps';\n\nconst safeDifference = 15;\nconst minDifference = 8;\nconst EVENT_TYPE = { MOUSE: 'mouse', KEY: 'arrows' };\nconst DIRECTION = {\n L: 'left',\n R: 'right',\n U: 'up',\n D: 'down',\n};\n\nfunction calcPosition(arrow, position) {\n let offset;\n switch (arrow) {\n case DIRECTION.U:\n offset = position - 3;\n break;\n case DIRECTION.D:\n offset = position + 3;\n break;\n case DIRECTION.L:\n offset = position - 3;\n break;\n case DIRECTION.R:\n offset = position + 3;\n break;\n default:\n offset = position;\n }\n return offset;\n}\n\nfunction cursorResolver(nextPx, px, isVertical) {\n const orientation = {\n vertical: 'row-resize',\n horizontal: 'col-resize',\n left: 'w-resize',\n right: 'e-resize',\n up: 'n-resize',\n down: 's-resize',\n };\n\n if (isVertical && nextPx && nextPx <= safeDifference + 1)\n return orientation.up;\n if (isVertical && px > safeDifference + 1) return orientation.vertical;\n if (isVertical && px <= safeDifference + 1) return orientation.down;\n\n if (!isVertical && nextPx && nextPx <= safeDifference + 1)\n return orientation.left;\n if (!isVertical && px <= safeDifference + 1) return orientation.right;\n if (!isVertical && px > safeDifference + 1) return orientation.horizontal;\n\n return isVertical ? orientation.vertical : orientation.horizontal;\n}\n\nfunction ResizableItemComponent({ innerRef, ...p }) {\n return <Grid ref={innerRef} {...p} />;\n}\n\nconst ResizableGrid = styled(Grid)``;\nconst ResizableItem = styled(ResizableItemComponent)`\n position: relative;\n`;\nconst ResizableBar = styled.div`\n position: absolute;\n cursor: ${({ container, nextContainer, v }) =>\n cursorResolver(nextContainer, container, v)};\n\n ${(props) => {\n if (props.v) {\n return `\n bottom: calc(${mapGap(props.gutter)} * -0.5);\n left: 0;\n width: 100%;\n height: 10px;\n margin-bottom: -5px;\n display: flex;\n flex-direction: column;\n justify-content:space-around;\n align-items: center;\n &:after{\n width: 100%;\n height: 1px;\n display: block;\n background: ${props.theme.colors.neutral['300']};\n content: '';\n }\n &:hover{\n &:after{\n background: ${props.theme.colors.brand['600']};\n } \n }\n `;\n }\n return `\n top: 0;\n right: calc(${mapGap(props.gutter)} * -0.5);\n height: 100%;\n width: 10px;\n margin-right: -5px;\n display: flex;\n flex-direction: row;\n justify-content:space-around;\n align-items: center;\n &:after{\n height: 100%;\n width: 1px;\n display: block;\n background: ${props.theme.colors.neutral['300']};\n content: '';\n }\n &:hover{\n &:after{\n background: ${props.theme.colors.brand['600']};\n } \n }\n `;\n }}\n`;\nconst getWidths = (list) => list.map((l) => l.clientWidth);\nconst getHeights = (list) => list.map((l) => l.clientHeight);\n\nfunction ResizableContainer({\n children,\n cols,\n rows,\n vertical,\n horizontal,\n ...rest\n}) {\n const refs = useRef([]);\n const [containers, setContainers] = useState(cols);\n const [blocks, setBlocks] = useState(rows);\n const [isDragging, setDragging] = useState(false);\n const [start, setStartPoint] = useState(0);\n const [resetPoint, setResetPoint] = useState();\n\n useEffect(() => {\n if (horizontal) setContainers(getWidths(refs.current));\n if (vertical) setBlocks(getHeights(refs.current));\n }, [refs.current, horizontal, vertical]);\n const addRef = (node) => {\n refs.current.push(node);\n };\n const resizePanels = (diff = 1, v = false) => {\n const index = parseInt(start.index, 10);\n if (!v) {\n const newContainers = [...containers];\n if (\n newContainers[index + 1] &&\n newContainers[index + 1] > minDifference\n ) {\n newContainers[index + 1] = newContainers[index + 1] - diff;\n newContainers[index] = diff + newContainers[index];\n } else if (\n newContainers[index - 1] &&\n newContainers[index - 1] > minDifference\n ) {\n newContainers[index - 1] = newContainers[index - 1] - diff;\n newContainers[index] = diff + newContainers[index];\n }\n if (newContainers.every((c) => c > safeDifference))\n setContainers(newContainers);\n } else {\n const newBlocks = [...blocks];\n if (newBlocks[index + 1] && newBlocks[index + 1] > minDifference) {\n newBlocks[index + 1] = newBlocks[index + 1] - diff;\n newBlocks[index] = diff + newBlocks[index];\n } else if (newBlocks[index - 1] && newBlocks[index - 1] > minDifference) {\n newBlocks[index - 1] = newBlocks[index - 1] - diff;\n newBlocks[index] = diff + newBlocks[index];\n }\n if (newBlocks.every((c) => c > safeDifference)) setBlocks(newBlocks);\n }\n };\n const startResize = (event, index, v = false, type) => {\n setDragging(type);\n setStartPoint({\n x: event.clientX,\n y: event.clientY,\n index,\n v,\n });\n setResetPoint({ containers, blocks });\n };\n const moveResize = (event, type) => {\n if (isDragging && isDragging === type && !start.v) {\n const diff = event.clientX - start.x;\n if (diff === 0) return;\n setStartPoint({ x: event.clientX, index: start.index });\n resizePanels(diff);\n } else if (isDragging && isDragging === type && start.v) {\n const diff = event.clientY - start.y;\n if (diff === 0) return;\n setStartPoint({ ...start, y: event.clientY, index: start.index });\n resizePanels(diff, true);\n }\n };\n const endResize = (type) => {\n if (isDragging === type) {\n setDragging(false);\n setStartPoint();\n }\n };\n const handleKeyDown = (e, index, v = false) => {\n const keyCodes = {\n 37: DIRECTION.L,\n Left: DIRECTION.L,\n ArrowLeft: DIRECTION.L,\n 38: DIRECTION.U,\n Up: DIRECTION.U,\n ArrowUp: DIRECTION.U,\n 39: DIRECTION.R,\n Right: DIRECTION.R,\n ArrowRight: DIRECTION.R,\n 40: DIRECTION.D,\n Down: DIRECTION.D,\n ArrowDown: DIRECTION.D,\n };\n\n if (keyCodes[e.key || e.keyCode]) {\n e.preventDefault();\n const { top: y, left: x } = e.target.getBoundingClientRect();\n if (!start) {\n startResize({ clientX: x, clientY: y }, index, v, EVENT_TYPE.KEY);\n } else {\n const clientX =\n keyCodes[e.keyCode] === DIRECTION.L ||\n keyCodes[e.keyCode] === DIRECTION.R\n ? calcPosition(keyCodes[e.keyCode], x)\n : x;\n const clientY =\n keyCodes[e.keyCode] === DIRECTION.U ||\n keyCodes[e.keyCode] === DIRECTION.D\n ? calcPosition(keyCodes[e.keyCode], y)\n : y;\n\n moveResize({ clientX, clientY }, EVENT_TYPE.KEY);\n }\n }\n };\n\n const onLeave = (type) => {\n if (isDragging === type) {\n setDragging(false);\n\n if (resetPoint && resetPoint.blocks) setBlocks(resetPoint.blocks);\n if (resetPoint && resetPoint.containers)\n setContainers(resetPoint.containers);\n }\n };\n const count = React.Children.count(children);\n\n return (\n <ResizableGrid\n {...rest}\n cols={containers}\n onKeyUp={() => endResize(EVENT_TYPE.KEY)}\n onMouseLeave={() => onLeave(EVENT_TYPE.MOUSE)}\n onMouseMove={(e) => moveResize(e, EVENT_TYPE.MOUSE)}\n onMouseUp={() => endResize(EVENT_TYPE.MOUSE)}\n rows={blocks}\n >\n {React.Children.map(children, (child, index) => (\n <ResizableItem data-index={index} innerRef={addRef}>\n {child}\n {count - 1 !== index && horizontal && (\n <ResizableBar\n container={containers[index]}\n data-index={index}\n gutter={rest.gutter}\n nextContainer={containers[index + 1]}\n onKeyDown={(e) => handleKeyDown(e, index, false)}\n onMouseDown={(e) =>\n startResize(e, index, false, EVENT_TYPE.MOUSE)\n }\n tabIndex={0}\n />\n )}\n {count - 1 !== index && vertical && (\n <ResizableBar\n container={blocks[index]}\n data-index={index}\n gutter={rest.gutter}\n nextContainer={blocks[index + 1]}\n onKeyDown={(e) => handleKeyDown(e, index, true)}\n onMouseDown={(e) => startResize(e, index, true, EVENT_TYPE.MOUSE)}\n tabIndex={0}\n v\n />\n )}\n </ResizableItem>\n ))}\n </ResizableGrid>\n );\n}\n\nResizableContainer.propTypes = rprops;\nResizableContainer.defaultProps = defaultProps;\n\nconst DSResizableContainerWithSchema = describe(ResizableContainer);\nDSResizableContainerWithSchema.propTypes = rprops;\n\nexport { ResizableContainer, DSResizableContainerWithSchema };\nexport default ResizableContainer;\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
package/dist/esm/defaultProps.js
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/defaultProps.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const defaultProps = {\n vertical: false,\n horizontal: false,\n};\n"],
|
|
5
|
-
"mappings": "AAAA;ACAO,MAAM,eAAe;AAAA,EAC1B,UAAU;AAAA,EACV,YAAY;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
package/dist/esm/index.js
DELETED
package/dist/esm/index.js.map
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './Resizable';\nexport { default } from './Resizable';\n"],
|
|
5
|
-
"mappings": "AAAA;ACAA;AACA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
package/dist/esm/props.js
DELETED
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { PropTypes } from "react-desc";
|
|
3
|
-
const props = {
|
|
4
|
-
children: PropTypes.node.description("Grid item content"),
|
|
5
|
-
vertical: PropTypes.bool.description("vertical resizing"),
|
|
6
|
-
horizontal: PropTypes.bool.description("horizontal resizing"),
|
|
7
|
-
rows: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])).description("Row layout cells"),
|
|
8
|
-
cols: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])).description("Column layout cells")
|
|
9
|
-
};
|
|
10
|
-
export {
|
|
11
|
-
props
|
|
12
|
-
};
|
|
13
|
-
//# sourceMappingURL=props.js.map
|
package/dist/esm/props.js.map
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/props.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes } from 'react-desc';\n\nexport const props = {\n /** grid item content */\n children: PropTypes.node.description('Grid item content'),\n /** vertical resizing */\n vertical: PropTypes.bool.description('vertical resizing'),\n /** horizontal resizing */\n horizontal: PropTypes.bool.description('horizontal resizing'),\n /** Row layout cells */\n rows: PropTypes.arrayOf(\n PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n ).description('Row layout cells'),\n /** Column layout cells */\n cols: PropTypes.arrayOf(\n PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n ).description('Column layout cells'),\n};\n"],
|
|
5
|
-
"mappings": "AAAA;ACAA;AAEO,MAAM,QAAQ;AAAA,EAEnB,UAAU,UAAU,KAAK,YAAY;AAAA,EAErC,UAAU,UAAU,KAAK,YAAY;AAAA,EAErC,YAAY,UAAU,KAAK,YAAY;AAAA,EAEvC,MAAM,UAAU,QACd,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,UACjD,YAAY;AAAA,EAEd,MAAM,UAAU,QACd,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,UACjD,YAAY;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|