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

package/Example/nativebase-v3-kitchensink/src/nb/NativeBase/src/components/primitives/Checkbox/Checkbox.web.tsx

@@ -1,201 +0,0 @@
-import React, { memo, forwardRef } from 'react';
-import { mergeRefs } from '../../../utils';
-import { usePropsResolution } from '../../../hooks/useThemeProps';
-import { Center } from '../../composites/Center';
-import { useFormControlContext } from '../../composites/FormControl';
-import Box from '../Box';
-import type { ICheckboxProps } from './types';
-import { useToggleState } from '@react-stately/toggle';
-import { VisuallyHidden } from '@react-aria/visually-hidden';
-import { CheckboxGroupContext } from './CheckboxGroup';
-import { useHover } from '@react-native-aria/interactions';
-import { useCheckbox, useCheckboxGroupItem } from '@react-native-aria/checkbox';
-import { useFocusRing } from '@react-native-aria/focus';
-import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
-import { extractInObject, stylingProps } from '../../../theme/tools/utils';
-import { combineContextAndProps } from '../../../utils';
-import SizedIcon from './SizedIcon';
-import { Stack } from '../Stack';
-import { wrapStringChild } from '../../../utils/wrapStringChild';
-
-const Checkbox = (
-  {
-    wrapperRef,
-    isHovered: isHoveredProp,
-    isFocusVisible: isFocusVisibleProp,
-    ...props
-  }: ICheckboxProps,
-  ref: any
-) => {
-  const formControlContext = useFormControlContext();
-
-  const {
-    isInvalid,
-    isReadOnly,
-    isIndeterminate,
-    ...combinedProps
-  } = combineContextAndProps(formControlContext, props);
-
-  const checkboxGroupContext = React.useContext(CheckboxGroupContext);
-  const state = useToggleState({
-    ...props,
-    defaultSelected: props.defaultIsChecked,
-    isSelected: props.isChecked,
-  });
-
-  const _ref = React.useRef();
-  const mergedRef = mergeRefs([ref, _ref]);
-
-  // Swap hooks depending on whether this checkbox is inside a CheckboxGroup.
-  // This is a bit unorthodox. Typically, hooks cannot be called in a conditional,
-  // but since the checkbox won't move in and out of a group, it should be safe.
-  const { inputProps: groupItemInputProps } = checkboxGroupContext
-    ? // eslint-disable-next-line react-hooks/rules-of-hooks
-      useCheckboxGroupItem(
-        {
-          ...combinedProps,
-          'aria-label': combinedProps.accessibilityLabel,
-          'value': combinedProps.value,
-        },
-        checkboxGroupContext.state,
-        //@ts-ignore
-        mergedRef
-      )
-    : // eslint-disable-next-line react-hooks/rules-of-hooks
-      useCheckbox(
-        {
-          ...combinedProps,
-          'aria-label': combinedProps.accessibilityLabel,
-        },
-        state,
-        //@ts-ignore
-        mergedRef
-      );
-
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const inputProps = React.useMemo(() => groupItemInputProps, [
-    groupItemInputProps.checked,
-    groupItemInputProps.disabled,
-    groupItemInputProps,
-  ]);
-
-  const [contextCombinedProps] = React.useState({
-    ...checkboxGroupContext,
-    ...combinedProps,
-  });
-
-  return (
-    <CheckboxComponent
-      wrapperRef={wrapperRef}
-      mergedRef={mergedRef}
-      inputProps={inputProps}
-      combinedProps={contextCombinedProps}
-      isInvalid={isInvalid}
-      isReadOnly={isReadOnly}
-      isHovered={isHoveredProp}
-      isIndeterminate={isIndeterminate}
-      isFocusVisible={isFocusVisibleProp}
-    />
-  );
-};
-
-const CheckboxComponent = React.memo(
-  ({
-    wrapperRef,
-    inputProps,
-    combinedProps,
-    isInvalid,
-    isReadOnly,
-    isIndeterminate,
-    mergedRef,
-    isHovered: isHoveredProp,
-    isFocusVisible: isFocusVisibleProp,
-  }: any) => {
-    const _ref = React.useRef();
-    const { isHovered } = useHover({}, _ref);
-
-    const { checked: isChecked, disabled: isDisabled } = inputProps;
-
-    const { focusProps, isFocusVisible } = useFocusRing();
-
-    const {
-      icon,
-      _interactionBox,
-      _icon,
-      _stack,
-      _text,
-      ...resolvedProps
-    } = usePropsResolution('Checkbox', combinedProps, {
-      isInvalid,
-      isReadOnly,
-      isFocusVisible: isFocusVisibleProp || isFocusVisible,
-      isDisabled,
-      isIndeterminate,
-      isChecked,
-      isHovered: isHovered || isHoveredProp,
-    });
-
-    const [layoutProps, nonLayoutProps] = extractInObject(resolvedProps, [
-      ...stylingProps.margin,
-      ...stylingProps.layout,
-      ...stylingProps.flexbox,
-      ...stylingProps.position,
-      '_text',
-    ]);
-    const component = React.useMemo(() => {
-      return (
-        <Stack {..._stack} {...layoutProps}>
-          <Center>
-            {/* Interaction Box */}
-            <Box {..._interactionBox} />
-            {/* Checkbox */}
-            <Center {...nonLayoutProps}>
-              {/* {iconResolver()} */}
-              <SizedIcon icon={icon} _icon={_icon} isChecked={isChecked} />
-            </Center>
-          </Center>
-          {/* Label */}
-          {/* {resolvedProps?.children} */}
-          {wrapStringChild(resolvedProps?.children, _text)}
-        </Stack>
-      );
-    }, [
-      _icon,
-      _stack,
-      _text,
-      _interactionBox,
-      icon,
-      isChecked,
-      nonLayoutProps,
-      layoutProps,
-      resolvedProps?.children,
-    ]);
-
-    const mergedWrapperRef = React.useMemo(
-      () => mergeRefs([wrapperRef, _ref]),
-      [wrapperRef]
-    );
-
-    //TODO: refactor for responsive prop
-    if (useHasResponsiveProps(resolvedProps)) {
-      return null;
-    }
-
-    return (
-      <Box
-        // @ts-ignore - RN web supports accessibilityRole="label"
-        accessibilityRole="label"
-        ref={mergedWrapperRef}
-      >
-        <VisuallyHidden>
-          {/* <input {...props.inputProps} {...props.focusProps} ref={props.mergedRef} /> */}
-          <input {...inputProps} {...focusProps} ref={mergedRef} />
-        </VisuallyHidden>
-
-        {component}
-      </Box>
-    );
-  }
-);
-
-export default memo(forwardRef(Checkbox));

