react-native-acoustic-connect-beta 16.0.0

package/Example/nativebase-v3-kitchensink/src/nb/NativeBase/src/components/composites/Divider/index.tsx

@@ -0,0 +1,30 @@
+import React, { memo, forwardRef } from 'react';
+import { Platform } from 'react-native';
+import { usePropsResolution } from '../../../hooks/useThemeProps';
+import Box from './../../primitives/Box';
+import type { IDividerProps } from './types';
+import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+
+const Divider = (props: IDividerProps, ref?: any) => {
+  const { orientation, ...resolvedProps } = usePropsResolution(
+    'Divider',
+    props,
+    {},
+    { resolveResponsively: ['thickness'] }
+  );
+  //TODO: refactor for responsive prop
+  if (useHasResponsiveProps(props)) {
+    return null;
+  }
+  return (
+    <Box
+      {...resolvedProps}
+      ref={ref}
+      aria-orientation={orientation}
+      //@ts-ignore web only role
+      accessibilityRole={Platform.OS === 'web' ? 'separator' : undefined}
+    />
+  );
+};
+
+export default memo(forwardRef(Divider));

package/Example/nativebase-v3-kitchensink/src/nb/NativeBase/src/components/composites/Divider/types.ts

@@ -0,0 +1,16 @@
+import type { CustomProps, SpaceType } from '../../../components/types';
+import type { InterfaceBoxProps } from '../../primitives/Box/types';
+
+export interface InterfaceDividerProps
+  extends InterfaceBoxProps<IDividerProps> {
+  /**
+   * The orientation of the divider.
+   */
+  orientation?: 'vertical' | 'horizontal';
+  /**
+   * The thickness of the divider.
+   */
+  thickness?: SpaceType;
+}
+
+export type IDividerProps = InterfaceDividerProps & CustomProps<'Divider'>;

package/Example/nativebase-v3-kitchensink/src/nb/NativeBase/src/components/composites/Drawer/index.tsx

@@ -0,0 +1,60 @@
+import { OverlayContainer } from '@react-native-aria/overlays';
+import React from 'react';
+import Backdrop from '../Backdrop';
+import Box from '../../primitives/Box';
+
+export type IDrawerProps = {
+  placement?: 'top' | 'left' | 'right' | 'bottom';
+  children?: any;
+  isOpen: boolean;
+  onClose?: () => void;
+};
+
+const Drawer = ({
+  children,
+  isOpen,
+  onClose,
+  placement = 'right',
+}: IDrawerProps) => {
+  const placementStyles = React.useMemo(() => {
+    const styles: any = {
+      position: 'absolute',
+    };
+
+    if (placement === 'top') {
+      styles.top = 0;
+      styles.left = 0;
+      styles.right = 0;
+      styles.width = '100%';
+    } else if (placement === 'bottom') {
+      styles.bottom = 0;
+      styles.left = 0;
+      styles.right = 0;
+      styles.width = '100%';
+    } else if (placement === 'right') {
+      styles.right = 0;
+      styles.top = 0;
+      styles.bottom = 0;
+      styles.height = '100%';
+    } else {
+      styles.top = 0;
+      styles.bottom = 0;
+      styles.left = 0;
+      styles.height = '100%';
+    }
+    return styles;
+  }, [placement]);
+
+  if (!isOpen) return null;
+
+  return (
+    <OverlayContainer>
+      <Backdrop onPress={onClose ? onClose : () => {}} />
+      <Box {...placementStyles} opacity={1}>
+        {children}
+      </Box>
+    </OverlayContainer>
+  );
+};
+
+export default Drawer;

package/Example/nativebase-v3-kitchensink/src/nb/NativeBase/src/components/composites/Fab/Fab.tsx

