app-base-web/lib/library/editTable/index.js

web 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),_form=require("antd/lib/form"),_form2=_interopRequireDefault(_form),_createClass=function(){function n(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(e,t,r){return t&&n(e.prototype,t),r&&n(e,r),e}}(),_extends=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r,n=arguments[t];for(r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},_slicedToArray=function(e,t){if(Array.isArray(e))return e;if(Symbol.iterator in Object(e))return function(e,t){var r=[],n=!0,a=!1,o=void 0;try{for(var i,l=e[Symbol.iterator]();!(n=(i=l.next()).done)&&(r.push(i.value),!t||r.length!==t);n=!0);}catch(e){a=!0,o=e}finally{try{!n&&l.return&&l.return()}finally{if(a)throw o}}return r}(e,t);throw new TypeError("Invalid attempt to destructure non-iterable instance")};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/form/style/css");var _react=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)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}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 n=l[e](r),a=n.value}catch(e){return void i(e)}if(!n.done)return Promise.resolve(a).then(function(e){t("next",e)},function(e){t("throw",e)});o(a)}("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,n={};for(r in e)0<=t.indexOf(r)||Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n}var EditableContext=_react2.default.createContext(),EditableRow=function(e){e.index;var t=_objectWithoutProperties(e,["index"]),r=_form2.default.useForm(),n=_slicedToArray(r,1)[0];return _react2.default.createElement(_form2.default,{form:n,component:!1},_react2.default.createElement(EditableContext.Provider,{value:n},_react2.default.createElement("tr",t)))},EditableCell=function(e){e.title;var t=e.editable,r=e.children,n=e.dataIndex,a=e.record,o=e.handleSave,i=_objectWithoutProperties(e,["title","editable","children","dataIndex","record","handleSave"]),l=(0,_react.useState)(!1),u=_slicedToArray(l,2),c=u[0],d=u[1],s=(0,_react.useRef)(),f=(0,_react.useContext)(EditableContext);(0,_react.useEffect)(function(){c&&s.current.focus()},[c]);function p(){d(!c),f.setFieldsValue(_defineProperty({},n,a[n]))}var _,b=(_=_asyncToGenerator(regeneratorRuntime.mark(function e(t){var r;return regeneratorRuntime.wrap(function(e){for(;;)switch(e.prev=e.next){case 0:return e.prev=0,e.next=3,f.validateFields();case 3:r=e.sent,p(),o(_extends({},a,r)),e.next=11;break;case 8:e.prev=8,e.t0=e.catch(0),console.log("Save failed:",e.t0);case 11:case"end":return e.stop()}},e,void 0,[[0,8]])})),function(e){return _.apply(this,arguments)}),y=r;return t&&(y=c?_react2.default.createElement(_form2.default.Item,{style:{margin:0},name:n},_react2.default.createElement(_input2.default,{ref:s,onPressEnter:b,onBlur:b})):_react2.default.createElement("div",{style:{paddingRight:24,display:"flex",alignItems:"center",justifyContent:"space-between"},onClick:p},r,_react2.default.createElement(_icons.EditOutlined,null))),_react2.default.createElement("td",i,y)},EditableTable=function(){function t(e){_classCallCheck(this,t);var a=_possibleConstructorReturn(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return a.handleDelete=function(t){var e=[].concat(_toConsumableArray(a.state.dataSource));a.setState({dataSource:e.filter(function(e){return e.key!==t})})},a.handleAdd=function(){var e=a.state,t=e.count,r=e.dataSource,n={key:t,paramKey:"",paramValue:""};a.setState({dataSource:[].concat(_toConsumableArray(r),[n]),count:t+1})},a.handleSave=function(t){var e=[].concat(_toConsumableArray(a.state.dataSource)),r=e.findIndex(function(e){return t.key===e.key}),n=e[r];e.splice(r,1,_extends({},n,t)),a.setState({dataSource:e})},a.columns=[{title:"key",dataIndex:"paramKey",width:"40%",editable:!0},{title:"value",dataIndex:"paramValue",width:"40%",editable:!0},{title:"操作",dataIndex:"operation",width:"20%",render:function(e,t){return 1<=a.state.dataSource.length?_react2.default.createElement(_popconfirm2.default,{title:"确定删除吗?",onConfirm:function(){return a.handleDelete(t.key)}},_react2.default.createElement("a",null,"删除")):null}}],a.state={dataSource:a.props.dataSource?a.props.dataSource:[],count:a.props.dataSource?a.props.dataSource.length:0},a}return _inherits(t,_react2.default.Component),_createClass(t,[{key:"render",value:function(){var r=this;console.log("this.state.dataSource",this.state.dataSource);var e=this.state.dataSource,t={body:{row:EditableRow,cell:EditableCell}},n=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,{components:t,rowClassName:function(){return"editable-row"},bordered:!0,dataSource:e,columns:n,pagination:!1,scroll:{y:300}}))}}]),t}();exports.default=EditableTable;