react-native-acoustic-connect-beta 16.0.0

package/Example/nativebase-v3-kitchensink/src/nb/NativeBase/src/components/primitives/Icon/Icons/questionIconPath.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { G, Path } from '../nbSvg';
+
+export const questionOutlineIconPath = (
+  <G>
+    <Path d="M12 20.75C9.67936 20.75 7.45376 19.8281 5.81282 18.1872C4.17187 16.5462 3.25 14.3206 3.25 12C3.25 9.67936 4.17187 7.45376 5.81282 5.81282C7.45376 4.17187 9.67936 3.25 12 3.25C14.3206 3.25 16.5462 4.17187 18.1872 5.81282C19.8281 7.45376 20.75 9.67936 20.75 12C20.75 14.3206 19.8281 16.5462 18.1872 18.1872C16.5462 19.8281 14.3206 20.75 12 20.75ZM12 22C14.6522 22 17.1957 20.9464 19.0711 19.0711C20.9464 17.1957 22 14.6522 22 12C22 9.34784 20.9464 6.8043 19.0711 4.92893C17.1957 3.05357 14.6522 2 12 2C9.34784 2 6.8043 3.05357 4.92893 4.92893C3.05357 6.8043 2 9.34784 2 12C2 14.6522 3.05357 17.1957 4.92893 19.0711C6.8043 20.9464 9.34784 22 12 22Z" />
+    <Path d="M8.70533 9.34281C8.70369 9.38156 8.70999 9.42024 8.72385 9.45647C8.73771 9.4927 8.75883 9.52571 8.78592 9.55347C8.81301 9.58123 8.84549 9.60316 8.88136 9.6179C8.91724 9.63265 8.95575 9.6399 8.99453 9.63921H9.98453C10.1501 9.63921 10.2821 9.50361 10.3037 9.33921C10.4117 8.55201 10.9517 7.97841 11.9141 7.97841C12.7373 7.97841 13.4909 8.39001 13.4909 9.38001C13.4909 10.142 13.0421 10.4924 12.3329 11.0252C11.5253 11.612 10.8857 12.2972 10.9313 13.4096L10.9349 13.67C10.9362 13.7487 10.9684 13.8238 11.0245 13.879C11.0806 13.9343 11.1562 13.9652 11.2349 13.9652H12.2081C12.2877 13.9652 12.364 13.9336 12.4203 13.8773C12.4765 13.8211 12.5081 13.7448 12.5081 13.6652V13.5392C12.5081 12.6776 12.8357 12.4268 13.7201 11.756C14.4509 11.2004 15.2129 10.5836 15.2129 9.28881C15.2129 7.47561 13.6817 6.59961 12.0053 6.59961C10.4849 6.59961 8.81933 7.30761 8.70533 9.34281ZM10.5737 16.2584C10.5737 16.898 11.0837 17.3708 11.7857 17.3708C12.5165 17.3708 13.0193 16.898 13.0193 16.2584C13.0193 15.596 12.5153 15.1304 11.7845 15.1304C11.0837 15.1304 10.5737 15.596 10.5737 16.2584Z" />
+  </G>
+);

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