@@ -0,0 +1,42 @@
+import React, { memo, forwardRef } from 'react';
+import { Button } from '../../primitives/Button';
+import type { IFabProps } from './types';
+import { usePropsResolution } from '../../../hooks/useThemeProps';
+import { OverlayContainer } from '@react-native-aria/overlays';
+import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+
+const Fab = ({ variant, ...props }: IFabProps, ref: any) => {
+  const themeProps = usePropsResolution('FAB', props);
+  const {
+    label,
+    icon,
+    renderInPortal,
+    placement,
+    placementProps,
+    ...newProps
+  } = themeProps;
+
+  const fabComponent = (
+    <Button
+      variant={variant}
+      {...placementProps[placement]}
+      ref={ref}
+      startIcon={icon}
+      {...newProps}
+    >
+      {label}
+    </Button>
+  );
+  //TODO: refactor for responsive prop
+  if (useHasResponsiveProps(props)) {
+    return null;
+  }
+
+  return renderInPortal ? (
+    <OverlayContainer>{fabComponent}</OverlayContainer>
+  ) : (
+    fabComponent
+  );
+};
+
+export default memo(forwardRef(Fab));

package/Example/nativebase-v3-kitchensink/src/nb/NativeBase/src/components/composites/Fab/FabItem.tsx

@@ -0,0 +1,83 @@
+// import React from 'react';
+// import { Button, Box } from '../../primitives';
+// import { FabContext } from './context';
+// import type { IFabItemProps } from './props';
+// import { Animated } from 'react-native';
+// import { omitUndefined } from '../../../theme/tools/utils';
+
+// const FabItem = ({ children, ...props }: IFabItemProps) => {
+//   const slideAnim = React.useRef(new Animated.Value(0)).current;
+//   const { onPress, index = 0, ...newProps } = omitUndefined(props);
+//   const { isOpen, onToggle, slide }: any = React.useContext(FabContext);
+//   const [size, setSize] = React.useState(40);
+//   const slideStyle = {
+//     down: 'top',
+//     up: 'bottom',
+//     right: 'left',
+//     left: 'right',
+//   };
+
+//   const provideSize = (layoutSize: any) => {
+//     setSize(layoutSize.width + 10);
+//   };
+
+//   const pressHandler = () => {
+//     onToggle();
+//     onPress && onPress();
+//   };
+
+//   const slideIn = () => {
+//     Animated.timing(slideAnim, {
+//       toValue: 0,
+//       duration: 500,
+//       useNativeDriver: true,
+//     }).start();
+//   };
+
+//   let animToValue = index * size;
+//   animToValue =
+//     slide === 'left' || slide === 'up' ? animToValue * -1 : animToValue;
+//   const slideOut = () => {
+//     Animated.timing(slideAnim, {
+//       toValue: animToValue,
+//       duration: 500,
+//       useNativeDriver: true,
+//     }).start();
+//   };
+
+//   isOpen ? slideOut() : slideIn();
+//   const animatioStyle = {
+//     top: { transform: [{ translateY: slideAnim }] },
+//     right: { transform: [{ translateX: slideAnim }] },
+//     bottom: { transform: [{ translateY: slideAnim }] },
+//     left: { transform: [{ translateX: slideAnim }] },
+//   };
+
+//   return (
+//     // @ts-ignore
+//     <Animated.View style={animatioStyle[slideStyle[slide]]}>
+//       <Box
+//         position="absolute"
+//         top={0}
+//         right={0}
+//         onLayout={(e) => provideSize(e.nativeEvent.layout)}
+//         zIndex={9999 - index}
+//       >
+//         <Button
+//           variant="unstyled"
+//           bg="default.200"
+//           borderRadius="full"
+//           justifyContent="center"
+//           alignItems="center"
+//           {...newProps}
+//           onPress={pressHandler}
+//           p={1}
+//         >
+//           {children}
+//         </Button>
+//       </Box>
+//     </Animated.View>
+//   );
+// };
+
+// export default FabItem;

package/Example/nativebase-v3-kitchensink/src/nb/NativeBase/src/components/composites/Fab/FabList.tsx

