react-native-acoustic-connect-beta 16.0.0

package/Example/nativebase-v3-kitchensink/src/nb/NativeBase/src/utils/canUseDom.ts

@@ -0,0 +1,8 @@
+import { Platform } from 'react-native';
+
+export function canUseDom() {
+  if (typeof window !== 'undefined' || Platform.OS !== 'web') {
+    return true;
+  }
+  return false;
+}

package/Example/nativebase-v3-kitchensink/src/nb/NativeBase/src/utils/combineContextAndProps.ts

@@ -0,0 +1,6 @@
+export const combineContextAndProps = (context: any, props: any) => {
+  return {
+    ...context,
+    ...props,
+  };
+};

package/Example/nativebase-v3-kitchensink/src/nb/NativeBase/src/utils/createContext.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+
+function createContext<ContextValueType extends object>(
+  rootComponentName: string
+) {
+  const Context = React.createContext<ContextValueType>(null as any);
+
+  function Provider(props: ContextValueType & { children: React.ReactNode }) {
+    const { children, ...providerProps } = props;
+    // Only re-memoize when prop values change
+    const value = React.useMemo(
+      () => providerProps,
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      Object.values(providerProps)
+    ) as ContextValueType;
+    return <Context.Provider value={value}>{children}</Context.Provider>;
+  }
+
+  function useContext(consumerName: string) {
+    const context = React.useContext(Context);
+    if (context === null) {
+      throw new Error(
+        `\`${consumerName}\` must be used within \`${rootComponentName}\``
+      );
+    }
+    return context;
+  }
+
+  Provider.displayName = rootComponentName + 'Provider';
+  return [Provider, useContext] as const;
+}
+
+export { createContext };

package/Example/nativebase-v3-kitchensink/src/nb/NativeBase/src/utils/filterShadowProps.ts

@@ -0,0 +1,23 @@
+import { extractInObject } from './../theme/tools/';
+import isEmpty from 'lodash.isempty';
+
+export const filterShadowProps = (
+  props: any,
+  ignoredProps: any,
+  OS: string
+) => {
+  if (OS !== 'web') {
+    return { ...ignoredProps, ...props };
+  }
+  let style = ignoredProps.style ?? {};
+  let [shadowProps, remainingProps] = extractInObject(props, [
+    'shadowColor',
+    'shadowOffset',
+    'shadowOpacity',
+    'shadowRadius',
+  ]);
+  if (!isEmpty(shadowProps)) {
+    style = { ...style, ...shadowProps };
+  }
+  return { ...remainingProps, ...ignoredProps, style };
+};

package/Example/nativebase-v3-kitchensink/src/nb/NativeBase/src/utils/getAbsoluteChildren.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Platform } from 'react-native';
+
+const getAbsoluteChildren = (
+  children: JSX.Element[] | JSX.Element,
+  reverse?: boolean
+) => {
+  let childrenArray = React.Children.toArray(children);
+  if (reverse) {
+    childrenArray = childrenArray.reverse();
+  }
+  /*
+  | Add the position to the children
+  */
+  const trailingChildrenWithSpacing = childrenArray.map((child: any) => {
+    return React.cloneElement(
+      child,
+      Platform.OS === 'web'
+        ? { style: { position: 'absolute' } }
+        : { position: 'absolute' },
+      child.props.children
+    );
+  });
+  /*
+  | New children array with applied margin to trailing children
+  */
+  return [trailingChildrenWithSpacing];
+};
+
+export default getAbsoluteChildren;

package/Example/nativebase-v3-kitchensink/src/nb/NativeBase/src/utils/getAttachedChildren.ts

