reeling/dist/index.cjs.map

A React loading indicator inspired by curated cinema

{"version":3,"sources":["../src/Reeling.tsx","../src/useReeling.ts","../src/constants.ts"],"names":["KEYFRAMES","keyframes","RATIO","useReeling","props","containerRef","useRef","minimum","setMinimum","useState","borderWidth","setBorderWidth","useEffect","update"],"mappings":"AAEA,oNAAoB,+BCFiC,ICExCA,CAAAA,CAAYC,gBAAAA,CAAAA;AAAA;AAAA,CAAA,CAIZC,CAAAA,CAAQ,KAAA,CDFN,SAARC,CAAAA,CAA6BC,CAAAA,CAA6B,CAC/D,IAAMC,CAAAA,CAAeC,4BAAAA,IAA2B,CAAA,CAC1C,CAACC,CAAAA,CAASC,CAAU,CAAA,CAAIC,8BAAAA,KAAc,CAAA,CACtC,CAACC,CAAAA,CAAaC,CAAc,CAAA,CAAIF,8BAAAA,KAAc,CAAA,CAEpDG,+BAAAA,CAAU,CAAA,EAAM,CACd,SAASC,CAAAA,CAAAA,CAAgB,CACvB,EAAA,CAAIR,CAAAA,CAAa,OAAA,EAAW,IAAA,CAC1B,MAAA,CAEF,IAAME,CAAAA,CAAU,IAAA,CAAK,GAAA,CACnBF,CAAAA,CAAa,OAAA,CAAQ,YAAA,CACrBA,CAAAA,CAAa,OAAA,CAAQ,WACvB,CAAA,CACMK,CAAAA,CAAcH,CAAAA,CAAUL,CAAAA,CAC9BS,CAAAA,CAAe,CAAA,EAAA","file":"/home/david/Sync/reeling/dist/index.cjs","sourcesContent":["/** @jsxImportSource @emotion/react */\nimport { JSX } from 'react'\nimport { css } from '@emotion/react'\nimport { ReelingProps } from './types'\nimport useReeling from './useReeling'\nimport { KEYFRAMES } from './constants'\n\nexport default function Reeling (props: ReelingProps): JSX.Element {\n  const use = useReeling(props)\n\n  const canisterStyle: React.CSSProperties = {\n    height: use.size,\n    width: use.size,\n    aspectRatio: '1/1',\n    position: 'relative',\n    display: 'flex',\n    boxSizing: 'border-box',\n    ...props.canisterStyle\n  }\n\n  const reelClass = css({\n    width: use.minimum,\n    height: use.minimum,\n    borderRadius: '50%',\n    borderWidth: use.borderWidth,\n    borderStyle: 'solid',\n    borderTopColor: use.color,\n    borderRightColor: use.color,\n    borderBottomColor: use.color,\n    borderLeftColor: 'transparent',\n    animation: `${KEYFRAMES} 1.5s infinite linear`,\n    boxSizing: 'border-box',\n    '&::before, &::after': {\n      content: '\"\"',\n      position: 'absolute',\n      inset: `-${use.borderWidth}`,\n      borderRadius: '50%',\n      border: 'inherit',\n      animation: 'inherit'\n    },\n    '&::before': {\n      animationDuration: '3s'\n    },\n    '&::after': {\n      animationDuration: '6s'\n    },\n    ...props.reelStyle\n  })\n\n  return (\n    <div\n      className={props.canisterClassName}\n      ref={use.ref}\n      style={canisterStyle}\n    >\n      <span\n        className={props.reelClassName}\n        css={reelClass}\n      />\n    </div>\n  )\n}\n","import { useEffect, useState, useRef, useMemo } from 'react'\nimport { UseReelingProps, Use } from './types'\nimport { RATIO } from './constants'\n\nexport default function useReeling (props: UseReelingProps): Use {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [minimum, setMinimum] = useState('0px')\n  const [borderWidth, setBorderWidth] = useState('0px')\n\n  useEffect(() => {\n    function update (): void {\n      if (containerRef.current == null) {\n        return\n      }\n      const minimum = Math.min(\n        containerRef.current.offsetHeight,\n        containerRef.current.offsetWidth\n      )\n      const borderWidth = minimum / RATIO\n      setBorderWidth(`${borderWidth}px`)\n      setMinimum(`${minimum}px`)\n    }\n    update()\n\n    const observer = new ResizeObserver(update)\n    if (containerRef.current != null) {\n      observer.observe(containerRef.current)\n    }\n\n    return () => {\n      if (containerRef.current == null) {\n        return\n      }\n      observer.unobserve(containerRef.current)\n    }\n  }, [])\n\n  const color = props.noir === true\n    ? 'rgba(0, 0, 0, 0.5)'\n    : 'rgba(255, 255, 255, 0.33)'\n\n  const size = props.size ?? '100%'\n\n  const value = useMemo(() => {\n    return {\n      color,\n      ref: containerRef,\n      minimum,\n      borderWidth,\n      size\n    }\n  }, [color, minimum, borderWidth, size])\n\n  return value\n}\n","import { keyframes } from '@emotion/react'\n\nexport const KEYFRAMES = keyframes`\n  100% { transform: rotate(1turn) }\n`\n\nexport const RATIO = 4.375\n"]}