Convert EditableText to TS

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

src/components/views/elements/EditableText.tsx

@@ -0,0 +1,230 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2018 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { createRef } from 'react';
+import { Key } from "../../../Keyboard";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+
+enum Phases {
+    Display = "display",
+    Edit = "edit",
+}
+
+interface IProps {
+    onValueChanged?: (value: string, shouldSubmit: boolean) => void;
+    initialValue?: string;
+    label?: string;
+    placeholder?: string;
+    className?: string;
+    labelClassName?: string;
+    placeholderClassName?: string;
+    // Overrides blurToSubmit if true
+    blurToCancel?: boolean;
+    // Will cause onValueChanged(value, true) to fire on blur
+    blurToSubmit?: boolean;
+    editable?: boolean;
+}
+
+interface IState {
+    phase: Phases;
+}
+
+@replaceableComponent("views.elements.EditableText")
+export default class EditableText extends React.Component<IProps, IState> {
+    // we track value as an JS object field rather than in React state
+    // as React doesn't play nice with contentEditable.
+    public value = '';
+    private placeholder = false;
+    private editableDiv = createRef<HTMLDivElement>();
+
+    public static defaultProps: Partial<IProps> = {
+        onValueChanged() {},
+        initialValue: '',
+        label: '',
+        placeholder: '',
+        editable: true,
+        className: "mx_EditableText",
+        placeholderClassName: "mx_EditableText_placeholder",
+        blurToSubmit: false,
+    };
+
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            phase: Phases.Display,
+        };
+    }
+
+    // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
+    // eslint-disable-next-line @typescript-eslint/naming-convention, camelcase
+    public UNSAFE_componentWillReceiveProps(nextProps: IProps): void {
+        if (nextProps.initialValue !== this.props.initialValue) {
+            this.value = nextProps.initialValue;
+            if (this.editableDiv.current) {
+                this.showPlaceholder(!this.value);
+            }
+        }
+    }
+
+    public componentDidMount(): void {
+        this.value = this.props.initialValue;
+        if (this.editableDiv.current) {
+            this.showPlaceholder(!this.value);
+        }
+    }
+
+    private showPlaceholder = (show: boolean): void => {
+        if (show) {
+            this.editableDiv.current.textContent = this.props.placeholder;
+            this.editableDiv.current.setAttribute("class", this.props.className
+                + " " + this.props.placeholderClassName);
+            this.placeholder = true;
+            this.value = '';
+        } else {
+            this.editableDiv.current.textContent = this.value;
+            this.editableDiv.current.setAttribute("class", this.props.className);
+            this.placeholder = false;
+        }
+    };
+
+    private cancelEdit = (): void => {
+        this.setState({
+            phase: Phases.Display,
+        });
+        this.value = this.props.initialValue;
+        this.showPlaceholder(!this.value);
+        this.onValueChanged(false);
+        this.editableDiv.current.blur();
+    };
+
+    private onValueChanged = (shouldSubmit: boolean): void => {
+        this.props.onValueChanged(this.value, shouldSubmit);
+    };
+
+    private onKeyDown = (ev: React.KeyboardEvent<HTMLDivElement>): void => {
+        // console.log("keyDown: textContent=" + ev.target.textContent + ", value=" + this.value + ", placeholder=" + this.placeholder);
+
+        if (this.placeholder) {
+            this.showPlaceholder(false);
+        }
+
+        if (ev.key === Key.ENTER) {
+            ev.stopPropagation();
+            ev.preventDefault();
+        }
+
+        // console.log("keyDown: textContent=" + ev.target.textContent + ", value=" + this.value + ", placeholder=" + this.placeholder);
+    };
+
+    private onKeyUp = (ev: React.KeyboardEvent<HTMLDivElement>): void => {
+        // console.log("keyUp: textContent=" + ev.target.textContent + ", value=" + this.value + ", placeholder=" + this.placeholder);
+
+        if (!(ev.target as HTMLDivElement).textContent) {
+            this.showPlaceholder(true);
+        } else if (!this.placeholder) {
+            this.value = (ev.target as HTMLDivElement).textContent;
+        }
+
+        if (ev.key === Key.ENTER) {
+            this.onFinish(ev);
+        } else if (ev.key === Key.ESCAPE) {
+            this.cancelEdit();
+        }
+
+        // console.log("keyUp: textContent=" + ev.target.textContent + ", value=" + this.value + ", placeholder=" + this.placeholder);
+    };
+
+    private onClickDiv = (): void => {
+        if (!this.props.editable) return;
+
+        this.setState({
+            phase: Phases.Edit,
+        });
+    };
+
+    private onFocus = (ev: React.FocusEvent<HTMLDivElement>): void => {
+        //ev.target.setSelectionRange(0, ev.target.textContent.length);
+
+        const node = ev.target.childNodes[0];
+        if (node) {
+            const range = document.createRange();
+            range.setStart(node, 0);
+            range.setEnd(node, ev.target.childNodes.length);
+
+            const sel = window.getSelection();
+            sel.removeAllRanges();
+            sel.addRange(range);
+        }
+    };
+
+    private onFinish = (
+        ev: React.KeyboardEvent<HTMLDivElement> | React.FocusEvent<HTMLDivElement>,
+        shouldSubmit?: boolean,
+    ): void => {
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        const self = this;
+        const submit = ("key" in ev && ev.key === Key.ENTER) || shouldSubmit;
+        this.setState({
+            phase: Phases.Display,
+        }, () => {
+            if (this.value !== this.props.initialValue) {
+                self.onValueChanged(submit);
+            }
+        });
+    };
+
+    private onBlur = (ev: React.FocusEvent<HTMLDivElement>): void => {
+        const sel = window.getSelection();
+        sel.removeAllRanges();
+
+        if (this.props.blurToCancel) {
+            this.cancelEdit();
+        } else {
+            this.onFinish(ev, this.props.blurToSubmit);
+        }
+
+        this.showPlaceholder(!this.value);
+    };
+
+    public render(): JSX.Element {
+        const { className, editable, initialValue, label, labelClassName } = this.props;
+        let editableEl;
+
+        if (!editable || (this.state.phase === Phases.Display &&
+            (label || labelClassName) && !this.value)
+        ) {
+            // show the label
+            editableEl = <div className={className + " " + labelClassName} onClick={this.onClickDiv}>
+                { label || initialValue }
+            </div>;
+        } else {
+            // show the content editable div, but manually manage its contents as react and contentEditable don't play nice together
+            editableEl = <div
+                ref={this.editableDiv}
+                contentEditable={true}
+                className={className}
+                onKeyDown={this.onKeyDown}
+                onKeyUp={this.onKeyUp}
+                onFocus={this.onFocus}
+                onBlur={this.onBlur}
+            />;
+        }
+
+        return editableEl;
+    }
+}