react-edit-text - npm Package Compare versions

Comparing version 4.3.0 to 4.4.0

dist/index.js

@@ -24,8 +24,49 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
-function _inheritsLoose(subClass, superClass) {
-  subClass.prototype = Object.create(superClass.prototype);
-  subClass.prototype.constructor = subClass;
-  subClass.__proto__ = superClass;
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
 }
 
+var styles = {"label":"_3sXmF","textareaView":"_ygkSb","shared":"_1EEDX","placeholder":"_3qwMT","inline":"_3F-ST","readonly":"_38077","displayContainer":"_2_49w","editButton":"_PG2W0"};
+
+var Input = function Input(_ref) {
+  var _classnames;
+
+  var _ref$props = _ref.props,
+      id = _ref$props.id,
+      inline = _ref$props.inline,
+      className = _ref$props.className,
+      style = _ref$props.style,
+      type = _ref$props.type,
+      name = _ref$props.name,
+      inputRef = _ref.inputRef,
+      handleBlur = _ref.handleBlur,
+      handleKeydown = _ref.handleKeydown,
+      handleFocus = _ref.handleFocus,
+      rest = _objectWithoutPropertiesLoose(_ref, ["props", "inputRef", "handleBlur", "handleKeydown", "handleFocus"]);
+
+  return /*#__PURE__*/React.createElement("input", _extends({
+    id: id,
+    className: classnames(styles.shared, (_classnames = {}, _classnames[styles.inline] = inline, _classnames), className),
+    style: style,
+    ref: inputRef,
+    type: type,
+    name: name,
+    onBlur: handleBlur,
+    onKeyDown: handleKeydown,
+    autoFocus: true,
+    onFocus: handleFocus
+  }, rest));
+};
+
 function createCommonjsModule(fn, module) {
@@ -1108,2 +1149,11 @@ return module = { exports: {} }, fn(module, module.exports), module.exports;
 
+var EditIcon = function EditIcon() {
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 512 512"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M421.7 220.3L188.5 453.4L154.6 419.5L158.1 416H112C103.2 416 96 408.8 96 400V353.9L92.51 357.4C87.78 362.2 84.31 368 82.42 374.4L59.44 452.6L137.6 429.6C143.1 427.7 149.8 424.2 154.6 419.5L188.5 453.4C178.1 463.8 165.2 471.5 151.1 475.6L30.77 511C22.35 513.5 13.24 511.2 7.03 504.1C.8198 498.8-1.502 489.7 .976 481.2L36.37 360.9C40.53 346.8 48.16 333.9 58.57 323.5L291.7 90.34L421.7 220.3zM492.7 58.75C517.7 83.74 517.7 124.3 492.7 149.3L444.3 197.7L314.3 67.72L362.7 19.32C387.7-5.678 428.3-5.678 453.3 19.32L492.7 58.75z"
+  }));
+};
+
 var sharedDefaultProps = {
@@ -1143,7 +1193,13 @@ id: undefined,
   type: propTypes.string,
-  inline: propTypes.bool
+  inline: propTypes.bool,
+  showEditButton: propTypes.bool,
+  editButtonContent: propTypes.any,
+  editButtonProps: propTypes.object
 });
 var EditTextDefaultProps = _extends({}, sharedDefaultProps, {
   type: 'text',
-  inline: false
+  inline: false,
+  showEditButton: false,
+  editButtonContent: /*#__PURE__*/React.createElement(EditIcon, null),
+  editButtonProps: {}
 });
