mirror of
https://github.com/numtide/treefmt.git
synced 2024-09-17 20:07:59 +03:00
12452b01b6
Prevent unnecessary reformatting
69 lines
1.9 KiB
JavaScript
69 lines
1.9 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;
|