react-native-acoustic-connect-beta 16.0.0

package/Example/nativebase-v3-kitchensink/src/nb/NativeBase/src/components/composites/Alert/Context.ts

@@ -0,0 +1,2 @@
+import { createContext } from 'react';
+export const AlertContext = createContext({});

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

@@ -0,0 +1,11 @@
+import AlertIcon from './AlertIcon';
+import AlertMain from './Alert';
+
+export type { IAlertProps, IAlertContext } from './types';
+import type { IAlertComponentType } from './types';
+
+const AlertTemp: any = AlertMain;
+AlertTemp.Icon = AlertIcon;
+// To add typings
+const Alert = AlertTemp as IAlertComponentType;
+export { Alert };

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

@@ -0,0 +1,36 @@
+import type { MutableRefObject } from 'react';
+import type { InterfaceBoxProps } from '../../../components/primitives/Box';
+import type { IIconProps } from '../../primitives';
+import type { ColorSchemeType, CustomProps, VariantType } from '../../types';
+
+export interface InterfaceAlertProps extends InterfaceBoxProps<IAlertProps> {
+  /** The status of the alert
+   *  @default info
+   */
+  status?: 'info' | 'warning' | 'success' | 'error' | (string & {});
+  /** The variant of the alert style to use.
+   *  @default subtle
+   */
+  variant?: VariantType<'Alert'>;
+
+  /** The colorScheme of the Alert.
+   */
+  colorScheme?: ColorSchemeType;
+}
+export type IAlertContext = {
+  status?: string;
+  _icon?: IIconProps;
+  variant?: string;
+};
+
+export interface IAlertIconProps extends IIconProps {}
+
+export type IAlertComponentType = ((
+  props: IAlertProps & { ref?: MutableRefObject<any> }
+) => JSX.Element) & {
+  Icon: React.MemoExoticComponent<
+    (props: IAlertIconProps & { ref?: MutableRefObject<any> }) => JSX.Element
+  >;
+};
+
+export type IAlertProps = InterfaceAlertProps & CustomProps<'Alert'>;

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

@@ -0,0 +1,119 @@
+import React, { forwardRef, memo } from 'react';
+import { StyleSheet } from 'react-native';
+import Backdrop from '../Backdrop';
+import { Slide } from '../Transitions';
+import { FocusScope } from '@react-native-aria/focus';
+import { useControllableState, usePropsResolution } from '../../../hooks';
+import { AlertDialogContext } from './Context';
+import Box from '../../primitives/Box';
+import type { IAlertDialogProps } from './types';
+import { Fade } from '../Transitions';
+import { useKeyboardBottomInset } from '../../../utils';
+import { Overlay } from '../../primitives/Overlay';
+import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+
+const AlertDialog = (
+  {
+    children,
+    isOpen,
+    onClose,
+    defaultIsOpen,
+    initialFocusRef,
+    finalFocusRef,
+    avoidKeyboard,
+    closeOnOverlayClick = false,
+    isKeyboardDismissable = true,
+    overlayVisible = true,
+    backdropVisible = true,
+    animationPreset,
+    ...rest
+  }: IAlertDialogProps,
+  ref: any
+) => {
+  const bottomInset = useKeyboardBottomInset();
+  const {
+    contentSize,
+    _backdrop,
+    _backdropFade,
+    _fade,
+    _slide,
+    ...restThemeProps
+  } = usePropsResolution('AlertDialog', rest);
+
+  const [visible, setVisible] = useControllableState({
+    value: isOpen,
+    defaultValue: defaultIsOpen,
+    onChange: (val) => {
+      if (!val) onClose && onClose();
+    },
+  });
+
+  const handleClose = () => setVisible(false);
+
+  const child = (
+    <Box
+      bottom={avoidKeyboard ? bottomInset + 'px' : undefined}
+      {...restThemeProps}
+      ref={ref}
+    >
+      {children}
+    </Box>
+  );
+
+  //TODO: refactor for responsive prop
+  if (useHasResponsiveProps(rest)) {
+    return null;
+  }
+  return (
+    <Overlay
+      isOpen={visible}
+      onRequestClose={handleClose}
+      isKeyboardDismissable={isKeyboardDismissable}
+      useRNModalOnAndroid
+      unmountOnExit
+    >
+      <AlertDialogContext.Provider
+        value={{
+          handleClose,
+          contentSize,
+          initialFocusRef,
+          finalFocusRef,
+        }}
+      >
+        <Fade in={visible} style={StyleSheet.absoluteFill} {..._backdropFade}>
+          {overlayVisible && backdropVisible && (
+            <Backdrop
+              onPress={() => {
+                closeOnOverlayClick && handleClose();
+              }}
+              {..._backdrop}
+            />
+          )}
+        </Fade>
+        {animationPreset === 'slide' ? (
+          <Slide in={visible} {..._slide}>
+            <FocusScope
+              contain={visible}
+              autoFocus={visible && !initialFocusRef}
+              restoreFocus={visible && !finalFocusRef}
+            >
+              {child}
+            </FocusScope>
+          </Slide>
+        ) : (
+          <Fade in={visible} style={StyleSheet.absoluteFill} {..._fade}>
+            <FocusScope
+              contain={visible}
+              autoFocus={visible && !initialFocusRef}
+              restoreFocus={visible && !finalFocusRef}
+            >
+              {child}
+            </FocusScope>
+          </Fade>
+        )}
+      </AlertDialogContext.Provider>
+    </Overlay>
+  );
+};
+
+export default memo(forwardRef(AlertDialog));

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

