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

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

@@ -1,65 +0,0 @@
-/* eslint-disable */
-//@ts-nocheck
-// This hash function is taken from react native web
-/**
- * JS Implementation of MurmurHash2
- *
- * @author <a href="mailto:gary.court@gmail.com">Gary Court</a>
- * @see http://github.com/garycourt/murmurhash-js
- * @author <a href="mailto:aappleby@gmail.com">Austin Appleby</a>
- * @see http://sites.google.com/site/murmurhash/
- *
- * @param {string} str ASCII only
- * @param {number} seed Positive integer only
- * @return {number} 32-bit positive integer hash
- */
-function murmurhash2_32_gc(str: string, seed: number) {
-  var l = str.length,
-    h = seed ^ l,
-    i = 0,
-    k;
-
-  while (l >= 4) {
-    k =
-      (str.charCodeAt(i) & 0xff) |
-      ((str.charCodeAt(++i) & 0xff) << 8) |
-      ((str.charCodeAt(++i) & 0xff) << 16) |
-      ((str.charCodeAt(++i) & 0xff) << 24);
-    k =
-      (k & 0xffff) * 0x5bd1e995 + ((((k >>> 16) * 0x5bd1e995) & 0xffff) << 16);
-    k ^= k >>> 24;
-    k =
-      (k & 0xffff) * 0x5bd1e995 + ((((k >>> 16) * 0x5bd1e995) & 0xffff) << 16);
-    h =
-      ((h & 0xffff) * 0x5bd1e995 +
-        ((((h >>> 16) * 0x5bd1e995) & 0xffff) << 16)) ^
-      k;
-    l -= 4;
-    ++i;
-  }
-
-  switch (l) {
-    case 3:
-      h ^= (str.charCodeAt(i + 2) & 0xff) << 16;
-
-    case 2:
-      h ^= (str.charCodeAt(i + 1) & 0xff) << 8;
-
-    case 1:
-      h ^= str.charCodeAt(i) & 0xff;
-      h =
-        (h & 0xffff) * 0x5bd1e995 +
-        ((((h >>> 16) * 0x5bd1e995) & 0xffff) << 16);
-  }
-
-  h ^= h >>> 13;
-  h = (h & 0xffff) * 0x5bd1e995 + ((((h >>> 16) * 0x5bd1e995) & 0xffff) << 16);
-  h ^= h >>> 15;
-  return h >>> 0;
-}
-
-const hash = function hash(str: string) {
-  return murmurhash2_32_gc(str, 1).toString(36);
-};
-
-export default hash;

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

@@ -1,3 +0,0 @@
-export { useResponsiveQuery } from './useResponsiveQuery';
-export { ResponsiveQueryProvider } from './ResponsiveQueryProvider';
-export * from './types';

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

@@ -1,33 +0,0 @@
-import type { StyleSheet } from 'react-native';
-
-type StyleSheetStyle = Parameters<typeof StyleSheet.create>[0]['initial'];
-
-export type Query = {
-  minWidth?: number;
-  maxWidth?: number;
-  style?: StyleSheetStyle | StyleSheetStyle[];
-};
-
-export type UseResponsiveQueryParams = {
-  initial?: StyleSheetStyle | StyleSheetStyle[];
-  query?: Query[];
-  disableCSSMediaQueries?: boolean;
-};
-
-export type DataSet = { [key: string]: string };
-
-export type GetResponsiveStylesParams = Omit<
-  UseResponsiveQueryParams,
-  'disableCSSMediaQueries'
->;
-
-export type GetResponsiveStylesReturnType = {
-  styles?: StyleSheetStyle[];
-  dataSet?: DataSet;
-};
-
-export type UseResponsiveQueryReturnType = GetResponsiveStylesReturnType & {
-  getResponsiveStyles: (
-    params: GetResponsiveStylesParams
-  ) => GetResponsiveStylesReturnType;
-};

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

@@ -1,25 +0,0 @@
-import type {
-  UseResponsiveQueryParams,
-  UseResponsiveQueryReturnType,
-} from './types';
-import { useWindowDimensions } from 'react-native';
-import { useStableMemo } from './useStableMemo';
-import { getResponsiveStylesImpl } from './common';
-
-export const useResponsiveQuery = (
-  queries?: UseResponsiveQueryParams
-): UseResponsiveQueryReturnType => {
-  const windowWidth = useWindowDimensions().width;
-
-  const values = useStableMemo(() => {
-    const getResponsiveStyles = getResponsiveStylesImpl(windowWidth);
-    if (queries) {
-      const { styles } = getResponsiveStyles(queries);
-      return { styles, getResponsiveStyles };
-    } else {
-      return { getResponsiveStyles };
-    }
-  }, [queries, windowWidth]);
-
-  return values;
-};

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

