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

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

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

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

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

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

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

@@ -0,0 +1,26 @@
+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';
+};