react-native-acoustic-connect-beta 19.0.25 → 19.0.27

package/Examples/SampleUI/src/components/Chip/Chip.tsx

@@ -1,513 +0,0 @@
-import * as React from 'react';
-import {
-  AccessibilityState,
-  Animated,
-  ColorValue,
-  GestureResponderEvent,
-  Platform,
-  PressableAndroidRippleConfig,
-  StyleProp,
-  StyleSheet,
-  TextStyle,
-  Pressable,
-  View,
-  ViewStyle,
-} from 'react-native';
-
-import useLatestCallback from 'use-latest-callback';
-
-import { getChipColors } from './helpers';
-import { useInternalTheme } from '../../core/theming';
-import { white } from '../../styles/themes/v2/colors';
-import type { $Omit, EllipsizeProp, ThemeProp } from '../../types';
-import hasTouchHandler from '../../utils/hasTouchHandler';
-import type { IconSource } from '../Icon';
-import Icon from '../Icon';
-import MaterialCommunityIcon from '../MaterialCommunityIcon';
-import Surface from '../Surface';
-import TouchableRipple from '../TouchableRipple/TouchableRipple';
-import Text from '../Typography/Text';
-
-export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
-  /**
-   * Mode of the chip.
-   * - `flat` - flat chip without outline.
-   * - `outlined` - chip with an outline.
-   */
-  mode?: 'flat' | 'outlined';
-  /**
-   * Text content of the `Chip`.
-   */
-  children: React.ReactNode;
-  /**
-   * Icon to display for the `Chip`. Both icon and avatar cannot be specified.
-   */
-  icon?: IconSource;
-  /**
-   * Avatar to display for the `Chip`. Both icon and avatar cannot be specified.
-   */
-  avatar?: React.ReactNode;
-  /**
-   * Icon to display as the close button for the `Chip`. The icon appears only when the onClose prop is specified.
-   */
-  closeIcon?: IconSource;
-  /**
-   * Whether chip is selected.
-   */
-  selected?: boolean;
-  /**
-   * Whether to style the chip color as selected.
-   * Note: With theme version 3 `selectedColor` doesn't apply to the `icon`.
-   *       If you want specify custom color for the `icon`, render your own `Icon` component.
-   */
-  selectedColor?: string;
-  /**
-   * @supported Available in v5.x with theme version 3
-   * Whether to display overlay on selected chip
-   */
-  showSelectedOverlay?: boolean;
-  /**
-   * Whether to display default check icon on selected chip.
-   * Note: Check will not be shown if `icon` is specified. If specified, `icon` will be shown regardless of `selected`.
-   */
-  showSelectedCheck?: boolean;
-  /**
-   * Color of the ripple effect.
-   */
-  rippleColor?: ColorValue;
-  /**
-   * Whether the chip is disabled. A disabled chip is greyed out and `onPress` is not called on touch.
-   */
-  disabled?: boolean;
-  /**
-   * Type of background drawabale to display the feedback (Android).
-   * https://reactnative.dev/docs/pressable#rippleconfig
-   */
-  background?: PressableAndroidRippleConfig;
-  /**
-   * Accessibility label for the chip. This is read by the screen reader when the user taps the chip.
-   */
-  accessibilityLabel?: string;
-  /**
-   * Accessibility label for the close icon. This is read by the screen reader when the user taps the close icon.
-   */
-  closeIconAccessibilityLabel?: string;
-  /**
-   * Function to execute on press.
-   */
-  onPress?: (e: GestureResponderEvent) => void;
-  /**
-   * Function to execute on long press.
-   */
-  onLongPress?: () => void;
-  /**
-   * Function to execute as soon as the touchable element is pressed and invoked even before onPress.
-   */
-  onPressIn?: (e: GestureResponderEvent) => void;
-  /**
-   * Function to execute as soon as the touch is released even before onPress.
-   */
-  onPressOut?: (e: GestureResponderEvent) => void;
-  /**
-   * Function to execute on close button press. The close button appears only when this prop is specified.
-   */
-  onClose?: () => void;
-  /**
-   * The number of milliseconds a user must touch the element before executing `onLongPress`.
-   */
-  delayLongPress?: number;
-  /**
-   * @supported Available in v5.x with theme version 3
-   * Sets smaller horizontal paddings `12dp` around label, when there is only label.
-   */
-  compact?: boolean;
-  /**
-   * @supported Available in v5.x with theme version 3
-   * Whether chip should have the elevation.
-   */
-  elevated?: boolean;
-  /**
-   * Style of chip's text
-   */
-  textStyle?: StyleProp<TextStyle>;
-  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
-  /**
-   * @optional
-   */
-  theme?: ThemeProp;
-  /**
-   * Pass down testID from chip props to touchable for Detox tests.
-   */
-  testID?: string;
-  /**
-   * Ellipsize Mode for the children text
-   */
-  ellipsizeMode?: EllipsizeProp;
-  /**
-   * Specifies the largest possible scale a text font can reach.
-   */
-  maxFontSizeMultiplier?: number;
-};
-
-/**
- * Chips are compact elements that can represent inputs, attributes, or actions.
- * They can have an icon or avatar on the left, and a close button icon on the right.
- * They are typically used to:
- * <ul>
- *  <li>Present multiple options </li>
- *  <li>Represent attributes active or chosen </li>
- *  <li>Present filter options </li>
- *  <li>Trigger actions related to primary content </li>
- * </ul>
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { Chip } from 'react-native-paper';
- *
- * const MyComponent = () => (
- *   <Chip icon="information" onPress={() => console.log('Pressed')}>Example Chip</Chip>
- * );
- *
- * export default MyComponent;
- * ```
- */
-const Chip = ({
-  mode = 'flat',
-  children,
-  icon,
-  avatar,
-  selected = false,
-  disabled = false,
-  background,
-  accessibilityLabel,
-  accessibilityRole = 'button',
-  closeIconAccessibilityLabel = 'Close',
-  onPress,
-  onLongPress,
-  onPressOut,
-  onPressIn,
-  delayLongPress,
-  onClose,
-  closeIcon,
-  textStyle,
-  style,
-  theme: themeOverrides,
-  testID = 'chip',
-  selectedColor,
-  rippleColor: customRippleColor,
-  showSelectedOverlay = false,
-  showSelectedCheck = true,
-  ellipsizeMode,
-  compact,
-  elevated = false,
-  maxFontSizeMultiplier,
-  ...rest
-}: Props) => {
-  const theme = useInternalTheme(themeOverrides);
-  const { isV3, roundness } = theme;
-
-  const { current: elevation } = React.useRef<Animated.Value>(
-    new Animated.Value(isV3 && elevated ? 1 : 0)
-  );
-
-  const hasPassedTouchHandler = hasTouchHandler({
-    onPress,
-    onLongPress,
-    onPressIn,
-    onPressOut,
-  });
-
-  const isOutlined = mode === 'outlined';
-
-  const handlePressIn = useLatestCallback((e: GestureResponderEvent) => {
-    const { scale } = theme.animation;
-    onPressIn?.(e);
-    Animated.timing(elevation, {
-      toValue: isV3 ? (elevated ? 2 : 0) : 4,
-      duration: 200 * scale,
-      useNativeDriver:
-        Platform.OS === 'web' ||
-        Platform.constants.reactNativeVersion.minor <= 72,
-    }).start();
-  });
-
-  const handlePressOut = useLatestCallback((e: GestureResponderEvent) => {
-    const { scale } = theme.animation;
-    onPressOut?.(e);
-    Animated.timing(elevation, {
-      toValue: isV3 && elevated ? 1 : 0,
-      duration: 150 * scale,
-      useNativeDriver:
-        Platform.OS === 'web' ||
-        Platform.constants.reactNativeVersion.minor <= 72,
-    }).start();
-  });
-
-  const opacity = isV3 ? 0.38 : 0.26;
-  const defaultBorderRadius = roundness * (isV3 ? 2 : 4);
-  const iconSize = isV3 ? 18 : 16;
-
-  const {
-    backgroundColor: customBackgroundColor,
-    borderRadius = defaultBorderRadius,
-  } = (StyleSheet.flatten(style) || {}) as ViewStyle;
-
-  const {
-    borderColor,
-    textColor,
-    iconColor,
-    rippleColor,
-    selectedBackgroundColor,
-    backgroundColor,
-  } = getChipColors({
-    isOutlined,
-    theme,
-    selectedColor,
-    showSelectedOverlay,
-    customBackgroundColor,
-    disabled,
-    customRippleColor,
-  });
-
-  const accessibilityState: AccessibilityState = {
-    selected,
-    disabled,
-  };
-
-  const elevationStyle = isV3 || Platform.OS === 'android' ? elevation : 0;
-  const multiplier = isV3 ? (compact ? 1.5 : 2) : 1;
-  const labelSpacings = {
-    marginRight: onClose ? 0 : 8 * multiplier,
-    marginLeft:
-      avatar || icon || (selected && showSelectedCheck)
-        ? 4 * multiplier
-        : 8 * multiplier,
-  };
-  const contentSpacings = {
-    paddingRight: isV3 ? (onClose ? 34 : 0) : onClose ? 32 : 4,
-  };
-  const labelTextStyle = {
-    color: textColor,
-    ...(isV3 ? theme.fonts.labelLarge : theme.fonts.regular),
-  };
-  return (
-    <Surface
-      style={[
-        styles.container,
-        isV3 && styles.md3Container,
-        !theme.isV3 && {
-          elevation: elevationStyle,
-        },
-        {
-          backgroundColor: selected ? selectedBackgroundColor : backgroundColor,
-          borderColor,
-          borderRadius,
-        },
-        style,
-      ]}
-      {...(theme.isV3 && { elevation: elevationStyle })}
-      {...rest}
-      testID={`${testID}-container`}
-      theme={theme}
-    >
-      <TouchableRipple
-        borderless
-        background={background}
-        style={[{ borderRadius }, styles.touchable]}
-        onPress={onPress}
-        onLongPress={onLongPress}
-        onPressIn={hasPassedTouchHandler ? handlePressIn : undefined}
-        onPressOut={hasPassedTouchHandler ? handlePressOut : undefined}
-        delayLongPress={delayLongPress}
-        rippleColor={rippleColor}
-        disabled={disabled}
-        accessibilityLabel={accessibilityLabel}
-        accessibilityRole={accessibilityRole}
-        accessibilityState={accessibilityState}
-        testID={testID}
-        theme={theme}
-      >
-        <View
-          style={[styles.content, isV3 && styles.md3Content, contentSpacings]}
-        >
-          {avatar && !icon ? (
-            <View
-              style={[
-                styles.avatarWrapper,
-                isV3 && styles.md3AvatarWrapper,
-                disabled && { opacity },
-              ]}
-            >
-              {React.isValidElement(avatar)
-                ? React.cloneElement(avatar as React.ReactElement<any>, {
-                    style: [styles.avatar, avatar.props.style],
-                  })
-                : avatar}
-            </View>
-          ) : null}
-          {icon || (selected && showSelectedCheck) ? (
-            <View
-              style={[
-                styles.icon,
-                isV3 && styles.md3Icon,
-                avatar
-                  ? [
-                      styles.avatar,
-                      styles.avatarSelected,
-                      isV3 && selected && styles.md3SelectedIcon,
-                    ]
-                  : null,
-              ]}
-            >
-              {icon ? (
-                <Icon
-                  source={icon}
-                  color={
-                    avatar
-                      ? white
-                      : !disabled && theme.isV3
-                      ? theme.colors.primary
-                      : iconColor
-                  }
-                  size={18}
-                  theme={theme}
-                />
-              ) : (
-                <MaterialCommunityIcon
-                  name="check"
-                  color={avatar ? white : iconColor}
-                  size={18}
-                  direction="ltr"
-                />
-              )}
-            </View>
-          ) : null}
-          <Text
-            variant="labelLarge"
-            selectable={false}
-            numberOfLines={1}
-            style={[
-              isV3 ? styles.md3LabelText : styles.labelText,
-              labelTextStyle,
-              labelSpacings,
-              textStyle,
-            ]}
-            ellipsizeMode={ellipsizeMode}
-            maxFontSizeMultiplier={maxFontSizeMultiplier}
-          >
-            {children}
-          </Text>
-        </View>
-      </TouchableRipple>
-      {onClose ? (
-        <View style={styles.closeButtonStyle}>
-          <Pressable
-            onPress={onClose}
-            disabled={disabled}
-            accessibilityRole="button"
-            accessibilityLabel={closeIconAccessibilityLabel}
-          >
-            <View
-              style={[
-                styles.icon,
-                styles.closeIcon,
-                isV3 && styles.md3CloseIcon,
-              ]}
-            >
-              {closeIcon ? (
-                <Icon source={closeIcon} color={iconColor} size={iconSize} />
-              ) : (
-                <MaterialCommunityIcon
-                  name={isV3 ? 'close' : 'close-circle'}
-                  size={iconSize}
-                  color={iconColor}
-                  direction="ltr"
-                />
-              )}
-            </View>
-          </Pressable>
-        </View>
-      ) : null}
-    </Surface>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    borderWidth: StyleSheet.hairlineWidth,
-    borderStyle: 'solid',
-    flexDirection: Platform.select({ default: 'column', web: 'row' }),
-  },
-  md3Container: {
-    borderWidth: 1,
-  },
-  content: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingLeft: 4,
-    position: 'relative',
-  },
-  md3Content: {
-    paddingLeft: 0,
-  },
-  icon: {
-    padding: 4,
-    alignSelf: 'center',
-  },
-  md3Icon: {
-    paddingLeft: 8,
-    paddingRight: 0,
-  },
-  closeIcon: {
-    marginRight: 4,
-  },
-  md3CloseIcon: {
-    marginRight: 8,
-    padding: 0,
-  },
-  labelText: {
-    minHeight: 24,
-    lineHeight: 24,
-    textAlignVertical: 'center',
-    marginVertical: 4,
-  },
-  md3LabelText: {
-    textAlignVertical: 'center',
-    marginVertical: 6,
-  },
-  avatar: {
-    width: 24,
-    height: 24,
-    borderRadius: 12,
-  },
-  avatarWrapper: {
-    marginRight: 4,
-  },
-  md3AvatarWrapper: {
-    marginLeft: 4,
-    marginRight: 0,
-  },
-  md3SelectedIcon: {
-    paddingLeft: 4,
-  },
-  // eslint-disable-next-line react-native/no-color-literals
-  avatarSelected: {
-    position: 'absolute',
-    top: 4,
-    left: 4,
-    backgroundColor: 'rgba(0, 0, 0, .29)',
-  },
-  closeButtonStyle: {
-    position: 'absolute',
-    right: 0,
-    height: '100%',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  touchable: {
-    width: '100%',
-  },
-});
-
-export default Chip;