@@ -1,177 +0,0 @@
-//@ts-ignore
-import createCompileableStyle from 'react-native-web/dist/exports/StyleSheet/createCompileableStyle';
-//@ts-ignore
-import i18nStyle from 'react-native-web/dist/exports/StyleSheet/i18nStyle';
-//@ts-ignore
-import { atomic } from 'react-native-web/dist/exports/StyleSheet/compile';
-//@ts-ignore
-import styleResolver from 'react-native-web/dist/exports/StyleSheet/styleResolver';
-import type {
-  DataSet,
-  Query,
-  UseResponsiveQueryParams,
-  UseResponsiveQueryReturnType,
-  GetResponsiveStylesParams,
-} from './types';
-import { StyleSheet } from 'react-native';
-//@ts-ignore
-import stableHash from 'stable-hash';
-import hash from './hash';
-import type { GetResponsiveStylesReturnType } from './types';
-import { useStableMemo } from './useStableMemo';
-import { getResponsiveStylesImpl, useDimensionsWithEnable } from './common';
-import { ResponsiveQueryContext } from './ResponsiveQueryProvider';
-import React from 'react';
-
-// 1. i18nStyle - Does swapping of ltr styles if enabled by user
-
-// 2. createCompileableStyle - Handles shadow/text shadow conversion from RN styles to web styles
-
-// 3. atomic - God function. Pure and memoizes input/output.
-// This is a great function, it handles prefixing, converting RN specific styles to web styles and generating the CSS selector
-// Input {marginTop: 10}
-// Output {"r-margin-top-[hash]-10": {
-//   property: "marginTop",
-//   value: "10px",
-//   identifier: "r-margin-top-[hash]-10",
-//   rules: [{`.r-margin-top-[hash]-10: {'margin-top': '10px;`} }]
-// }}
-
-// 4. styleResolver - holds the reference of sheet object used to inject CSS. This exposes 2 functions.
-// - getTextContent => for ssr style injection
-// - insert => for inserting styles in style tag
-// If we somehow manage to use these functions, we won't need any extra workarounds for ssr initial style injection or CSS declaration order specifictity
-
-// Here issue is that it internally uses a cache to verify if a css rule is inserted using selector name (class name generated by RN web)
-// refer line number 121 in `react-native-web/dist/exports/StyleSheet/createOrdererdCSSStyleSheetfile`.
-// We can trick this hash id generator by adding a comment on top of our media query rule in this format. /* media-query + data-attr {} */ then it'll start using media-query + data-attr as cache key
-
-const MEDIA_QUERY_STYLESHEET_GROUP = 3;
-
-export const useResponsiveQuery = (
-  queries?: UseResponsiveQueryParams
-): UseResponsiveQueryReturnType => {
-  const responsiveQueryContext = React.useContext(ResponsiveQueryContext);
-  const disableCSSMediaQueries =
-    queries?.disableCSSMediaQueries ??
-    responsiveQueryContext.disableCSSMediaQueries;
-
-  // Only attaches listener if disableCSSMediaQueries is true
-  const windowWidth = useDimensionsWithEnable({
-    enable: disableCSSMediaQueries,
-  }).width;
-
-  const values = useStableMemo(() => {
-    // Use the non-media query responsive styling
-    if (disableCSSMediaQueries) {
-      const getResponsiveStyles = getResponsiveStylesImpl(windowWidth);
-      if (queries) {
-        const { styles } = getResponsiveStyles(queries);
-        return { styles, getResponsiveStyles };
-      } else {
-        return { getResponsiveStyles };
-      }
-    } else {
-      if (queries) {
-        const { styles, dataSet } = getResponsiveStyles(queries);
-        return { dataSet, styles, getResponsiveStyles };
-      } else {
-        return { getResponsiveStyles };
-      }
-    }
-  }, [queries, windowWidth, disableCSSMediaQueries]);
-
-  return values;
-};
-
-const getDataAttribute = (queryRule: Query) => {
-  if (
-    typeof queryRule.minWidth === 'number' &&
-    typeof queryRule.maxWidth === 'number'
-  ) {
-    return `min-width-${queryRule.minWidth}-max-width-${queryRule.maxWidth}`;
-  } else if (typeof queryRule.minWidth === 'number') {
-    return `min-width-${queryRule.minWidth}`;
-  } else if (typeof queryRule.maxWidth === 'number') {
-    return `max-width-${queryRule.maxWidth}`;
-  }
-
-  return undefined;
-};
-
-const getMediaQueryRule = (query: Query, newRule: string) => {
-  if (
-    typeof query.minWidth === 'number' &&
-    typeof query.maxWidth === 'number'
-  ) {
-    return `@media only screen and (min-width: ${query.minWidth}px) and (max-width: ${query.maxWidth}px) { ${newRule} }`;
-  } else if (typeof query.minWidth === 'number') {
-    return `@media only screen and (min-width: ${query.minWidth}px) { ${newRule} }`;
-  } else if (typeof query.maxWidth === 'number') {
-    return `@media only screen and (max-width: ${query.maxWidth}px) { ${newRule} }`;
-  }
-  return undefined;
-};
-
-const getResponsiveStyles = (
-  queries: GetResponsiveStylesParams
-): GetResponsiveStylesReturnType => {
-  const queryString = stableHash(queries.query);
-  const queriesHash = hash(queryString);
-
-  const styles = queries.initial
-    ? [
-        StyleSheet.create({ initial: StyleSheet.flatten(queries.initial) })
-          .initial,
-      ]
-    : undefined;
-
-  let dataSet: DataSet = {};
-
-  if (queries.query) {
-    queries.query.forEach((queryRule) => {
-      const queryHash = queriesHash + hash(stableHash(queryRule));
-      const dataAttribute = getDataAttribute(queryRule);
-
-      if (dataAttribute) {
-        const newIdentifier = `[data-${dataAttribute}$="${queryHash}"]`;
-        dataSet[dataAttribute] = queryHash;
-
-        let mediaRules = '';
-
-        const flattenQueryStyle = StyleSheet.flatten(queryRule.style);
-        const newStyle = createCompileableStyle(i18nStyle(flattenQueryStyle));
-        const results = atomic(newStyle);
-
-        Object.keys(results).forEach((key) => {
-          const oldIdentifier = results[key].identifier;
-
-          if (process.env.NODE_ENV !== 'production') {
-            dataSet[dataAttribute] =
-              oldIdentifier + ' ' + dataSet[dataAttribute];
-          }
-
-          results[key].rules.forEach((oldRule: string) => {
-            // Rule returned by atomic has css selectors, so we'll replace it with data-attr selector
-            const newRule = oldRule.replace('.' + oldIdentifier, newIdentifier);
-            mediaRules += newRule;
-          });
-        });
-
-        if (mediaRules) {
-          const mediaQueryRule = getMediaQueryRule(queryRule, mediaRules);
-
-          // Here by prepending the /*${queryHash}{}*/ comment, we're kind of tricking the regex used by rn-web to verify if a rule is inserted or not.
-          // Looks safe to me, just need to keep a check if there are any implementation changes in createStyleSheet file in rn-web in future.
-          // Second argument defines the order of the insertion. DataSet and class selectors have same CSS specificity so we need to make sure that media rules have higher precedence. Max precendence in RN web is around 2.2 so 3 ensures styles will be appended later
-          styleResolver.sheet.insert(
-            `/*${queryHash}{}*/${mediaQueryRule}`,
-            MEDIA_QUERY_STYLESHEET_GROUP
-          );
-        }
-      }
-    });
-  }
-
-  return { styles, dataSet };
-};

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

