@sikka/hawa/dist/scrollIndicator/index.mjs.map

Modern UI Kit made with Tailwind

{"version":3,"sources":["../../elements/scrollIndicator/ScrollIndicator.tsx"],"sourcesContent":["import React, { FC, RefObject, useState, useEffect } from \"react\";\n\ntype ScrollIndicatorProps = {\n  anchor: RefObject<HTMLInputElement>;\n  inContainer?: boolean;\n};\n\nexport const ScrollIndicator: FC<ScrollIndicatorProps> = ({\n  anchor,\n  inContainer = false,\n}) => {\n  const [scrollPercentage, setScrollPercentage] = useState(0);\n\n  const onScroll = () => {\n    const scrollElement = anchor.current;\n    if (scrollElement) {\n      const { scrollTop, scrollHeight, clientHeight } = scrollElement;\n      const totalScroll = scrollHeight - clientHeight;\n      const scrollPosition = scrollTop;\n      const percentageScrolled = (scrollPosition / totalScroll) * 100;\n      setScrollPercentage(percentageScrolled);\n    }\n  };\n\n  useEffect(() => {\n    if (!anchor.current) return;\n\n    anchor.current.addEventListener(\"scroll\", onScroll);\n\n    return () => {\n      anchor.current?.removeEventListener(\"scroll\", onScroll);\n    };\n  }, [anchor]);\n\n  return (\n    <div\n      style={{\n        position: inContainer ? \"absolute\" : \"fixed\",\n        top: 0,\n        left: 0,\n        height: \"5px\",\n        width: `${scrollPercentage}%`,\n        backgroundColor: \"hsl(var(--primary))\",\n      }}\n    ></div>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,SAAwB,UAAU,iBAAiB;AAOnD,IAAM,kBAA4C,CAAC;AAAA,EACxD;AAAA,EACA,cAAc;AAChB,MAAM;AACJ,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAS,CAAC;AAE1D,QAAM,WAAW,MAAM;AACrB,UAAM,gBAAgB,OAAO;AAC7B,QAAI,eAAe;AACjB,YAAM,EAAE,WAAW,cAAc,aAAa,IAAI;AAClD,YAAM,cAAc,eAAe;AACnC,YAAM,iBAAiB;AACvB,YAAM,qBAAsB,iBAAiB,cAAe;AAC5D,0BAAoB,kBAAkB;AAAA,IACxC;AAAA,EACF;AAEA,YAAU,MAAM;AACd,QAAI,CAAC,OAAO,QAAS;AAErB,WAAO,QAAQ,iBAAiB,UAAU,QAAQ;AAElD,WAAO,MAAM;AA7BjB;AA8BM,mBAAO,YAAP,mBAAgB,oBAAoB,UAAU;AAAA,IAChD;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AAEX,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL,UAAU,cAAc,aAAa;AAAA,QACrC,KAAK;AAAA,QACL,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,OAAO,GAAG,gBAAgB;AAAA,QAC1B,iBAAiB;AAAA,MACnB;AAAA;AAAA,EACD;AAEL;","names":[]}