package/Example/nativebase-v3-kitchensink/src/nb/NativeBase/src/components/primitives/Checkbox/CheckboxGroup.tsx

@@ -1,49 +0,0 @@
-import React, { createContext, memo, forwardRef } from 'react';
-import { useCheckboxGroupState } from '@react-stately/checkbox';
-import { useCheckboxGroup } from '@react-native-aria/checkbox';
-import { useFormControlContext } from '../../composites/FormControl';
-import type { ICheckboxGroupProps, ICheckboxContext } from './types';
-import Box from '../Box';
-import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
-import { usePropsResolution } from '../../../hooks/useThemeProps';
-
-export const CheckboxGroupContext = createContext<ICheckboxContext | null>(
-  null
-);
-
-function CheckboxGroup(
-  { size, _checkbox, colorScheme, ...props }: ICheckboxGroupProps,
-  ref?: any
-) {
-  const resolvedProps = usePropsResolution('CheckboxGroup', props);
-  const { children } = props;
-  const state = useCheckboxGroupState(props);
-  const { groupProps } = useCheckboxGroup(
-    { 'aria-label': props.accessibilityLabel, ...props },
-    state
-  );
-
-  const formControlContext = useFormControlContext();
-  //TODO: refactor for responsive prop
-  if (useHasResponsiveProps({ ...props, size, colorScheme })) {
-    return null;
-  }
-  return (
-    <CheckboxGroupContext.Provider
-      value={{
-        //@ts-ignore
-        size,
-        colorScheme,
-        ..._checkbox,
-        ...formControlContext,
-        state,
-      }}
-    >
-      <Box {...resolvedProps} {...groupProps} {...props} ref={ref}>
-        {children}
-      </Box>
-    </CheckboxGroupContext.Provider>
-  );
-}
-
-export default memo(forwardRef(CheckboxGroup));

