react-box-overflow/dist/cjs/BoxOverflow.cjs.map

Headless UI for automatically collapsing boxes when overflow in React.

{"version":3,"file":"BoxOverflow.cjs","sources":["../../src/BoxOverflow.tsx"],"sourcesContent":["/**\n * @author        shunzi <tobyzsj@gmail.com>\n * @date          2024-03-24 21:47:13\n */\nimport type { FunctionComponent } from 'react'\nimport React, { cloneElement, createElement, isValidElement, useContext, useMemo } from 'react'\nimport type { BoxOverflow as BoxOverflowInstance } from 'box-overflow-core'\nimport { useOverflow } from './useOverflow'\nimport type { DataType } from './types'\nimport type { BoxOverflowItemProps, BoxOverflowProps, BoxOverflowRestProps, CommonChildProps } from './interface'\nimport { capitalizeFirstLetter } from './utils'\n\nconst BoxOverflowContext = React.createContext<BoxOverflowInstance >({} as BoxOverflowInstance)\n\nconst fixedDisplayNameMap = {\n  rest: 'BoxOverflowRest',\n  prefix: 'BoxOverflowPrefix',\n  suffix: 'BoxOverflowSuffix',\n}\n\ntype FixKeys = keyof typeof fixedDisplayNameMap\n\nfunction genFixComponent(type: 'prefix' | 'suffix'): FunctionComponent<CommonChildProps> {\n  const Comp = (props: CommonChildProps) => {\n    const { component = 'div', ...restProps } = props\n    const instance = useContext(BoxOverflowContext)\n    const idKey = instance.options?.idAttribute as string\n\n    return createElement(component, { ...restProps, [idKey]: type })\n  }\n  Comp.displayName = `BoxOverflow${capitalizeFirstLetter(type)}`\n  return Comp\n}\n\nconst BoxOverflowItem: FunctionComponent<BoxOverflowItemProps> = (props: BoxOverflowItemProps) => {\n  const { component = 'div', id: _id, ...restProps } = props\n  const instance = useContext(BoxOverflowContext)\n  const idKey = instance.options?.idAttribute as string\n\n  const id = String(_id)\n\n  const style = {\n    ...props.style,\n    ...instance.getItemStyle(id),\n  }\n  return createElement(component, { ...restProps, [idKey]: id, style })\n}\nBoxOverflowItem.displayName = 'BoxOverflowItem'\n\nconst BoxOverflowRest: FunctionComponent<BoxOverflowRestProps> = (props: BoxOverflowRestProps) => {\n  const { component = 'div', children: _children, ...restProps } = props\n  const instance = useContext(BoxOverflowContext)\n  const idKey = instance.options?.idAttribute as string\n  const style = instance.getRestStyle()\n\n  const rests = instance.getRests()\n\n  const children = useMemo (() => {\n    if (typeof _children === 'function')\n      return _children(rests)\n    return _children\n  }, [_children, rests])\n\n  return createElement(component, { ...restProps, ...props, [idKey]: 'rest', children, style: { ...props.style, ...style } })\n}\nBoxOverflowRest.displayName = 'BoxOverflowRest'\n\nexport function BoxOverflow<K extends keyof any = 'key', D extends DataType<K> = DataType<K>>(props: BoxOverflowProps<K, D>) {\n  const { component, children, className, style, ...restProps } = props\n\n  const containerRef = React.useRef<HTMLDivElement>(null)\n\n  const keyList: string[] = []\n  const _children: React.ReactNode[] = []\n  const fixItems: Partial<Record<FixKeys, React.ReactElement | null>> = { }\n\n  React.Children.forEach(children, (child, index) => {\n    if (isValidElement(child)) {\n      const displayName = (child.type as unknown as { displayName: string }).displayName\n\n      if (displayName === 'BoxOverflowItem') {\n        const id = child.props.id ?? child.key ?? index\n        const idStr = String(id)\n        _children.push(cloneElement (child, { key: idStr, id: idStr, ...child.props }))\n        keyList.push(idStr)\n      }\n\n      const type = Object.entries(fixedDisplayNameMap).find(([_, value]) => value === displayName)?.[0]\n      if (type)\n        fixItems[type as FixKeys] = cloneElement(child, { key: type })\n    }\n  })\n\n  const instance = useOverflow({\n    getIdByIndex: (index: number) => {\n      return keyList[index]\n    },\n    ...restProps,\n    getContainer: () => containerRef.current as HTMLDivElement,\n  })\n\n  const _style: React.CSSProperties = {\n    ...instance.getContainerStyle() as React.CSSProperties,\n    ...style,\n  }\n\n  const _component = component || 'div'\n  return (\n    <BoxOverflowContext.Provider value={instance}>\n      {React.createElement(_component, {\n        children: [fixItems.prefix, ..._children, fixItems.rest, fixItems.suffix],\n        ref: containerRef,\n        className,\n        style: _style,\n      })}\n    </BoxOverflowContext.Provider>\n  )\n}\nBoxOverflow.displayName = 'BoxOverflow'\nBoxOverflow.Rest = BoxOverflowRest\nBoxOverflow.Item = BoxOverflowItem\nBoxOverflow.Suffix = genFixComponent('suffix')\nBoxOverflow.Prefix = genFixComponent('prefix')\n"],"names":["useContext","createElement","capitalizeFirstLetter","useMemo","isValidElement","cloneElement","useOverflow"],"mappings":"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"}