@utilitywarehouse/hearth-react-native 0.26.0 → 0.27.0

package/src/components/SegmentedControl/SegmentedControl.tsx

@@ -0,0 +1,257 @@
+import { Children, isValidElement, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { View } from 'react-native';
+import Animated, {
+    Easing,
+    useAnimatedStyle,
+    useReducedMotion,
+    useSharedValue,
+    withTiming,
+} from 'react-native-reanimated';
+import { StyleSheet } from 'react-native-unistyles';
+import { useStyleProps } from '../../hooks';
+import { SegmentedControlContext } from './SegmentedControl.context';
+import type SegmentedControlProps from './SegmentedControl.props';
+
+const Indicator = Animated.createAnimatedComponent(View);
+const GROUP_BORDER_WIDTH = 1;
+
+const SegmentedControl = ({
+  value: controlledValue,
+  defaultValue,
+  onValueChange,
+  size = 'sm',
+  disabled = false,
+  children,
+  style,
+  ...props
+}: SegmentedControlProps) => {
+  const { computedStyles, remainingProps } = useStyleProps(props);
+  const isReducedMotion = useReducedMotion();
+  const indicatorPositionOffset = GROUP_BORDER_WIDTH;
+
+  const optionValues = useMemo(() => {
+    const values: string[] = [];
+
+    const walk = (node: any) => {
+      Children.forEach(node, child => {
+        if (!isValidElement(child)) return;
+
+        const childType: any = child.type;
+        const childProps: any = child.props;
+
+        if (
+          childType?.displayName === 'SegmentedControlOption' &&
+          typeof childProps?.value === 'string'
+        ) {
+          values.push(childProps.value);
+        }
+
+        if (childProps?.children) {
+          walk(childProps.children);
+        }
+      });
+    };
+
+    walk(children);
+    return values;
+  }, [children]);
+  const optionValuesKey = useMemo(() => optionValues.join('|'), [optionValues]);
+  const optionValuesRef = useRef<string[]>(optionValues);
+
+  useEffect(() => {
+    optionValuesRef.current = optionValues;
+  }, [optionValues]);
+
+  const getInitialValue = () => {
+    if (controlledValue !== undefined) return controlledValue;
+    if (defaultValue !== undefined) return defaultValue;
+    return optionValues[0];
+  };
+
+  const [uncontrolledValue, setUncontrolledValue] = useState<string | undefined>(getInitialValue);
+
+  useEffect(() => {
+    if (controlledValue !== undefined) {
+      setUncontrolledValue(controlledValue);
+    }
+  }, [controlledValue]);
+
+  useEffect(() => {
+    const currentOptionValues = optionValuesRef.current;
+    setUncontrolledValue(prev => {
+      if (!prev) return currentOptionValues[0];
+      if (!currentOptionValues.includes(prev)) return currentOptionValues[0];
+      return prev;
+    });
+  }, [optionValuesKey]);
+
+  const currentValue = controlledValue !== undefined ? controlledValue : uncontrolledValue;
+
+  const indicatorX = useSharedValue(0);
+  const indicatorWidth = useSharedValue(0);
+  const indicatorY = useSharedValue(0);
+  const indicatorHeight = useSharedValue(0);
+  const [hasIndicator, setHasIndicator] = useState(false);
+  const layoutsRef = useRef<Map<string, { x: number; y: number; width: number; height: number }>>(
+    new Map()
+  );
+  const prevValueRef = useRef<string | undefined>(undefined);
+  const initialisedRef = useRef(false);
+
+  const select = useCallback(
+    (nextValue: string) => {
+      if (disabled) return;
+      if (controlledValue === undefined) {
+        setUncontrolledValue(nextValue);
+      }
+      onValueChange?.(nextValue);
+    },
+    [controlledValue, disabled, onValueChange]
+  );
+
+  const registerOptionLayout = useCallback(
+    (value: string, layout: { x: number; y: number; width: number; height: number }) => {
+      layoutsRef.current.set(value, layout);
+      const activeValue = controlledValue !== undefined ? controlledValue : uncontrolledValue;
+      if (!activeValue || activeValue !== value) return;
+
+      if (!initialisedRef.current) {
+        indicatorX.value = Math.max(0, layout.x - indicatorPositionOffset);
+        indicatorWidth.value = layout.width;
+        indicatorY.value = Math.max(0, layout.y - indicatorPositionOffset);
+        indicatorHeight.value = layout.height;
+        prevValueRef.current = activeValue;
+        initialisedRef.current = true;
+        setHasIndicator(true);
+        return;
+      }
+
+      if (prevValueRef.current === activeValue) return;
+
+      const config = {
+        delay: 200,
+        duration: isReducedMotion ? 0 : 220,
+        easing: Easing.out(Easing.cubic),
+      } as const;
+
+      indicatorX.value = withTiming(Math.max(0, layout.x - indicatorPositionOffset), config);
+      indicatorWidth.value = withTiming(layout.width, config);
+      indicatorY.value = withTiming(Math.max(0, layout.y - indicatorPositionOffset), config);
+      indicatorHeight.value = withTiming(layout.height, config);
+      prevValueRef.current = activeValue;
+    },
+    [
+      controlledValue,
+      indicatorHeight,
+      indicatorWidth,
+      indicatorX,
+      indicatorY,
+      indicatorPositionOffset,
+      isReducedMotion,
+      uncontrolledValue,
+    ]
+  );
+
+  useEffect(() => {
+    if (!currentValue || !initialisedRef.current) return;
+    if (prevValueRef.current === undefined || prevValueRef.current === currentValue) return;
+    const layout = layoutsRef.current.get(currentValue);
+    if (!layout) return;
+    const config = {
+      duration: isReducedMotion ? 0 : 220,
+      easing: Easing.out(Easing.cubic),
+    } as const;
+
+    indicatorX.value = withTiming(Math.max(0, layout.x - indicatorPositionOffset), config);
+    indicatorWidth.value = withTiming(layout.width, config);
+    indicatorY.value = withTiming(Math.max(0, layout.y - indicatorPositionOffset), config);
+    indicatorHeight.value = withTiming(layout.height, config);
+    prevValueRef.current = currentValue;
+  }, [
+    currentValue,
+    indicatorHeight,
+    indicatorWidth,
+    indicatorX,
+    indicatorY,
+    indicatorPositionOffset,
+    isReducedMotion,
+    optionValuesKey,
+  ]);
+
+  const indicatorStyle = useAnimatedStyle(() => ({
+    transform: [{ translateX: indicatorX.value }, { translateY: indicatorY.value }],
+    width: indicatorWidth.value,
+    height: indicatorHeight.value,
+  }));
+
+  styles.useVariants({ disabled, size });
+
+  const contextValue = useMemo(
+    () => ({
+      value: currentValue,
+      select,
+      disabled,
+      size,
+      registerOptionLayout,
+    }),
+    [currentValue, select, disabled, size, registerOptionLayout]
+  );
+
+  return (
+    <SegmentedControlContext.Provider value={contextValue}>
+      <View
+        accessibilityRole="radiogroup"
+        accessibilityState={{ disabled }}
+        style={[styles.container, computedStyles, style]}
+        {...remainingProps}
+      >
+        {hasIndicator ? (
+          <Indicator pointerEvents="none" style={[styles.indicator, indicatorStyle]} />
+        ) : null}
+        {children}
+      </View>
+    </SegmentedControlContext.Provider>
+  );
+};
+
+SegmentedControl.displayName = 'SegmentedControl';
+
+const styles = StyleSheet.create(theme => ({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    alignSelf: 'flex-start',
+    gap: theme.components.segmentedControl.group.gap,
+    height: theme.components.segmentedControl.group.height,
+    borderRadius: theme.components.segmentedControl.group.borderRadius,
+    borderWidth: theme.components.segmentedControl.group.borderWidth,
+    backgroundColor: theme.color.surface.neutral.subtle,
+    borderColor: theme.color.border.strong,
+    variants: {
+      size: {
+        sm: {
+          height: 32,
+          padding: 2,
+        },
+        md: {
+          height: theme.components.segmentedControl.group.height,
+          padding: 2,
+        },
+      },
+      disabled: {
+        true: {
+          opacity: theme.opacity.disabled,
+        },
+      },
+    },
+  },
+  indicator: {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    borderRadius: theme.components.segmentedControl.borderRadius,
+    backgroundColor: theme.color.interactive.brand.surface.strong.default,
+  },
+}));
+
+export default SegmentedControl;

