Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(downshift): allow passing additional props to Downshift #2726

Merged
merged 3 commits into from
May 15, 2019
Merged

feat(downshift): allow passing additional props to Downshift #2726

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
05c5be8
feat(downshift): allow passing additional props to Downshift
mediamonks-stuart May 14, 2019
edf054e
Merge branch 'master' into pass-downshift-props
emyarod May 15, 2019
4671da2
Merge branch 'master' into pass-downshift-props
emyarod May 15, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions packages/react/src/components/ComboBox/ComboBox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,6 +146,11 @@ export default class ComboBox extends React.Component {
* should use "light theme" (white background)?
*/
light: PropTypes.bool,

/**
* Additional props passed to Downshift
*/
downshiftProps: Downshift.propTypes,
};

static defaultProps = {
Expand Down Expand Up @@ -237,6 +242,7 @@ export default class ComboBox extends React.Component {
shouldFilterItem, // eslint-disable-line no-unused-vars
onChange, // eslint-disable-line no-unused-vars
onInputChange, // eslint-disable-line no-unused-vars
downshiftProps,
...rest
} = this.props;
const className = cx(`${prefix}--combo-box`, containerClassName);
Expand All @@ -257,6 +263,7 @@ export default class ComboBox extends React.Component {
const wrapperClasses = cx(`${prefix}--list-box__wrapper`);
const input = (
<Downshift
{...downshiftProps}
onChange={this.handleOnChange}
onInputValueChange={this.handleOnInputValueChange}
inputValue={this.state.inputValue || ''}
Expand Down
7 changes: 7 additions & 0 deletions packages/react/src/components/Dropdown/Dropdown.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,6 +126,11 @@ export default class Dropdown extends React.Component {
* additional help
*/
helperText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),

/**
* Additional props passed to Downshift
*/
downshiftProps: Downshift.propTypes,
};

static defaultProps = {
Expand Down Expand Up @@ -163,6 +168,7 @@ export default class Dropdown extends React.Component {
light,
invalid,
invalidText,
downshiftProps,
} = this.props;
const inline = type === 'inline';
const className = ({ isOpen }) =>
Expand Down Expand Up @@ -205,6 +211,7 @@ export default class Dropdown extends React.Component {
{title}
{!inline && helper}
<Downshift
{...downshiftProps}
onChange={this.handleOnChange}
itemToString={itemToString}
defaultSelectedItem={initialSelectedItem}
Expand Down
7 changes: 7 additions & 0 deletions packages/react/src/components/MultiSelect/FilterableMultiSelect.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,11 @@ export default class FilterableMultiSelect extends React.Component {
* Callback function for translating ListBoxMenuIcon SVG title
*/
translateWithId: PropTypes.func,

/**
* Additional props passed to Downshift
*/
downshiftProps: Downshift.propTypes,
};

static getDerivedStateFromProps({ open }, state) {
Expand Down Expand Up @@ -256,6 +261,7 @@ export default class FilterableMultiSelect extends React.Component {
invalid,
invalidText,
translateWithId,
downshiftProps,
} = this.props;
const inline = type === 'inline';
const wrapperClasses = cx(
Expand Down Expand Up @@ -289,6 +295,7 @@ export default class FilterableMultiSelect extends React.Component {
initialSelectedItems={initialSelectedItems}
render={({ selectedItems, onItemChange, clearSelection }) => (
<Downshift
{...downshiftProps}
highlightedIndex={highlightedIndex}
isOpen={isOpen}
inputValue={inputValue}
Expand Down
7 changes: 7 additions & 0 deletions packages/react/src/components/MultiSelect/MultiSelect.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,11 @@ export default class MultiSelect extends React.Component {
* `top-after-reopen`: selected item jump to top after reopen dropdown
*/
selectionFeedback: PropTypes.oneOf(['top', 'fixed', 'top-after-reopen']),

/**
* Additional props passed to Downshift
*/
downshiftProps: Downshift.propTypes,
};

static getDerivedStateFromProps({ open }, state) {
Expand Down Expand Up @@ -226,6 +231,7 @@ export default class MultiSelect extends React.Component {
invalidText,
useTitleInItem,
translateWithId,
downshiftProps,
} = this.props;
const inline = type === 'inline';
const wrapperClasses = cx(
Expand Down Expand Up @@ -261,6 +267,7 @@ export default class MultiSelect extends React.Component {
initialSelectedItems={initialSelectedItems}
render={({ selectedItems, onItemChange, clearSelection }) => (
<Downshift
{...downshiftProps}
highlightedIndex={highlightedIndex}
isOpen={isOpen}
itemToString={itemToString}
Expand Down