react-native-acoustic-connect-beta 16.0.0

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

@@ -0,0 +1,21 @@
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { getSortedProps, calculatePaddingProps } from './utils';
+import { useTheme } from './../useTheme';
+
+export function useSafeArea(props: any) {
+  const insets = useSafeAreaInsets();
+  const sizes = useTheme().sizes;
+  const { safeAreaProps, paddingProps, sansPaddingProps } = getSortedProps(
+    props
+  );
+  if (!Object.keys(safeAreaProps).length) {
+    return props;
+  }
+  let calcualtedPaddingProps = calculatePaddingProps(
+    safeAreaProps,
+    paddingProps,
+    insets,
+    sizes
+  );
+  return { ...sansPaddingProps, ...paddingProps, ...calcualtedPaddingProps };
+}

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

@@ -0,0 +1,269 @@
+import { themeTools } from '../../theme';
+import { baseFontSize } from '../../theme/tools/utils';
+import type { SafeAreaProps } from './../../components/types/ExtraProps';
+import isNil from 'lodash.isnil';
+
+export function calculatePaddingProps(
+  safeAreaProps: SafeAreaProps,
+  paddingProps: any,
+  insets: any,
+  sizes: any
+) {
+  return themeTools.omitUndefined({
+    pt: calculatePaddingTop(safeAreaProps, paddingProps, insets, sizes),
+    pb: calculatePaddingBottom(safeAreaProps, paddingProps, insets, sizes),
+    pl: calculatePaddingLeft(safeAreaProps, paddingProps, insets, sizes),
+    pr: calculatePaddingRight(safeAreaProps, paddingProps, insets, sizes),
+  });
+}
+function getValueInPixels(
+  paddingProps: any,
+  paddingKeys: any,
+  sizes: any,
+  inset: any,
+  manualInset: number | string
+) {
+  let appliedInset: any = 0;
+  let originalValue = paddingKeys.length
+    ? sizes[paddingProps[paddingKeys[paddingKeys.length - 1]]]
+    : 0;
+
+  if (!isNil(manualInset) && typeof manualInset !== 'boolean') {
+    // DOC: Handles case of manually passed inset
+    appliedInset =
+      typeof manualInset === 'string' && manualInset.includes('px')
+        ? parseInt(manualInset, 10)
+        : sizes[manualInset];
+  } else {
+    // DOC: Handles case of auto inset
+    appliedInset = inset;
+  }
+
+  if (typeof originalValue === 'string') {
+    if (originalValue.endsWith('px')) {
+      return parseInt(originalValue, 10) + parseInt(appliedInset, 10) + 'px';
+    } else if (originalValue.endsWith('rem')) {
+      return (
+        parseFloat(originalValue) * baseFontSize +
+        parseInt(appliedInset, 10) +
+        'px'
+      );
+    }
+  }
+
+  return originalValue
+    ? parseInt(originalValue, 10) + parseInt(appliedInset, 10) + 'px'
+    : parseInt(appliedInset, 10) + 'px';
+}
+
+export function calculatePaddingTop(
+  safeAreaProps: SafeAreaProps,
+  paddingProps: any,
+  insets: any,
+  sizes: any
+) {
+  if (
+    isNil(safeAreaProps.safeArea) &&
+    isNil(safeAreaProps.safeAreaTop) &&
+    isNil(safeAreaProps.safeAreaY)
+  ) {
+    return;
+  }
+
+  // DOC: Adding it for manual inset passed by the user
+  let [topSafeAreaProps] = themeTools.orderedExtractInObject(safeAreaProps, [
+    'safeArea',
+    'safeAreaY',
+    'safeAreaTop',
+  ]);
+  let topSafeAreaArray = Object.keys(topSafeAreaProps);
+  const manualInset = topSafeAreaArray.length
+    ? topSafeAreaProps[topSafeAreaArray[topSafeAreaArray.length - 1]]
+    : undefined;
+  if (!insets.top && (typeof manualInset === 'boolean' || !manualInset)) {
+    return;
+  }
+  const propKeys = getRelatedPaddingProps(paddingProps, [
+    'p',
+    'padding',
+    'pt',
+    'paddingTop',
+    'py',
+    'paddingY',
+  ]);
+  return getValueInPixels(
+    paddingProps,
+    propKeys,
+    sizes,
+    insets.top,
+    manualInset
+  );
+}
+export function calculatePaddingBottom(
+  safeAreaProps: SafeAreaProps,
+  paddingProps: any,
+  insets: any,
+  sizes: any
+) {
+  if (
+    isNil(safeAreaProps.safeArea) &&
+    isNil(safeAreaProps.safeAreaBottom) &&
+    isNil(safeAreaProps.safeAreaY)
+  ) {
+    return;
+  }
+  let [bottomSafeAreaProps] = themeTools.orderedExtractInObject(safeAreaProps, [
+    'safeArea',
+    'safeAreaY',
+    'safeAreaBottom',
+  ]);
+  let bottomSafeAreaArray = Object.keys(bottomSafeAreaProps);
+  const manualInset = bottomSafeAreaArray.length
+    ? bottomSafeAreaProps[bottomSafeAreaArray[bottomSafeAreaArray.length - 1]]
+    : undefined;
+  if (!insets.bottom && (!manualInset || typeof manualInset === 'boolean')) {
+    return;
+  }
+
+  const propKeys = getRelatedPaddingProps(paddingProps, [
+    'p',
+    'padding',
+    'pb',
+    'paddingBottom',
+    'py',
+    'paddingY',
+  ]);
+
+  return getValueInPixels(
+    paddingProps,
+    propKeys,
+    sizes,
+    insets.bottom,
+    manualInset
+  );
+}
+export function calculatePaddingLeft(
+  safeAreaProps: SafeAreaProps,
+  paddingProps: any,
+  insets: any,
+  sizes: any
+) {
+  if (
+    isNil(safeAreaProps.safeArea) &&
+    isNil(safeAreaProps.safeAreaLeft) &&
+    isNil(safeAreaProps.safeAreaX)
+  ) {
+    return;
+  }
+  let [leftSafeAreaProps] = themeTools.orderedExtractInObject(safeAreaProps, [
+    'safeArea',
+    'safeAreaLeft',
+    'safeAreaX',
+  ]);
+  let leftSafeAreaArray = Object.keys(leftSafeAreaProps);
+  // DOC: Since last value takes precedence so, directly takes last value
+  const manualInset = leftSafeAreaArray.length
+    ? leftSafeAreaProps[leftSafeAreaArray[leftSafeAreaArray.length - 1]]
+    : undefined;
+  if (!insets.left && (!manualInset || typeof manualInset === 'boolean')) {
+    return;
+  }
+  const propKeys = getRelatedPaddingProps(paddingProps, [
+    'p',
+    'padding',
+    'pl',
+    'paddingLeft',
+    'px',
+    'paddingX',
+  ]);
+
+  return getValueInPixels(
+    paddingProps,
+    propKeys,
+    sizes,
+    insets.left,
+    manualInset
+  );
+}
+export function calculatePaddingRight(
+  safeAreaProps: SafeAreaProps,
+  paddingProps: any,
+  insets: any,
+  sizes: any
+) {
+  if (
+    isNil(safeAreaProps.safeArea) &&
+    isNil(safeAreaProps.safeAreaRight) &&
+    isNil(safeAreaProps.safeAreaX)
+  ) {
+    return;
+  }
+  // DOC: Adding it for manual inset passed by the user
+  let [rightSafeAreaProps] = themeTools.orderedExtractInObject(safeAreaProps, [
+    'safeArea',
+    'safeAreaX',
+    'safeAreaRight',
+  ]);
+  let rightSafeAreaArray = Object.keys(rightSafeAreaProps);
+  const manualInset = rightSafeAreaArray.length
+    ? rightSafeAreaProps[rightSafeAreaArray[rightSafeAreaArray.length - 1]]
+    : undefined;
+
+  if (!insets.right && (!manualInset || typeof manualInset === 'boolean')) {
+    return;
+  }
+  const propKeys = getRelatedPaddingProps(paddingProps, [
+    'p',
+    'padding',
+    'pr',
+    'paddingRight',
+    'px',
+    'paddingX',
+  ]);
+
+  return getValueInPixels(
+    paddingProps,
+    propKeys,
+    sizes,
+    insets.right,
+    manualInset
+  );
+}
+
+function getRelatedPaddingProps(props: any, relatedKeys: Array<any>) {
+  return Object.keys(props).filter((key) => relatedKeys.includes(key));
+}
+export function getSortedProps(props: any) {
+  let [
+    safeAreaProps,
+    sansSafeAreaProps,
+  ] = themeTools.orderedExtractInObject(props, [
+    'safeArea',
+    'safeAreaX',
+    'safeAreaY',
+    'safeAreaTop',
+    'safeAreaBottom',
+    'safeAreaLeft',
+    'safeAreaRight',
+  ]);
+  let [
+    paddingProps,
+    sansPaddingProps,
+  ] = themeTools.orderedExtractInObject(sansSafeAreaProps, [
+    'p',
+    'padding',
+    'pt',
+    'paddingTop',
+    'pr',
+    'paddingRight',
+    'pb',
+    'paddingBottom',
+    'pl',
+    'paddingLeft',
+    'px',
+    'paddingX',
+    'py',
+    'paddingY',
+  ]);
+  return { safeAreaProps, paddingProps, sansPaddingProps };
+}