package/src/components/SegmentedControl/SegmentedControlOption.props.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+import type { PressableProps, ViewProps } from 'react-native';
+
+export interface SegmentedControlOptionProps extends Omit<PressableProps, 'children'> {
+  /** Unique option value. */
+  value: string;
+  /** Option label/content. */
+  children: ReactNode;
+  /** Disables only this option. */
+  disabled?: boolean;
+  style?: ViewProps['style'];
+}
+
+export default SegmentedControlOptionProps;

package/src/components/SegmentedControl/SegmentedControlOption.tsx

@@ -0,0 +1,213 @@
+import { createPressable } from '@gluestack-ui/pressable';
+import { useEffect } from 'react';
+import { Platform, Pressable, View } from 'react-native';
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useReducedMotion,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import { StyleSheet } from 'react-native-unistyles';
+import { BodyText } from '../BodyText';
+import { useSegmentedControlContext } from './SegmentedControl.context';
+import type SegmentedControlOptionProps from './SegmentedControlOption.props';
+
+const AnimatedView = Animated.createAnimatedComponent(View);
+
+const SegmentedControlOptionRoot = ({
+  value,
+  children,
+  accessibilityLabel,
+  disabled = false,
+  style,
+  states = {},
+  ...props
+}: SegmentedControlOptionProps & { states?: { active?: boolean; disabled?: boolean } }) => {
+  const {
+    value: selectedValue,
+    select,
+    disabled: allDisabled,
+    size,
+    registerOptionLayout,
+  } = useSegmentedControlContext();
+  const { active = false } = states;
+  const reducedMotion = useReducedMotion();
+
+  const selected = selectedValue === value;
+  const isDisabled = disabled || !!allDisabled;
+
+  const selectedProgress = useSharedValue(selected ? 1 : 0);
+
+  useEffect(() => {
+    selectedProgress.value = withTiming(selected ? 1 : 0, {
+      duration: reducedMotion ? 0 : 220,
+      easing: Easing.out(Easing.cubic),
+    });
+  }, [reducedMotion, selected, selectedProgress]);
+
+  const regularLabelStyle = useAnimatedStyle(() => ({
+    opacity: 1 - selectedProgress.value,
+  }));
+
+  const selectedLabelStyle = useAnimatedStyle(() => ({
+    opacity: selectedProgress.value,
+  }));
+
+  styles.useVariants({ selected, disabled: isDisabled, size, active });
+
+  const onPress = () => {
+    if (isDisabled) return;
+    select(value);
+  };
+
+  const accessibleLabel =
+    typeof children === 'string' || typeof children === 'number' ? String(children) : value;
+
+  return (
+    <Pressable
+      {...props}
+      accessibilityRole="radio"
+      accessibilityState={{ checked: selected, disabled: isDisabled }}
+      accessibilityLabel={accessibilityLabel ?? accessibleLabel}
+      onPress={onPress}
+      onLayout={e => registerOptionLayout(value, e.nativeEvent.layout)}
+      disabled={isDisabled}
+      style={[styles.option, style]}
+      {...(Platform.OS === 'web'
+        ? ({ 'aria-label': accessibilityLabel ?? accessibleLabel } as any)
+        : null)}
+    >
+      <View
+        style={styles.labelWrap}
+        accessible={false}
+        accessibilityElementsHidden
+        importantForAccessibility="no-hide-descendants"
+        {...(Platform.OS === 'web' ? ({ 'aria-hidden': true } as any) : null)}
+      >
+        <BodyText
+          size="md"
+          weight="semibold"
+          style={styles.labelSizer}
+          accessible={false}
+          accessibilityElementsHidden
+          importantForAccessibility="no-hide-descendants"
+          {...(Platform.OS === 'web' ? ({ 'aria-hidden': true } as any) : null)}
+        >
+          {children}
+        </BodyText>
+        <AnimatedView
+          pointerEvents="none"
+          style={[styles.textLayer, regularLabelStyle]}
+          accessible={false}
+          accessibilityElementsHidden
+          importantForAccessibility="no-hide-descendants"
+          {...(Platform.OS === 'web' ? ({ 'aria-hidden': true } as any) : null)}
+        >
+          <BodyText size="md" weight="regular" style={styles.textRegular}>
+            {children}
+          </BodyText>
+        </AnimatedView>
+        <AnimatedView
+          pointerEvents="none"
+          style={[styles.textLayer, selectedLabelStyle]}
+          accessible={false}
+          accessibilityElementsHidden
+          importantForAccessibility="no-hide-descendants"
+          {...(Platform.OS === 'web' ? ({ 'aria-hidden': true } as any) : null)}
+        >
+          <BodyText size="md" weight="semibold" style={styles.textSelected}>
+            {children}
+          </BodyText>
+        </AnimatedView>
+      </View>
+    </Pressable>
+  );
+};
+
+const SegmentedControlOption = createPressable({ Root: SegmentedControlOptionRoot });
+
+SegmentedControlOption.displayName = 'SegmentedControlOption';
+
+const styles = StyleSheet.create(theme => ({
+  option: {
+    minWidth: theme.components.segmentedControl.minWidth,
+    height: theme.components.segmentedControl.height,
+    borderRadius: theme.components.segmentedControl.borderRadius,
+    paddingHorizontal: theme.components.segmentedControl.paddingHorizontal,
+    paddingVertical: theme.components.segmentedControl.paddingVertical,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'transparent',
+    zIndex: 1,
+    variants: {
+      size: {
+        sm: {
+          height: 28,
+          paddingHorizontal: theme.space[150],
+          paddingVertical: 0,
+        },
+        md: {
+          height: 44,
+          paddingHorizontal: theme.components.segmentedControl.paddingHorizontal,
+          paddingVertical: theme.components.segmentedControl.paddingVertical,
+        },
+      },
+      selected: {
+        true: {
+          backgroundColor: 'transparent',
+          _web: {
+            _active: {
+              backgroundColor: theme.color.interactive.brand.surface.strong.active,
+            },
+          },
+        },
+        false: {
+          _web: {
+            _hover: {
+              backgroundColor: theme.color.interactive.neutral.surface.subtle.hover,
+            },
+            _active: {
+              backgroundColor: theme.color.interactive.neutral.surface.subtle.active,
+            },
+          },
+        },
+      },
+      active: {
+        true: {
+          backgroundColor: theme.color.interactive.neutral.surface.subtle.active,
+        },
+      },
+    },
+  },
+  labelWrap: {
+    position: 'relative',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  labelSizer: {
+    opacity: 0,
+  },
+  textLayer: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  textRegular: {
+    color: theme.color.text.primary,
+  },
+  textSelected: {
+    color: theme.color.text.inverted,
+    variants: {
+      disabled: {
+        true: {
+          opacity: 1,
+        },
+      },
+    },
+  },
+}));
+
+export default SegmentedControlOption;

package/src/components/SegmentedControl/index.ts

@@ -0,0 +1,4 @@
+export { default as SegmentedControl } from './SegmentedControl';
+export type { SegmentedControlProps } from './SegmentedControl.props';
+export { default as SegmentedControlOption } from './SegmentedControlOption';
+export type { SegmentedControlOptionProps } from './SegmentedControlOption.props';

package/src/components/index.ts

@@ -46,6 +46,7 @@ export * from './ProgressStepper';
 export * from './Radio';
 export * from './RadioCard';
 export * from './SectionHeader';
+export * from './SegmentedControl';
 export * from './Select';
 export * from './Skeleton';
 export * from './Spinner';