fluent-styles 1.54.0 → 1.55.0

package/src/loading/circular.tsx

@@ -0,0 +1,141 @@
+import React, { useRef, useMemo, useEffect } from 'react';
+import type { ColorValue, ViewStyle, ViewProps } from 'react-native';
+import { Animated, Easing } from 'react-native';
+import { Svg, Circle } from 'react-native-svg';
+import type { CircleProps } from 'react-native-svg/lib/typescript/elements/Circle';
+
+export interface CircularProps extends ViewProps {
+  size?: number;
+  color?: ColorValue;
+  duration?: number;
+}
+
+const STROKE_WIDTH = 2;
+
+const AnimatedCircle =
+  Animated.createAnimatedComponent<React.ComponentType<CircleProps>>(Circle);
+
+const useSvgLoop = (
+  animatedValue: Animated.Value,
+  initValue: number,
+  config: Pick<Animated.TimingAnimationConfig, 'toValue' | 'duration'>,
+) => {
+  useEffect(() => {
+    animatedValue.setValue(initValue);
+
+    const animation = Animated.timing(animatedValue, {
+      toValue: config.toValue as number,
+      duration: config.duration,
+      easing: Easing.linear,
+      useNativeDriver: false,
+    });
+
+    const loop = Animated.loop(animation);
+    loop.start();
+
+    return () => loop.stop();
+  }, [animatedValue, initValue, config.duration, config.toValue]);
+};
+
+const Circular: React.FC<CircularProps> = ({
+  size = 32,
+  color = '#888888',
+  duration = 800,
+  style,
+  ...restProps
+}) => {
+  const animatedRotation = useRef(new Animated.Value(0)).current;
+  const animatedCircle1 = useRef(new Animated.Value(0)).current;
+  const animatedCircle2 = useRef(new Animated.Value(0)).current;
+
+  const circle1Props = useMemo(() => {
+    const center = Math.floor(size / 2);
+    const radius = Math.floor(center - STROKE_WIDTH / 2);
+    return { cy: center, cx: center, r: radius };
+  }, [size]);
+
+  const circle2Props = useMemo(() => {
+    const center = Math.floor(size / 2);
+    const radius = Math.floor(center - STROKE_WIDTH / 2 - center / 2);
+    return { cy: center, cx: center, r: radius };
+  }, [size]);
+
+  const half1Circle = useMemo(
+    () => circle1Props.r * Math.PI,
+    [circle1Props.r],
+  );
+
+  const half2Circle = useMemo(
+    () => circle2Props.r * Math.PI,
+    [circle2Props.r],
+  );
+
+  useEffect(() => {
+    animatedRotation.setValue(0);
+
+    const rotation = Animated.loop(
+      Animated.timing(animatedRotation, {
+        toValue: 1,
+        duration,
+        easing: Easing.linear,
+        useNativeDriver: true,
+      }),
+    );
+
+    rotation.start();
+
+    return () => rotation.stop();
+  }, [animatedRotation, duration]);
+
+  useSvgLoop(animatedCircle1, half1Circle, {
+    toValue: -half1Circle * 2,
+    duration: duration * 1.5,
+  });
+
+  useSvgLoop(animatedCircle2, half2Circle, {
+    toValue: -half2Circle * 2,
+    duration: duration * 2.5,
+  });
+
+  const iconStyle: ViewStyle = {
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: size,
+    height: size,
+    transform: [
+      {
+        rotateZ: animatedRotation.interpolate({
+          inputRange: [0, 1],
+          outputRange: ['-90deg', '270deg'],
+        }) as any,
+      },
+    ],
+  };
+
+  return (
+    <Animated.View {...restProps} style={[iconStyle, style]}>
+      <Svg width="100%" height="100%">
+        <AnimatedCircle
+          {...circle1Props}
+          stroke={color as string}
+          strokeWidth={STROKE_WIDTH}
+          strokeDasharray={`${half1Circle},${half1Circle * 2}`}
+          strokeLinecap="round"
+          strokeDashoffset={animatedCircle1}
+          fill="none"
+        />
+        <AnimatedCircle
+          {...circle2Props}
+          stroke={color as string}
+          strokeWidth={STROKE_WIDTH}
+          strokeDasharray={`${half2Circle},${half2Circle * 2}`}
+          strokeLinecap="round"
+          strokeDashoffset={animatedCircle2}
+          fill="none"
+        />
+      </Svg>
+    </Animated.View>
+  );
+};
+
+export { Circular };

package/src/loading/index.tsx

