dtd/es/table/Table.js

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

import _typeof from"babel-runtime/helpers/typeof";import _defineProperty from"babel-runtime/helpers/defineProperty";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";var __rest=this&&this.__rest||function(e,t){var r={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(r[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(o=Object.getOwnPropertySymbols(e);n<o.length;n++)t.indexOf(o[n])<0&&(r[o[n]]=e[o[n]])}return r};import*as React from"react";import*as ReactDOM from"react-dom";import RcTable from"rc-table";import*as PropTypes from"prop-types";import classNames from"classnames";import Pagination from"../pagination";import Icon from"../icon";import Spin from"../spin";import LocaleReceiver from"../locale-provider/LocaleReceiver";import defaultLocale from"../locale-provider/default";import warning from"../_util/warning";import FilterDropdown from"./filterDropdown";import createStore from"./createStore";import SelectionBox from"./SelectionBox";import SelectionCheckboxAll from"./SelectionCheckboxAll";import Column from"./Column";import ColumnGroup from"./ColumnGroup";import createBodyRow from"./createBodyRow";import{flatArray,treeMap,flatFilter,normalizeColumns}from"./util";import Button from"../button";function noop(){}function stopPropagation(e){e.stopPropagation(),e.nativeEvent.stopImmediatePropagation&&e.nativeEvent.stopImmediatePropagation()}var tableEmptyMsg={empty:"当前暂无内容",nomsg:"当前暂无信息",noper:"当前暂无权限"},defaultPagination={onChange:noop,onShowSizeChange:noop,showQuickJumper:!0,goButton:React.createElement(Button,{className:"default-go-button"},"Go"),showSizeChanger:!0,showTotal:function(e){return React.createElement("span",null,"共有",e,"条，每页显示：")}},emptyObject={},Table=function(e){function t(e){_classCallCheck(this,t);var r=_possibleConstructorReturn(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return r.getCheckboxPropsByItem=function(e,t){var o=r.props.rowSelection,n=void 0===o?{}:o;if(!n.getCheckboxProps)return{};var a=r.getRecordKey(e,t);return r.CheckboxPropsCache[a]||(r.CheckboxPropsCache[a]=n.getCheckboxProps(e)),r.CheckboxPropsCache[a]},r.onRow=function(e,t){var o=r.props,n=o.onRow,a=o.prefixCls,i=n?n(e,t):{};return _extends({},i,{prefixCls:a,store:r.store,rowKey:r.getRecordKey(e,t)})},r.handleFilter=function(e,t){var o=r.props,n=_extends({},r.state.pagination),a=_extends({},r.state.filters,_defineProperty({},r.getColumnKey(e),t)),i=[];treeMap(r.columns,function(e){e.children||i.push(r.getColumnKey(e))}),Object.keys(a).forEach(function(e){i.indexOf(e)<0&&delete a[e]}),o.pagination&&(n.current=1,n.onChange(n.current));var s={pagination:n,filters:{}},l=_extends({},a);r.getFilteredValueColumns().forEach(function(e){var t=r.getColumnKey(e);t&&delete l[t]}),Object.keys(l).length>0&&(s.filters=l),"object"===_typeof(o.pagination)&&"current"in o.pagination&&(s.pagination=_extends({},n,{current:r.state.pagination.current})),r.setState(s,function(){r.store.setState({selectionDirty:!1});var e=r.props.onChange;e&&e.apply(null,r.prepareParamsArguments(_extends({},r.state,{selectionDirty:!1,filters:a,pagination:n})))})},r.handleSelect=function(e,t,o){var n=o.target.checked,a=r.store.getState().selectionDirty?[]:r.getDefaultSelection(),i=r.store.getState().selectedRowKeys.concat(a),s=r.getRecordKey(e,t);n?i.push(r.getRecordKey(e,t)):i=i.filter(function(e){return s!==e}),r.store.setState({selectionDirty:!0}),r.setSelectedRowKeys(i,{selectWay:"onSelect",record:e,checked:n})},r.handleRadioSelect=function(e,t,o){var n=o.target.checked,a=r.store.getState().selectionDirty?[]:r.getDefaultSelection(),i=r.store.getState().selectedRowKeys.concat(a);i=[r.getRecordKey(e,t)],r.store.setState({selectionDirty:!0}),r.setSelectedRowKeys(i,{selectWay:"onSelect",record:e,checked:n})},r.handleSelectRow=function(e,t,o){var n=r.getFlatCurrentPageData(),a=r.store.getState().selectionDirty?[]:r.getDefaultSelection(),i=r.store.getState().selectedRowKeys.concat(a),s=n.filter(function(e,t){return!r.getCheckboxPropsByItem(e,t).disabled}).map(function(e,t){return r.getRecordKey(e,t)}),l=[],c="",u=void 0;switch(e){case"all":s.forEach(function(e){i.indexOf(e)<0&&(i.push(e),l.push(e))}),c="onSelectAll",u=!0;break;case"removeAll":s.forEach(function(e){i.indexOf(e)>=0&&(i.splice(i.indexOf(e),1),l.push(e))}),c="onSelectAll",u=!1;break;case"invert":s.forEach(function(e){i.indexOf(e)<0?i.push(e):i.splice(i.indexOf(e),1),l.push(e),c="onSelectInvert"})}r.store.setState({selectionDirty:!0});var p=r.props.rowSelection,d=2;if(p&&p.hideDefaultSelections&&(d=0),t>=d&&"function"==typeof o)return o(s);r.setSelectedRowKeys(i,{selectWay:c,checked:u,changeRowKeys:l})},r.handlePageChange=function(e){for(var t=arguments.length,o=Array(t>1?t-1:0),n=1;n<t;n++)o[n-1]=arguments[n];var a=r.props,i=_extends({},r.state.pagination);i.current=e||(i.current||1),i.onChange.apply(i,[i.current].concat(o));var s={pagination:i};a.pagination&&"object"===_typeof(a.pagination)&&"current"in a.pagination&&(s.pagination=_extends({},i,{current:r.state.pagination.current})),r.setState(s),r.store.setState({selectionDirty:!1});var l=r.props.onChange;l&&l.apply(null,r.prepareParamsArguments(_extends({},r.state,{selectionDirty:!1,pagination:i})))},r.renderSelectionBox=function(e){return function(t,o,n){var a=r.getRecordKey(o,n),i=r.getCheckboxPropsByItem(o,n);return React.createElement("span",{onClick:stopPropagation},React.createElement(SelectionBox,_extends({type:e,store:r.store,rowIndex:a,onChange:function(t){"radio"===e?r.handleRadioSelect(o,a,t):r.handleSelect(o,a,t)},defaultSelection:r.getDefaultSelection()},i)))}},r.getRecordKey=function(e,t){var o=r.props.rowKey,n="function"==typeof o?o(e,t):e[o];return warning(void 0!==n,"Each record in dataSource of table should have a unique `key` prop, or set `rowKey` to an unique primary key,see #"),void 0===n?t:n},r.getPopupContainer=function(){return ReactDOM.findDOMNode(r)},r.handleShowSizeChange=function(e,t){var o=r.state.pagination;o.onShowSizeChange(e,t);var n=_extends({},o,{pageSize:t,current:e});r.setState({pagination:n});var a=r.props.onChange;a&&a.apply(null,r.prepareParamsArguments(_extends({},r.state,{pagination:n})))},r.renderTable=function(e,t){var o,n=_extends({},e,r.props.locale),a=n.emptyText;if("string"==typeof a){var i=tableEmptyMsg[a];if(i){var s=require("./staticPng/"+a+".png");n.emptyText=React.createElement("div",null,React.createElement("img",{title:i,src:s}),React.createElement("div",{style:{padding:"16px"}},i))}}var l=r.props,c=(l.style,l.className,l.prefixCls),u=l.showHeader,p=l.textEllipsis,d=__rest(l,["style","className","prefixCls","showHeader","textEllipsis"]),f=r.getCurrentPageData(),m=r.props.expandedRowRender&&!1!==r.props.expandIconAsCell,h=classNames((_defineProperty(o={},c+"-"+r.props.size,!0),_defineProperty(o,c+"-bordered",r.props.bordered),_defineProperty(o,c+"-empty",!f.length),_defineProperty(o,c+"-without-column-header",!u),_defineProperty(o,c+"-fixedlayout",p),o)),g=r.renderRowSelection(n),y=(g=(g=r.renderColumnsDropdown(g,n)).map(function(e,t){var o=_extends({},e);return o.key=r.getColumnKey(o,t),o}))[0]&&"selection-column"===g[0].key?1:0;if("expandIconColumnIndex"in d&&(y=d.expandIconColumnIndex),d.scroll){var C=d.scroll,v=C.x,S=C.y,x={};v&&(x.overflowX="auto"),S&&(x.overflowY="auto"),d.bodyStyle=_extends({},x,d.bodyStyle)}return React.createElement(RcTable,_extends({key:"table"},d,{onRow:r.onRow,components:r.components,prefixCls:c,data:f,columns:g,showHeader:u,className:h,expandIconColumnIndex:y,expandIconAsCell:m,emptyText:!t.spinning&&n.emptyText}))},warning(!("columnsPageRange"in e||"columnsPageSize"in e),"`columnsPageRange` and `columnsPageSize` are removed, please use fixed columns instead, see: https://demo.dt-reta.tech/fixed-columns."),r.columns=e.columns||normalizeColumns(e.children),r.createComponents(e.components),r.state=_extends({},r.getDefaultSortOrder(r.columns),{filters:r.getFiltersFromColumns(),pagination:r.getDefaultPagination(e)}),r.CheckboxPropsCache={},r.store=createStore({selectedRowKeys:(e.rowSelection||{}).selectedRowKeys||[],selectionDirty:!1}),r}return _inherits(t,e),_createClass(t,[{key:"getDefaultSelection",value:function(){var e=this,t=this.props.rowSelection;return(void 0===t?{}:t).getCheckboxProps?this.getFlatData().filter(function(t,r){return e.getCheckboxPropsByItem(t,r).defaultChecked}).map(function(t,r){return e.getRecordKey(t,r)}):[]}},{key:"getDefaultPagination",value:function(e){var t=e.pagination||{};return this.hasPagination(e)?_extends({},defaultPagination,t,{current:t.defaultCurrent||t.current||1,pageSize:t.defaultPageSize||t.pageSize||10}):{}}},{key:"componentWillReceiveProps",value:function(e){if(this.columns=e.columns||normalizeColumns(e.children),("pagination"in e||"pagination"in this.props)&&this.setState(function(t){var r=_extends({},defaultPagination,t.pagination,e.pagination);return r.current=r.current||1,r.pageSize=r.pageSize||10,{pagination:!1!==e.pagination?r:emptyObject}}),e.rowSelection&&"selectedRowKeys"in e.rowSelection){this.store.setState({selectedRowKeys:e.rowSelection.selectedRowKeys||[]});var t=this.props.rowSelection;t&&e.rowSelection.getCheckboxProps!==t.getCheckboxProps&&(this.CheckboxPropsCache={})}if("dataSource"in e&&e.dataSource!==this.props.dataSource&&(this.store.setState({selectionDirty:!1}),this.CheckboxPropsCache={}),this.getSortOrderColumns(this.columns).length>0){var r=this.getSortStateFromColumns(this.columns);r.sortColumn===this.state.sortColumn&&r.sortOrder===this.state.sortOrder||this.setState(r)}if(this.getFilteredValueColumns(this.columns).length>0){var o=this.getFiltersFromColumns(this.columns),n=_extends({},this.state.filters);Object.keys(o).forEach(function(e){n[e]=o[e]}),this.isFiltersChanged(n)&&this.setState({filters:n})}this.createComponents(e.components,this.props.components)}},{key:"setSelectedRowKeys",value:function(e,t){var r=this,o=t.selectWay,n=t.record,a=t.checked,i=t.changeRowKeys,s=this.props.rowSelection,l=void 0===s?{}:s;!l||"selectedRowKeys"in l||this.store.setState({selectedRowKeys:e});var c=this.getFlatData();if(l.onChange||l[o]){var u=c.filter(function(t,o){return e.indexOf(r.getRecordKey(t,o))>=0});if(l.onChange&&l.onChange(e,u),"onSelect"===o&&l.onSelect)l.onSelect(n,a,u);else if("onSelectAll"===o&&l.onSelectAll){var p=c.filter(function(e,t){return i.indexOf(r.getRecordKey(e,t))>=0});l.onSelectAll(a,u,p)}else"onSelectInvert"===o&&l.onSelectInvert&&l.onSelectInvert(e)}}},{key:"hasPagination",value:function(e){return!1!==(e||this.props).pagination}},{key:"isFiltersChanged",value:function(e){var t=this,r=!1;return Object.keys(e).length!==Object.keys(this.state.filters).length?r=!0:Object.keys(e).forEach(function(o){e[o]!==t.state.filters[o]&&(r=!0)}),r}},{key:"getSortOrderColumns",value:function(e){return flatFilter(e||this.columns||[],function(e){return"sortOrder"in e})}},{key:"getFilteredValueColumns",value:function(e){return flatFilter(e||this.columns||[],function(e){return void 0!==e.filteredValue})}},{key:"getFiltersFromColumns",value:function(e){var t=this,r={};return this.getFilteredValueColumns(e).forEach(function(e){var o=t.getColumnKey(e);r[o]=e.filteredValue}),r}},{key:"getDefaultSortOrder",value:function(e){var t=this.getSortStateFromColumns(e),r=flatFilter(e||[],function(e){return null!=e.defaultSortOrder})[0];return r&&!t.sortColumn?{sortColumn:r,sortOrder:r.defaultSortOrder}:t}},{key:"getSortStateFromColumns",value:function(e){var t=this.getSortOrderColumns(e).filter(function(e){return e.sortOrder})[0];return t?{sortColumn:t,sortOrder:t.sortOrder}:{sortColumn:null,sortOrder:null}}},{key:"getSorterFn",value:function(){var e=this.state,t=e.sortOrder,r=e.sortColumn;if(t&&r&&"function"==typeof r.sorter)return function(e,o){var n=r.sorter(e,o);return 0!==n?"descend"===t?-n:n:0}}},{key:"toggleSortOrder",value:function(e,t){var r=this.state,o=r.sortColumn,n=r.sortOrder;this.isSortColumn(t)?n===e?(n="",o=null):n=e:(n=e,o=t);var a={sortOrder:n,sortColumn:o};0===this.getSortOrderColumns().length&&this.setState(a);var i=this.props.onChange;i&&i.apply(null,this.prepareParamsArguments(_extends({},this.state,a)))}},{key:"renderRowSelection",value:function(e){var t=this,r=this.props,o=r.prefixCls,n=r.rowSelection,a=this.columns.concat();if(n){var i=this.getFlatCurrentPageData().filter(function(e,r){return!n.getCheckboxProps||!t.getCheckboxPropsByItem(e,r).disabled}),s=classNames(o+"-selection-column",_defineProperty({},o+"-selection-column-custom",n.selections)),l={key:"selection-column",render:this.renderSelectionBox(n.type),className:s,fixed:n.fixed};if("radio"!==n.type){var c=i.every(function(e,r){return t.getCheckboxPropsByItem(e,r).disabled});l.title=React.createElement(SelectionCheckboxAll,{store:this.store,locale:e,data:i,getCheckboxPropsByItem:this.getCheckboxPropsByItem,getRecordKey:this.getRecordKey,disabled:c,prefixCls:o,onSelect:this.handleSelectRow,selections:n.selections,hideDefaultSelections:n.hideDefaultSelections,getPopupContainer:this.getPopupContainer})}"fixed"in n?l.fixed=n.fixed:a.some(function(e){return"left"===e.fixed||!0===e.fixed})&&(l.fixed="left"),a[0]&&"selection-column"===a[0].key?a[0]=l:a.unshift(l)}return a}},{key:"getColumnKey",value:function(e,t){return e.key||e.dataIndex||t}},{key:"getMaxCurrent",value:function(e){var t=this.state.pagination,r=t.current,o=t.pageSize;return(r-1)*o>=e?Math.floor((e-1)/o)+1:r}},{key:"isSortColumn",value:function(e){var t=this.state.sortColumn;return!(!e||!t)&&this.getColumnKey(t)===this.getColumnKey(e)}},{key:"renderColumnsDropdown",value:function(e,t){var r=this,o=this.props,n=o.prefixCls,a=o.dropdownPrefixCls,i=this.state.sortOrder;return treeMap(e,function(e,o){var s=_extends({},e),l=r.getColumnKey(s,o),c=void 0,u=void 0;if(s.filters&&s.filters.length>0||s.filterDropdown){var p=r.state.filters[l]||[];c=React.createElement(FilterDropdown,{locale:t,column:s,selectedKeys:p,confirmFilter:r.handleFilter,prefixCls:n+"-filter",dropdownPrefixCls:a||"dt-dropdown",getPopupContainer:r.getPopupContainer})}if(s.sorter){var d=r.isSortColumn(s);d&&(s.className=classNames(s.className,_defineProperty({},n+"-column-sort",i)));var f=d&&"ascend"===i,m=d&&"descend"===i;u=React.createElement("div",{className:n+"-column-sorter"},React.createElement("span",{className:n+"-column-sorter-up "+(f?"on":"off"),title:"↑",onClick:function(){return r.toggleSortOrder("ascend",s)}},React.createElement(Icon,{type:"caret-up"})),React.createElement("span",{className:n+"-column-sorter-down "+(m?"on":"off"),title:"↓",onClick:function(){return r.toggleSortOrder("descend",s)}},React.createElement(Icon,{type:"caret-down"})))}return s.title=React.createElement("span",null,s.title,u,c),(u||c)&&(s.className=classNames(n+"-column-has-filters",s.className)),s})}},{key:"renderPagination",value:function(){if(!this.hasPagination())return null;var e="default",t=this.state.pagination;t.size?e=t.size:"middle"!==this.props.size&&"small"!==this.props.size||(e="small");var r=t.total||this.getLocalData().length;return r>0?React.createElement(Pagination,_extends({key:"pagination"},t,{className:classNames(t.className,this.props.prefixCls+"-pagination"),onChange:this.handlePageChange,total:r,size:e,current:this.getMaxCurrent(r),onShowSizeChange:this.handleShowSizeChange})):null}},{key:"prepareParamsArguments",value:function(e){var t=_extends({},e.pagination);delete t.onChange,delete t.onShowSizeChange;var r=e.filters,o={};return e.sortColumn&&e.sortOrder&&(o.column=e.sortColumn,o.order=e.sortOrder,o.field=e.sortColumn.dataIndex,o.columnKey=this.getColumnKey(e.sortColumn)),[t,r,o]}},{key:"findColumn",value:function(e){var t=this,r=void 0;return treeMap(this.columns,function(o){t.getColumnKey(o)===e&&(r=o)}),r}},{key:"getCurrentPageData",value:function(){var e=this.getLocalData(),t=void 0,r=void 0,o=this.state;return this.hasPagination()?(r=o.pagination.pageSize,t=this.getMaxCurrent(o.pagination.total||e.length)):(r=Number.MAX_VALUE,t=1),(e.length>r||r===Number.MAX_VALUE)&&(e=e.filter(function(e,o){return o>=(t-1)*r&&o<t*r})),e}},{key:"getFlatData",value:function(){return flatArray(this.getLocalData())}},{key:"getFlatCurrentPageData",value:function(){return flatArray(this.getCurrentPageData())}},{key:"recursiveSort",value:function(e,t){var r=this,o=this.props.childrenColumnName,n=void 0===o?"children":o;return e.sort(t).map(function(e){return e[n]?_extends({},e,_defineProperty({},n,r.recursiveSort(e[n],t))):e})}},{key:"getLocalData",value:function(){var e=this,t=this.state,r=this.props.dataSource||[];r=r.slice(0);var o=this.getSorterFn();return o&&(r=this.recursiveSort(r,o)),t.filters&&Object.keys(t.filters).forEach(function(o){var n=e.findColumn(o);if(n){var a=t.filters[o]||[];if(0!==a.length){var i=n.onFilter;r=i?r.filter(function(e){return a.some(function(t){return i(t,e)})}):r}}}),r}},{key:"createComponents",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=arguments[1],r=e&&e.body&&e.body.row,o=t&&t.body&&t.body.row;this.components&&r===o||(this.components=_extends({},e),this.components.body=_extends({},e.body,{row:createBodyRow(r)}))}},{key:"render",value:function(){var e=this,t=this.props,r=t.style,o=t.className,n=t.prefixCls,a=this.getCurrentPageData(),i=this.props.loading;"boolean"==typeof i&&(i={spinning:i});var s=React.createElement(LocaleReceiver,{componentName:"Table",defaultLocale:defaultLocale.Table},function(t){return e.renderTable(t,i)}),l=this.hasPagination()&&a&&0!==a.length?n+"-with-pagination":n+"-without-pagination";return React.createElement("div",{className:classNames(n+"-wrapper",o),style:r},React.createElement(Spin,_extends({},i,{className:i.spinning?l+" "+n+"-spin-holder":""}),s,this.renderPagination()))}}]),t}(React.Component);export default Table;Table.Column=Column,Table.ColumnGroup=ColumnGroup,Table.propTypes={dataSource:PropTypes.array,columns:PropTypes.array,prefixCls:PropTypes.string,useFixedHeader:PropTypes.bool,rowSelection:PropTypes.object,className:PropTypes.string,size:PropTypes.string,loading:PropTypes.oneOfType([PropTypes.bool,PropTypes.object]),bordered:PropTypes.bool,onChange:PropTypes.func,locale:PropTypes.object,dropdownPrefixCls:PropTypes.string},Table.defaultProps={dataSource:[],prefixCls:"dt-table",useFixedHeader:!1,rowSelection:null,className:"",size:"large",loading:!1,bordered:!0,indentSize:20,locale:{},rowKey:"key",showHeader:!0};