@@ -0,0 +1,17 @@
+// import React from 'react';
+// import { Box } from '../../primitives';
+// import getIndexedChildren from '../../../utils/getIndexedChildren';
+// import type { IFabListProps } from './props';
+
+// import { omitUndefined } from '../../../theme/tools/utils';
+
+// const FabList = ({ children, ...props }: IFabListProps) => {
+//   const newProps = omitUndefined(props);
+//   return (
+//     <Box position="absolute" {...newProps}>
+//       {getIndexedChildren(children, 'FabItem', 0)}
+//     </Box>
+//   );
+// };
+
+// export default FabList;

package/Example/nativebase-v3-kitchensink/src/nb/NativeBase/src/components/composites/Fab/context.ts

@@ -0,0 +1,3 @@
+// import { createContext } from 'react';
+
+// export const FabContext = createContext({});

package/Example/nativebase-v3-kitchensink/src/nb/NativeBase/src/components/composites/Fab/index.tsx

@@ -0,0 +1,2 @@
+export { default as Fab } from './Fab';
+export type { IFabProps } from './types';

package/Example/nativebase-v3-kitchensink/src/nb/NativeBase/src/components/composites/Fab/types.tsx

@@ -0,0 +1,27 @@
+import type { CustomProps } from '../../../components/types/utils';
+import type { InterfaceButtonProps } from '../../primitives/Button/types';
+
+export interface InterfaceFabProps extends InterfaceButtonProps {
+  /**
+   * Placement of the Fab
+   * @default bottom-right
+   */
+  placement?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+  /**
+   * Text to be displayed in Fab
+   */
+  label?: JSX.Element | string;
+  /**
+   * Icon to be displayed in Fab
+   */
+  icon?: JSX.Element;
+  /**
+   * Determines whether the Fab should be rendered in a Portal.
+   * Refer this solution before using this prop
+   * https://github.com/GeekyAnts/NativeBase/issues/3817
+   * @default true
+   */
+  renderInPortal?: boolean;
+}
+
+export type IFabProps = InterfaceFabProps & CustomProps<'FAB'>;

package/Example/nativebase-v3-kitchensink/src/nb/NativeBase/src/components/composites/FormControl/FormControl.tsx

@@ -0,0 +1,27 @@
+import React, { memo, forwardRef } from 'react';
+import { usePropsResolution } from '../../../hooks/useThemeProps';
+import Box from '../../primitives/Box';
+import type { IFormControlProps } from './types';
+import { useFormControlProvider, FormControlContext } from './useFormControl';
+import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+
+const FormControl = (props: IFormControlProps, ref: any) => {
+  const { htmlProps, ...context } = useFormControlProvider(props);
+  const resolvedProps = usePropsResolution('FormControl', props, {
+    isDisabled: context.isDisabled,
+    isReadOnly: context.isReadOnly,
+    isInvalid: context.isInvalid,
+    // isRequired: context.isRequired,
+  });
+  //TODO: refactor for responsive prop
+  if (useHasResponsiveProps(props)) {
+    return null;
+  }
+  return (
+    <FormControlContext.Provider value={context}>
+      <Box {...resolvedProps} {...htmlProps} ref={ref} />
+    </FormControlContext.Provider>
+  );
+};
+
+export default memo(forwardRef(FormControl));

package/Example/nativebase-v3-kitchensink/src/nb/NativeBase/src/components/composites/FormControl/FormControlErrorMessage.tsx

