react-native-acoustic-connect-beta 16.0.0

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

@@ -0,0 +1,165 @@
+import type { ColorValue } from 'react-native';
+import type { InterfaceBoxProps } from '../../primitives/Box';
+import type { IIconButtonProps } from '../../composites/IconButton';
+import type { MutableRefObject } from 'react';
+
+export type IPopoverArrowProps = {
+  height?: number;
+  width?: number;
+  color?: ColorValue;
+} & InterfaceBoxProps;
+
+export type IPopoverArrowImplProps = {
+  placement?: string;
+  arrowProps: IArrowProps;
+  height: number;
+  width: number;
+} & IPopoverArrowProps;
+
+export type IArrowProps = {
+  style: Object;
+};
+
+export interface InterfacePopoverProps {
+  /**
+   * If true, the popover will be opened by default
+   */
+  defaultIsOpen?: boolean;
+  /**
+   * Whether the popover is opened. Useful for conrolling the open state
+   */
+  isOpen?: boolean;
+  /**
+   * Whether popover should trap focus.
+   * @default true
+   */
+  trapFocus?: boolean;
+  /**
+   * Whether the element should flip its orientation (e.g. top to bottom or left to right) when there is insufficient room for it to render completely.
+   * @default true
+   */
+  shouldFlip?: boolean;
+  /**
+   * The ref of element to receive focus when the popover opens.
+   */
+  initialFocusRef?: React.RefObject<any>;
+  /**
+   * The ref of element to receive focus when the modal closes.
+   */
+  finalFocusRef?: React.RefObject<any>;
+  /**
+   * Function that returns a React Element. This element will be used as a Trigger for the popover
+   */
+  trigger: (_props: any, state: { open: boolean }) => JSX.Element;
+  /**
+   * The additional offset applied along the cross axis between the element and its trigger element.
+   */
+  crossOffset?: number;
+  /**
+   * The additional offset applied along the main axis between the element and its trigger element.
+   */
+  offset?: number;
+  /**
+   * Determines whether menu content should overlap with the trigger
+   * @default false
+   */
+  shouldOverlapWithTrigger?: boolean;
+  /**
+   * Popover children
+   */
+  children: React.ReactNode;
+  /**
+   * If true, the modal will close when Escape key is pressed
+   * @default true
+   */
+  isKeyboardDismissable?: boolean;
+  /**
+   * Popover placement
+   * @default bottom
+   */
+  placement?:
+    | 'top'
+    | 'bottom'
+    | 'left'
+    | 'right'
+    | 'top left'
+    | 'top right'
+    | 'bottom left'
+    | 'bottom right'
+    | 'right top'
+    | 'right bottom'
+    | 'left top'
+    | 'left bottom';
+  /**
+   * This function will be invoked when popover is closed. It'll also be called when user attempts to close the popover via Escape key or backdrop press.
+   */
+  onClose?: () => void;
+  /**
+   * This function will be invoked when popover is opened
+   */
+  onOpen?: () => void;
+}
+
+export type IPopoverContentImpl = {
+  arrowHeight: number;
+  arrowWidth: number;
+  placement?: string;
+  arrowProps: IArrowProps;
+  children: any;
+};
+
+export type IPopoverImplProps = IPopoverProps & {
+  triggerRef: any;
+};
+
+export type IArrowStyles = {
+  placement?: string;
+  height?: number;
+  width?: number;
+};
+
+export type IScrollContentStyle = {
+  placement?: string;
+  arrowHeight: number;
+  arrowWidth: number;
+};
+
+export interface IPopoverContentProps
+  extends InterfaceBoxProps<IPopoverContentProps> {}
+
+export type IPopoverComponentType = ((
+  props: IPopoverProps & { ref?: MutableRefObject<any> }
+) => JSX.Element & { ref?: MutableRefObject<any> }) & {
+  Body: React.MemoExoticComponent<
+    (
+      props: InterfaceBoxProps<IPopoverProps> & { ref?: MutableRefObject<any> }
+    ) => JSX.Element
+  >;
+  CloseButton: React.MemoExoticComponent<
+    (
+      props: Omit<IIconButtonProps, 'icon'> & { ref?: MutableRefObject<any> }
+    ) => JSX.Element
+  >;
+  Content: React.MemoExoticComponent<
+    (
+      props: IPopoverContentProps & { ref?: MutableRefObject<any> }
+    ) => JSX.Element
+  >;
+  Footer: React.MemoExoticComponent<
+    (
+      props: InterfaceBoxProps<IPopoverProps> & { ref?: MutableRefObject<any> }
+    ) => JSX.Element
+  >;
+  Header: React.MemoExoticComponent<
+    (
+      props: InterfaceBoxProps<IPopoverProps> & { ref?: MutableRefObject<any> }
+    ) => JSX.Element
+  >;
+  Arrow: React.MemoExoticComponent<
+    (
+      props: InterfaceBoxProps<IPopoverProps> & { ref?: MutableRefObject<any> }
+    ) => JSX.Element
+  >;
+};
+
+export type IPopoverProps = InterfacePopoverProps;

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