@@ -0,0 +1,49 @@
+import React from 'react';
+
+const getAttachedChildren = (children: any) => {
+  const childrenArray: any = React.Children.toArray(children);
+  /*
+  | Separate the trailing (not first) children from the children array
+  */
+
+  if (childrenArray.length <= 1) {
+    return childrenArray;
+  }
+
+  const trailingChildren = childrenArray.slice(1);
+  trailingChildren.pop();
+  const marginProp: object = {
+    ...{ ml: 0, mr: 0, roundedRight: 0, roundedLeft: 0 },
+  };
+  const leftElemProp: object = {
+    ...{ mr: 0, roundedRight: 0 },
+  };
+  const rightElemProp: object = {
+    ...{ ml: 0, roundedLeft: 0 },
+  };
+
+  /*
+  | Add the margiin to the children
+  */
+  const trailingChildrenWithSpacing = trailingChildren.map((child: any) => {
+    return React.cloneElement(child, marginProp, child.props.children);
+  });
+  /*
+  | New children array with applied margin to trailing children
+  */
+  return [
+    React.cloneElement(
+      childrenArray[0],
+      leftElemProp,
+      childrenArray[0].props.children
+    ),
+    ...trailingChildrenWithSpacing,
+    React.cloneElement(
+      childrenArray[childrenArray.length - 1],
+      rightElemProp,
+      childrenArray[childrenArray.length - 1].props.children
+    ),
+  ];
+};
+
+export default getAttachedChildren;

package/Example/nativebase-v3-kitchensink/src/nb/NativeBase/src/utils/getIndexedChildren.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+
+const getIndexedChildren = (
+  children: React.ReactNode,
+  startingIndex?: number
+) => {
+  let counter = startingIndex ? startingIndex - 1 : -1;
+  const indexedChildren = React.Children.map(children, (child: any) => {
+    counter++;
+    return React.cloneElement(
+      child,
+      {
+        index: counter,
+      },
+      child.props.children
+    );
+  });
+  return indexedChildren;
+};
+
+export default getIndexedChildren;

package/Example/nativebase-v3-kitchensink/src/nb/NativeBase/src/utils/getSpacedChildren.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import { default as Box } from '../components/primitives/Box';
+import type { SpaceType as ThemeSpaceType } from '../components/types';
+import { ResponsiveQueryContext } from './useResponsiveQuery/ResponsiveQueryProvider';
+
+type SpaceType =
+  | 'gutter'
+  | '2xs'
+  | 'xs'
+  | 'sm'
+  | 'md'
+  | 'lg'
+  | 'xl'
+  | '2xl'
+  | ThemeSpaceType;
+
+// Thanks @gregberge for code and @nandorojo for suggestion.
+// Original source: https://github.com/gregberge/react-flatten-children
+type ReactChildArray = ReturnType<typeof React.Children.toArray>;
+function flattenChildren(children: React.ReactNode): ReactChildArray {
+  const childrenArray = React.Children.toArray(children);
+  return childrenArray.reduce((flatChildren: ReactChildArray, child) => {
+    if ((child as React.ReactElement<any>).type === React.Fragment) {
+      return flatChildren.concat(
+        flattenChildren((child as React.ReactElement<any>).props.children)
+      );
+    }
+    flatChildren.push(child);
+    return flatChildren;
+  }, []);
+}
+
+const getSpacedChildren = (
+  children: JSX.Element[] | JSX.Element,
+  space: undefined | SpaceType,
+  axis: 'X' | 'Y',
+  reverse: string,
+  divider: JSX.Element | undefined
+): any => {
+  let childrenArray = React.Children.toArray(flattenChildren(children));
+  childrenArray =
+    reverse === 'reverse' ? [...childrenArray].reverse() : childrenArray;
+
+  const orientation = axis === 'X' ? 'vertical' : 'horizontal';
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const responsiveQueryContext = React.useContext(ResponsiveQueryContext);
+  const disableCSSMediaQueries = responsiveQueryContext.disableCSSMediaQueries;
+
+  // If there's a divider, we wrap it with a Box and apply vertical and horizontal margins else we add a spacer Box with height or width
+  if (divider) {
+    const spacingProp: object = {
+      ...(axis === 'X' ? { mx: space } : { my: space }),
+    };
+
+    divider = React.cloneElement(divider, {
+      orientation,
+      ...spacingProp,
+    });
+
+    childrenArray = childrenArray.map((child: any, index: number) => {
+      return (
+        <React.Fragment key={child.key ?? `spaced-child-${index}`}>
+          {child}
+          {index < childrenArray.length - 1 && divider}
+        </React.Fragment>
+      );
+    });
+  } else {
+    const spacingProp: object = {
+      ...(axis === 'X' ? { width: space } : { height: space }),
+    };
+    childrenArray = childrenArray.map((child: any, index: number) => {
+      return (
+        <React.Fragment key={child.key ?? `spaced-child-${index}`}>
+          {child}
+          {disableCSSMediaQueries ? (
+            index < childrenArray.length - 1 && <Box {...spacingProp} />
+          ) : (
+            <></>
+          )}
+        </React.Fragment>
+      );
+    });
+  }
+
+  return childrenArray;
+};
+
+export default getSpacedChildren;

