Skip to content

Instantly share code, notes, and snippets.

@limistah
Last active September 5, 2021 16:39
Show Gist options
  • Save limistah/b91b5429c0a4f8062b26445d12877361 to your computer and use it in GitHub Desktop.
Save limistah/b91b5429c0a4f8062b26445d12877361 to your computer and use it in GitHub Desktop.
ReactJS InplaceEdit component and consumption
import InplaceEdit from "./InplaceEdit"
class App extends React.Component {
render() {
return (
<InplaceEdit
isUpdatingId={true || false}
id={idForTheField || ""}
updateKey={keyToReturnAnObjectWith || ""}
onUpdate={functionToCallForTheUpdate || (() => {})}
text={textForDisplay || ""}
defaultValue={defaultInCaseValueDoesNotMatch || ""}
inputType={htmlInputType || "text"}
selectOptions={
optionForSelectInputType || [
{ value: true, label: "Yes" },
{ value: false, label: "No" },
]
}
valueToText={
functionToConvertFieldValueToText ||
(value => (value === "true" ? "Yes" : "No"))
}
/>
)
}
}
ReactDOM.render(<App />, document.querySelector("#app"))
import React from "react";
const SelectInput = ({ options, onchange, defaultValue, onBlur, disabled }) => {
return (
<select onChange={onBlur} defaultValue={defaultValue} disabled={disabled}>
{options.map(option => {
return <option value={option.value}>{option.label}</option>;
})}
</select>
);
};
const TextInput = ({ type, onchange, defaultValue, onBlur, disabled }) => {
const handleKeyUp = e => {
if (e.keyCode === 13) {
onBlur(e);
}
};
const inputRef = React.useRef();
React.useEffect(() => {
inputRef.current.focus();
}, [inputRef]);
return (
<input
ref={inputRef}
type={type}
defaultValue={defaultValue}
onBlur={onBlur}
disabled={disabled}
onKeyUp={handleKeyUp}
/>
);
};
const EditDisplay = ({
inputType,
onchange,
defaultValue,
selectOptions,
onBlur,
disabled
}) => {
return (
<>
{inputType === "select" && (
<SelectInput
options={selectOptions}
defaultValue={defaultValue}
onchange={onchange}
onBlur={onBlur}
disabled={disabled}
/>
)}
{["text", "password"].includes(inputType) && (
<TextInput
type={inputType}
onchange={onchange}
defaultValue={defaultValue}
onBlur={onBlur}
disabled={disabled}
/>
)}
</>
);
};
const TextDisplay = ({ text }) => <span>{text}</span>;
function InplaceEdit({
isUpdatingId,
text,
defaultValue,
inputType,
selectOptions,
valueToText,
onUpdate,
updateKey,
id
}) {
const [showEditor, updateShowEditor] = React.useState(false);
const [displayText, updateDisplayText] = React.useState(text);
const handleShowEditor = () => {
updateShowEditor(true);
};
const handleEditorInputChange = React.useCallback(e => {
const value = e.currentTarget.value;
const text = typeof valueToText === "function" ? valueToText(value) : value;
updateDisplayText(text);
updateShowEditor(false);
if (defaultValue !== value) {
const handler = typeof onUpdate === "function" ? onUpdate : () => {};
const data = updateKey ? { [updateKey]: value } : value;
handler(data, id);
}
});
return (
<>
<div onClick={handleShowEditor} style={{ cursor: "pointer" }}>
{showEditor ? (
<EditDisplay
inputType={inputType || "text"}
defaultValue={defaultValue}
onBlur={handleEditorInputChange}
selectOptions={selectOptions}
disabled={isUpdatingId === id}
/>
) : (
<TextDisplay text={displayText} />
)}
</div>
</>
);
}
export default InplaceEdit;
export default InplaceEdit;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment