@lobehub/ui/es/Skeleton/SkeletonTags.mjs.map

Lobe UI is an open-source UI component library for building AIGC web apps

{"version":3,"file":"SkeletonTags.mjs","names":["HEIGHT_MAP: Record<'small' | 'middle' | 'large', number>","DEFAULT_WIDTH_MAP: Record<'small' | 'middle' | 'large', number>","SkeletonTags: FC<SkeletonTagsProps>","RADIUS_MAP: Record<'large' | 'small' | 'middle', string>","Flexbox","SkeletonBlock"],"sources":["../../src/Skeleton/SkeletonTags.tsx"],"sourcesContent":["'use client';\n\nimport { cssVar, useTheme } from 'antd-style';\nimport { type FC } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport SkeletonBlock from './SkeletonBlock';\nimport type { SkeletonTagsProps } from './type';\n\nconst DEFAULT_COUNT = 1;\n\nconst HEIGHT_MAP: Record<'small' | 'middle' | 'large', number> = {\n  large: 28,\n  middle: 22,\n  small: 20,\n};\n\nconst DEFAULT_WIDTH_MAP: Record<'small' | 'middle' | 'large', number> = {\n  large: 64,\n  middle: 48,\n  small: 36,\n};\n\nconst SkeletonTags: FC<SkeletonTagsProps> = ({\n  active,\n  className,\n  count = DEFAULT_COUNT,\n  gap,\n  height,\n  size = 'middle',\n  style,\n  width,\n  ...rest\n}) => {\n  const theme = useTheme();\n  const resolvedGap = gap ?? theme.paddingXS ?? 4;\n  const resolvedCount = Math.max(count, 1);\n  const resolvedHeight = height ?? HEIGHT_MAP[size];\n  const widthList = Array.isArray(width) ? width : null;\n  const defaultWidth = DEFAULT_WIDTH_MAP[size];\n\n  const RADIUS_MAP: Record<'large' | 'small' | 'middle', string> = {\n    large: cssVar.borderRadius,\n    middle: cssVar.borderRadiusSM,\n    small: cssVar.borderRadiusXS,\n  };\n\n  const getWidth = (index: number) => {\n    if (widthList) return widthList[index] ?? widthList.at(-1) ?? defaultWidth;\n    if (width !== undefined) return width as string | number;\n    return defaultWidth;\n  };\n\n  return (\n    <Flexbox className={className} horizontal style={{ gap: resolvedGap, ...style }} {...rest}>\n      {Array.from({ length: resolvedCount }).map((_, index) => (\n        <SkeletonBlock\n          active={active}\n          height={resolvedHeight}\n          key={index}\n          style={{\n            borderRadius: RADIUS_MAP[size],\n          }}\n          width={getWidth(index)}\n        />\n      ))}\n    </Flexbox>\n  );\n};\n\nSkeletonTags.displayName = 'SkeletonTags';\n\nexport default SkeletonTags;\n"],"mappings":";;;;;;;;AAUA,MAAM,gBAAgB;AAEtB,MAAMA,aAA2D;CAC/D,OAAO;CACP,QAAQ;CACR,OAAO;CACR;AAED,MAAMC,oBAAkE;CACtE,OAAO;CACP,QAAQ;CACR,OAAO;CACR;AAED,MAAMC,gBAAuC,EAC3C,QACA,WACA,QAAQ,eACR,KACA,QACA,OAAO,UACP,OACA,OACA,GAAG,WACC;CACJ,MAAM,QAAQ,UAAU;CACxB,MAAM,cAAc,OAAO,MAAM,aAAa;CAC9C,MAAM,gBAAgB,KAAK,IAAI,OAAO,EAAE;CACxC,MAAM,iBAAiB,UAAU,WAAW;CAC5C,MAAM,YAAY,MAAM,QAAQ,MAAM,GAAG,QAAQ;CACjD,MAAM,eAAe,kBAAkB;CAEvC,MAAMC,aAA2D;EAC/D,OAAO,OAAO;EACd,QAAQ,OAAO;EACf,OAAO,OAAO;EACf;CAED,MAAM,YAAY,UAAkB;AAClC,MAAI,UAAW,QAAO,UAAU,UAAU,UAAU,GAAG,GAAG,IAAI;AAC9D,MAAI,UAAU,OAAW,QAAO;AAChC,SAAO;;AAGT,QACE,oBAACC;EAAmB;EAAW;EAAW,OAAO;GAAE,KAAK;GAAa,GAAG;GAAO;EAAE,GAAI;YAClF,MAAM,KAAK,EAAE,QAAQ,eAAe,CAAC,CAAC,KAAK,GAAG,UAC7C,oBAACC;GACS;GACR,QAAQ;GAER,OAAO,EACL,cAAc,WAAW,OAC1B;GACD,OAAO,SAAS,MAAM;KAJjB,MAKL,CACF;GACM;;AAId,aAAa,cAAc;AAE3B,2BAAe"}