dtd/es/edit/index.js

根据数梦工场视觉规范打造的组件库，感谢react-components和ant design

import _extends from"babel-runtime/helpers/extends";import _classCallCheck from"babel-runtime/helpers/classCallCheck";import _createClass from"babel-runtime/helpers/createClass";import _possibleConstructorReturn from"babel-runtime/helpers/possibleConstructorReturn";import _inherits from"babel-runtime/helpers/inherits";import*as React from"react";import{Icon,Input}from"../index";var Edit=function(e){function t(e){_classCallCheck(this,t);var a=_possibleConstructorReturn(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return a.state={value:a.props.value,editable:!1},a.handleChange=function(e){var t=e.target.value;a.setState({value:t})},a.check=function(){a.setState({editable:!1}),a.props.onChange&&a.props.onChange(a.state.value)},a.edit=function(){a.setState({editable:!0})},a}return _inherits(t,e),_createClass(t,[{key:"componentDidUpdate",value:function(){if(this.state.editable){this.inputComponent.focus();var e=this.inputComponent.input;if(null!=e.selectionStart)e.selectionStart=this.state.value.toString().length,e.selectionEnd=this.state.value.toString().length;else{var t=e.createTextRange();t.moveStart("character",e.value.length),t.collapse(!0),t.select()}}}},{key:"componentWillReceiveProps",value:function(e){this.props.value!==e.value&&this.setState(_extends({},this.state,{value:e.value}))}},{key:"render",value:function(){var e=this,t=this.state,a=t.value,n=t.editable;return React.createElement("div",{className:"editable-cell"},n?React.createElement("div",{className:"editable-cell-input-wrapper"},React.createElement(Input,{ref:function(t){return e.inputComponent=t},value:a,onChange:this.handleChange,onPressEnter:this.check}),React.createElement(Icon,{type:"check",className:"editable-cell-icon-check",onClick:this.check})):React.createElement("div",{className:"editable-cell-text-wrapper"},a||" ",React.createElement(Icon,{type:"edit",className:"editable-cell-icon",onClick:this.edit})))}}]),t}(React.Component);export default Edit;