react-native-acoustic-connect-beta 16.0.41 → 18.0.7

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

@@ -1,149 +0,0 @@
-import React, { memo, forwardRef } from 'react';
-import Spinner from '../Spinner';
-import { usePropsResolution } from '../../../hooks/useThemeProps';
-import { default as Box, IBoxProps } from '../Box';
-import HStack from '../Stack/HStack';
-import { Pressable } from '../Pressable';
-import type { IButtonProps } from './types';
-import { composeEventHandlers } from '../../../utils';
-import {
-  useHover,
-  useFocus,
-  useIsPressed,
-} from '../../primitives/Pressable/Pressable';
-import { useFocusRing } from '@react-native-aria/focus';
-import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
-
-const Button = (
-  {
-    //@ts-ignore
-    children,
-    startIcon,
-    rightIcon,
-    leftIcon,
-    endIcon,
-    spinner,
-    isDisabled,
-    isLoading,
-    isHovered: isHoveredProp,
-    isPressed: isPressedProp,
-    isFocused: isFocusedProp,
-    isFocusVisible: isFocusVisibleProp,
-    spinnerPlacement = 'start',
-    ...props
-  }: IButtonProps & IBoxProps,
-  ref: any
-) => {
-  const { hoverProps, isHovered } = useHover();
-  const { pressableProps, isPressed } = useIsPressed();
-  const { focusProps, isFocused } = useFocus();
-  const { isFocusVisible, focusProps: focusRingProps }: any = useFocusRing();
-
-  const {
-    onPressIn,
-    onPressOut,
-    onHoverIn,
-    onHoverOut,
-    onFocus,
-    onBlur,
-    _text,
-    _stack,
-    _spinner,
-    isLoadingText,
-    _icon,
-    ...resolvedProps
-  } = usePropsResolution('Button', props, {
-    isDisabled,
-    isHovered: isHoveredProp || isHovered,
-    isFocused: isFocusedProp || isFocused,
-    isPressed: isPressedProp || isPressed,
-    isLoading,
-    isFocusVisible: isFocusVisibleProp || isFocusVisible,
-  });
-
-  //TODO: refactor for responsive prop
-  if (useHasResponsiveProps(props)) {
-    return null;
-  }
-
-  if (leftIcon) {
-    startIcon = leftIcon;
-  }
-  if (rightIcon) {
-    endIcon = rightIcon;
-  }
-  if (endIcon && React.isValidElement(endIcon)) {
-    endIcon = React.Children.map(
-      endIcon,
-      (child: JSX.Element, index: number) => {
-        return React.cloneElement(child, {
-          key: `button-end-icon-${index}`,
-          ..._icon,
-          ...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}`,
-          ..._icon,
-          ...child.props,
-        });
-      }
-    );
-  }
-
-  const spinnerElement = spinner ? (
-    spinner
-  ) : (
-    <Spinner color={_text?.color} {..._spinner} />
-  );
-
-  const boxChildren = (child: any) => {
-    return child ? <Box _text={_text}>{child}</Box> : null;
-  };
-
-  return (
-    <Pressable
-      disabled={isDisabled || isLoading}
-      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
-      )}
-      {...resolvedProps}
-      accessibilityRole={props.accessibilityRole ?? 'button'}
-    >
-      <HStack {..._stack} test={true}>
-        {startIcon && !isLoading ? startIcon : null}
-        {isLoading && spinnerPlacement === 'start' ? spinnerElement : null}
-        {isLoading
-          ? isLoadingText
-            ? boxChildren(isLoadingText)
-            : null
-          : boxChildren(children)}
-
-        {endIcon && !isLoading ? endIcon : null}
-        {isLoading && spinnerPlacement === 'end' ? spinnerElement : null}
-      </HStack>
-    </Pressable>
-  );
-};
-
-export default memo(forwardRef(Button));

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

@@ -1,93 +0,0 @@
-import React, { memo, forwardRef } from 'react';
-import type { IButtonGroupProps } from './types';
-import { usePropsResolution } from '../../../hooks/useThemeProps';
-import { Stack } from '../Stack';
-import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
-
-export default memo(
-  forwardRef(
-    (
-      { children, divider, variant, ...props }: IButtonGroupProps,
-      ref?: any
-    ) => {
-      const {
-        space,
-        direction,
-
-        size,
-        colorScheme,
-        isDisabled,
-        isAttached,
-        ...newProps
-      } = usePropsResolution('ButtonGroup', props);
-
-      const { borderRadius } = usePropsResolution('Button', props);
-      let computedChildren: JSX.Element | JSX.Element[];
-
-      if (Array.isArray(children)) {
-        computedChildren = React.Children.map(
-          children,
-          (child: JSX.Element, index: number) => {
-            return React.cloneElement(child, {
-              key: `button-group-child-${index}`,
-              variant,
-              size,
-              colorScheme,
-              isDisabled,
-
-              // when buttons are attached, remove rounded corners of all buttons except extreme buttons
-              ...(isAttached ? { borderRadius: 0 } : {}),
-              ...(isAttached && index === 0
-                ? direction === 'column'
-                  ? { borderTopRadius: borderRadius }
-                  : { borderLeftRadius: borderRadius }
-                : {}),
-              ...(isAttached && index === children?.length - 1
-                ? direction === 'column'
-                  ? { borderBottomRadius: borderRadius }
-                  : { borderRightRadius: borderRadius }
-                : {}),
-
-              //when buttons are attached, remove double border from them, just keep borderRight in case for direction row and borderBottom in case of direction column for every component
-              ...(isAttached && index !== 0
-                ? direction === 'column'
-                  ? { borderTopWidth: 0 }
-                  : { borderLeftWidth: 0 }
-                : {}),
-              ...child.props,
-            });
-          }
-        );
-      } else {
-        computedChildren = React.Children.map(
-          children,
-          (child: JSX.Element, index: number) => {
-            return React.cloneElement(child, {
-              key: `button-group-child-${index}`,
-              variant,
-              size,
-              colorScheme,
-              isDisabled,
-              ...child.props,
-            });
-          }
-        );
-      }
-      //TODO: refactor for responsive prop
-      if (useHasResponsiveProps(props)) {
-        return null;
-      }
-      return (
-        <Stack
-          divider={divider}
-          space={isAttached ? 0 : space}
-          direction={direction}
-          {...newProps}
-          ref={ref}
-        >
-          {computedChildren}
-        </Stack>
-      );
-    }
-  )
-);

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

@@ -1,12 +0,0 @@
-import ButtonMain from './Button';
-import ButtonGroup from './ButtonGroup';
-import type { IButtonComponentType } from './types';
-
-const ButtonTemp: any = ButtonMain;
-ButtonTemp.Group = ButtonGroup;
-
-// To add typings
-const Button = ButtonTemp as IButtonComponentType;
-
-export { Button };
-export type { IButtonGroupProps, IButtonProps } from './types';

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

@@ -1,185 +0,0 @@
-import type { ITextProps } from './../Text/types';
-import type { IStackProps } from '../Stack';
-import type { ResponsiveValue } from '../../types';
-import type { MutableRefObject } from 'react';
-import type { ISizes } from '../../../theme/base/sizes';
-import type {
-  ThemeComponentSizeType,
-  CustomProps,
-  VariantType,
-  // VariantType,
-  // VariantTypeTest,
-} from '../../../components/types/utils';
-import type { ISpinnerProps } from '../Spinner/types';
-import type { IIconProps } from '../Icon';
-import type { InterfacePressableProps } from '../Pressable/types';
-import type { ColorSchemeType } from '../../../components/types';
-
-// const myFunction = ({ a, b }) => {
-//   return { a: a, b: b };
-// };
-
-// type returnType = ReturnType<typeof myFunction>;
-// type parameter = Parameters<typeof myFunction>[0];
-
-// type newparameter = keyof parameter;
-// const a: parameter =
-// type parameter = Para<typeof myFunction>;
-// type buttonVariant = VariantTypeTest<'Button'>;
-// Todo: Create underscore Props section on docs.
-// _hover?: IButtonProps;
-
-export interface InterfaceButtonProps
-  extends InterfacePressableProps<IButtonProps> {
-  /**
-   * The color of the radio when it's checked. This should be one of the color keys in the theme (e.g."green", "red").
-   * @default 'primary'
-   */
-  colorScheme?: ColorSchemeType;
-  /**
-   * The variant of the button style to use.
-   * @default 'solid'
-   */
-  variant?: VariantType<'Button'>;
-  /**
-   * If true, the button will show a spinner.
-   */
-  isLoading?: boolean;
-  /**
-   * If true, the button will be in hovered state.
-   */
-  isHovered?: boolean;
-  /**
-   * If true, the button will be in pressed state.
-   */
-  isPressed?: boolean;
-  /**
-   * If true, the button will be focused.
-   */
-  isFocused?: boolean;
-  /**
-   * If true, the button focus ring will be visible.
-   */
-  isFocusVisible?: boolean;
-  /**
-   * The size of the button.
-   */
-  size?: ThemeComponentSizeType<'Button'>;
-  // size?: SizeType;
-  /**
-   * The start icon element to use in the button.
-   */
-  startIcon?: JSX.Element | Array<JSX.Element>;
-  /**
-   * The end icon element to use in the button.
-   */
-  endIcon?: JSX.Element | Array<JSX.Element>;
-  /**
-   * The end icon element to use in the button.
-   */
-  isLoadingText?: string;
-  /**
-   * The spinner element to use when isLoading is set to true.
-   */
-  spinner?: JSX.Element;
-  /**
-   * If true, the button will be disabled.
-   */
-  isDisabled?: boolean;
-  /**
-   * Props to style the child text
-   */
-  _text?: Partial<ITextProps>;
-  /**
-   * Props to be passed to the HStack used inside of Button.
-   */
-  _stack?: Partial<IStackProps>;
-  /**
-   * Props to be passed to the Icon used inside of Button.
-   */
-  _icon?: Partial<IIconProps>;
-  /**
-   * Prop to decide placement of spinner.
-   */
-  spinnerPlacement?: 'start' | 'end';
-  /**
-   * Props to be passed to the button when isLoading is true.
-   */
-  _loading?: Omit<Partial<IButtonProps>, '_loading'>;
-  /**
-   * Props to be passed to the button when button is disabled.
-   */
-  _disabled?: Omit<Partial<IButtonProps>, '_disable'>;
-  /**
-   * Props to be passed to the spinner when isLoading is true.
-   */
-  _spinner?: Partial<ISpinnerProps>;
-  /**
-   * Props to be passed to the button when button is hovered.
-   */
-  _hover?: Omit<Partial<IButtonProps>, '_hover'>;
-  /**
-   * Props to be passed to the button when button is pressed.
-   */
-  _pressed?: Omit<Partial<IButtonProps>, '_pressed'>;
-  /**
-   * Props to be passed to the button when button is focused.
-   */
-  _focus?: Omit<Partial<IButtonProps>, '_focus'>;
-  /**
-   * The right icon element to use in the button.
-   */
-  rightIcon?: JSX.Element | Array<JSX.Element>;
-  /**
-   * The left icon element to use in the button.
-   */
-  leftIcon?: JSX.Element | Array<JSX.Element>;
-}
-
-export interface IButtonGroupProps extends IStackProps {
-  /**
-   * The direction of the Stack Items.
-   * @default row
-   */
-  direction?: 'column' | 'row';
-  /**
-   *
-   */
-  children: JSX.Element | Array<JSX.Element>;
-  /**
-   * The variant of the button style to use.
-   * @default 'solid'
-   */
-  variant?: ResponsiveValue<
-    'ghost' | 'outline' | 'solid' | 'link' | 'unstyled' | 'subtle'
-  >;
-  /**
-   * The start icon element to use in the button.
-   */
-
-  size?: ResponsiveValue<ISizes | (string & {}) | number>;
-
-  /**
-   * The color of the radio when it's checked. This should be one of the color keys in the theme (e.g."green", "red").
-   * @default 'primary'
-   */
-  colorScheme?: ColorSchemeType;
-  /**
-   * If true, the button will be disabled.
-   */
-  isDisabled?: boolean;
-  /**
-   * If true, button will be atttached together.
-   */
-  isAttached?: boolean;
-}
-
-export type IButtonComponentType = ((
-  props: IButtonProps & { ref?: MutableRefObject<any> }
-) => JSX.Element) & {
-  Group: React.MemoExoticComponent<
-    (props: IButtonGroupProps & { ref?: MutableRefObject<any> }) => JSX.Element
-  >;
-};
-
-export type IButtonProps = InterfaceButtonProps & CustomProps<'Button'>;

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

@@ -1,206 +0,0 @@
-import React, { useContext, memo, forwardRef } from 'react';
-import { Pressable, IPressableProps } from '../Pressable';
-import { usePropsResolution } from '../../../hooks/useThemeProps';
-import { Center } from '../../composites/Center';
-import { useFormControlContext } from '../../composites/FormControl';
-import Box from '../Box';
-import { mergeRefs } from './../../../utils';
-import type { ICheckboxProps } from './types';
-import { useToggleState } from '@react-stately/toggle';
-import { CheckboxGroupContext } from './CheckboxGroup';
-import { useCheckbox, useCheckboxGroupItem } from '@react-native-aria/checkbox';
-import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
-import { composeEventHandlers, combineContextAndProps } from '../../../utils';
-import { extractInObject, stylingProps } from '../../../theme/tools/utils';
-import {
-  useHover,
-  useFocus,
-  useIsPressed,
-} from '../../primitives/Pressable/Pressable';
-import SizedIcon from './SizedIcon';
-import { Stack } from '../Stack';
-import { wrapStringChild } from '../../../utils/wrapStringChild';
-
-const Checkbox = (
-  {
-    wrapperRef,
-    isHovered: isHoveredProp,
-    isPressed: isPressedProp,
-    isFocused: isFocusedProp,
-    ...props
-  }: ICheckboxProps,
-  ref: any
-) => {
-  const formControlContext = useFormControlContext();
-
-  const {
-    isInvalid,
-    isReadOnly,
-    isIndeterminate,
-    ...combinedProps
-  } = combineContextAndProps(formControlContext, props);
-
-  const checkboxGroupContext = useContext(CheckboxGroupContext);
-  const state = useToggleState({
-    ...combinedProps,
-    defaultSelected: combinedProps.defaultIsChecked,
-    isSelected: combinedProps.isChecked,
-  });
-  const _ref = React.useRef();
-  const mergedRef = mergeRefs([ref, _ref]);
-
-  // Swap hooks depending on whether this checkbox is inside a CheckboxGroup.
-  // This is a bit unorthodox. Typically, hooks cannot be called in a conditional,
-  // but since the checkbox won't move in and out of a group, it should be safe.
-  const { inputProps: groupItemInputProps } = checkboxGroupContext
-    ? // eslint-disable-next-line react-hooks/rules-of-hooks
-      useCheckboxGroupItem(
-        combinedProps,
-        checkboxGroupContext.state,
-        //@ts-ignore
-        mergedRef
-      )
-    : // eslint-disable-next-line react-hooks/rules-of-hooks
-      useCheckbox(
-        combinedProps,
-        state,
-        //@ts-ignore
-        mergedRef
-      );
-
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const inputProps = React.useMemo(() => groupItemInputProps, [
-    groupItemInputProps.checked,
-    groupItemInputProps.disabled,
-  ]);
-
-  const [contextCombinedProps] = React.useState({
-    ...checkboxGroupContext,
-    ...combinedProps,
-  });
-  return (
-    <CheckboxComponent
-      inputProps={inputProps}
-      combinedProps={contextCombinedProps}
-      isInvalid={isInvalid}
-      isReadOnly={isReadOnly}
-      isIndeterminate={isIndeterminate}
-      isHovered={isHoveredProp}
-      isPressed={isPressedProp}
-      isFocused={isFocusedProp}
-      wrapperRef={wrapperRef}
-    />
-  );
-};
-const CheckboxComponent = React.memo(
-  ({
-    wrapperRef,
-    inputProps,
-    combinedProps,
-    isInvalid,
-    isReadOnly,
-    isIndeterminate,
-    isHovered: isHoveredProp,
-    isPressed: isPressedProp,
-    isFocused: isFocusedProp,
-  }: any) => {
-    const _ref = React.useRef();
-    const { hoverProps, isHovered } = useHover();
-    const { pressableProps, isPressed } = useIsPressed();
-    const { focusProps, isFocused } = useFocus();
-
-    const { checked: isChecked, disabled: isDisabled } = inputProps;
-
-    const {
-      icon,
-      _interactionBox,
-      _icon,
-      _stack,
-      _text,
-      onPress,
-      onPressIn,
-      onPressOut,
-      onHoverIn,
-      onHoverOut,
-      onFocus,
-      onBlur,
-      ...resolvedProps
-    } = usePropsResolution(
-      'Checkbox',
-      { ...combinedProps, ...inputProps },
-      {
-        isInvalid,
-        isReadOnly,
-        isIndeterminate,
-        isDisabled,
-        isChecked,
-        isHovered: isHoveredProp || isHovered,
-        isPressed: isPressedProp || isPressed,
-        isFocused: isFocusedProp || isFocused,
-      }
-    );
-
-    const [layoutProps, nonLayoutProps] = extractInObject(resolvedProps, [
-      ...stylingProps.margin,
-      ...stylingProps.layout,
-      ...stylingProps.flexbox,
-      ...stylingProps.position,
-      '_text',
-    ]);
-
-    const [
-      accessibilityProps,
-      nonAccessibilityProps,
-    ] = extractInObject(nonLayoutProps, [
-      'accessibilityRole',
-      'accessibilityState',
-    ]);
-
-    //TODO: refactor for responsive prop
-    if (useHasResponsiveProps(resolvedProps)) {
-      return null;
-    }
-
-    return (
-      <Pressable
-        disabled={isDisabled}
-        {...(pressableProps as IPressableProps)}
-        {...accessibilityProps}
-        onPress={onPress}
-        ref={mergeRefs([_ref, wrapperRef])}
-        accessibilityRole="checkbox"
-        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.onFocu
-        )}
-        // @ts-ignore - web only
-        onBlur={composeEventHandlers(
-          composeEventHandlers(onBlur, focusProps.onBlur)
-          // focusRingProps.onBlur
-        )}
-      >
-        <Stack {...layoutProps} {..._stack}>
-          <Center>
-            {/* Interaction Wrapper */}
-            <Box {..._interactionBox} />
-            {/* Checkbox */}
-            <Center {...nonAccessibilityProps}>
-              <SizedIcon icon={icon} _icon={_icon} isChecked={isChecked} />
-            </Center>
-          </Center>
-          {/* Label */}
-          {wrapStringChild(combinedProps.children, _text)}
-        </Stack>
-      </Pressable>
-    );
-  }
-);
-
-export default memo(forwardRef(Checkbox));