package/Example/nativebase-v3-kitchensink/src/nb/NativeBase/src/utils/getUnit.ts

@@ -0,0 +1,78 @@
+export const getUnit = (str: string) => {
+  var units: string = '';
+
+  // Percentage
+  if (str.endsWith('%')) {
+    units = '%';
+    return units;
+  }
+
+  // Absolute Units
+  if (str.endsWith('px')) {
+    units = 'px';
+    return units;
+  }
+  if (str.endsWith('cm')) {
+    units = 'cm';
+    return units;
+  }
+  if (str.endsWith('mm')) {
+    units = 'mm';
+    return units;
+  }
+  if (str.endsWith('Q')) {
+    units = 'Q';
+    return units;
+  }
+  if (str.endsWith('in')) {
+    units = 'in';
+    return units;
+  }
+  if (str.endsWith('pc')) {
+    units = 'pc';
+    return units;
+  }
+  if (str.endsWith('pt')) {
+    units = 'pt';
+    return units;
+  }
+
+  // Relative Units
+  if (str.endsWith('em')) {
+    units = 'em';
+    return units;
+  }
+  if (str.endsWith('ex')) {
+    units = 'ex';
+    return units;
+  }
+  if (str.endsWith('ch')) {
+    units = 'ch';
+    return units;
+  }
+  if (str.endsWith('rem')) {
+    units = 'rem';
+    return units;
+  }
+  if (str.endsWith('lh')) {
+    units = 'lh';
+    return units;
+  }
+  if (str.endsWith('vw')) {
+    units = 'vw';
+    return units;
+  }
+  if (str.endsWith('vh')) {
+    units = 'vh';
+    return units;
+  }
+  if (str.endsWith('vmin')) {
+    units = 'vmin';
+    return units;
+  }
+  if (str.endsWith('vmax')) {
+    units = 'vmax';
+    return units;
+  }
+  return 'px';
+};

package/Example/nativebase-v3-kitchensink/src/nb/NativeBase/src/utils/index.ts

@@ -0,0 +1,21 @@
+import getSpacedChildren from './getSpacedChildren';
+import getAbsoluteChildren from './getAbsoluteChildren';
+import getAttachedChildren from './getAttachedChildren';
+import { addTextAndPropsToStrings } from './addTextAndPropsToStrings';
+import { canUseDom } from './canUseDom';
+import { mergeRefs, composeEventHandlers } from './mergeRefs';
+export {
+  getSpacedChildren,
+  getAbsoluteChildren,
+  getAttachedChildren,
+  addTextAndPropsToStrings,
+  canUseDom,
+  mergeRefs,
+  composeEventHandlers,
+};
+export { combineContextAndProps } from './combineContextAndProps';
+export type { IAccessibilityProps } from './accessibilityTypes';
+export { ariaAttr } from './accessibilityUtils';
+export { createContext } from './createContext';
+export { useKeyboardBottomInset } from './useKeyboardBottomInset';
+export { isEmptyObj } from './isEmptyObj';

package/Example/nativebase-v3-kitchensink/src/nb/NativeBase/src/utils/isEmptyObj.ts

@@ -0,0 +1,6 @@
+export function isEmptyObj(obj: Object) {
+  for (var _x in obj) {
+    return false;
+  }
+  return true;
+}

package/Example/nativebase-v3-kitchensink/src/nb/NativeBase/src/utils/mergeRefs.ts

@@ -0,0 +1,23 @@
+export function mergeRefs<T = any>(
+  refs: Array<React.MutableRefObject<T> | React.LegacyRef<T>>
+): React.RefCallback<T> {
+  return (value) => {
+    refs.forEach((ref) => {
+      if (typeof ref === 'function') {
+        ref(value);
+      } else if (ref != null) {
+        (ref as React.MutableRefObject<T | null>).current = value;
+      }
+    });
+  };
+}
+
+export function composeEventHandlers<E>(
+  originalEventHandler?: null | ((event: E) => void),
+  ourEventHandler?: (event: E) => void
+) {
+  return function handleEvent(event: E) {
+    originalEventHandler?.(event);
+    ourEventHandler?.(event);
+  };
+}

