66 lines
1.8 KiB
JavaScript
66 lines
1.8 KiB
JavaScript
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 });
|
|
};
|
|
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}
|
|
<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>
|
|
);
|
|
}
|
|
}
|