@applicaster/quick-brick-core 12.0.0-alpha.5035843303 → 12.0.0-alpha.5353184830

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/App/ThemeManager/index.tsx +27 -16
  2. package/package.json +8 -8
package/App/ThemeManager/index.tsx CHANGED
@@ -1,8 +1,9 @@
1
1
  import * as R from "ramda";
2
2
  import * as React from "react";
3
3
 
4
+ import { isEqual } from "@applicaster/zapp-react-native-utils/equalUtils";
4
5
  import { ThemeContext } from "@applicaster/zapp-react-native-utils/theme";
5
- import { useDimensions } from "@applicaster/zapp-react-native-utils/reactHooks";
6
+ import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
6
7
  import {
7
8
  mapKeys,
8
9
  partitionByKeys,
@@ -35,7 +36,7 @@ function populateTheme(plugin) {
35
36
 
36
37
  const TABLET_PREFIX = "tablet_";
37
38
 
38
- const prepareForTablet = (dimensions) => (themeProps) => {
39
+ const prepareForTablet = (isTablet) => (themeProps) => {
39
40
  const [tabletThemeProps, mobileTheme] = partitionByKeys(
40
41
  R.compose(R.startsWith(TABLET_PREFIX), R.head),
41
42
  themeProps
@@ -62,12 +63,12 @@ const prepareForTablet = (dimensions) => (themeProps) => {
62
63
  R.omit(["tablet_theme"])
63
64
  )(tabletThemeProps);
64
65
 
65
- return dimensions.deviceInfo.isTablet ? tabletTheme : mobileTheme;
66
+ return isTablet ? tabletTheme : mobileTheme;
66
67
  };
67
68
 
68
- const selectThemes = (dimensions, plugins) =>
69
+ const selectThemes = (isTablet, plugins) =>
69
70
  R.compose(
70
- R.map(prepareForTablet(dimensions)),
71
+ R.map(prepareForTablet(isTablet)),
71
72
  R.fromPairs,
72
73
  R.reject(R.isNil),
73
74
  R.map(populateTheme),
@@ -80,36 +81,46 @@ const ThemeContextProvider = ({
80
81
  setSelectedThemeId,
81
82
  children,
82
83
  }: any) => {
83
- const value = React.useMemo(
84
- () => ({ themes, selectedThemeId, setSelectedThemeId }),
85
- [themes, selectedThemeId, setSelectedThemeId]
86
- );
84
+ const value = { themes, selectedThemeId, setSelectedThemeId };
87
85
 
88
86
  return (
89
87
  <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
90
88
  );
91
89
  };
92
90
 
91
+ const MemoizedThemeContextProvider = React.memo(
92
+ ThemeContextProvider,
93
+ isEqual({
94
+ byValue: ["selectedThemeId", "setSelectedThemeId"],
95
+ byReference: ["children", "themes"],
96
+ })
97
+ );
98
+
93
99
  function ThemeManagerComponent({ children, plugins }: Props) {
94
- const dimensions = useDimensions("screen", { deviceInfo: true });
95
- const [themes, setThemes] = React.useState(selectThemes(dimensions, plugins));
100
+ const isTablet = useIsTablet();
101
+
102
+ const [themes, setThemes] = React.useState(selectThemes(isTablet, plugins));
96
103
 
97
104
  const [selectedThemeId, setSelectedThemeId] =
98
105
  React.useState(DEFAULT_THEME_ID);
99
106
 
100
107
  React.useEffect(() => {
101
- setThemes(selectThemes(dimensions, plugins));
102
- }, [plugins, dimensions]);
108
+ setThemes((oldThemes) => {
109
+ const newThemes = selectThemes(isTablet, plugins);
110
+
111
+ return R.equals(oldThemes, newThemes) ? oldThemes : newThemes;
112
+ });
113
+ }, [plugins]);
103
114
 
104
115
  return (
105
- <ThemeContextProvider
116
+ <MemoizedThemeContextProvider
106
117
  themes={themes}
107
118
  selectedThemeId={selectedThemeId}
108
119
  setSelectedThemeId={setSelectedThemeId}
109
120
  >
110
121
  {children}
111
- </ThemeContextProvider>
122
+ </MemoizedThemeContextProvider>
112
123
  );
113
124
  }
114
125
 
115
- export const ThemeManager = React.memo<Props>(ThemeManagerComponent);
126
+ export const ThemeManager = ThemeManagerComponent;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@applicaster/quick-brick-core",
3
- "version": "12.0.0-alpha.5035843303",
3
+ "version": "12.0.0-alpha.5353184830",
4
4
  "description": "Core package for Applicaster's Quick Brick App",
5
5
  "main": "index.js",
6
6
  "types": "index.d.ts",
@@ -30,13 +30,13 @@
30
30
  },
31
31
  "homepage": "https://github.com/applicaster/quickbrick#readme",
32
32
  "dependencies": {
33
- "@applicaster/applicaster-types": "12.0.0-alpha.5035843303",
34
- "@applicaster/quick-brick-core-plugins": "12.0.0-alpha.5035843303",
35
- "@applicaster/zapp-pipes-v2-client": "12.0.0-alpha.5035843303",
36
- "@applicaster/zapp-react-native-bridge": "12.0.0-alpha.5035843303",
37
- "@applicaster/zapp-react-native-redux": "12.0.0-alpha.5035843303",
38
- "@applicaster/zapp-react-native-ui-components": "12.0.0-alpha.5035843303",
39
- "@applicaster/zapp-react-native-utils": "12.0.0-alpha.5035843303",
33
+ "@applicaster/applicaster-types": "12.0.0-alpha.5353184830",
34
+ "@applicaster/quick-brick-core-plugins": "12.0.0-alpha.5353184830",
35
+ "@applicaster/zapp-pipes-v2-client": "12.0.0-alpha.5353184830",
36
+ "@applicaster/zapp-react-native-bridge": "12.0.0-alpha.5353184830",
37
+ "@applicaster/zapp-react-native-redux": "12.0.0-alpha.5353184830",
38
+ "@applicaster/zapp-react-native-ui-components": "12.0.0-alpha.5353184830",
39
+ "@applicaster/zapp-react-native-utils": "12.0.0-alpha.5353184830",
40
40
  "atob": "^2.1.2",
41
41
  "axios": "^0.21.2",
42
42
  "btoa": "^1.2.1",