diff --git a/components/apolloTable/component/Cell.tsx b/components/apolloTable/component/Cell.tsx index a3acf2a1e3a8ab8b37b0621d078f1514c17a2db5..e45cfafd17361a0b2ef1fb0733cd5f58546e8ebc 100644 --- a/components/apolloTable/component/Cell.tsx +++ b/components/apolloTable/component/Cell.tsx @@ -191,7 +191,6 @@ const Cell = (props: CellProps) => { )} ); - console.log('contentMenu', contentMenu); return contentMenu ? ( { return colWidth; }; - onResize = ({ width }: { width: number }) => { + onResize = ({ width, height }: { width: number; height: number }) => { this.setState( { tableWidth: width, + tableHeight: height, }, () => { this.grid1 && this.grid1.recomputeGridSize(); @@ -194,7 +197,7 @@ export default class AirTable extends Component { // 下拉加载 onScroll = ({ clientHeight, scrollHeight, scrollTop }: any) => { const height = clientHeight + scrollTop || 0; - const { onScroll, distanceToLoad = 100 } = this.props; + const { onScroll, distanceToLoad = 0 } = this.props; if (scrollTop > 0 && height >= scrollHeight - distanceToLoad && typeof onScroll === 'function') { onScroll(); } @@ -338,15 +341,17 @@ export default class AirTable extends Component { }; render() { - const { loading, noDataPlaceholder } = this.props; - const { columns, dataSource, tableWidth = 0 } = this.state; - const { overscanColumnCount, overscanRowCount, rowHeight, columnWidth, headerHeight } = this.config; + const { loading, noDataPlaceholder, loadComp } = this.props; + const { columns, dataSource, tableWidth = 0, tableHeight = 0 } = this.state; + const { overscanColumnCount, overscanRowCount, rowHeight, headerHeight } = this.config; const scrollbarWidth = scrollbarSize() || 0; const showColumns = this.memoizeColumns(columns); const leftColumns = this.memoizeLeftColumns(columns); const rightColumns = this.memoizeRightColumns(columns); // 有隐藏列时，修正数据与列头不匹配问题 const showData = this.memoizeData(showColumns, dataSource); + const leftData = this.memoizeData(leftColumns, dataSource); + const rightData = this.memoizeData(rightColumns, dataSource); // 左侧固定列数量 const leftCount = leftColumns.length; const rightCount = rightColumns.length; @@ -354,242 +359,263 @@ export default class AirTable extends Component { const rowCount = showData.length; const leftWidth = this.memoizeLeftWidth(leftColumns, showColumns); const rightWidth = this.memoizeLeftWidth(rightColumns, showColumns); - let totalHeight: number = rowCount * rowHeight; + // let totalHeight: number = rowCount * rowHeight; + let totalHeight: number = tableHeight - headerHeight; const { totalWidth } = this.memoizeTotalWidth(showColumns); - if (rowCount > 0 && totalWidth > tableWidth) { - totalHeight = rowCount * rowHeight + scrollbarWidth; + // if (rowCount > 0 && totalWidth > tableWidth) { + // // totalHeight = rowCount * rowHeight + scrollbarWidth; + // totalHeight = tableHeight + scrollbarWidth; + // } + let realWidth = tableWidth; + if (rowCount > 0 && rowCount * rowHeight > totalHeight) { + realWidth = tableWidth + scrollbarWidth; } + console.log('rightColumns', rightColumns); return ( - - {({ onScroll, scrollLeft, scrollTop }: any) => { - return ( -
- {totalWidth > tableWidth && leftCount > 0 && ( + + {({ locale }) => ( + + {({ onScroll, scrollLeft, scrollTop }: any) => { + return (
- { - // 左侧表头 -
- { - this.grid1 = dom; - }} - className={styles.headerGrid} - columnWidth={this.getColumnWidth.bind(this, showColumns)} - columnCount={leftCount} - width={leftWidth} - rowHeight={headerHeight} - rowCount={1} - height={headerHeight} - cellRenderer={this.renderHeaderCell.bind(this, { - showColumns: leftColumns, - })} - /> -
+ className={ + this.props.onScroll + ? classNames(styles.tableContainer, styles.scroll) + : styles.tableContainer } - { - // 左侧固定列 + > + {totalWidth > tableWidth && leftCount > 0 && (
- { - this.grid2 = dom; - }} - className={styles.sideGrid} - overscanRowCount={overscanRowCount} - cellRenderer={this.renderBodyRow.bind(this, { - showColumns: leftColumns, - showData, - })} - columnWidth={this.getColumnWidth.bind(this, showColumns)} - columnCount={leftCount} - width={leftWidth} - rowHeight={rowHeight} - rowCount={rowCount} - height={totalHeight - scrollbarWidth} - scrollTop={scrollTop} - /> -
- } -
- )} -
- - {({ width }: any) => { - return ( -
- { - // 中部表头 -
+ { + this.grid1 = dom; }} - > - { - this.grid3 = dom; - }} - className={styles.headerGrid} - overscanColumnCount={overscanColumnCount} - columnWidth={this.getColumnWidth.bind(this, showColumns)} - columnCount={columnCount} - width={width} - rowHeight={headerHeight} - rowCount={1} - height={headerHeight} - scrollLeft={scrollLeft} - cellRenderer={this.renderHeaderCell.bind(this, { - showColumns, - })} - /> -
- } - { - // 中部内容 -
+
+ } + { + // 左侧固定列 +
+ { + this.grid2 = dom; }} - > - {rowCount > 0 ? ( - { - this.grid4 = dom; - }} - className={styles.centerGrid} - overscanColumnCount={overscanColumnCount} - overscanRowCount={overscanRowCount} - columnWidth={this.getColumnWidth.bind( - this, - showColumns, - )} - columnCount={columnCount} - width={width} - rowHeight={rowHeight} - rowCount={rowCount} - onScroll={(...arg: Array) => { - onScroll(...arg); - this.onScroll(arg[0]); + className={styles.sideGrid} + overscanRowCount={overscanRowCount} + cellRenderer={this.renderBodyRow.bind(this, { + showColumns: leftColumns, + showData: leftData, + })} + columnWidth={this.getColumnWidth.bind(this, showColumns)} + columnCount={leftCount} + width={leftWidth} + rowHeight={rowHeight} + rowCount={rowCount} + height={totalHeight - scrollbarWidth} + scrollTop={scrollTop} + /> + + } + + )} +
+ + {({ width, height }: any) => { + return ( +
+ { + // 中部表头 +
- ) : ( - columnCount > 0 && - !loading && ( - + { + this.grid3 = dom; + }} + className={styles.headerGrid} + overscanColumnCount={overscanColumnCount} + columnWidth={this.getColumnWidth.bind( + this, + showColumns, + )} + columnCount={columnCount} + width={width} + rowHeight={headerHeight} + rowCount={1} + height={headerHeight} + scrollLeft={scrollLeft} + cellRenderer={this.renderHeaderCell.bind(this, { + showColumns, + })} /> - ) - )} +
+ } + { + // 中部内容 +
+ {rowCount > 0 ? ( + { + this.grid4 = dom; + }} + className={styles.centerGrid} + overscanColumnCount={overscanColumnCount} + overscanRowCount={overscanRowCount} + columnWidth={this.getColumnWidth.bind( + this, + showColumns, + )} + columnCount={columnCount} + width={realWidth} + rowHeight={rowHeight} + rowCount={rowCount} + onScroll={(...arg: Array) => { + onScroll(...arg); + this.onScroll(arg[0]); + }} + height={totalHeight} + cellRenderer={this.renderBodyRow.bind(this, { + showColumns, + showData, + })} + /> + ) : ( + columnCount > 0 && + !loading && ( + + ) + )} + + } - } - - ); - }} - - - {totalWidth > tableWidth && rightCount > 0 && ( -
- { - // 右侧表头 -
- { - this.grid5 = dom; - }} - className={styles.headerGrid} - columnWidth={this.getColumnWidth.bind(this, showColumns)} - columnCount={rightCount} - width={rightWidth} - rowHeight={headerHeight} - rowCount={1} - height={headerHeight} - cellRenderer={this.renderHeaderCell.bind(this, { - showColumns: rightColumns, - position: 'right', - })} - /> -
- } - { - // 右侧固定列 + +
+ {totalWidth > tableWidth && rightCount > 0 && (
- { - this.grid6 = dom; - }} - className={styles.sideGrid} - overscanRowCount={overscanRowCount} - cellRenderer={this.renderBodyRow.bind(this, { - showColumns: rightColumns, - showData, - position: 'right', - })} - columnWidth={this.getColumnWidth.bind(this, showColumns)} - columnCount={rightCount} - width={rightWidth} - rowHeight={rowHeight} - rowCount={rowCount} - height={totalHeight - scrollbarWidth} - scrollTop={scrollTop} - /> + { + // 右侧表头 +
+ { + this.grid5 = dom; + }} + className={styles.headerGrid} + columnWidth={this.getColumnWidth.bind(this, showColumns)} + columnCount={rightCount} + width={rightWidth} + rowHeight={headerHeight} + rowCount={1} + height={headerHeight} + cellRenderer={this.renderHeaderCell.bind(this, { + showColumns: rightColumns, + position: 'right', + })} + /> +
+ } + { + // 右侧固定列 +
+ { + this.grid6 = dom; + }} + className={styles.sideGrid} + overscanRowCount={overscanRowCount} + cellRenderer={this.renderBodyRow.bind(this, { + showColumns: rightColumns, + showData: rightData, + position: 'right', + })} + columnWidth={this.getColumnWidth.bind(this, showColumns)} + columnCount={rightCount} + width={rightWidth} + rowHeight={rowHeight} + rowCount={rowCount} + height={totalHeight - scrollbarWidth} + scrollTop={scrollTop} + /> +
+ }
- } + )} +
+
{loading && (loadComp ? loadComp : )}
- )} -
-
{/**/}
-
- ); - }} - + ); + }} + + )} + ); } } diff --git a/components/apolloTable/component/context.ts b/components/apolloTable/component/context.ts new file mode 100644 index 0000000000000000000000000000000000000000..33d2f792a84dba00846b2e7f7fb94498d3ddb1e4 --- /dev/null +++ b/components/apolloTable/component/context.ts @@ -0,0 +1,4 @@ +import React from 'react'; + +const { Consumer, Provider } = React.createContext({}); +export { Consumer, Provider }; diff --git a/components/apolloTable/component/filter-condition/index.tsx b/components/apolloTable/component/filter-condition/index.tsx index a983a364091be644d874f1f779353d6339e2e16b..5720fa8f67f34e5a2dfec173a2da0c40e8e2b904 100644 --- a/components/apolloTable/component/filter-condition/index.tsx +++ b/components/apolloTable/component/filter-condition/index.tsx @@ -5,6 +5,7 @@ import styles from './styles.less'; import { config } from '../base/config'; import { transferAttr } from '../base/_utils/transferAttr'; import { ColumnProps } from '../interface'; +import { Consumer } from '../context'; const formatTags = (columns: ColumnProps[], tags: any[]) => { if (!columns || columns.length === 0 || !tags || !Array.isArray(tags)) { @@ -29,9 +30,10 @@ const formatTags = (columns: ColumnProps[], tags: any[]) => { return item.text; }) .join(','); - const op = operator.find((item: any) => { - return item.id === tag.operationCode; - }) || {}; + const op = + operator.find((item: any) => { + return item.id === tag.operationCode; + }) || {}; textTags.push(`${colConfig.columnChsName} ${op.name} ${value}`); }); return textTags; @@ -59,8 +61,8 @@ class FormFilterButton extends Component { static getDerivedStateFromProps(nextProps: Props, prevState: State) { if ( - JSON.stringify(nextProps.value) !== JSON.stringify(prevState.value) - || JSON.stringify(nextProps.columns) !== JSON.stringify(prevState.columns) + JSON.stringify(nextProps.value) !== JSON.stringify(prevState.value) || + JSON.stringify(nextProps.columns) !== JSON.stringify(prevState.columns) ) { return { value: _.cloneDeep(nextProps.value), @@ -105,36 +107,42 @@ class FormFilterButton extends Component { const { tags } = this.state; const { onSaveFilter } = this.props; return ( -
-
Selected conditions:
-
-
- {tags.map((item: any, i: number) => { - return ( - - {item} - - ); - })} -
-
- {onSaveFilter && ( -
- Save as a shortcut + + {({ locale }) => { + return ( +
+
{locale.selectedConditions}
+
+
+ {tags.map((item: any, i: number) => { + return ( + + {item} + + ); + })} +
+
+ {onSaveFilter && ( +
+ {locale.saveShortcut} +
+ )} +
+ {locale.clearFilter} +
+
- )} -
- Clear filters
-
-
-
+ ); + }} + ); } } diff --git a/components/apolloTable/component/filter/index.tsx b/components/apolloTable/component/filter/index.tsx index 971ba85f88f8d73101a56874279a17806b214ec3..815b90a9e7770cd09c3c922a2bb6e7d98d10315c 100644 --- a/components/apolloTable/component/filter/index.tsx +++ b/components/apolloTable/component/filter/index.tsx @@ -9,6 +9,7 @@ import s from '../hide/index.less'; import styles from './index.less'; import filterIcon from '../../assets/filter.png'; import closeIcon from '../../assets/close.png'; +import { Consumer } from '../context'; const TransType = ['2', '3', '4', '13', '14', '15']; interface Props { @@ -190,7 +191,7 @@ export default class Filter extends Component { } }; - renderContent = () => { + renderContent = (locale) => { const { filterConfig } = this.state; const { columns } = this.props; const filterColumnConfig = this.getFilterColumns(columns); @@ -229,7 +230,7 @@ export default class Filter extends Component { value={item.colName || undefined} onChange={this.changeFilterKey.bind(this, i)} style={{ width: '100%' }} - placeholder="please select" + placeholder={locale.select} > {filterColumnConfig.map((option) => { return ( @@ -243,7 +244,7 @@ export default class Filter extends Component {
@@ -263,7 +264,7 @@ export default class Sort extends Component { } onClick={this.changeNewSortType.bind(this, 'ASC')} > - ASC + {locale.sortASC}
@@ -285,7 +286,7 @@ export default class Sort extends Component { className={classNames(styles.btn, styles.reset)} onClick={this.resetSortItem} > - Reset + {locale.sortReset}
@@ -303,20 +304,27 @@ export default class Sort extends Component { bg = 'rgba(92,153,255,0.2)'; } return ( - -
- - {len > 0 ? `Sorted by ${len} fields` : 'Sort'} -
- + + {({ locale }) => { + const txt = locale.sort === '排序' ? `${len}条排序` : `Sorted by ${len} fields`; + return ( + +
+ + {len > 0 ? txt : locale.sort} +
+ + ); + }} + ); } } diff --git a/components/apolloTable/locale.ts b/components/apolloTable/locale.ts new file mode 100644 index 0000000000000000000000000000000000000000..a1734ea902f1360c5989654ec07efe69f32d2294 --- /dev/null +++ b/components/apolloTable/locale.ts @@ -0,0 +1,42 @@ +export const defaultLocale: any = { + cn: { + empty: '暂无数据', + filter: '筛选', + filterAdd: '添加', + filterSearch: '查询', + filterReset: '重置', + selectedConditions: '已选条件:', + saveShortcut: '新建快捷筛选', + clearFilter: '重置', + sort: '排序', + sortReset: '重置', + sortASC: '正序', + sortDESC: '倒序', + group: '分组', + hide: '隐藏', + hideShowAll: '显示所有', + hideHideAll: '全部隐藏', + select: '请选择', + text: '请输入', + }, + en: { + empty: 'It’s empty here.', + filter: 'Filter', + filterAdd: 'Add', + filterSearch: 'Search', + filterReset: 'Reset', + selectedConditions: 'Selected conditions:', + saveShortcut: 'Save as a shortcut', + clearFilter: 'Clear filters', + sort: 'Sort', + sortReset: 'Reset', + sortASC: 'ASC', + sortDESC: 'DESC', + group: 'Group', + hide: 'Hide', + hideShowAll: 'Show all', + hideHideAll: 'Hide all', + select: 'please select', + text: 'please input', + }, +};