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
static getDerivedStateFromProps(props, state) { | |
let newState = null; | |
if (props.value !== state.prevValue) { | |
newState = { prevValue: props.value }; | |
if (props.value !== state.value) { | |
newState.value = props.value; | |
} | |
} | |
return newState; | |
} |
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
class ShouldNotUpdate extends React.Component { | |
shouldComponentUpdate(nextProps, nextState) { | |
return this.props.type !== nextProps.type; | |
} | |
render() { | |
return 'I am rendering...'; | |
} | |
} |
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
static getDerivedStateFromProps(props, state) { | |
return makeControllable(props, state, 'value'); | |
} |
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
componentWillReceiveProps(nextProps) { | |
const { value } = nextProps; | |
if (this.props.value !== value && this.state.value !== value) { | |
this.setState({ value }); | |
} | |
} |
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
selectTab(e, value) { | |
this.props.onChange(e, value); | |
} |
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
isSelected(tab) { | |
return tab.props.value === this.props.value; | |
} |
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
selectTab(e, value) { | |
this.setState({ value }); | |
this.props.onChange(e, value); | |
} |
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
isSelected(tab) { | |
return tab.props.value === this.state.value; | |
} |
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
getHeader(tabs) { | |
return tabs.map((tab, i) => { | |
const style = this.isSelected(tab) ? activeTabHeaderStyle : tabHeaderStyle; | |
return ( | |
<span | |
key={tab.props.value} | |
onClick={e => this.selectTab(e, tab.props.value)} | |
style={i === 0 ? style : Object.assign({}, style, sideHeaderStyle)} | |
> | |
{tab.props.header} |
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
<Tabs> | |
<Tab value="banana" header="Banana Header">Banana</Tab> | |
<Tab value="apple" header="Apple Header">Apple</Tab> | |
</Tabs> |
NewerOlder