@@ -0,0 +1,6 @@
+export { Spinner } from './spinner';
+export { Circular } from './circular';
+export type { SpinnerProps } from './spinner';
+export type { CircularProps } from './circular';
+export { Loader, type LoaderProps, type LoaderVariant } from './loader';
+export { useLoader } from './useLoader';

package/src/loading/loader.tsx

@@ -0,0 +1,191 @@
+import React, { useEffect, useMemo, useRef } from 'react'
+import {
+  Animated,
+  Easing,
+  StyleSheet,
+  Text,
+  useColorScheme,
+  View,
+} from 'react-native'
+import {
+  ComponentTheme,
+  resolveTheme,
+} from '../utiles/theme'
+import { Circular } from './circular'
+
+// ─── Loader colour tokens ─────────────────────────────────────────────────────
+
+export type LoaderColors = {
+  indicator:   string
+  overlayBg:   string
+  cardBg:      string
+  cardBorder:  string
+  label:       string
+}
+
+export const LOADER_LIGHT: LoaderColors = {
+  indicator:  '#6366f1',
+  overlayBg:  'rgba(0,0,0,0.35)',
+  cardBg:     '#ffffff',
+  cardBorder: '#e4e4e7',
+  label:      '#3f3f46',
+}
+
+export const LOADER_DARK: LoaderColors = {
+  indicator:  '#818cf8',
+  overlayBg:  'rgba(0,0,0,0.6)',
+  cardBg:    'rgba(0,0,0,0.6)',
+  cardBorder: '#3f3f46',
+  label:      '#e4e4e7',
+}
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export type LoaderVariant = 'spinner' | 'pulse' | 'dots' |'circular'
+
+export type LoaderProps = {
+  label?:    string
+  variant?:  LoaderVariant
+  /** Overrides the indicator tint from the theme. */
+  color?:    string
+  overlay?:  boolean
+  theme?:    ComponentTheme
+  colors?:   Partial<LoaderColors>
+}
+
+// ─── Indicators ───────────────────────────────────────────────────────────────
+
+const Spinner: React.FC<{ color: string }> = ({ color }) => {
+  const rotate = useRef(new Animated.Value(0)).current
+  useEffect(() => {
+    Animated.loop(
+      Animated.timing(rotate, { toValue: 1, duration: 800, easing: Easing.linear, useNativeDriver: true }),
+    ).start()
+  }, [])
+  const spin = rotate.interpolate({ inputRange: [0, 1], outputRange: ['0deg', '360deg'] })
+  return <Animated.View style={[ind.ring, { borderTopColor: color, transform: [{ rotate: spin }] }]} />
+}
+
+const Pulse: React.FC<{ color: string }> = ({ color }) => {
+  const scale   = useRef(new Animated.Value(1)).current
+  const opacity = useRef(new Animated.Value(0.8)).current
+  useEffect(() => {
+    Animated.loop(
+      Animated.parallel([
+        Animated.sequence([
+          Animated.timing(scale,   { toValue: 1.6, duration: 700, easing: Easing.out(Easing.ease), useNativeDriver: true }),
+          Animated.timing(scale,   { toValue: 1,   duration: 700, easing: Easing.in(Easing.ease),  useNativeDriver: true }),
+        ]),
+        Animated.sequence([
+          Animated.timing(opacity, { toValue: 0.1, duration: 700, useNativeDriver: true }),
+          Animated.timing(opacity, { toValue: 0.8, duration: 700, useNativeDriver: true }),
+        ]),
+      ]),
+    ).start()
+  }, [])
+  return <Animated.View style={[ind.pulse, { backgroundColor: color, opacity, transform: [{ scale }] }]} />
+}
+
+const Dots: React.FC<{ color: string }> = ({ color }) => {
+  const anims = [
+    useRef(new Animated.Value(0)).current,
+    useRef(new Animated.Value(0)).current,
+    useRef(new Animated.Value(0)).current,
+  ]
+  useEffect(() => {
+    const seq = (anim: Animated.Value, delay: number) =>
+      Animated.loop(Animated.sequence([
+        Animated.delay(delay),
+        Animated.timing(anim, { toValue: -8, duration: 300, useNativeDriver: true }),
+        Animated.timing(anim, { toValue: 0,  duration: 300, useNativeDriver: true }),
+        Animated.delay(600 - delay),
+      ]))
+    anims.forEach((a, i) => seq(a, i * 150).start())
+  }, [])
+  return (
+    <View style={ind.dotsRow}>
+      {anims.map((anim, i) => (
+        <Animated.View key={i} style={[ind.dot, { backgroundColor: color, transform: [{ translateY: anim }] }]} />
+      ))}
+    </View>
+  )
+}
+
+const ind = StyleSheet.create({
+  ring:    { width: 36, height: 36, borderRadius: 18, borderWidth: 3, borderColor: 'transparent' },
+  pulse:   { width: 28, height: 28, borderRadius: 14 },
+  dotsRow: { flexDirection: 'row', gap: 8 },
+  dot:     { width: 10, height: 10, borderRadius: 5 },
+})
+
+// ─── Main component ───────────────────────────────────────────────────────────
+
+export const Loader: React.FC<LoaderProps> = ({
+  label,
+  variant         = 'spinner',
+  color: colorProp,
+  overlay         = false,
+  theme           = 'dark',
+  colors: colorOverrides,
+}) => {
+  const deviceScheme = useColorScheme()
+
+  const colors = useMemo<LoaderColors>(() => {
+    const base = resolveTheme(theme, deviceScheme) === 'light' ? LOADER_LIGHT : LOADER_DARK
+    return colorOverrides ? { ...base, ...colorOverrides } : base
+  }, [theme, deviceScheme, colorOverrides])
+
+  // `color` prop overrides the theme's indicator tint
+  const tint = colorProp ?? colors.indicator
+
+  const indicator = {
+    spinner: <Spinner color={tint} />,
+    pulse:   <Pulse   color={tint} />,
+    dots:    <Dots    color={tint} />,
+    circular: <Circular color={tint} />,
+  }[variant]
+
+  if (overlay) {
+    return (
+      <View style={[styles.overlay, { backgroundColor: colors.overlayBg }]}>
+        <View style={[styles.card, { backgroundColor: colors.cardBg, borderColor: colors.cardBorder }]}>
+          {indicator}
+          {label ? <Text style={[styles.label, { color: colors.label }]}>{label}</Text> : null}
+        </View>
+      </View>
+    )
+  }
+
+  return (
+    <View style={styles.inline}>
+      {indicator}
+      {label ? <Text style={[styles.label, { color: colors.label }]}>{label}</Text> : null}
+    </View>
+  )
+}
+
+// ─── Styles (layout only) ─────────────────────────────────────────────────────
+
+const styles = StyleSheet.create({
+  overlay: {
+    ...StyleSheet.absoluteFillObject,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  card: {
+    borderWidth:       0,
+    borderRadius:      16,
+    paddingVertical:   32,
+    paddingHorizontal: 40,
+    alignItems:        'center',
+    gap:               16,
+    shadowColor:       '#000',
+    shadowOffset:      { width: 0, height: 16 },
+    shadowOpacity:     0.25,
+    shadowRadius:      24,
+    elevation:         12,
+  },
+  inline: { alignItems: 'center', gap: 12, borderWidth: 0 },
+  label:  { fontSize: 14, fontWeight: '500', letterSpacing: 0.2 },
+})
+

package/src/loading/spinner.tsx

@@ -0,0 +1,126 @@
+import React, { useRef, useEffect } from 'react';
+import type { ColorValue, ViewProps } from 'react-native';
+import { View, Animated, StyleSheet, Easing } from 'react-native';
+
+export interface SpinnerProps extends ViewProps {
+  /**
+   * Size of the spinner in pixels
+   * @default 32
+   */
+  size?: number;
+
+  /**
+   * Color of the spinner petals
+   * @default '#888888'
+   */
+  color?: ColorValue;
+
+  /**
+   * Duration of one full rotation in milliseconds
+   * @default 800
+   */
+  duration?: number;
+}
+
+const PETAL_COUNT = 8;
+const PETALS = new Array(PETAL_COUNT).fill(0);
+const A_OPACITY = 1 / PETAL_COUNT;
+const A_ROTATE = 360 / PETAL_COUNT;
+
+const useLoop = (
+  animatedValue: Animated.Value,
+  config: Pick<Animated.TimingAnimationConfig, 'toValue' | 'duration' | 'easing'>,
+) => {
+  useEffect(() => {
+    const animation = Animated.timing(animatedValue, {
+      toValue: config.toValue,
+      duration: config.duration,
+      easing: config.easing,
+      useNativeDriver: true,
+    });
+
+    const loop = Animated.loop(animation);
+    loop.start();
+
+    return () => loop.stop();
+  }, [animatedValue, config.duration, config.toValue, config.easing]);
+};
+
+const Spinner: React.FC<SpinnerProps> = ({
+  size = 32,
+  color = '#888888',
+  duration = 800,
+  style,
+  ...restProps
+}) => {
+  const animatedValue = useRef(new Animated.Value(0)).current;
+
+  useLoop(animatedValue, {
+    toValue: 1,
+    duration,
+    easing: Easing.linear,
+  });
+
+  const rotate = animatedValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '360deg'],
+  });
+
+  return (
+    <Animated.View
+      {...restProps}
+      style={[
+        styles.icon,
+        {
+          width: size,
+          height: size,
+          transform: [{ rotateZ: rotate }],
+        },
+        style,
+      ]}
+    >
+      {PETALS.map((_, i) => (
+        <View
+          key={i}
+          style={[
+            styles.petal,
+            {
+              opacity: A_OPACITY * (i + 1),
+              transform: [{ rotate: `${A_ROTATE * i}deg` }],
+            },
+          ]}
+        >
+          <View
+            style={[
+              styles.inner,
+              { backgroundColor: color },
+            ]}
+          />
+        </View>
+      ))}
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  icon: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'relative',
+  },
+  petal: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+    alignItems: 'center',
+  },
+  inner: {
+    width: 2,
+    height: '30%',
+    borderRadius: 1,
+  },
+});
+
+export { Spinner };

