react-native-acoustic-connect-beta 16.0.0

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

@@ -0,0 +1,27 @@
+import { default as TabsMain } from './Tabs';
+export { TabsContext } from './Context';
+import { default as TabBar } from './TabBar';
+import { default as Tab } from './Tab';
+import { default as TabViews } from './TabViews';
+import { default as TabView } from './TabView';
+import TabIcon from './TabIcon';
+import type { ITabsComponentType } from './types';
+
+export type {
+  ITabsProps,
+  ITabBarProps,
+  ITabProps,
+  ITabViewsProps,
+  ITabViewProps,
+  ITabsContextProps,
+} from './types';
+
+const TabsTemp: any = TabsMain;
+TabsTemp.Bar = TabBar;
+TabsTemp.Tab = Tab;
+TabsTemp.Views = TabViews;
+TabsTemp.View = TabView;
+TabsTemp.Icon = TabIcon;
+
+const Tabs = TabsTemp as ITabsComponentType;
+export { Tabs };

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

@@ -0,0 +1,75 @@
+import type { RefObject } from 'react';
+import type { ViewProps } from 'react-native';
+import type { InterfaceBoxProps } from '../../primitives/Box';
+import type { InterfaceIconProps } from '../../primitives/Icon/types';
+import type { ColorSchemeType } from '../../../components/types';
+
+export type ITabsProps = InterfaceBoxProps<ITabsProps> & {
+  align?: 'center' | 'end' | 'start';
+  id?: string;
+  colorScheme?: ColorSchemeType;
+  index?: number;
+  defaultIndex?: number;
+  isFitted?: boolean;
+  isLazy?: boolean;
+  isManual?: boolean;
+  orientation?: 'horizontal' | 'vertical';
+  size?: 'sm' | 'md' | 'lg';
+  variant?: 'outline' | 'filled' | 'filled-outline';
+  onChange?: (index: number) => void;
+  keyboardActivation?: 'manual' | 'automatic';
+};
+
+export type ITabBarProps = InterfaceBoxProps<ITabBarProps> & {
+  align?: 'center' | 'end' | 'start';
+  isFitted?: boolean;
+  size?: 'sm' | 'md' | 'lg';
+  tablistRef?: RefObject<any>;
+  tabListProps?: ViewProps;
+};
+export type ITabProps = InterfaceBoxProps<ITabProps> & {
+  isDisabled?: boolean;
+  _active?: any;
+  _disabled?: any;
+  _hover?: any;
+  item?: any;
+};
+
+export type ITabViewsProps = InterfaceBoxProps<ITabViewsProps>;
+export type ITabViewProps = InterfaceBoxProps<ITabViewProps> & {
+  index?: number;
+};
+
+export type ITabsContextProps = {
+  activeIconProps?: any;
+  inactiveIconProps?: any;
+  activeTabStyle?: any;
+  inactiveTabStyle?: any;
+  tabBarStyle?: any;
+  isFitted?: boolean;
+  align?: 'start' | 'center' | 'end';
+  state?: any;
+};
+export type ITabContextProps = {
+  isSelected?: boolean;
+};
+
+export type ITabsComponentType = ((
+  props: ITabsProps & { ref?: any }
+) => JSX.Element) & {
+  Bar: React.MemoExoticComponent<
+    (props: ITabBarProps & { ref?: any }) => JSX.Element
+  >;
+  Tab: React.MemoExoticComponent<
+    (props: ITabProps & { ref?: any }) => JSX.Element
+  >;
+  Views: React.MemoExoticComponent<
+    (props: ITabViewsProps & { ref?: any }) => JSX.Element
+  >;
+  View: React.MemoExoticComponent<
+    (props: ITabViewProps & { ref?: any }) => JSX.Element
+  >;
+  Icon: React.MemoExoticComponent<
+    (props: InterfaceIconProps & { ref?: any }) => JSX.Element
+  >;
+};

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import Box from '../../primitives/Box';
+import { useThemeProps } from '../../../hooks';
+import type { IInputComponentType, ITagProps } from './types';
+import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+
+const Tag = ({ style, ...props }: ITagProps, ref: any) => {
+  let resolvedProps = useThemeProps('Tag', props);
+  //TODO: refactor for responsive prop
+  if (useHasResponsiveProps(props)) {
+    return null;
+  }
+  return <Box style={style} {...resolvedProps} ref={ref} />;
+};
+
+export default React.memo(React.forwardRef(Tag)) as IInputComponentType;
+export type { ITagProps };

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

