[Задача 12794] Реализовал компонент EditableText, который позволяет редактировать текст внутри

cp/javascript/src/components/EditableText/index.jsx

+import React, {Component} from 'react';
+import FaCheckCircle from 'react-icons/lib/fa/check-circle';
+import FaTimesCircle from 'react-icons/lib/fa/times-circle';
+
+import './style.css'
+
+/**
+ * Текст, который возможно редактировать
+ */
+export default class EditableText extends Component {
+
+    constructor(props) {
+        super(props);
+
+        // Колбэки
+        this.onTextChanged = props.onTextChanged;
+        this.onTextSaved = props.onTextSaved;
+
+        this.text = props.text;
+
+        this.state = {
+            isEditable: false
+        }
+    }
+
+    render() {
+        if (this.state.isEditable) {
+            return (
+                <div className="text-editable-wrapper">
+                    <input className="text-editable"
+                           type="text" defaultValue={this.text} />
+
+                    <div className="button-wrapper">
+                        <FaCheckCircle className="text-editable-button text-editable-save"
+                                       onClick={this.finishEditing.bind(this, true)} />
+                        <FaTimesCircle className="text-editable-button text-editable-cancel"
+                                       onClick={this.finishEditing.bind(this, false)} />
+                    </div>
+                </div>
+            )
+        }
+
+        return (
+          <span onClick={this.enableEditing.bind(this)}>{this.text}</span>
+        );
+    }
+
+    enableEditing() {
+        this.setState({
+            isEditable: true
+        });
+    }
+
+    /**
+     * Завершает редактирование элемента.
+     * Если значение параметра success - true,
+     * то вызывает onTextSaved. Выключает режим редактирования.
+     *
+     */
+    finishEditing(success, element) {
+        if (success) {
+            this.text = $("input.text-editable").val();
+
+            if (this.onTextSaved) {
+                this.onTextSaved(this.text);
+            }
+        }
+
+        this.setState({
+           isEditable: false
+        });
+    }
+}
\ No newline at end of file

cp/javascript/src/components/EditableText/style.css

+
+.text-editable {
+    background-color: transparent;
+    border: 2px solid rgba(255, 255, 255, 0.1);
+    color: inherit;
+}
+
+.text-editable-wrapper {
+    display: inline-block;
+}
+
+.text-editable-button {
+    cursor: pointer;
+}
+
+.text-editable-button:hover {
+    background-color: rgba(0, 0, 0, 0.2);
+}
+
+.text-editable-wrapper .button-wrapper {
+    display: inline-block;
+    margin-left: 5px;
+}
\ No newline at end of file

cp/package.json

@@ -11,8 +11,9 @@
     "jquery": "^3.3.1",
     "jquery-ui": "^1.12.1",
     "popper.js": "^1.14.2",
-    "react": "^16.3.0",
+    "react": "^16.3.2",
     "react-dom": "^16.3.0",
+    "react-icons": "^2.2.7",
     "reactstrap": "^5.0.0-beta.3"
   },
   "devDependencies": {

cp/webpack.config.js

@@ -39,6 +39,23 @@ module.exports = {
                     { loader: "style-loader" },
                     { loader: "css-loader" }
                 ]
+            },
+            {
+                test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+                use: [{
+                    loader: "url-loader",
+                    options: {
+                        limit: 10000,
+                        mimetype: "application/font-woff"
+                    }
+                }]
+            },
+            {
+                test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+                use: [{
+                    loader: "file-loader",
+                    options: {}
+                }]
             }
         ]
     }