66 lines
1.4 KiB
JavaScript
66 lines
1.4 KiB
JavaScript
|
const helloFactory = function ({ React }) {
|
||
|
const { string, func } = React.PropTypes;
|
||
|
|
||
|
return function Hello(props) {
|
||
|
// React wants propTypes & defaultProps
|
||
|
// to be static.
|
||
|
Hello.propTypes = {
|
||
|
word: string,
|
||
|
mode: string,
|
||
|
|
||
|
actions: React.PropTypes.shape({
|
||
|
setWord: func.isRequired,
|
||
|
setMode: func.isRequired,
|
||
|
}),
|
||
|
};
|
||
|
|
||
|
return {
|
||
|
props, // set props
|
||
|
|
||
|
componentDidUpdate() {
|
||
|
this.refs.wordInput.getDOMNode().focus();
|
||
|
},
|
||
|
|
||
|
render() {
|
||
|
const { word, mode } = this.props;
|
||
|
|
||
|
const { setMode, setWord } = this.props.actions;
|
||
|
|
||
|
const styles = {
|
||
|
displayMode: {
|
||
|
display: mode === "display" ? "inline" : "none",
|
||
|
},
|
||
|
|
||
|
editMode: {
|
||
|
display: mode === "edit" ? "inline" : "none",
|
||
|
},
|
||
|
};
|
||
|
|
||
|
const onKeyUp = function (e) {
|
||
|
if (e.key !== "Enter") return;
|
||
|
|
||
|
setWord(e.target.value);
|
||
|
setMode("display");
|
||
|
};
|
||
|
|
||
|
return (
|
||
|
<p>
|
||
|
Hello,
|
||
|
<span style={styles.displayMode} onClick={() => setMode("edit")}>
|
||
|
{word}!
|
||
|
</span>
|
||
|
<input
|
||
|
ref="wordInput"
|
||
|
style={styles.editMode}
|
||
|
placeholder={word}
|
||
|
onKeyUp={onKeyUp}
|
||
|
/>
|
||
|
</p>
|
||
|
);
|
||
|
},
|
||
|
};
|
||
|
};
|
||
|
};
|
||
|
|
||
|
export default helloFactory;
|