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

package/Examples/SampleUI/src/components/TextInput/types.tsx

@@ -1,155 +0,0 @@
-import * as React from 'react';
-import type {
-  TextInput as NativeTextInput,
-  Animated,
-  TextStyle,
-  LayoutChangeEvent,
-  ColorValue,
-  StyleProp,
-  ViewProps,
-  ViewStyle,
-  NativeSyntheticEvent,
-  TextLayoutEventData,
-} from 'react-native';
-
-import type { $Omit, InternalTheme, ThemeProp } from './../../types';
-
-export type TextInputLabelProp = string | React.ReactElement;
-
-type TextInputProps = React.ComponentPropsWithRef<typeof NativeTextInput> & {
-  mode?: 'flat' | 'outlined';
-  left?: React.ReactNode;
-  right?: React.ReactNode;
-  disabled?: boolean;
-  label?: TextInputLabelProp;
-  placeholder?: string;
-  error?: boolean;
-  onChangeText?: Function;
-  selectionColor?: string;
-  cursorColor?: string;
-  underlineColor?: string;
-  activeUnderlineColor?: string;
-  outlineColor?: string;
-  activeOutlineColor?: string;
-  textColor?: string;
-  dense?: boolean;
-  multiline?: boolean;
-  numberOfLines?: number;
-  onFocus?: (args: any) => void;
-  onBlur?: (args: any) => void;
-  render?: (props: RenderProps) => React.ReactNode;
-  value?: string;
-  style?: StyleProp<TextStyle>;
-  theme?: ThemeProp;
-  testID?: string;
-  contentStyle?: StyleProp<TextStyle>;
-  outlineStyle?: StyleProp<ViewStyle>;
-  underlineStyle?: StyleProp<ViewStyle>;
-  scaledLabel?: boolean;
-};
-
-export type RenderProps = {
-  ref: (a?: NativeTextInput | null) => void;
-  onChangeText?: (a: string) => void;
-  placeholder?: string;
-  placeholderTextColor?: ColorValue;
-  editable?: boolean;
-  selectionColor?: string;
-  cursorColor?: string;
-  onFocus?: (args: any) => void;
-  onBlur?: (args: any) => void;
-  underlineColorAndroid?: string;
-  onLayout?: (args: any) => void;
-  style: any;
-  multiline?: boolean;
-  numberOfLines?: number;
-  value?: string;
-  adjustsFontSizeToFit?: boolean;
-  testID?: string;
-};
-type TextInputTypesWithoutMode = $Omit<TextInputProps, 'mode'>;
-export type State = {
-  labeled: Animated.Value;
-  error: Animated.Value;
-  focused: boolean;
-  displayPlaceholder: boolean;
-  value?: string;
-  labelTextLayout: { width: number };
-  labelLayout: { measured: boolean; width: number; height: number };
-  leftLayout: { height: number | null; width: number | null };
-  rightLayout: { height: number | null; width: number | null };
-  inputContainerLayout: { width: number };
-  contentStyle?: StyleProp<ViewProps>;
-};
-export type ChildTextInputProps = {
-  parentState: State;
-  innerRef: (ref?: NativeTextInput | null) => void;
-  onFocus?: (args: any) => void;
-  onBlur?: (args: any) => void;
-  forceFocus: () => void;
-  onChangeText?: (value: string) => void;
-  onInputLayout: (event: LayoutChangeEvent) => void;
-  onLayoutAnimatedText: (args: any) => void;
-  onLabelTextLayout: (event: NativeSyntheticEvent<TextLayoutEventData>) => void;
-  onLeftAffixLayoutChange: (event: LayoutChangeEvent) => void;
-  onRightAffixLayoutChange: (event: LayoutChangeEvent) => void;
-} & $Omit<TextInputTypesWithoutMode, 'theme'> & { theme: InternalTheme };
-
-export type LabelProps = {
-  mode?: 'flat' | 'outlined';
-  placeholderStyle: any;
-  placeholderOpacity:
-    | number
-    | Animated.Value
-    | Animated.AnimatedInterpolation<number>;
-  baseLabelTranslateX: number;
-  baseLabelTranslateY: number;
-  wiggleOffsetX: number;
-  labelScale: number;
-  fontSize: number;
-  lineHeight?: number | undefined;
-  fontWeight: TextStyle['fontWeight'];
-  font: any;
-  topPosition: number;
-  paddingLeft?: number;
-  paddingRight?: number;
-  labelTranslationXOffset?: number;
-  placeholderColor: string | null;
-  backgroundColor?: ColorValue;
-  label?: TextInputLabelProp | null;
-  hasActiveOutline?: boolean | null;
-  activeColor: string;
-  errorColor?: string;
-  labelError?: boolean | null;
-  onLayoutAnimatedText: (args: any) => void;
-  onLabelTextLayout: (event: NativeSyntheticEvent<TextLayoutEventData>) => void;
-  roundness: number;
-  maxFontSizeMultiplier?: number | undefined | null;
-  testID?: string;
-  contentStyle?: StyleProp<ViewProps>;
-  theme?: ThemeProp;
-};
-export type InputLabelProps = {
-  labeled: Animated.Value;
-  error: Animated.Value;
-  focused: boolean;
-  wiggle: boolean;
-  opacity: number;
-  labelLayoutMeasured: boolean;
-  labelLayoutWidth: number;
-  labelLayoutHeight: number;
-  inputContainerLayout: { width: number };
-  labelBackground?: any;
-  maxFontSizeMultiplier?: number | undefined | null;
-  isV3?: boolean;
-  scaledLabel?: boolean;
-} & LabelProps;
-
-export type LabelBackgroundProps = {
-  labelStyle: any;
-  labeled: Animated.Value;
-  labelLayoutWidth: number;
-  labelLayoutHeight: number;
-  maxFontSizeMultiplier?: number | undefined | null;
-  theme?: ThemeProp;
-} & LabelProps;

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