package/Example/nativebase-v3-kitchensink/src/nb/NativeBase/src/utils/styled.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { useStyledSystemPropsResolver } from '../hooks/';
+
+export const makeStyledComponent = (Comp: any) => {
+  return React.forwardRef(({ debug, ...props }: any, ref: any) => {
+    const [style, restProps] = useStyledSystemPropsResolver(props);
+    if (process.env.NODE_ENV === 'development' && debug) {
+      /* eslint-disable-next-line */
+      console.log(
+        `%cstyleSystem`,
+        'background: #4b5563; color: #d97706; font-weight: 700; padding: 2px 8px;'
+      );
+      /* eslint-disable-next-line */
+      console.log('%c props: ', 'color: #4ade80; font-weight: 700;', props);
+      /* eslint-disable-next-line */
+      console.log('%c style: ', 'color: #22d3ee; font-weight: 700;', style);
+      /* eslint-disable-next-line */
+      console.log(
+        '%c restProps: ',
+        'color: #22d3ee; font-weight: 700;',
+        restProps
+      );
+    }
+    return (
+      <Comp {...restProps} style={style} ref={ref}>
+        {props.children}
+      </Comp>
+    );
+  });
+};

package/Example/nativebase-v3-kitchensink/src/nb/NativeBase/src/utils/test-utils.tsx

@@ -0,0 +1,15 @@
+import { NativeBaseProvider } from '../core/NativeBaseProvider';
+import * as React from 'react';
+
+export const Wrapper = ({ children }: any) => {
+  return (
+    <NativeBaseProvider
+      initialWindowMetrics={{
+        frame: { x: 0, y: 0, width: 0, height: 0 },
+        insets: { top: 0, left: 0, right: 0, bottom: 0 },
+      }}
+    >
+      {children}
+    </NativeBaseProvider>
+  );
+};

package/Example/nativebase-v3-kitchensink/src/nb/NativeBase/src/utils/tests/filterShadow.test.tsx

@@ -0,0 +1,35 @@
+import { filterShadowProps } from './../../utils/filterShadowProps';
+describe('filterShadowProps', () => {
+  test('empty', () => {
+    expect(filterShadowProps({}, {}, 'web')).toEqual({ style: {} });
+  });
+  test('basic', () => {
+    expect(
+      filterShadowProps(
+        {
+          top: 10,
+          shadowColor: '#FFF',
+          shadowOffset: {
+            width: 0,
+            height: 1,
+          },
+          shadowOpacity: 0.18,
+          shadowRadius: 1.0,
+        },
+        {},
+        'web'
+      )
+    ).toEqual({
+      top: 10,
+      style: {
+        shadowColor: '#FFF',
+        shadowOffset: {
+          width: 0,
+          height: 1,
+        },
+        shadowOpacity: 0.18,
+        shadowRadius: 1.0,
+      },
+    });
+  });
+});

package/Example/nativebase-v3-kitchensink/src/nb/NativeBase/src/utils/useKeyboardBottomInset.ts

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { Keyboard, Platform, KeyboardEvent } from 'react-native';
+
+export const useKeyboardBottomInset = () => {
+  const [bottom, setBottom] = React.useState(0);
+  const subscriptions = React.useRef<any[]>([]);
+
+  React.useEffect(() => {
+    function onKeyboardChange(e: KeyboardEvent) {
+      if (
+        e.startCoordinates &&
+        e.endCoordinates.screenY < e.startCoordinates.screenY
+      )
+        setBottom(e.endCoordinates.height / 2);
+      else setBottom(0);
+    }
+
+    if (Platform.OS === 'ios') {
+      subscriptions.current = [
+        Keyboard.addListener('keyboardWillChangeFrame', onKeyboardChange),
+      ];
+    } else {
+      subscriptions.current = [
+        Keyboard.addListener('keyboardDidHide', onKeyboardChange),
+        Keyboard.addListener('keyboardDidShow', onKeyboardChange),
+      ];
+    }
+    return () => {
+      subscriptions.current.forEach((subscription) => {
+        subscription.remove();
+      });
+    };
+  }, [setBottom, subscriptions]);
+
+  return bottom;
+};

