From e001a81605711ab8b1d741cbd2117836c20738e9 Mon Sep 17 00:00:00 2001 From: Paulo Andre Azevedo Quirino Date: Tue, 19 Sep 2023 11:31:34 +0100 Subject: [PATCH 1/3] Target node 12 and Chome 78 so that we get no optional chaining in the output --- babel.config.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/babel.config.js b/babel.config.js index 75a9d61d..0555a431 100644 --- a/babel.config.js +++ b/babel.config.js @@ -5,7 +5,8 @@ module.exports = { "@babel/preset-env", { targets: { - node: "current" + chrome: "78", + node: "12" } } ], From a550629d606a6d963abf5b50b6bf44cec00f92a1 Mon Sep 17 00:00:00 2001 From: Paulo Andre Azevedo Quirino Date: Tue, 19 Sep 2023 15:56:54 +0100 Subject: [PATCH 2/3] withTheme creates themes even if we don't specifically give it an ApplicationThemes - also verticalBar background color --- babel.config.js | 3 ++- package-lock.json | 6 +++--- package.json | 4 ++-- src/Components/HOCs/withTheme.tsx | 17 +++++++++++++---- src/Components/VerticalBar/styles.js | 2 +- src/styles/Themes.js | 8 +++++--- 6 files changed, 26 insertions(+), 14 deletions(-) diff --git a/babel.config.js b/babel.config.js index 0555a431..b912d295 100644 --- a/babel.config.js +++ b/babel.config.js @@ -15,6 +15,7 @@ module.exports = { plugins: [ ["@babel/plugin-proposal-class-properties", { loose: true }], ["@babel/plugin-transform-runtime", { loose: true }], - ["@babel/plugin-proposal-private-methods", { loose: true }] + ["@babel/plugin-proposal-private-methods", { loose: true }], + ["@babel/plugin-transform-private-property-in-object", { loose: true }] ] }; diff --git a/package-lock.json b/package-lock.json index 98372913..389c49a9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6,7 +6,7 @@ "packages": { "": { "name": "@mov-ai/mov-fe-lib-react", - "version": "1.1.2-24", + "version": "1.1.2-25", "license": "ISC", "dependencies": { "@babel/runtime": "7.22.15", @@ -84,8 +84,8 @@ }, "peerDependencies": { "@material-ui/core": "^4.12.4", - "react": ">=16.14.0", - "react-dom": ">=16.14.0" + "react": "^16.14.0", + "react-dom": "^16.14.0" } }, "node_modules/@aashutoshrathi/word-wrap": { diff --git a/package.json b/package.json index 3ef3ad87..e256ce79 100644 --- a/package.json +++ b/package.json @@ -87,8 +87,8 @@ }, "peerDependencies": { "@material-ui/core": "^4.12.4", - "react": ">=16.14.0", - "react-dom": ">=16.14.0" + "react": "^16.14.0", + "react-dom": "^16.14.0" }, "dependencies": { "@babel/runtime": "7.22.15", diff --git a/src/Components/HOCs/withTheme.tsx b/src/Components/HOCs/withTheme.tsx index b7573880..f48f5837 100644 --- a/src/Components/HOCs/withTheme.tsx +++ b/src/Components/HOCs/withTheme.tsx @@ -11,6 +11,7 @@ interface ThemeSub { themeName: ThemeNameType; ApplicationTheme: ApplicationThemeType; getStyle: typeof defaultGetStyle; + created: boolean; }; export @@ -18,6 +19,7 @@ const themeSub = makeSub({ themeName: (window.localStorage.getItem("movai.theme") ?? "dark") as ThemeNameType, ApplicationTheme: DefaultApplicationTheme, getStyle: defaultGetStyle, + created: false, }); const setTheme = themeSub.makeEmitNow((current: ThemeSub, themeName: ThemeNameType): ThemeSub => { @@ -43,7 +45,7 @@ export default function withTheme( ApplicationTheme?: typeof DefaultApplicationTheme, getStyle?: typeof defaultGetStyle, ) { - let current = themeSub.current(); + let current = themeSub.current(), changed = false; if (ApplicationTheme || getStyle) { current = { @@ -51,14 +53,21 @@ export default function withTheme( ApplicationTheme: ApplicationTheme ?? current.ApplicationTheme, getStyle: getStyle ?? current.getStyle }; - const NewApplicationTheme = createThemes(current); + changed = true; + } + + if (!current.created) { current = { ...current, - ApplicationTheme: NewApplicationTheme, + created: true, + ApplicationTheme: createThemes(current), }; - themeSub.update(current); + changed = true; } + if (changed) + themeSub.update(current); + const StyledComponent = withStyles(getStyle ?? defaultGetStyle)(Component); return function (props: any) { diff --git a/src/Components/VerticalBar/styles.js b/src/Components/VerticalBar/styles.js index 865cee53..ccf5ea8e 100644 --- a/src/Components/VerticalBar/styles.js +++ b/src/Components/VerticalBar/styles.js @@ -6,7 +6,7 @@ export const verticalBarStyles = makeStyles(theme => ({ height: "100%", display: "flex", flexDirection: "column", - backgroundColor: props => props.backgroundColor, + backgroundColor: theme.verticalBar?.background ?? theme.palette.background.primary, "& .MuiSvgIcon-root": { color: theme.palette.primary.main, fill: theme.palette.primary.main, diff --git a/src/styles/Themes.js b/src/styles/Themes.js index 23669b79..e7e6be26 100644 --- a/src/styles/Themes.js +++ b/src/styles/Themes.js @@ -7,7 +7,7 @@ const CONSTANTS = { textColor: "#fff", background: { primary: "#424242", - secondary: "#212121" + secondary: "#212121", }, iconColor: "#fff" }, @@ -98,7 +98,8 @@ const Themes = { icon: { color: "#c6c6c6", hoverColor: "#fff" }, table: { stripColor: "#505050" }, verticalBar: { - iconColor: "#9e9e9e" + iconColor: "#9e9e9e", + background: "#2b2b2b" }, overrides: { MuiTableCell: { @@ -236,7 +237,8 @@ const Themes = { getContrastText: () => CONSTANTS.light.iconColor }, verticalBar: { - iconColor: "#616161" + iconColor: "#616161", + background: "#cccccc" }, overrides: { MuiTableCell: { From 53586d3b06acf46ca51497a732190d6c8b47e0f7 Mon Sep 17 00:00:00 2001 From: Paulo Andre Azevedo Quirino Date: Wed, 20 Sep 2023 09:54:40 +0100 Subject: [PATCH 3/3] Fixup withTheme --- src/Components/HOCs/withTheme.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/Components/HOCs/withTheme.tsx b/src/Components/HOCs/withTheme.tsx index f48f5837..39bafb80 100644 --- a/src/Components/HOCs/withTheme.tsx +++ b/src/Components/HOCs/withTheme.tsx @@ -11,7 +11,6 @@ interface ThemeSub { themeName: ThemeNameType; ApplicationTheme: ApplicationThemeType; getStyle: typeof defaultGetStyle; - created: boolean; }; export @@ -19,7 +18,6 @@ const themeSub = makeSub({ themeName: (window.localStorage.getItem("movai.theme") ?? "dark") as ThemeNameType, ApplicationTheme: DefaultApplicationTheme, getStyle: defaultGetStyle, - created: false, }); const setTheme = themeSub.makeEmitNow((current: ThemeSub, themeName: ThemeNameType): ThemeSub => { @@ -56,10 +54,9 @@ export default function withTheme( changed = true; } - if (!current.created) { + if (!current.ApplicationTheme[current.themeName].breakpoints) { current = { ...current, - created: true, ApplicationTheme: createThemes(current), }; changed = true;