forked from react-bootstrap/react-bootstrap
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[changed] DropdownButton, SplitButton, DropdownMenu, MenuItem complet…
…ely rewritten Adds: - Keyboard Navigation - Aria properties for Assistive Technology - Option to use custom menu with any of the dropdown variations - `NavDropdown` component (Similar to `DropdownButton` but specifically for use within `Nav` components. - `DropdownToggle` Component which can be used as an alternative to the `DropdownButton` `title` prop. Can either be directly imported or used as a static property of the `DropdownButton` with `DropdownButton.Toggle`. _(Useful should you want to use glyphicons or custom html within the toggle that's not a simple string.)_ - `SplitToggle` Similar to the `DropdownToggle` but targeted at the `SplitButton`'s toggle. - Generic `Dropdown` component for easy dropdown customization. Changed: - Event handling of all these components to be in line with react-bootstrap#419 - Written with ES6 class syntax Removed: - DropdownStateMixin - Everything is using ES6 class syntax so no more mixin usage
- Loading branch information
Showing
55 changed files
with
2,150 additions
and
938 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| { | ||
| "src/*.js": { "alternate": "test/{}Spec.js" }, | ||
| "test/*Spec.js": { "alternate": "src/{}.js" } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
|
|
||
| const dropdownInstance = ( | ||
| <ButtonToolbar> | ||
| <Dropdown id='dropdown-custom-1'> | ||
| <Dropdown.Toggle> | ||
| <Glyphicon glyph='star' /> | ||
| Pow! Zoom! | ||
| </Dropdown.Toggle> | ||
| <Dropdown.Menu className='super-colors'> | ||
| <MenuItem eventKey='1'>Action</MenuItem> | ||
| <MenuItem eventKey='2'>Another action</MenuItem> | ||
| <MenuItem eventKey='3' active>Active Item</MenuItem> | ||
| <MenuItem divider /> | ||
| <MenuItem eventKey='4'>Separated link</MenuItem> | ||
| </Dropdown.Menu> | ||
| </Dropdown> | ||
|
|
||
| <Dropdown id='dropdown-custom-2'> | ||
| <Button bsStyle='info'> | ||
| mix it up style-wise | ||
| </Button> | ||
| <Dropdown.Toggle bsStyle='success'/> | ||
| <Dropdown.Menu className='super-colors'> | ||
| <MenuItem eventKey='1'>Action</MenuItem> | ||
| <MenuItem eventKey='2'>Another action</MenuItem> | ||
| <MenuItem eventKey='3' active>Active Item</MenuItem> | ||
| <MenuItem divider /> | ||
| <MenuItem eventKey='4'>Separated link</MenuItem> | ||
| </Dropdown.Menu> | ||
| </Dropdown> | ||
|
|
||
| </ButtonToolbar> | ||
| ); | ||
|
|
||
| React.render(dropdownInstance, mountNode); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,75 @@ | ||
|
|
||
| class CustomMenu extends React.Component { | ||
|
|
||
| constructor(...args){ | ||
| super(...args); | ||
| this.state = { value: '' }; | ||
| this.onChange = e => this.setState({ value: e.target.value }); | ||
| } | ||
|
|
||
| render(){ | ||
| let { className, ...props } = this.props; | ||
|
|
||
| return ( | ||
| <div | ||
| className={'dropdown-menu'} | ||
| style={{ padding: '5px 10px'}} | ||
| > | ||
| <input | ||
| ref={input => this.input = input} | ||
| type='text' | ||
| className='form-control' | ||
| placeholder='type to filter...' | ||
| onChange={this.onChange} | ||
| value={this.state.value} | ||
| /> | ||
| <ul className='list-unstyled'> | ||
| { this.filterChildren() } | ||
| </ul> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| filterChildren(){ | ||
| let { children } = this.props; | ||
| let { value } = this.state; | ||
| let filtered = []; | ||
|
|
||
| let matches = child => child.props.children.indexOf(value) !== -1; | ||
|
|
||
| React.Children.forEach(children, child => { | ||
| if (!value.trim() || matches(child)) { | ||
| filtered.push(child); | ||
| } | ||
| }); | ||
|
|
||
| return filtered; | ||
| } | ||
|
|
||
| focusNext() { | ||
| let input = React.findDOMNode(this.input); | ||
|
|
||
| if (input) { | ||
| input.focus(); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| let preventDefault = e => e.preventDefault(); | ||
|
|
||
| let dropdownExample = ( | ||
| <Dropdown id='dropdown-custom-menu'> | ||
| <a href='#' bsRole='toggle' onClick={preventDefault}> | ||
| custom Toggle | ||
| </a> | ||
|
|
||
| <CustomMenu bsRole='menu'> | ||
| <MenuItem eventKey='1'>Red</MenuItem> | ||
| <MenuItem eventKey='2'>Blue</MenuItem> | ||
| <MenuItem eventKey='3' active>Orange</MenuItem> | ||
| <MenuItem eventKey='1'>Red-Orange</MenuItem> | ||
| </CustomMenu> | ||
| </Dropdown> | ||
| ); | ||
|
|
||
| React.render(dropdownExample, mountNode); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.