@bacon-pos/ui 0.8.0 → 0.9.0

package/src/components/ProgressBar/ProgressBar.tsx

@@ -0,0 +1,135 @@
+import { useEffect, useRef } from 'react';
+import { Animated, Easing, View, type StyleProp, type ViewStyle } from 'react-native';
+import { useTheme } from '../../theme';
+import { Text } from '../Text/Text';
+
+export interface ProgressBarProps {
+  /** Progress from 0 to 1. Drive it from whatever is loading (e.g. a download). */
+  progress: number;
+  /** Left-side label. Defaults to "Downloading...". */
+  label?: string;
+  /** Show the label + percentage row under the bar. Defaults to true. */
+  showSupporting?: boolean;
+  /** Show the percentage on the right. Defaults to true. */
+  showValue?: boolean;
+  /** Format the right-side value. Defaults to `47%`. */
+  formatValue?: (progress: number) => string;
+  /** Bar height. Defaults to 32 (Figma). */
+  height?: number;
+  /** Fixed width. Omit to fill the parent. */
+  width?: number;
+  /** Fill color. Defaults to `action.primary` (lime). */
+  color?: string;
+  /** Track background. Defaults to `background.subtle`. */
+  trackColor?: string;
+  /** Track border color. Defaults to `border.default`. */
+  borderColor?: string;
+  /** Animate width changes. Defaults to true. */
+  animated?: boolean;
+  /** Override the container style. */
+  style?: StyleProp<ViewStyle>;
+  /** Accessibility label. Defaults to `label`. */
+  accessibilityLabel?: string;
+}
+
+const clamp01 = (n: number) => (n < 0 ? 0 : n > 1 ? 1 : n);
+
+/**
+ * Determinate progress bar — the Figma "Loader". Drive it with a `progress`
+ * (0–1) prop from whatever is loading; the fill animates to match. A supporting
+ * row underneath shows a customizable `label` (default "Downloading...") on the
+ * left and the percentage on the right. Colors, height and width are tokens/props.
+ */
+export function ProgressBar({
+  progress,
+  label = 'Downloading...',
+  showSupporting = true,
+  showValue = true,
+  formatValue,
+  height = 32,
+  width,
+  color,
+  trackColor,
+  borderColor,
+  animated = true,
+  style,
+  accessibilityLabel,
+}: ProgressBarProps) {
+  const theme = useTheme();
+  const value = clamp01(progress);
+  const percent = Math.round(value * 100);
+
+  const anim = useRef(new Animated.Value(value)).current;
+  useEffect(() => {
+    if (animated) {
+      Animated.timing(anim, {
+        toValue: value,
+        duration: 240,
+        easing: Easing.out(Easing.ease),
+        useNativeDriver: false, // width can't use the native driver
+      }).start();
+    } else {
+      anim.setValue(value);
+    }
+  }, [value, animated, anim]);
+
+  const fillWidth = anim.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0%', '100%'],
+    extrapolate: 'clamp',
+  });
+
+  const inset = 2.5;
+
+  return (
+    <View
+      style={[{ gap: 12, width: width ?? undefined, alignSelf: width != null ? 'flex-start' : 'stretch' }, style]}
+      accessibilityRole="progressbar"
+      accessibilityLabel={accessibilityLabel ?? label}
+      accessibilityValue={{ min: 0, max: 100, now: percent }}
+    >
+      <View
+        style={{
+          height,
+          borderRadius: height / 2,
+          borderWidth: 1.5,
+          borderColor: borderColor ?? theme.colors.border.default,
+          backgroundColor: trackColor ?? theme.colors.background.subtle,
+          padding: inset,
+          justifyContent: 'center',
+          overflow: 'hidden',
+        }}
+      >
+        <Animated.View
+          style={{
+            width: fillWidth,
+            height: '100%',
+            borderRadius: height / 2,
+            backgroundColor: color ?? theme.colors.action.primary,
+          }}
+        />
+      </View>
+
+      {showSupporting ? (
+        <View
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            paddingHorizontal: 8,
+            gap: 8,
+          }}
+        >
+          <Text variant="bodyLarge" color="secondary" numberOfLines={1} style={{ flexShrink: 1 }}>
+            {label}
+          </Text>
+          {showValue ? (
+            <Text variant="bodyLarge" color="secondary" numberOfLines={1}>
+              {formatValue ? formatValue(value) : `${percent}%`}
+            </Text>
+          ) : null}
+        </View>
+      ) : null}
+    </View>
+  );
+}

package/src/components/ProgressBar/index.ts

@@ -0,0 +1,2 @@
+export { ProgressBar } from './ProgressBar';
+export type { ProgressBarProps } from './ProgressBar';

package/src/components/index.ts

@@ -16,6 +16,7 @@ export * from './Keypad';
 export * from './LinkButton';
 export * from './Menu';
 export * from './ProductCard';
+export * from './ProgressBar';
 export * from './QuantityStepper';
 export * from './Radio';
 export * from './Select';