New: UI Updates (Backup Restore in App, Profile Cloning)

UI Pulls from Sonarr

frontend/src/Components/Form/TextInput.js

@@ -5,14 +5,107 @@ import styles from './TextInput.css';
 
 class TextInput extends Component {
 
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this._input = null;
+    this._selectionStart = null;
+    this._selectionEnd = null;
+    this._selectionTimeout = null;
+    this._isMouseTarget = false;
+  }
+
+  componentDidMount() {
+    window.addEventListener('mouseup', this.onDocumentMouseUp);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('mouseup', this.onDocumentMouseUp);
+  }
+
+  //
+  // Control
+
+  setInputRef = (ref) => {
+    this._input = ref;
+  }
+
+  selectionChange() {
+    if (this._selectionTimeout) {
+      this._selectionTimeout = clearTimeout(this._selectionTimeout);
+    }
+
+    this._selectionTimeout = setTimeout(() => {
+      const selectionStart = this._input.selectionStart;
+      const selectionEnd = this._input.selectionEnd;
+
+      const selectionChanged = (
+        this._selectionStart !== selectionStart ||
+        this._selectionEnd !== selectionEnd
+      );
+
+      this._selectionStart = selectionStart;
+      this._selectionEnd = selectionEnd;
+
+      if (this.props.onSelectionChange && selectionChanged) {
+        this.props.onSelectionChange(selectionStart, selectionEnd);
+      }
+    }, 10);
+  }
+
   //
   // Listeners
 
   onChange = (event) => {
-    this.props.onChange({
-      name: this.props.name,
+    const {
+      name,
+      type,
+      onChange
+    } = this.props;
+
+    const payload = {
+      name,
       value: event.target.value
-    });
+    };
+
+    // Also return the files for a file input type.
+
+    if (type === 'file') {
+      payload.files = event.target.files;
+    }
+
+    onChange(payload);
+  }
+
+  onFocus = (event) => {
+    if (this.props.onFocus) {
+      this.props.onFocus(event);
+    }
+
+    this.selectionChange();
+  }
+
+  onKeyUp = () => {
+    this.selectionChange();
+  }
+
+  onMouseDown = () => {
+    this._isMouseTarget = true;
+  }
+
+  onMouseUp = () => {
+    this.selectionChange();
+  }
+
+  onDocumentMouseUp = () => {
+    if (this._isMouseTarget) {
+      this.selectionChange();
+    }
+
+    this._isMouseTarget = false;
   }
 
   //
@@ -29,12 +122,12 @@ class TextInput extends Component {
       value,
       hasError,
       hasWarning,
-      hasButton,
-      onFocus
+      hasButton
     } = this.props;
 
     return (
       <input
+        ref={this.setInputRef}
         type={type}
         readOnly={readOnly}
         autoFocus={autoFocus}
@@ -49,7 +142,10 @@ class TextInput extends Component {
         name={name}
         value={value}
         onChange={this.onChange}
-        onFocus={onFocus}
+        onFocus={this.onFocus}
+        onKeyUp={this.onKeyUp}
+        onMouseDown={this.onMouseDown}
+        onMouseUp={this.onMouseUp}
       />
     );
   }
@@ -67,7 +163,8 @@ TextInput.propTypes = {
   hasWarning: PropTypes.bool,
   hasButton: PropTypes.bool,
   onChange: PropTypes.func.isRequired,
-  onFocus: PropTypes.func
+  onFocus: PropTypes.func,
+  onSelectionChange: PropTypes.func
 };
 
 TextInput.defaultProps = {