@elliemae/ds-resizeable-container 3.50.1-next.9 → 3.51.0-beta.1
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/cjs/Resizable.js +31 -24
- package/dist/cjs/Resizable.js.map +2 -2
- package/dist/esm/Resizable.js +31 -24
- package/dist/esm/Resizable.js.map +2 -2
- package/dist/types/Resizable.d.ts +17 -12
- package/package.json +10 -22
package/dist/cjs/Resizable.js
CHANGED
|
@@ -87,12 +87,15 @@ function cursorResolver(nextPx, px, isVertical) {
|
|
|
87
87
|
if (!isVertical && px > safeDifference + 1) return orientation.horizontal;
|
|
88
88
|
return isVertical ? orientation.vertical : orientation.horizontal;
|
|
89
89
|
}
|
|
90
|
-
const ResizableItemComponent = ({
|
|
90
|
+
const ResizableItemComponent = ({
|
|
91
|
+
innerRef,
|
|
92
|
+
...p
|
|
93
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { ref: innerRef, ...p });
|
|
91
94
|
const ResizableGrid = (0, import_ds_system.styled)(import_ds_grid.Grid)``;
|
|
92
95
|
const ResizableItem = (0, import_ds_system.styled)(ResizableItemComponent)`
|
|
93
96
|
position: relative;
|
|
94
97
|
`;
|
|
95
|
-
const ResizableBar = import_ds_system.styled
|
|
98
|
+
const ResizableBar = (0, import_ds_system.styled)("div")`
|
|
96
99
|
position: absolute;
|
|
97
100
|
cursor: ${({ container, nextContainer, v }) => cursorResolver(nextContainer, container, v)};
|
|
98
101
|
|
|
@@ -149,7 +152,14 @@ const ResizableBar = import_ds_system.styled.div`
|
|
|
149
152
|
`;
|
|
150
153
|
const getWidths = (list) => list.map((l) => l.clientWidth);
|
|
151
154
|
const getHeights = (list) => list.map((l) => l.clientHeight);
|
|
152
|
-
const ResizableContainer = ({
|
|
155
|
+
const ResizableContainer = ({
|
|
156
|
+
children,
|
|
157
|
+
cols,
|
|
158
|
+
rows,
|
|
159
|
+
vertical,
|
|
160
|
+
horizontal,
|
|
161
|
+
...rest
|
|
162
|
+
}) => {
|
|
153
163
|
const refs = (0, import_react.useRef)([]);
|
|
154
164
|
const [containers, setContainers] = (0, import_react.useState)(cols);
|
|
155
165
|
const [blocks, setBlocks] = (0, import_react.useState)(rows);
|
|
@@ -159,12 +169,13 @@ const ResizableContainer = ({ children, cols, rows, vertical, horizontal, ...res
|
|
|
159
169
|
(0, import_react.useEffect)(() => {
|
|
160
170
|
if (horizontal) setContainers(getWidths(refs.current));
|
|
161
171
|
if (vertical) setBlocks(getHeights(refs.current));
|
|
162
|
-
}, [
|
|
172
|
+
}, [horizontal, vertical]);
|
|
163
173
|
const addRef = (node) => {
|
|
164
174
|
refs.current.push(node);
|
|
165
175
|
};
|
|
166
176
|
const resizePanels = (diff = 1, v = false) => {
|
|
167
|
-
const
|
|
177
|
+
const yoloStart = start;
|
|
178
|
+
const index = parseInt(yoloStart.index, 10);
|
|
168
179
|
if (!v) {
|
|
169
180
|
const newContainers = [...containers];
|
|
170
181
|
if (newContainers[index + 1] && newContainers[index + 1] > minDifference) {
|
|
@@ -198,47 +209,42 @@ const ResizableContainer = ({ children, cols, rows, vertical, horizontal, ...res
|
|
|
198
209
|
setResetPoint({ containers, blocks });
|
|
199
210
|
};
|
|
200
211
|
const moveResize = (event, type) => {
|
|
201
|
-
|
|
202
|
-
|
|
212
|
+
const yoloEvent = event;
|
|
213
|
+
const yoloStart = start;
|
|
214
|
+
if (isDragging && isDragging === type && !(yoloStart && yoloStart.v)) {
|
|
215
|
+
const diff = yoloEvent.clientX - yoloStart.x;
|
|
203
216
|
if (diff === 0) return;
|
|
204
|
-
setStartPoint({ x:
|
|
217
|
+
setStartPoint({ x: yoloEvent.clientX, index: yoloStart.index });
|
|
205
218
|
resizePanels(diff);
|
|
206
|
-
} else if (isDragging && isDragging === type &&
|
|
207
|
-
const diff =
|
|
219
|
+
} else if (isDragging && isDragging === type && yoloStart.v) {
|
|
220
|
+
const diff = yoloEvent.clientY - yoloStart.y;
|
|
208
221
|
if (diff === 0) return;
|
|
209
|
-
setStartPoint({ ...
|
|
222
|
+
setStartPoint({ ...yoloStart, y: yoloEvent.clientY, index: yoloStart.index });
|
|
210
223
|
resizePanels(diff, true);
|
|
211
224
|
}
|
|
212
225
|
};
|
|
213
226
|
const endResize = (type) => {
|
|
214
227
|
if (isDragging === type) {
|
|
215
228
|
setDragging(false);
|
|
216
|
-
setStartPoint();
|
|
229
|
+
setStartPoint(void 0);
|
|
217
230
|
}
|
|
218
231
|
};
|
|
219
232
|
const handleKeyDown = (e, index, v = false) => {
|
|
220
233
|
const keyCodes = {
|
|
221
|
-
37: DIRECTION.L,
|
|
222
|
-
Left: DIRECTION.L,
|
|
223
234
|
ArrowLeft: DIRECTION.L,
|
|
224
|
-
38: DIRECTION.U,
|
|
225
|
-
Up: DIRECTION.U,
|
|
226
235
|
ArrowUp: DIRECTION.U,
|
|
227
|
-
39: DIRECTION.R,
|
|
228
|
-
Right: DIRECTION.R,
|
|
229
236
|
ArrowRight: DIRECTION.R,
|
|
230
|
-
40: DIRECTION.D,
|
|
231
|
-
Down: DIRECTION.D,
|
|
232
237
|
ArrowDown: DIRECTION.D
|
|
233
238
|
};
|
|
234
|
-
if (keyCodes[e.
|
|
239
|
+
if (keyCodes[e.code]) {
|
|
240
|
+
const validCode = keyCodes[e.code];
|
|
235
241
|
e.preventDefault();
|
|
236
242
|
const { top: y, left: x } = e.target.getBoundingClientRect();
|
|
237
243
|
if (!start) {
|
|
238
244
|
startResize({ clientX: x, clientY: y }, index, v, EVENT_TYPE.KEY);
|
|
239
245
|
} else {
|
|
240
|
-
const clientX =
|
|
241
|
-
const clientY =
|
|
246
|
+
const clientX = validCode === DIRECTION.L || validCode === DIRECTION.R ? calcPosition(validCode, x) : x;
|
|
247
|
+
const clientY = validCode === DIRECTION.U || validCode === DIRECTION.D ? calcPosition(validCode, y) : y;
|
|
242
248
|
moveResize({ clientX, clientY }, EVENT_TYPE.KEY);
|
|
243
249
|
}
|
|
244
250
|
}
|
|
@@ -272,7 +278,8 @@ const ResizableContainer = ({ children, cols, rows, vertical, horizontal, ...res
|
|
|
272
278
|
nextContainer: containers[index + 1],
|
|
273
279
|
onKeyDown: (e) => handleKeyDown(e, index, false),
|
|
274
280
|
onMouseDown: (e) => startResize(e, index, false, EVENT_TYPE.MOUSE),
|
|
275
|
-
tabIndex: 0
|
|
281
|
+
tabIndex: 0,
|
|
282
|
+
v: false
|
|
276
283
|
}
|
|
277
284
|
),
|
|
278
285
|
count - 1 !== index && vertical && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Resizable.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable max-lines */\n/* eslint-disable max-statements */\nimport React, { useRef, useState, useEffect } from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { styled, mapGap } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { props as rprops } from './props.js';\nimport { defaultProps } from './defaultProps.js';\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) 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) 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\nconst ResizableItemComponent = ({ innerRef, ...p }) => <Grid ref={innerRef} {...p} />;\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 }) => 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\nconst ResizableContainer = ({ children, cols, rows, vertical, horizontal, ...rest }) => {\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 (newContainers[index + 1] && newContainers[index + 1] > minDifference) {\n newContainers[index + 1] = newContainers[index + 1] - diff;\n newContainers[index] = diff + newContainers[index];\n } else if (newContainers[index - 1] && newContainers[index - 1] > minDifference) {\n newContainers[index - 1] = newContainers[index - 1] - diff;\n newContainers[index] = diff + newContainers[index];\n }\n if (newContainers.every((c) => c > safeDifference)) 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 || keyCodes[e.keyCode] === DIRECTION.R\n ? calcPosition(keyCodes[e.keyCode], x)\n : x;\n const clientY =\n keyCodes[e.keyCode] === DIRECTION.U || 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) 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) => startResize(e, index, false, EVENT_TYPE.MOUSE)}\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.defaultProps = defaultProps;\nResizableContainer.displayName = 'ResizableContainer';\nconst DSResizableContainerWithSchema = describe(ResizableContainer);\nDSResizableContainerWithSchema.propTypes = rprops;\n\nexport { ResizableContainer, DSResizableContainerWithSchema };\nexport default ResizableContainer;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable max-lines */\n/* eslint-disable max-statements */\nimport React, { useRef, useState, useEffect } from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { styled, mapGap } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { props as rprops } from './props.js';\nimport { defaultProps } from './defaultProps.js';\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} as const;\n\nfunction calcPosition(arrow: ObjectValues<typeof DIRECTION>, position: number) {\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: number, px: number, isVertical: boolean) {\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) 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) 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\nconst ResizableItemComponent: React.ComponentType<{ innerRef: React.LegacyRef<HTMLDivElement> | undefined }> = ({\n innerRef,\n ...p\n}) => <Grid ref={innerRef} {...p} />;\n\nconst ResizableGrid = styled(Grid)``;\nconst ResizableItem = styled(ResizableItemComponent)`\n position: relative;\n`;\nconst ResizableBar = styled('div')<{ gutter: string | number; container: number; nextContainer: number; v: boolean }>`\n position: absolute;\n cursor: ${({ container, nextContainer, v }) => 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: HTMLElement[]) => list.map((l) => l.clientWidth);\nconst getHeights = (list: HTMLElement[]) => list.map((l) => l.clientHeight);\ntype Falsy = false | 0 | '' | null | undefined;\ntype Point = { x: React.MouseEvent['clientX']; y: React.MouseEvent['clientY']; index: number; v: boolean };\ntype ResetPoint = { containers: number[]; blocks: number[] } | undefined;\ntype EventType = ObjectValues<typeof EVENT_TYPE>;\nconst ResizableContainer = ({\n children,\n cols,\n rows,\n vertical,\n horizontal,\n ...rest\n}: {\n children: React.ReactNode;\n cols: number[];\n rows: number[];\n vertical: boolean;\n horizontal: boolean;\n gutter: string | number;\n v: boolean;\n [key: string]: unknown;\n}) => {\n const refs = useRef<HTMLDivElement[]>([]);\n const [containers, setContainers] = useState(cols);\n const [blocks, setBlocks] = useState(rows);\n const [isDragging, setDragging] = useState<EventType | false>(false);\n const [start, setStartPoint] = useState<Falsy | Partial<Point>>(0);\n const [resetPoint, setResetPoint] = useState<ResetPoint>();\n\n useEffect(() => {\n if (horizontal) setContainers(getWidths(refs.current));\n if (vertical) setBlocks(getHeights(refs.current));\n }, [horizontal, vertical]);\n const addRef = (node: HTMLDivElement) => {\n refs.current.push(node);\n };\n const resizePanels = (diff = 1, v = false) => {\n // the code in this file is working by means of black magic and hope\n // there are a lot of scenarios that seems to not be handled explicitly\n // E.G. what happens if a variable is not yet set or if the event is not a mouse event\n // it has been \"working\" so far so not touching it, just doing some typescript black magic to shut it up\n const yoloStart = start as Point;\n const index = parseInt(yoloStart.index as unknown as string, 10);\n if (!v) {\n const newContainers = [...containers];\n if (newContainers[index + 1] && newContainers[index + 1] > minDifference) {\n newContainers[index + 1] = newContainers[index + 1] - diff;\n newContainers[index] = diff + newContainers[index];\n } else if (newContainers[index - 1] && newContainers[index - 1] > minDifference) {\n newContainers[index - 1] = newContainers[index - 1] - diff;\n newContainers[index] = diff + newContainers[index];\n }\n if (newContainers.every((c) => c > safeDifference)) 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 // eslint-disable-next-line @typescript-eslint/default-param-last, max-params\n const startResize = (event: Partial<React.MouseEvent>, index: number, v = false, type: EventType) => {\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: Partial<React.MouseEvent> | KeyboardEvent, type: EventType) => {\n // the code in this file is working by means of black magic and hope\n // there are a lot of scenarios that seems to not be handled explicitly\n // E.G. what happens if a variable is not yet set or if the event is not a mouse event\n // it has been \"working\" so far so not touching it, just doing some typescript black magic to shut it up\n const yoloEvent = event as React.MouseEvent;\n const yoloStart = start as Point;\n if (isDragging && isDragging === type && !(yoloStart && yoloStart.v)) {\n const diff = yoloEvent.clientX - yoloStart.x;\n if (diff === 0) return;\n setStartPoint({ x: yoloEvent.clientX, index: yoloStart.index });\n resizePanels(diff);\n } else if (isDragging && isDragging === type && yoloStart.v) {\n const diff = yoloEvent.clientY - yoloStart.y;\n if (diff === 0) return;\n setStartPoint({ ...yoloStart, y: yoloEvent.clientY, index: yoloStart.index });\n resizePanels(diff, true);\n }\n };\n const endResize = (type: EventType) => {\n if (isDragging === type) {\n setDragging(false);\n setStartPoint(undefined);\n }\n };\n const handleKeyDown = (e: React.KeyboardEvent, index: number, v = false) => {\n const keyCodes = {\n ArrowLeft: DIRECTION.L,\n ArrowUp: DIRECTION.U,\n ArrowRight: DIRECTION.R,\n ArrowDown: DIRECTION.D,\n } as const;\n\n if (keyCodes[e.code as keyof typeof keyCodes]) {\n const validCode = keyCodes[e.code as keyof typeof keyCodes];\n e.preventDefault();\n const { top: y, left: x } = (e.target as HTMLElement).getBoundingClientRect();\n if (!start) {\n startResize({ clientX: x, clientY: y }, index, v, EVENT_TYPE.KEY);\n } else {\n const clientX = validCode === DIRECTION.L || validCode === DIRECTION.R ? calcPosition(validCode, x) : x;\n const clientY = validCode === DIRECTION.U || validCode === DIRECTION.D ? calcPosition(validCode, y) : y;\n\n moveResize({ clientX, clientY }, EVENT_TYPE.KEY);\n }\n }\n };\n\n const onLeave = (type: EventType) => {\n if (isDragging === type) {\n setDragging(false);\n\n if (resetPoint && resetPoint.blocks) setBlocks(resetPoint.blocks);\n if (resetPoint && resetPoint.containers) 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) => startResize(e, index, false, EVENT_TYPE.MOUSE)}\n tabIndex={0}\n v={false}\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.defaultProps = defaultProps;\nResizableContainer.displayName = 'ResizableContainer';\nconst DSResizableContainerWithSchema = describe(ResizableContainer);\nDSResizableContainerWithSchema.propTypes = rprops;\n\nexport { ResizableContainer, DSResizableContainerWithSchema };\nexport default ResizableContainer;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React", "rprops"]
|
|
7
7
|
}
|
package/dist/esm/Resizable.js
CHANGED
|
@@ -52,12 +52,15 @@ function cursorResolver(nextPx, px, isVertical) {
|
|
|
52
52
|
if (!isVertical && px > safeDifference + 1) return orientation.horizontal;
|
|
53
53
|
return isVertical ? orientation.vertical : orientation.horizontal;
|
|
54
54
|
}
|
|
55
|
-
const ResizableItemComponent = ({
|
|
55
|
+
const ResizableItemComponent = ({
|
|
56
|
+
innerRef,
|
|
57
|
+
...p
|
|
58
|
+
}) => /* @__PURE__ */ jsx(Grid, { ref: innerRef, ...p });
|
|
56
59
|
const ResizableGrid = styled(Grid)``;
|
|
57
60
|
const ResizableItem = styled(ResizableItemComponent)`
|
|
58
61
|
position: relative;
|
|
59
62
|
`;
|
|
60
|
-
const ResizableBar = styled
|
|
63
|
+
const ResizableBar = styled("div")`
|
|
61
64
|
position: absolute;
|
|
62
65
|
cursor: ${({ container, nextContainer, v }) => cursorResolver(nextContainer, container, v)};
|
|
63
66
|
|
|
@@ -114,7 +117,14 @@ const ResizableBar = styled.div`
|
|
|
114
117
|
`;
|
|
115
118
|
const getWidths = (list) => list.map((l) => l.clientWidth);
|
|
116
119
|
const getHeights = (list) => list.map((l) => l.clientHeight);
|
|
117
|
-
const ResizableContainer = ({
|
|
120
|
+
const ResizableContainer = ({
|
|
121
|
+
children,
|
|
122
|
+
cols,
|
|
123
|
+
rows,
|
|
124
|
+
vertical,
|
|
125
|
+
horizontal,
|
|
126
|
+
...rest
|
|
127
|
+
}) => {
|
|
118
128
|
const refs = useRef([]);
|
|
119
129
|
const [containers, setContainers] = useState(cols);
|
|
120
130
|
const [blocks, setBlocks] = useState(rows);
|
|
@@ -124,12 +134,13 @@ const ResizableContainer = ({ children, cols, rows, vertical, horizontal, ...res
|
|
|
124
134
|
useEffect(() => {
|
|
125
135
|
if (horizontal) setContainers(getWidths(refs.current));
|
|
126
136
|
if (vertical) setBlocks(getHeights(refs.current));
|
|
127
|
-
}, [
|
|
137
|
+
}, [horizontal, vertical]);
|
|
128
138
|
const addRef = (node) => {
|
|
129
139
|
refs.current.push(node);
|
|
130
140
|
};
|
|
131
141
|
const resizePanels = (diff = 1, v = false) => {
|
|
132
|
-
const
|
|
142
|
+
const yoloStart = start;
|
|
143
|
+
const index = parseInt(yoloStart.index, 10);
|
|
133
144
|
if (!v) {
|
|
134
145
|
const newContainers = [...containers];
|
|
135
146
|
if (newContainers[index + 1] && newContainers[index + 1] > minDifference) {
|
|
@@ -163,47 +174,42 @@ const ResizableContainer = ({ children, cols, rows, vertical, horizontal, ...res
|
|
|
163
174
|
setResetPoint({ containers, blocks });
|
|
164
175
|
};
|
|
165
176
|
const moveResize = (event, type) => {
|
|
166
|
-
|
|
167
|
-
|
|
177
|
+
const yoloEvent = event;
|
|
178
|
+
const yoloStart = start;
|
|
179
|
+
if (isDragging && isDragging === type && !(yoloStart && yoloStart.v)) {
|
|
180
|
+
const diff = yoloEvent.clientX - yoloStart.x;
|
|
168
181
|
if (diff === 0) return;
|
|
169
|
-
setStartPoint({ x:
|
|
182
|
+
setStartPoint({ x: yoloEvent.clientX, index: yoloStart.index });
|
|
170
183
|
resizePanels(diff);
|
|
171
|
-
} else if (isDragging && isDragging === type &&
|
|
172
|
-
const diff =
|
|
184
|
+
} else if (isDragging && isDragging === type && yoloStart.v) {
|
|
185
|
+
const diff = yoloEvent.clientY - yoloStart.y;
|
|
173
186
|
if (diff === 0) return;
|
|
174
|
-
setStartPoint({ ...
|
|
187
|
+
setStartPoint({ ...yoloStart, y: yoloEvent.clientY, index: yoloStart.index });
|
|
175
188
|
resizePanels(diff, true);
|
|
176
189
|
}
|
|
177
190
|
};
|
|
178
191
|
const endResize = (type) => {
|
|
179
192
|
if (isDragging === type) {
|
|
180
193
|
setDragging(false);
|
|
181
|
-
setStartPoint();
|
|
194
|
+
setStartPoint(void 0);
|
|
182
195
|
}
|
|
183
196
|
};
|
|
184
197
|
const handleKeyDown = (e, index, v = false) => {
|
|
185
198
|
const keyCodes = {
|
|
186
|
-
37: DIRECTION.L,
|
|
187
|
-
Left: DIRECTION.L,
|
|
188
199
|
ArrowLeft: DIRECTION.L,
|
|
189
|
-
38: DIRECTION.U,
|
|
190
|
-
Up: DIRECTION.U,
|
|
191
200
|
ArrowUp: DIRECTION.U,
|
|
192
|
-
39: DIRECTION.R,
|
|
193
|
-
Right: DIRECTION.R,
|
|
194
201
|
ArrowRight: DIRECTION.R,
|
|
195
|
-
40: DIRECTION.D,
|
|
196
|
-
Down: DIRECTION.D,
|
|
197
202
|
ArrowDown: DIRECTION.D
|
|
198
203
|
};
|
|
199
|
-
if (keyCodes[e.
|
|
204
|
+
if (keyCodes[e.code]) {
|
|
205
|
+
const validCode = keyCodes[e.code];
|
|
200
206
|
e.preventDefault();
|
|
201
207
|
const { top: y, left: x } = e.target.getBoundingClientRect();
|
|
202
208
|
if (!start) {
|
|
203
209
|
startResize({ clientX: x, clientY: y }, index, v, EVENT_TYPE.KEY);
|
|
204
210
|
} else {
|
|
205
|
-
const clientX =
|
|
206
|
-
const clientY =
|
|
211
|
+
const clientX = validCode === DIRECTION.L || validCode === DIRECTION.R ? calcPosition(validCode, x) : x;
|
|
212
|
+
const clientY = validCode === DIRECTION.U || validCode === DIRECTION.D ? calcPosition(validCode, y) : y;
|
|
207
213
|
moveResize({ clientX, clientY }, EVENT_TYPE.KEY);
|
|
208
214
|
}
|
|
209
215
|
}
|
|
@@ -237,7 +243,8 @@ const ResizableContainer = ({ children, cols, rows, vertical, horizontal, ...res
|
|
|
237
243
|
nextContainer: containers[index + 1],
|
|
238
244
|
onKeyDown: (e) => handleKeyDown(e, index, false),
|
|
239
245
|
onMouseDown: (e) => startResize(e, index, false, EVENT_TYPE.MOUSE),
|
|
240
|
-
tabIndex: 0
|
|
246
|
+
tabIndex: 0,
|
|
247
|
+
v: false
|
|
241
248
|
}
|
|
242
249
|
),
|
|
243
250
|
count - 1 !== index && vertical && /* @__PURE__ */ jsx(
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
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 '@elliemae/ds-props-helpers';\nimport { styled, mapGap } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { props as rprops } from './props.js';\nimport { defaultProps } from './defaultProps.js';\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) 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) 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\nconst ResizableItemComponent = ({ innerRef, ...p }) => <Grid ref={innerRef} {...p} />;\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 }) => 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\nconst ResizableContainer = ({ children, cols, rows, vertical, horizontal, ...rest }) => {\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 (newContainers[index + 1] && newContainers[index + 1] > minDifference) {\n newContainers[index + 1] = newContainers[index + 1] - diff;\n newContainers[index] = diff + newContainers[index];\n } else if (newContainers[index - 1] && newContainers[index - 1] > minDifference) {\n newContainers[index - 1] = newContainers[index - 1] - diff;\n newContainers[index] = diff + newContainers[index];\n }\n if (newContainers.every((c) => c > safeDifference)) 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 || keyCodes[e.keyCode] === DIRECTION.R\n ? calcPosition(keyCodes[e.keyCode], x)\n : x;\n const clientY =\n keyCodes[e.keyCode] === DIRECTION.U || 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) 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) => startResize(e, index, false, EVENT_TYPE.MOUSE)}\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.defaultProps = defaultProps;\nResizableContainer.displayName = 'ResizableContainer';\nconst DSResizableContainerWithSchema = describe(ResizableContainer);\nDSResizableContainerWithSchema.propTypes = rprops;\n\nexport { ResizableContainer, DSResizableContainerWithSchema };\nexport default ResizableContainer;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
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 '@elliemae/ds-props-helpers';\nimport { styled, mapGap } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { props as rprops } from './props.js';\nimport { defaultProps } from './defaultProps.js';\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} as const;\n\nfunction calcPosition(arrow: ObjectValues<typeof DIRECTION>, position: number) {\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: number, px: number, isVertical: boolean) {\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) 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) 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\nconst ResizableItemComponent: React.ComponentType<{ innerRef: React.LegacyRef<HTMLDivElement> | undefined }> = ({\n innerRef,\n ...p\n}) => <Grid ref={innerRef} {...p} />;\n\nconst ResizableGrid = styled(Grid)``;\nconst ResizableItem = styled(ResizableItemComponent)`\n position: relative;\n`;\nconst ResizableBar = styled('div')<{ gutter: string | number; container: number; nextContainer: number; v: boolean }>`\n position: absolute;\n cursor: ${({ container, nextContainer, v }) => 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: HTMLElement[]) => list.map((l) => l.clientWidth);\nconst getHeights = (list: HTMLElement[]) => list.map((l) => l.clientHeight);\ntype Falsy = false | 0 | '' | null | undefined;\ntype Point = { x: React.MouseEvent['clientX']; y: React.MouseEvent['clientY']; index: number; v: boolean };\ntype ResetPoint = { containers: number[]; blocks: number[] } | undefined;\ntype EventType = ObjectValues<typeof EVENT_TYPE>;\nconst ResizableContainer = ({\n children,\n cols,\n rows,\n vertical,\n horizontal,\n ...rest\n}: {\n children: React.ReactNode;\n cols: number[];\n rows: number[];\n vertical: boolean;\n horizontal: boolean;\n gutter: string | number;\n v: boolean;\n [key: string]: unknown;\n}) => {\n const refs = useRef<HTMLDivElement[]>([]);\n const [containers, setContainers] = useState(cols);\n const [blocks, setBlocks] = useState(rows);\n const [isDragging, setDragging] = useState<EventType | false>(false);\n const [start, setStartPoint] = useState<Falsy | Partial<Point>>(0);\n const [resetPoint, setResetPoint] = useState<ResetPoint>();\n\n useEffect(() => {\n if (horizontal) setContainers(getWidths(refs.current));\n if (vertical) setBlocks(getHeights(refs.current));\n }, [horizontal, vertical]);\n const addRef = (node: HTMLDivElement) => {\n refs.current.push(node);\n };\n const resizePanels = (diff = 1, v = false) => {\n // the code in this file is working by means of black magic and hope\n // there are a lot of scenarios that seems to not be handled explicitly\n // E.G. what happens if a variable is not yet set or if the event is not a mouse event\n // it has been \"working\" so far so not touching it, just doing some typescript black magic to shut it up\n const yoloStart = start as Point;\n const index = parseInt(yoloStart.index as unknown as string, 10);\n if (!v) {\n const newContainers = [...containers];\n if (newContainers[index + 1] && newContainers[index + 1] > minDifference) {\n newContainers[index + 1] = newContainers[index + 1] - diff;\n newContainers[index] = diff + newContainers[index];\n } else if (newContainers[index - 1] && newContainers[index - 1] > minDifference) {\n newContainers[index - 1] = newContainers[index - 1] - diff;\n newContainers[index] = diff + newContainers[index];\n }\n if (newContainers.every((c) => c > safeDifference)) 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 // eslint-disable-next-line @typescript-eslint/default-param-last, max-params\n const startResize = (event: Partial<React.MouseEvent>, index: number, v = false, type: EventType) => {\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: Partial<React.MouseEvent> | KeyboardEvent, type: EventType) => {\n // the code in this file is working by means of black magic and hope\n // there are a lot of scenarios that seems to not be handled explicitly\n // E.G. what happens if a variable is not yet set or if the event is not a mouse event\n // it has been \"working\" so far so not touching it, just doing some typescript black magic to shut it up\n const yoloEvent = event as React.MouseEvent;\n const yoloStart = start as Point;\n if (isDragging && isDragging === type && !(yoloStart && yoloStart.v)) {\n const diff = yoloEvent.clientX - yoloStart.x;\n if (diff === 0) return;\n setStartPoint({ x: yoloEvent.clientX, index: yoloStart.index });\n resizePanels(diff);\n } else if (isDragging && isDragging === type && yoloStart.v) {\n const diff = yoloEvent.clientY - yoloStart.y;\n if (diff === 0) return;\n setStartPoint({ ...yoloStart, y: yoloEvent.clientY, index: yoloStart.index });\n resizePanels(diff, true);\n }\n };\n const endResize = (type: EventType) => {\n if (isDragging === type) {\n setDragging(false);\n setStartPoint(undefined);\n }\n };\n const handleKeyDown = (e: React.KeyboardEvent, index: number, v = false) => {\n const keyCodes = {\n ArrowLeft: DIRECTION.L,\n ArrowUp: DIRECTION.U,\n ArrowRight: DIRECTION.R,\n ArrowDown: DIRECTION.D,\n } as const;\n\n if (keyCodes[e.code as keyof typeof keyCodes]) {\n const validCode = keyCodes[e.code as keyof typeof keyCodes];\n e.preventDefault();\n const { top: y, left: x } = (e.target as HTMLElement).getBoundingClientRect();\n if (!start) {\n startResize({ clientX: x, clientY: y }, index, v, EVENT_TYPE.KEY);\n } else {\n const clientX = validCode === DIRECTION.L || validCode === DIRECTION.R ? calcPosition(validCode, x) : x;\n const clientY = validCode === DIRECTION.U || validCode === DIRECTION.D ? calcPosition(validCode, y) : y;\n\n moveResize({ clientX, clientY }, EVENT_TYPE.KEY);\n }\n }\n };\n\n const onLeave = (type: EventType) => {\n if (isDragging === type) {\n setDragging(false);\n\n if (resetPoint && resetPoint.blocks) setBlocks(resetPoint.blocks);\n if (resetPoint && resetPoint.containers) 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) => startResize(e, index, false, EVENT_TYPE.MOUSE)}\n tabIndex={0}\n v={false}\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.defaultProps = defaultProps;\nResizableContainer.displayName = 'ResizableContainer';\nconst DSResizableContainerWithSchema = describe(ResizableContainer);\nDSResizableContainerWithSchema.propTypes = rprops;\n\nexport { ResizableContainer, DSResizableContainerWithSchema };\nexport default ResizableContainer;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACiEjB,cA+ME,YA/MF;AA9DN,OAAOA,UAAS,QAAQ,UAAU,iBAAiB;AACnD,SAAS,gBAAgB;AACzB,SAAS,QAAQ,cAAc;AAC/B,SAAS,YAAY;AACrB,SAAS,SAAS,cAAc;AAChC,SAAS,oBAAoB;AAE7B,MAAM,iBAAiB;AACvB,MAAM,gBAAgB;AACtB,MAAM,aAAa,EAAE,OAAO,SAAS,KAAK,SAAS;AACnD,MAAM,YAAY;AAAA,EAChB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,SAAS,aAAa,OAAuC,UAAkB;AAC7E,MAAI;AACJ,UAAQ,OAAO;AAAA,IACb,KAAK,UAAU;AACb,eAAS,WAAW;AACpB;AAAA,IACF,KAAK,UAAU;AACb,eAAS,WAAW;AACpB;AAAA,IACF,KAAK,UAAU;AACb,eAAS,WAAW;AACpB;AAAA,IACF,KAAK,UAAU;AACb,eAAS,WAAW;AACpB;AAAA,IACF;AACE,eAAS;AAAA,EACb;AACA,SAAO;AACT;AAEA,SAAS,eAAe,QAAgB,IAAY,YAAqB;AACvE,QAAM,cAAc;AAAA,IAClB,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,MAAM;AAAA,IACN,OAAO;AAAA,IACP,IAAI;AAAA,IACJ,MAAM;AAAA,EACR;AAEA,MAAI,cAAc,UAAU,UAAU,iBAAiB,EAAG,QAAO,YAAY;AAC7E,MAAI,cAAc,KAAK,iBAAiB,EAAG,QAAO,YAAY;AAC9D,MAAI,cAAc,MAAM,iBAAiB,EAAG,QAAO,YAAY;AAE/D,MAAI,CAAC,cAAc,UAAU,UAAU,iBAAiB,EAAG,QAAO,YAAY;AAC9E,MAAI,CAAC,cAAc,MAAM,iBAAiB,EAAG,QAAO,YAAY;AAChE,MAAI,CAAC,cAAc,KAAK,iBAAiB,EAAG,QAAO,YAAY;AAE/D,SAAO,aAAa,YAAY,WAAW,YAAY;AACzD;AAEA,MAAM,yBAAyG,CAAC;AAAA,EAC9G;AAAA,EACA,GAAG;AACL,MAAM,oBAAC,QAAK,KAAK,UAAW,GAAG,GAAG;AAElC,MAAM,gBAAgB,OAAO,IAAI;AACjC,MAAM,gBAAgB,OAAO,sBAAsB;AAAA;AAAA;AAGnD,MAAM,eAAe,OAAO,KAAK;AAAA;AAAA,YAErB,CAAC,EAAE,WAAW,eAAe,EAAE,MAAM,eAAe,eAAe,WAAW,CAAC,CAAC;AAAA;AAAA,IAExF,CAAC,UAAU;AACX,MAAI,MAAM,GAAG;AACX,WAAO;AAAA,uBACU,OAAO,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAanB,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,0BAK/B,MAAM,MAAM,OAAO,MAAM,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA,EAIrD;AACA,SAAO;AAAA;AAAA,kBAEO,OAAO,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAYlB,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,sBAK/B,MAAM,MAAM,OAAO,MAAM,KAAK,CAAC;AAAA;AAAA;AAAA;AAInD,CAAC;AAAA;AAEH,MAAM,YAAY,CAAC,SAAwB,KAAK,IAAI,CAAC,MAAM,EAAE,WAAW;AACxE,MAAM,aAAa,CAAC,SAAwB,KAAK,IAAI,CAAC,MAAM,EAAE,YAAY;AAK1E,MAAM,qBAAqB,CAAC;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MASM;AACJ,QAAM,OAAO,OAAyB,CAAC,CAAC;AACxC,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,IAAI;AACjD,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,IAAI;AACzC,QAAM,CAAC,YAAY,WAAW,IAAI,SAA4B,KAAK;AACnE,QAAM,CAAC,OAAO,aAAa,IAAI,SAAiC,CAAC;AACjE,QAAM,CAAC,YAAY,aAAa,IAAI,SAAqB;AAEzD,YAAU,MAAM;AACd,QAAI,WAAY,eAAc,UAAU,KAAK,OAAO,CAAC;AACrD,QAAI,SAAU,WAAU,WAAW,KAAK,OAAO,CAAC;AAAA,EAClD,GAAG,CAAC,YAAY,QAAQ,CAAC;AACzB,QAAM,SAAS,CAAC,SAAyB;AACvC,SAAK,QAAQ,KAAK,IAAI;AAAA,EACxB;AACA,QAAM,eAAe,CAAC,OAAO,GAAG,IAAI,UAAU;AAK5C,UAAM,YAAY;AAClB,UAAM,QAAQ,SAAS,UAAU,OAA4B,EAAE;AAC/D,QAAI,CAAC,GAAG;AACN,YAAM,gBAAgB,CAAC,GAAG,UAAU;AACpC,UAAI,cAAc,QAAQ,CAAC,KAAK,cAAc,QAAQ,CAAC,IAAI,eAAe;AACxE,sBAAc,QAAQ,CAAC,IAAI,cAAc,QAAQ,CAAC,IAAI;AACtD,sBAAc,KAAK,IAAI,OAAO,cAAc,KAAK;AAAA,MACnD,WAAW,cAAc,QAAQ,CAAC,KAAK,cAAc,QAAQ,CAAC,IAAI,eAAe;AAC/E,sBAAc,QAAQ,CAAC,IAAI,cAAc,QAAQ,CAAC,IAAI;AACtD,sBAAc,KAAK,IAAI,OAAO,cAAc,KAAK;AAAA,MACnD;AACA,UAAI,cAAc,MAAM,CAAC,MAAM,IAAI,cAAc,EAAG,eAAc,aAAa;AAAA,IACjF,OAAO;AACL,YAAM,YAAY,CAAC,GAAG,MAAM;AAC5B,UAAI,UAAU,QAAQ,CAAC,KAAK,UAAU,QAAQ,CAAC,IAAI,eAAe;AAChE,kBAAU,QAAQ,CAAC,IAAI,UAAU,QAAQ,CAAC,IAAI;AAC9C,kBAAU,KAAK,IAAI,OAAO,UAAU,KAAK;AAAA,MAC3C,WAAW,UAAU,QAAQ,CAAC,KAAK,UAAU,QAAQ,CAAC,IAAI,eAAe;AACvE,kBAAU,QAAQ,CAAC,IAAI,UAAU,QAAQ,CAAC,IAAI;AAC9C,kBAAU,KAAK,IAAI,OAAO,UAAU,KAAK;AAAA,MAC3C;AACA,UAAI,UAAU,MAAM,CAAC,MAAM,IAAI,cAAc,EAAG,WAAU,SAAS;AAAA,IACrE;AAAA,EACF;AAEA,QAAM,cAAc,CAAC,OAAkC,OAAe,IAAI,OAAO,SAAoB;AACnG,gBAAY,IAAI;AAChB,kBAAc;AAAA,MACZ,GAAG,MAAM;AAAA,MACT,GAAG,MAAM;AAAA,MACT;AAAA,MACA;AAAA,IACF,CAAC;AACD,kBAAc,EAAE,YAAY,OAAO,CAAC;AAAA,EACtC;AACA,QAAM,aAAa,CAAC,OAAkD,SAAoB;AAKxF,UAAM,YAAY;AAClB,UAAM,YAAY;AAClB,QAAI,cAAc,eAAe,QAAQ,EAAE,aAAa,UAAU,IAAI;AACpE,YAAM,OAAO,UAAU,UAAU,UAAU;AAC3C,UAAI,SAAS,EAAG;AAChB,oBAAc,EAAE,GAAG,UAAU,SAAS,OAAO,UAAU,MAAM,CAAC;AAC9D,mBAAa,IAAI;AAAA,IACnB,WAAW,cAAc,eAAe,QAAQ,UAAU,GAAG;AAC3D,YAAM,OAAO,UAAU,UAAU,UAAU;AAC3C,UAAI,SAAS,EAAG;AAChB,oBAAc,EAAE,GAAG,WAAW,GAAG,UAAU,SAAS,OAAO,UAAU,MAAM,CAAC;AAC5E,mBAAa,MAAM,IAAI;AAAA,IACzB;AAAA,EACF;AACA,QAAM,YAAY,CAAC,SAAoB;AACrC,QAAI,eAAe,MAAM;AACvB,kBAAY,KAAK;AACjB,oBAAc,MAAS;AAAA,IACzB;AAAA,EACF;AACA,QAAM,gBAAgB,CAAC,GAAwB,OAAe,IAAI,UAAU;AAC1E,UAAM,WAAW;AAAA,MACf,WAAW,UAAU;AAAA,MACrB,SAAS,UAAU;AAAA,MACnB,YAAY,UAAU;AAAA,MACtB,WAAW,UAAU;AAAA,IACvB;AAEA,QAAI,SAAS,EAAE,IAA6B,GAAG;AAC7C,YAAM,YAAY,SAAS,EAAE,IAA6B;AAC1D,QAAE,eAAe;AACjB,YAAM,EAAE,KAAK,GAAG,MAAM,EAAE,IAAK,EAAE,OAAuB,sBAAsB;AAC5E,UAAI,CAAC,OAAO;AACV,oBAAY,EAAE,SAAS,GAAG,SAAS,EAAE,GAAG,OAAO,GAAG,WAAW,GAAG;AAAA,MAClE,OAAO;AACL,cAAM,UAAU,cAAc,UAAU,KAAK,cAAc,UAAU,IAAI,aAAa,WAAW,CAAC,IAAI;AACtG,cAAM,UAAU,cAAc,UAAU,KAAK,cAAc,UAAU,IAAI,aAAa,WAAW,CAAC,IAAI;AAEtG,mBAAW,EAAE,SAAS,QAAQ,GAAG,WAAW,GAAG;AAAA,MACjD;AAAA,IACF;AAAA,EACF;AAEA,QAAM,UAAU,CAAC,SAAoB;AACnC,QAAI,eAAe,MAAM;AACvB,kBAAY,KAAK;AAEjB,UAAI,cAAc,WAAW,OAAQ,WAAU,WAAW,MAAM;AAChE,UAAI,cAAc,WAAW,WAAY,eAAc,WAAW,UAAU;AAAA,IAC9E;AAAA,EACF;AACA,QAAM,QAAQA,OAAM,SAAS,MAAM,QAAQ;AAE3C,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,MAAM;AAAA,MACN,SAAS,MAAM,UAAU,WAAW,GAAG;AAAA,MACvC,cAAc,MAAM,QAAQ,WAAW,KAAK;AAAA,MAC5C,aAAa,CAAC,MAAM,WAAW,GAAG,WAAW,KAAK;AAAA,MAClD,WAAW,MAAM,UAAU,WAAW,KAAK;AAAA,MAC3C,MAAM;AAAA,MAEL,UAAAA,OAAM,SAAS,IAAI,UAAU,CAAC,OAAO,UACpC,qBAAC,iBAAc,cAAY,OAAO,UAAU,QACzC;AAAA;AAAA,QACA,QAAQ,MAAM,SAAS,cACtB;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,WAAW,KAAK;AAAA,YAC3B,cAAY;AAAA,YACZ,QAAQ,KAAK;AAAA,YACb,eAAe,WAAW,QAAQ,CAAC;AAAA,YACnC,WAAW,CAAC,MAAM,cAAc,GAAG,OAAO,KAAK;AAAA,YAC/C,aAAa,CAAC,MAAM,YAAY,GAAG,OAAO,OAAO,WAAW,KAAK;AAAA,YACjE,UAAU;AAAA,YACV,GAAG;AAAA;AAAA,QACL;AAAA,QAED,QAAQ,MAAM,SAAS,YACtB;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,OAAO,KAAK;AAAA,YACvB,cAAY;AAAA,YACZ,QAAQ,KAAK;AAAA,YACb,eAAe,OAAO,QAAQ,CAAC;AAAA,YAC/B,WAAW,CAAC,MAAM,cAAc,GAAG,OAAO,IAAI;AAAA,YAC9C,aAAa,CAAC,MAAM,YAAY,GAAG,OAAO,MAAM,WAAW,KAAK;AAAA,YAChE,UAAU;AAAA,YACV,GAAC;AAAA;AAAA,QACH;AAAA,SAEJ,CACD;AAAA;AAAA,EACH;AAEJ;AAEA,mBAAmB,eAAe;AAClC,mBAAmB,cAAc;AACjC,MAAM,iCAAiC,SAAS,kBAAkB;AAClE,+BAA+B,YAAY;AAG3C,IAAO,oBAAQ;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -1,11 +1,14 @@
|
|
|
1
|
+
import React from 'react';
|
|
1
2
|
declare const ResizableContainer: {
|
|
2
3
|
({ children, cols, rows, vertical, horizontal, ...rest }: {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
4
|
+
children: React.ReactNode;
|
|
5
|
+
cols: number[];
|
|
6
|
+
rows: number[];
|
|
7
|
+
vertical: boolean;
|
|
8
|
+
horizontal: boolean;
|
|
9
|
+
gutter: string | number;
|
|
10
|
+
v: boolean;
|
|
11
|
+
[key: string]: unknown;
|
|
9
12
|
}): import("react/jsx-runtime.js").JSX.Element;
|
|
10
13
|
defaultProps: {
|
|
11
14
|
vertical: boolean;
|
|
@@ -14,12 +17,14 @@ declare const ResizableContainer: {
|
|
|
14
17
|
displayName: string;
|
|
15
18
|
};
|
|
16
19
|
declare const DSResizableContainerWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<{
|
|
17
|
-
[
|
|
18
|
-
children:
|
|
19
|
-
cols:
|
|
20
|
-
rows:
|
|
21
|
-
vertical:
|
|
22
|
-
horizontal:
|
|
20
|
+
[key: string]: unknown;
|
|
21
|
+
children: React.ReactNode;
|
|
22
|
+
cols: number[];
|
|
23
|
+
rows: number[];
|
|
24
|
+
vertical: boolean;
|
|
25
|
+
horizontal: boolean;
|
|
26
|
+
gutter: string | number;
|
|
27
|
+
v: boolean;
|
|
23
28
|
}>;
|
|
24
29
|
export { ResizableContainer, DSResizableContainerWithSchema };
|
|
25
30
|
export default ResizableContainer;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-resizeable-container",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.51.0-beta.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Resizeable Container",
|
|
6
6
|
"files": [
|
|
@@ -14,18 +14,6 @@
|
|
|
14
14
|
"types": "./dist/types/index.d.ts",
|
|
15
15
|
"import": "./dist/esm/index.js",
|
|
16
16
|
"require": "./dist/cjs/index.js"
|
|
17
|
-
},
|
|
18
|
-
"./Resizable": {
|
|
19
|
-
"import": "./dist/esm/Resizable.js",
|
|
20
|
-
"require": "./dist/cjs/Resizable.js"
|
|
21
|
-
},
|
|
22
|
-
"./props": {
|
|
23
|
-
"import": "./dist/esm/props.js",
|
|
24
|
-
"require": "./dist/cjs/props.js"
|
|
25
|
-
},
|
|
26
|
-
"./defaultProps": {
|
|
27
|
-
"import": "./dist/esm/defaultProps.js",
|
|
28
|
-
"require": "./dist/cjs/defaultProps.js"
|
|
29
17
|
}
|
|
30
18
|
},
|
|
31
19
|
"sideEffects": [
|
|
@@ -37,8 +25,8 @@
|
|
|
37
25
|
"url": "https://git.elliemae.io/platform-ui/dimsum.git"
|
|
38
26
|
},
|
|
39
27
|
"engines": {
|
|
40
|
-
"pnpm": ">=
|
|
41
|
-
"node": ">=
|
|
28
|
+
"pnpm": ">=9",
|
|
29
|
+
"node": ">=22"
|
|
42
30
|
},
|
|
43
31
|
"author": "ICE MT",
|
|
44
32
|
"jestSonar": {
|
|
@@ -48,19 +36,19 @@
|
|
|
48
36
|
"indent": 4
|
|
49
37
|
},
|
|
50
38
|
"dependencies": {
|
|
51
|
-
"@elliemae/ds-
|
|
52
|
-
"@elliemae/ds-
|
|
53
|
-
"@elliemae/ds-system": "3.
|
|
39
|
+
"@elliemae/ds-grid": "3.51.0-beta.1",
|
|
40
|
+
"@elliemae/ds-props-helpers": "3.51.0-beta.1",
|
|
41
|
+
"@elliemae/ds-system": "3.51.0-beta.1"
|
|
54
42
|
},
|
|
55
43
|
"devDependencies": {
|
|
56
|
-
"@elliemae/pui-cli": "9.0.0-next.
|
|
44
|
+
"@elliemae/pui-cli": "9.0.0-next.55",
|
|
57
45
|
"jest": "~29.7.0",
|
|
58
46
|
"styled-components": "~5.3.9",
|
|
59
|
-
"@elliemae/ds-monorepo-devops": "3.
|
|
47
|
+
"@elliemae/ds-monorepo-devops": "3.51.0-beta.1"
|
|
60
48
|
},
|
|
61
49
|
"peerDependencies": {
|
|
62
|
-
"react": "^
|
|
63
|
-
"react-dom": "^
|
|
50
|
+
"react": "^18.3.1",
|
|
51
|
+
"react-dom": "^18.3.1",
|
|
64
52
|
"styled-components": "~5.3.9"
|
|
65
53
|
},
|
|
66
54
|
"publishConfig": {
|