| 1 | {"version":3,"file":"LoadingRing.js","sources":["../src/components/LoadingRing/LoadingRing.js"],"sourcesContent":["import React, { useMemo, useState } from 'react'\nimport PropTypes from 'prop-types'\nimport { keyframes } from 'styled-components'\nimport { useInside } from 'use-inside'\nimport { useTheme } from '../../theme'\n\nconst spin = keyframes`\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n`\n\nconst SIZE_SMALL = 14\nconst SIZE_MEDIUM = 24\n\nconst CONTAINER_SIZE_SMALL = 22\nconst CONTAINER_SIZE_MEDIUM = 24\n\nconst BORDER_WIDTH_STRONG = 2.5\nconst BORDER_WIDTH_MEDIUM = 1\n\nlet lastInstanceId = 1\n\nconst LoadingRing = React.memo(function LoadingRing({\n paused,\n mode: modeProp,\n ...props\n}) {\n const theme = useTheme()\n const [instanceId] = useState(() => `sync-indicator-${lastInstanceId++}`)\n const [insideFloatIndicator] = useInside('FloatIndicator')\n\n const mode = modeProp || (insideFloatIndicator ? 'half-circle' : 'two-parts')\n\n const containerSize =\n mode === 'half-circle' ? CONTAINER_SIZE_MEDIUM : CONTAINER_SIZE_SMALL\n const borderWidth =\n mode === 'half-circle' ? BORDER_WIDTH_STRONG : BORDER_WIDTH_MEDIUM\n const size = (mode === 'half-circle' ? SIZE_MEDIUM : SIZE_SMALL) - borderWidth\n\n const [gapLength, dashLength] = useMemo(() => {\n const length = Math.PI * size\n\n // Both modes display a full circle when paused.\n if (paused) {\n return [0, length]\n }\n\n if (mode === 'two-parts') {\n return [length / 4, length / 4]\n }\n\n // half-circle\n return [length / 2, length / 2]\n }, [mode, size, paused])\n\n return (\n <span\n css={`\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: ${containerSize}px;\n height: ${containerSize}px;\n `}\n {...props}\n >\n <svg\n width={size + borderWidth}\n height={size + borderWidth}\n viewBox={`0 0 ${size + borderWidth} ${size + borderWidth}`}\n >\n <linearGradient\n id={`${instanceId}-gradient`}\n gradientTransform=\"rotate(90)\"\n >\n <stop offset=\"0%\" stopColor={theme.accentEnd} />\n <stop offset=\"100%\" stopColor={theme.accentStart} />\n </linearGradient>\n {insideFloatIndicator && (\n <circle\n cx=\"50%\"\n cy=\"50%\"\n r={size / 2}\n fill=\"transparent\"\n stroke={theme.floatingContent.alpha(0.3)}\n strokeWidth={borderWidth}\n />\n )}\n <mask id={`${instanceId}-mask`}>\n <circle\n cx=\"50%\"\n cy=\"50%\"\n r={size / 2}\n fill=\"transparent\"\n stroke={`url(#${instanceId}-gradient)`}\n strokeWidth={borderWidth}\n strokeDasharray={`${dashLength} ${gapLength}`}\n css={`\n animation-duration: 1s;\n animation-iteration-count: infinite;\n animation-timing-function: linear;\n animation-name: ${paused ? 'none' : spin};\n transform-origin: 50% 50%;\n `}\n />\n </mask>\n <circle\n cx=\"50%\"\n cy=\"50%\"\n r={size / 2 + borderWidth / 2}\n fill={`url(#${instanceId}-gradient)`}\n mask={`url(#${instanceId}-mask)`}\n />\n </svg>\n </span>\n )\n})\n\nLoadingRing.propTypes = {\n mode: PropTypes.oneOf(['two-parts', 'half-circle']),\n paused: PropTypes.bool,\n}\n\nLoadingRing.defaultProps = {\n paused: false,\n}\n\nexport default LoadingRing\n"],"names":["spin","keyframes","SIZE_SMALL","SIZE_MEDIUM","CONTAINER_SIZE_SMALL","CONTAINER_SIZE_MEDIUM","BORDER_WIDTH_STRONG","BORDER_WIDTH_MEDIUM","lastInstanceId","LoadingRing","React","memo","paused","modeProp","mode","props","theme","useTheme","useState","instanceId","useInside","insideFloatIndicator","containerSize","borderWidth","size","useMemo","length","Math","PI","gapLength","dashLength","accentEnd","accentStart","floatingContent","alpha","propTypes","PropTypes","oneOf","bool","defaultProps"],"mappings":"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"} |