@@ -1157,170 +1213,179 @@ var EditTextareaPropTypes = _extends({}, sharedPropTypes, {
 
-var styles = {"label":"_3sXmF","textareaView":"_ygkSb","shared":"_1EEDX","placeholder":"_3qwMT","inline":"_3F-ST","readonly":"_38077"};
+function EditText(_ref) {
+  var id = _ref.id,
+      name = _ref.name,
+      className = _ref.className,
+      placeholder = _ref.placeholder,
+      inline = _ref.inline,
+      style = _ref.style,
+      readonly = _ref.readonly,
+      type = _ref.type,
+      value = _ref.value,
+      defaultValue = _ref.defaultValue,
+      formatDisplayText = _ref.formatDisplayText,
+      onEditMode = _ref.onEditMode,
+      _onChange = _ref.onChange,
+      onSave = _ref.onSave,
+      onBlur = _ref.onBlur,
+      showEditButton = _ref.showEditButton,
+      editButtonContent = _ref.editButtonContent,
+      editButtonProps = _ref.editButtonProps;
+  var inputRef = React.useRef(null);
 
-var EditText = /*#__PURE__*/function (_React$Component) {
-  _inheritsLoose(EditText, _React$Component);
+  var _React$useState = React.useState(''),
+      previousValue = _React$useState[0],
+      setPreviousValue = _React$useState[1];
 
-  function EditText(props) {
-    var _this;
+  var _React$useState2 = React.useState(''),
+      savedText = _React$useState2[0],
+      setSavedText = _React$useState2[1];
 
-    _this = _React$Component.call(this, props) || this;
+  var _React$useState3 = React.useState(false),
+      editMode = _React$useState3[0],
+      setEditMode = _React$useState3[1];
 
-    _this.handleClick = function () {
-      if (_this.props.readonly) return;
+  React.useEffect(function () {
+    if (defaultValue !== undefined) {
+      setPreviousValue(defaultValue);
+      setSavedText(defaultValue);
+    }
+  }, [defaultValue]);
+  React.useEffect(function () {
+    if (value !== undefined) {
+      setSavedText(value);
 
-      _this.setState({
-        editMode: true
-      });
+      if (!editMode) {
+        setPreviousValue(value);
+      }
+    }
+  }, [value, editMode]);
 
-      _this.props.onEditMode();
-    };
+  var handleClickDisplay = function handleClickDisplay() {
+    if (readonly || showEditButton) return;
+    setEditMode(true);
+    onEditMode();
+  };
 
-    _this.handleBlur = function (save) {
-      if (save === void 0) {
-        save = true;
-      }
+  var handleClickEditButton = function handleClickEditButton() {
+    setEditMode(true);
+    onEditMode();
+  };
 
-      if (_this.inputRef.current) {
-        var _this$inputRef$curren = _this.inputRef.current,
-            name = _this$inputRef$curren.name,
-            value = _this$inputRef$curren.value;
+  var handleBlur = function handleBlur(save) {
+    if (save === void 0) {
+      save = true;
+    }
 
-        if (save && _this.state.previousValue !== value) {
-          _this.props.onSave({
-            name: name,
-            value: value,
-            previousValue: _this.state.previousValue
-          });
+    if (inputRef.current) {
+      var _inputRef$current = inputRef.current,
+          inputName = _inputRef$current.name,
+          inputValue = _inputRef$current.value;
 
-          _this.setState({
-            savedText: value,
-            previousValue: value
-          });
-        } else if (!save) {
-          if (_this.props.onChange) {
-            _this.props.onChange(_this.state.previousValue);
-          }
-        }
-
-        _this.setState({
-          editMode: false
+      if (save && previousValue !== inputValue) {
+        onSave({
+          name: inputName,
+          value: inputValue,
+          previousValue: previousValue
         });
-
-        _this.props.onBlur();
+        setSavedText(inputValue);
+        setPreviousValue(inputValue);
+      } else if (!save) {
+        _onChange(previousValue);
       }
-    };
 
-    _this.handleKeydown = function (e) {
-      if (e.keyCode === 13 || e.charCode === 13) {
-        _this.handleBlur();
-      } else if (e.keyCode === 27 || e.charCode === 27) {
-        _this.handleBlur(false);
-      }
-    };
+      setEditMode(false);
+      onBlur();
+    }
+  };
 
-    _this.handleFocus = function (e) {
-      if (_this.props.type === 'text') {
-        e.currentTarget.setSelectionRange(e.currentTarget.value.length, e.currentTarget.value.length);
-      }
-    };
+  var handleKeydown = function handleKeydown(e) {
+    if (e.keyCode === 13 || e.charCode === 13) {
+      handleBlur();
+    } else if (e.keyCode === 27 || e.charCode === 27) {
+      handleBlur(false);
+    }
+  };
 
-    _this.state = {
-      previousValue: props.defaultValue || '',
-      savedText: props.defaultValue || '',
-      editMode: false
-    };
-    _this.inputRef = React.createRef();
-    return _this;
-  }
-
-  EditText.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
-    if (props.value !== state.savedText && props.value !== undefined) {
-      if (state.editMode) {
-        return {
-          savedText: props.value
-        };
-      } else {
-        return {
-          previousValue: props.value,
-          savedText: props.value
-        };
-      }
+  var handleFocus = function handleFocus(e) {
+    if (type === 'text') {
+      e.currentTarget.setSelectionRange(e.currentTarget.value.length, e.currentTarget.value.length);
     }
-
-    return null;
   };
 
-  var _proto = EditText.prototype;
+  var renderDisplayMode = function renderDisplayMode() {
+    var _classnames, _classnames2;
 
-  _proto.render = function render() {
-    var _this$props = this.props,
-        id = _this$props.id,
-        className = _this$props.className,
-        name = _this$props.name,
-        type = _this$props.type,
-        placeholder = _this$props.placeholder,
-        inline = _this$props.inline,
-        style = _this$props.style,
-        readonly = _this$props.readonly,
-        value = _this$props.value,
-        formatDisplayText = _this$props.formatDisplayText,
-        _onChange = _this$props.onChange;
-    var _this$state = this.state,
-        editMode = _this$state.editMode,
-        savedText = _this$state.savedText;
+    return /*#__PURE__*/React.createElement("div", {
+      className: classnames(styles.displayContainer, (_classnames = {}, _classnames[styles.inline] = inline, _classnames))
+    }, /*#__PURE__*/React.createElement("div", {
+      id: id,
+      className: classnames(styles.label, styles.shared, (_classnames2 = {}, _classnames2[styles.placeholder] = placeholder && !savedText, _classnames2[styles.inline] = inline, _classnames2[styles.readonly] = readonly || showEditButton, _classnames2), className),
+      onClick: handleClickDisplay,
+      style: style
+    }, formatDisplayText(savedText) || placeholder), showEditButton && !readonly && /*#__PURE__*/React.createElement("button", _extends({
+      type: "button",
+      className: styles.editButton
+    }, editButtonProps, {
+      onClick: handleClickEditButton
+    }), editButtonContent));
+  };
 
-    if (!readonly && editMode) {
-      if (value !== undefined) {
-        var _classnames;
-
-        return /*#__PURE__*/React.createElement("input", {
-          id: id,
-          className: classnames(styles.shared, (_classnames = {}, _classnames[styles.inline] = inline, _classnames), className),
-          style: style,
-          ref: this.inputRef,
-          type: type,
-          name: name,
-          onBlur: this.handleBlur,
-          onKeyDown: this.handleKeydown,
-          value: value,
-          onChange: function onChange(e) {
-            _onChange(e.target.value);
-          },
-          autoFocus: true,
-          onFocus: this.handleFocus
-        });
-      } else {
-        var _classnames2;
-
-        return /*#__PURE__*/React.createElement("input", {
-          id: id,
-          className: classnames(styles.shared, (_classnames2 = {}, _classnames2[styles.inline] = inline, _classnames2), className),
-          style: style,
-          ref: this.inputRef,
-          type: type,
-          name: name,
-          onBlur: this.handleBlur,
-          onKeyDown: this.handleKeydown,
-          defaultValue: savedText,
-          autoFocus: true,
-          onFocus: this.handleFocus
-        });
+  var renderEditMode = function renderEditMode(controlled) {
+    var sharedProps = {
+      inputRef: inputRef,
+      handleBlur: handleBlur,
+      handleKeydown: handleKeydown,
+      handleFocus: handleFocus,
+      props: {
+        id: id,
+        inline: inline,
+        className: className,
+        style: style,
+        type: type,
+        name: name
       }
-    } else {
-      var _classnames3;
-
-      return /*#__PURE__*/React.createElement("div", {
-        id: id,
-        className: classnames(styles.shared, styles.label, (_classnames3 = {}, _classnames3[styles.placeholder] = placeholder && !savedText, _classnames3[styles.inline] = inline, _classnames3[styles.readonly] = readonly, _classnames3), className),
-        onClick: this.handleClick,
-        style: style
-      }, formatDisplayText(savedText) || placeholder);
-    }
+    };
+    return controlled ? /*#__PURE__*/React.createElement(Input, _extends({}, sharedProps, {
+      value: value,
+      onChange: function onChange(e) {
+        _onChange(e.target.value);
+      }
+    })) : /*#__PURE__*/React.createElement(Input, _extends({}, sharedProps, {
+      defaultValue: savedText
+    }));
   };
 
-  return EditText;
-}(React.Component);
+  return !readonly && editMode ? renderEditMode(value !== undefined) : renderDisplayMode();
+}
 EditText.defaultProps = EditTextDefaultProps;
 EditText.propTypes = EditTextPropTypes;
 
+var Textarea = function Textarea(_ref) {
+  var _ref$props = _ref.props,
+      id = _ref$props.id,
+      rows = _ref$props.rows,
+      className = _ref$props.className,
+      style = _ref$props.style,
+      name = _ref$props.name,
+      inputRef = _ref.inputRef,
+      handleBlur = _ref.handleBlur,
+      handleKeydown = _ref.handleKeydown,
+      rest = _objectWithoutPropertiesLoose(_ref, ["props", "inputRef", "handleBlur", "handleKeydown"]);
+
+  return /*#__PURE__*/React.createElement("textarea", _extends({
+    id: id,
+    className: classnames(styles.shared, className),
+    style: style,
+    ref: inputRef,
+    rows: rows,
+    name: name,
+    onBlur: handleBlur,
+    onKeyDown: handleKeydown,
+    autoFocus: true,
+    onFocus: function onFocus(e) {
+      return e.currentTarget.setSelectionRange(e.currentTarget.value.length, e.currentTarget.value.length);
+    }
+  }, rest));
+};
+
 var splitLines = function splitLines(val) {
@@ -1330,165 +1395,129 @@ return val ? val.split(/\r?\n/) : [];
 
-var EditTextarea = /*#__PURE__*/function (_React$Component) {
-  _inheritsLoose(EditTextarea, _React$Component);
+function EditTextarea(_ref) {
+  var id = _ref.id,
+      rows = _ref.rows,
+      name = _ref.name,
+      className = _ref.className,
+      placeholder = _ref.placeholder,
+      style = _ref.style,
+      readonly = _ref.readonly,
+      value = _ref.value,
+      defaultValue = _ref.defaultValue,
+      formatDisplayText = _ref.formatDisplayText,
+      onEditMode = _ref.onEditMode,
+      _onChange = _ref.onChange,
+      onSave = _ref.onSave,
+      onBlur = _ref.onBlur;
+  var inputRef = React.useRef(null);
 
-  function EditTextarea(props) {
-    var _this;
+  var _React$useState = React.useState(''),
+      previousValue = _React$useState[0],
+      setPreviousValue = _React$useState[1];
 
-    _this = _React$Component.call(this, props) || this;
+  var _React$useState2 = React.useState(''),
+      savedText = _React$useState2[0],
+      setSavedText = _React$useState2[1];
 
-    _this.handleClick = function () {
-      if (_this.props.readonly) return;
+  var _React$useState3 = React.useState(false),
+      editMode = _React$useState3[0],
+      setEditMode = _React$useState3[1];
 
-      _this.setState({
-        editMode: true
-      });
+  React.useEffect(function () {
+    if (defaultValue !== undefined) {
+      setPreviousValue(defaultValue);
+      setSavedText(defaultValue);
+    }
+  }, [defaultValue]);
+  React.useEffect(function () {
+    if (value !== undefined) {
+      setSavedText(value);
 
-      _this.props.onEditMode();
-    };
-
-    _this.handleBlur = function (save) {
-      if (save === void 0) {
-        save = true;
+      if (!editMode) {
+        setPreviousValue(value);
       }
+    }
+  }, [value, editMode]);
 
-      if (_this.inputRef.current) {
-        var _this$inputRef$curren = _this.inputRef.current,
-            name = _this$inputRef$curren.name,
-            value = _this$inputRef$curren.value;
+  var handleClick = function handleClick() {
+    if (readonly) return;
+    setEditMode(true);
+    onEditMode();
+  };
 
-        if (save && _this.state.previousValue !== value) {
-          _this.props.onSave({
-            name: name,
-            value: value,
-            previousValue: _this.state.previousValue
-          });
+  var handleBlur = function handleBlur(save) {
+    if (save === void 0) {
+      save = true;
+    }
 
-          _this.setState({
-            previousValue: value,
-            savedText: value
-          });
-        } else if (!save) {
-          if (_this.props.onChange) {
-            _this.props.onChange(_this.state.previousValue);
-          }
-        }
+    if (inputRef.current) {
+      var _inputRef$current = inputRef.current,
+          inputName = _inputRef$current.name,
+          inputValue = _inputRef$current.value;
 
-        _this.setState({
-          editMode: false
+      if (save && previousValue !== inputValue) {
+        onSave({
+          name: inputName,
+          value: inputValue,
+          previousValue: previousValue
         });
-
-        _this.props.onBlur();
+        setSavedText(inputValue);
+        setPreviousValue(inputValue);
+      } else if (!save) {
+        _onChange(previousValue);
       }
-    };
 
-    _this.handleKeydown = function (e) {
-      if (e.keyCode === 27 || e.charCode === 27) {
-        _this.handleBlur(false);
-      }
-    };
+      setEditMode(false);
+      onBlur();
+    }
+  };
 
-    _this.state = {
-      previousValue: props.defaultValue || '',
-      savedText: props.defaultValue || '',
-      editMode: false
-    };
-    _this.inputRef = React.createRef();
-    return _this;
-  }
-
-  EditTextarea.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
-    if (props.value !== state.savedText && props.value !== undefined) {
-      if (state.editMode) {
-        return {
-          savedText: props.value
-        };
-      } else {
-        return {
-          previousValue: props.value,
-          savedText: props.value
-        };
-      }
+  var handleKeydown = function handleKeydown(e) {
+    if (e.keyCode === 27 || e.charCode === 27) {
+      handleBlur(false);
     }
-
-    return null;
   };
 
-  var _proto = EditTextarea.prototype;
+  var renderDisplayMode = function renderDisplayMode() {
+    var _classnames;
 
-  _proto.render = function render() {
-    var _this$props = this.props,
-        id = _this$props.id,
-        className = _this$props.className,
-        name = _this$props.name,
-        rows = _this$props.rows,
-        placeholder = _this$props.placeholder,
-        style = _this$props.style,
-        readonly = _this$props.readonly,
-        _onChange = _this$props.onChange,
-        value = _this$props.value,
-        formatDisplayText = _this$props.formatDisplayText;
-    var _this$state = this.state,
-        editMode = _this$state.editMode,
-        savedText = _this$state.savedText;
+    var textLines = splitLines(formatDisplayText(savedText));
+    return /*#__PURE__*/React.createElement("div", {
+      id: id,
+      className: classnames(styles.shared, styles.textareaView, (_classnames = {}, _classnames[styles.placeholder] = placeholder && !savedText, _classnames[styles.readonly] = readonly, _classnames), className),
+      onClick: handleClick,
+      style: _extends({}, style, {
+        height: rows * 24 + 16 + "px"
+      })
+    }, textLines.length > 0 ? textLines.map(function (text, index) {
+      return /*#__PURE__*/React.createElement(React.Fragment, {
+        key: index
+      }, /*#__PURE__*/React.createElement("span", null, text), /*#__PURE__*/React.createElement("br", null));
+    }) : /*#__PURE__*/React.createElement("span", null, placeholder));
+  };
 
-    var viewStyle = _extends({}, style, {
-      height: rows * 24 + 16 + "px"
-    });
-
-    if (!readonly && editMode) {
-      if (value !== undefined) {
-        return /*#__PURE__*/React.createElement("textarea", {
-          id: id,
-          className: classnames(styles.shared, className),
-          style: style,
-          ref: this.inputRef,
-          rows: rows,
-          name: name,
-          onBlur: this.handleBlur,
-          onKeyDown: this.handleKeydown,
-          value: value,
-          onChange: function onChange(e) {
-            _onChange(e.target.value);
-          },
-          autoFocus: true,
-          onFocus: function onFocus(e) {
-            return e.currentTarget.setSelectionRange(e.currentTarget.value.length, e.currentTarget.value.length);
-          }
-        });
-      } else {
-        return /*#__PURE__*/React.createElement("textarea", {
-          id: id,
-          className: classnames(styles.shared, className),
-          style: style,
-          ref: this.inputRef,
-          rows: rows,
-          name: name,
-          onBlur: this.handleBlur,
-          onKeyDown: this.handleKeydown,
-          defaultValue: savedText,
-          autoFocus: true,
-          onFocus: function onFocus(e) {
-            return e.currentTarget.setSelectionRange(e.currentTarget.value.length, e.currentTarget.value.length);
-          }
-        });
+  var renderEditMode = function renderEditMode(controlled) {
+    var sharedProps = {
+      inputRef: inputRef,
+      handleBlur: handleBlur,
+      handleKeydown: handleKeydown,
+      props: {
+        id: id,
+        rows: rows,
+        className: className,
+        style: style,
+        name: name
       }
-    } else {
-      var _classnames;
-
-      var textLines = splitLines(formatDisplayText(savedText));
-      return /*#__PURE__*/React.createElement("div", {
-        id: id,
-        className: classnames(styles.shared, styles.textareaView, (_classnames = {}, _classnames[styles.placeholder] = placeholder && !savedText, _classnames[styles.readonly] = readonly, _classnames), className),
-        onClick: this.handleClick,
-        style: viewStyle
-      }, textLines.length > 0 ? textLines.map(function (text, index) {
-        return /*#__PURE__*/React.createElement(React.Fragment, {
-          key: index
-        }, /*#__PURE__*/React.createElement("span", null, text), /*#__PURE__*/React.createElement("br", null));
-      }) : /*#__PURE__*/React.createElement("span", null, placeholder));
-    }
+    };
+    return controlled ? /*#__PURE__*/React.createElement(Textarea, _extends({}, sharedProps, {
+      value: value,
+      onChange: function onChange(e) {
+        _onChange(e.target.value);
+      }
+    })) : /*#__PURE__*/React.createElement(Textarea, _extends({}, sharedProps, {
+      defaultValue: savedText
+    }));
   };
 
-  return EditTextarea;
-}(React.Component);
+  return !readonly && editMode ? renderEditMode(value !== undefined) : renderDisplayMode();
+}
 EditTextarea.defaultProps = EditTextareaDefaultProps;
@@ -1495,0 +1524,0 @@ EditTextarea.propTypes = EditTextareaPropTypes;

dist/index.modern.js

@@ -22,8 +22,49 @@ import classnames from 'classnames';
 
-function _inheritsLoose(subClass, superClass) {
-  subClass.prototype = Object.create(superClass.prototype);
-  subClass.prototype.constructor = subClass;
-  subClass.__proto__ = superClass;
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
 }
 
+var styles = {"label":"_3sXmF","textareaView":"_ygkSb","shared":"_1EEDX","placeholder":"_3qwMT","inline":"_3F-ST","readonly":"_38077","displayContainer":"_2_49w","editButton":"_PG2W0"};
+
+var Input = function Input(_ref) {
+  var _classnames;
+
+  var _ref$props = _ref.props,
+      id = _ref$props.id,
+      inline = _ref$props.inline,
+      className = _ref$props.className,
+      style = _ref$props.style,
+      type = _ref$props.type,
+      name = _ref$props.name,
+      inputRef = _ref.inputRef,
+      handleBlur = _ref.handleBlur,
+      handleKeydown = _ref.handleKeydown,
+      handleFocus = _ref.handleFocus,
+      rest = _objectWithoutPropertiesLoose(_ref, ["props", "inputRef", "handleBlur", "handleKeydown", "handleFocus"]);
+
+  return /*#__PURE__*/React.createElement("input", _extends({
+    id: id,
+    className: classnames(styles.shared, (_classnames = {}, _classnames[styles.inline] = inline, _classnames), className),
+    style: style,
+    ref: inputRef,
+    type: type,
+    name: name,
+    onBlur: handleBlur,
+    onKeyDown: handleKeydown,
+    autoFocus: true,
+    onFocus: handleFocus
+  }, rest));
+};
+
 function createCommonjsModule(fn, module) {
@@ -1106,2 +1147,11 @@ return module = { exports: {} }, fn(module, module.exports), module.exports;
 
+var EditIcon = function EditIcon() {
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 512 512"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M421.7 220.3L188.5 453.4L154.6 419.5L158.1 416H112C103.2 416 96 408.8 96 400V353.9L92.51 357.4C87.78 362.2 84.31 368 82.42 374.4L59.44 452.6L137.6 429.6C143.1 427.7 149.8 424.2 154.6 419.5L188.5 453.4C178.1 463.8 165.2 471.5 151.1 475.6L30.77 511C22.35 513.5 13.24 511.2 7.03 504.1C.8198 498.8-1.502 489.7 .976 481.2L36.37 360.9C40.53 346.8 48.16 333.9 58.57 323.5L291.7 90.34L421.7 220.3zM492.7 58.75C517.7 83.74 517.7 124.3 492.7 149.3L444.3 197.7L314.3 67.72L362.7 19.32C387.7-5.678 428.3-5.678 453.3 19.32L492.7 58.75z"
+  }));
+};
+
 var sharedDefaultProps = {
@@ -1141,7 +1191,13 @@ id: undefined,
   type: propTypes.string,
-  inline: propTypes.bool
+  inline: propTypes.bool,
+  showEditButton: propTypes.bool,
+  editButtonContent: propTypes.any,
+  editButtonProps: propTypes.object
 });
 var EditTextDefaultProps = _extends({}, sharedDefaultProps, {
   type: 'text',
-  inline: false
+  inline: false,
+  showEditButton: false,
+  editButtonContent: /*#__PURE__*/React.createElement(EditIcon, null),
+  editButtonProps: {}
 });
@@ -1155,170 +1211,179 @@ var EditTextareaPropTypes = _extends({}, sharedPropTypes, {
 
-var styles = {"label":"_3sXmF","textareaView":"_ygkSb","shared":"_1EEDX","placeholder":"_3qwMT","inline":"_3F-ST","readonly":"_38077"};
+function EditText(_ref) {
+  var id = _ref.id,
+      name = _ref.name,
+      className = _ref.className,
+      placeholder = _ref.placeholder,
+      inline = _ref.inline,
+      style = _ref.style,
+      readonly = _ref.readonly,
+      type = _ref.type,
+      value = _ref.value,
+      defaultValue = _ref.defaultValue,
+      formatDisplayText = _ref.formatDisplayText,
+      onEditMode = _ref.onEditMode,
+      _onChange = _ref.onChange,
+      onSave = _ref.onSave,
+      onBlur = _ref.onBlur,
+      showEditButton = _ref.showEditButton,
+      editButtonContent = _ref.editButtonContent,
+      editButtonProps = _ref.editButtonProps;
+  var inputRef = React.useRef(null);
 
-var EditText = /*#__PURE__*/function (_React$Component) {
-  _inheritsLoose(EditText, _React$Component);
+  var _React$useState = React.useState(''),
+      previousValue = _React$useState[0],
+      setPreviousValue = _React$useState[1];
 
-  function EditText(props) {
-    var _this;
+  var _React$useState2 = React.useState(''),
+      savedText = _React$useState2[0],
+      setSavedText = _React$useState2[1];
 
-    _this = _React$Component.call(this, props) || this;
+  var _React$useState3 = React.useState(false),
+      editMode = _React$useState3[0],
+      setEditMode = _React$useState3[1];
 
-    _this.handleClick = function () {
-      if (_this.props.readonly) return;
+  React.useEffect(function () {
+    if (defaultValue !== undefined) {
+      setPreviousValue(defaultValue);
+      setSavedText(defaultValue);
+    }
+  }, [defaultValue]);
+  React.useEffect(function () {
+    if (value !== undefined) {
+      setSavedText(value);
 
-      _this.setState({
-        editMode: true
-      });
+      if (!editMode) {
+        setPreviousValue(value);
+      }
+    }
+  }, [value, editMode]);
 
-      _this.props.onEditMode();
-    };
+  var handleClickDisplay = function handleClickDisplay() {
+    if (readonly || showEditButton) return;
+    setEditMode(true);
+    onEditMode();
+  };
 
-    _this.handleBlur = function (save) {
-      if (save === void 0) {
-        save = true;
-      }
+  var handleClickEditButton = function handleClickEditButton() {
+    setEditMode(true);
+    onEditMode();
+  };
 
-      if (_this.inputRef.current) {
-        var _this$inputRef$curren = _this.inputRef.current,
-            name = _this$inputRef$curren.name,
-            value = _this$inputRef$curren.value;
+  var handleBlur = function handleBlur(save) {
+    if (save === void 0) {
+      save = true;
+    }
 
-        if (save && _this.state.previousValue !== value) {
-          _this.props.onSave({
-            name: name,
-            value: value,
-            previousValue: _this.state.previousValue
-          });
+    if (inputRef.current) {
+      var _inputRef$current = inputRef.current,
+          inputName = _inputRef$current.name,
+          inputValue = _inputRef$current.value;
 
-          _this.setState({
-            savedText: value,
-            previousValue: value
-          });
-        } else if (!save) {
-          if (_this.props.onChange) {
-            _this.props.onChange(_this.state.previousValue);
-          }
-        }
-
-        _this.setState({
-          editMode: false
+      if (save && previousValue !== inputValue) {
+        onSave({
+          name: inputName,
+          value: inputValue,
+          previousValue: previousValue
         });
-
-        _this.props.onBlur();
+        setSavedText(inputValue);
+        setPreviousValue(inputValue);
+      } else if (!save) {
+        _onChange(previousValue);
       }
-    };
 
-    _this.handleKeydown = function (e) {
-      if (e.keyCode === 13 || e.charCode === 13) {
-        _this.handleBlur();
-      } else if (e.keyCode === 27 || e.charCode === 27) {
-        _this.handleBlur(false);
-      }
-    };
+      setEditMode(false);
+      onBlur();
+    }
+  };
 
-    _this.handleFocus = function (e) {
-      if (_this.props.type === 'text') {
-        e.currentTarget.setSelectionRange(e.currentTarget.value.length, e.currentTarget.value.length);
-      }
-    };
+  var handleKeydown = function handleKeydown(e) {
+    if (e.keyCode === 13 || e.charCode === 13) {
+      handleBlur();
+    } else if (e.keyCode === 27 || e.charCode === 27) {
+      handleBlur(false);
+    }
+  };
 
-    _this.state = {
-      previousValue: props.defaultValue || '',
-      savedText: props.defaultValue || '',
-      editMode: false
-    };
-    _this.inputRef = React.createRef();
-    return _this;
-  }
-
-  EditText.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
-    if (props.value !== state.savedText && props.value !== undefined) {
-      if (state.editMode) {
-        return {
-          savedText: props.value
-        };
-      } else {
-        return {
-          previousValue: props.value,
-          savedText: props.value
-        };
-      }
+  var handleFocus = function handleFocus(e) {
+    if (type === 'text') {
+      e.currentTarget.setSelectionRange(e.currentTarget.value.length, e.currentTarget.value.length);
     }
-
-    return null;
   };
 
-  var _proto = EditText.prototype;
+  var renderDisplayMode = function renderDisplayMode() {
+    var _classnames, _classnames2;
 
-  _proto.render = function render() {
-    var _this$props = this.props,
-        id = _this$props.id,
-        className = _this$props.className,
-        name = _this$props.name,
-        type = _this$props.type,
-        placeholder = _this$props.placeholder,
-        inline = _this$props.inline,
-        style = _this$props.style,
-        readonly = _this$props.readonly,
-        value = _this$props.value,
-        formatDisplayText = _this$props.formatDisplayText,
-        _onChange = _this$props.onChange;
-    var _this$state = this.state,
-        editMode = _this$state.editMode,
-        savedText = _this$state.savedText;
+    return /*#__PURE__*/React.createElement("div", {
+      className: classnames(styles.displayContainer, (_classnames = {}, _classnames[styles.inline] = inline, _classnames))
+    }, /*#__PURE__*/React.createElement("div", {
+      id: id,
+      className: classnames(styles.label, styles.shared, (_classnames2 = {}, _classnames2[styles.placeholder] = placeholder && !savedText, _classnames2[styles.inline] = inline, _classnames2[styles.readonly] = readonly || showEditButton, _classnames2), className),
+      onClick: handleClickDisplay,
+      style: style
+    }, formatDisplayText(savedText) || placeholder), showEditButton && !readonly && /*#__PURE__*/React.createElement("button", _extends({
+      type: "button",
+      className: styles.editButton
+    }, editButtonProps, {
+      onClick: handleClickEditButton
+    }), editButtonContent));
+  };
 
-    if (!readonly && editMode) {
-      if (value !== undefined) {
-        var _classnames;
-
-        return /*#__PURE__*/React.createElement("input", {
-          id: id,
-          className: classnames(styles.shared, (_classnames = {}, _classnames[styles.inline] = inline, _classnames), className),
-          style: style,
-          ref: this.inputRef,
-          type: type,
-          name: name,
-          onBlur: this.handleBlur,
-          onKeyDown: this.handleKeydown,
-          value: value,
-          onChange: function onChange(e) {
-            _onChange(e.target.value);
-          },
-          autoFocus: true,
-          onFocus: this.handleFocus
-        });
-      } else {
-        var _classnames2;
-
-        return /*#__PURE__*/React.createElement("input", {
-          id: id,
-          className: classnames(styles.shared, (_classnames2 = {}, _classnames2[styles.inline] = inline, _classnames2), className),
-          style: style,
-          ref: this.inputRef,
-          type: type,
-          name: name,
-          onBlur: this.handleBlur,
-          onKeyDown: this.handleKeydown,
-          defaultValue: savedText,
-          autoFocus: true,
-          onFocus: this.handleFocus
-        });
+  var renderEditMode = function renderEditMode(controlled) {
+    var sharedProps = {
+      inputRef: inputRef,
+      handleBlur: handleBlur,
+      handleKeydown: handleKeydown,
+      handleFocus: handleFocus,
+      props: {
+        id: id,
+        inline: inline,
+        className: className,
+        style: style,
+        type: type,
+        name: name
       }
-    } else {
-      var _classnames3;
-
-      return /*#__PURE__*/React.createElement("div", {
-        id: id,
-        className: classnames(styles.shared, styles.label, (_classnames3 = {}, _classnames3[styles.placeholder] = placeholder && !savedText, _classnames3[styles.inline] = inline, _classnames3[styles.readonly] = readonly, _classnames3), className),
-        onClick: this.handleClick,
-        style: style
-      }, formatDisplayText(savedText) || placeholder);
-    }
+    };
+    return controlled ? /*#__PURE__*/React.createElement(Input, _extends({}, sharedProps, {
+      value: value,
+      onChange: function onChange(e) {
+        _onChange(e.target.value);
+      }
+    })) : /*#__PURE__*/React.createElement(Input, _extends({}, sharedProps, {
+      defaultValue: savedText
+    }));
   };
 
-  return EditText;
-}(React.Component);
+  return !readonly && editMode ? renderEditMode(value !== undefined) : renderDisplayMode();
+}
 EditText.defaultProps = EditTextDefaultProps;
 EditText.propTypes = EditTextPropTypes;
 
+var Textarea = function Textarea(_ref) {
+  var _ref$props = _ref.props,
+      id = _ref$props.id,
+      rows = _ref$props.rows,
+      className = _ref$props.className,
+      style = _ref$props.style,
+      name = _ref$props.name,
+      inputRef = _ref.inputRef,
+      handleBlur = _ref.handleBlur,
+      handleKeydown = _ref.handleKeydown,
+      rest = _objectWithoutPropertiesLoose(_ref, ["props", "inputRef", "handleBlur", "handleKeydown"]);
+
+  return /*#__PURE__*/React.createElement("textarea", _extends({
+    id: id,
+    className: classnames(styles.shared, className),
+    style: style,
+    ref: inputRef,
+    rows: rows,
+    name: name,
+    onBlur: handleBlur,
+    onKeyDown: handleKeydown,
+    autoFocus: true,
+    onFocus: function onFocus(e) {
+      return e.currentTarget.setSelectionRange(e.currentTarget.value.length, e.currentTarget.value.length);
+    }
+  }, rest));
+};
+
 var splitLines = function splitLines(val) {
@@ -1328,165 +1393,129 @@ return val ? val.split(/\r?\n/) : [];
 
-var EditTextarea = /*#__PURE__*/function (_React$Component) {
-  _inheritsLoose(EditTextarea, _React$Component);
+function EditTextarea(_ref) {
+  var id = _ref.id,
+      rows = _ref.rows,
+      name = _ref.name,
+      className = _ref.className,
+      placeholder = _ref.placeholder,
+      style = _ref.style,
+      readonly = _ref.readonly,
+      value = _ref.value,
+      defaultValue = _ref.defaultValue,
+      formatDisplayText = _ref.formatDisplayText,
+      onEditMode = _ref.onEditMode,
+      _onChange = _ref.onChange,
+      onSave = _ref.onSave,
+      onBlur = _ref.onBlur;
+  var inputRef = React.useRef(null);
 
-  function EditTextarea(props) {
-    var _this;
+  var _React$useState = React.useState(''),
+      previousValue = _React$useState[0],
+      setPreviousValue = _React$useState[1];
 
-    _this = _React$Component.call(this, props) || this;
+  var _React$useState2 = React.useState(''),
+      savedText = _React$useState2[0],
+      setSavedText = _React$useState2[1];
 
-    _this.handleClick = function () {
-      if (_this.props.readonly) return;
+  var _React$useState3 = React.useState(false),
+      editMode = _React$useState3[0],
+      setEditMode = _React$useState3[1];
 
-      _this.setState({
-        editMode: true
-      });
+  React.useEffect(function () {
+    if (defaultValue !== undefined) {
+      setPreviousValue(defaultValue);
+      setSavedText(defaultValue);
+    }
+  }, [defaultValue]);
+  React.useEffect(function () {
+    if (value !== undefined) {
+      setSavedText(value);
 
-      _this.props.onEditMode();
-    };
-
-    _this.handleBlur = function (save) {
-      if (save === void 0) {
-        save = true;
+      if (!editMode) {
+        setPreviousValue(value);
       }
+    }
+  }, [value, editMode]);
 
-      if (_this.inputRef.current) {
-        var _this$inputRef$curren = _this.inputRef.current,
-            name = _this$inputRef$curren.name,
-            value = _this$inputRef$curren.value;
+  var handleClick = function handleClick() {
+    if (readonly) return;
+    setEditMode(true);
+    onEditMode();
+  };
 
-        if (save && _this.state.previousValue !== value) {
-          _this.props.onSave({
-            name: name,
-            value: value,
-            previousValue: _this.state.previousValue
-          });
+  var handleBlur = function handleBlur(save) {
+    if (save === void 0) {
+      save = true;
+    }
 
-          _this.setState({
-            previousValue: value,
-            savedText: value
-          });
-        } else if (!save) {
-          if (_this.props.onChange) {
-            _this.props.onChange(_this.state.previousValue);
-          }
-        }
+    if (inputRef.current) {
+      var _inputRef$current = inputRef.current,
+          inputName = _inputRef$current.name,
+          inputValue = _inputRef$current.value;
 
-        _this.setState({
-          editMode: false
+      if (save && previousValue !== inputValue) {
+        onSave({
+          name: inputName,
+          value: inputValue,
+          previousValue: previousValue
         });
-
-        _this.props.onBlur();
+        setSavedText(inputValue);
+        setPreviousValue(inputValue);
+      } else if (!save) {
+        _onChange(previousValue);
       }
-    };
 
-    _this.handleKeydown = function (e) {
-      if (e.keyCode === 27 || e.charCode === 27) {
-        _this.handleBlur(false);
-      }
-    };
+      setEditMode(false);
+      onBlur();
+    }
+  };
 
-    _this.state = {
-      previousValue: props.defaultValue || '',
-      savedText: props.defaultValue || '',
-      editMode: false
-    };
-    _this.inputRef = React.createRef();
-    return _this;
-  }
-
-  EditTextarea.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
-    if (props.value !== state.savedText && props.value !== undefined) {
-      if (state.editMode) {
-        return {
-          savedText: props.value
-        };
-      } else {
-        return {
-          previousValue: props.value,
-          savedText: props.value
-        };
-      }
+  var handleKeydown = function handleKeydown(e) {
+    if (e.keyCode === 27 || e.charCode === 27) {
+      handleBlur(false);
     }
-
-    return null;
   };
 
-  var _proto = EditTextarea.prototype;
+  var renderDisplayMode = function renderDisplayMode() {
+    var _classnames;
 
-  _proto.render = function render() {
-    var _this$props = this.props,
-        id = _this$props.id,
-        className = _this$props.className,
-        name = _this$props.name,
-        rows = _this$props.rows,
-        placeholder = _this$props.placeholder,
-        style = _this$props.style,
-        readonly = _this$props.readonly,
-        _onChange = _this$props.onChange,
-        value = _this$props.value,
-        formatDisplayText = _this$props.formatDisplayText;
-    var _this$state = this.state,
-        editMode = _this$state.editMode,
-        savedText = _this$state.savedText;
+    var textLines = splitLines(formatDisplayText(savedText));
+    return /*#__PURE__*/React.createElement("div", {
+      id: id,
+      className: classnames(styles.shared, styles.textareaView, (_classnames = {}, _classnames[styles.placeholder] = placeholder && !savedText, _classnames[styles.readonly] = readonly, _classnames), className),
+      onClick: handleClick,
+      style: _extends({}, style, {
+        height: rows * 24 + 16 + "px"
+      })
+    }, textLines.length > 0 ? textLines.map(function (text, index) {
+      return /*#__PURE__*/React.createElement(React.Fragment, {
+        key: index
+      }, /*#__PURE__*/React.createElement("span", null, text), /*#__PURE__*/React.createElement("br", null));
+    }) : /*#__PURE__*/React.createElement("span", null, placeholder));
+  };
 
-    var viewStyle = _extends({}, style, {
-      height: rows * 24 + 16 + "px"
-    });
-
-    if (!readonly && editMode) {
-      if (value !== undefined) {
-        return /*#__PURE__*/React.createElement("textarea", {
-          id: id,
-          className: classnames(styles.shared, className),
-          style: style,
-          ref: this.inputRef,
-          rows: rows,
-          name: name,
-          onBlur: this.handleBlur,
-          onKeyDown: this.handleKeydown,
-          value: value,
-          onChange: function onChange(e) {
-            _onChange(e.target.value);
-          },
-          autoFocus: true,
-          onFocus: function onFocus(e) {
-            return e.currentTarget.setSelectionRange(e.currentTarget.value.length, e.currentTarget.value.length);
-          }
-        });
-      } else {
-        return /*#__PURE__*/React.createElement("textarea", {
-          id: id,
-          className: classnames(styles.shared, className),
-          style: style,
-          ref: this.inputRef,
-          rows: rows,
-          name: name,
-          onBlur: this.handleBlur,
-          onKeyDown: this.handleKeydown,
-          defaultValue: savedText,
-          autoFocus: true,
-          onFocus: function onFocus(e) {
-            return e.currentTarget.setSelectionRange(e.currentTarget.value.length, e.currentTarget.value.length);
-          }
-        });
+  var renderEditMode = function renderEditMode(controlled) {
+    var sharedProps = {
+      inputRef: inputRef,
+      handleBlur: handleBlur,
+      handleKeydown: handleKeydown,
+      props: {
+        id: id,
+        rows: rows,
+        className: className,
+        style: style,
+        name: name
       }
-    } else {
-      var _classnames;
-
-      var textLines = splitLines(formatDisplayText(savedText));
-      return /*#__PURE__*/React.createElement("div", {
-        id: id,
-        className: classnames(styles.shared, styles.textareaView, (_classnames = {}, _classnames[styles.placeholder] = placeholder && !savedText, _classnames[styles.readonly] = readonly, _classnames), className),
-        onClick: this.handleClick,
-        style: viewStyle
-      }, textLines.length > 0 ? textLines.map(function (text, index) {
-        return /*#__PURE__*/React.createElement(React.Fragment, {
-          key: index
-        }, /*#__PURE__*/React.createElement("span", null, text), /*#__PURE__*/React.createElement("br", null));
-      }) : /*#__PURE__*/React.createElement("span", null, placeholder));
-    }
+    };
+    return controlled ? /*#__PURE__*/React.createElement(Textarea, _extends({}, sharedProps, {
+      value: value,
+      onChange: function onChange(e) {
+        _onChange(e.target.value);
+      }
+    })) : /*#__PURE__*/React.createElement(Textarea, _extends({}, sharedProps, {
+      defaultValue: savedText
+    }));
   };
 
-  return EditTextarea;
-}(React.Component);
+  return !readonly && editMode ? renderEditMode(value !== undefined) : renderDisplayMode();
+}
 EditTextarea.defaultProps = EditTextareaDefaultProps;
@@ -1493,0 +1522,0 @@ EditTextarea.propTypes = EditTextareaPropTypes;

package.json

 {
   "name": "react-edit-text",
-  "version": "4.3.0",
+  "version": "4.4.0",
   "description": "Simple editable text component for React",
@@ -77,3 +77,15 @@ "author": "Brian Min <[e-mail]> (https://github.com/bymi15)",
     "classnames": "^2.2.6"
+  },
+  "jest": {
+    "coverageThreshold": {
+      "global": {
+        "lines": 90
+      }
+    }
+  },
+  "babel": {
+    "presets": [
+      "react-app"
+    ]
   }
 }

README.md

@@ -47,3 +47,3 @@ <h1 align="center">React Edit Text</h1>
 ```jsx
-import React, { Component } from 'react';
+import React from 'react';
 
@@ -53,11 +53,9 @@ import { EditText, EditTextarea } from 'react-edit-text';
 
-class Example extends Component {
-  render() {
-    return (
-      <div>
-        <EditText />
-        <EditTextarea />
-      </div>
-    );
-  }
+export default function Example() {
+  return (
+    <div>
+      <EditText showEditButton />
+      <EditTextarea />
+    </div>
+  );
 }
@@ -88,6 +86,9 @@ ```
 
-| Prop   | Type   | Required | Default | Description              |
-| ------ | ------ | -------- | ------- | ------------------------ |
-| type   | string | No       | 'text'  | HTML DOM input text type |
-| inline | bool   | No       | false   | Sets inline display      |
+| Prop              | Type   | Required | Default                                                              | Description                                                                   |
+| ----------------- | ------ | -------- | -------------------------------------------------------------------- | ----------------------------------------------------------------------------- |
+| type              | string | No       | 'text'                                                               | HTML DOM input text type                                                      |
+| inline            | bool   | No       | false                                                                | Sets inline display                                                           |
+| showEditButton    | bool   | No       | false                                                                | Displays an edit button that can be pressed to enable edit mode               |
+| editButtonContent | node   | No       | <img src="./assets/images/editIcon.png" alt="editIcon" width="15" /> | Sets the content for the edit button. This can be any valid element           |
+| editButtonProps   | object | No       | {}                                                                   | Sets the props passed to the edit button. This can be any valid DOM attribute |
 
@@ -94,0 +95,0 @@ ### EditTextarea props

No alert changes

Improved metrics

Total package byte prevSize

314274

increased by3.33%

Lines of code

2832

increased by2.98%

Number of lines in readme file

106

increased by0.95%

No dependency changes