package/Example/nativebase-v3-kitchensink/src/nb/NativeBase/src/components/primitives/Checkbox/SizedIcon.tsx

@@ -1,27 +0,0 @@
-import React from 'react';
-import { default as Box } from '../../primitives/Box';
-import { CheckIcon } from '../../primitives/Icon/Icons';
-
-const SizedIcon = ({
-  icon,
-  _icon,
-  isChecked,
-}: {
-  icon: JSX.Element;
-  _icon: any;
-  isChecked: boolean;
-}) => {
-  return isChecked ? (
-    icon ? (
-      React.cloneElement(icon, {
-        ..._icon,
-      })
-    ) : (
-      <CheckIcon {..._icon} />
-    )
-  ) : (
-    <Box {..._icon} />
-  );
-};
-
-export default SizedIcon;

package/Example/nativebase-v3-kitchensink/src/nb/NativeBase/src/components/primitives/Checkbox/index.tsx

@@ -1,12 +0,0 @@
-import CheckboxMain from './Checkbox';
-import CheckboxGroup from './CheckboxGroup';
-import type { ICheckboxComponentType } from './types';
-
-const CheckTemp: any = CheckboxMain;
-CheckTemp.Group = CheckboxGroup;
-
-// To add typings
-const Checkbox = CheckTemp as ICheckboxComponentType;
-
-export { Checkbox };
-export type { ICheckboxGroupProps, ICheckboxProps } from './types';

package/Example/nativebase-v3-kitchensink/src/nb/NativeBase/src/components/primitives/Checkbox/test/checkbox.test.tsx