@@ -0,0 +1,28 @@
+import React, { memo, forwardRef } from 'react';
+import Box, { IBoxProps } from '../../primitives/Box';
+import { usePropsResolution } from '../../../hooks';
+import { ScrollView, IScrollViewProps } from '../../basic/ScrollView';
+import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+
+const AlertDialogBody = (
+  { children, ...props }: IBoxProps & { _scrollview?: IScrollViewProps },
+  ref?: any
+) => {
+  const { _scrollview, ...resolvedProps } = usePropsResolution(
+    'AlertDialogBody',
+    props
+  );
+  //TODO: refactor for responsive prop
+  if (useHasResponsiveProps(props)) {
+    return null;
+  }
+  return (
+    <ScrollView {..._scrollview}>
+      <Box {...resolvedProps} ref={ref}>
+        {children}
+      </Box>
+    </ScrollView>
+  );
+};
+
+export default memo(forwardRef(AlertDialogBody));

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

@@ -0,0 +1,70 @@
+import React, { memo, forwardRef } from 'react';
+import { AlertDialogContext } from './Context';
+import { usePropsResolution } from '../../../hooks';
+import { Pressable } from '../../primitives/Pressable';
+import { CloseIcon } from '../../primitives/Icon/Icons';
+import type { IButtonProps } from '../../primitives/Button';
+import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+import {
+  useHover,
+  useFocus,
+  useIsPressed,
+} from '../../primitives/Pressable/Pressable';
+import { composeEventHandlers } from '../../../utils';
+import { useFocusRing } from '@react-native-aria/focus';
+
+const AlertDialogCloseButton = (props: IButtonProps, ref?: any) => {
+  const { hoverProps, isHovered } = useHover();
+  const { pressableProps, isPressed } = useIsPressed();
+  const { focusProps, isFocused } = useFocus();
+  const { isFocusVisible, focusProps: focusRingProps }: any = useFocusRing();
+
+  const {
+    _icon,
+    onPressIn,
+    onPressOut,
+    onHoverIn,
+    onHoverOut,
+    onFocus,
+    onBlur,
+    ...rest
+  } = usePropsResolution('AlertDialogCloseButton', props, {
+    isHovered,
+    isPressed,
+    isFocused,
+    isFocusVisible,
+  });
+  const { handleClose } = React.useContext(AlertDialogContext);
+  //TODO: refactor for responsive prop
+  if (useHasResponsiveProps(props)) {
+    return null;
+  }
+  return (
+    <Pressable
+      accessibilityRole="button"
+      ref={ref}
+      onPressIn={composeEventHandlers(onPressIn, pressableProps.onPressIn)}
+      onPressOut={composeEventHandlers(onPressOut, pressableProps.onPressOut)}
+      // @ts-ignore - web only
+      onHoverIn={composeEventHandlers(onHoverIn, hoverProps.onHoverIn)}
+      // @ts-ignore - web only
+      onHoverOut={composeEventHandlers(onHoverOut, hoverProps.onHoverOut)}
+      // @ts-ignore - web only
+      onFocus={composeEventHandlers(
+        composeEventHandlers(onFocus, focusProps.onFocus),
+        focusRingProps.onFocus
+      )}
+      // @ts-ignore - web only
+      onBlur={composeEventHandlers(
+        composeEventHandlers(onBlur, focusProps.onBlur),
+        focusRingProps.onBlur
+      )}
+      onPress={handleClose}
+      {...rest}
+    >
+      <CloseIcon {..._icon} />
+    </Pressable>
+  );
+};
+
+export default memo(forwardRef(AlertDialogCloseButton));

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

