react-native-acoustic-connect-beta 18.0.7 → 18.0.8

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

@@ -0,0 +1,513 @@
+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;