reduxjs/redux-devtools
1
1
Fork 0
mirror of https://github.com/reduxjs/redux-devtools.git synced 2025-07-17 11:42:29 +03:00
Code Issues Packages Projects Releases Wiki Activity

Remove createThemedComponent

Browse Source
This commit is contained in:
Nathan Bierema 2025-06-01 07:31:13 -04:00
parent 585d6b9220
commit 2166ef27db
3 changed files with 65 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

140
packages/redux-devtools-ui/src/Select/Select.tsx
View File

@ -1,102 +1,82 @@
import React, { PureComponent, Component, ReactElement } from 'react';
import React from 'react';
import ReactSelect, {
GroupBase,
Props as ReactSelectProps,
} from 'react-select';
import createThemedComponent from '../utils/createThemedComponent';
import { Theme } from '../themes/default';
import { useTheme } from 'styled-components';
// eslint-disable-next-line @typescript-eslint/no-empty-object-type
export interface SelectProps<
Option,
IsMulti extends boolean = false,
Group extends GroupBase<Option> = GroupBase<Option>,
> extends Omit<ReactSelectProps<Option, IsMulti, Group>, 'theme'> {
theme: Theme;
}
> extends Omit<ReactSelectProps<Option, IsMulti, Group>, 'theme'> {}
/**
* Wrapper around [React Select](https://github.com/JedWatson/react-select).
*/
export class Select<
export function Select<
Option,
IsMulti extends boolean = false,
Group extends GroupBase<Option> = GroupBase<Option>,
> extends (PureComponent || Component)<SelectProps<Option, IsMulti, Group>> {
render() {
return (
<ReactSelect
{...this.props}
theme={(theme) => ({
...theme,
borderRadius: 0,
colors: {
...theme.colors,
>(props: SelectProps<Option, IsMulti, Group>) {
const uiTheme = useTheme();
primary: this.props.theme.base05,
primary50: this.props.theme.base03,
primary25: this.props.theme.base01,
return (
<ReactSelect
{...props}
theme={(theme) => ({
...theme,
borderRadius: 0,
colors: {
...theme.colors,
dangerLight: this.props.theme.base03,
danger: this.props.theme.base07,
primary: uiTheme.base05,
primary50: uiTheme.base03,
primary25: uiTheme.base01,
neutral0: this.props.theme.base00,
neutral5: this.props.theme.base01,
neutral10: this.props.theme.base02,
neutral20: this.props.theme.base03,
neutral30: this.props.theme.base04,
neutral40: this.props.theme.base05,
neutral60: this.props.theme.base06,
neutral80: this.props.theme.base07,
},
spacing: {
...theme.spacing,
baseUnit: 2,
controlHeight: this.props.theme.inputHeight,
},
})}
styles={{
container: (base) => ({
...base,
flexGrow: 1,
}),
control: (base, props) => ({
...base,
backgroundColor: props.isFocused
? props.theme.colors.neutral10
: props.theme.colors.neutral5,
dangerLight: uiTheme.base03,
danger: uiTheme.base07,
neutral0: uiTheme.base00,
neutral5: uiTheme.base01,
neutral10: uiTheme.base02,
neutral20: uiTheme.base03,
neutral30: uiTheme.base04,
neutral40: uiTheme.base05,
neutral60: uiTheme.base06,
neutral80: uiTheme.base07,
},
spacing: {
...theme.spacing,
baseUnit: 2,
controlHeight: uiTheme.inputHeight,
},
})}
styles={{
container: (base) => ({
...base,
flexGrow: 1,
}),
control: (base, props) => ({
...base,
backgroundColor: props.isFocused
? props.theme.colors.neutral10
: props.theme.colors.neutral5,
borderColor: props.theme.colors.neutral10,
'&:hover': {
backgroundColor: props.theme.colors.neutral10,
borderColor: props.theme.colors.neutral10,
'&:hover': {
backgroundColor: props.theme.colors.neutral10,
borderColor: props.theme.colors.neutral10,
},
}),
menu: (base) => ({
...base,
zIndex: 10,
}),
}}
/>
);
}
},
}),
menu: (base) => ({
...base,
zIndex: 10,
}),
}}
/>
);
}
export interface ExternalSelectProps<
Option,
IsMulti extends boolean = false,
Group extends GroupBase<Option> = GroupBase<Option>,
> extends Omit<ReactSelectProps<Option, IsMulti, Group>, 'theme'> {
theme?: Theme;
}
type SelectComponent = <
Option,
IsMulti extends boolean = false,
Group extends GroupBase<Option> = GroupBase<Option>,
>(
props: ExternalSelectProps<Option, IsMulti, Group>,
) => ReactElement;
export default createThemedComponent(Select) as SelectComponent & {
theme?: Theme;
};
export default Select;

5
packages/redux-devtools-ui/src/themes/default.ts
View File

@ -18,6 +18,11 @@ export interface Theme extends Base16Theme {
light?: boolean;
}
declare module 'styled-components' {
// eslint-disable-next-line @typescript-eslint/no-empty-object-type
interface DefaultTheme extends Theme {}
}
export default (colors: Base16Theme) => ({
...colors,
fontFamily: "'Source Sans Pro', sans-serif",

23
packages/redux-devtools-ui/src/utils/createThemedComponent.tsx
View File

@ -1,23 +0,0 @@
import React from 'react';
import { withTheme } from 'styled-components';
import type { Base16Theme } from 'react-base16-styling';
import getDefaultTheme, { Theme } from '../themes/default';
export default <C extends React.ComponentType<any>>(
UnthemedComponent: React.ComponentProps<C> extends { theme?: Theme }
? C
: never,
) => {
return withTheme((props) => {
return props.theme && props.theme.type ? (
<UnthemedComponent {...props} />
) : (
<UnthemedComponent
{...props}
theme={getDefaultTheme((props.theme ?? {}) as Base16Theme)}
/>
);
});
};
// TODO: memoize it?