@@ -0,0 +1,49 @@
+import React, { memo, forwardRef } from 'react';
+import Box, { IBoxProps } from '../../primitives/Box';
+import { usePropsResolution } from '../../../hooks';
+import { AlertDialogContext } from './Context';
+import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+
+const AlertDialogContent = (props: IBoxProps, ref?: any) => {
+  const newProps = usePropsResolution('AlertDialogContent', props);
+  const {
+    contentSize,
+    initialFocusRef,
+    finalFocusRef,
+    handleClose,
+  } = React.useContext(AlertDialogContext);
+  React.useEffect(() => {
+    const finalRefVal = finalFocusRef ? finalFocusRef.current : null;
+    if (initialFocusRef && initialFocusRef.current) {
+      //@ts-ignore
+      initialFocusRef.current.focus();
+    }
+
+    return () => {
+      if (finalRefVal) {
+        //@ts-ignore
+        finalRefVal.focus();
+      }
+    };
+  }, [initialFocusRef, finalFocusRef]);
+
+  //TODO: refactor for responsive prop
+  if (useHasResponsiveProps(props)) {
+    return null;
+  }
+  return (
+    <Box
+      {...contentSize}
+      {...newProps}
+      ref={ref}
+      onAccessibilityEscape={handleClose}
+      //@ts-ignore - web only
+      aria-modal="true"
+      //@ts-ignore - web only
+      accessibilityRole="alert"
+      accessibilityViewIsModal
+    />
+  );
+};
+
+export default memo(forwardRef(AlertDialogContent));

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

@@ -0,0 +1,15 @@
+import React, { memo, forwardRef } from 'react';
+import Box, { IBoxProps } from '../../primitives/Box';
+import { usePropsResolution } from '../../../hooks';
+import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+
+const AlertDialogFooter = (props: IBoxProps, ref?: any) => {
+  const newProps = usePropsResolution('AlertDialogFooter', props);
+  //TODO: refactor for responsive prop
+  if (useHasResponsiveProps(props)) {
+    return null;
+  }
+  return <Box {...newProps} ref={ref} />;
+};
+
+export default memo(forwardRef(AlertDialogFooter));

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

@@ -0,0 +1,15 @@
+import React, { memo, forwardRef } from 'react';
+import Box, { IBoxProps } from '../../primitives/Box';
+import { usePropsResolution } from '../../../hooks';
+import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+
+const AlertDialogHeader = (props: IBoxProps, ref?: any) => {
+  const newProps = usePropsResolution('AlertDialogHeader', props);
+  //TODO: refactor for responsive prop
+  if (useHasResponsiveProps(props)) {
+    return null;
+  }
+  return <Box {...newProps} ref={ref} />;
+};
+
+export default memo(forwardRef(AlertDialogHeader));

package/Example/nativebase-v3-kitchensink/src/nb/NativeBase/src/components/composites/AlertDialog/Context.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export const AlertDialogContext = React.createContext({
+  handleClose: () => {},
+  contentSize: {},
+  initialFocusRef: { current: null },
+  finalFocusRef: { current: null },
+});

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

@@ -0,0 +1,20 @@
+import AlertDialog from './AlertDialog';
+import AlertDialogContent from './AlertDialogContent';
+import AlertDialogBody from './AlertDialogBody';
+import AlertDialogCloseButton from './AlertDialogCloseButton';
+import AlertDialogFooter from './AlertDialogFooter';
+import AlertDialogHeader from './AlertDialogHeader';
+import type { IAlertDialogComponentType } from './types';
+
+const AlertDialogTemp: any = AlertDialog;
+
+AlertDialogTemp.Content = AlertDialogContent;
+AlertDialogTemp.CloseButton = AlertDialogCloseButton;
+AlertDialogTemp.Header = AlertDialogHeader;
+AlertDialogTemp.Footer = AlertDialogFooter;
+AlertDialogTemp.Body = AlertDialogBody;
+
+const AlertDialogMain = AlertDialogTemp as IAlertDialogComponentType;
+
+export { AlertDialogMain as AlertDialog };
+export type { IAlertDialogProps } from './types';

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

