@helpwave/hightide/dist/components/Ring.mjs.map

helpwave's component and theming library

{"version":3,"sources":["../../src/components/Ring.tsx","../../src/util/noop.ts","../../src/components/Circle.tsx"],"sourcesContent":["import type { CSSProperties } from 'react'\nimport { useCallback, useEffect, useState } from 'react'\nimport { noop } from '../util/noop'\nimport { Circle } from './Circle'\nimport clsx from 'clsx'\n\nexport type RingProps = {\n  innerSize: number, // the size of the entire circle including the circleWidth\n  width: number,\n  className?: string,\n};\n\nexport const Ring = ({\n                       innerSize = 20,\n                       width = 7,\n                       className = 'outline-primary',\n                     }: RingProps) => {\n  return (\n    <div\n      className={clsx(`bg-transparent rounded-full outline`, className)}\n      style={{\n        width: `${innerSize}px`,\n        height: `${innerSize}px`,\n        outlineWidth: `${width}px`,\n      }}\n    />\n  )\n}\n\nexport type AnimatedRingProps = RingProps & {\n  fillAnimationDuration?: number, // in seconds, 0 means no animation\n  repeating?: boolean,\n  onAnimationFinished?: () => void,\n  style?: CSSProperties,\n};\n\nexport const AnimatedRing = ({\n                               innerSize,\n                               width,\n                               className,\n                               fillAnimationDuration = 3,\n                               repeating = false,\n                               onAnimationFinished = noop,\n                               style,\n                             }: AnimatedRingProps) => {\n  const [currentWidth, setCurrentWidth] = useState(0)\n  const milliseconds = 1000 * fillAnimationDuration\n\n  const animate = useCallback((timestamp: number, startTime: number) => {\n    const progress = Math.min((timestamp - startTime) / milliseconds, 1)\n    const newWidth = Math.min(width * progress, width)\n\n    setCurrentWidth(newWidth)\n\n    if (progress < 1) {\n      requestAnimationFrame((newTimestamp) => animate(newTimestamp, startTime))\n    } else {\n      onAnimationFinished()\n      if (repeating) {\n        setCurrentWidth(0)\n        requestAnimationFrame((newTimestamp) => animate(newTimestamp, newTimestamp))\n      }\n    }\n  }, [milliseconds, onAnimationFinished, repeating, width])\n\n  useEffect(() => {\n    if (currentWidth < width) {\n      requestAnimationFrame((timestamp) => animate(timestamp, timestamp))\n    }\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  return (\n    <div\n      className=\"row items-center justify-center\"\n      style={{\n        width: `${innerSize + 2 * width}px`,\n        height: `${innerSize + 2 * width}px`,\n        ...style,\n      }}\n    >\n      <Ring\n        innerSize={innerSize}\n        width={currentWidth}\n        className={className}\n      />\n    </div>\n  )\n}\n\nexport type RingWaveProps = Omit<AnimatedRingProps, 'innerSize'> & {\n  startInnerSize: number,\n  endInnerSize: number,\n  style?: CSSProperties,\n};\n\nexport const RingWave = ({\n                           startInnerSize = 20,\n                           endInnerSize = 30,\n                           width,\n                           className,\n                           fillAnimationDuration = 3,\n                           repeating = false,\n                           onAnimationFinished = noop,\n                           style\n                         }: RingWaveProps) => {\n  const [currentInnerSize, setCurrentInnerSize] = useState(startInnerSize)\n  const distance = endInnerSize - startInnerSize\n  const milliseconds = 1000 * fillAnimationDuration\n\n  const animate = useCallback((timestamp: number, startTime: number) => {\n    const progress = Math.min((timestamp - startTime) / milliseconds, 1)\n    const newInnerSize = Math.min(\n      startInnerSize + distance * progress,\n      endInnerSize\n    )\n\n    setCurrentInnerSize(newInnerSize)\n\n    if (progress < 1) {\n      requestAnimationFrame((newTimestamp) => animate(newTimestamp, startTime))\n    } else {\n      onAnimationFinished()\n      if (repeating) {\n        setCurrentInnerSize(startInnerSize)\n        requestAnimationFrame((newTimestamp) => animate(newTimestamp, newTimestamp))\n      }\n    }\n  }, [distance, endInnerSize, milliseconds, onAnimationFinished, repeating, startInnerSize])\n\n  useEffect(() => {\n    if (currentInnerSize < endInnerSize) {\n      requestAnimationFrame((timestamp) => animate(timestamp, timestamp))\n    }\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  return (\n    <div\n      className=\"row items-center justify-center\"\n      style={{\n        width: `${endInnerSize + 2 * width}px`,\n        height: `${endInnerSize + 2 * width}px`,\n        ...style\n      }}\n    >\n      <Ring\n        innerSize={currentInnerSize}\n        width={width}\n        className={className}\n      />\n    </div>\n  )\n}\n\nexport type RadialRingsProps = {\n  circle1ClassName?: string,\n  circle2ClassName?: string,\n  circle3ClassName?: string,\n  waveWidth?: number,\n  waveBaseColor?: string,\n  sizeCircle1?: number,\n  sizeCircle2?: number,\n  sizeCircle3?: number,\n};\n\n// TODO use fixed colors here to avoid artifacts\nexport const RadialRings = ({\n                              circle1ClassName = 'bg-primary/90 outline-primary/90',\n                              circle2ClassName = 'bg-primary/60 outline-primary/60',\n                              circle3ClassName = 'bg-primary/40 outline-primary/40',\n                              waveWidth = 10,\n                              waveBaseColor = 'outline-white/20',\n                              sizeCircle1 = 100,\n                              sizeCircle2 = 200,\n                              sizeCircle3 = 300\n                            }: RadialRingsProps) => {\n  const [currentRing, setCurrentRing] = useState(0)\n  const size = sizeCircle3\n\n  return (\n    <div\n      className=\"relative\"\n      style={{\n        width: `${sizeCircle3}px`,\n        height: `${sizeCircle3}px`,\n      }}\n    >\n      <Circle\n        radius={sizeCircle1 / 2}\n        className={clsx(circle1ClassName, `absolute z-[10] -translate-y-1/2 -translate-x-1/2`)}\n        style={{\n          left: `${size / 2}px`,\n          top: `${size / 2}px`\n        }}\n      />\n      {currentRing === 0 ? (\n        <AnimatedRing\n          innerSize={sizeCircle1}\n          width={(sizeCircle2 - sizeCircle1) / 2}\n          onAnimationFinished={() =>\n            currentRing === 0 ? setCurrentRing(1) : null\n          }\n          repeating={true}\n          className={clsx(circle2ClassName,\n            { 'opacity-5': currentRing !== 0 })}\n          style={{\n            left: `${size / 2}px`,\n            top: `${size / 2}px`,\n            position: 'absolute',\n            translate: `-50% -50%`,\n            zIndex: 9\n          }}\n        />\n      ) : null}\n      {currentRing === 2 ? (\n        <RingWave\n          startInnerSize={sizeCircle1 - waveWidth}\n          endInnerSize={sizeCircle2}\n          width={waveWidth}\n          repeating={true}\n          className={clsx(waveBaseColor, `opacity-5`)}\n          style={{\n            left: `${size / 2}px`,\n            top: `${size / 2}px`,\n            position: 'absolute',\n            translate: `-50% -50%`,\n            zIndex: 9,\n          }}\n        />\n      ) : null}\n      <Circle\n        radius={sizeCircle2 / 2}\n        className={clsx(circle2ClassName,\n          { 'opacity-20': currentRing < 1 },\n          `absolute z-[8] -translate-y-1/2 -translate-x-1/2`)}\n        style={{\n          left: `${size / 2}px`,\n          top: `${size / 2}px`\n        }}\n      />\n      {currentRing === 1 ? (\n        <AnimatedRing\n          innerSize={sizeCircle2 - 1} // potentially harmful\n          width={(sizeCircle3 - sizeCircle2) / 2}\n          onAnimationFinished={() =>\n            currentRing === 1 ? setCurrentRing(2) : null\n          }\n          repeating={true}\n          className={clsx(circle3ClassName)}\n          style={{\n            left: `${size / 2}px`,\n            top: `${size / 2}px`,\n            position: 'absolute',\n            translate: `-50% -50%`,\n            zIndex: 7,\n          }}\n        />\n      ) : null}\n      {currentRing === 2 ? (\n        <RingWave\n          startInnerSize={sizeCircle2}\n          endInnerSize={sizeCircle3 - waveWidth}\n          width={waveWidth}\n          repeating={true}\n          className={clsx(waveBaseColor, `opacity-5`)}\n          style={{\n            left: `${size / 2}px`,\n            top: `${size / 2}px`,\n            position: 'absolute',\n            translate: `-50% -50%`,\n            zIndex: 7,\n          }}\n        />\n      ) : null}\n      <Circle\n        radius={sizeCircle3 / 2}\n        className={clsx(circle3ClassName,\n          { 'opacity-20': currentRing < 2 },\n          `absolute z-[6] -translate-y-1/2 -translate-x-1/2`)}\n        style={{\n          left: `${size / 2}px`,\n          top: `${size / 2}px`\n        }}\n      />\n    </div>\n  )\n}\n","export const noop = () => undefined\n","import type { HTMLAttributes } from 'react'\nimport clsx from 'clsx'\n\nexport type CircleProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'color'> & {\n  radius: number,\n  className?: string,\n}\n\nexport const Circle = ({\n  radius = 20,\n  className = 'bg-primary',\n  style,\n  ...restProps\n}: CircleProps) => {\n  const size = radius * 2\n  return (\n    <div\n      className={clsx(`rounded-full`, className)}\n      style={{\n        width: `${size}px`,\n        height: `${size}px`,\n        ...style,\n      }}\n      {...restProps}\n    />\n  )\n}\n"],"mappings":"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","names":["clsx","jsx"]}