Merge pull request #8 from markbiek/feature/functional-component

Feature/functional component
markbiek · Jan 21, 2020 · 776bbf3 · 776bbf3
2 parents bba3f18 + 2d243f6
commit 776bbf3
Show file tree

Hide file tree

Showing 6 changed files with 2,576 additions and 3,023 deletions.
diff --git a/dist/react-editable-label.dist.js b/dist/react-editable-label.dist.js
diff --git a/dist/react-editable-label.dist.js.map b/dist/react-editable-label.dist.js.map
diff --git a/lib/EditableLabel.js b/lib/EditableLabel.js
@@ -1,141 +1,71 @@
-import React from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import render from 'react-dom';
 import PropTypes from 'prop-types';
 
-export default class EditableLabel extends React.Component {
-    constructor(props) {
-        super(props);
+const EditableLabel = ({initialValue, save, disableKeys, inputClass, labelClass}) => {
+    const [view, setView] = useState('label');
+    const [value, setValue] = useState(initialValue);
+    const [previous, setPrevious] = useState(initialValue);
+    const textInput = useRef(null);
 
-        this.state = {
-            view: 'label',
-            value: '',
-            previous: ''
-        };
-
-        this.handleKeyUp = this.handleKeyUp.bind(this);
-    }
-
-    async componentWillMount() {
-        const { initialValue } = this.props;
-        const { value, previous } = this.state;
-
-        if (value == '') {
-            await this.changeValue(initialValue);
-        }
-
-        if (previous == '') {
-            await this.changePrevious(initialValue);
-        }
-    }
-
-    componentDidUpdate() {
-        const { view } = this.state;
-
-        if (view == 'text') {
-            this.textInput.focus();
+    useEffect(() => {
+        if (view === 'text') {
+            textInput.current.focus();
         }
-    }
-
-    switchView(view) {
-        this.setState({
-            view
-        });
-    }
-
-    changePrevious(previous) {
-        return new Promise((resolve, reject) => {
-            this.setState({
-                previous
-            }, () => {
-                resolve();
-            });
-        });
-    }
-
-    changeValue(value) {
-        return new Promise((resolve, reject) => {
-            this.setState({
-                value
-            }, () => {
-                resolve();
-            });
-        });
-    }
-
-    async handleKeyUp(e) {
-        const { value, previous } = this.state;
-        const { save, disableKeys } = this.props;
+    }, [view, textInput]);
 
+    const keyUp = (e) => {
         if (disableKeys === true) {
             return;
         }
 
-        //We need this otherwise React squawks at accessing the event in an async function
-        e.persist();
+        if (e.key === 'Escape') {
+            setValue(previous);
+            setView('label');
+        } else if (e.key === 'Enter') {
+            setValue(e.target.value);
+            setPrevious(e.target.value);
+            setView('label');
 
-        if (e.key == 'Escape') {
-            await this.changeValue(previous);
-
-            this.switchView('label');
-        } else if (e.key == 'Enter') {
-            await this.changeValue(e.target.value);
-            await this.changePrevious(e.target.value);
-
-            this.switchView('label');
             save(e.target.value);
         }
     }
 
-    renderInput() {
-        const { value } = this.state;
-        const { save, inputClass } = this.props;
+    const renderLabel = () => {
+        return (
+            <span className={labelClass !== undefined ? labelClass : ''} onClick={e => {
+                console.log('click');
+                setView('text');
+            }}>{value}</span>
+        );
+    };
 
+    const renderInput = () => {
         return (
             <div>
                 <input
                     type="text"
                     value={value}
-                    ref={input => this.textInput = input}
+                    ref={textInput}
                     className={inputClass !== undefined ? inputClass : ''}
                     onChange={e => {
-                        this.changeValue(e.target.value);
+                        setValue(e.target.value);
                     }}
                     onBlur={e => {
-                        this.switchView('label');
-                        this.changePrevious(e.target.value);
+                        setView('label');
+                        setPrevious(e.target.value);
+
                         save(e.target.value);
                     }}
 
-                    onKeyUp={this.handleKeyUp}
+                    onKeyUp={keyUp}
                 />
             </div>
         );
-    }
-
-    renderLabel() {
-        const { value } = this.state;
-        const { labelClass } = this.props;
-
-        return (
-            <div>
-                <span className={labelClass !== undefined ? labelClass : ''} onClick={e => {
-                    this.switchView('text');
-                }}>{value}</span>
-            </div>
-        );
-    }
+    };
 
-    render() {
-        const { view } = this.state;
-        const { initialValue } = this.props;
-
-        if (view == 'label') {
-            return this.renderLabel();
-        } else {
-            return this.renderInput();
-        }
-    }
-}
+    return view === 'label' ? renderLabel() : renderInput();
+};
 
 EditableLabel.propTypes = {
     initialValue: PropTypes.string.isRequired,
@@ -144,3 +74,5 @@ EditableLabel.propTypes = {
     inputClass: PropTypes.string,
     disableKeys: PropTypes.bool
 }
+
+export default EditableLabel;