@@ -1,194 +0,0 @@
-import React from 'react';
-import { fireEvent, render } from '@testing-library/react-native';
-import { NativeBaseProvider } from '../../../../core/NativeBaseProvider';
-import { Checkbox } from '..';
-import { Text } from '../..';
-
-function CheckBoxGroup() {
-  const [groupValue, setGroupValue] = React.useState(['Item 1 ', 'Item 3 ']);
-  return (
-    <Checkbox.Group
-      colorScheme="green"
-      defaultValue={groupValue}
-      onChange={(values) => {
-        setGroupValue(values || []);
-      }}
-    >
-      <Checkbox value="Item 1 ">
-        <Text mx={2}>Item 1</Text>
-      </Checkbox>
-      <Checkbox value="Item 2 ">
-        <Text mx={2}>Item 2</Text>
-      </Checkbox>
-      <Checkbox value="Item 3 ">
-        <Text mx={2}>Item 3</Text>
-      </Checkbox>
-      <Checkbox colorScheme="orange" value="Indeterminate Item ">
-        <Text mx={2}>Indeterminate Item</Text>
-      </Checkbox>
-    </Checkbox.Group>
-  );
-}
-
-function CheckBox(group: any) {
-  const [groupValues, setGroupValues] = React.useState<Array<any>>([]);
-  return group ? (
-    <Checkbox.Group onChange={setGroupValues} value={groupValues}>
-      <Checkbox value="one">
-        <Text>One</Text>
-      </Checkbox>
-      <Checkbox
-        value="two"
-        isIndeterminate
-        onChange={() => setGroupValues([...groupValues, 'two'])}
-      >
-        <Text>Two</Text>
-      </Checkbox>
-    </Checkbox.Group>
-  ) : (
-    <>
-      <Checkbox
-        value="one"
-        onChange={() => {
-          setGroupValues([...groupValues, 'one']);
-        }}
-      >
-        <Text>One</Text>
-      </Checkbox>
-      <Checkbox
-        value="two"
-        isIndeterminate
-        onChange={() => setGroupValues([...groupValues, 'two'])}
-      >
-        <Text>Two</Text>
-      </Checkbox>
-    </>
-  );
-}
-
-describe('CheckBoxGroup', () => {
-  it('handles defaults and onChange on checkBoxGroup', () => {
-    const { getAllByRole } = render(
-      <NativeBaseProvider
-        initialWindowMetrics={{
-          frame: { x: 0, y: 0, width: 0, height: 0 },
-          insets: { top: 0, left: 0, right: 0, bottom: 0 },
-        }}
-      >
-        <CheckBoxGroup />
-      </NativeBaseProvider>
-    );
-    const checkbox = getAllByRole('checkbox');
-    expect(checkbox.length).toBe(4);
-    expect(checkbox[0].props.accessibilityState.checked).toBe(true);
-    expect(checkbox[1].props.accessibilityState.checked).toBe(false);
-    expect(checkbox[2].props.accessibilityState.checked).toBe(true);
-    expect(checkbox[3].props.accessibilityState.checked).toBe(false);
-    fireEvent.press(checkbox[1]);
-    expect(checkbox[1].props.accessibilityState.checked).toBe(true);
-  });
-  it('can be disabled on checkBox', () => {
-    const { getAllByRole } = render(
-      <NativeBaseProvider
-        initialWindowMetrics={{
-          frame: { x: 0, y: 0, width: 0, height: 0 },
-          insets: { top: 0, left: 0, right: 0, bottom: 0 },
-        }}
-      >
-        <Checkbox value="Item 1 ">
-          <Text mx={2}>Item 1</Text>
-        </Checkbox>
-        <Checkbox value="Item 2 " isDisabled>
-          <Text mx={2}>Item 2</Text>
-        </Checkbox>
-        <Checkbox value="Item 3 ">
-          <Text mx={2}>Item 3</Text>
-        </Checkbox>
-        <Checkbox colorScheme="orange" value="Indeterminate Item ">
-          <Text mx={2}>Indeterminate Item</Text>
-        </Checkbox>
-      </NativeBaseProvider>
-    );
-    const checkbox = getAllByRole('checkbox');
-    expect(checkbox.length).toBe(4);
-    expect(checkbox[1].props.accessibilityState.disabled).toBe(true);
-  });
-  it('is checked on checkBox', () => {
-    const { getAllByRole } = render(
-      <NativeBaseProvider
-        initialWindowMetrics={{
-          frame: { x: 0, y: 0, width: 0, height: 0 },
-          insets: { top: 0, left: 0, right: 0, bottom: 0 },
-        }}
-      >
-        <Checkbox value="Item 1 " isChecked>
-          <Text mx={2}>Item 1</Text>
-        </Checkbox>
-        <Checkbox value="Item 2 " isDisabled>
-          <Text mx={2}>Item 2</Text>
-        </Checkbox>
-        <Checkbox value="Item 3 ">
-          <Text mx={2}>Item 3</Text>
-        </Checkbox>
-        <Checkbox colorScheme="orange" value="Indeterminate Item ">
-          <Text mx={2}>Indeterminate Item</Text>
-        </Checkbox>
-      </NativeBaseProvider>
-    );
-    const checkbox = getAllByRole('checkbox');
-    expect(checkbox.length).toBe(4);
-    expect(checkbox[0].props.accessibilityState.checked).toBe(true);
-  });
-
-  /****   inDeterminant is not yet implemented in checkbox ****/
-
-  // it('inDeterminant on checkBoxGroup', () => {
-  //   const { getAllByRole } = render(
-  //     <NativeBaseProvider
-  //       initialWindowMetrics={{
-  //         frame: { x: 0, y: 0, width: 0, height: 0 },
-  //         insets: { top: 0, left: 0, right: 0, bottom: 0 },
-  //       }}
-  //     >
-  //       <CheckBox group={true} />
-  //     </NativeBaseProvider>
-  //   );
-  //   const checkbox = getAllByRole('checkbox');
-  //   expect(checkbox.length).toBe(2);
-  //   expect(checkbox[1].props.accessibilityState.checked).toBe('mixed');
-  // });
-
-  // it('inDeterminant on checkBox', () => {
-  //   const { getAllByRole } = render(
-  //     <NativeBaseProvider
-  //       initialWindowMetrics={{
-  //         frame: { x: 0, y: 0, width: 0, height: 0 },
-  //         insets: { top: 0, left: 0, right: 0, bottom: 0 },
-  //       }}
-  //     >
-  //       <CheckBox group={false} />
-  //     </NativeBaseProvider>
-  //   );
-  //   const checkbox = getAllByRole('checkbox');
-  //   expect(checkbox.length).toBe(2);
-  //   fireEvent.press(checkbox[1]);
-  //   expect(checkbox[1].props.accessibilityState.checked).toBe('mixed');
-  // });
-
-  it('onChange on checkBox', () => {
-    const { getAllByRole } = render(
-      <NativeBaseProvider
-        initialWindowMetrics={{
-          frame: { x: 0, y: 0, width: 0, height: 0 },
-          insets: { top: 0, left: 0, right: 0, bottom: 0 },
-        }}
-      >
-        <CheckBox />
-      </NativeBaseProvider>
-    );
-    const checkbox = getAllByRole('checkbox');
-    expect(checkbox.length).toBe(2);
-    fireEvent.press(checkbox[0]);
-    expect(checkbox[0].props.accessibilityState.checked).toBe(true);
-  });
-});

