Last active
June 30, 2017 16:25
-
-
Save joeporpeglia/aab0f72ed26959a95575c6a246d89049 to your computer and use it in GitHub Desktop.
Component Reusability
This file contains hidden or 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
| document | |
| .querySelector('.btn-save') | |
| .addEventListener( | |
| 'click', | |
| handleSave | |
| ); | |
| const isSaving = false; | |
| const handleSave = () => { | |
| if (isSaving) { | |
| return; | |
| } | |
| isSaving = true; | |
| showLoader(); | |
| saveForm(); | |
| }; |
This file contains hidden or 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
| document | |
| .querySelector('.btn-save') | |
| .addEventListener( | |
| 'click', | |
| handleSave | |
| ); | |
| const isSaving = false; | |
| const handleSave = () => { | |
| if (isSaving) { | |
| return; | |
| } | |
| isSaving = true; | |
| saveForm(); | |
| }; |
This file contains hidden or 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
| document | |
| .querySelector('.btn-save') | |
| .addEventListener( | |
| 'click', | |
| handleSave | |
| ); | |
| const handleSave = () => { | |
| saveForm(); | |
| }; |
This file contains hidden or 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
| const composed = () => outer(inner()); | |
| const Composed = () => ( | |
| <Outer> | |
| <Inner /> | |
| </Outer> | |
| ); | |
| const Composed = () => ( | |
| <Outer children={<Inner />} /> | |
| ); |
This file contains hidden or 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
| type DropdownProps = { | |
| expanded: boolean, | |
| value: string | number, | |
| options: { [optionValue: string | number]: string | React$Element }, | |
| }; | |
| const Dropdown = props => ( | |
| <div> | |
| <button aria-haspopup="true" aria-expanded={props.expanded}> | |
| {props.options[props.value]} | |
| </button> | |
| <ul aria-hidden={!props.expanded}> | |
| {Object.keys(props.options).map(value => ( | |
| <li key={value}> | |
| {props.options[value]} | |
| </li> | |
| ))} | |
| </ul> | |
| </div> | |
| ); |
This file contains hidden or 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
| type DropdownProps = { | |
| className: string, | |
| options: Array<string> | |
| | Array<number> | |
| | Array<{ label: React$Element, value: string | number }> | |
| onChange: Function, | |
| placeholder: string | Element, | |
| value: string | number, | |
| defaultValue: string | number, | |
| readOnly: boolean, | |
| optionsMaxHeight: number, | |
| calculateWidth: boolean, | |
| }; |
This file contains hidden or 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
| .btn-save { | |
| background: #1ab7ea; | |
| color: #ffffff; | |
| } |
This file contains hidden or 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
| <form> | |
| <button class=”btn-save”> | |
| Save | |
| </button> | |
| </form> |
This file contains hidden or 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
| const withDropdownHandlers = WrappedComponent => { | |
| return props => ( | |
| <WrappedComponent | |
| {...props} | |
| onExpand={() => props.setExpanded(true)} | |
| onCollapse={() => props.setExpanded(false)} | |
| onChange={props.setValue} | |
| /> | |
| ); | |
| }; |
This file contains hidden or 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
| const withDropdownState = WrappedComponent => { | |
| return class extends Component { | |
| render() { | |
| return ( | |
| <WrappedComponent | |
| {...this.props} | |
| expanded={this.state.expanded} | |
| value={this.state.value} | |
| setExpanded={expanded => this.setState({ expanded })} | |
| setValue={value => this.setState({ value })} | |
| /> | |
| ); | |
| } | |
| }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment