reduxjs/redux-devtools
1
1
Fork 0
mirror of https://github.com/reduxjs/redux-devtools.git synced 2025-07-27 08:30:02 +03:00
Code Issues Packages Projects Releases Wiki Activity

stash

Browse Source
This commit is contained in:
Nathan Bierema 2021-06-06 23:44:52 -04:00
parent e7477833f0
commit 41f82fe7f8
4 changed files with 36 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/devui/src/Select/Select.stories.tsx
View File

@ -22,7 +22,10 @@ export default {
component: Select, component: Select,
}; };
type TemplateArgs = Omit<SelectProps, 'value'> & { value: string }; type TemplateArgs = Omit<
SelectProps<{ value: string; label: string }, boolean>,
'value'
> & { value: string };
// eslint-disable-next-line react/prop-types // eslint-disable-next-line react/prop-types
const Template: Story<TemplateArgs> = ({ value, ...args }) => ( const Template: Story<TemplateArgs> = ({ value, ...args }) => (

30
packages/devui/src/Select/Select.tsx
View File

@ -1,17 +1,26 @@
import React, { PureComponent, Component } from 'react'; import React, { PureComponent, Component, ReactElement } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import ReactSelect, { Props as ReactSelectProps } from 'react-select'; import ReactSelect, {
NamedProps as ReactSelectProps,
OptionTypeBase,
} from 'react-select';
import createThemedComponent from '../utils/createThemedComponent'; import createThemedComponent from '../utils/createThemedComponent';
import { Theme } from '../themes/default'; import { Theme } from '../themes/default';
export interface SelectProps extends Omit<ReactSelectProps, 'theme'> { export interface SelectProps<
Option extends OptionTypeBase = OptionTypeBase,
IsMulti extends boolean = false
> extends Omit<ReactSelectProps<Option, IsMulti>, 'theme'> {
theme: 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 extends (PureComponent || Component)<SelectProps> { export class Select<
Option extends OptionTypeBase = OptionTypeBase,
IsMulti extends boolean = false
> extends (PureComponent || Component)<SelectProps<Option, IsMulti>> {
render() { render() {
return ( return (
<ReactSelect <ReactSelect
@ -45,7 +54,7 @@ export class Select extends (PureComponent || Component)<SelectProps> {
}, },
})} })}
styles={{ styles={{
container: (base, props) => ({ container: (base) => ({
...base, ...base,
flexGrow: 1, flexGrow: 1,
}), }),
@ -72,4 +81,13 @@ export class Select extends (PureComponent || Component)<SelectProps> {
}; };
} }
export default createThemedComponent(Select); type SelectComponent = <
Option extends OptionTypeBase = OptionTypeBase,
IsMulti extends boolean = false
>(
props: SelectProps<Option, IsMulti>
) => ReactElement;
export default createThemedComponent(Select) as SelectComponent & {
theme?: Theme;
};

9
packages/redux-devtools-app/src/components/InstanceSelector.tsx
View File

@ -24,8 +24,13 @@ class InstanceSelector extends Component<Props> {
<Select <Select
options={this.select} options={this.select}
// TODO Where's the type-checking? // TODO Where's the type-checking?
onChange={this.props.onSelect} onChange={(option: { value: string }) =>
value={this.props.selected || ''} this.props.onSelect(option.value)
}
value={
this.select.find((option) => option.value === this.props.selected) ||
''
}
/> />
); );
} }

2
packages/redux-devtools-app/webpack.config.ts
View File

@ -82,7 +82,7 @@ module.exports = (env: { development?: boolean; platform?: string } = {}) => ({
hints: false, hints: false,
}, },
devServer: { devServer: {
port: 3000, port: 3001,
}, },
devtool: env.development ? 'eval-source-map' : 'source-map', devtool: env.development ? 'eval-source-map' : 'source-map',
}); });