UNPKG

@grafana/ui

Version:
1 lines 2.13 kB
{"version":3,"file":"skeleton.mjs","sources":["../../../src/utils/skeleton.tsx"],"sourcesContent":["import { keyframes } from '@emotion/css';\nimport * as React from 'react';\n\nconst fadeIn = keyframes({\n '0%': {\n opacity: 0,\n },\n '100%': {\n opacity: 1,\n },\n});\n\nexport const skeletonAnimation = {\n animationName: fadeIn,\n animationDelay: '100ms',\n animationTimingFunction: 'ease-in',\n animationDuration: '100ms',\n animationFillMode: 'backwards',\n};\n\ninterface SkeletonProps {\n /**\n * Spread these props at the root of your skeleton to handle animation logic\n */\n rootProps: {\n style: React.CSSProperties;\n };\n}\n\nexport type SkeletonComponent<P = {}> = React.ComponentType<P & SkeletonProps>;\n\n/**\n * Use this to attach a skeleton as a static property on the component.\n * e.g. if you render a component with `<Component />`, you can render the skeleton with `<Component.Skeleton />`.\n * @param Component A functional or class component\n * @param Skeleton A functional or class skeleton component\n * @returns A wrapped component with a static skeleton property\n */\nexport const attachSkeleton = <C extends object, P>(Component: C, Skeleton: SkeletonComponent<P>) => {\n const skeletonWrapper = (props: P) => {\n return (\n <Skeleton\n {...props}\n rootProps={{\n style: skeletonAnimation,\n }}\n />\n );\n };\n return Object.assign(Component, { Skeleton: skeletonWrapper });\n};\n"],"names":[],"mappings":";;;AAGA,MAAM,SAAS,SAAU,CAAA;AAAA,EACvB,IAAM,EAAA;AAAA,IACJ,OAAS,EAAA;AAAA,GACX;AAAA,EACA,MAAQ,EAAA;AAAA,IACN,OAAS,EAAA;AAAA;AAEb,CAAC,CAAA;AAEM,MAAM,iBAAoB,GAAA;AAAA,EAC/B,aAAe,EAAA,MAAA;AAAA,EACf,cAAgB,EAAA,OAAA;AAAA,EAChB,uBAAyB,EAAA,SAAA;AAAA,EACzB,iBAAmB,EAAA,OAAA;AAAA,EACnB,iBAAmB,EAAA;AACrB;AAoBa,MAAA,cAAA,GAAiB,CAAsB,SAAA,EAAc,QAAmC,KAAA;AACnG,EAAM,MAAA,eAAA,GAAkB,CAAC,KAAa,KAAA;AACpC,IACE,uBAAA,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACE,GAAG,KAAA;AAAA,QACJ,SAAW,EAAA;AAAA,UACT,KAAO,EAAA;AAAA;AACT;AAAA,KACF;AAAA,GAEJ;AACA,EAAA,OAAO,OAAO,MAAO,CAAA,SAAA,EAAW,EAAE,QAAA,EAAU,iBAAiB,CAAA;AAC/D;;;;"}