@@ -1,8 +0,0 @@
-import { useMemo } from 'react';
-//@ts-ignore
-import hash from 'stable-hash';
-
-export function useStableMemo<T>(factory: () => T, deps: any[]) {
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  return useMemo(factory, [hash(deps)]);
-}

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

@@ -1,16 +0,0 @@
-import React from 'react';
-import Text from '../components/primitives/Text';
-
-export const wrapStringChild = (children: any, textProps: any) => {
-  return React.Children.map(children, (child) => {
-    return typeof child === 'string' ||
-      typeof child === 'number' ||
-      (child?.type === React.Fragment &&
-        (typeof child.props?.children === 'string' ||
-          typeof child.props?.children === 'number')) ? (
-      <Text {...textProps}>{child}</Text>
-    ) : (
-      child
-    );
-  });
-};

package/Example/nativebase-v3-kitchensink/src/nb/NativeBase/tsconfig.json

@@ -1,29 +0,0 @@
-{
-  "include": ["./src"],
-  "compilerOptions": {
-    "baseUrl": ".",
-    "declaration": true,
-    "paths": {
-      "native-base": ["./src/index"]
-    },
-    "allowUnreachableCode": false,
-    "allowUnusedLabels": false,
-    "esModuleInterop": true,
-    "importsNotUsedAsValues": "error",
-    "forceConsistentCasingInFileNames": true,
-    "jsx": "react",
-    "lib": ["esnext", "dom"],
-    "module": "esnext",
-    "moduleResolution": "node",
-    "noFallthroughCasesInSwitch": true,
-    "noImplicitReturns": true,
-    "noImplicitUseStrict": false,
-    "noStrictGenericChecks": false,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "resolveJsonModule": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "target": "esnext"
-  }
-}

