app-base-react/lib/library/edit-table/index.js

react development common base package.

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var _table=require("antd/lib/table"),_table2=_interopRequireDefault(_table),_button=require("antd/lib/button"),_button2=_interopRequireDefault(_button),_popconfirm=require("antd/lib/popconfirm"),_popconfirm2=_interopRequireDefault(_popconfirm),_input=require("antd/lib/input"),_input2=_interopRequireDefault(_input),_regenerator=require("babel-runtime/regenerator"),_regenerator2=_interopRequireDefault(_regenerator),_message2=require("antd/lib/message"),_message3=_interopRequireDefault(_message2),_form=require("antd/lib/form"),_form2=_interopRequireDefault(_form),_createClass=function(){function a(e,t){for(var r=0;r<t.length;r++){var a=t[r];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}return function(e,t,r){return t&&a(e.prototype,t),r&&a(e,r),e}}(),_extends=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r,a=arguments[t];for(r in a)Object.prototype.hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e},_slicedToArray=function(e,t){if(Array.isArray(e))return e;if(Symbol.iterator in Object(e)){var r=t,a=[],n=!0,t=!1,o=void 0;try{for(var i,l=e[Symbol.iterator]();!(n=(i=l.next()).done)&&(a.push(i.value),!r||a.length!==r);n=!0);}catch(e){t=!0,o=e}finally{try{!n&&l.return&&l.return()}finally{if(t)throw o}}return a}throw new TypeError("Invalid attempt to destructure non-iterable instance")},_react=(require("antd/lib/table/style/css"),require("antd/lib/button/style/css"),require("antd/lib/popconfirm/style/css"),require("antd/lib/input/style/css"),require("antd/lib/message/style/css"),require("antd/lib/form/style/css"),require("react")),_react2=_interopRequireDefault(_react),_antd=require("antd"),_icons=require("@ant-design/icons");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _toConsumableArray(e){if(Array.isArray(e)){for(var t=0,r=Array(e.length);t<e.length;t++)r[t]=e[t];return r}return Array.from(e)}function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _possibleConstructorReturn(e,t){if(e)return!t||"object"!=typeof t&&"function"!=typeof t?e:t;throw new ReferenceError("this hasn't been initialised - super() hasn't been called")}function _inherits(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function _asyncToGenerator(e){return function(){var l=e.apply(this,arguments);return new Promise(function(o,i){return function t(e,r){try{var a=l[e](r),n=a.value}catch(e){return void i(e)}if(!a.done)return Promise.resolve(n).then(function(e){t("next",e)},function(e){t("throw",e)});o(n)}("next")})}}function _defineProperty(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function _objectWithoutProperties(e,t){var r,a={};for(r in e)0<=t.indexOf(r)||Object.prototype.hasOwnProperty.call(e,r)&&(a[r]=e[r]);return a}var EditableContext=_react2.default.createContext(),EditableRow=function(e){e.index;var e=_objectWithoutProperties(e,["index"]),t=_form2.default.useForm(),t=_slicedToArray(t,1)[0];return _react2.default.createElement(_form2.default,{form:t,component:!1},_react2.default.createElement(EditableContext.Provider,{value:t},_react2.default.createElement("tr",e)))},EditableCell=function(e){e.title;function a(){s(!d),p.setFieldsValue(_defineProperty({},i,l[i]))}function t(e){return r.apply(this,arguments)}var r,n=e.editable,o=e.children,i=e.dataIndex,l=e.record,u=e.handleSave,e=_objectWithoutProperties(e,["title","editable","children","dataIndex","record","handleSave"]),c=(0,_react.useState)(!1),c=_slicedToArray(c,2),d=c[0],s=c[1],f=(0,_react.useRef)(),p=(0,_react.useContext)(EditableContext),c=((0,_react.useEffect)(function(){d&&f.current.focus()},[d]),r=_asyncToGenerator(_regenerator2.default.mark(function e(t){var r;return _regenerator2.default.wrap(function(e){for(;;)switch(e.prev=e.next){case 0:return e.prev=0,e.next=3,p.validateFields();case 3:r=e.sent,a(),u(l,_extends({},l,r)),e.next=11;break;case 8:e.prev=8,e.t0=e.catch(0),_message3.default.error("保存出错了,错误信息是:"+e.t0);case 11:case"end":return e.stop()}},e,void 0,[[0,8]])})),o);return n&&(c=d?_react2.default.createElement(_form2.default.Item,{style:{margin:0},name:i},_react2.default.createElement(_input2.default.TextArea,{ref:f,onPressEnter:t,onBlur:t})):_react2.default.createElement("div",{style:{minHeight:30,paddingRight:24,display:"flex",alignItems:"center",justifyContent:"space-between"},onClick:a},o,_react2.default.createElement(_icons.EditOutlined,null))),_react2.default.createElement("td",e,c)},EditTable=function(){function t(e){_classCallCheck(this,t);var i=_possibleConstructorReturn(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return i.handleDelete=function(t){var e=[].concat(_toConsumableArray(i.state.dataSource));i.setState({dataSource:e.filter(function(e){return e.paramKey!==t})})},i.handleAdd=function(){var e=i.state.dataSource;i.setState({dataSource:[].concat(_toConsumableArray(e),[{paramKey:"",paramValue:""}])})},i.handleSave=function(t,r){var a,e,n,o;r.paramKey?(a=!1,e=[].concat(_toConsumableArray(i.state.dataSource)),t.paramKey!=r.paramKey&&e.map(function(e){e.paramKey==r.paramKey&&(a=!0)}),a?_message3.default.error("存在重复key"):(n=e.findIndex(function(e){return t.paramKey===e.paramKey}),o=e[n],e.splice(n,1,_extends({},o,r)),i.setState({dataSource:e}))):_message3.default.error("请先输入key")},i.columns=[{title:"key",dataIndex:"paramKey",width:"20%",editable:!0},{title:"value",dataIndex:"paramValue",width:"65%",editable:!0},{title:"操作",dataIndex:"operation",width:"15%",render:function(e,t,r){return 1<=i.state.dataSource.length?_react2.default.createElement(_popconfirm2.default,{getPopupContainer:function(){return document.body},placement:"top",overlayStyle:{minHeight:"80px"},key:r,title:"确定删除吗?",onConfirm:function(){return i.handleDelete(t.paramKey)}},_react2.default.createElement("a",null,"删除")):null}}],i.state={dataSource:e.dataSource||[]},i}return _inherits(t,_react2.default.Component),_createClass(t,[{key:"render",value:function(){var r=this,e=this.state.dataSource,t={body:{row:EditableRow,cell:EditableCell}},a=this.columns.map(function(t){return t.editable?_extends({},t,{onCell:function(e){return{record:e,editable:t.editable,dataIndex:t.dataIndex,title:t.title,handleSave:r.handleSave}}}):t});return _react2.default.createElement("div",null,_react2.default.createElement(_button2.default,{onClick:this.handleAdd,type:"primary",style:{marginBottom:16}},"新增行"),_react2.default.createElement(_table2.default,{size:"middle",components:t,rowClassName:function(){return"editable-row"},bordered:!0,dataSource:e,columns:a,pagination:!1,scroll:{y:300}}))}}]),t}();exports.default=EditTable;