package/Example/nativebase-v3-kitchensink/src/nb/NativeBase/src/hooks/useScreenReaderEnabled.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+import { AccessibilityInfo } from 'react-native';
+
+export function useScreenReaderEnabled() {
+  const [enabled, setEnabled] = React.useState(false);
+  const mountedRef = React.useRef(false);
+
+  const handleSetEnabled = (value: boolean) => {
+    if (mountedRef.current) {
+      setEnabled(value);
+    }
+  };
+
+  React.useEffect(() => {
+    mountedRef.current = true;
+    async function setInitialValue() {
+      const res = await AccessibilityInfo.isScreenReaderEnabled();
+      handleSetEnabled(res);
+    }
+
+    let handler: any = AccessibilityInfo.addEventListener(
+      'screenReaderChanged',
+      (event: any) => {
+        handleSetEnabled(event);
+      }
+    );
+
+    setInitialValue();
+    return () => {
+      mountedRef.current = false;
+      AccessibilityInfo.removeEventListener('screenReaderChanged', handler);
+    };
+  });
+
+  return enabled;
+}

package/Example/nativebase-v3-kitchensink/src/nb/NativeBase/src/hooks/useStyledSystemPropsResolver.ts

@@ -0,0 +1,75 @@
+import { getStyleAndFilteredProps, propConfig } from '../theme/styled-system';
+import { useTheme } from './useTheme';
+import React from 'react';
+import { useNativeBaseConfig } from '../core/NativeBaseContext';
+import { useResponsiveQuery } from '../utils/useResponsiveQuery';
+//@ts-ignore
+import stableHash from 'stable-hash';
+
+const getStyledSystemPropsAndRestProps = (props: any) => {
+  const styledSystemProps: any = {};
+  const restProps: any = {};
+
+  for (let key in props) {
+    if (key in propConfig) {
+      styledSystemProps[key] = props[key];
+    } else {
+      restProps[key] = props[key];
+    }
+  }
+
+  return { styledSystemProps, restProps };
+};
+
+export const useStyledSystemPropsResolver = ({
+  style: propStyle,
+  debug,
+  ...props
+}: any) => {
+  const theme = useTheme();
+  const { currentBreakpoint, config } = useNativeBaseConfig(
+    'makeStyledComponent'
+  );
+  const strictMode = config.strictMode;
+
+  const { getResponsiveStyles } = useResponsiveQuery();
+
+  const { styledSystemProps, restProps } = getStyledSystemPropsAndRestProps(
+    props
+  );
+
+  const { style, dataSet } = React.useMemo(() => {
+    const { styleSheet, dataSet } = getStyleAndFilteredProps({
+      styledSystemProps,
+      theme,
+      debug,
+      currentBreakpoint,
+      strictMode,
+      getResponsiveStyles,
+    });
+    if (propStyle) {
+      return { style: [styleSheet.box, propStyle], dataSet };
+    } else {
+      return { style: styleSheet.box, dataSet };
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    stableHash(styledSystemProps),
+    theme,
+    debug,
+    currentBreakpoint,
+    strictMode,
+    propStyle,
+    getResponsiveStyles,
+    props,
+  ]);
+  if (process.env.NODE_ENV === 'development' && debug) {
+    /* eslint-disable-next-line */
+    console.log('style,resprops', currentBreakpoint);
+  }
+
+  restProps.dataSet = dataSet;
+
+  return [style, restProps];
+};

package/Example/nativebase-v3-kitchensink/src/nb/NativeBase/src/hooks/useTheme.ts

@@ -0,0 +1,12 @@
+import { useNativeBaseConfig } from './../core/NativeBaseContext';
+
+export function useTheme() {
+  const theme = useNativeBaseConfig('useTheme').theme;
+  if (!theme) {
+    throw Error(
+      'useTheme: `theme` is undefined. Seems you forgot to wrap your app in `<NativeBaseProvider />`'
+    );
+  }
+
+  return theme;
+}

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

@@ -0,0 +1,3 @@
+export { useThemeProps } from './useProps';
+export { usePropsResolution } from './usePropsResolution';
+export { usePropsWithComponentTheme } from './usePropsWithComponentTheme';