@column-resizer/react
Version:
[](https://github.com/Runjuu/column-resizer/blob/main/LICENSE) [](#contributing) [
{"version":3,"sources":["../../src/index.ts","../../src/container/index.tsx","../../src/context.tsx","../../src/hooks.ts","../../src/hooks-renderer.tsx","../../src/container/use-watch-column-events.ts","../../src/section/index.tsx","../../src/bar/index.tsx","../../src/bar/styled.tsx"],"sourcesContent":["export * from '@column-resizer/core';\n\nexport * from './container';\nexport * from './section';\nexport * from './bar';\n","import { ColumnResizer, ColumnResizerConfig } from '@column-resizer/core';\nimport * as React from 'react';\n\nimport { ColumnResizerContext } from '../context';\nimport { useForwardedRef, useInitColumnResizer, useIsomorphicLayoutEffect } from '../hooks';\nimport { HooksRenderer } from '../hooks-renderer';\n\nimport { UseWatchColumnEventsConfig, useWatchColumnEvents } from './use-watch-column-events';\n\nexport type ContainerProps = React.HTMLAttributes<HTMLDivElement> &\n UseWatchColumnEventsConfig &\n Partial<ColumnResizerConfig> & {\n columnResizerRef?: React.RefObject<ColumnResizer | null>;\n };\n\nexport const Container = React.forwardRef<HTMLDivElement, ContainerProps>(\n (\n {\n vertical = false,\n rtl = false,\n onActivate,\n beforeApplyResizer,\n afterResizing,\n columnResizerRef,\n style,\n ...props\n },\n ref,\n ) => {\n const containerRef = useForwardedRef<HTMLDivElement | null>(null, ref);\n const columnResizer = useInitColumnResizer({\n vertical,\n rtl,\n beforeApplyResizer,\n });\n\n useIsomorphicLayoutEffect(() => {\n columnResizer.init(containerRef.current);\n return () => columnResizer.dispose();\n }, [columnResizer]);\n\n React.useImperativeHandle(columnResizerRef, () => columnResizer, [columnResizer]);\n\n return (\n <ColumnResizerContext.Provider value={columnResizer}>\n <HooksRenderer\n hooks={useWatchColumnEvents}\n params={[containerRef, { onActivate, afterResizing }]}\n >\n {() => (\n <div ref={containerRef} {...props} style={columnResizer.styles.container(style)} />\n )}\n </HooksRenderer>\n </ColumnResizerContext.Provider>\n );\n },\n);\n","import { ColumnResizer } from '@column-resizer/core';\nimport * as React from 'react';\n\nexport const ColumnResizerContext = React.createContext<ColumnResizer | null>(null);\n","import { ColumnResizer, ColumnResizerConfig, ColumnResizerEventMap } from '@column-resizer/core';\nimport React, { MutableRefObject, Ref } from 'react';\n\nimport { ColumnResizerContext } from './context';\n\nexport const useIsomorphicLayoutEffect =\n typeof window === 'object' ? React.useLayoutEffect : React.useEffect;\n\nexport function useInitColumnResizer({\n vertical,\n rtl,\n beforeApplyResizer: beforeApplyResizer_,\n}: ColumnResizerConfig) {\n const beforeApplyResizer = useRefCallback(beforeApplyResizer_);\n\n return React.useMemo(\n () => new ColumnResizer({ vertical, beforeApplyResizer, rtl }),\n [vertical, beforeApplyResizer, rtl],\n );\n}\n\nexport function useColumnResizer() {\n return React.useContext(ColumnResizerContext)!;\n}\n\nexport function useColumnResizerEvent<E extends Element, K extends keyof ColumnResizerEventMap>(\n elmRef: React.RefObject<E | null>,\n key: K,\n callback?: (event: CustomEvent<ColumnResizerEventMap[K]>) => void,\n) {\n const columnResizer = useColumnResizer();\n const refCallback = useRefCallback(callback);\n\n React.useEffect(\n () => columnResizer.on(elmRef.current, key, (event) => refCallback(event)),\n [columnResizer, key, elmRef, refCallback],\n );\n}\n\nexport function useForwardedRef<T>(\n initialValue: T,\n refToForward: Ref<T> | undefined,\n): MutableRefObject<T> {\n const ref = React.useRef(initialValue);\n\n React.useImperativeHandle(refToForward, () => ref.current!);\n\n return ref;\n}\n\ntype AnyFunc = (...params: any[]) => any;\nexport function useRefCallback<T extends AnyFunc>(callback?: T): T;\nexport function useRefCallback(callback?: AnyFunc): AnyFunc {\n const callbackRef = React.useRef(callback);\n\n callbackRef.current = callback;\n\n return React.useCallback(\n (...params: unknown[]) => callbackRef.current?.(...params),\n [callbackRef],\n );\n}\n","import React from 'react';\n\nexport type HooksRendererProps<T extends (...args: any[]) => any> = {\n hooks: T;\n params: Parameters<T>;\n children: (result: ReturnType<T>) => React.ReactNode;\n};\n\nexport function HooksRenderer<T extends (...args: any[]) => any>({\n hooks,\n params,\n children,\n}: HooksRendererProps<T>) {\n const result = hooks(...params);\n\n return <>{children(result)}</>;\n}\n","import * as React from 'react';\nimport { useColumnResizerEvent } from '../hooks';\n\nexport type UseWatchColumnEventsConfig = {\n onActivate?: () => void;\n afterResizing?: () => void;\n};\n\nexport function useWatchColumnEvents(\n ref: React.MutableRefObject<HTMLDivElement | null>,\n { onActivate, afterResizing }: UseWatchColumnEventsConfig,\n) {\n useColumnResizerEvent(ref, 'column:activate', onActivate);\n useColumnResizerEvent(ref, 'column:after-resizing', afterResizing);\n}\n","import { ColumnSectionConfig } from '@column-resizer/core';\nimport * as React from 'react';\n\nimport { useColumnResizer, useColumnResizerEvent, useForwardedRef } from '../hooks';\n\nexport type SectionProps = React.HTMLAttributes<HTMLDivElement> &\n ColumnSectionConfig & {\n onSizeChanged?: (currentSize: number) => void;\n };\n\nexport const Section = React.forwardRef<HTMLDivElement, SectionProps>(\n (\n { defaultSize, size, disableResponsive, minSize, maxSize, onSizeChanged, style, ...props },\n innerRef,\n ) => {\n const ref = useForwardedRef<HTMLDivElement | null>(null, innerRef);\n const columnResizer = useColumnResizer();\n const config = { defaultSize, size, disableResponsive, minSize, maxSize };\n\n useColumnResizerEvent(ref, 'section:size-change', (e) => onSizeChanged?.(e.detail.size));\n\n return (\n <div\n ref={ref}\n {...props}\n style={columnResizer.styles.section(config, style)}\n {...columnResizer.attributes.section(config)}\n />\n );\n },\n);\n","import { ColumnBarConfig } from '@column-resizer/core';\n\nimport * as React from 'react';\n\nimport { useColumnResizer, useColumnResizerEvent, useForwardedRef } from '../hooks';\nimport { ExpandInteractiveArea, StyledInteractiveArea } from './styled';\n\nexport type { ExpandInteractiveArea };\n\nexport type BarProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick'> &\n Partial<ColumnBarConfig> & {\n expandInteractiveArea?: ExpandInteractiveArea;\n onClick?: () => void;\n onStatusChanged?: (isActive: boolean) => void;\n };\n\nexport const Bar = React.forwardRef<HTMLDivElement, BarProps>(\n (\n { children, onClick, expandInteractiveArea, onStatusChanged, style, size = 10, ...props },\n innerRef,\n ) => {\n const columnResizer = useColumnResizer();\n const ref = useForwardedRef<HTMLDivElement | null>(null, innerRef);\n const config = { size };\n\n useColumnResizerEvent(ref, 'bar:click', () => onClick?.());\n useColumnResizerEvent(ref, 'bar:status-change', (e) => onStatusChanged?.(e.detail.isActive));\n\n return (\n <div\n ref={ref}\n {...props}\n style={columnResizer.styles.bar(config, { ...style, position: 'relative' })}\n {...columnResizer.attributes.bar(config)}\n >\n {children}\n <StyledInteractiveArea\n {...expandInteractiveArea}\n vertical={columnResizer.config.vertical}\n />\n </div>\n );\n },\n);\n","import * as React from 'react';\n\nexport type ExpandInteractiveArea = {\n top?: number;\n left?: number;\n right?: number;\n bottom?: number;\n};\n\nexport type StyledInteractiveAreaProps = React.HTMLAttributes<HTMLDivElement> &\n ExpandInteractiveArea & {\n vertical: boolean;\n };\n\nexport const StyledInteractiveArea = React.forwardRef<HTMLDivElement, StyledInteractiveAreaProps>(\n ({ top = 0, right = 0, bottom = 0, left = 0, vertical, style: propsStyle, ...props }, ref) => {\n const style = React.useMemo(\n (): React.CSSProperties => ({\n position: 'absolute',\n top: -top,\n left: -left,\n right: -right,\n bottom: -bottom,\n WebkitTapHighlightColor: 'transparent',\n userSelect: 'none', // disable ios long press popup\n ...propsStyle,\n }),\n [propsStyle, top, left, right, bottom, vertical],\n );\n\n return <div {...props} style={style} ref={ref} />;\n },\n);\n"],"mappings":"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","names":["src_exports","__export","Bar","Container","Section","__toCommonJS","__reExport","React","React","ColumnResizerContext","import_core","import_react","useIsomorphicLayoutEffect","React","useInitColumnResizer","vertical","rtl","beforeApplyResizer_","beforeApplyResizer","useRefCallback","useColumnResizer","ColumnResizerContext","useColumnResizerEvent","elmRef","key","callback","columnResizer","refCallback","event","useForwardedRef","initialValue","refToForward","ref","callbackRef","params","import_react","HooksRenderer","hooks","params","children","result","React","useWatchColumnEvents","ref","onActivate","afterResizing","useColumnResizerEvent","Container","vertical","rtl","onActivate","beforeApplyResizer","afterResizing","columnResizerRef","style","props","ref","containerRef","useForwardedRef","columnResizer","useInitColumnResizer","useIsomorphicLayoutEffect","ColumnResizerContext","HooksRenderer","useWatchColumnEvents","React","Section","defaultSize","size","disableResponsive","minSize","maxSize","onSizeChanged","style","props","innerRef","ref","useForwardedRef","columnResizer","useColumnResizer","config","useColumnResizerEvent","e","React","React","StyledInteractiveArea","top","right","bottom","left","vertical","propsStyle","props","ref","style","Bar","children","onClick","expandInteractiveArea","onStatusChanged","style","size","props","innerRef","columnResizer","useColumnResizer","ref","useForwardedRef","config","useColumnResizerEvent","e","StyledInteractiveArea"]}