@@ -0,0 +1,290 @@
+import React from 'react';
+import { useOverlayPosition } from '@react-native-aria/overlays';
+import { StyleSheet, View, ViewStyle } from 'react-native';
+import type {
+  IPopperProps,
+  IScrollContentStyle,
+  IArrowStyles,
+  IPopoverArrowProps,
+} from './types';
+import { createContext } from '../../../utils';
+import Box, { IBoxProps } from '../../primitives/Box';
+// import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+
+const defaultArrowHeight = 15;
+const defaultArrowWidth = 15;
+
+const getDiagonalLength = (height: number, width: number) => {
+  return Math.pow(height * height + width * width, 0.5);
+};
+
+type PopperContext = IPopperProps & {
+  triggerRef: any;
+  onClose: any;
+  setOverlayRef?: (overlayRef: any) => void;
+};
+
+const [PopperProvider, usePopperContext] = createContext<PopperContext>(
+  'PopperContext'
+);
+
+const Popper = (
+  props: IPopperProps & {
+    triggerRef: any;
+    onClose: any;
+    setOverlayRef?: (overlayRef: any) => void;
+  }
+) => {
+  return <PopperProvider {...props}>{props.children}</PopperProvider>;
+};
+
+const PopperContent = React.forwardRef(
+  ({ children, style, ...rest }: IBoxProps & { isOpen: boolean }, ref: any) => {
+    const {
+      triggerRef,
+      shouldFlip,
+      crossOffset,
+      offset,
+      placement: placementProp,
+      onClose,
+      shouldOverlapWithTrigger,
+      setOverlayRef,
+    } = usePopperContext('PopperContent');
+    const overlayRef = React.useRef(null);
+
+    // const { top } = useSafeAreaInsets();
+    const {
+      overlayProps,
+      rendered,
+      arrowProps,
+      placement,
+    } = useOverlayPosition({
+      targetRef: triggerRef,
+      overlayRef,
+      shouldFlip: shouldFlip,
+      crossOffset: crossOffset,
+      isOpen: rest.isOpen,
+      offset: offset,
+      placement: placementProp as any,
+      containerPadding: 0,
+      onClose: onClose,
+      shouldOverlapWithTrigger,
+    });
+
+    const restElements: React.ReactNode[] = [];
+    let arrowElement: React.ReactElement | null = null;
+
+    React.useEffect(() => {
+      setOverlayRef && setOverlayRef(overlayRef);
+    }, [overlayRef, setOverlayRef]);
+
+    // Might have performance impact if there are a lot of siblings!
+    // Shouldn't be an issue with popovers since it would have atmost 2. Arrow and Content.
+    React.Children.forEach(children, (child) => {
+      if (
+        React.isValidElement(child) &&
+        // @ts-ignore
+        child.type.displayName === 'PopperArrow'
+      ) {
+        arrowElement = React.cloneElement(child, {
+          // @ts-ignore
+          arrowProps,
+          actualPlacement: placement,
+        });
+      } else {
+        restElements.push(child);
+      }
+    });
+
+    let arrowHeight = 0;
+    let arrowWidth = 0;
+
+    if (arrowElement) {
+      arrowHeight = defaultArrowHeight;
+      arrowWidth = defaultArrowWidth;
+
+      //@ts-ignore
+      if (arrowElement.props.height) {
+        //@ts-ignore
+        arrowHeight = arrowElement.props.height;
+      }
+
+      //@ts-ignore
+      if (arrowElement.props.width) {
+        //@ts-ignore
+        arrowWidth = arrowElement.props.width;
+      }
+    }
+
+    const containerStyle = React.useMemo(
+      () =>
+        getContainerStyle({
+          placement,
+          arrowHeight,
+          arrowWidth,
+        }),
+      [arrowHeight, arrowWidth, placement]
+    );
+
+    const overlayStyle = React.useMemo(
+      () =>
+        StyleSheet.create({
+          overlay: {
+            ...overlayProps.style,
+            // To handle translucent android StatusBar
+            // marginTop: Platform.select({ android: top, default: 0 }),
+            opacity: rendered ? 1 : 0,
+            position: 'absolute',
+          },
+        }),
+      [rendered, overlayProps.style]
+    );
+    //TODO: refactor for responsive prop
+    if (useHasResponsiveProps(rest)) {
+      return null;
+    }
+
+    return (
+      <View ref={overlayRef} collapsable={false} style={overlayStyle.overlay}>
+        {arrowElement}
+        <Box
+          style={StyleSheet.flatten([containerStyle, style])}
+          {...rest}
+          ref={ref}
+        >
+          {restElements}
+        </Box>
+      </View>
+    );
+  }
+);
+
+// This is an internal implementation of PopoverArrow
+const PopperArrow = React.forwardRef(
+  (
+    {
+      height = defaultArrowHeight,
+      width = defaultArrowWidth,
+
+      //@ts-ignore - Will be passed by React.cloneElement from PopperContent
+      arrowProps,
+      //@ts-ignore - Will be passed by React.cloneElement from PopperContent
+      actualPlacement,
+      style,
+      borderColor = '#52525b',
+      backgroundColor = 'black',
+      ...rest
+    }: IPopoverArrowProps & IBoxProps<IPopoverArrowProps>,
+    ref: any
+  ) => {
+    const additionalStyles = React.useMemo(
+      () => getArrowStyles({ placement: actualPlacement, height, width }),
+      [actualPlacement, height, width]
+    );
+
+    const triangleStyle: ViewStyle = React.useMemo(
+      () => ({
+        position: 'absolute',
+        width,
+        height,
+      }),
+      [width, height]
+    );
+
+    const arrowStyles = React.useMemo(
+      () => [arrowProps.style, triangleStyle, additionalStyles, style],
+      [triangleStyle, additionalStyles, arrowProps.style, style]
+    );
+
+    return (
+      <Box
+        ref={ref}
+        style={arrowStyles}
+        borderColor={borderColor}
+        backgroundColor={backgroundColor}
+        zIndex={1}
+        {...rest}
+      />
+    );
+  }
+);
+
+const getArrowStyles = (props: IArrowStyles) => {
+  const additionalStyles: any = {
+    transform: [],
+  };
+
+  const diagonalLength = getDiagonalLength(
+    defaultArrowHeight,
+    defaultArrowHeight
+  );
+
+  if (props.placement === 'top' && props.width) {
+    additionalStyles.transform.push({ translateX: -props.width / 2 });
+    additionalStyles.transform.push({ rotate: '45deg' });
+    additionalStyles.bottom = Math.ceil(
+      (diagonalLength - defaultArrowHeight) / 2
+    );
+    additionalStyles.borderBottomWidth = 1;
+    additionalStyles.borderRightWidth = 1;
+  }
+
+  if (props.placement === 'bottom' && props.width) {
+    additionalStyles.transform.push({ translateX: -props.width / 2 });
+    additionalStyles.transform.push({ rotate: '45deg' });
+    additionalStyles.top = Math.ceil((diagonalLength - defaultArrowHeight) / 2);
+    additionalStyles.borderTopWidth = 1;
+    additionalStyles.borderLeftWidth = 1;
+  }
+
+  if (props.placement === 'left' && props.height) {
+    additionalStyles.transform.push({ translateY: -props.height / 2 });
+    additionalStyles.transform.push({ rotate: '45deg' });
+    additionalStyles.right = Math.ceil(
+      (diagonalLength - defaultArrowHeight) / 2
+    );
+    additionalStyles.borderTopWidth = 1;
+    additionalStyles.borderRightWidth = 1;
+  }
+
+  if (props.placement === 'right' && props.height) {
+    additionalStyles.transform.push({ translateY: -props.height / 2 });
+    additionalStyles.transform.push({ rotate: '45deg' });
+    additionalStyles.left = Math.ceil(
+      (diagonalLength - defaultArrowHeight) / 2
+    );
+    additionalStyles.borderBottomWidth = 1;
+    additionalStyles.borderLeftWidth = 1;
+  }
+
+  return additionalStyles;
+};
+
+const getContainerStyle = ({ placement, arrowHeight }: IScrollContentStyle) => {
+  const diagonalLength = getDiagonalLength(arrowHeight, arrowHeight) / 2;
+
+  if (placement === 'top') {
+    return { marginBottom: diagonalLength };
+  }
+
+  if (placement === 'bottom') {
+    return { marginTop: diagonalLength };
+  }
+
+  if (placement === 'left') {
+    return { marginRight: diagonalLength };
+  }
+
+  if (placement === 'right') {
+    return { marginLeft: diagonalLength };
+  }
+
+  return {};
+};
+
+PopperArrow.displayName = 'PopperArrow';
+Popper.Content = PopperContent;
+Popper.Arrow = PopperArrow;
+
+export { Popper };

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