@@ -0,0 +1,84 @@
+import React, { memo, forwardRef } from 'react';
+import Box from '../../primitives/Box';
+import { HStack } from '../../primitives/Stack';
+import { usePropsResolution } from '../../../hooks/useThemeProps';
+import { useFormControlContext } from './useFormControl';
+import type { IFormControlErrorMessageProps } from './types';
+import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+import { combineContextAndProps } from '../../../utils';
+import Text from '../../primitives/Text';
+
+const FormControlErrorMessage = (
+  props: IFormControlErrorMessageProps,
+  ref: any
+) => {
+  const formControlContext = useFormControlContext();
+  const combinedProps = combineContextAndProps(formControlContext, props);
+  const {
+    leftIcon,
+    rightIcon,
+    children,
+    _text,
+    _stack,
+    ...resolvedProps
+  } = usePropsResolution('FormControlErrorMessage', combinedProps, {
+    isDisabled: combinedProps.isDisabled,
+    isReadOnly: combinedProps.isReadOnly,
+    isInvalid: combinedProps.isInvalid,
+    // isRequired: combinedProps.isRequired,
+  });
+  let { startIcon, endIcon } = resolvedProps;
+
+  if (rightIcon) {
+    endIcon = rightIcon;
+  }
+  if (leftIcon) {
+    startIcon = leftIcon;
+  }
+  if (endIcon && React.isValidElement(endIcon)) {
+    endIcon = React.Children.map(
+      endIcon,
+      (child: JSX.Element, index: number) => {
+        return React.cloneElement(child, {
+          key: `button-end-icon-${index}`,
+          ..._text,
+          ...child.props,
+        });
+      }
+    );
+  }
+  if (startIcon && React.isValidElement(startIcon)) {
+    startIcon = React.Children.map(
+      startIcon,
+      (child: JSX.Element, index: number) => {
+        return React.cloneElement(child, {
+          key: `button-start-icon-${index}`,
+          ..._text,
+          ...child.props,
+        });
+      }
+    );
+  }
+
+  React.useEffect(() => {
+    resolvedProps?.setHasFeedbackText(true);
+    return () => {
+      resolvedProps?.setHasFeedbackText(false);
+    };
+  });
+  //TODO: refactor for responsive prop
+  if (useHasResponsiveProps(props)) {
+    return null;
+  }
+  return resolvedProps?.isInvalid && children ? (
+    <Box nativeID={resolvedProps?.helpTextId} {...resolvedProps} ref={ref}>
+      <HStack {..._stack}>
+        {startIcon}
+        <Text {..._text}>{children}</Text>
+        {endIcon}
+      </HStack>
+    </Box>
+  ) : null;
+};
+
+export default memo(forwardRef(FormControlErrorMessage));

package/Example/nativebase-v3-kitchensink/src/nb/NativeBase/src/components/composites/FormControl/FormControlHelperText.tsx

@@ -0,0 +1,42 @@
+import React, { memo, forwardRef } from 'react';
+import Box from '../../primitives/Box';
+import { usePropsResolution } from '../../../hooks/useThemeProps';
+import { useFormControlContext } from './useFormControl';
+import type { IFormControlHelperTextProps } from './types';
+import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+import { combineContextAndProps } from '../../../utils';
+
+const FormControlHelperText = (
+  props: IFormControlHelperTextProps,
+  ref: any
+) => {
+  const formControlContext = useFormControlContext();
+  const combinedProps = combineContextAndProps(formControlContext, props);
+  const resolvedProps = usePropsResolution(
+    'FormControlHelperText',
+    combinedProps,
+    {
+      isDisabled: combinedProps.isDisabled,
+      isReadOnly: combinedProps.isReadOnly,
+      isInvalid: combinedProps.isInvalid,
+      // isRequired: combinedProps.isRequired,
+    }
+  );
+
+  React.useEffect(() => {
+    resolvedProps?.setHasHelpText(true);
+    return () => {
+      resolvedProps?.setHasHelpText(false);
+    };
+  });
+  //TODO: refactor for responsive prop
+  if (useHasResponsiveProps(props)) {
+    return null;
+  }
+
+  return (
+    <Box {...resolvedProps} nativeID={resolvedProps?.feedbackId} ref={ref} />
+  );
+};
+
+export default memo(forwardRef(FormControlHelperText));

package/Example/nativebase-v3-kitchensink/src/nb/NativeBase/src/components/composites/FormControl/FormControlLabel.tsx

