Update EditInPlace to use Antd components (#4493)

client/app/components/EditInPlace.jsx

@@ -1,23 +1,28 @@
 import React from "react";
 import PropTypes from "prop-types";
+import cx from "classnames";
 import { react2angular } from "react2angular";
 import { trim } from "lodash";
+import Input from "antd/lib/input";
 
 export class EditInPlace extends React.Component {
   static propTypes = {
     ignoreBlanks: PropTypes.bool,
     isEditable: PropTypes.bool,
-    editor: PropTypes.string.isRequired,
     placeholder: PropTypes.string,
     value: PropTypes.string,
     onDone: PropTypes.func.isRequired,
+    multiline: PropTypes.bool,
+    editorProps: PropTypes.object,
   };
 
   static defaultProps = {
     ignoreBlanks: false,
     isEditable: true,
     placeholder: "",
     value: "",
+    multiline: false,
+    editorProps: {},
   };
 
   constructor(props) {
@@ -26,12 +31,12 @@ export class EditInPlace extends React.Component {
       editing: false,
     };
     this.inputRef = React.createRef();
-    const self = this;
-    this.componentDidUpdate = (prevProps, prevState) => {
-      if (self.state.editing && !prevState.editing) {
-        self.inputRef.current.focus();
-      }
-    };
+  }
+
+  componentDidUpdate(_, prevState) {
+    if (this.state.editing && !prevState.editing) {
+      this.inputRef.current.focus();
+    }
   }
 
   startEditing = () => {
@@ -40,19 +45,19 @@ export class EditInPlace extends React.Component {
     }
   };
 
-  stopEditing = () => {
-    const newValue = trim(this.inputRef.current.value);
+  stopEditing = currentValue => {
+    const newValue = trim(currentValue);
     const ignorableBlank = this.props.ignoreBlanks && newValue === "";
     if (!ignorableBlank && newValue !== this.props.value) {
       this.props.onDone(newValue);
     }
     this.setState({ editing: false });
   };
 
-  keyDown = event => {
+  handleKeyDown = event => {
     if (event.keyCode === 13 && !event.shiftKey) {
       event.preventDefault();
-      this.stopEditing();
+      this.stopEditing(event.target.value);
     } else if (event.keyCode === 27) {
       this.setState({ editing: false });
     }
@@ -68,18 +73,23 @@ export class EditInPlace extends React.Component {
     </span>
   );
 
-  renderEdit = () =>
-    React.createElement(this.props.editor, {
-      ref: this.inputRef,
-      className: "rd-form-control",
-      defaultValue: this.props.value,
-      onBlur: this.stopEditing,
-      onKeyDown: this.keyDown,
-    });
+  renderEdit = () => {
+    const { multiline, value, editorProps } = this.props;
+    const InputComponent = multiline ? Input.TextArea : Input;
+    return (
+      <InputComponent
+        ref={this.inputRef}
+        defaultValue={value}
+        onBlur={e => this.stopEditing(e.target.value)}
+        onKeyDown={this.handleKeyDown}
+        {...editorProps}
+      />
+    );
+  };
 
   render() {
     return (
-      <span className={"edit-in-place" + (this.state.editing ? " active" : "")}>
+      <span className={cx("edit-in-place", { active: this.state.editing }, this.props.className)}>
         {this.state.editing ? this.renderEdit() : this.renderNormal()}
       </span>
     );

client/app/components/groups/GroupName.jsx

@@ -22,7 +22,6 @@ export default function GroupName({ group, onChange, ...props }) {
         className="edit-in-place"
         isEditable={canEdit}
         ignoreBlanks
-        editor="input"
         onDone={name => updateGroupName(group, name, onChange)}
         value={group.name}
       />

client/app/pages/dashboards/DashboardPage.jsx

@@ -46,7 +46,6 @@ function DashboardPageTitle({ dashboardOptions }) {
           isEditable={editingLayout}
           onDone={name => updateDashboard({ name })}
           value={dashboard.name}
-          editor="input"
           ignoreBlanks
         />
       </h3>

client/app/pages/queries/query.html

@@ -24,7 +24,7 @@
           <favorites-control ng-if="!query.isNew()" item="query"></favorites-control>
           <h3>
             <edit-in-place class="m-r-5" is-editable="canEdit" on-done="saveName"
-              ignore-blanks="true" value="query.name" editor="'input'"></edit-in-place>
+              ignore-blanks="true" value="query.name"></edit-in-place>
             <query-tags-control
               class="query-tags" ng-class="{'query-tags__empty': query.tags.length == 0}"
               tags="query.tags" is-draft="query.is_draft" is-archived="query.is_archived"
@@ -106,7 +106,7 @@ <h3>
       <div ng-if="!sourceMode" style="flex-grow: 1;">&nbsp;</div>
 
       <div class="query-metadata query-metadata--description" ng-if="!query.isNew()">
-        <edit-in-place is-editable="canEdit" on-done="saveDescription" editor="'textarea'" placeholder="'Add description'" ignore-blanks='false'
+        <edit-in-place is-editable="canEdit" on-done="saveDescription" multiline="true" placeholder="'Add description'" ignore-blanks='false'
           value="query.description" markdown="true">
         </edit-in-place>
       </div>