@lobehub/ui/es/base-ui/Progress/Progress.mjs.map

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

{"version":3,"file":"Progress.mjs","names":[],"sources":["../../../src/base-ui/Progress/Progress.tsx"],"sourcesContent":["'use client';\n\nimport { cssVar, cx } from 'antd-style';\nimport { Check, X } from 'lucide-react';\nimport { memo, useMemo } from 'react';\n\nimport Icon from '@/Icon';\n\nimport { styles, trackHeight } from './style';\nimport type { ProgressProps } from './type';\n\nconst circleDiameterMap: Record<'small' | 'middle' | 'large', number> = {\n  large: 72,\n  middle: 40,\n  small: 20,\n};\nconst blockHeightMap: Record<'small' | 'middle' | 'large', number> = {\n  large: 12,\n  middle: 8,\n  small: 4,\n};\nconst circleStrokeMap: Record<'small' | 'middle' | 'large', number> = {\n  large: 4,\n  middle: 3,\n  small: 2,\n};\n\nconst statusColor = {\n  active: cssVar.colorInfo,\n  exception: cssVar.colorError,\n  success: cssVar.colorSuccess,\n};\n\nconst Progress = memo<ProgressProps>(\n  ({\n    className,\n    format,\n    label,\n    percent,\n    ref,\n    segments = 20,\n    showInfo = true,\n    size = 'middle',\n    status = 'normal',\n    strokeColor,\n    style,\n    type = 'line',\n    variant = 'line',\n    ...rest\n  }) => {\n    const clamped = Math.min(100, Math.max(0, percent));\n    const barColor =\n      strokeColor ?? (status === 'normal' ? cssVar.colorPrimary : statusColor[status]);\n\n    const info = useMemo(() => {\n      if (status === 'success') return <Icon icon={Check} size={14} style={{ color: barColor }} />;\n      if (status === 'exception') return <Icon icon={X} size={14} style={{ color: barColor }} />;\n      return format ? format(clamped) : `${clamped}%`;\n    }, [status, format, clamped, barColor]);\n\n    const ariaValueText = useMemo(() => {\n      if (!format) return undefined;\n      const value = format(clamped);\n      return typeof value === 'string' || typeof value === 'number' ? String(value) : undefined;\n    }, [format, clamped]);\n\n    const progressAria = {\n      'aria-valuemax': 100,\n      'aria-valuemin': 0,\n      'aria-valuenow': clamped,\n      'aria-valuetext': ariaValueText,\n      'role': 'progressbar' as const,\n    };\n\n    if (type === 'circle') {\n      const isPreset = typeof size === 'string';\n      const diameter = isPreset\n        ? circleDiameterMap[size as 'small' | 'middle' | 'large']\n        : (size as number);\n      const stroke = isPreset\n        ? circleStrokeMap[size as 'small' | 'middle' | 'large']\n        : Math.max(2, Math.round((diameter * 3) / 40));\n      const radius = diameter / 2 - stroke;\n      const circumference = 2 * Math.PI * radius;\n      const offset = circumference * (1 - clamped / 100);\n\n      return (\n        <div\n          className={cx(styles.circleRoot, className)}\n          ref={ref}\n          style={style}\n          {...progressAria}\n          {...rest}\n        >\n          <svg\n            className={styles.circleSvg}\n            height={diameter}\n            viewBox={`0 0 ${diameter} ${diameter}`}\n            width={diameter}\n          >\n            <circle\n              className={styles.circleTrack}\n              cx={diameter / 2}\n              cy={diameter / 2}\n              r={radius}\n              strokeWidth={stroke}\n            />\n            <circle\n              cx={diameter / 2}\n              cy={diameter / 2}\n              fill=\"none\"\n              r={radius}\n              stroke={barColor}\n              strokeDasharray={circumference}\n              strokeDashoffset={offset}\n              strokeLinecap=\"round\"\n              strokeWidth={stroke}\n              style={{ transition: 'stroke-dashoffset 0.3s' }}\n            />\n          </svg>\n          {showInfo && diameter >= 40 && (\n            <span\n              className={styles.circleInfo}\n              style={{ fontSize: Math.round(diameter * 0.15 + 6) }}\n            >\n              {info}\n            </span>\n          )}\n        </div>\n      );\n    }\n\n    const heightStyle = typeof size === 'number' ? { height: size } : undefined;\n    const heightClass = (family: 'line' | 'block') =>\n      typeof size === 'number' ? undefined : trackHeight({ family, size });\n\n    if (variant === 'segments') {\n      const filled = Math.round((segments * clamped) / 100);\n\n      return (\n        <div\n          className={cx(styles.rowRoot, className)}\n          ref={ref}\n          style={style}\n          {...progressAria}\n          {...rest}\n        >\n          <div className={cx(styles.segments, heightClass('block'))} style={heightStyle}>\n            {Array.from({ length: segments }, (_, index) => (\n              <span\n                className={cx(styles.segment, index < filled && styles.segmentOn)}\n                key={index}\n                style={index < filled ? { background: barColor } : undefined}\n              />\n            ))}\n          </div>\n          {showInfo && <span className={styles.rowInfo}>{info}</span>}\n        </div>\n      );\n    }\n\n    if (variant === 'inset') {\n      return (\n        <div\n          className={cx(styles.rowRoot, className)}\n          ref={ref}\n          style={style}\n          {...progressAria}\n          {...rest}\n        >\n          <div className={cx(styles.split, heightClass('block'))} style={heightStyle}>\n            {clamped > 0 && (\n              <span\n                className={cx(styles.splitFill, status === 'active' && styles.barActive)}\n                style={{\n                  backgroundColor: barColor,\n                  minWidth: typeof size === 'number' ? size : blockHeightMap[size],\n                  width: clamped === 100 ? '100%' : `calc((100% - 3px) * ${clamped / 100})`,\n                }}\n              />\n            )}\n            {clamped < 100 && <span className={styles.splitRest} />}\n          </div>\n          {showInfo && <span className={styles.rowInfo}>{info}</span>}\n        </div>\n      );\n    }\n\n    return (\n      <div\n        className={cx(styles.lineRoot, className)}\n        ref={ref}\n        style={style}\n        {...progressAria}\n        {...rest}\n      >\n        {(label || showInfo) && (\n          <div className={styles.lineMeta}>\n            <span>{label}</span>\n            {showInfo && <span className={styles.lineValue}>{info}</span>}\n          </div>\n        )}\n        <div className={cx(styles.lineTrack, heightClass('line'))} style={heightStyle}>\n          <div\n            style={{ backgroundColor: barColor, width: `${clamped}%` }}\n            className={cx(\n              styles.bar,\n              variant === 'line' && status === 'active' && styles.barActive,\n            )}\n          />\n        </div>\n      </div>\n    );\n  },\n);\n\nProgress.displayName = 'Progress';\n\nexport default Progress;\n"],"mappings":"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"}