react-native-acoustic-connect-beta 16.0.0

package/Example/nativebase-v3-kitchensink/src/nb/NativeBase/src/components/primitives/Radio/test/radio.test.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react-native';
+import { Radio } from '..';
+import { Text } from '../..';
+import { NativeBaseProvider } from '../../../../core/NativeBaseProvider';
+function RadiosGroup() {
+  const [, setValue] = React.useState<any>('one');
+  return (
+    <Radio.Group
+      defaultValue="1"
+      name="myRadioGroup"
+      onChange={(nextValue: any) => {
+        setValue(nextValue);
+      }}
+    >
+      <Radio value="1">
+        <Text mx={2}>First</Text>
+      </Radio>
+      <Radio value="2">
+        <Text mx={2}>Second</Text>
+      </Radio>
+      <Radio value="3">
+        <Text mx={2}>Third</Text>
+      </Radio>
+    </Radio.Group>
+  );
+}
+describe('RadioGroup', () => {
+  it('onChange and default on RadioGroup', () => {
+    let { getAllByRole, getByText } = render(
+      <NativeBaseProvider
+        initialWindowMetrics={{
+          frame: { x: 0, y: 0, width: 0, height: 0 },
+          insets: { top: 0, left: 0, right: 0, bottom: 0 },
+        }}
+      >
+        <RadiosGroup />
+      </NativeBaseProvider>
+    );
+    let radios = getAllByRole('radio');
+    expect(radios.length).toBe(3);
+    expect(radios[0].props.accessibilityState.checked).toBe(true);
+    expect(radios[1].props.accessibilityState.checked).toBe(false);
+    expect(radios[2].props.accessibilityState.checked).toBe(false);
+    let second = getByText('Second');
+    fireEvent.press(second);
+    expect(radios[0].props.accessibilityState.checked).toBe(false);
+  });
+
+  it('can be disabled', () => {
+    let { getAllByRole } = render(
+      <NativeBaseProvider
+        initialWindowMetrics={{
+          frame: { x: 0, y: 0, width: 0, height: 0 },
+          insets: { top: 0, left: 0, right: 0, bottom: 0 },
+        }}
+      >
+        <Radio.Group defaultValue="1" name="myRadioGroup">
+          <Radio value="1">
+            <Text mx={2}>First</Text>
+          </Radio>
+          <Radio value="2" isDisabled>
+            <Text mx={2}>Second</Text>
+          </Radio>
+          <Radio value="3">
+            <Text mx={2}>Third</Text>
+          </Radio>
+        </Radio.Group>
+      </NativeBaseProvider>
+    );
+    let second = getAllByRole('radio');
+    expect(second[1].props.accessibilityState.disabled).toBe(true);
+  });
+});

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

