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

68
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();
const colors = useMemo(() => {
let colors: any; let colors: any;
if (th.colorScheme === 'dark') { if (theme.colorScheme === 'dark') {
colors = { colors = {
neutral0: th.colors[th.colorScheme][6], neutral0: theme.colors[theme.colorScheme][6],
neutral5: th.colors[th.colorScheme][4], neutral5: theme.colors[theme.colorScheme][4],
neutral10: th.colors[th.colorScheme][4], neutral10: theme.colors[theme.colorScheme][4],
neutral20: th.colors[th.colorScheme][4], neutral20: theme.colors[theme.colorScheme][4],
neutral30: th.colors[th.colorScheme][3], neutral30: theme.colors[theme.colorScheme][3],
neutral40: th.colors[th.colorScheme][2], neutral40: theme.colors[theme.colorScheme][2],
neutral50: th.colors[th.colorScheme][1], neutral50: theme.colors[theme.colorScheme][1],
neutral60: th.colors[th.colorScheme][0], neutral60: theme.colors[theme.colorScheme][0],
neutral70: th.colors[th.colorScheme][0], neutral70: theme.colors[theme.colorScheme][0],
neutral80: th.colors[th.colorScheme][0], neutral80: theme.colors[theme.colorScheme][0],
neutral90: th.colors[th.colorScheme][0], neutral90: theme.colors[theme.colorScheme][0],
primary: th.colors[th.primaryColor][7], primary: theme.colors[theme.primaryColor][7],
primary25: th.colors[th.primaryColor][6], primary25: theme.colors[theme.primaryColor][6],
primary50: th.colors[th.primaryColor][5], primary50: theme.colors[theme.primaryColor][5],
primary75: th.colors[th.primaryColor][4] primary75: theme.colors[theme.primaryColor][4]
}; };
} else { } else {
colors = { colors = {
neutral0: th.white, neutral0: theme.white,
neutral5: th.fn.darken(th.white, 0.05), neutral5: theme.fn.darken(theme.white, 0.05),
neutral10: th.fn.darken(th.white, 0.1), neutral10: theme.fn.darken(theme.white, 0.1),
neutral20: th.fn.darken(th.white, 0.2), neutral20: theme.fn.darken(theme.white, 0.2),
neutral30: th.fn.darken(th.white, 0.3), neutral30: theme.fn.darken(theme.white, 0.3),
neutral40: th.fn.darken(th.white, 0.4), neutral40: theme.fn.darken(theme.white, 0.4),
neutral50: th.fn.darken(th.white, 0.5), neutral50: theme.fn.darken(theme.white, 0.5),
neutral60: th.fn.darken(th.white, 0.6), neutral60: theme.fn.darken(theme.white, 0.6),
neutral70: th.fn.darken(th.white, 0.7), neutral70: theme.fn.darken(theme.white, 0.7),
neutral80: th.fn.darken(th.white, 0.8), neutral80: theme.fn.darken(theme.white, 0.8),
neutral90: th.fn.darken(th.white, 0.9), neutral90: theme.fn.darken(theme.white, 0.9),
primary: th.colors[th.primaryColor][7], primary: theme.colors[theme.primaryColor][7],
primary25: th.colors[th.primaryColor][4], primary25: theme.colors[theme.primaryColor][4],
primary50: th.colors[th.primaryColor][5], primary50: theme.colors[theme.primaryColor][5],
primary75: th.colors[th.primaryColor][6] primary75: theme.colors[theme.primaryColor][6]
}; };
} }
return colors;
}, [theme]);
return ( return (
<Input.Wrapper <Input.Wrapper

7
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,12 +68,14 @@ export function PartCategoryTree({
} }
const mantineTheme = useMantineTheme(); const mantineTheme = useMantineTheme();
const themes: ThemeSettings = useMemo(() => {
const currentTheme = const currentTheme =
mantineTheme.colorScheme === 'dark' mantineTheme.colorScheme === 'dark'
? mantineTheme.colorScheme ? mantineTheme.colorScheme
: mantineTheme.primaryColor; : mantineTheme.primaryColor;
const themes: ThemeSettings = { return {
dark: { dark: {
text: { text: {
...mantineTheme.fn.fontStyles() ...mantineTheme.fn.fontStyles()
@ -104,7 +107,6 @@ export function PartCategoryTree({
hoverBgColor: mantineTheme.colors[currentTheme][2] hoverBgColor: mantineTheme.colors[currentTheme][2]
}, },
leaf: { leaf: {
bgColor: 'initial',
selectedBgColor: mantineTheme.colors[currentTheme][4], selectedBgColor: mantineTheme.colors[currentTheme][4],
hoverBgColor: mantineTheme.colors[currentTheme][2] hoverBgColor: mantineTheme.colors[currentTheme][2]
}, },
@ -115,6 +117,7 @@ export function PartCategoryTree({
} }
} }
}; };
}, [mantineTheme]);
return ( return (
<Drawer <Drawer