react-native-acoustic-connect-beta 16.0.0

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

@@ -0,0 +1,149 @@
+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

@@ -0,0 +1,93 @@
+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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,185 @@
+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

@@ -0,0 +1,206 @@
+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));