@@ -0,0 +1,109 @@
+import type { IBoxProps, InterfaceBoxProps } from '../../primitives/Box';
+import type { IIconButtonProps } from '../IconButton';
+import type { MutableRefObject } from 'react';
+import type { IFadeProps, ISlideProps } from '../Transitions';
+import type {
+  CustomProps,
+  ThemeComponentSizeType,
+} from '../../../components/types/utils';
+
+export interface InterfaceAlertDialogProps
+  extends InterfaceBoxProps<IAlertDialogProps> {
+  /**
+   * If true, the AlertDialog will open. Useful for controllable state behaviour
+   */
+  isOpen?: boolean;
+  /**
+   * Callback invoked when the AlertDialog is closed
+   */
+  onClose?: () => any;
+  /**
+   * If true, the AlertDialog will be opened by default
+   */
+  defaultIsOpen?: boolean;
+  /**
+   * The size of the AlertDialog
+   */
+  size?: ThemeComponentSizeType<'AlertDialog'>; //'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full' | number | string;
+  /**
+   * The ref of element that is least destructive child of the AlertDialog.
+   */
+  leastDestructiveRef: React.RefObject<any>;
+  /**
+   * The ref of element to receive focus when the AlertDialog opens.
+   */
+  initialFocusRef?: React.RefObject<any> | any;
+  /**
+   * The ref of element to receive focus when the AlertDialog closes.
+   */
+  finalFocusRef?: React.RefObject<any> | any;
+  /**
+   * If true and the keyboard is opened, the AlertDialog will move up equvivalent to the keyboard height.
+   * @default false
+   */
+  avoidKeyboard?: boolean;
+  /**
+   * If true, the AlertDialog will close when the overlay is clicked
+   * @default true
+   */
+  closeOnOverlayClick?: boolean;
+  /**
+   * If true, the AlertDialog will close when Escape key is pressed
+   * @default true
+   */
+  isKeyboardDismissable?: boolean;
+  /**
+   * If true, a backdrop element is visible
+   * @default true
+   */
+  overlayVisible?: boolean;
+  /**
+   * If true, a backdrop element is visible
+   * @default true
+   */
+  backdropVisible?: boolean;
+  /**
+   * Props applied on Overlay.
+   */
+  _backdrop?: any;
+  /**
+   * Props applied on Overlay Animation.
+   */
+  _backdropFade?: Partial<IFadeProps>;
+  /**
+   * Props applied on Child Fade Animation.
+   */
+  _fade?: Partial<IFadeProps>;
+  /**
+   * Props applied on Child Slide Animation.
+   */
+  _slide?: Partial<ISlideProps>;
+  /**
+   * Sets the animation type
+   * @default "fade"
+   */
+  animationPreset?: 'slide' | 'fade';
+}
+
+export type IAlertDialogComponentType = ((
+  props: IAlertDialogProps & { ref?: MutableRefObject<any> }
+) => JSX.Element) & {
+  Body: React.MemoExoticComponent<
+    (props: IBoxProps & { ref?: MutableRefObject<any> }) => JSX.Element
+  >;
+  CloseButton: React.MemoExoticComponent<
+    (props: IIconButtonProps & { ref?: MutableRefObject<any> }) => JSX.Element
+  >;
+  Content: React.MemoExoticComponent<
+    (props: IBoxProps & { ref?: MutableRefObject<any> }) => JSX.Element
+  >;
+  Footer: React.MemoExoticComponent<
+    (props: IBoxProps & { ref?: MutableRefObject<any> }) => JSX.Element
+  >;
+  Header: React.MemoExoticComponent<
+    (props: IBoxProps & { ref?: MutableRefObject<any> }) => JSX.Element
+  >;
+};
+
+export type IAlertDialogProps = InterfaceAlertDialogProps &
+  CustomProps<'AlertDialog'>;

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import { useThemeProps } from '../../../hooks';
+import { HStack } from '../../primitives';
+import { APPROX_STATUSBAR_HEIGHT } from './utils';
+import type { IAppBarProps } from './types';
+import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+
+const AppBar = ({ children, ...props }: IAppBarProps, ref: any) => {
+  const {
+    statusBarHeight = APPROX_STATUSBAR_HEIGHT,
+    ...newProps
+  } = useThemeProps('AppBar', props);
+  //TODO: refactor for responsive prop
+  if (useHasResponsiveProps(props)) {
+    return null;
+  }
+  return (
+    <HStack
+      mt={statusBarHeight}
+      justifyContent="space-between"
+      alignItems="center"
+      {...newProps}
+      ref={ref}
+    >
+      {children}
+    </HStack>
+  );
+};
+
+export default React.memo(React.forwardRef(AppBar));

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Box, IBoxProps } from '../../primitives';
+import { useThemeProps } from '../../../hooks';
+
+export type IAppBarContentProps = IBoxProps;
+
+const AppBarContent = (props: IAppBarContentProps) => {
+  const { color } = useThemeProps('AppBar', props);
+  return (
+    <Box alignItems="center" flexDirection="row" _text={{ color }} {...props} />
+  );
+};
+
+export default React.memo(AppBarContent);

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { HStack, IStackProps } from '../../primitives';
+import { useThemeProps } from '../../../hooks';
+import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+
+const AppBarLeft = (props: IStackProps) => {
+  const { color } = useThemeProps('AppBar', props);
+  //TODO: refactor for responsive prop
+  if (useHasResponsiveProps(props)) {
+    return null;
+  }
+  return <HStack alignItems="center" _text={{ color }} {...props} />;
+};
+
+export default React.memo(AppBarLeft);

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import { HStack, IStackProps } from '../../primitives';
+import { useThemeProps } from '../../../hooks';
+import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+
+const AppBarRight = (props: IStackProps) => {
+  const { color } = useThemeProps('AppBar', props);
+  //TODO: refactor for responsive prop
+  if (useHasResponsiveProps(props)) {
+    return null;
+  }
+  return (
+    <HStack
+      alignItems="center"
+      justifyContent="flex-end"
+      _text={{
+        color,
+      }}
+      {...props}
+    />
+  );
+};
+
+export default React.memo(AppBarRight);

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

