Skip to content

Instantly share code, notes, and snippets.

@streamich
Forked from trueadm/1-future-ideas.js
Created March 4, 2018 12:21
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save streamich/b983b248223f36105f064bc184fe0964 to your computer and use it in GitHub Desktop.
Save streamich/b983b248223f36105f064bc184fe0964 to your computer and use it in GitHub Desktop.
const React = require("react");
const Lifecycles = React.createLifecycleEvents({
didMount({ setState }) {
setState({
disabled: false,
});
},
didUpdate({ inputRef }) {
if (document.activeElement !== inputRef.value) {
inputRef.value.focus();
}
}
});
// pass in initial state
const State = React.createState({
disabled: true,
text: "",
});
function TextboxView(props) {
const inputRef = React.createRef();
return (
<State>
{(state, setState) => (
<Lifecycles inputRef={inputRef} setState={setState}>
<input
{...props}
ref={inputRef}
disabled={state.disabled}
onChange={e => setState({text: e.target.value})}
value={state.text}
/>
</Lifecycles>
)}
</State>
);
}
const React = require("react");
const Lifecycles = React.createLifecycleEvents({
componentDidMount({ setState }) {
setState({
disabled: false,
});
},
componentDidUpdate({ inputRef }) {
if (document.activeElement !== inputRef.value) {
inputRef.value.focus();
}
}
});
const State = React.createState({
disabled: true,
text: "",
});
function ListView() {
const inputRef = React.createRef();
// "adopt" could be sugar syntax for React's callReturn functionality
const { state, setState } = adopt <State />;
return (
<Lifecycles inputRef={inputRef} setState={setState}>
<input
ref={inputRef}
disabled={state.disabled}
onChange={e => setState({text: e.target.value})}
value={state.text}
/>
</Lifecycles>
)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment