@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
1 lines • 6.42 kB
Source Map (JSON)
{"version":3,"file":"use-scroll-area.cjs","names":["mergeRefs"],"sources":["../../../../src/components/scroll-area/use-scroll-area.ts"],"sourcesContent":["\"use client\"\n\nimport type { UIEvent } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport { useCallback, useEffect, useId, useMemo, useRef, useState } from \"react\"\nimport {\n dataAttr,\n handlerAll,\n isMac,\n mergeRefs,\n useSafeLayoutEffect,\n vendor,\n} from \"../../utils\"\n\nexport interface UseScrollAreaProps extends HTMLProps {\n /**\n * Scrollbar visibility type.\n *\n * @default 'hover'\n */\n type?: \"always\" | \"hover\" | \"never\" | \"scroll\"\n /**\n * Delay in milliseconds before scrollbars are hidden.\n *\n * @default 1000\n */\n scrollHideDelay?: number\n /**\n * Callback function for when the scroll position changes.\n */\n onScrollPositionChange?: ({ x, y }: { x: number; y: number }) => void\n}\n\nexport const useScrollArea = ({\n id,\n ref,\n type = \"hover\",\n scrollHideDelay = 1000,\n onScrollPositionChange,\n ...rest\n}: UseScrollAreaProps = {}) => {\n const [isHovered, setIsHovered] = useState<boolean>(false)\n const [isScrolling, setIsScrolling] = useState<boolean>(false)\n const isAlways = type === \"always\"\n const isNever = type === \"never\"\n const isHidden = !isAlways && !isHovered && !isScrolling\n const isSafari = isMac() && vendor(/apple/i)\n const uuid = useId()\n const key = `${id ?? uuid}-${isHovered}-${isScrolling}`\n\n const hoverTimeout = useRef<any>(undefined)\n const scrollTimeout = useRef<any>(undefined)\n const scrollAreaRef = useRef<HTMLDivElement>(null)\n const scrollPosition = useRef({ x: 0, y: 0 })\n\n useSafeLayoutEffect(() => {\n if (!scrollAreaRef.current || !isSafari) return\n\n scrollAreaRef.current.scrollLeft = scrollPosition.current.x\n scrollAreaRef.current.scrollTop = scrollPosition.current.y\n })\n\n const onMouseEnter = useCallback(() => {\n if (type !== \"hover\") return\n\n clearTimeout(hoverTimeout.current)\n\n setIsHovered(true)\n }, [type])\n\n const onMouseLeave = useCallback(() => {\n if (type !== \"hover\") return\n\n hoverTimeout.current = setTimeout(\n () => setIsHovered(false),\n scrollHideDelay,\n )\n }, [scrollHideDelay, type])\n\n const onScroll = useCallback(\n (ev: UIEvent<HTMLDivElement>) => {\n const el = ev.target as HTMLDivElement\n\n const { scrollLeft: x, scrollTop: y } = el\n const { x: prevX, y: prevY } = scrollPosition.current\n const isEqual = Math.abs(x - prevX) <= 5 && Math.abs(y - prevY) <= 5\n\n onScrollPositionChange?.({ x, y })\n scrollPosition.current = { x, y }\n\n if (type !== \"scroll\" || isEqual) return\n\n if (!isScrolling) setIsScrolling(true)\n\n clearTimeout(scrollTimeout.current)\n\n scrollTimeout.current = setTimeout(\n () => setIsScrolling(false),\n scrollHideDelay,\n )\n },\n [isScrolling, onScrollPositionChange, scrollHideDelay, type],\n )\n\n useEffect(() => {\n return () => {\n if (hoverTimeout.current) clearTimeout(hoverTimeout.current)\n if (scrollTimeout.current) clearTimeout(scrollTimeout.current)\n }\n }, [])\n\n const safariProps = useMemo(\n () => ({\n key,\n ref: mergeRefs(ref, scrollAreaRef),\n \"data-key\": key,\n }),\n [key, ref, scrollAreaRef],\n )\n\n const getRootProps: PropGetter = useCallback(\n ({ style, ...props } = {}) => ({\n ref,\n style: { overflow: \"auto\", ...style },\n ...rest,\n ...(isSafari ? safariProps : {}),\n ...props,\n \"data-hidden\": dataAttr(isHidden),\n \"data-hover\": dataAttr(isHovered),\n \"data-never\": dataAttr(isNever),\n \"data-scroll\": dataAttr(isScrolling),\n tabIndex: 0,\n onMouseEnter: handlerAll(\n props.onMouseEnter,\n rest.onMouseEnter,\n onMouseEnter,\n ),\n onMouseLeave: handlerAll(\n props.onMouseLeave,\n rest.onMouseLeave,\n onMouseLeave,\n ),\n onScroll: handlerAll(props.onScroll, rest.onScroll, onScroll),\n }),\n [\n isNever,\n ref,\n isHidden,\n isHovered,\n isScrolling,\n isSafari,\n safariProps,\n rest,\n onMouseEnter,\n onMouseLeave,\n onScroll,\n ],\n )\n\n return {\n isAlways,\n isHidden,\n isHovered,\n isNever,\n isScrolling,\n getRootProps,\n }\n}\n\nexport type UseScrollAreaReturn = ReturnType<typeof useScrollArea>\n"],"mappings":";;;;;;;;;;;AAiCA,MAAa,iBAAiB,EAC5B,IACA,KACA,OAAO,SACP,kBAAkB,KAClB,uBACA,GAAG,SACmB,EAAE,KAAK;CAC7B,MAAM,CAAC,WAAW,oCAAkC,MAAM;CAC1D,MAAM,CAAC,aAAa,sCAAoC,MAAM;CAC9D,MAAM,WAAW,SAAS;CAC1B,MAAM,UAAU,SAAS;CACzB,MAAM,WAAW,CAAC,YAAY,CAAC,aAAa,CAAC;CAC7C,MAAM,yDAAkB,kDAAW,SAAS;CAC5C,MAAM,yBAAc;CACpB,MAAM,MAAM,GAAG,MAAM,KAAK,GAAG,UAAU,GAAG;CAE1C,MAAM,iCAA2B,OAAU;CAC3C,MAAM,kCAA4B,OAAU;CAC5C,MAAM,kCAAuC,KAAK;CAClD,MAAM,mCAAwB;EAAE,GAAG;EAAG,GAAG;EAAG,CAAC;AAE7C,0CAA0B;AACxB,MAAI,CAAC,cAAc,WAAW,CAAC,SAAU;AAEzC,gBAAc,QAAQ,aAAa,eAAe,QAAQ;AAC1D,gBAAc,QAAQ,YAAY,eAAe,QAAQ;GACzD;CAEF,MAAM,4CAAiC;AACrC,MAAI,SAAS,QAAS;AAEtB,eAAa,aAAa,QAAQ;AAElC,eAAa,KAAK;IACjB,CAAC,KAAK,CAAC;CAEV,MAAM,4CAAiC;AACrC,MAAI,SAAS,QAAS;AAEtB,eAAa,UAAU,iBACf,aAAa,MAAM,EACzB,gBACD;IACA,CAAC,iBAAiB,KAAK,CAAC;CAE3B,MAAM,mCACH,OAAgC;EAG/B,MAAM,EAAE,YAAY,GAAG,WAAW,MAFvB,GAAG;EAGd,MAAM,EAAE,GAAG,OAAO,GAAG,UAAU,eAAe;EAC9C,MAAM,UAAU,KAAK,IAAI,IAAI,MAAM,IAAI,KAAK,KAAK,IAAI,IAAI,MAAM,IAAI;AAEnE,2BAAyB;GAAE;GAAG;GAAG,CAAC;AAClC,iBAAe,UAAU;GAAE;GAAG;GAAG;AAEjC,MAAI,SAAS,YAAY,QAAS;AAElC,MAAI,CAAC,YAAa,gBAAe,KAAK;AAEtC,eAAa,cAAc,QAAQ;AAEnC,gBAAc,UAAU,iBAChB,eAAe,MAAM,EAC3B,gBACD;IAEH;EAAC;EAAa;EAAwB;EAAiB;EAAK,CAC7D;AAED,4BAAgB;AACd,eAAa;AACX,OAAI,aAAa,QAAS,cAAa,aAAa,QAAQ;AAC5D,OAAI,cAAc,QAAS,cAAa,cAAc,QAAQ;;IAE/D,EAAE,CAAC;CAEN,MAAM,wCACG;EACL;EACA,KAAKA,sBAAU,KAAK,cAAc;EAClC,YAAY;EACb,GACD;EAAC;EAAK;EAAK;EAAc,CAC1B;AAyCD,QAAO;EACL;EACA;EACA;EACA;EACA;EACA,sCA5CC,EAAE,MAAO,GAAG,UAAU,EAAE,MAAM;GAC7B;GACA,OAAO;IAAE,UAAU;IAAQ,GAAG;IAAO;GACrC,GAAG;GACH,GAAI,WAAW,cAAc,EAAE;GAC/B,GAAG;GACH,+DAAwB,SAAS;GACjC,8DAAuB,UAAU;GACjC,8DAAuB,QAAQ;GAC/B,+DAAwB,YAAY;GACpC,UAAU;GACV,gEACE,MAAM,cACN,KAAK,cACL,aACD;GACD,gEACE,MAAM,cACN,KAAK,cACL,aACD;GACD,4DAAqB,MAAM,UAAU,KAAK,UAAU,SAAS;GAC9D,GACD;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CACF;EASA"}