Change message format + refactor options

2026-06-11 18:19:58 +00:00 · 2018-11-28 08:35:31 +00:00
parent 5ee6b25cb7
commit 70246f1f99
11 changed files with 423 additions and 401 deletions
--- a/ext/src/options/EditableListItem.jsx
+++ b/ext/src/options/EditableListItem.jsx
@@ -0,0 +1,91 @@
+import React, { Component } from "react";
+
+const _ = browser.i18n.getMessage;
+
+
+export default class EditableListItem extends Component {
+    constructor (props) {
+        super(props);
+        this.state = {
+            editing: this.props.editing || false
+          , editValue: ""
+        };
+
+        this.handleRemove = this.handleRemove.bind(this);
+        this.handleEditBegin = this.handleEditBegin.bind(this);
+        this.handleEditEnd = this.handleEditEnd.bind(this);
+        this.handleInputChange = this.handleInputChange.bind(this);
+        this.handleInputKeyPress = this.handleInputKeyPress.bind(this);
+    }
+
+    handleRemove () {
+        this.props.onRemove(this.props.text);
+    }
+
+    handleEditBegin () {
+        this.setState({
+            editing: true
+          , editValue: this.props.text
+        });
+    }
+
+    handleEditEnd (ev) {
+        if (this.props.editing
+                && !this.props.itemPattern.test(this.state.editValue)) {
+            ev.target.setCustomValidity(this.props.itemPatternError());
+        }
+
+        if (!ev.target.validity.valid) {
+            return;
+        }
+
+        this.props.onEdit(this.props.text, this.state.editValue);
+        this.setState({
+            editing: false
+          , editValue: ""
+        });
+    }
+
+    handleInputChange (ev) {
+        this.setState({
+            editValue: ev.target.value
+        });
+        
+        if (!this.props.itemPattern.test(ev.target.value)) {
+            ev.target.setCustomValidity(this.props.itemPatternError());        
+        } else {
+            ev.target.setCustomValidity("");
+        }
+    }
+
+    handleInputKeyPress (ev) {
+        if (ev.key === "Enter") {
+            this.handleEditEnd({ target: ev.target });
+        }
+    }
+
+    render () {
+        return (
+            <li className="editable-list__item">
+                <div className="editable-list__title"
+                     onDoubleClick={ this.handleEditBegin }>
+                    { this.state.editing
+                        ? <input className="editable-list__edit-field"
+                                 type="text"
+                                 autoFocus
+                                 value={ this.state.editValue }
+                                 onBlur={ this.handleEditEnd }
+                                 onChange={ this.handleInputChange }
+                                 onKeyPress={ this.handleInputKeyPress }/>
+                        : this.props.text }
+                </div>
+                <button onClick={ this.handleEditBegin }>
+                    { _("optionsUserAgentWhitelistEditItem") }
+                </button>
+                <button onClick={ this.handleRemove }>
+                    { _("optionsUserAgentWhitelistRemoveItem") }
+                </button>
+            </li>
+        );
+    }
+}