@lobehub/ui/es/ScrollShadow/ScrollShadow.mjs.map

Lobe UI is an open-source UI component library for building AIGC web apps

{"version":3,"file":"ScrollShadow.mjs","names":["Flexbox"],"sources":["../../src/ScrollShadow/ScrollShadow.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport type { FC } from 'react';\nimport { useMemo, useRef } from 'react';\nimport { mergeRefs } from 'react-merge-refs';\n\nimport { Flexbox } from '@/Flex';\nimport { useEventCallback } from '@/hooks/useEventCallback';\n\nimport { variants } from './style';\nimport type { ScrollShadowProps } from './type';\nimport { useScrollOverflow } from './useScrollOverflow';\n\nconst ScrollShadow: FC<ScrollShadowProps> = ({\n  className,\n  children,\n  orientation = 'vertical',\n  hideScrollBar = false,\n  size = 16,\n  offset = 8,\n  visibility = 'auto',\n  isEnabled = true,\n  onVisibilityChange,\n  style,\n  ref,\n  ...rest\n}) => {\n  // Convert size prop to CSS variable\n  const cssVariables = useMemo<Record<string, string>>(\n    () => ({\n      '--scroll-shadow-size': `${size}%`,\n    }),\n    [size],\n  );\n  const domRef = useRef<HTMLDivElement>(null);\n\n  const onVisibilityChangeEvent = useEventCallback<\n    NonNullable<ScrollShadowProps['onVisibilityChange']>\n  >((visibility) => {\n    onVisibilityChange?.(visibility);\n  });\n  // 使用滚动检测钩子\n  const scrollState = useScrollOverflow({\n    domRef,\n    isEnabled: isEnabled && visibility === 'auto',\n    offset,\n    onVisibilityChange: onVisibilityChangeEvent,\n    orientation,\n    updateDeps: [children],\n  });\n\n  // 决定最终的滚动状态\n  const finalScrollState = useMemo(() => {\n    if (visibility === 'always') {\n      return {\n        bottom: true,\n        left: true,\n        right: true,\n        top: true,\n      };\n    }\n\n    if (visibility === 'never') {\n      return {\n        bottom: false,\n        left: false,\n        right: false,\n        top: false,\n      };\n    }\n\n    return scrollState;\n  }, [visibility, scrollState]);\n\n  // 计算数据属性\n  const dataAttributes = useMemo(() => {\n    const attributes: Record<string, boolean | string> = {\n      'data-orientation': orientation,\n    };\n\n    if (orientation === 'vertical') {\n      if (finalScrollState.top && finalScrollState.bottom) {\n        attributes['data-top-bottom-scroll'] = true;\n      } else if (finalScrollState.top) {\n        attributes['data-top-scroll'] = true;\n      } else if (finalScrollState.bottom) {\n        attributes['data-bottom-scroll'] = true;\n      }\n    } else {\n      if (finalScrollState.left && finalScrollState.right) {\n        attributes['data-left-right-scroll'] = true;\n      } else if (finalScrollState.left) {\n        attributes['data-left-scroll'] = true;\n      } else if (finalScrollState.right) {\n        attributes['data-right-scroll'] = true;\n      }\n    }\n\n    return attributes;\n  }, [orientation, finalScrollState]);\n\n  // 计算滚动位置变体\n  const scrollPosition = useMemo(() => {\n    if (orientation === 'vertical') {\n      if (finalScrollState.top && finalScrollState.bottom) return 'top-bottom';\n      if (finalScrollState.top) return 'top';\n      if (finalScrollState.bottom) return 'bottom';\n    } else {\n      if (finalScrollState.left && finalScrollState.right) return 'left-right';\n      if (finalScrollState.left) return 'left';\n      if (finalScrollState.right) return 'right';\n    }\n    return 'none';\n  }, [orientation, finalScrollState]);\n\n  return (\n    <Flexbox\n      className={cx(variants({ hideScrollBar, orientation, scrollPosition }), className)}\n      ref={mergeRefs<HTMLDivElement>([domRef, ref])}\n      style={{\n        ...cssVariables,\n        ...style,\n      }}\n      {...dataAttributes}\n      {...rest}\n    >\n      {children}\n    </Flexbox>\n  );\n};\n\nScrollShadow.displayName = 'ScrollShadow';\n\nexport default ScrollShadow;\n"],"mappings":";;;;;;;;;;AAcA,MAAM,gBAAuC,EAC3C,WACA,UACA,cAAc,YACd,gBAAgB,OAChB,OAAO,IACP,SAAS,GACT,aAAa,QACb,YAAY,MACZ,oBACA,OACA,KACA,GAAG,WACC;CAEJ,MAAM,eAAe,eACZ,EACL,wBAAwB,GAAG,KAAK,GAClC,IACA,CAAC,IAAI,CACP;CACA,MAAM,SAAS,OAAuB,IAAI;CAE1C,MAAM,0BAA0B,kBAE7B,eAAe;EAChB,qBAAqB,UAAU;CACjC,CAAC;CAED,MAAM,cAAc,kBAAkB;EACpC;EACA,WAAW,aAAa,eAAe;EACvC;EACA,oBAAoB;EACpB;EACA,YAAY,CAAC,QAAQ;CACvB,CAAC;CAGD,MAAM,mBAAmB,cAAc;EACrC,IAAI,eAAe,UACjB,OAAO;GACL,QAAQ;GACR,MAAM;GACN,OAAO;GACP,KAAK;EACP;EAGF,IAAI,eAAe,SACjB,OAAO;GACL,QAAQ;GACR,MAAM;GACN,OAAO;GACP,KAAK;EACP;EAGF,OAAO;CACT,GAAG,CAAC,YAAY,WAAW,CAAC;CAG5B,MAAM,iBAAiB,cAAc;EACnC,MAAM,aAA+C,EACnD,oBAAoB,YACtB;EAEA,IAAI,gBAAgB;OACd,iBAAiB,OAAO,iBAAiB,QAC3C,WAAW,4BAA4B;QAClC,IAAI,iBAAiB,KAC1B,WAAW,qBAAqB;QAC3B,IAAI,iBAAiB,QAC1B,WAAW,wBAAwB;EAAA,OAGrC,IAAI,iBAAiB,QAAQ,iBAAiB,OAC5C,WAAW,4BAA4B;OAClC,IAAI,iBAAiB,MAC1B,WAAW,sBAAsB;OAC5B,IAAI,iBAAiB,OAC1B,WAAW,uBAAuB;EAItC,OAAO;CACT,GAAG,CAAC,aAAa,gBAAgB,CAAC;CAgBlC,OACE,oBAACA,mBAAD;EACE,WAAW,GAAG,SAAS;GAAE;GAAe;GAAa,gBAflC,cAAc;IACnC,IAAI,gBAAgB,YAAY;KAC9B,IAAI,iBAAiB,OAAO,iBAAiB,QAAQ,OAAO;KAC5D,IAAI,iBAAiB,KAAK,OAAO;KACjC,IAAI,iBAAiB,QAAQ,OAAO;IACtC,OAAO;KACL,IAAI,iBAAiB,QAAQ,iBAAiB,OAAO,OAAO;KAC5D,IAAI,iBAAiB,MAAM,OAAO;KAClC,IAAI,iBAAiB,OAAO,OAAO;IACrC;IACA,OAAO;GACT,GAAG,CAAC,aAAa,gBAAgB,CAIqC;EAAE,CAAC,GAAG,SAAS;EACjF,KAAK,UAA0B,CAAC,QAAQ,GAAG,CAAC;EAC5C,OAAO;GACL,GAAG;GACH,GAAG;EACL;EACA,GAAI;EACJ,GAAI;EAEH;CACM,CAAA;AAEb;AAEA,aAAa,cAAc"}