@@ -0,0 +1,75 @@
+import React, { memo, forwardRef } from 'react';
+import { useToken, usePropsResolution } from '../../../hooks';
+import { makeStyledComponent } from '../../../utils/styled';
+import { Svg, G } from './nbSvg';
+import type { IIconProps } from './types';
+import { questionOutlineIconPath } from './Icons/questionIconPath';
+import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+
+const SVG = makeStyledComponent(Svg);
+
+const SVGIcon = ({ children, ...props }: IIconProps, ref: any) => {
+  const {
+    focusable,
+    stroke,
+    color,
+    size,
+    ...resolvedProps
+  } = usePropsResolution('Icon', props);
+  const strokeHex = useToken('colors', stroke || '');
+  const colorHex = useToken('colors', color || '');
+  //TODO: refactor for responsive prop
+  if (useHasResponsiveProps(props)) {
+    return null;
+  }
+  return (
+    <SVG
+      {...resolvedProps}
+      // height={
+      //   newProps.size
+      //     ? parseInt(newProps.size, 10)
+      //     : parseInt(newProps.height, 10)
+      // }
+      // width={
+      //   newProps.size
+      //     ? parseInt(newProps.size, 10)
+      //     : parseInt(newProps.width, 10)
+      // }
+      size={size}
+      color={colorHex}
+      stroke={strokeHex}
+      focusable={focusable}
+      accessibilityRole="image"
+      // style={style}
+      ref={ref}
+    >
+      {React.Children.count(children) > 0 ? (
+        <G>
+          {React.Children.map(children, (child, i) => (
+            <ChildPath
+              key={child?.key ?? i}
+              element={child}
+              {...child?.props}
+            />
+          ))}
+        </G>
+      ) : (
+        questionOutlineIconPath
+      )}
+    </SVG>
+  );
+};
+const ChildPath = ({ element, fill, stroke: pathStroke }: any) => {
+  const pathStrokeColor = useToken('colors', pathStroke || '');
+  const fillColor = useToken('colors', fill || '');
+
+  if (!element) {
+    return null;
+  }
+
+  return React.cloneElement(element, {
+    fill: fillColor ? fillColor : 'currentColor',
+    stroke: pathStrokeColor,
+  });
+};
+export default memo(forwardRef(SVGIcon));

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

@@ -0,0 +1,18 @@
+import React, { memo, forwardRef } from 'react';
+import SVGIcon from './SVGIcon';
+import { Path } from './nbSvg';
+import type { IcreateIconProps } from './types';
+import isEmpty from 'lodash.isempty';
+
+export const createIcon = ({ path, d, ...initialProps }: IcreateIconProps) => {
+  const createdIcon = (props: any, ref: any) => {
+    let children = path;
+    if (d && (!path || isEmpty(path))) {
+      children = <Path fill="currentColor" d={d} />;
+    }
+    return (
+      <SVGIcon children={children} {...initialProps} {...props} ref={ref} />
+    );
+  };
+  return memo(forwardRef(createdIcon));
+};

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

@@ -0,0 +1,3 @@
+export { default as Icon } from './Icon';
+export { createIcon } from './createIcon';
+export type { IIconProps } from './types';

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

@@ -0,0 +1 @@
+export { Svg, G, Path, Polygon, Line, Circle, Rect } from 'react-native-svg';

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

@@ -0,0 +1,25 @@
+//@ts-ignore
+import { unstable_createElement } from 'react-native-web';
+import { forwardRef } from 'react';
+
+export const Svg = forwardRef((props: any, ref: any) =>
+  unstable_createElement('svg', { ...props, ref })
+);
+export const G = forwardRef((props: any, ref: any) =>
+  unstable_createElement('g', { ...props, ref })
+);
+export const Path = forwardRef((props: any, ref: any) =>
+  unstable_createElement('path', { ...props, ref })
+);
+export const Polygon = forwardRef((props: any, ref: any) =>
+  unstable_createElement('polygon', { ...props, ref })
+);
+export const Line = forwardRef((props: any, ref: any) =>
+  unstable_createElement('line', { ...props, ref })
+);
+export const Circle = forwardRef((props: any, ref: any) =>
+  unstable_createElement('circle', { ...props, ref })
+);
+export const Rect = forwardRef((props: any, ref: any) =>
+  unstable_createElement('rect', { ...props, ref })
+);

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

