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

package/Examples/SampleUI/src/components/Drawer/DrawerItem.tsx

@@ -1,209 +0,0 @@
-import * as React from 'react';
-import {
-  ColorValue,
-  GestureResponderEvent,
-  PressableAndroidRippleConfig,
-  StyleProp,
-  StyleSheet,
-  View,
-  ViewStyle,
-} from 'react-native';
-
-import color from 'color';
-
-import { useInternalTheme } from '../../core/theming';
-import type { ThemeProp } from '../../types';
-import Icon, { IconSource } from '../Icon';
-import TouchableRipple from '../TouchableRipple/TouchableRipple';
-import Text from '../Typography/Text';
-
-export type Props = React.ComponentPropsWithRef<typeof View> & {
-  /**
-   * The label text of the item.
-   */
-  label: string;
-  /**
-   * Icon to display for the `DrawerItem`.
-   */
-  icon?: IconSource;
-  /**
-   * Whether to highlight the drawer item as active.
-   */
-  active?: boolean;
-  /**
-   * Whether the item is disabled.
-   */
-  disabled?: boolean;
-  /**
-   * Function to execute on press.
-   */
-  onPress?: (e: GestureResponderEvent) => void;
-  /**
-   * Type of background drawabale to display the feedback (Android).
-   * https://reactnative.dev/docs/pressable#rippleconfig
-   */
-  background?: PressableAndroidRippleConfig;
-  /**
-   * Accessibility label for the button. This is read by the screen reader when the user taps the button.
-   */
-  accessibilityLabel?: string;
-  /**
-   * Callback which returns a React element to display on the right side. For instance a Badge.
-   */
-  right?: (props: { color: string }) => React.ReactNode;
-  /**
-   * Specifies the largest possible scale a label font can reach.
-   */
-  labelMaxFontSizeMultiplier?: number;
-  /**
-   * Color of the ripple effect.
-   */
-  rippleColor?: ColorValue;
-  style?: StyleProp<ViewStyle>;
-  /**
-   * @optional
-   */
-  theme?: ThemeProp;
-};
-
-/**
- * A component used to show an action item with an icon and a label in a navigation drawer.
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { Drawer } from 'react-native-paper';
- *
- * const MyComponent = () => (
- *    <Drawer.Item
- *      style={{ backgroundColor: '#64ffda' }}
- *      icon="star"
- *      label="First Item"
- *    />
- * );
- *
- * export default MyComponent;
- * ```
- */
-const DrawerItem = ({
-  icon,
-  label,
-  active,
-  disabled,
-  theme: themeOverrides,
-  rippleColor: customRippleColor,
-  style,
-  onPress,
-  background,
-  accessibilityLabel,
-  right,
-  labelMaxFontSizeMultiplier,
-  ...rest
-}: Props) => {
-  const theme = useInternalTheme(themeOverrides);
-  const { roundness, isV3 } = theme;
-
-  const backgroundColor = active
-    ? isV3
-      ? theme.colors.secondaryContainer
-      : color(theme.colors.primary).alpha(0.12).rgb().string()
-    : undefined;
-  const contentColor = active
-    ? isV3
-      ? theme.colors.onSecondaryContainer
-      : theme.colors.primary
-    : isV3
-    ? theme.colors.onSurfaceVariant
-    : color(theme.colors.text).alpha(0.68).rgb().string();
-
-  const labelMargin = icon ? (isV3 ? 12 : 32) : 0;
-  const borderRadius = (isV3 ? 7 : 1) * roundness;
-  const rippleColor = isV3
-    ? color(contentColor).alpha(0.12).rgb().string()
-    : undefined;
-  const font = isV3 ? theme.fonts.labelLarge : theme.fonts.medium;
-
-  return (
-    <View {...rest}>
-      <TouchableRipple
-        borderless
-        disabled={disabled}
-        background={background}
-        onPress={onPress}
-        style={[
-          styles.container,
-          { backgroundColor, borderRadius },
-          isV3 && styles.v3Container,
-          style,
-        ]}
-        accessibilityRole="button"
-        accessibilityState={{ selected: active }}
-        accessibilityLabel={accessibilityLabel}
-        rippleColor={customRippleColor || rippleColor}
-        theme={theme}
-      >
-        <View style={[styles.wrapper, isV3 && styles.v3Wrapper]}>
-          <View style={styles.content}>
-            {icon ? (
-              <Icon source={icon} size={24} color={contentColor} />
-            ) : null}
-            <Text
-              variant="labelLarge"
-              selectable={false}
-              numberOfLines={1}
-              style={[
-                styles.label,
-                {
-                  color: contentColor,
-                  marginLeft: labelMargin,
-                  ...font,
-                },
-              ]}
-              maxFontSizeMultiplier={labelMaxFontSizeMultiplier}
-            >
-              {label}
-            </Text>
-          </View>
-
-          {right?.({ color: contentColor })}
-        </View>
-      </TouchableRipple>
-    </View>
-  );
-};
-
-DrawerItem.displayName = 'Drawer.Item';
-
-const styles = StyleSheet.create({
-  container: {
-    marginHorizontal: 10,
-    marginVertical: 4,
-  },
-  v3Container: {
-    justifyContent: 'center',
-    height: 56,
-    marginLeft: 12,
-    marginRight: 12,
-    marginVertical: 0,
-  },
-  wrapper: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    padding: 8,
-  },
-  v3Wrapper: {
-    marginLeft: 16,
-    marginRight: 24,
-    padding: 0,
-  },
-  content: {
-    flex: 1,
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  label: {
-    marginRight: 32,
-  },
-});
-
-export default DrawerItem;

