@elliemae/ds-resizeable-container 3.70.0-next.32 → 3.70.0-next.33
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
CHANGED
|
@@ -161,8 +161,8 @@ const ResizableContainer = ({
|
|
|
161
161
|
...rest
|
|
162
162
|
}) => {
|
|
163
163
|
const refs = (0, import_react.useRef)([]);
|
|
164
|
-
const [containers, setContainers] = (0, import_react.useState)(cols);
|
|
165
|
-
const [blocks, setBlocks] = (0, import_react.useState)(rows);
|
|
164
|
+
const [containers, setContainers] = (0, import_react.useState)(cols || []);
|
|
165
|
+
const [blocks, setBlocks] = (0, import_react.useState)(rows || []);
|
|
166
166
|
const [isDragging, setDragging] = (0, import_react.useState)(false);
|
|
167
167
|
const [start, setStartPoint] = (0, import_react.useState)(0);
|
|
168
168
|
const [resetPoint, setResetPoint] = (0, import_react.useState)();
|
|
@@ -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} 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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
|
|
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?: (string | number)[];\n rows?: (string | number)[];\n vertical?: boolean;\n horizontal?: boolean;\n gutter: string | number;\n [key: string]: unknown;\n}) => {\n const refs = useRef<HTMLDivElement[]>([]);\n const [containers, setContainers] = useState<number[]>((cols || []) as number[]);\n const [blocks, setBlocks] = useState<number[]>((rows || []) as number[]);\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
|
@@ -126,8 +126,8 @@ const ResizableContainer = ({
|
|
|
126
126
|
...rest
|
|
127
127
|
}) => {
|
|
128
128
|
const refs = useRef([]);
|
|
129
|
-
const [containers, setContainers] = useState(cols);
|
|
130
|
-
const [blocks, setBlocks] = useState(rows);
|
|
129
|
+
const [containers, setContainers] = useState(cols || []);
|
|
130
|
+
const [blocks, setBlocks] = useState(rows || []);
|
|
131
131
|
const [isDragging, setDragging] = useState(false);
|
|
132
132
|
const [start, setStartPoint] = useState(0);
|
|
133
133
|
const [resetPoint, setResetPoint] = useState();
|
|
@@ -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} 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,
|
|
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?: (string | number)[];\n rows?: (string | number)[];\n vertical?: boolean;\n horizontal?: boolean;\n gutter: string | number;\n [key: string]: unknown;\n}) => {\n const refs = useRef<HTMLDivElement[]>([]);\n const [containers, setContainers] = useState<number[]>((cols || []) as number[]);\n const [blocks, setBlocks] = useState<number[]>((rows || []) as number[]);\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,cA8ME,YA9MF;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,MAQM;AACJ,QAAM,OAAO,OAAyB,CAAC,CAAC;AACxC,QAAM,CAAC,YAAY,aAAa,IAAI,SAAoB,QAAQ,CAAC,CAAc;AAC/E,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAoB,QAAQ,CAAC,CAAc;AACvE,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
|
}
|
|
@@ -2,12 +2,11 @@ import React from 'react';
|
|
|
2
2
|
declare const ResizableContainer: {
|
|
3
3
|
({ children, cols, rows, vertical, horizontal, ...rest }: {
|
|
4
4
|
children: React.ReactNode;
|
|
5
|
-
cols
|
|
6
|
-
rows
|
|
7
|
-
vertical
|
|
8
|
-
horizontal
|
|
5
|
+
cols?: (string | number)[];
|
|
6
|
+
rows?: (string | number)[];
|
|
7
|
+
vertical?: boolean;
|
|
8
|
+
horizontal?: boolean;
|
|
9
9
|
gutter: string | number;
|
|
10
|
-
v: boolean;
|
|
11
10
|
[key: string]: unknown;
|
|
12
11
|
}): import("react/jsx-runtime.js").JSX.Element;
|
|
13
12
|
defaultProps: {
|
|
@@ -19,12 +18,11 @@ declare const ResizableContainer: {
|
|
|
19
18
|
declare const DSResizableContainerWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<{
|
|
20
19
|
[key: string]: unknown;
|
|
21
20
|
children: React.ReactNode;
|
|
22
|
-
cols
|
|
23
|
-
rows
|
|
24
|
-
vertical
|
|
25
|
-
horizontal
|
|
21
|
+
cols?: (string | number)[];
|
|
22
|
+
rows?: (string | number)[];
|
|
23
|
+
vertical?: boolean;
|
|
24
|
+
horizontal?: boolean;
|
|
26
25
|
gutter: string | number;
|
|
27
|
-
v: boolean;
|
|
28
26
|
}>;
|
|
29
27
|
export { ResizableContainer, DSResizableContainerWithSchema };
|
|
30
28
|
export default ResizableContainer;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-resizeable-container",
|
|
3
|
-
"version": "3.70.0-next.
|
|
3
|
+
"version": "3.70.0-next.33",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Resizeable Container",
|
|
6
6
|
"files": [
|
|
@@ -36,14 +36,14 @@
|
|
|
36
36
|
"indent": 4
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@elliemae/ds-grid": "3.70.0-next.
|
|
40
|
-
"@elliemae/ds-
|
|
41
|
-
"@elliemae/ds-
|
|
39
|
+
"@elliemae/ds-grid": "3.70.0-next.33",
|
|
40
|
+
"@elliemae/ds-props-helpers": "3.70.0-next.33",
|
|
41
|
+
"@elliemae/ds-system": "3.70.0-next.33"
|
|
42
42
|
},
|
|
43
43
|
"devDependencies": {
|
|
44
44
|
"jest": "^30.0.0",
|
|
45
45
|
"styled-components": "~5.3.9",
|
|
46
|
-
"@elliemae/ds-monorepo-devops": "3.70.0-next.
|
|
46
|
+
"@elliemae/ds-monorepo-devops": "3.70.0-next.33"
|
|
47
47
|
},
|
|
48
48
|
"peerDependencies": {
|
|
49
49
|
"react": "^18.3.1",
|