@@ -0,0 +1,13 @@
+import type { CustomProps } from '../../../components/types';
+import type { InterfaceBoxProps } from '../../primitives/Box';
+import type { ColorSchemeType } from '../../../components/types';
+
+export interface InterfaceTagProps extends InterfaceBoxProps<ITagProps> {
+  variant?: 'solid' | 'subtle' | 'outline';
+  colorScheme?: ColorSchemeType;
+  size?: string | number;
+}
+
+export type IInputComponentType = (props: ITagProps) => JSX.Element;
+
+export type ITagProps = InterfaceTagProps & CustomProps<'Tag'>;

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

@@ -0,0 +1,79 @@
+import React from 'react';
+import { usePropsResolution } from '../../../hooks';
+import type { ITextFieldProps } from './types';
+import { Stack } from '../../primitives/Stack';
+import { Input } from '../../primitives/Input';
+import Text from '../../primitives/Text';
+import { extractInObject, stylingProps } from '../../../theme/tools/utils';
+import Select from '../../primitives/Select';
+import TextArea from '../../primitives/TextArea';
+import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+
+const TextField = (mainProps: ITextFieldProps, ref?: any) => {
+  //TODO: Remove `any`
+  const {
+    children,
+    helperText,
+    errorMessage,
+    InputLeftElement,
+    InputRightElement,
+    dropdownIcon,
+    ...props
+  }: any = mainProps;
+
+  const {
+    divider,
+    _errorMessageProps,
+    _helperTextProps,
+    component,
+    ...resolvedProps
+  } = usePropsResolution('TextField', props);
+
+  const [layoutProps, componentProps] = extractInObject(resolvedProps, [
+    'space',
+    'reversed',
+    ...stylingProps.margin,
+    ...stylingProps.layout,
+    ...stylingProps.flexbox,
+    ...stylingProps.position,
+  ]);
+  //TODO: refactor for responsive prop
+  if (useHasResponsiveProps(props)) {
+    return null;
+  }
+  const activeComponent = () => {
+    switch (component) {
+      case 'select':
+        return (
+          <Select {...componentProps} dropdownIcon={dropdownIcon}>
+            {children}
+          </Select>
+        );
+      case 'textarea':
+        return <TextArea {...componentProps} ref={ref} />;
+      default:
+        return (
+          <Input
+            InputLeftElement={InputLeftElement}
+            InputRightElement={InputRightElement}
+            {...componentProps}
+            ref={ref}
+          />
+        );
+    }
+  };
+
+  return (
+    <Stack divider={divider} {...layoutProps}>
+      {activeComponent()}
+      {componentProps.isInvalid && (
+        <Text {..._errorMessageProps}>{errorMessage}</Text>
+      )}
+      {!componentProps.isInvalid && (
+        <Text {..._helperTextProps}>{helperText}</Text>
+      )}
+    </Stack>
+  );
+};
+
+export default React.memo(React.forwardRef(TextField));

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

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

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

@@ -0,0 +1,19 @@
+import type { IInputProps } from '../../primitives/Input';
+import type { InterfaceStackProps } from '../../primitives/Stack/Stack';
+import type { ISelectProps } from '../../primitives/Select';
+import type { ITextAreaProps } from '../../primitives/TextArea';
+import type { CustomProps } from '../../../components/types';
+
+type componentsSpecificProps =
+  | ({ component?: 'input' } & IInputProps)
+  | ({ component?: 'textarea' } & ITextAreaProps)
+  | ({ component?: 'select' } & ISelectProps);
+
+export type ITextFieldProps = (componentsSpecificProps &
+  InterfaceStackProps & {
+    helperText?: string;
+    errorMessage?: string;
+    _helperTextProps?: any;
+    _errorMessageProps?: any;
+  }) &
+  CustomProps<'TextField'>;

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