package/Examples/SampleUI/src/components/Drawer/DrawerSection.tsx

@@ -1,138 +0,0 @@
-import * as React from 'react';
-import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
-
-import color from 'color';
-
-import { useInternalTheme } from '../../core/theming';
-import { MD3Colors } from '../../styles/themes/v3/tokens';
-import type { ThemeProp } from '../../types';
-import Divider from '../Divider';
-import Text from '../Typography/Text';
-
-export type Props = React.ComponentPropsWithRef<typeof View> & {
-  /**
-   * Title to show as the header for the section.
-   */
-  title?: string;
-  /**
-   * Content of the `Drawer.Section`.
-   */
-  children: React.ReactNode;
-  /**
-   * Whether to show `Divider` at the end of the section. True by default.
-   */
-  showDivider?: boolean;
-  /**
-   * Specifies the largest possible scale a title font can reach.
-   */
-  titleMaxFontSizeMultiplier?: number;
-  style?: StyleProp<ViewStyle>;
-  /**
-   * @optional
-   */
-  theme?: ThemeProp;
-};
-
-/**
- * A component to group content inside a navigation drawer.
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { Drawer } from 'react-native-paper';
- *
- * const MyComponent = () => {
- *   const [active, setActive] = React.useState('');
- *
- *   return (
- *     <Drawer.Section title="Some title">
- *       <Drawer.Item
- *         label="First Item"
- *         active={active === 'first'}
- *         onPress={() => setActive('first')}
- *       />
- *       <Drawer.Item
- *         label="Second Item"
- *         active={active === 'second'}
- *         onPress={() => setActive('second')}
- *       />
- *     </Drawer.Section>
- *   );
- * };
- *
- * export default MyComponent;
- * ```
- */
-const DrawerSection = ({
-  children,
-  title,
-  theme: themeOverrides,
-  style,
-  showDivider = true,
-  titleMaxFontSizeMultiplier,
-  ...rest
-}: Props) => {
-  const theme = useInternalTheme(themeOverrides);
-  const { isV3 } = theme;
-  const titleColor = isV3
-    ? theme.colors.onSurfaceVariant
-    : color(theme.colors.text).alpha(0.54).rgb().string();
-  const titleMargin = isV3 ? 28 : 16;
-  const font = isV3 ? theme.fonts.titleSmall : theme.fonts.medium;
-
-  return (
-    <View style={[styles.container, style]} {...rest}>
-      {title && (
-        <View style={[styles.titleContainer, isV3 && styles.v3TitleContainer]}>
-          {title && (
-            <Text
-              variant="titleSmall"
-              numberOfLines={1}
-              style={[
-                {
-                  color: titleColor,
-                  marginLeft: titleMargin,
-                  ...font,
-                },
-              ]}
-              maxFontSizeMultiplier={titleMaxFontSizeMultiplier}
-            >
-              {title}
-            </Text>
-          )}
-        </View>
-      )}
-      {children}
-      {showDivider && (
-        <Divider
-          {...(isV3 && { horizontalInset: true, bold: true })}
-          style={[styles.divider, isV3 && styles.v3Divider]}
-          theme={theme}
-        />
-      )}
-    </View>
-  );
-};
-
-DrawerSection.displayName = 'Drawer.Section';
-
-const styles = StyleSheet.create({
-  container: {
-    marginBottom: 4,
-  },
-  titleContainer: {
-    height: 40,
-    justifyContent: 'center',
-  },
-  v3TitleContainer: {
-    height: 56,
-  },
-  divider: {
-    marginTop: 4,
-  },
-  v3Divider: {
-    backgroundColor: MD3Colors.neutralVariant50,
-  },
-});
-
-export default DrawerSection;