@@ -1,187 +0,0 @@
-import * as React from 'react';
-import {
-  GestureResponderEvent,
-  StyleProp,
-  StyleSheet,
-  ViewStyle,
-  View,
-  Animated,
-  ColorValue,
-} from 'react-native';
-
-import color from 'color';
-
-import { ToggleButtonGroupContext } from './ToggleButtonGroup';
-import { getToggleButtonColor } from './utils';
-import { useInternalTheme } from '../../core/theming';
-import { black, white } from '../../styles/themes/v2/colors';
-import type { ThemeProp } from '../../types';
-import { forwardRef } from '../../utils/forwardRef';
-import type { IconSource } from '../Icon';
-import IconButton from '../IconButton/IconButton';
-
-export type Props = {
-  /**
-   * Icon to display for the `ToggleButton`.
-   */
-  icon: IconSource;
-  /**
-   * Size of the icon.
-   */
-  size?: number;
-  /**
-   * Custom text color for button.
-   */
-  iconColor?: string;
-  /**
-   * Color of the ripple effect.
-   */
-  rippleColor?: ColorValue;
-  /**
-   * Whether the button is disabled.
-   */
-  disabled?: boolean;
-  /**
-   * Accessibility label for the `ToggleButton`. This is read by the screen reader when the user taps the button.
-   */
-  accessibilityLabel?: string;
-  /**
-   * Function to execute on press.
-   */
-  onPress?: (value?: GestureResponderEvent | string) => void;
-  /**
-   * Value of button.
-   */
-  value?: string;
-  /**
-   * Status of button.
-   */
-  status?: 'checked' | 'unchecked';
-  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
-  /**
-   * @optional
-   */
-  theme?: ThemeProp;
-  ref?: React.RefObject<View>;
-  /**
-   * testID to be used on tests.
-   */
-  testID?: string;
-};
-
-/**
- * Toggle buttons can be used to group related options. To emphasize groups of related toggle buttons,
- * a group should share a common container.
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { ToggleButton } from 'react-native-paper';
- *
- * const ToggleButtonExample = () => {
- *   const [status, setStatus] = React.useState('checked');
- *
- *   const onButtonToggle = value => {
- *     setStatus(status === 'checked' ? 'unchecked' : 'checked');
- *   };
- *
- *   return (
- *     <ToggleButton
- *       icon="bluetooth"
- *       value="bluetooth"
- *       status={status}
- *       onPress={onButtonToggle}
- *     />
- *   );
- * };
- *
- * export default ToggleButtonExample;
- *
- * ```
- */
-const ToggleButton = forwardRef<View, Props>(
-  (
-    {
-      icon,
-      size,
-      theme: themeOverrides,
-      accessibilityLabel,
-      disabled,
-      style,
-      value,
-      status,
-      onPress,
-      rippleColor,
-      ...rest
-    }: Props,
-    ref
-  ) => {
-    const theme = useInternalTheme(themeOverrides);
-    const borderRadius = theme.roundness;
-
-    return (
-      <ToggleButtonGroupContext.Consumer>
-        {(
-          context: { value: string | null; onValueChange: Function } | null
-        ) => {
-          const checked: boolean | null =
-            (context && context.value === value) || status === 'checked';
-
-          const backgroundColor = getToggleButtonColor({ theme, checked });
-          const borderColor = theme.isV3
-            ? theme.colors.outline
-            : color(theme.dark ? white : black)
-                .alpha(0.29)
-                .rgb()
-                .string();
-
-          return (
-            <IconButton
-              borderless={false}
-              icon={icon}
-              onPress={(e?: GestureResponderEvent | string) => {
-                if (onPress) {
-                  onPress(e);
-                }
-
-                if (context) {
-                  context.onValueChange(!checked ? value : null);
-                }
-              }}
-              size={size}
-              accessibilityLabel={accessibilityLabel}
-              accessibilityState={{ disabled, selected: checked }}
-              disabled={disabled}
-              style={[
-                styles.content,
-                {
-                  backgroundColor,
-                  borderRadius,
-                  borderColor,
-                },
-                style,
-              ]}
-              ref={ref}
-              theme={theme}
-              rippleColor={rippleColor}
-              {...rest}
-            />
-          );
-        }}
-      </ToggleButtonGroupContext.Consumer>
-    );
-  }
-);
-
-const styles = StyleSheet.create({
-  content: {
-    width: 42,
-    height: 42,
-    margin: 0,
-  },
-});
-
-export default ToggleButton;
-
-// @component-docs ignore-next-line
-export { ToggleButton };

