react-native-acoustic-connect-beta 16.0.0

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

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

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

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

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

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

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

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