react-loader-spinner
Version:
react-spinner-loader provides simple React.js spinner component which can be implemented for async wait operation before data load to the view.
1 lines • 5.05 kB
Source Map (JSON)
{"version":3,"sources":["../src/type.ts","../src/shared/constants.ts","../src/loader/discuss.tsx"],"names":["DEFAULT_WAI_ARIA_ATTRIBUTE","SVG_NAMESPACE","Discuss","visible","width","height","wrapperClass","wrapperStyle","ariaLabel","colors","jsxs","jsx"],"mappings":"yDAIO,IAAMA,CAAAA,CAA6B,CACxC,WAAA,CAAa,IAAA,CACb,IAAA,CAAM,aACR,CAAA,CCPO,IAAMC,CAAAA,CAAgB,4BAAA,CCqCtB,IAAMC,CAAAA,CAA2C,CAAC,CACvD,OAAA,CAAAC,CAAAA,CAAU,IAAA,CACV,KAAA,CAAAC,CAAAA,CAAQ,IAAA,CACR,MAAA,CAAAC,CAAAA,CAAS,IAAA,CACT,YAAA,CAAAC,CAAAA,CAAe,EAAA,CACf,YAAA,CAAAC,CAAAA,CAAe,EAAC,CAChB,SAAA,CAAAC,CAAAA,CAAY,iBAAA,CACZ,MAAA,CAAAC,CAAAA,CAAS,CAAC,SAAA,CAAW,SAAS,CAChC,CAAA,GACUN,CAAAA,CACNO,eAAAA,CAAC,KAAA,CAAA,CACC,KAAA,CAAON,CAAAA,CACP,MAAA,CAAQC,CAAAA,CACR,KAAA,CAAOJ,CAAAA,CACP,OAAA,CAAQ,aAAA,CACR,mBAAA,CAAoB,UAAA,CACpB,SAAA,CAAWK,EACX,KAAA,CAAOC,CAAAA,CACP,YAAA,CAAYC,CAAAA,CACZ,aAAA,CAAY,aAAA,CACX,GAAGR,CAAAA,CAEJ,QAAA,CAAA,CAAAW,cAAAA,CAAC,MAAA,CAAA,CACC,IAAA,CAAK,MAAA,CACL,CAAA,CAAE,sJAAA,CACF,WAAA,CAAY,GAAA,CACZ,MAAA,CAAQF,CAAAA,CAAO,CAAC,CAAA,CACjB,CAAA,CACDE,cAAAA,CAAC,QAAA,CAAA,CACC,EAAA,CAAG,IAAA,CACH,EAAA,CAAG,IAAA,CACH,IAAA,CAAK,MAAA,CACL,aAAA,CAAc,OAAA,CACd,CAAA,CAAE,IAAA,CACF,WAAA,CAAY,GAAA,CACZ,MAAA,CAAQF,CAAAA,CAAO,CAAC,CAAA,CAChB,eAAA,CAAgB,qCAAA,CAChB,SAAA,CAAU,kBAAA,CAEV,QAAA,CAAAE,cAAAA,CAAC,kBAAA,CAAA,CACC,aAAA,CAAc,WAAA,CACd,IAAA,CAAK,QAAA,CACL,QAAA,CAAS,QAAA,CACT,MAAA,CAAO,mBAAA,CACP,QAAA,CAAS,KAAA,CACT,GAAA,CAAI,IAAA,CACJ,KAAA,CAAM,IAAA,CACN,WAAA,CAAY,YAAA,CACb,CAAA,CACH,GACF,CAAA,CAzCgB","file":"discuss.cjs","sourcesContent":["import { CSSProperties } from 'react'\n\nexport const DEFAULT_COLOR = '#4fa94d'\n\nexport const DEFAULT_WAI_ARIA_ATTRIBUTE = {\n 'aria-busy': true,\n role: 'progressbar',\n}\n\n// Reuse React's CSSProperties for consistent style typing across components\nexport type Style = CSSProperties\n\n// PrimaryProps includes common props shared by experimental components\nexport interface PrimaryProps {\n height?: string | number\n width?: string | number\n color?: string\n ariaLabel?: string\n wrapperStyle?: CSSProperties\n wrapperClass?: string\n visible?: boolean\n}\n\n\n","export const SVG_NAMESPACE = 'http://www.w3.org/2000/svg'\n","import { FunctionComponent, CSSProperties } from 'react'\nimport { DEFAULT_WAI_ARIA_ATTRIBUTE } from '../type'\nimport { SVG_NAMESPACE } from '../shared/constants'\n\n/**\n * Props for the Discuss loader component.\n * \n * The Discuss loader displays a discussion bubble with animated elements.\n * \n * @interface DiscussProps\n */\ninterface DiscussProps {\n /** Height of the SVG (number interpreted as px). */\n height?: string | number\n /** Width of the SVG (number interpreted as px). */\n width?: string | number\n /** Primary color applied to the loader. */\n color?: string\n /** Accessible label announced to screen readers. */\n ariaLabel?: string\n /** Inline style object applied to the wrapper element. */\n wrapperStyle?: CSSProperties\n /** CSS class applied to the wrapper for custom styling. */\n wrapperClass?: string\n /** When false, the loader is not rendered. Defaults to true. */\n visible?: boolean\n /** \n * Provide multiple colors to render a gradient instead of a solid color.\n * When 2 or more colors are supplied a gradient will be applied to the loader.\n */\n colors?: string[]\n /** Type of gradient (linear or radial). Defaults to linear. */\n gradientType?: 'linear' | 'radial'\n /** Angle (in degrees) applied via rotate() transform for linear gradients. */\n gradientAngle?: number\n}\n\nexport const Discuss: FunctionComponent<DiscussProps> = ({\n visible = true,\n width = '80',\n height = '80',\n wrapperClass = '',\n wrapperStyle = {},\n ariaLabel = 'discuss-loading',\n colors = ['#ff727d', '#ff727d'],\n}) => {\n return !visible ? null : (\n <svg\n width={width}\n height={height}\n xmlns={SVG_NAMESPACE}\n viewBox=\"0 0 100 100\"\n preserveAspectRatio=\"xMidYMid\"\n className={wrapperClass}\n style={wrapperStyle}\n aria-label={ariaLabel}\n data-testid=\"discuss-svg\"\n {...DEFAULT_WAI_ARIA_ATTRIBUTE}\n >\n <path\n fill=\"none\"\n d=\"M82 50A32 32 0 1 1 23.533421623214014 32.01333190873183 L21.71572875253809 21.7157287525381 L32.013331908731814 23.53342162321403 A32 32 0 0 1 82 50\"\n strokeWidth=\"5\"\n stroke={colors[0]}\n ></path>\n <circle\n cx=\"50\"\n cy=\"50\"\n fill=\"none\"\n strokeLinecap=\"round\"\n r=\"20\"\n strokeWidth=\"5\"\n stroke={colors[1]}\n strokeDasharray=\"31.41592653589793 31.41592653589793\"\n transform=\"rotate(96 50 50)\"\n >\n <animateTransform\n attributeName=\"transform\"\n type=\"rotate\"\n calcMode=\"linear\"\n values=\"0 50 50;360 50 50\"\n keyTimes=\"0;1\"\n dur=\"1s\"\n begin=\"0s\"\n repeatCount=\"indefinite\"\n ></animateTransform>\n </circle>\n </svg>\n )\n}\n"]}