@@ -0,0 +1,171 @@
+import type { IStackProps } from '../../primitives/Stack';
+import type { InterfaceBoxProps } from '../../primitives/Box/types';
+import type { IFormControlContext } from '../../composites';
+import type { AccessibilityRole } from 'react-native';
+import type { RadioGroupState } from '@react-stately/radio';
+import type { MutableRefObject } from 'react';
+import type { ResponsiveValue } from '../../../components/types';
+import type { ISizes } from '../../../theme/base/sizes';
+export type IRadioValue = string;
+import type { CustomProps, ThemeComponentSizeType } from '../../types';
+import type { IIconProps } from '../Icon';
+import type { ColorSchemeType } from '../../../components/types';
+
+export type IRadioGroupOnChangeHandler = (value: IRadioValue) => any;
+
+export interface InterfaceRadioProps extends InterfaceBoxProps<IRadioProps> {
+  /**
+   * The value to be used in the radio input. This is the value that will be returned on form submission
+   */
+  value: IRadioValue;
+  /**
+   * The color of the radio. This should be one of the color keys in the theme (e.g."green", "red").
+   * @default 'primary'
+   */
+  colorScheme?: ColorSchemeType & ResponsiveValue<'default'>;
+  /**
+   * 	If true, the radio will be disabled
+   */
+  isDisabled?: boolean;
+  /**
+   * 	If true, the radio will be hovered
+   */
+  isHovered?: boolean;
+  /**
+   * 	If true, the radio will be pressed
+   */
+  isPressed?: boolean;
+  /**
+   * 	If true, the radio will be focused
+   */
+  isFocused?: boolean;
+  /**
+   * 	If true, the radio focus ring will be visible
+   */
+  isFocusVisible?: boolean;
+  /**
+   * If true, the radio is marked as invalid. Changes style of unchecked state.
+   */
+  isInvalid?: boolean;
+  /**
+   * 	The size (width and height) of the radio.
+   */
+
+  size?: ThemeComponentSizeType<'Radio'>;
+
+  /**
+   * If given, will use this icon instead of the default.
+   */
+  icon?: JSX.Element;
+  /**
+   * Ref to be passed to Icon's wrapper Box
+   */
+  wrapperRef?: any;
+  /**
+   * Props to be passed to the Stack used inside.
+   */
+  _stack?: Partial<IStackProps>;
+
+  /**
+   * Passed props wilICheckboxGroupPropsl be applied on disabled state.
+   */
+  _disabled?: Omit<Partial<IRadioProps>, '_disabled'>;
+  /**
+   * Passed props will be applied on checked state.
+   */
+  _checked?: Omit<Partial<IRadioProps>, '_checked'>;
+  /**
+   * Passed props will be applied on unchecked state.
+   */
+  _unchecked?: Omit<Partial<IRadioProps>, '_unchecked'>;
+  /**
+   * Passed props will be applied on focus state.
+   */
+  _focus?: Omit<Partial<IRadioProps>, '_focus'>;
+  /**
+   * Passed props will be applied on hover state.
+   */
+  _hover?: Omit<Partial<IRadioProps>, '_hover'>;
+  /**
+   * Passed props will be applied on invalid state.
+   */
+  _invalid?: Omit<Partial<IRadioProps>, '_invalid'>;
+  /**
+   * Passed props will be applied on pressed state on native.
+   */
+  _pressed?: Omit<Partial<IRadioProps>, '_pressed'>;
+  /**
+   * Icon related props can be passed in _icon.
+   */
+  _icon?: Partial<IIconProps>;
+  /**
+   * Passed props will be applied on readonly state.
+   */
+  _readOnly?: Omit<Partial<IRadioProps>, '_readOnly'>;
+  /**
+   * You can style interaction box around the checkbox using this.
+   */
+  _interactionBox?: Omit<Partial<IRadioProps>, '_interactionBox'>;
+
+  ref?: MutableRefObject<any>;
+}
+export interface IRadioGroupProps extends IStackProps {
+  /**
+   * The value of the radio group.
+   */
+  value?: IRadioValue;
+  /**
+   * The name of the input field in a radio (Useful for form submission).
+   */
+  name: string;
+  /**
+   * The initial value of the radio group.
+   */
+  defaultValue?: IRadioValue;
+  /**
+   * The color of the radios. This should be one of the color keys in the theme (e.g."green", "red").
+   * @default 'primary'
+   */
+  colorScheme?: ColorSchemeType;
+  /**
+   * 	The size (width and height) of the radio.
+   */
+  size?: ResponsiveValue<ISizes | (string & {}) | number>;
+  /**
+   *
+   */
+  // TODO: removing
+  // children?:
+  //   | React.ReactElement<IRadioProps>
+  //   | React.ReactElement<IRadioProps>[];
+  /**
+   * The callback fired when any children radio is checked or unchecked.
+   */
+  onChange?: IRadioGroupOnChangeHandler;
+  /**
+   * Pass props will be passed to each radio.
+   */
+  _radio?: Partial<IRadioProps>;
+}
+export interface IRadioContext extends IFormControlContext {
+  colorScheme?: ColorSchemeType;
+  size?: ResponsiveValue<ISizes | (string & {}) | number>;
+  state: RadioGroupState;
+}
+
+export type IUseRadioGroupReturnType = {
+  radioGroupProps: {
+    accessibilityRole: AccessibilityRole;
+    onChange: (value: IRadioValue) => any;
+    value: IRadioValue;
+    name: string;
+  };
+};
+
+export type IRadioComponentType = ((props: IRadioProps) => JSX.Element) & {
+  Group: React.MemoExoticComponent<
+    (props: IRadioGroupProps & { ref?: MutableRefObject<any> }) => JSX.Element
+  >;
+};
+
+export type IRadioProps = InterfaceRadioProps & CustomProps<'Radio'>;

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

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

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

