ReactJS InplaceEdit component and consumption

App.js

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"))

InplaceEdit.js

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;