@grafana/ui
Version:
Grafana Components Library
1 lines • 2.14 kB
Source Map (JSON)
{"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,SAAA,CAAU;AAAA,EACvB,IAAA,EAAM;AAAA,IACJ,OAAA,EAAS;AAAA,GACX;AAAA,EACA,MAAA,EAAQ;AAAA,IACN,OAAA,EAAS;AAAA;AAEb,CAAC,CAAA;AAEM,MAAM,iBAAA,GAAoB;AAAA,EAC/B,aAAA,EAAe,MAAA;AAAA,EACf,cAAA,EAAgB,OAAA;AAAA,EAChB,uBAAA,EAAyB,SAAA;AAAA,EACzB,iBAAA,EAAmB,OAAA;AAAA,EACnB,iBAAA,EAAmB;AACrB;AAoBO,MAAM,cAAA,GAAiB,CAAsB,SAAA,EAAc,QAAA,KAAmC;AACnG,EAAA,MAAM,eAAA,GAAkB,CAAC,KAAA,KAAa;AACpC,IAAA,uBACE,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACE,GAAG,KAAA;AAAA,QACJ,SAAA,EAAW;AAAA,UACT,KAAA,EAAO;AAAA;AACT;AAAA,KACF;AAAA,EAEJ,CAAA;AACA,EAAA,OAAO,OAAO,MAAA,CAAO,SAAA,EAAW,EAAE,QAAA,EAAU,iBAAiB,CAAA;AAC/D;;;;"}