reduxjs/redux-devtools
1
1
Fork 0
mirror of https://github.com/reduxjs/redux-devtools.git synced 2025-09-25 13:36:42 +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

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

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

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

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