@@ -0,0 +1 @@
+export { Popper } from './Popper';

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

@@ -0,0 +1,45 @@
+import type { ReactElement, RefObject } from 'react';
+
+export type IPopoverArrowProps = {
+  height?: any;
+  width?: any;
+  children?: any;
+  color?: any;
+  style?: any;
+};
+
+export type IPlacement =
+  | 'top'
+  | 'bottom'
+  | 'left'
+  | 'right'
+  | 'top left'
+  | 'top right'
+  | 'bottom left'
+  | 'bottom right'
+  | 'right top'
+  | 'right bottom'
+  | 'left top'
+  | 'left bottom';
+
+export type IPopperProps = {
+  shouldFlip?: boolean;
+  crossOffset?: number;
+  offset?: number;
+  children: React.ReactNode;
+  shouldOverlapWithTrigger?: boolean;
+  trigger?: ReactElement | RefObject<any>;
+  placement?: IPlacement;
+};
+
+export type IArrowStyles = {
+  placement?: string;
+  height?: number;
+  width?: number;
+};
+
+export type IScrollContentStyle = {
+  placement?: string;
+  arrowHeight: number;
+  arrowWidth: number;
+};

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

@@ -0,0 +1,93 @@
+import React, { memo, forwardRef } from 'react';
+import { Box } from '../../primitives';
+import type { InterfaceBoxProps } from '../../primitives/Box';
+import { usePropsResolution } from '../../../hooks/useThemeProps';
+import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+import type { ColorSchemeType } from '../../../components/types';
+import type {
+  CustomProps,
+  ThemeComponentSizeType,
+} from '../../../components/types';
+
+export interface InterfaceProgressProps
+  extends InterfaceBoxProps<IProgressProps> {
+  /**
+   * Value of Progress.
+   * @default 0
+   */
+  value?: number;
+  /**
+   * Defines height of Progress
+   * @default sm
+   */
+  size?: ThemeComponentSizeType<'Progress'>;
+
+  /**
+   * The color scheme of the progress. This should be one of the color keys in the theme (e.g."green", "red").
+   * @default primary
+   */
+  colorScheme?: ColorSchemeType;
+  // /**
+  //  * Whether progress is indeterminate
+  //  * @default false
+  //  */
+  // isIndeterminate?: boolean;
+  /**
+   * Pseudo prop to give Prop to filled track
+   */
+  _filledTrack?: InterfaceBoxProps<IProgressProps>;
+  /**
+   * Min progress value
+   * @default 0
+   */
+  min?: number;
+  /**
+   * Max progress value
+   * @default 100
+   */
+  max?: number;
+}
+
+export type IProgressProps = InterfaceProgressProps & CustomProps<'Progress'>;
+const Progress = (props: IProgressProps, ref?: any) => {
+  const {
+    min,
+    max,
+    value,
+    _filledTrack,
+    children,
+    ...resolvedProps
+  } = usePropsResolution('Progress', props);
+
+  //TODO: refactor for responsive prop
+  if (useHasResponsiveProps(props)) {
+    return null;
+  }
+
+  let valueWidth =
+    value < max && value > min
+      ? ((value - min) / (max - min)) * 100
+      : value > min
+      ? 100
+      : 0;
+
+  return (
+    <Box
+      {...resolvedProps}
+      ref={ref}
+      accessible
+      accessibilityRole="progressbar"
+      accessibilityValue={{
+        min: min,
+        max: max,
+        now: valueWidth,
+      }}
+    >
+      <Box w={`${valueWidth}%`} {..._filledTrack}>
+        {children}
+      </Box>
+    </Box>
+  );
+};
+
+export default memo(forwardRef(Progress));

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

