@onerjs/shared-ui-components 8.42.7 → 8.42.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +1 @@
1
- {"version":3,"file":"splitContainer.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/split/splitContainer.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { PropsWithChildren } from \"react\";\r\nimport { useContext, useEffect, useRef } from \"react\";\r\nimport * as styles from \"./splitContainer.module.scss\";\r\nimport { ControlledSize, SplitDirection, SplitContext } from \"./splitContext\";\r\nimport { ToolContext } from \"shared-ui-components/fluent/hoc/fluentToolWrapper\";\r\n\r\n/**\r\n * Split container properties\r\n */\r\nexport interface ISplitContainerProps {\r\n /**\r\n * Unique identifier\r\n */\r\n id?: string;\r\n\r\n /**\r\n * Split direction\r\n */\r\n direction: SplitDirection;\r\n\r\n /**\r\n * Minimum size for the floating elements\r\n */\r\n floatingMinSize?: number;\r\n\r\n /**\r\n * RefObject to the root div element\r\n */\r\n containerRef?: React.RefObject<HTMLDivElement>;\r\n\r\n /**\r\n * Optional class name\r\n */\r\n className?: string;\r\n\r\n /**\r\n * Pointer down\r\n * @param event pointer events\r\n */\r\n onPointerDown?: (event: React.PointerEvent) => void;\r\n\r\n /**\r\n * Pointer move\r\n * @param event pointer events\r\n */\r\n onPointerMove?: (event: React.PointerEvent) => void;\r\n\r\n /**\r\n * Pointer up\r\n * @param event pointer events\r\n */\r\n onPointerUp?: (event: React.PointerEvent) => void;\r\n\r\n /**\r\n * Drop\r\n * @param event drag events\r\n */\r\n onDrop?: (event: React.DragEvent<HTMLDivElement>) => void;\r\n\r\n /**\r\n * Drag over\r\n * @param event drag events\r\n */\r\n onDragOver?: (event: React.DragEvent<HTMLDivElement>) => void;\r\n}\r\n\r\n/**\r\n * Creates a split container component\r\n * @param props defines the split container properties\r\n * @returns the split container component\r\n */\r\nexport const SplitContainer: React.FC<PropsWithChildren<ISplitContainerProps>> = (props) => {\r\n const elementRef: React.RefObject<HTMLDivElement> = props.containerRef || useRef(null);\r\n const sizes: number[] = [];\r\n const floatingCells: boolean[] = [];\r\n const noInitialSizes: boolean[] = [];\r\n const floatingMinSize = props.floatingMinSize || 200;\r\n const controllers: number[][] = [];\r\n const minSizes: number[] = [];\r\n const maxSizes: number[] = [];\r\n const useFluent = useContext(ToolContext).useFluent;\r\n\r\n const buildGridDefinition = () => {\r\n if (!elementRef.current) {\r\n return;\r\n }\r\n const children = elementRef.current.children;\r\n\r\n let gridIndex = 1;\r\n const pickArray = Array.from(children);\r\n let gridDefinition = \"\";\r\n for (const child of children) {\r\n const childElement = child as HTMLElement;\r\n if (child.classList.contains(styles[\"splitter\"])) {\r\n gridDefinition += \"auto \";\r\n } else {\r\n const sourceIndex = pickArray.indexOf(child);\r\n if (floatingCells[sourceIndex] || noInitialSizes[sourceIndex]) {\r\n gridDefinition += \"1fr \";\r\n } else {\r\n gridDefinition += \"auto \";\r\n }\r\n }\r\n\r\n if (props.direction === SplitDirection.Horizontal) {\r\n childElement.style.gridRow = \"1\";\r\n childElement.style.gridColumn = gridIndex.toString();\r\n } else {\r\n childElement.style.gridColumn = \"1\";\r\n childElement.style.gridRow = gridIndex.toString();\r\n }\r\n\r\n gridIndex++;\r\n }\r\n\r\n if (props.direction === SplitDirection.Horizontal) {\r\n elementRef.current.style.gridTemplateRows = \"100%\";\r\n elementRef.current.style.gridTemplateColumns = gridDefinition;\r\n } else {\r\n elementRef.current.style.gridTemplateColumns = \"100%\";\r\n elementRef.current.style.gridTemplateRows = gridDefinition;\r\n }\r\n };\r\n\r\n const handleResize = () => {\r\n if (!elementRef.current) {\r\n return;\r\n }\r\n\r\n // Check if we have enough room for everyone\r\n const children = elementRef.current.children;\r\n for (let i = 0; i < children.length; i++) {\r\n if (!floatingCells[i]) {\r\n continue;\r\n }\r\n\r\n const child = children[i] as HTMLElement;\r\n let childsize = 0;\r\n if (props.direction === SplitDirection.Horizontal) {\r\n childsize = child.getBoundingClientRect().width;\r\n } else {\r\n childsize = child.getBoundingClientRect().height;\r\n }\r\n\r\n if (childsize < floatingMinSize) {\r\n const missing = Math.floor(floatingMinSize - childsize);\r\n let done = 0;\r\n\r\n // picking the controller in order and try to reduce their size to fit\r\n for (let j = 0; j < controllers[i].length; j++) {\r\n const controllerIndex = controllers[i][j];\r\n const controller = children[controllerIndex] as HTMLElement;\r\n const currentSize = props.direction === SplitDirection.Horizontal ? controller.getBoundingClientRect().width : controller.getBoundingClientRect().height;\r\n let newSize = currentSize - missing;\r\n if (minSizes[controllerIndex]) {\r\n newSize = Math.max(newSize, minSizes[controllerIndex]);\r\n }\r\n if (props.direction === SplitDirection.Horizontal) {\r\n controller.style.width = `${newSize}px`;\r\n } else {\r\n controller.style.height = `${newSize}px`;\r\n }\r\n\r\n done += currentSize - newSize;\r\n\r\n if (done === missing) {\r\n // We made it\r\n break;\r\n }\r\n }\r\n }\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n buildGridDefinition();\r\n\r\n // Add event listener for window resize\r\n window.addEventListener(\"resize\", handleResize);\r\n\r\n // Cleanup the event listener on component unmount\r\n return () => {\r\n window.removeEventListener(\"resize\", handleResize);\r\n };\r\n }, []);\r\n\r\n const drag = (offset: number, source: HTMLElement, controlledSide: ControlledSize) => {\r\n if (!elementRef.current) {\r\n return;\r\n }\r\n\r\n const children = elementRef.current.children;\r\n const childArray = Array.from(children) as HTMLElement[];\r\n const sourceIndex = childArray.indexOf(source);\r\n if (sourceIndex <= 0) {\r\n return;\r\n }\r\n\r\n let current = 0;\r\n if (controlledSide === ControlledSize.First) {\r\n current = sourceIndex - 1;\r\n } else {\r\n current = sourceIndex + 1;\r\n }\r\n const minSize = minSizes[current] || 0;\r\n const maxSize = maxSizes[current];\r\n\r\n noInitialSizes[current] = false;\r\n buildGridDefinition();\r\n\r\n let newSize = Math.floor(controlledSide === ControlledSize.First ? sizes[current] + offset : sizes[current] - offset);\r\n\r\n // Min size check\r\n if (newSize < minSize) {\r\n newSize = minSize;\r\n }\r\n\r\n // Max size check\r\n if (maxSize && newSize > maxSize) {\r\n newSize = maxSize;\r\n }\r\n\r\n // Max size check across the whole container\r\n const maxContainerSize = sizes.reduce((a, b) => a + b, 0) || 0;\r\n let totalSize = 0;\r\n let totalFloating = 0;\r\n for (let i = 0; i < children.length; i++) {\r\n if (floatingCells[i]) {\r\n totalFloating++;\r\n } else {\r\n totalSize += i === current ? newSize : sizes[i];\r\n }\r\n }\r\n\r\n if (maxContainerSize - totalSize < floatingMinSize * totalFloating) {\r\n newSize = maxContainerSize - floatingMinSize * totalFloating;\r\n }\r\n\r\n if (props.direction === SplitDirection.Horizontal) {\r\n childArray[current].style.width = `${newSize}px`;\r\n } else {\r\n childArray[current].style.height = `${newSize}px`;\r\n }\r\n };\r\n\r\n const beginDrag = () => {\r\n if (!elementRef.current) {\r\n return;\r\n }\r\n const children = elementRef.current.children;\r\n sizes.length = 0;\r\n for (const child of children) {\r\n const childElement = child as HTMLElement;\r\n\r\n if (props.direction === SplitDirection.Horizontal) {\r\n sizes.push(childElement.getBoundingClientRect().width);\r\n } else {\r\n sizes.push(childElement.getBoundingClientRect().height);\r\n }\r\n }\r\n };\r\n\r\n const endDrag = () => {\r\n sizes.length = 0;\r\n };\r\n\r\n // We assume splitter are not flagging floating cells in a different way\r\n const sync = (source: HTMLElement, controlledSide: ControlledSize, size?: number, minSize?: number, maxSize?: number) => {\r\n if (!elementRef.current) {\r\n return;\r\n }\r\n\r\n const children = elementRef.current.children;\r\n const childArray = Array.from(children) as HTMLElement[];\r\n const sourceIndex = childArray.indexOf(source);\r\n if (sourceIndex <= 0) {\r\n return;\r\n }\r\n\r\n let current = 0;\r\n let other = 0;\r\n if (controlledSide === ControlledSize.First) {\r\n current = sourceIndex - 1;\r\n other = sourceIndex + 1;\r\n } else {\r\n current = sourceIndex + 1;\r\n other = sourceIndex - 1;\r\n }\r\n\r\n if (size !== undefined) {\r\n const sizeString = `${size | 0}px`;\r\n\r\n if (!childArray[current].style.width) {\r\n if (props.direction === SplitDirection.Horizontal) {\r\n childArray[current].style.width = sizeString;\r\n } else {\r\n childArray[current].style.height = sizeString;\r\n }\r\n }\r\n } else {\r\n noInitialSizes[current] = true;\r\n }\r\n\r\n if (minSize !== undefined) {\r\n minSizes[current] = minSize;\r\n }\r\n\r\n if (maxSize !== undefined) {\r\n maxSizes[current] = maxSize;\r\n }\r\n\r\n if (!controllers[other]) {\r\n controllers[other] = [];\r\n }\r\n controllers[other].push(current);\r\n floatingCells[other] = true;\r\n };\r\n\r\n return (\r\n <SplitContext.Provider value={{ direction: props.direction, drag, beginDrag, endDrag, sync }}>\r\n <div\r\n id={props.id}\r\n className={styles[\"split-container\"] + \" \" + props.className}\r\n style={useFluent ? { height: \"100vh\" } : undefined} // temporary until splitContainer is fluentized\r\n ref={elementRef}\r\n onPointerDown={(evt) => props.onPointerDown && props.onPointerDown(evt)}\r\n onPointerMove={(evt) => props.onPointerMove && props.onPointerMove(evt)}\r\n onPointerUp={(evt) => props.onPointerUp && props.onPointerUp(evt)}\r\n onDrop={(evt) => props.onDrop && props.onDrop(evt)}\r\n onDragOver={(evt) => props.onDragOver && props.onDragOver(evt)}\r\n >\r\n {props.children}\r\n </div>\r\n </SplitContext.Provider>\r\n );\r\n};\r\n"]}
1
+ {"version":3,"file":"splitContainer.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/split/splitContainer.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { PropsWithChildren } from \"react\";\r\nimport { useContext, useEffect, useRef } from \"react\";\r\nimport * as styles from \"./splitContainer.module.scss\";\r\nimport { ControlledSize, SplitDirection, SplitContext } from \"./splitContext\";\r\nimport { ToolContext } from \"shared-ui-components/fluent/hoc/fluentToolWrapper\";\r\n\r\n/**\r\n * Split container properties\r\n */\r\nexport interface ISplitContainerProps {\r\n /**\r\n * Unique identifier\r\n */\r\n id?: string;\r\n\r\n /**\r\n * Split direction\r\n */\r\n direction: SplitDirection;\r\n\r\n /**\r\n * Minimum size for the floating elements\r\n */\r\n floatingMinSize?: number;\r\n\r\n /**\r\n * RefObject to the root div element\r\n */\r\n containerRef?: React.RefObject<HTMLDivElement>;\r\n\r\n /**\r\n * Optional class name\r\n */\r\n className?: string;\r\n\r\n /**\r\n * Pointer down\r\n * @param event pointer events\r\n */\r\n onPointerDown?: (event: React.PointerEvent) => void;\r\n\r\n /**\r\n * Pointer move\r\n * @param event pointer events\r\n */\r\n onPointerMove?: (event: React.PointerEvent) => void;\r\n\r\n /**\r\n * Pointer up\r\n * @param event pointer events\r\n */\r\n onPointerUp?: (event: React.PointerEvent) => void;\r\n\r\n /**\r\n * Drop\r\n * @param event drag events\r\n */\r\n onDrop?: (event: React.DragEvent<HTMLDivElement>) => void;\r\n\r\n /**\r\n * Drag over\r\n * @param event drag events\r\n */\r\n onDragOver?: (event: React.DragEvent<HTMLDivElement>) => void;\r\n}\r\n\r\n/**\r\n * Creates a split container component\r\n * @param props defines the split container properties\r\n * @returns the split container component\r\n */\r\nexport const SplitContainer: React.FC<PropsWithChildren<ISplitContainerProps>> = (props) => {\r\n const elementRef: React.RefObject<HTMLDivElement> = props.containerRef || useRef(null);\r\n const sizes: number[] = [];\r\n const floatingCells: boolean[] = [];\r\n const noInitialSizes: boolean[] = [];\r\n const floatingMinSize = props.floatingMinSize || 200;\r\n const controllers: number[][] = [];\r\n const minSizes: number[] = [];\r\n const maxSizes: number[] = [];\r\n const useFluent = useContext(ToolContext).useFluent;\r\n\r\n const buildGridDefinition = () => {\r\n if (!elementRef.current) {\r\n return;\r\n }\r\n const children = elementRef.current.children;\r\n\r\n let gridIndex = 1;\r\n const pickArray = Array.from(children);\r\n let gridDefinition = \"\";\r\n for (const child of children) {\r\n const childElement = child as HTMLElement;\r\n if (child.classList.contains(styles[\"splitter\"])) {\r\n gridDefinition += \"auto \";\r\n } else {\r\n const sourceIndex = pickArray.indexOf(child);\r\n if (floatingCells[sourceIndex] || noInitialSizes[sourceIndex]) {\r\n gridDefinition += \"1fr \";\r\n } else {\r\n gridDefinition += \"auto \";\r\n }\r\n }\r\n\r\n if (props.direction === SplitDirection.Horizontal) {\r\n childElement.style.gridRow = \"1\";\r\n childElement.style.gridColumn = gridIndex.toString();\r\n } else {\r\n childElement.style.gridColumn = \"1\";\r\n childElement.style.gridRow = gridIndex.toString();\r\n }\r\n\r\n gridIndex++;\r\n }\r\n\r\n if (props.direction === SplitDirection.Horizontal) {\r\n elementRef.current.style.gridTemplateRows = \"100%\";\r\n elementRef.current.style.gridTemplateColumns = gridDefinition;\r\n } else {\r\n elementRef.current.style.gridTemplateColumns = \"100%\";\r\n elementRef.current.style.gridTemplateRows = gridDefinition;\r\n }\r\n };\r\n\r\n const handleResize = () => {\r\n if (!elementRef.current) {\r\n return;\r\n }\r\n\r\n // Check if we have enough room for everyone\r\n const children = elementRef.current.children;\r\n for (let i = 0; i < children.length; i++) {\r\n if (!floatingCells[i]) {\r\n continue;\r\n }\r\n\r\n const child = children[i] as HTMLElement;\r\n let childsize: number;\r\n if (props.direction === SplitDirection.Horizontal) {\r\n childsize = child.getBoundingClientRect().width;\r\n } else {\r\n childsize = child.getBoundingClientRect().height;\r\n }\r\n\r\n if (childsize < floatingMinSize) {\r\n const missing = Math.floor(floatingMinSize - childsize);\r\n let done = 0;\r\n\r\n // picking the controller in order and try to reduce their size to fit\r\n for (let j = 0; j < controllers[i].length; j++) {\r\n const controllerIndex = controllers[i][j];\r\n const controller = children[controllerIndex] as HTMLElement;\r\n const currentSize = props.direction === SplitDirection.Horizontal ? controller.getBoundingClientRect().width : controller.getBoundingClientRect().height;\r\n let newSize = currentSize - missing;\r\n if (minSizes[controllerIndex]) {\r\n newSize = Math.max(newSize, minSizes[controllerIndex]);\r\n }\r\n if (props.direction === SplitDirection.Horizontal) {\r\n controller.style.width = `${newSize}px`;\r\n } else {\r\n controller.style.height = `${newSize}px`;\r\n }\r\n\r\n done += currentSize - newSize;\r\n\r\n if (done === missing) {\r\n // We made it\r\n break;\r\n }\r\n }\r\n }\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n buildGridDefinition();\r\n\r\n // Add event listener for window resize\r\n window.addEventListener(\"resize\", handleResize);\r\n\r\n // Cleanup the event listener on component unmount\r\n return () => {\r\n window.removeEventListener(\"resize\", handleResize);\r\n };\r\n }, []);\r\n\r\n const drag = (offset: number, source: HTMLElement, controlledSide: ControlledSize) => {\r\n if (!elementRef.current) {\r\n return;\r\n }\r\n\r\n const children = elementRef.current.children;\r\n const childArray = Array.from(children) as HTMLElement[];\r\n const sourceIndex = childArray.indexOf(source);\r\n if (sourceIndex <= 0) {\r\n return;\r\n }\r\n\r\n let current: number;\r\n if (controlledSide === ControlledSize.First) {\r\n current = sourceIndex - 1;\r\n } else {\r\n current = sourceIndex + 1;\r\n }\r\n const minSize = minSizes[current] || 0;\r\n const maxSize = maxSizes[current];\r\n\r\n noInitialSizes[current] = false;\r\n buildGridDefinition();\r\n\r\n let newSize = Math.floor(controlledSide === ControlledSize.First ? sizes[current] + offset : sizes[current] - offset);\r\n\r\n // Min size check\r\n if (newSize < minSize) {\r\n newSize = minSize;\r\n }\r\n\r\n // Max size check\r\n if (maxSize && newSize > maxSize) {\r\n newSize = maxSize;\r\n }\r\n\r\n // Max size check across the whole container\r\n const maxContainerSize = sizes.reduce((a, b) => a + b, 0) || 0;\r\n let totalSize = 0;\r\n let totalFloating = 0;\r\n for (let i = 0; i < children.length; i++) {\r\n if (floatingCells[i]) {\r\n totalFloating++;\r\n } else {\r\n totalSize += i === current ? newSize : sizes[i];\r\n }\r\n }\r\n\r\n if (maxContainerSize - totalSize < floatingMinSize * totalFloating) {\r\n newSize = maxContainerSize - floatingMinSize * totalFloating;\r\n }\r\n\r\n if (props.direction === SplitDirection.Horizontal) {\r\n childArray[current].style.width = `${newSize}px`;\r\n } else {\r\n childArray[current].style.height = `${newSize}px`;\r\n }\r\n };\r\n\r\n const beginDrag = () => {\r\n if (!elementRef.current) {\r\n return;\r\n }\r\n const children = elementRef.current.children;\r\n sizes.length = 0;\r\n for (const child of children) {\r\n const childElement = child as HTMLElement;\r\n\r\n if (props.direction === SplitDirection.Horizontal) {\r\n sizes.push(childElement.getBoundingClientRect().width);\r\n } else {\r\n sizes.push(childElement.getBoundingClientRect().height);\r\n }\r\n }\r\n };\r\n\r\n const endDrag = () => {\r\n sizes.length = 0;\r\n };\r\n\r\n // We assume splitter are not flagging floating cells in a different way\r\n const sync = (source: HTMLElement, controlledSide: ControlledSize, size?: number, minSize?: number, maxSize?: number) => {\r\n if (!elementRef.current) {\r\n return;\r\n }\r\n\r\n const children = elementRef.current.children;\r\n const childArray = Array.from(children) as HTMLElement[];\r\n const sourceIndex = childArray.indexOf(source);\r\n if (sourceIndex <= 0) {\r\n return;\r\n }\r\n\r\n let current: number;\r\n let other: number;\r\n if (controlledSide === ControlledSize.First) {\r\n current = sourceIndex - 1;\r\n other = sourceIndex + 1;\r\n } else {\r\n current = sourceIndex + 1;\r\n other = sourceIndex - 1;\r\n }\r\n\r\n if (size !== undefined) {\r\n const sizeString = `${size | 0}px`;\r\n\r\n if (!childArray[current].style.width) {\r\n if (props.direction === SplitDirection.Horizontal) {\r\n childArray[current].style.width = sizeString;\r\n } else {\r\n childArray[current].style.height = sizeString;\r\n }\r\n }\r\n } else {\r\n noInitialSizes[current] = true;\r\n }\r\n\r\n if (minSize !== undefined) {\r\n minSizes[current] = minSize;\r\n }\r\n\r\n if (maxSize !== undefined) {\r\n maxSizes[current] = maxSize;\r\n }\r\n\r\n if (!controllers[other]) {\r\n controllers[other] = [];\r\n }\r\n controllers[other].push(current);\r\n floatingCells[other] = true;\r\n };\r\n\r\n return (\r\n <SplitContext.Provider value={{ direction: props.direction, drag, beginDrag, endDrag, sync }}>\r\n <div\r\n id={props.id}\r\n className={styles[\"split-container\"] + \" \" + props.className}\r\n style={useFluent ? { height: \"100vh\" } : undefined} // temporary until splitContainer is fluentized\r\n ref={elementRef}\r\n onPointerDown={(evt) => props.onPointerDown && props.onPointerDown(evt)}\r\n onPointerMove={(evt) => props.onPointerMove && props.onPointerMove(evt)}\r\n onPointerUp={(evt) => props.onPointerUp && props.onPointerUp(evt)}\r\n onDrop={(evt) => props.onDrop && props.onDrop(evt)}\r\n onDragOver={(evt) => props.onDragOver && props.onDragOver(evt)}\r\n >\r\n {props.children}\r\n </div>\r\n </SplitContext.Provider>\r\n );\r\n};\r\n"]}