package/Examples/SampleUI/src/components/ToggleButton/ToggleButtonGroup.tsx

@@ -1,72 +0,0 @@
-import * as React from 'react';
-
-export type Props<Value = string> = {
-  /**
-   * Function to execute on selection change.
-   */
-  onValueChange: (value: Value) => void;
-  /**
-   * Value of the currently selected toggle button.
-   */
-  value: Value | null;
-  /**
-   * React elements containing toggle buttons.
-   */
-  children: React.ReactNode;
-};
-
-type ToggleButtonContextType<Value> = {
-  value: Value | null;
-  onValueChange: (item: Value) => void;
-};
-
-export const ToggleButtonGroupContext =
-  //@ts-expect-error: TS can't ensure the type from Group to children
-  React.createContext<ToggleButtonContextType>(null as any);
-
-/**
- * Toggle group allows to control a group of toggle buttons.</br>
- * It doesn't change the appearance of the toggle buttons. If you want to group them in a row, check out [ToggleButton.Row](ToggleButtonRow).
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { ToggleButton } from 'react-native-paper';
- *
- * const MyComponent = () => {
- *   const [value, setValue] = React.useState('left');
- *
- *   return (
- *     <ToggleButton.Group
- *       onValueChange={value => setValue(value)}
- *       value={value}>
- *       <ToggleButton icon="format-align-left" value="left" />
- *       <ToggleButton icon="format-align-right" value="right" />
- *     </ToggleButton.Group>
- *   );
- * };
- *
- * export default MyComponent;
- *```
- */
-const ToggleButtonGroup = <Value = string,>({
-  value,
-  onValueChange,
-  children,
-}: Props<Value>) => (
-  <ToggleButtonGroupContext.Provider
-    value={{
-      value,
-      onValueChange,
-    }}
-  >
-    {children}
-  </ToggleButtonGroupContext.Provider>
-);
-
-ToggleButtonGroup.displayName = 'ToggleButton.Group';
-
-export default ToggleButtonGroup;
-
-// @component-docs ignore-next-line
-export { ToggleButtonGroup };

package/Examples/SampleUI/src/components/ToggleButton/ToggleButtonRow.tsx

