react-native-theme-flow/lib/module/create-theme-flow.js

react native style sheet with theme

"use strict";

import { createContext, useContext, useRef } from 'react';
import { StyleSheet, useWindowDimensions } from 'react-native';
import { createThemeFactory } from "./create-theme.js";
import { getFactoryValue, isFactory } from "./utils/get-factory-value.js";
import { jsx as _jsx } from "react/jsx-runtime";
export const createThemeFlow = () => {
  const ThemeContext = /*#__PURE__*/createContext(null);
  const useThemeFlow = () => useContext(ThemeContext);
  /**
   * @deprecated instead use useThemeFlow
   */
  const useTheme = () => {
    const {
      theme
    } = useThemeFlow();
    return theme;
  };
  const ThemeProvider = ({
    children,
    theme,
    extraData
  }) => {
    return /*#__PURE__*/_jsx(ThemeContext.Provider, {
      value: {
        theme,
        extraData
      },
      children: children
    });
  };
  const ThemeFlow = {
    create: namedStyles => ({
      use: () => {
        // eslint-disable-next-line
        const windowDimensions = useWindowDimensions();
        // eslint-disable-next-line
        const cachedStaticStyles = useRef(null);

        // eslint-disable-next-line
        const {
          theme: currentTheme,
          extraData
        } = useThemeFlow();
        const namedStylesWithTheme = getFactoryValue(namedStyles, {
          theme: currentTheme,
          windowDimensions,
          ...(extraData || {})
        });
        const styleNames = Object.keys(namedStylesWithTheme);
        const {
          dynamicStyles,
          staticStyles
        } = styleNames.reduce((acc, cur) => {
          const style = namedStylesWithTheme[cur] ?? {};
          if (isFactory(style)) {
            return {
              ...acc,
              dynamicStyles: {
                ...acc.dynamicStyles,
                [cur]: style
              }
            };
          }
          return {
            ...acc,
            staticStyles: {
              ...acc.staticStyles,
              [cur]: style
            }
          };
        }, {
          dynamicStyles: {},
          staticStyles: {}
        });
        const cachedId = JSON.stringify(staticStyles);
        if (cachedId !== cachedStaticStyles.current?.id) {
          cachedStaticStyles.current = {
            styles: StyleSheet.create(staticStyles),
            id: cachedId
          };
        }
        return {
          ...dynamicStyles,
          ...cachedStaticStyles.current?.styles
        };
      }
    })
  };
  const themeFactory = createThemeFactory();
  return {
    ThemeProvider,
    useTheme,
    useThemeFlow,
    ThemeFlow,
    themeFactory
  };
};
//# sourceMappingURL=create-theme-flow.js.map