@@ -0,0 +1,266 @@
+import React, { forwardRef, memo } from 'react';
+import type { ISelectProps } from './types';
+import { Platform, Keyboard } from 'react-native';
+import { Actionsheet } from '../../composites/Actionsheet';
+import Box from '../Box';
+import { Input } from '../Input';
+import { useFocusRing } from '@react-native-aria/focus';
+import { useControllableState } from '../../../hooks';
+import { usePropsResolution } from '../../../hooks/useThemeProps';
+import { useHover } from '@react-native-aria/interactions';
+import { mergeRefs } from '../../../utils';
+import { useFormControl } from '../../composites/FormControl';
+import { ChevronDownIcon } from '../Icon/Icons';
+import type { IButtonProps } from '../Button/types';
+import { ScrollView } from '../../basic/ScrollView';
+import { extractInObject, stylingProps } from '../../../theme/tools/utils';
+import { FlatList } from '../../basic/FlatList';
+import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+import type { ISelectItemProps } from './types';
+import { Pressable } from '../Pressable';
+
+export const SelectContext = React.createContext({
+  onValueChange: (() => {}) as any,
+  selectedValue: null as any,
+  _selectedItem: {} as IButtonProps,
+  _item: {} as IButtonProps,
+});
+
+const Select = (
+  {
+    isHovered: isHoveredProp,
+    isFocused: isFocusedProp,
+    isFocusVisible: isFocusVisibleProp,
+    ...props
+  }: ISelectProps,
+  ref: any
+) => {
+  const selectProps = useFormControl({
+    isDisabled: props.isDisabled,
+    nativeID: props.nativeID,
+  });
+  const flatListData: ISelectItemProps[] = [];
+
+  const isDisabled = selectProps.disabled;
+  const tempFix = '__NativebasePlaceholder__';
+  const _ref = React.useRef(null);
+
+  const [isOpen, setIsOpen] = React.useState<boolean>(false);
+  const [isFocused, setIsFocused] = React.useState<boolean>(false);
+
+  const { focusProps, isFocusVisible } = useFocusRing();
+  const { hoverProps, isHovered } = useHover({ isDisabled }, _ref);
+
+  const {
+    onValueChange,
+    selectedValue,
+    children,
+    dropdownIcon,
+    dropdownCloseIcon,
+    dropdownOpenIcon,
+    placeholder,
+    accessibilityLabel,
+    defaultValue,
+    _item,
+    _selectedItem,
+    onOpen,
+    onClose,
+    optimized,
+    customDropdownIconProps,
+    _actionSheetContent,
+    _actionSheetBody,
+    _webSelect,
+    ...resolvedProps
+  } = usePropsResolution(
+    'Select',
+    props,
+    {
+      isDisabled,
+      isHovered: isHoveredProp || isHovered,
+      isFocused: isFocusedProp || isFocused,
+      isFocusVisible: isFocusVisibleProp || isFocusVisible,
+    },
+    undefined
+  );
+
+  const [value, setValue] = useControllableState({
+    value: selectedValue,
+    defaultValue,
+    onChange: (newValue) => {
+      onValueChange && onValueChange(newValue);
+      setIsOpen(false);
+    },
+  });
+
+  const itemsList: Array<{ label: string; value: string }> = React.Children.map(
+    children ?? [],
+    (child: any) => {
+      return {
+        label: child.props.label,
+        value: child.props.value,
+      };
+    }
+  );
+
+  const selectedItemArray = itemsList.filter(
+    (item: any) => item.value === value
+  );
+
+  const selectedItem =
+    selectedItemArray && selectedItemArray.length ? selectedItemArray[0] : null;
+
+  const contextValue = React.useMemo(() => {
+    return {
+      onValueChange: setValue,
+      selectedValue: value,
+      _selectedItem: _selectedItem ?? {},
+      _item: _item ?? {},
+    };
+  }, [value, setValue, _selectedItem, _item]);
+
+  //TODO: refactor for responsive prop
+  if (useHasResponsiveProps(props)) {
+    return null;
+  }
+
+  const rightIcon =
+    isOpen && dropdownOpenIcon ? (
+      dropdownOpenIcon
+    ) : !isOpen && dropdownCloseIcon ? (
+      dropdownCloseIcon
+    ) : dropdownIcon ? (
+      dropdownIcon
+    ) : (
+      <ChevronDownIcon {...customDropdownIconProps} />
+    );
+
+  const handleClose = () => {
+    setIsOpen(false);
+    onClose && onClose();
+  };
+
+  if (optimized) {
+    React.Children.map(children, (child: any) => {
+      flatListData.push(child.props);
+    });
+  }
+
+  const [layoutProps] = extractInObject(resolvedProps, [
+    ...stylingProps.margin,
+    ...stylingProps.flexbox,
+    ...stylingProps.position,
+    'shadow',
+    'opacity',
+  ]);
+
+  const commonInput = (
+    <Input
+      placeholder={placeholder}
+      InputRightElement={rightIcon}
+      {...resolvedProps}
+      // NOTE: Adding ts-ignore as we're not exposing isFocused in the Input component
+      // @ts-ignore-next-line
+      isFocused={isFocused}
+      isHovered={isHovered}
+      aria-hidden={true}
+      importantForAccessibility="no"
+      value={selectedItem?.label}
+      editable={false}
+      focusable={false}
+      isDisabled={isDisabled}
+      pointerEvents="none"
+    />
+  );
+
+  return Platform.OS === 'web' ? (
+    <Box>
+      {/* <Box w="100%" h="100%" position="absolute" opacity="0" zIndex={1}> */}
+      <select
+        aria-readonly={selectProps.readOnly}
+        required={selectProps.required}
+        disabled={isDisabled}
+        {...focusProps}
+        {...hoverProps}
+        ref={mergeRefs([ref, _ref])}
+        //@ts-ignore
+        onChange={(e) => {
+          setValue(e.target.value);
+        }}
+        value={selectedItem === null ? tempFix : value}
+        aria-label={placeholder}
+        onFocus={() => {
+          setIsFocused(true);
+          onOpen && onOpen();
+        }}
+        onBlur={() => {
+          setIsFocused(false);
+          onClose && onClose();
+        }}
+        {..._webSelect}
+      >
+        <option disabled value={tempFix}>
+          {placeholder}
+        </option>
+        {children}
+      </select>
+      {/* </Box> */}
+      {commonInput}
+    </Box>
+  ) : (
+    <>
+      <Pressable
+        onPress={() => {
+          Keyboard.dismiss();
+          setIsOpen(true);
+          onOpen && onOpen();
+        }}
+        disabled={isDisabled}
+        accessibilityLabel={accessibilityLabel}
+        accessibilityRole="button"
+        ref={mergeRefs([ref, _ref])}
+        {...layoutProps}
+      >
+        {commonInput}
+      </Pressable>
+      <Actionsheet isOpen={isOpen} onClose={handleClose}>
+        <Actionsheet.Content {..._actionSheetContent}>
+          {/* TODO: Replace ScrollVeiw with FlatList */}
+          {optimized ? (
+            <FlatList horizontal
+              {..._actionSheetBody}
+              data={flatListData}
+              // eslint-disable-next-line no-shadow
+              keyExtractor={(_item, index) => index.toString()}
+              renderItem={({ item }: any) => {
+                const isSelected = selectedValue === item.value;
+                return (
+                  <Actionsheet.Item
+                    onPress={() => {
+                      if (!isDisabled) {
+                        setValue(item.value);
+                      }
+                    }}
+                    accessibilityState={{ selected: isSelected }}
+                    {...item}
+                    {..._item}
+                    {...(isSelected && _selectedItem)}
+                  >
+                    {item.label}
+                  </Actionsheet.Item>
+                );
+              }}
+            />
+          ) : (
+            <ScrollView {..._actionSheetBody}>
+              <SelectContext.Provider value={contextValue}>
+                {children}
+              </SelectContext.Provider>
+            </ScrollView>
+          )}
+        </Actionsheet.Content>
+      </Actionsheet>
+    </>
+  );
+};
+
+export default memo(forwardRef(Select));