package/Example/nativebase-v3-kitchensink/src/nb/components/Wrapper.tsx

@@ -1,193 +0,0 @@
-import React from 'react';
-import {
-  Box,
-  NativeBaseProvider,
-  useColorMode,
-  IconButton,
-  MoonIcon,
-  ColorMode,
-  useColorModeValue,
-  Tooltip,
-  SunIcon,
-  extendTheme,
-  Button,
-  Input,
-} from 'native-base';
-import type { StorageManager } from 'native-base';
-import AsyncStorage from '@react-native-async-storage/async-storage';
-
-import Config from '../../../nativebase.config';
-
-const myTheme = extendTheme({
-  space: {
-    mySpace: '29px',
-  },
-  colors: {
-    blue1: {
-      '100': 'blue',
-    },
-  },
-
-  components: {
-    Link: {
-      sizes: {
-        mysize: 10,
-      },
-    },
-    Button: {
-      variants: {
-        myBtn: {
-          padding: 10,
-        },
-        myNewButton: ({ myPaddingX }: { myPaddingX: number }) => {
-          return {
-            padding: myPaddingX,
-          };
-        },
-
-        myNewButton1: (props: any) => {
-          return {
-            padding: props.padding,
-          };
-        },
-      },
-      sizes: {
-        newsize: ({ mySize }: { mySize: number }) => {
-          return {
-            padding: mySize,
-          };
-        },
-      },
-    },
-
-    Input: {
-      variants: {
-        newsize: ({ mySize }: { mySize: number }) => {
-          return {
-            padding: mySize,
-          };
-        },
-
-        newsize1: (props: any) => {
-          return {
-            padding: props.padding,
-          };
-        },
-      },
-      sizes: {
-        'my-size': {
-          padding: 2,
-        },
-      },
-    },
-
-    Checkbox: {
-      sizes: {
-        myBtn: {
-          padding: 10,
-        },
-        myNewButton: ({ myPadding }: { myPadding: any }) => {
-          return {
-            padding: myPadding,
-          };
-        },
-      },
-    },
-
-    Box: {
-      variants: {
-        myBtn: {
-          padding: 10,
-        },
-      },
-    },
-  },
-});
-
-type MyThemeType = typeof myTheme;
-declare module 'native-base' {
-  interface ICustomTheme extends MyThemeType {}
-}
-
-function MyWrapper({ children }: any) {
-  const { colorMode, toggleColorMode } = useColorMode();
-
-  const bgColor = useColorModeValue(`gray.50`, `gray.800`);
-
-  return (
-    <Box
-      flex={1}
-      px="3"
-      justifyContent="center"
-      alignItems="center"
-      bg={bgColor}
-      safeAreaY
-    >
-      <Tooltip
-        label={colorMode === 'dark' ? 'Enable light mode' : 'Enable dark mode'}
-        placement="bottom right"
-        openDelay={300}
-        closeOnClick={false}
-      >
-        <IconButton
-          position="absolute"
-          top={12}
-          right={8}
-          zIndex={4}
-          onPress={toggleColorMode}
-          icon={colorMode === 'dark' ? <SunIcon /> : <MoonIcon />}
-          size="lg"
-        />
-      </Tooltip>
-      {children}
-    </Box>
-  );
-}
-
-export function RenderTestButton() {
-  const [state, setState] = React.useState(1);
-  return (
-    <Box style={{ position: 'absolute', top: 10, left: 20 }} m={2} bg="red.100">
-      <Input m={2} size="my-size" />
-      <Button
-        size=""
-        variant={'myNewButton'}
-        // title={state.toString()}
-        onPress={() => setState(state + 1)}
-      />
-    </Box>
-  );
-}
-export default ({ children, theme }: any) => {
-  const colorModeManager: StorageManager = {
-    get: async () => {
-      try {
-        const val = await AsyncStorage.getItem('@example-wrapper-mode');
-        return val === 'dark' ? 'dark' : 'light';
-      } catch (e) {
-        console.log(e);
-        return 'light';
-      }
-    },
-    set: async (value: ColorMode) => {
-      try {
-        await AsyncStorage.setItem('@example-wrapper-mode', value);
-      } catch (e) {
-        console.log(e);
-      }
-    },
-  };
-  return (
-    <NativeBaseProvider
-      theme={theme}
-      config={Config}
-      colorModeManager={colorModeManager}
-      initialWindowMetrics={{
-        frame: { x: 0, y: 0, width: 0, height: 0 },
-        insets: { top: 0, left: 0, right: 0, bottom: 0 },
-      }}
-    >
-      <MyWrapper>{children}</MyWrapper>
-    </NativeBaseProvider>
-  );
-};