package/src/loading/useLoader.tsx

@@ -0,0 +1,78 @@
+import { useCallback, useRef } from 'react'
+import React from 'react'
+import { usePortal } from '../portal/PortalContext'
+import { Loader, LoaderProps } from './'
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export type ShowLoaderOptions = LoaderProps
+
+export type LoaderAPI = {
+  /** Shows a loader overlay and returns its portal id. */
+  show: (options?: ShowLoaderOptions) => number
+  /** Hides the loader with the given id. */
+  hide: (id: number) => void
+  /**
+   * Wraps an async function: shows the loader before it runs, hides after
+   * it resolves or rejects (always, via `finally`).
+   *
+   * @example
+   * ```ts
+   * const data = await loader.wrap(
+   *   () => api.fetchReport(),
+   *   { label: 'Loading report…', variant: 'dots' },
+   * )
+   * ```
+   */
+
+}
+
+// ─── Hook ─────────────────────────────────────────────────────────────────────
+
+/**
+ * Declarative loader hook.
+ * Requires a `PortalManager` ancestor.
+ *
+ * @example
+ * ```tsx
+ * const loader = useLoader()
+ *
+ * // Manual control
+ * const id = loader.show({ label: 'Saving…', variant: 'spinner' })
+ * await saveData()
+ * loader.hide(id)
+ *
+ * // Automatic via wrap()
+ * const result = await loader.wrap(() => fetchData(), { label: 'Loading…' })
+ * ```
+ */
+export function useLoader(): LoaderAPI {
+  const { mount, unmount } = usePortal()
+
+  // Tracks the last shown loader id so callers who didn't store the id can
+  // still call hide() without arguments in simple single-loader flows.
+  const lastIdRef = useRef<number | null>(null)
+
+  const show = useCallback(
+    (options: ShowLoaderOptions = {}): number => {
+      // Loader has no onDismiss callback, so no idBox dance needed here.
+      const id = mount(
+        <Loader {...options} overlay={options.overlay ?? true} />,
+        { position: 'center' },
+      )
+      lastIdRef.current = id
+      return id
+    },
+    [mount],
+  )
+
+  const hide = useCallback(
+    (id: number) => {
+      unmount(id)
+      if (lastIdRef.current === id) lastIdRef.current = null
+    },
+    [unmount],
+  )
+
+  return { show, hide }
+}

package/src/loading/useLoaderBinding.tsx

@@ -0,0 +1,38 @@
+
+import { useLoader, ShowLoaderOptions } from "./useLoader"; // adjust path
+import React, { useEffect } from "react";
+
+function useLoaderBinding(
+  loading: boolean,
+  options?: {
+    label?: string;
+    variant?: "spinner" | "pulse" | "dots" | "circular";
+    theme?: "light" | "dark" | "system";
+  },
+) {
+  const loader = useLoader();
+  const loaderIdRef = React.useRef<number | null>(null);
+
+  useEffect(() => {
+    if (loading) {
+      if (loaderIdRef.current == null) {
+        loaderIdRef.current = loader.show(options);
+      }
+    } else {
+      if (loaderIdRef.current != null) {
+        loader.hide(loaderIdRef.current);
+        loaderIdRef.current = null;
+      }
+    }
+
+    return () => {
+      if (!loading && loaderIdRef.current != null) {
+        loader.hide(loaderIdRef.current);
+        loaderIdRef.current = null;
+      }
+    };
+  }, [loading, loader, options]);
+}
+
+export { useLoaderBinding };
+export type { ShowLoaderOptions };