package/Example/nativebase-v3-kitchensink/src/nb/NativeBase/src/components/primitives/Select/SelectItem.tsx

@@ -0,0 +1,50 @@
+import React, { forwardRef, memo } from 'react';
+import type { ISelectItemProps } from './types';
+import { Platform } from 'react-native';
+import { Actionsheet } from '../../composites/Actionsheet';
+import { SelectContext } from './Select';
+import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+
+export const Item = (
+  { isDisabled, label, value, ...props }: ISelectItemProps,
+  ref?: any
+) => {
+  const {
+    onValueChange,
+    selectedValue,
+    _selectedItem,
+    _item,
+  } = React.useContext(SelectContext);
+  //TODO: refactor for responsive prop
+  if (useHasResponsiveProps({ ...props, isDisabled, label, value })) {
+    return null;
+  }
+  if (Platform.OS !== 'web') {
+    const isSelected = selectedValue === value;
+
+    return (
+      <Actionsheet.Item
+        ref={ref}
+        onPress={() => {
+          if (!isDisabled) {
+            onValueChange(value);
+          }
+        }}
+        accessibilityState={{ selected: isSelected }}
+        {..._item}
+        {...(isSelected && _selectedItem)}
+        {...props}
+      >
+        {label}
+      </Actionsheet.Item>
+    );
+  } else {
+    return (
+      <option ref={ref} value={value} disabled={isDisabled}>
+        {label}
+      </option>
+    );
+  }
+};
+
+export default memo(forwardRef(Item));

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

