From 58931285001a4886d095556e7e49e62ca309e150 Mon Sep 17 00:00:00 2001 From: Gabriel Dutra Date: Wed, 25 Dec 2019 21:15:38 -0300 Subject: [PATCH 1/4] Update EditInPlace with Antd components --- client/app/components/EditInPlace.jsx | 43 +++++++++++-------- client/app/components/groups/GroupName.jsx | 1 - client/app/pages/dashboards/DashboardPage.jsx | 1 - client/app/pages/queries/query.html | 4 +- 4 files changed, 26 insertions(+), 23 deletions(-) diff --git a/client/app/components/EditInPlace.jsx b/client/app/components/EditInPlace.jsx index 4c0727ab5d..7e73eb59ab 100644 --- a/client/app/components/EditInPlace.jsx +++ b/client/app/components/EditInPlace.jsx @@ -2,15 +2,16 @@ import React from "react"; import PropTypes from "prop-types"; 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, + textArea: PropTypes.bool, }; static defaultProps = { @@ -18,6 +19,7 @@ export class EditInPlace extends React.Component { isEditable: true, placeholder: "", value: "", + textArea: false, }; constructor(props) { @@ -26,12 +28,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,8 +42,8 @@ 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); @@ -49,10 +51,10 @@ export class EditInPlace extends React.Component { 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,14 +70,17 @@ export class EditInPlace extends React.Component { ); - 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 InputComponent = this.props.textArea ? Input.TextArea : Input; + return ( + this.stopEditing(e.target.value)} + onKeyDown={this.handleKeyDown} + /> + ); + }; render() { return ( diff --git a/client/app/components/groups/GroupName.jsx b/client/app/components/groups/GroupName.jsx index 5927d08fbc..e50f129e26 100644 --- a/client/app/components/groups/GroupName.jsx +++ b/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} /> diff --git a/client/app/pages/dashboards/DashboardPage.jsx b/client/app/pages/dashboards/DashboardPage.jsx index 69357e5d56..9f7ff5d068 100644 --- a/client/app/pages/dashboards/DashboardPage.jsx +++ b/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 /> diff --git a/client/app/pages/queries/query.html b/client/app/pages/queries/query.html index 3014f08e79..ae7e05cd1f 100644 --- a/client/app/pages/queries/query.html +++ b/client/app/pages/queries/query.html @@ -24,7 +24,7 @@

+ ignore-blanks="true" value="query.name">
 
-
From d3af7b3056f4fa520e17bae4fc158fe69b0d139b Mon Sep 17 00:00:00 2001 From: Gabriel Dutra Date: Wed, 25 Dec 2019 21:24:19 -0300 Subject: [PATCH 2/4] Add className prop --- client/app/components/EditInPlace.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/client/app/components/EditInPlace.jsx b/client/app/components/EditInPlace.jsx index 7e73eb59ab..d2fa4128af 100644 --- a/client/app/components/EditInPlace.jsx +++ b/client/app/components/EditInPlace.jsx @@ -1,5 +1,6 @@ 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"; @@ -84,7 +85,7 @@ export class EditInPlace extends React.Component { render() { return ( - + {this.state.editing ? this.renderEdit() : this.renderNormal()} ); From b8d08c802d26f1ecde6a3e3b477a66a59917ed27 Mon Sep 17 00:00:00 2001 From: Gabriel Dutra Date: Thu, 26 Dec 2019 11:41:38 -0300 Subject: [PATCH 3/4] Rename textArea -> multiline --- client/app/components/EditInPlace.jsx | 6 +++--- client/app/pages/queries/query.html | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/client/app/components/EditInPlace.jsx b/client/app/components/EditInPlace.jsx index d2fa4128af..b123285bf9 100644 --- a/client/app/components/EditInPlace.jsx +++ b/client/app/components/EditInPlace.jsx @@ -12,7 +12,7 @@ export class EditInPlace extends React.Component { placeholder: PropTypes.string, value: PropTypes.string, onDone: PropTypes.func.isRequired, - textArea: PropTypes.bool, + multiline: PropTypes.bool, }; static defaultProps = { @@ -20,7 +20,7 @@ export class EditInPlace extends React.Component { isEditable: true, placeholder: "", value: "", - textArea: false, + multiline: false, }; constructor(props) { @@ -72,7 +72,7 @@ export class EditInPlace extends React.Component { ); renderEdit = () => { - const InputComponent = this.props.textArea ? Input.TextArea : Input; + const InputComponent = this.props.multiline ? Input.TextArea : Input; return (
 
-
From 8f0fbf3ba9cb46a3f6000a5c1916f34b558726b2 Mon Sep 17 00:00:00 2001 From: Gabriel Dutra Date: Thu, 26 Dec 2019 11:44:35 -0300 Subject: [PATCH 4/4] Add editorProps --- client/app/components/EditInPlace.jsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/client/app/components/EditInPlace.jsx b/client/app/components/EditInPlace.jsx index b123285bf9..df7ffbd938 100644 --- a/client/app/components/EditInPlace.jsx +++ b/client/app/components/EditInPlace.jsx @@ -13,6 +13,7 @@ export class EditInPlace extends React.Component { value: PropTypes.string, onDone: PropTypes.func.isRequired, multiline: PropTypes.bool, + editorProps: PropTypes.object, }; static defaultProps = { @@ -21,6 +22,7 @@ export class EditInPlace extends React.Component { placeholder: "", value: "", multiline: false, + editorProps: {}, }; constructor(props) { @@ -72,13 +74,15 @@ export class EditInPlace extends React.Component { ); renderEdit = () => { - const InputComponent = this.props.multiline ? Input.TextArea : Input; + const { multiline, value, editorProps } = this.props; + const InputComponent = multiline ? Input.TextArea : Input; return ( this.stopEditing(e.target.value)} onKeyDown={this.handleKeyDown} + {...editorProps} /> ); };