@@ -0,0 +1,73 @@
+import type { PlatformProps } from '../../types';
+import type { StyledProps } from '../../../theme/types';
+import type { ResponsiveValue } from '../../types/responsiveValue';
+import type { SvgProps } from 'react-native-svg';
+import type { IColors } from '../../../theme/base/colors';
+
+import type { CustomProps, ThemeComponentSizeType } from '../../types/utils';
+
+export interface InterfaceIconProps
+  extends Omit<
+      SvgProps,
+      'opacity' | 'stroke' | 'height' | 'width' | 'transform' | 'color'
+    >,
+    StyledProps,
+    PlatformProps<IIconProps> {
+  // name?: IconNameType;
+  // type?: IconType;
+  /**
+   * Use <a href='https://github.com/expo/vector-icons'>@expo/vector-icons</a>
+   */
+  as?: any;
+  /**
+   * The viewBox of the icon.
+   */
+  // viewBox?: string;
+  /**
+   * The size of the icon.
+   */
+  size?: ThemeComponentSizeType<'Icon'>;
+
+  /**
+   * The color of the icon.
+   */
+  // color?: string;
+  color?: ResponsiveValue<IColors | (string & {})>;
+  /**
+   *
+   */
+  // focusable?: boolean;
+  /**
+   *
+   */
+  children?: JSX.Element[] | JSX.Element;
+  /**
+   *
+   */
+  name?: string;
+  /**
+   *
+   */
+  // stroke?: string;
+  /**
+   *
+   */
+  // strokeWidth?: string;
+}
+
+export interface IcreateIconProps {
+  /**
+   * The viewBox of the icon.
+   */
+  viewBox?: string;
+  /**
+   * Path element of the icon.
+   */
+  path?: JSX.Element[] | JSX.Element;
+  /**
+   * The path of the SVG icon.
+   */
+  d?: string;
+}
+
+export type IIconProps = InterfaceIconProps & CustomProps<'Icon'>;

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