@@ -0,0 +1,311 @@
+import { Overlay } from '../../primitives/Overlay';
+import { PresenceTransition } from '../Transitions';
+import VStack from '../../primitives/Stack/VStack';
+import React, {
+  createContext,
+  MutableRefObject,
+  useState,
+  useMemo,
+} from 'react';
+import { AccessibilityInfo, Platform, SafeAreaView } from 'react-native';
+import Box from '../../primitives/Box';
+import { usePropsResolution } from '../../../hooks';
+import type { IToastContext, IToastInfo, IToast, IToastProps } from './types';
+
+const INSET = 50;
+
+const POSITIONS = {
+  'top': {
+    top: INSET,
+    left: 0,
+    right: 0,
+  },
+  'top-right': {
+    top: INSET,
+    right: 0,
+  },
+  'top-left': {
+    top: INSET,
+    left: 0,
+  },
+  'bottom': {
+    bottom: INSET,
+    left: 0,
+    right: 0,
+  },
+  'bottom-left': {
+    bottom: INSET,
+    left: 0,
+  },
+  'bottom-right': {
+    bottom: INSET,
+    right: 0,
+  },
+};
+
+const initialAnimationOffset = 24;
+
+const transitionConfig: any = {
+  'bottom': initialAnimationOffset,
+  'top': -initialAnimationOffset,
+  'top-right': -initialAnimationOffset,
+  'top-left': -initialAnimationOffset,
+  'bottom-left': initialAnimationOffset,
+  'bottom-right': initialAnimationOffset,
+};
+
+const ToastContext = createContext<IToastContext>({
+  toastInfo: {},
+  setToastInfo: () => {},
+  setToast: () => {},
+  removeToast: () => {},
+  hideAll: () => {},
+  isActive: () => false,
+  visibleToasts: {},
+  setVisibleToasts: () => {},
+  hideToast: () => {},
+});
+
+const CustomToast = ({ _overlay, _stack, _presenceTransition }: any) => {
+  const { toastInfo, visibleToasts, removeToast } = React.useContext(
+    ToastContext
+  );
+
+  const getPositions = () => {
+    return Object.keys(toastInfo);
+  };
+
+  let hasToastOnOverlay = false;
+  getPositions().map((position) => {
+    if (toastInfo[position]?.length > 0) hasToastOnOverlay = true;
+  });
+
+  return getPositions().length > 0 ? (
+    <Overlay {..._overlay} isOpen={hasToastOnOverlay}>
+      {getPositions().map((position: string) => {
+        if (Object.keys(POSITIONS).includes(position))
+          return (
+            <VStack
+              {..._stack}
+              key={position}
+              // @ts-ignore
+              {...POSITIONS[position]}
+            >
+              {
+                // @ts-ignore
+                toastInfo[position].map((toast: IToast) => (
+                  <PresenceTransition
+                    {..._presenceTransition}
+                    key={toast.id}
+                    visible={visibleToasts[toast.id]}
+                    onTransitionComplete={(status: any) => {
+                      if (status === 'exited') {
+                        removeToast(toast.id);
+                        toast.config?.onCloseComplete &&
+                          toast.config?.onCloseComplete();
+                      }
+                    }}
+                    initial={{
+                      opacity: 0,
+                      translateY: transitionConfig[position],
+                    }}
+                  >
+                    <SafeAreaView>{toast.component}</SafeAreaView>
+                  </PresenceTransition>
+                ))
+              }
+            </VStack>
+          );
+        else return null;
+      })}
+    </Overlay>
+  ) : null;
+};
+
+export const ToastProvider = ({ children }: { children: any }) => {
+  const [toastInfo, setToastInfo] = useState<IToastInfo>({});
+  const [visibleToasts, setVisibleToasts] = useState<
+    {
+      [key in string]: boolean;
+    }
+  >({});
+
+  const [themeProps] = useState(usePropsResolution('Toast', {}));
+  const toastIndex = React.useRef(1);
+
+  const hideAll = React.useCallback(() => {
+    setVisibleToasts({});
+  }, [setVisibleToasts]);
+
+  const hideToast = React.useCallback(
+    (id: any) => {
+      setVisibleToasts((prevVisibleToasts) => ({
+        ...prevVisibleToasts,
+        [id]: false,
+      }));
+    },
+    [setVisibleToasts]
+  );
+
+  const isActive = React.useCallback(
+    (id: any) => {
+      for (const toastPosition of Object.keys(toastInfo)) {
+        const positionArray: Array<IToast> = toastInfo[toastPosition];
+        return positionArray.findIndex((toastData) => toastData.id === id) > -1;
+      }
+
+      return false;
+    },
+    [toastInfo]
+  );
+
+  const removeToast = React.useCallback(
+    (id: any) => {
+      setToastInfo((prev) => {
+        for (const toastPosition of Object.keys(prev)) {
+          const positionArray: Array<IToast> = prev[toastPosition];
+          const isToastPresent =
+            positionArray.findIndex((toastData) => toastData.id === id) > -1;
+
+          if (isToastPresent) {
+            const newPositionArray = positionArray.filter(
+              (item) => item.id !== id
+            );
+            const temp: any = {};
+            temp[toastPosition] = newPositionArray;
+
+            const newToastInfo = { ...prev, ...temp };
+            return newToastInfo;
+          }
+        }
+
+        return prev;
+      });
+    },
+    [setToastInfo]
+  );
+
+  const setToast = React.useCallback(
+    (props: IToastProps): number => {
+      const {
+        placement = 'bottom',
+        title,
+        render,
+        id = toastIndex.current++,
+        description,
+        duration = 5000,
+        _title,
+        _description,
+        accessibilityAnnouncement,
+        ...rest
+      } = props;
+
+      let positionToastArray = toastInfo[placement];
+      if (!positionToastArray) positionToastArray = [];
+
+      let component = null;
+
+      if (render) {
+        component = render({ id });
+      } else {
+        component = (
+          // Below VStack is the default component where all the direct props spread.
+          <VStack {...themeProps} {...rest}>
+            <Box _text={{ ...themeProps._title, ..._title }}>{title}</Box>
+            {description && (
+              <Box _text={{ ...themeProps._description, ..._description }}>
+                {description}
+              </Box>
+            )}
+          </VStack>
+        );
+      }
+
+      toastInfo[placement] = [
+        ...positionToastArray,
+        { component, id, config: props },
+      ];
+
+      setToastInfo({ ...toastInfo });
+
+      setVisibleToasts({ ...visibleToasts, [id]: true });
+      if (duration !== null) {
+        setTimeout(function () {
+          hideToast(id);
+        }, duration);
+      }
+
+      // iOS doesn't support accessibilityLiveRegion
+      if (accessibilityAnnouncement && Platform.OS === 'ios') {
+        AccessibilityInfo.announceForAccessibility(accessibilityAnnouncement);
+      }
+
+      return id;
+    },
+    [themeProps, toastInfo, visibleToasts, hideToast]
+  );
+
+  const contextValue = React.useMemo(() => {
+    return {
+      toastInfo,
+      setToastInfo,
+      setToast,
+      removeToast,
+      hideAll,
+      isActive,
+      visibleToasts,
+      setVisibleToasts,
+      hideToast,
+    };
+  }, [
+    toastInfo,
+    setToastInfo,
+    setToast,
+    removeToast,
+    hideAll,
+    isActive,
+    visibleToasts,
+    setVisibleToasts,
+    hideToast,
+  ]);
+
+  return (
+    <ToastContext.Provider value={contextValue}>
+      {children}
+      <CustomToast
+        _overlay={themeProps._overlay}
+        _stack={themeProps._stack}
+        _presenceTransition={themeProps._presenceTransition}
+      />
+    </ToastContext.Provider>
+  );
+};
+
+export const useToast = () => {
+  const { setToast, hideAll, isActive, hideToast } = React.useContext(
+    ToastContext
+  );
+
+  const toast = useMemo(
+    () => ({
+      show: setToast,
+      close: hideToast,
+      closeAll: hideAll,
+      isActive,
+    }),
+    [setToast, hideAll, isActive, hideToast]
+  );
+
+  return toast;
+};
+
+export type IToastService = ReturnType<typeof useToast>;
+
+export const ToastRef = React.createRef<IToastService>() as MutableRefObject<IToastService>;
+
+export const Toast: IToastService = {
+  show: (props: IToastProps) => ToastRef.current?.show(props),
+  close: (id: any) => ToastRef.current?.close(id),
+  closeAll: () => ToastRef.current?.closeAll(),
+  isActive: (id: any) => ToastRef.current?.isActive(id),
+};

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