package/Example/nativebase-v3-kitchensink/src/nb/NativeBase/src/components/primitives/Checkbox/types.tsx

@@ -1,199 +0,0 @@
-import type { CheckboxGroupState } from '@react-stately/checkbox';
-import type { MutableRefObject } from 'react';
-import type { TouchableOpacityProps } from 'react-native';
-import type { IFormControlContext } from '../../composites/FormControl';
-import type { InterfaceBoxProps } from '../Box';
-import type { IIconProps } from '../Icon';
-import type { IStackProps } from '../../primitives/Stack';
-import type {
-  CustomProps,
-  ResponsiveValue,
-  ThemeComponentSizeType,
-} from '../../../components/types';
-import type { ColorSchemeType } from '../../../components/types';
-
-export type ICheckboxValue = string;
-
-export interface InterfaceCheckbox extends InterfaceBoxProps<ICheckboxProps> {
-  /**
-   * assign id to checkbox
-   */
-  id?: string;
-  /**
-   * The name of the input field in a checkbox.
-   */
-  name?: string;
-  /**
-   * The value to be used in the checkbox input. This is the value that will be returned on form submission.
-   */
-  value: ICheckboxValue;
-  /**
-   * The color of the radio when it's checked. This should be one of the color keys in the theme (e.g."green", "red").
-   */
-  colorScheme?: ColorSchemeType & ResponsiveValue<'default'>;
-  /**
-   * If true, the checkbox will be initially checked. (use defaultValue prop if using it inside Checkbox.Group)
-   */
-  defaultIsChecked?: boolean;
-  /**
-   * If true, the checkbox will be checked. You'll need to pass onChange to update it's value (since it's now controlled).
-   */
-  isChecked?: boolean;
-  /**
-   * If true, the checkbox will be indeterminate. This only affects the icon shown inside checkbox.
-   */
-  isIndeterminate?: boolean;
-  // isFullWidth?: boolean;
-  /**
-   * If true, the checkbox will be disabled.
-   */
-  isDisabled?: boolean;
-  /**
-   * If true, the checkbox is marked as invalid.
-   */
-  isInvalid?: boolean;
-  /**
-   * If true, the checkbox is marked as readonly.
-   */
-  isReadOnly?: boolean;
-  /**
-   * If true, the checkbox will be hovered.
-   */
-  isHovered?: boolean;
-  /**
-   * If true, the checkbox will be pressed.
-   */
-  isPressed?: boolean;
-  /**
-   * If true, the checkbox will be focused.
-   */
-  isFocused?: boolean;
-  /**
-   * If true, the checkbox focus ring will be visible.
-   */
-  isFocusVisible?: boolean;
-  /**
-   * The size (width and height) of the checkbox.
-   * @default 'md'
-   */
-  size?: ThemeComponentSizeType<'Checkbox'>;
-  /**
-   * If given, will use this icon instead of the default.
-   */
-  icon?: JSX.Element;
-  /**
-   * Passed props wilICheckboxGroupPropsl be applied on disabled state.
-   */
-  _disabled?: Omit<Partial<ICheckboxProps>, '_disabled'>;
-  /**
-   * Passed props will be applied on checked state.
-   */
-  _checked?: Omit<Partial<ICheckboxProps>, '_checked'>;
-  /**
-   * Passed props will be applied on unchecked state.
-   */
-  _unchecked?: Omit<Partial<ICheckboxProps>, '_unchecked'>;
-  /**
-   * Passed props will be applied on focus state.
-   */
-  _focus?: Omit<Partial<ICheckboxProps>, '_focus'>;
-  /**
-   * Passed props will be applied on hover state.
-   */
-  _hover?: Omit<Partial<ICheckboxProps>, '_hover'>;
-  /**
-   * Passed props will be applied on invalid state.
-   */
-  _invalid?: Omit<Partial<ICheckboxProps>, '_invalid'>;
-  /**
-   * Passed props will be applied on pressed state on native.
-   */
-  _pressed?: Omit<Partial<ICheckboxProps>, '_pressed'>;
-  /**
-   * Passed props will be applied on readonly state.
-   */
-  _readOnly?: Omit<Partial<ICheckboxProps>, '_readOnly'>;
-  /**
-   * Icon related props can be passed in _icon.
-   */
-  _icon?: Partial<IIconProps>;
-  /**
-   * You can style interaction box around the checkbox using this.
-   */
-  _interactionBox?: Omit<Partial<ICheckboxProps>, '_interactionBox'>;
-  /**
-   * Props to be passed to the Stack used inside.
-   */
-  _stack?: Partial<IStackProps>;
-  /**
-   * Function called when the state of the checkbox changes.
-   */
-  onChange?: (isSelected: boolean) => void;
-  // onBlur?: (event: any) => void;
-  // onFocus?: (event: any) => void;
-  // ariaLabelledby?: string;
-  /**
-   * Ref to be passed to Icon's wrapper Box
-   */
-  wrapperRef?: any;
-  ref?: MutableRefObject<any>;
-}
-export interface ICheckboxGroupProps
-  extends InterfaceBoxProps<ICheckboxGroupProps> {
-  /**
-   * assign id to checkbox group
-   */
-  id?: string;
-  /**
-   * The value of the checkbox group.
-   */
-  value?: Array<string>;
-  /**
-   * The initial value of the checkbox group.
-   */
-  defaultValue?: Array<string>;
-  /**
-   * The color of the radio when it's checked. This should be one of the color keys in the theme (e.g."green", "red").
-   */
-  colorScheme?: ColorSchemeType;
-  /**
-   * The size (width and height) of the checkbox.
-   */
-  size?: ResponsiveValue<'sm' | 'md' | 'lg'>;
-  /**
-   * The callback fired when any children Checkbox is checked or unchecked.
-   */
-  onChange?: (values: any) => any;
-  /**
-   * Pass props will be passed to each checkbox.
-   */
-  _checkbox?: Partial<ICheckboxProps>;
-}
-export interface ICheckboxContext extends IFormControlContext {
-  colorScheme?: ColorSchemeType;
-  size?: ResponsiveValue<'sm' | 'md' | 'lg'>;
-  state: CheckboxGroupState;
-}
-
-export interface IUseCheckboxReturnType {
-  inputProps: {
-    checked: boolean;
-  } & Partial<TouchableOpacityProps>;
-}
-
-export interface IUseCheckboxGroupReturnType {
-  checkboxGroupProps: {
-    onChange: (checkboxValue: ICheckboxValue, isChecked: boolean) => any;
-    values: Array<ICheckboxValue>;
-  };
-}
-
-export type ICheckboxComponentType = ((
-  props: ICheckboxProps
-) => JSX.Element) & {
-  Group: React.MemoExoticComponent<
-    (props: ICheckboxGroupProps, ref?: MutableRefObject<any>) => JSX.Element
-  >;
-};
-
-export type ICheckboxProps = InterfaceCheckbox & CustomProps<'Checkbox'>;

package/Example/nativebase-v3-kitchensink/src/nb/NativeBase/src/components/primitives/Column/index.tsx

@@ -1,2 +0,0 @@
-import { VStack } from '../Stack';
-export { VStack as Column };