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

changes

Browse Source
This commit is contained in:
Nathan Bierema 2020-09-02 15:25:51 -04:00
parent cb6398a79f
commit 6647f00141
2 changed files with 25 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
packages/devui/src/Select/Select.js
View File

@ -1,37 +1,32 @@
import React, { PureComponent, Component } from 'react'; import React, { PureComponent, Component } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import ReactSelect from 'react-select'; import ReactSelect from 'react-select';
import createStyledComponent from '../utils/createStyledComponent'; // import createStyledComponent from '../utils/createStyledComponent';
import styles from './styles'; // import styles from './styles';
//
const SelectContainer = createStyledComponent(styles, ReactSelect); // const SelectContainer = createStyledComponent(styles, ReactSelect);
/** /**
* Wrapper around [React Select](https://github.com/JedWatson/react-select) with themes and new props like `openOuterUp` and `menuMaxHeight`. * Wrapper around [React Select](https://github.com/JedWatson/react-select) with themes and new props like `openOuterUp` and `menuMaxHeight`.
*/ */
export default class Select extends (PureComponent || Component) { export default class Select extends (PureComponent || Component) {
render() { render() {
return <SelectContainer {...this.props} />; return <ReactSelect {...this.props} />;
} }
} }
Select.propTypes = { Select.propTypes = {
autosize: PropTypes.bool, // whether to enable autosizing or not isClearable: PropTypes.bool, // should it be possible to reset value
clearable: PropTypes.bool, // should it be possible to reset value isDisabled: PropTypes.bool, // whether the Select is disabled or not
disabled: PropTypes.bool, // whether the Select is disabled or not
isLoading: PropTypes.bool, // whether the Select is loading externally or not isLoading: PropTypes.bool, // whether the Select is loading externally or not
menuMaxHeight: PropTypes.number, // maximum css height for the opened menu of options // menuMaxHeight: PropTypes.number, // maximum css height for the opened menu of options
multi: PropTypes.bool, // multi-value input isMulti: PropTypes.bool, // multi-value input
searchable: PropTypes.bool, // whether to enable searching feature or not isSearchable: PropTypes.bool, // whether to enable searching feature or not
simpleValue: PropTypes.bool, // pass the value with label to onChange
value: PropTypes.any, // initial field value value: PropTypes.any, // initial field value
valueKey: PropTypes.string, // path of the label value in option objects // openOuterUp: PropTypes.bool, // value to control the opening direction
openOuterUp: PropTypes.bool, // value to control the opening direction
}; };
Select.defaultProps = { Select.defaultProps = {
autosize: true, isClearable: false,
clearable: false, // menuMaxHeight: 200,
simpleValue: true,
menuMaxHeight: 200,
}; };

25
packages/devui/src/Select/Select.stories.js
View File

@ -20,25 +20,24 @@ export default {
component: Select, component: Select,
}; };
const Template = (args) => ( const Template = ({ value, ...args }) => (
<Container> <Container>
<Select options={options} {...args} /> <Select
options={options}
value={options.filter((option) => option.value === value)}
{...args}
/>
</Container> </Container>
); );
export const Default = Template.bind({}); export const Default = Template.bind({});
Default.args = { Default.args = {
value: 'one', value: 'one',
menuMaxHeight: 200, // menuMaxHeight: 200,
autosize: false, isClearable: false,
clearable: false, isDisabled: false,
disabled: false,
isLoading: false, isLoading: false,
multi: false, isMulti: false,
searchable: true, isSearchable: true,
openOuterUp: false, // openOuterUp: false,
};
Default.argTypes = {
simpleValue: { control: { disable: true } },
valueKey: { control: { disable: true } },
}; };