@@ -0,0 +1,67 @@
+import React, { memo, forwardRef } from 'react';
+import Box from '../../primitives/Box';
+import Text from '../../primitives/Text';
+import { useFormControlContext } from './useFormControl';
+import { usePropsResolution } from '../../../hooks/useThemeProps';
+import type { IFormControlLabelProps } from './types';
+import { mergeRefs } from '../../../utils';
+import { combineContextAndProps } from '../../../utils';
+
+const FormControlLabel = (
+  { children, ...props }: IFormControlLabelProps,
+  ref: any
+) => {
+  const formControlContext = useFormControlContext();
+  const combinedProps = combineContextAndProps(formControlContext, props);
+  const _ref = React.useRef<HTMLLabelElement>(null);
+  const { _astrick, ...reslovedProps } = usePropsResolution(
+    'FormControlLabel',
+    combinedProps,
+    {
+      isDisabled: combinedProps.isDisabled,
+      isReadOnly: combinedProps.isReadOnly,
+      isInvalid: combinedProps.isInvalid,
+      // isRequired: combinedProps.isRequired,
+    }
+  );
+
+  const requiredAsterisk = () => (
+    <Text
+      _web={{
+        accessibilityHidden: true,
+        //@ts-ignore
+        accessibilityRole: 'presentation',
+      }}
+      {..._astrick}
+    >
+      *
+    </Text>
+  );
+  const mergedRef = mergeRefs([_ref, ref]);
+  React.useEffect(() => {
+    if (_ref.current) {
+      // RN web doesn't support htmlFor for Label element yet
+      if (props.htmlFor) {
+        _ref.current.htmlFor = props.htmlFor;
+      } else if (reslovedProps?.nativeID) {
+        _ref.current.htmlFor = reslovedProps.nativeID;
+      }
+    }
+  }, [reslovedProps?.nativeID, props.htmlFor]);
+
+  return (
+    <Box
+      _web={{
+        //@ts-ignore
+        accessibilityRole: 'label',
+      }}
+      {...reslovedProps}
+      nativeID={reslovedProps?.labelId}
+      ref={mergedRef}
+    >
+      {children}
+      {reslovedProps?.isRequired && requiredAsterisk()}
+    </Box>
+  );
+};
+export default memo(forwardRef(FormControlLabel));

package/Example/nativebase-v3-kitchensink/src/nb/NativeBase/src/components/composites/FormControl/index.tsx

@@ -0,0 +1,30 @@
+import { default as FormControlBase } from './FormControl';
+import { default as FormControlLabel } from './FormControlLabel';
+import { default as FormControlErrorMessage } from './FormControlErrorMessage';
+import { default as FormControlHelperText } from './FormControlHelperText';
+import type { FormControlComponentType } from './types';
+
+let FormControlTemp: any = FormControlBase;
+FormControlTemp.Label = FormControlLabel;
+FormControlTemp.ErrorMessage = FormControlErrorMessage;
+FormControlTemp.HelperText = FormControlHelperText;
+
+// To add typings
+const FormControl = FormControlTemp as FormControlComponentType;
+
+export { FormControl };
+export {
+  FormControlContext,
+  useFormControl,
+  useFormControlProvider,
+  useFormControlContext,
+} from './useFormControl';
+
+export type { IFormControlContext } from './useFormControl';
+
+export type {
+  IFormControlProps,
+  IFormControlLabelProps,
+  IFormControlErrorMessageProps,
+  IFormControlHelperTextProps,
+} from './types';

package/Example/nativebase-v3-kitchensink/src/nb/NativeBase/src/components/composites/FormControl/test/FormControl.test.tsx