@@ -0,0 +1,15 @@
+import AppBarMain from './AppBar';
+import AppBarLeft from './AppBarLeft';
+import AppBarRight from './AppBarRight';
+import AppBarContent from './AppBarContent';
+import type { IAppBarComponentType } from './types';
+
+const AppBarTemp: any = AppBarMain;
+AppBarTemp.Left = AppBarLeft;
+AppBarTemp.Right = AppBarRight;
+AppBarTemp.Content = AppBarContent;
+
+const AppBar = AppBarTemp as IAppBarComponentType;
+
+export { AppBar };
+export type { IAppBarProps } from './types';

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

@@ -0,0 +1,16 @@
+import type { ColorSchemeType } from '../../../components/types';
+import type { InterfaceStackProps } from '../../primitives/Stack/Stack';
+
+export type IAppBarProps = InterfaceStackProps & {
+  colorScheme?: ColorSchemeType;
+  statusBarHeight?: number;
+  space?: number;
+};
+
+export type IAppBarComponentType = ((props: IAppBarProps) => JSX.Element) & {
+  Left: React.MemoExoticComponent<(props: InterfaceStackProps) => JSX.Element>;
+  Right: React.MemoExoticComponent<(props: InterfaceStackProps) => JSX.Element>;
+  Content: React.MemoExoticComponent<
+    (props: InterfaceStackProps) => JSX.Element
+  >;
+};

package/Example/nativebase-v3-kitchensink/src/nb/NativeBase/src/components/composites/AppBar/utils.ts

@@ -0,0 +1,23 @@
+import { Platform, StatusBar } from 'react-native';
+// import Constants from 'expo-constants';
+// @ts-ignore
+// const expo = global.__expo;
+
+const IOS_STATUS_BAR_HEIGHT = 20;
+
+const DEFAULT_STATUSBAR_HEIGHT_EXPO = 0;
+
+// https://docs.expo.io/versions/latest/sdk/constants/
+// Try to get height from expo if app is using expo env
+// IOS >= 11 is handled using SafeAreaView
+export const APPROX_STATUSBAR_HEIGHT = Platform.select({
+  android: DEFAULT_STATUSBAR_HEIGHT_EXPO
+    ? DEFAULT_STATUSBAR_HEIGHT_EXPO
+    : StatusBar.currentHeight,
+  ios:
+    Platform.Version < 11
+      ? DEFAULT_STATUSBAR_HEIGHT_EXPO
+        ? DEFAULT_STATUSBAR_HEIGHT_EXPO
+        : IOS_STATUS_BAR_HEIGHT
+      : 0,
+});