package/Example/nativebase-v3-kitchensink/src/nb/components/basic/FlatList/Basic.tsx

@@ -1,116 +0,0 @@
-import React from 'react';
-import {
-  Box,
-  FlatList,
-  Heading,
-  Avatar,
-  HStack,
-  VStack,
-  Text,
-  Spacer,
-} from 'native-base';
-export const Example = () => {
-  const data = [
-    {
-      id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
-      fullName: 'Aafreen Khan',
-      timeStamp: '12:47 PM',
-      recentText: 'Good Day!',
-      avatarUrl:
-        'https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
-    },
-    {
-      id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
-      fullName: 'Sujitha Mathur',
-      timeStamp: '11:11 PM',
-      recentText: 'Cheer up, there!',
-      avatarUrl:
-        'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTyEaZqT3fHeNrPGcnjLLX1v_W4mvBlgpwxnA&usqp=CAU',
-    },
-    {
-      id: '58694a0f-3da1-471f-bd96-145571e29d72',
-      fullName: 'Anci Barroco',
-      timeStamp: '6:22 PM',
-      recentText: 'Good Day!',
-      avatarUrl: 'https://miro.medium.com/max/1400/0*0fClPmIScV5pTLoE.jpg',
-    },
-    {
-      id: '68694a0f-3da1-431f-bd56-142371e29d72',
-      fullName: 'Aniket Kumar',
-      timeStamp: '8:56 PM',
-      recentText: 'All the best',
-      avatarUrl:
-        'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSr01zI37DYuR8bMV5exWQBSw28C1v_71CAh8d7GP1mplcmTgQA6Q66Oo--QedAN1B4E1k&usqp=CAU',
-    },
-    {
-      id: '28694a0f-3da1-471f-bd96-142456e29d72',
-      fullName: 'Kiara',
-      timeStamp: '12:47 PM',
-      recentText: 'I will call today.',
-      avatarUrl:
-        'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRBwgu1A5zgPSvfE83nurkuzNEoXs9DMNr8Ww&usqp=CAU',
-    },
-  ];
-  return (
-    <Box>
-      <Heading fontSize="xl" p="4" pb="3">
-        Inbox
-      </Heading>
-      <FlatList horizontal
-        data={data}
-        renderItem={({ item }) => (
-          <Box
-            borderBottomWidth="1"
-            _dark={{
-              borderColor: 'muted.50',
-            }}
-            borderColor="muted.800"
-            pl="4"
-            pr="5"
-            py="2"
-          >
-            <HStack space={3} justifyContent="space-between">
-              <Avatar
-                size="48px"
-                source={{
-                  uri: item.avatarUrl,
-                }}
-              />
-              <VStack>
-                <Text
-                  _dark={{
-                    color: 'warmGray.50',
-                  }}
-                  color="coolGray.800"
-                  bold
-                >
-                  {item.fullName}
-                </Text>
-                <Text
-                  color="coolGray.600"
-                  _dark={{
-                    color: 'warmGray.200',
-                  }}
-                >
-                  {item.recentText}
-                </Text>
-              </VStack>
-              <Spacer />
-              <Text
-                fontSize="xs"
-                _dark={{
-                  color: 'warmGray.50',
-                }}
-                color="coolGray.800"
-                alignSelf="flex-start"
-              >
-                {item.timeStamp}
-              </Text>
-            </HStack>
-          </Box>
-        )}
-        keyExtractor={(item) => item.id}
-      />
-    </Box>
-  );
-};

package/Example/nativebase-v3-kitchensink/src/nb/components/basic/FlatList/index.tsx

@@ -1,10 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react-native';
-import { withKnobs } from '@storybook/addon-knobs';
-import Wrapper from '../../Wrapper';
-import { Example as Basic } from './Basic';
-
-storiesOf('FlatList', module)
-  .addDecorator(withKnobs)
-  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)
-  .add('Basic', () => <Basic />);