@@ -0,0 +1,125 @@
+import React from 'react';
+import { FormControl, useFormControl } from '../index';
+import { TextInput } from 'react-native';
+import { render } from '@testing-library/react-native';
+import { Wrapper } from '../../../../utils/test-utils';
+
+const Input = React.forwardRef((props: any, ref: any) => {
+  const inputProps = useFormControl(props);
+  return (
+    //@ts-ignore
+    <TextInput ref={ref} {...inputProps} />
+  );
+});
+
+it('a11y test in when required', async () => {
+  let { getByPlaceholderText } = render(
+    <Wrapper>
+      <FormControl nativeID="name" isRequired>
+        <FormControl.Label>Name</FormControl.Label>
+        <Input placeholder="Name" />
+        <FormControl.HelperText>Enter your name please!</FormControl.HelperText>
+        <FormControl.ErrorMessage>
+          Your name is invalid
+        </FormControl.ErrorMessage>
+      </FormControl>
+    </Wrapper>
+  );
+  const textInput = getByPlaceholderText('Name');
+  expect(textInput.props.accessibilityRequired).toBe(true);
+  expect(textInput.props.required).toBe(true);
+});
+
+it('a11y test in when invalid', async () => {
+  let { getByPlaceholderText } = render(
+    <Wrapper>
+      <FormControl nativeID="name" isInvalid>
+        <FormControl.Label>Name</FormControl.Label>
+        <Input placeholder="Name" />
+        <FormControl.HelperText>Enter your name please!</FormControl.HelperText>
+        <FormControl.ErrorMessage>
+          Your name is invalid
+        </FormControl.ErrorMessage>
+      </FormControl>
+    </Wrapper>
+  );
+  const textInput = getByPlaceholderText('Name');
+  expect(textInput.props.accessibilityInvalid).toBe(true);
+});
+
+it('a11y test in when readOnly', async () => {
+  let { getByPlaceholderText } = render(
+    <Wrapper>
+      <FormControl nativeID="name" isReadOnly>
+        <FormControl.Label>Name</FormControl.Label>
+        <Input placeholder="Name" />
+        <FormControl.HelperText>Enter your name please!</FormControl.HelperText>
+        <FormControl.ErrorMessage>
+          Your name is invalid
+        </FormControl.ErrorMessage>
+      </FormControl>
+    </Wrapper>
+  );
+  const textInput = getByPlaceholderText('Name');
+  expect(textInput.props.accessibilityReadOnly).toBe(true);
+  expect(textInput.props.readOnly).toBe(true);
+});
+
+it('a11y test in when disabled', async () => {
+  let { getByPlaceholderText } = render(
+    <Wrapper>
+      <FormControl nativeID="name" isDisabled>
+        <FormControl.Label>Name</FormControl.Label>
+        <Input placeholder="Name" />
+        <FormControl.HelperText>Enter your name please!</FormControl.HelperText>
+        <FormControl.ErrorMessage>
+          Your name is invalid
+        </FormControl.ErrorMessage>
+      </FormControl>
+    </Wrapper>
+  );
+  const textInput = getByPlaceholderText('Name');
+  expect(textInput.props.disabled).toBe(true);
+});
+
+it('a11y test when helper text is present', async () => {
+  let { getByPlaceholderText } = render(
+    <Wrapper>
+      <FormControl nativeID="name" isDisabled>
+        <FormControl.Label>Name</FormControl.Label>
+        <Input placeholder="Name" />
+        <FormControl.HelperText>Enter your name please!</FormControl.HelperText>
+      </FormControl>
+    </Wrapper>
+  );
+  const textInput = getByPlaceholderText('Name');
+  expect(textInput.props.accessibilityDescribedBy).toBe('name-helptext');
+  expect(textInput.props.accessibilityReadOnly).toBeUndefined();
+  expect(textInput.props.accessibilityInvalid).toBeUndefined();
+  expect(textInput.props.accessibilityRequired).toBeUndefined();
+});
+
+it('sets htmlFor of FormLabel ref to nativeID of Input', async () => {
+  let ref: HTMLLabelElement;
+  const inputID = 'name';
+  let { getByPlaceholderText } = render(
+    <Wrapper>
+      <FormControl nativeID={inputID} isInvalid>
+        <FormControl.Label
+          //@ts-ignore
+          ref={(_ref) => (ref = _ref)}
+        >
+          Name
+        </FormControl.Label>
+        <Input placeholder="Name" />
+        <FormControl.HelperText>Enter your name please!</FormControl.HelperText>
+        <FormControl.ErrorMessage>
+          Your name is invalid
+        </FormControl.ErrorMessage>
+      </FormControl>
+    </Wrapper>
+  );
+  const textInput = getByPlaceholderText('Name');
+  //@ts-ignore
+  expect(textInput.props.nativeID).toBe(ref.htmlFor);
+});