@@ -0,0 +1,112 @@
+import React, { useState, memo, forwardRef, useCallback, useRef } from 'react';
+import { Image as RNImage } from 'react-native';
+import Text from '../Text';
+import { usePropsResolution } from '../../../hooks/useThemeProps';
+import type { IImageProps } from './types';
+import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+import { makeStyledComponent } from '../../../utils/styled';
+
+const StyledImage = makeStyledComponent(RNImage);
+
+const Image = memo(
+  forwardRef((props: IImageProps, ref: any) => {
+    const {
+      source,
+      src,
+      fallbackElement,
+      alt,
+      fallbackSource,
+      ignoreFallback,
+      _alt,
+      ...resolvedProps
+    } = usePropsResolution('Image', props);
+
+    const finalSource: any = useRef(null);
+    const getSource = useCallback(() => {
+      if (source) {
+        finalSource.current = source;
+      } else if (src) {
+        finalSource.current = { uri: src };
+      }
+      return finalSource.current;
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [source?.uri, src]);
+
+    const [renderedSource, setSource] = useState(getSource());
+    const [alternate, setAlternate] = useState(false);
+    const [fallbackSourceFlag, setfallbackSourceFlag] = useState(true);
+
+    React.useEffect(() => {
+      setSource(getSource());
+      return () => {
+        finalSource.current = null;
+      };
+    }, [source?.uri, src, getSource]);
+
+    const onImageLoadError = useCallback(
+      (event: any) => {
+        props.onError && props.onError(event);
+        console.warn(event.nativeEvent.error);
+        if (
+          !ignoreFallback &&
+          fallbackSource &&
+          fallbackSource !== renderedSource &&
+          fallbackSourceFlag
+        ) {
+          setfallbackSourceFlag(false);
+          setSource(fallbackSource);
+        } else {
+          setAlternate(true);
+        }
+      },
+      [
+        fallbackSource,
+        fallbackSourceFlag,
+        ignoreFallback,
+        props,
+        renderedSource,
+      ]
+    );
+    //TODO: refactor for responsive prop
+    if (useHasResponsiveProps(props)) {
+      return null;
+    }
+    if (!alt) {
+      console.warn('Please pass alt prop to Image component');
+    }
+
+    if (alternate) {
+      if (fallbackElement) {
+        if (React.isValidElement(fallbackElement)) {
+          return fallbackElement;
+        }
+      } else return <Text {..._alt}>{alt}</Text>;
+    }
+    return (
+      <StyledImage
+        source={renderedSource}
+        accessibilityLabel={alt}
+        alt={alt}
+        {...resolvedProps}
+        onError={onImageLoadError}
+        ref={ref}
+      />
+    );
+  })
+);
+
+interface ImageStatics {
+  getSize: typeof RNImage.prefetch;
+  prefetch: typeof RNImage.prefetch;
+  queryCache: typeof RNImage.queryCache;
+}
+const ImageWithStatics: typeof Image & ImageStatics = {
+  ...Image,
+  //@ts-ignore
+  getSize: RNImage.getSize,
+  prefetch: RNImage.prefetch,
+  queryCache: RNImage.queryCache,
+};
+
+export default ImageWithStatics;
+export type { IImageProps };

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

@@ -0,0 +1,50 @@
+import type { ImageProps, ImageSourcePropType } from 'react-native';
+import type { StyledProps } from '../../../theme/types';
+import type { ITextProps } from '../../primitives';
+import type { CustomProps, PlatformProps } from '../../types';
+
+export interface InterfaceImageProps
+  extends PlatformProps<IImageProps>,
+    Omit<
+      ImageProps,
+      | 'borderRadius'
+      | 'borderTopLeftRadius'
+      | 'borderTopRightRadius'
+      | 'borderBottomLeftRadius'
+      | 'borderBottomRightRadius'
+      | 'height'
+      | 'width'
+      | 'source'
+    >,
+    StyledProps {
+  /**
+   * specify a source for image.
+   */
+  source?: ImageSourcePropType;
+  /**
+   * The alt text that describes the image. This will be added as accessibilityLabel in android/iOS and alt on web
+   */
+  alt?: string;
+  /**
+   * In event there was an error loading the src, specify a fallback source.
+   */
+  fallbackSource?: ImageSourcePropType;
+  /**
+   * Opt out of the fallbackSource logic and show alternative text
+   */
+  ignoreFallback?: boolean;
+  /**
+   * Text styling for alt.
+   */
+  _alt?: Partial<ITextProps>;
+  /**
+   * In event there was an error loading the src, specify a fallback JSX Element.
+   */
+  fallbackElement?: JSX.Element | JSX.Element[];
+  /**
+   * specify a source for image.
+   */
+  src?: string;
+}
+
+export type IImageProps = InterfaceImageProps & CustomProps<'Image'>;

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

@@ -0,0 +1,161 @@
+import React, { memo, forwardRef } from 'react';
+import type { IInputProps } from './types';
+import { TextInput } from 'react-native';
+import { useToken } from '../../../hooks';
+import { useFormControl } from '../../composites/FormControl';
+import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+import { useHover } from '@react-native-aria/interactions';
+import { extractInObject, stylingProps } from '../../../theme/tools/utils';
+import { usePropsResolution } from '../../../hooks/useThemeProps';
+import { mergeRefs } from '../../../utils';
+import { Stack } from '../Stack';
+import { makeStyledComponent } from '../../../utils/styled';
+import { useResolvedFontFamily } from '../../../hooks/useResolvedFontFamily';
+
+const StyledInput = makeStyledComponent(TextInput);
+
+const Input = (
+  {
+    isHovered: isHoveredProp,
+    isFocused: isFocusedProp,
+    onKeyPress,
+    ...props
+  }: IInputProps,
+  ref: any
+) => {
+  const inputProps = useFormControl({
+    isDisabled: props.isDisabled,
+    isInvalid: props.isInvalid,
+    isReadOnly: props.isReadOnly,
+    isRequired: props.isRequired,
+    nativeID: props.nativeID,
+  });
+  const [isFocused, setIsFocused] = React.useState(false);
+  const handleFocus = (focusState: boolean, callback: any) => {
+    setIsFocused(focusState);
+    callback();
+  };
+
+  /**Converting into Hash Color Code */
+  //@ts-ignore
+  props.focusOutlineColor = useToken('colors', props.focusOutlineColor);
+  //@ts-ignore
+  props.invalidOutlineColor = useToken('colors', props.invalidOutlineColor);
+
+  const _ref = React.useRef(null);
+  const { isHovered } = useHover({}, _ref);
+
+  const inputThemeProps = {
+    isDisabled: inputProps.disabled,
+    isInvalid: inputProps.accessibilityInvalid,
+    isReadOnly: inputProps.accessibilityReadOnly,
+    isRequired: inputProps.required,
+  };
+
+  const {
+    ariaLabel,
+    accessibilityLabel,
+    type,
+    isFullWidth,
+    isDisabled,
+    isReadOnly,
+    fontFamily,
+    fontWeight,
+    fontStyle,
+    placeholderTextColor,
+    selectionColor,
+    underlineColorAndroid,
+    InputLeftElement,
+    InputRightElement,
+    leftElement,
+    rightElement,
+    onFocus,
+    onBlur,
+    wrapperRef,
+    _stack,
+    _input,
+
+    ...resolvedProps
+  } = usePropsResolution(
+    'Input',
+    {
+      ...inputThemeProps,
+      ...props,
+    },
+    {
+      isDisabled: inputThemeProps.isDisabled,
+      isHovered: isHoveredProp || isHovered,
+      isFocused: isFocusedProp || isFocused,
+      isInvalid: inputThemeProps.isInvalid,
+      isReadOnly: inputThemeProps.isReadOnly,
+    }
+  );
+
+  const [layoutProps, nonLayoutProps] = extractInObject(resolvedProps, [
+    ...stylingProps.margin,
+    ...stylingProps.border,
+    ...stylingProps.layout,
+    ...stylingProps.flexbox,
+    ...stylingProps.position,
+    ...stylingProps.background,
+    'shadow',
+    'opacity',
+  ]);
+
+  const resolvedFontFamily = useResolvedFontFamily({
+    fontFamily,
+    fontWeight: fontWeight ?? 400,
+    fontStyle: fontStyle ?? 'normal',
+  });
+  const resolvedPlaceholderTextColor = useToken('colors', placeholderTextColor);
+  const resolvedSelectionColor = useToken('colors', selectionColor);
+  const resolvedUnderlineColorAndroid = useToken(
+    'colors',
+    underlineColorAndroid
+  );
+  //TODO: refactor for responsive prop
+  if (useHasResponsiveProps(props)) {
+    return null;
+  }
+
+  return (
+    <Stack
+      {..._stack}
+      {...layoutProps}
+      ref={mergeRefs([_ref, wrapperRef])}
+      isFocused={isFocused}
+    >
+      {InputLeftElement || leftElement ? InputLeftElement || leftElement : null}
+      <StyledInput
+        {...inputProps}
+        secureTextEntry={type === 'password'}
+        accessible
+        accessibilityLabel={ariaLabel || accessibilityLabel}
+        editable={isDisabled || isReadOnly ? false : true}
+        w={isFullWidth ? '100%' : undefined}
+        {...nonLayoutProps}
+        {...resolvedFontFamily}
+        placeholderTextColor={resolvedPlaceholderTextColor}
+        selectionColor={resolvedSelectionColor}
+        underlineColorAndroid={resolvedUnderlineColorAndroid}
+        onKeyPress={(e: any) => {
+          e.persist();
+          onKeyPress && onKeyPress(e);
+        }}
+        onFocus={(e: any) => {
+          handleFocus(true, onFocus ? () => onFocus(e) : () => {});
+        }}
+        onBlur={(e: any) => {
+          handleFocus(false, onBlur ? () => onBlur(e) : () => {});
+        }}
+        {..._input}
+        ref={mergeRefs([ref, _ref, wrapperRef])}
+      />
+      {InputRightElement || rightElement
+        ? InputRightElement || rightElement
+        : null}
+    </Stack>
+  );
+};
+
+export default memo(forwardRef(Input));

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

@@ -0,0 +1,34 @@
+import React, { memo, forwardRef } from 'react';
+import { default as Box, IBoxProps } from '../Box';
+import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+import { usePropsResolution } from '../../../hooks/useThemeProps/usePropsResolution';
+
+export const InputLeftAddon = memo(
+  //@r
+  forwardRef((props: IBoxProps, ref?: any) => {
+    const resolvedProps = usePropsResolution('InputLeftAddon', props);
+    //TODO: refactor for responsive prop
+    if (useHasResponsiveProps(props)) {
+      return null;
+    }
+    return (
+      <Box {...resolvedProps} ref={ref}>
+        {props.children}
+      </Box>
+    );
+  })
+);
+export const InputRightAddon = memo(
+  forwardRef((props: IBoxProps, ref?: any) => {
+    const resolvedProps = usePropsResolution('InputRightAddon', props);
+    //TODO: refactor for responsive prop
+    if (useHasResponsiveProps(props)) {
+      return null;
+    }
+    return (
+      <Box {...resolvedProps} ref={ref}>
+        {props.children}
+      </Box>
+    );
+  })
+);