package/Example/nativebase-v3-kitchensink/src/nb/NativeBase/src/utils/useResponsiveQuery/ResponsiveQueryProvider.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+type ResponsiveQueryContextType = {
+  disableCSSMediaQueries?: boolean;
+};
+
+export const ResponsiveQueryContext = React.createContext<ResponsiveQueryContextType>(
+  {
+    disableCSSMediaQueries: false,
+  }
+);
+
+export const ResponsiveQueryProvider = (
+  props: ResponsiveQueryContextType & { children: React.ReactNode }
+) => {
+  const value = React.useMemo(
+    () => ({
+      disableCSSMediaQueries: props.disableCSSMediaQueries,
+    }),
+    [props.disableCSSMediaQueries]
+  );
+
+  return (
+    <ResponsiveQueryContext.Provider value={value}>
+      {props.children}
+    </ResponsiveQueryContext.Provider>
+  );
+};

package/Example/nativebase-v3-kitchensink/src/nb/NativeBase/src/utils/useResponsiveQuery/common.ts

@@ -0,0 +1,88 @@
+import type {
+  GetResponsiveStylesParams,
+  GetResponsiveStylesReturnType,
+} from './types';
+import { Dimensions, ScaledSize, StyleSheet } from 'react-native';
+import React from 'react';
+
+export const getResponsiveStylesImpl = (width: number) => (
+  queries: GetResponsiveStylesParams
+): GetResponsiveStylesReturnType => {
+  if (typeof width === 'number') {
+    let styles = queries.initial
+      ? [
+          StyleSheet.create({ initial: StyleSheet.flatten(queries.initial) })
+            .initial,
+        ]
+      : [];
+
+    if (queries.query) {
+      queries.query.forEach((queryRule) => {
+        if (queryRule.style) {
+          const flattenQueryStyle = StyleSheet.flatten(queryRule.style);
+
+          if (
+            typeof queryRule.maxWidth === 'number' &&
+            typeof queryRule.minWidth === 'number'
+          ) {
+            if (width >= queryRule.minWidth && width <= queryRule.maxWidth) {
+              styles.push(
+                StyleSheet.create({ rangeStyle: flattenQueryStyle }).rangeStyle
+              );
+            }
+          } else if (typeof queryRule.minWidth === 'number') {
+            if (width >= queryRule.minWidth) {
+              styles.push(
+                StyleSheet.create({ minWidthStyle: flattenQueryStyle })
+                  .minWidthStyle
+              );
+            }
+          } else if (typeof queryRule.maxWidth === 'number') {
+            if (width <= queryRule.maxWidth) {
+              styles.push(
+                StyleSheet.create({ maxWidthStyle: flattenQueryStyle })
+                  .maxWidthStyle
+              );
+            }
+          }
+        }
+      });
+      return { styles };
+    }
+  }
+
+  return {};
+};
+
+// The below implementation is taken from React Native's source and added a flag to conditionally attach/remove listeners
+export const useDimensionsWithEnable = ({ enable }: { enable?: boolean }) => {
+  const [dimensions, setDimensions] = React.useState(() =>
+    Dimensions.get('window')
+  );
+
+  React.useEffect(() => {
+    if (enable) {
+      function handleChange({ window }: { window: ScaledSize }) {
+        if (
+          dimensions.width !== window.width ||
+          dimensions.height !== window.height ||
+          dimensions.scale !== window.scale ||
+          dimensions.fontScale !== window.fontScale
+        ) {
+          setDimensions(window);
+        }
+      }
+      Dimensions.addEventListener('change', handleChange);
+      // We might have missed an update between calling `get` in render and
+      // `addEventListener` in this handler, so we set it here. If there was
+      // no change, React will filter out this update as a no-op.
+      handleChange({ window: Dimensions.get('window') });
+
+      return () => {
+        Dimensions.removeEventListener('change', handleChange);
+      };
+    }
+    return () => {};
+  }, [dimensions, enable]);
+  return dimensions;
+};