@@ -1,107 +0,0 @@
-import * as React from 'react';
-import { StyleSheet, View, StyleProp, ViewStyle } from 'react-native';
-
-import ToggleButton from './ToggleButton';
-import ToggleButtonGroup from './ToggleButtonGroup';
-
-export type Props = {
-  /**
-   * Function to execute on selection change.
-   */
-  onValueChange: (value: string) => void;
-  /**
-   * Value of the currently selected toggle button.
-   */
-  value: string;
-  /**
-   * React elements containing toggle buttons.
-   */
-  children: React.ReactNode;
-  style?: StyleProp<ViewStyle>;
-};
-
-/**
- * Toggle button row renders a group of toggle buttons in a row.
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { ToggleButton } from 'react-native-paper';
- *
- * const MyComponent = () => {
- *   const [value, setValue] = React.useState('left');
- *
- *   return (
- *     <ToggleButton.Row onValueChange={value => setValue(value)} value={value}>
- *       <ToggleButton icon="format-align-left" value="left" />
- *       <ToggleButton icon="format-align-right" value="right" />
- *     </ToggleButton.Row>
- *   );
- * };
- *
- * export default MyComponent;
- *
- *```
- */
-const ToggleButtonRow = ({ value, onValueChange, children, style }: Props) => {
-  const count = React.Children.count(children);
-
-  return (
-    <ToggleButtonGroup value={value} onValueChange={onValueChange}>
-      <View style={[styles.row, style]}>
-        {React.Children.map(children, (child, i) => {
-          // @ts-expect-error: TypeScript complains about child.type but it doesn't matter
-          if (child && child.type === ToggleButton) {
-            // @ts-expect-error: We're sure that child is a React Element
-            return React.cloneElement(child, {
-              style: [
-                styles.button,
-                i === 0
-                  ? styles.first
-                  : i === count - 1
-                  ? styles.last
-                  : styles.middle,
-                // @ts-expect-error: We're sure that child is a React Element
-                child.props.style,
-              ],
-            });
-          }
-
-          return child;
-        })}
-      </View>
-    </ToggleButtonGroup>
-  );
-};
-
-ToggleButtonRow.displayName = 'ToggleButton.Row';
-
-const styles = StyleSheet.create({
-  row: {
-    flexDirection: 'row',
-  },
-  button: {
-    borderWidth: StyleSheet.hairlineWidth,
-  },
-
-  first: {
-    borderTopRightRadius: 0,
-    borderBottomRightRadius: 0,
-  },
-
-  middle: {
-    borderRadius: 0,
-    borderLeftWidth: 0,
-  },
-
-  last: {
-    borderLeftWidth: 0,
-    borderTopLeftRadius: 0,
-    borderBottomLeftRadius: 0,
-  },
-});
-
-export default ToggleButtonRow;
-
-// @component-docs ignore-next-line
-export { ToggleButtonRow };

package/Examples/SampleUI/src/components/ToggleButton/index.ts

@@ -1,16 +0,0 @@
-import ToggleButtonComponent from './ToggleButton';
-import ToggleButtonGroup from './ToggleButtonGroup';
-import ToggleButtonRow from './ToggleButtonRow';
-
-const ToggleButton = Object.assign(
-  // @component ./ToggleButton.tsx
-  ToggleButtonComponent,
-  {
-    // @component ./ToggleButtonGroup.tsx
-    Group: ToggleButtonGroup,
-    // @component ./ToggleButtonRow.tsx
-    Row: ToggleButtonRow,
-  }
-);
-
-export default ToggleButton;

package/Examples/SampleUI/src/components/ToggleButton/utils.ts

@@ -1,26 +0,0 @@
-import color from 'color';
-
-import { tokens } from '../../styles/themes/v3/tokens';
-import type { InternalTheme } from '../../types';
-
-export const getToggleButtonColor = ({
-  theme,
-  checked,
-}: {
-  theme: InternalTheme;
-  checked: boolean | null;
-}) => {
-  if (checked) {
-    if (theme.isV3) {
-      return color(theme.colors.onSecondaryContainer)
-        .alpha(tokens.md.ref.opacity.level2)
-        .rgb()
-        .string();
-    }
-    if (theme.dark) {
-      return 'rgba(255, 255, 255, .12)';
-    }
-    return 'rgba(0, 0, 0, .08)';
-  }
-  return 'transparent';
-};