@@ -0,0 +1,6 @@
+// This component is just exported for the documentation purpose
+import type { IToastProps } from './types';
+
+export const Toast = (props: IToastProps) => {
+  props; // no-op
+};

package/Example/nativebase-v3-kitchensink/src/nb/NativeBase/src/components/composites/Toast/index.ts

@@ -0,0 +1,2 @@
+export * from './Toast';
+export * from './types';

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

@@ -0,0 +1,83 @@
+import type { ReactNode } from 'react';
+import type { ITextProps } from '../../primitives/Text';
+import type { InterfaceBoxProps } from '../../primitives/Box';
+import type { CustomProps } from '../../../components/types';
+
+export interface InterfaceToastProps extends InterfaceBoxProps<IToastProps> {
+  /**
+   * The title to be rendered in the Toast
+   */
+  title?: ReactNode;
+  /**
+   * The description of the toast
+   */
+  description?: ReactNode;
+  /**
+   * The delay before the toast hides (in milliseconds). If set to `null`, toast will never dismiss.
+   * @default 5000
+   */
+  duration?: number | null;
+  /**
+   * The `id` of the toast. Mostly used when you need to prevent duplicate. By default, we generate a unique `id` for each toast
+   */
+  id?: any;
+  /**
+   * Callback function to run side effects after the toast has closed.
+   */
+  onCloseComplete?: () => void;
+  /**
+   * The placement of the toast. Defaults to bottom
+   * @default bottom
+   */
+  placement?:
+    | 'top'
+    | 'top-right'
+    | 'top-left'
+    | 'bottom'
+    | 'bottom-left'
+    | 'bottom-right';
+  /**
+   * Render a component toast component. Any component passed will receive 2 props: `id` and `onClose`.
+   */
+  render?: (props: any) => ReactNode;
+  /**
+   * For providing props to Title inside Toast
+   */
+  _title?: Partial<ITextProps>;
+  /**
+   * For providing props to Description inside Toast
+   */
+  _description?: Partial<ITextProps>;
+  /**
+   * The text to be announced by a screen reader when the Toast opens.
+   */
+  accessibilityAnnouncement?: string;
+  /**
+   * Determines the [accessibility announcement tone](https://reactnative.dev/docs/accessibility#accessibilityliveregion-android).
+   */
+  accessibilityLiveRegion?: 'none' | 'polite' | 'assertive';
+}
+
+export type IToast = {
+  id: number;
+  component: any;
+  config?: IToastProps;
+};
+
+export type IToastInfo = {
+  [key in any]: Array<IToast>;
+};
+
+export type IToastContext = {
+  toastInfo: IToastInfo;
+  setToastInfo: any;
+  setToast: (props: IToastProps) => any;
+  removeToast: (id: any) => void;
+  hideAll: () => void;
+  isActive: (id: any) => boolean;
+  visibleToasts: any;
+  setVisibleToasts: any;
+  hideToast: (id: any) => void;
+};
+
+export type IToastProps = InterfaceToastProps & CustomProps<'Toast'>;

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

@@ -0,0 +1,29 @@
+let INSET = 0;
+export const POSITIONS = {
+  'bottom': {
+    bottom: INSET,
+    left: 0,
+    right: 0,
+  },
+  'top': {
+    top: INSET,
+    left: 0,
+    right: 0,
+  },
+  'top-right': {
+    top: INSET,
+    right: INSET,
+  },
+  'top-left': {
+    top: INSET,
+    left: INSET,
+  },
+  'bottom-left': {
+    bottom: INSET,
+    left: INSET,
+  },
+  'bottom-right': {
+    bottom: INSET,
+    right: INSET,
+  },
+};