fork from bc4552c5a8

client/components/Label/Label.js

@@ -0,0 +1,65 @@
+import React, { Component } from 'react';
+import { Icon, Input, Tooltip } from 'antd';
+import PropTypes from 'prop-types';
+import './Label.scss';
+
+export default class Label extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      inputShow: false,
+      inputValue: ''
+    };
+  }
+  static propTypes = {
+    onChange: PropTypes.func,
+    desc: PropTypes.string,
+    cat_name: PropTypes.string
+  };
+  toggle = () => {
+    this.setState({ inputShow: !this.state.inputShow });
+  };
+  handleChange = event => {
+    this.setState({ inputValue: event.target.value });
+  };
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (this.props.desc === nextProps.desc) {
+      this.setState({
+        inputShow: false
+      });
+    }
+  }
+  render() {
+    return (
+      <div>
+        {this.props.desc && (
+          <div className="component-label">
+            {!this.state.inputShow ? (
+              <div>
+                <p>
+                  {this.props.desc} &nbsp;&nbsp;
+                  <Tooltip title="编辑简介">
+                    <Icon onClick={this.toggle} className="interface-delete-icon" type="edit" />
+                  </Tooltip>
+                </p>
+              </div>
+            ) : (
+              <div className="label-input-wrapper">
+                <Input onChange={this.handleChange} defaultValue={this.props.desc} size="small" />
+                <Icon
+                  className="interface-delete-icon"
+                  onClick={() => {
+                    this.props.onChange(this.state.inputValue);
+                    this.toggle();
+                  }}
+                  type="check"
+                />
+                <Icon className="interface-delete-icon" onClick={this.toggle} type="close" />
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    );
+  }
+}

client/components/Label/Label.scss

@@ -0,0 +1,28 @@
+.component-label {
+  p {
+    padding: 3px 7px;
+    &:hover {
+      .interface-delete-icon {
+        display: inline-block;
+      }
+    }
+    .interface-delete-icon {
+      display: none;
+    }
+  }
+  .interface-delete-icon {
+    &:hover {
+      color: #2395f1;
+      cursor: pointer;
+    }
+  }
+  .label-input-wrapper {
+    input {
+      width: 30%;
+    }
+    .interface-delete-icon {
+      font-size: 1.4em;
+      margin-left: 10px;
+    }
+  }
+}