@@ -0,0 +1,101 @@
+import React from 'react';
+import { Box, HStack, VStack } from '../../primitives';
+import type { ISimpleGridProps } from './types';
+// const isDebug = process.env.NODE_ENV !== 'production';
+import { useThemeProps } from '../../../hooks/useThemeProps';
+import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+
+const DEBUG_STYLES = false
+  ? {
+      rows: {
+        borderWidth: '1px',
+      },
+      cols: {
+        borderWidth: '1px',
+      },
+    }
+  : {
+      rows: {},
+      cols: {},
+    };
+
+const SimpleGrid = (props: ISimpleGridProps, ref?: any): JSX.Element => {
+  const {
+    columns,
+    space,
+    spacingX,
+    spacingY,
+    minChildWidth,
+    children,
+    ...remainingProps
+  } = useThemeProps('SimpleGrid', props);
+  //TODO: refactor for responsive prop
+  if (useHasResponsiveProps(props)) {
+    return <></>;
+  }
+  let cellSpacing = space ?? 0;
+  let cellSpacingX = spacingX ?? cellSpacing;
+  let cellSpacingY = spacingY ?? cellSpacing;
+
+  const childrenArray = React.Children.toArray(children);
+
+  if (columns) {
+    let rowSlices = [];
+    for (let i = 0; i < childrenArray.length; i = i + columns) {
+      rowSlices.push(childrenArray.slice(i, i + columns));
+    }
+
+    return (
+      <VStack
+        {...DEBUG_STYLES.rows}
+        space={cellSpacingY}
+        {...remainingProps}
+        ref={ref}
+      >
+        {rowSlices.map((row, rowIndex) => {
+          return (
+            <HStack space={cellSpacingX} key={rowIndex}>
+              {row.map((col: any) => {
+                return (
+                  <Box {...DEBUG_STYLES.cols} key={col.key}>
+                    {col}
+                  </Box>
+                );
+              })}
+            </HStack>
+          );
+        })}
+      </VStack>
+    );
+  }
+  // Needs more work for empty spacing i.e. auto-fit. Current workaround is to use wrap and let the columns be created dynamically
+  // https://css-tricks.com/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit/
+  else if (minChildWidth) {
+    return (
+      <Box
+        flexDirection="row"
+        flexWrap="wrap"
+        justifyContent="center"
+        {...remainingProps}
+        ref={ref}
+      >
+        {childrenArray.map((col: any) => {
+          return (
+            <Box
+              {...DEBUG_STYLES.cols}
+              mx={cellSpacingX}
+              my={cellSpacingY}
+              key={col.key}
+              minWidth={minChildWidth}
+            >
+              {col}
+            </Box>
+          );
+        })}
+      </Box>
+    );
+  }
+
+  return <></>;
+};
+export default React.memo(React.forwardRef(SimpleGrid));

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

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

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

@@ -0,0 +1,9 @@
+import type { InterfaceBoxProps } from '../../primitives/Box/types';
+
+export type ISimpleGridProps = InterfaceBoxProps<ISimpleGridProps> & {
+  space?: number;
+  columns?: number;
+  minChildWidth?: number;
+  spacingX?: number;
+  spacingY?: number;
+};