@@ -0,0 +1,16 @@
+import SelectItem from './SelectItem';
+import SelectMain from './Select';
+import type {
+  ISelectProps,
+  ISelectItemProps,
+  ISelectComponentType,
+} from './types';
+
+// const SelectTemp: any = SelectMain;
+const SelectTemp: any = SelectMain;
+SelectTemp.Item = SelectItem;
+
+const Select = SelectTemp as ISelectComponentType;
+
+export default Select;
+export type { ISelectProps, ISelectItemProps, ISelectComponentType };

package/Example/nativebase-v3-kitchensink/src/nb/NativeBase/src/components/primitives/Select/types.ts

@@ -0,0 +1,116 @@
+import type { InterfaceBoxProps } from '../Box';
+import type { IButtonProps } from '../Button';
+import type { IActionsheetContentProps } from '../../composites/Actionsheet/types';
+import type { MutableRefObject } from 'react';
+import type { CustomProps, ResponsiveValue } from '../../../components/types';
+import type { IColors } from '../../../theme/base/colors';
+import type { IFlatListProps } from '../../../components/basic/FlatList';
+import type { InterfaceButtonProps } from '../Button/types';
+
+export interface InterfaceSelectProps extends InterfaceBoxProps<ISelectProps> {
+  /**
+   * The placeholder that describes the Select.
+   */
+  placeholder?: string;
+  /**
+   * The Selected Item text color.
+   */
+  color?: ResponsiveValue<IColors | (string & {})>;
+  /**
+   * The placeholder text color
+   */
+  placeholderTextColor?: ResponsiveValue<IColors | (string & {})>;
+  /**
+   * Item props passed here will be passed to each Select.Item component.
+   */
+  _item?: Partial<IButtonProps>;
+  /**
+   * Item props passed here will be passed to the selected Select.Item component.
+   */
+  _selectedItem?: Partial<IButtonProps>;
+  /**
+   * Currently selected value. Useful for controlling the Select state
+   */
+  selectedValue?: string;
+  /**
+   * Default selected value.
+   */
+  defaultValue?: string;
+  /**
+   * Callback to be invoked when Select value is changed
+   */
+  onValueChange?: (itemValue: string) => void;
+  /**
+   * Whether Select is disabled
+   */
+  isDisabled?: boolean;
+  /**
+   * Whether Select is hovered
+   */
+  isHovered?: boolean;
+  /**
+   * Whether Select is focused
+   */
+  isFocused?: boolean;
+  /**
+   * If true, the focus ring of select will be visible.
+   */
+  isFocusVisible?: boolean;
+  /**
+   * If given, updates the dropdown Icon
+   */
+  dropdownIcon?: JSX.Element;
+  /**
+   * If given, updates the dropdown Icon when opened
+   */
+  dropdownOpenIcon?: JSX.Element;
+  /**
+   * If given, updates the dropdown Icon when closed
+   */
+  dropdownCloseIcon?: JSX.Element;
+  /**
+   * Variant of the Select
+   * @default outline
+   */
+  variant?: 'outline' | 'filled' | 'underlined' | 'unstyled' | 'rounded';
+  /**
+   * Callback to be invoked when Select Dropdown or BottomSheet is opened.
+   */
+  onOpen?: (nativeEvent: any) => void;
+  /**
+   * Callback to be invoked when Select Dropdown or BottomSheet is closed.
+   */
+  onClose?: (nativeEvent: any) => void;
+  /**
+   * props to be passed to underlying ActionSheet.Content. Select uses ActionSheet underneath.
+   */
+  _actionSheetContent?: Partial<IActionsheetContentProps>;
+  /**
+   * props to be passed to underlying Flatlist in ActionSheet.Content.
+   */
+  _actionSheetBody?: Partial<IFlatListProps<any>>;
+  /**
+   * Ref to be attached to the Select wrapper
+   */
+  wrapperRef?: MutableRefObject<any>;
+}
+
+export interface ISelectItemProps extends InterfaceButtonProps {
+  /**
+   * The label which will be displayed.
+   */
+  label: string;
+  /**
+   * The value to be used for the item. This is the value that will be returned on form submission.
+   */
+  value: string;
+}
+
+export type ISelectComponentType = ((
+  props: ISelectProps & { ref?: MutableRefObject<any> }
+) => JSX.Element) & {
+  Item: React.MemoExoticComponent<
+    (props: ISelectItemProps & { ref?: MutableRefObject<any> }) => JSX.Element
+  >;
+};
+export type ISelectProps = InterfaceSelectProps & CustomProps<'Select'>;

package/Example/nativebase-v3-kitchensink/src/nb/NativeBase/src/components/primitives/Slider/Context.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+
+export const SliderContext = React.createContext<any>({});