inventree/InvenTree
2
0
Fork 0
mirror of https://github.com/inventree/InvenTree.git synced 2025-04-30 20:46:47 +00:00
Code

Wrap theme parameters in memo (#6542)

Browse Source
This commit is contained in:
Lavissa 2024-02-21 23:00:27 +01:00 committed by GitHub
parent c4d68aeef9
commit 8bf614607c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 89 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
src/frontend/src/components/forms/fields/RelatedModelField.tsx
View File

@ -211,45 +211,49 @@ export function RelatedModelField({
// Field doesn't follow Mantine theming // Field doesn't follow Mantine theming
// Define color theme to pass to field based on Mantine theme // Define color theme to pass to field based on Mantine theme
const th = useMantineTheme(); const theme = useMantineTheme();
let colors: any;
if (th.colorScheme === 'dark') { const colors = useMemo(() => {
colors = { let colors: any;
neutral0: th.colors[th.colorScheme][6], if (theme.colorScheme === 'dark') {
neutral5: th.colors[th.colorScheme][4], colors = {
neutral10: th.colors[th.colorScheme][4], neutral0: theme.colors[theme.colorScheme][6],
neutral20: th.colors[th.colorScheme][4], neutral5: theme.colors[theme.colorScheme][4],
neutral30: th.colors[th.colorScheme][3], neutral10: theme.colors[theme.colorScheme][4],
neutral40: th.colors[th.colorScheme][2], neutral20: theme.colors[theme.colorScheme][4],
neutral50: th.colors[th.colorScheme][1], neutral30: theme.colors[theme.colorScheme][3],
neutral60: th.colors[th.colorScheme][0], neutral40: theme.colors[theme.colorScheme][2],
neutral70: th.colors[th.colorScheme][0], neutral50: theme.colors[theme.colorScheme][1],
neutral80: th.colors[th.colorScheme][0], neutral60: theme.colors[theme.colorScheme][0],
neutral90: th.colors[th.colorScheme][0], neutral70: theme.colors[theme.colorScheme][0],
primary: th.colors[th.primaryColor][7], neutral80: theme.colors[theme.colorScheme][0],
primary25: th.colors[th.primaryColor][6], neutral90: theme.colors[theme.colorScheme][0],
primary50: th.colors[th.primaryColor][5], primary: theme.colors[theme.primaryColor][7],
primary75: th.colors[th.primaryColor][4] primary25: theme.colors[theme.primaryColor][6],
}; primary50: theme.colors[theme.primaryColor][5],
} else { primary75: theme.colors[theme.primaryColor][4]
colors = { };
neutral0: th.white, } else {
neutral5: th.fn.darken(th.white, 0.05), colors = {
neutral10: th.fn.darken(th.white, 0.1), neutral0: theme.white,
neutral20: th.fn.darken(th.white, 0.2), neutral5: theme.fn.darken(theme.white, 0.05),
neutral30: th.fn.darken(th.white, 0.3), neutral10: theme.fn.darken(theme.white, 0.1),
neutral40: th.fn.darken(th.white, 0.4), neutral20: theme.fn.darken(theme.white, 0.2),
neutral50: th.fn.darken(th.white, 0.5), neutral30: theme.fn.darken(theme.white, 0.3),
neutral60: th.fn.darken(th.white, 0.6), neutral40: theme.fn.darken(theme.white, 0.4),
neutral70: th.fn.darken(th.white, 0.7), neutral50: theme.fn.darken(theme.white, 0.5),
neutral80: th.fn.darken(th.white, 0.8), neutral60: theme.fn.darken(theme.white, 0.6),
neutral90: th.fn.darken(th.white, 0.9), neutral70: theme.fn.darken(theme.white, 0.7),
primary: th.colors[th.primaryColor][7], neutral80: theme.fn.darken(theme.white, 0.8),
primary25: th.colors[th.primaryColor][4], neutral90: theme.fn.darken(theme.white, 0.9),
primary50: th.colors[th.primaryColor][5], primary: theme.colors[theme.primaryColor][7],
primary75: th.colors[th.primaryColor][6] primary25: theme.colors[theme.primaryColor][4],
}; primary50: theme.colors[theme.primaryColor][5],
} primary75: theme.colors[theme.primaryColor][6]
};
}
return colors;
}, [theme]);
return ( return (
<Input.Wrapper <Input.Wrapper

89
src/frontend/src/components/nav/PartCategoryTree.tsx
View File

@ -10,6 +10,7 @@ import {
import { ReactTree, ThemeSettings } from '@naisutech/react-tree'; import { ReactTree, ThemeSettings } from '@naisutech/react-tree';
import { IconSitemap } from '@tabler/icons-react'; import { IconSitemap } from '@tabler/icons-react';
import { useQuery } from '@tanstack/react-query'; import { useQuery } from '@tanstack/react-query';
import { useMemo } from 'react';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { api } from '../../App'; import { api } from '../../App';
@ -67,54 +68,56 @@ export function PartCategoryTree({
} }
const mantineTheme = useMantineTheme(); const mantineTheme = useMantineTheme();
const currentTheme =
mantineTheme.colorScheme === 'dark'
? mantineTheme.colorScheme
: mantineTheme.primaryColor;
const themes: ThemeSettings = { const themes: ThemeSettings = useMemo(() => {
dark: { const currentTheme =
text: { mantineTheme.colorScheme === 'dark'
...mantineTheme.fn.fontStyles() ? mantineTheme.colorScheme
: mantineTheme.primaryColor;
return {
dark: {
text: {
...mantineTheme.fn.fontStyles()
},
nodes: {
height: '2.5rem',
folder: {
selectedBgColor: mantineTheme.colors[currentTheme][4],
hoverBgColor: mantineTheme.colors[currentTheme][6]
},
leaf: {
selectedBgColor: mantineTheme.colors[currentTheme][4],
hoverBgColor: mantineTheme.colors[currentTheme][6]
},
icons: {
folderColor: mantineTheme.colors[currentTheme][3],
leafColor: mantineTheme.colors[currentTheme][3]
}
}
}, },
nodes: { light: {
height: '2.5rem', text: {
folder: { ...mantineTheme.fn.fontStyles()
selectedBgColor: mantineTheme.colors[currentTheme][4],
hoverBgColor: mantineTheme.colors[currentTheme][6]
}, },
leaf: { nodes: {
selectedBgColor: mantineTheme.colors[currentTheme][4], height: '2.5rem',
hoverBgColor: mantineTheme.colors[currentTheme][6] folder: {
}, selectedBgColor: mantineTheme.colors[currentTheme][4],
icons: { hoverBgColor: mantineTheme.colors[currentTheme][2]
folderColor: mantineTheme.colors[currentTheme][3], },
leafColor: mantineTheme.colors[currentTheme][3] leaf: {
selectedBgColor: mantineTheme.colors[currentTheme][4],
hoverBgColor: mantineTheme.colors[currentTheme][2]
},
icons: {
folderColor: mantineTheme.colors[currentTheme][8],
leafColor: mantineTheme.colors[currentTheme][6]
}
} }
} }
}, };
light: { }, [mantineTheme]);
text: {
...mantineTheme.fn.fontStyles()
},
nodes: {
height: '2.5rem',
folder: {
selectedBgColor: mantineTheme.colors[currentTheme][4],
hoverBgColor: mantineTheme.colors[currentTheme][2]
},
leaf: {
bgColor: 'initial',
selectedBgColor: mantineTheme.colors[currentTheme][4],
hoverBgColor: mantineTheme.colors[currentTheme][2]
},
icons: {
folderColor: mantineTheme.colors[currentTheme][8],
leafColor: mantineTheme.colors[currentTheme][6]
}
}
}
};
return ( return (
<Drawer <Drawer