Skip to content

S
submodule
Commit b645f18f authored by zhangwenshuai's avatar zhangwenshuai
Browse files
Options

update apolloTable locale

parent 728c2b95
Hide whitespace changes
Inline Side-by-side
Showing with 498 additions and 349 deletions
components/apolloTable/component/Cell.tsx
View file @ b645f18f
......@@ -191,7 +191,6 @@ const Cell = (props: CellProps) => {
)}
</div>
);
console.log('contentMenu', contentMenu);
return contentMenu ? (
<Popover
......
components/apolloTable/component/Table.less
View file @ b645f18f
......@@ -5,6 +5,15 @@
display: flex;
flex-direction: row;
border: 1px solid @borderColor;
&.scroll {
height: 100%;
.loading{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
}
.leftSideContainer {
box-shadow: 6px 0 6px -4px rgba(0, 0, 0, 0.15);
position: absolute;
......@@ -88,3 +97,6 @@
right: 0;
pointer-events: none;
}
.defaultEmpty{
padding-top: 100px;
}
components/apolloTable/component/Table.tsx
View file @ b645f18f
import React, { Component } from 'react';
import classNames from 'classnames';
import memoizeOne from 'memoize-one';
import { Empty, Spin } from 'antd';
import { ScrollSync, Grid, AutoSizer } from 'react-virtualized';
......@@ -9,6 +10,7 @@ import { TableProps, TableState, ColumnProps, RowProps } from './interface';
import Column from './Column';
import Cell from './Cell';
import { getMergeClassName, getMergeStyle } from '../utils/utils';
import { Consumer } from './context';
const borderStyle = '1px solid #ececec';
......@@ -175,10 +177,11 @@ export default class AirTable extends Component<TableProps, TableState> {
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<TableProps, TableState> {
// 下拉加载
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<TableProps, TableState> {
};
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<TableProps, TableState> {
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 (
<ScrollSync>
{({ onScroll, scrollLeft, scrollTop }: any) => {
return (
<div className={styles.tableContainer} style={{ height: totalHeight + headerHeight }}>
{totalWidth > tableWidth && leftCount > 0 && (
<Consumer>
{({ locale }) => (
<ScrollSync>
{({ onScroll, scrollLeft, scrollTop }: any) => {
return (
<div
className={styles.leftSideContainer}
style={{
width: `${leftWidth}px`,
height: `${totalHeight - scrollbarWidth + headerHeight}px`,
}}
>
{
// 左侧表头
<div
className={styles.leftSideHeaderContainer}
style={{
left: 0,
}}
>
<Grid
ref={(dom: any) => {
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,
})}
/>
</div>
className={
this.props.onScroll
? classNames(styles.tableContainer, styles.scroll)
: styles.tableContainer
}
{
// 左侧固定列
>
{totalWidth > tableWidth && leftCount > 0 && (
<div
className={styles.leftSideGridContainer}
className={styles.leftSideContainer}
style={{
left: 0,
top: headerHeight,
width: `${leftWidth}px`,
height: `${totalHeight - scrollbarWidth + headerHeight}px`,
}}
>
<Grid
ref={(dom: any) => {
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}
/>
</div>
}
</div>
)}
<div className={styles.centerContainer}>
<AutoSizer disableHeight onResize={this.onResize}>
{({ width }: any) => {
return (
<div>
{
// 中部表头
<div
style={{
backgroundColor: 'rgba(246, 246, 246, 1)',
height: headerHeight,
width,
{
// 左侧表头
<div
className={styles.leftSideHeaderContainer}
style={{
left: 0,
}}
>
<Grid
ref={(dom: any) => {
this.grid1 = dom;
}}
>
<Grid
ref={(dom: any) => {
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,
})}
/>
</div>
}
{
// 中部内容
<div
style={{
height: totalHeight,
minHeight:
!dataSource || dataSource.length === 0
? '300px'
: 'auto',
width,
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,
})}
/>
</div>
}
{
// 左侧固定列
<div
className={styles.leftSideGridContainer}
style={{
left: 0,
top: headerHeight,
}}
>
<Grid
ref={(dom: any) => {
this.grid2 = dom;
}}
>
{rowCount > 0 ? (
<Grid
ref={(dom: any) => {
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<Object>) => {
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}
/>
</div>
}
</div>
)}
<div className={styles.centerContainer}>
<AutoSizer onResize={this.onResize}>
{({ width, height }: any) => {
return (
<div>
{
// 中部表头
<div
style={{
backgroundColor: 'rgba(246, 246, 246, 1)',
height: headerHeight,
width,
}}
height={totalHeight}
cellRenderer={this.renderBodyRow.bind(this, {
showColumns,
showData,
})}
/>
) : (
columnCount > 0 &&
!loading && (
<Empty
imageStyle={{ marginTop: '100px' }}
description={
noDataPlaceholder || 'It’s empty here.'
}
>
<Grid
ref={(dom: any) => {
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,
})}
/>
)
)}
</div>
}
{
// 中部内容
<div
style={{
height: totalHeight,
// height: height - headerHeight,
// minHeight:
// !dataSource || dataSource.length === 0
// ? '300px'
// : 'auto',
width: tableWidth,
}}
>
{rowCount > 0 ? (
<Grid
ref={(dom: any) => {
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<Object>) => {
onScroll(...arg);
this.onScroll(arg[0]);
}}
height={totalHeight}
cellRenderer={this.renderBodyRow.bind(this, {
showColumns,
showData,
})}
/>
) : (
columnCount > 0 &&
!loading && (
<Empty
className={styles.defaultEmpty}
description={
noDataPlaceholder || locale.empty
}
/>
)
)}
</div>
}
</div>
}
</div>
);
}}
</AutoSizer>
</div>
{totalWidth > tableWidth && rightCount > 0 && (
<div
className={styles.rightSideContainer}
style={{
width: `${rightWidth}px`,
height: `${totalHeight - scrollbarWidth + headerHeight}px`,
}}
>
{
// 右侧表头
<div
className={styles.rightSideHeaderContainer}
style={{
right: 0,
);
}}
>
<Grid
ref={(dom: any) => {
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',
})}
/>
</div>
}
{
// 右侧固定列
</AutoSizer>
</div>
{totalWidth > tableWidth && rightCount > 0 && (
<div
className={styles.rightSideGridContainer}
className={styles.rightSideContainer}
style={{
position: 'absolute',
right: 0,
top: headerHeight,
width: `${rightWidth}px`,
height: `${totalHeight - scrollbarWidth + headerHeight}px`,
}}
>
<Grid
ref={(dom: any) => {
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}
/>
{
// 右侧表头
<div
className={styles.rightSideHeaderContainer}
style={{
right: 0,
}}
>
<Grid
ref={(dom: any) => {
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',
})}
/>
</div>
}
{
// 右侧固定列
<div
className={styles.rightSideGridContainer}
style={{
position: 'absolute',
right: 0,
top: headerHeight,
}}
>
<Grid
ref={(dom: any) => {
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}
/>
</div>
}
</div>
}
)}
<div className={styles.fillHandleWrapper} />
<div className={styles.loading}>{loading && (loadComp ? loadComp : <Spin />)}</div>
</div>
)}
<div className={styles.fillHandleWrapper} />
<div className={styles.loading}>{/*<Spin spinning={loading} />*/}</div>
</div>
);
}}
</ScrollSync>
);
}}
</ScrollSync>
)}
</Consumer>
);
}
}
components/apolloTable/component/context.ts 0 → 100644
View file @ b645f18f
import React from 'react';
const { Consumer, Provider } = React.createContext({});
export { Consumer, Provider };
components/apolloTable/component/filter-condition/index.tsx
View file @ b645f18f
......@@ -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<Props, State> {
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<Props, State> {
const { tags } = this.state;
const { onSaveFilter } = this.props;
return (
<div className={styles.container}>
<div className={styles.title}>Selected conditions:</div>
<div className={styles.footer}>
<div className={styles.chooseItem}>
{tags.map((item: any, i: number) => {
return (
<Tag
key={i}
color="#f1f4f7"
visible={true}
closable
onClose={this.removeTag.bind(this, i)}
>
<span className={styles.tag}>{item}</span>
</Tag>
);
})}
</div>
<div className={styles.buttonGroup}>
{onSaveFilter && (
<div onClick={this.save} className={styles.saveBtn}>
Save as a shortcut
<Consumer>
{({ locale }) => {
return (
<div className={styles.container}>
<div className={styles.title}>{locale.selectedConditions}</div>
<div className={styles.footer}>
<div className={styles.chooseItem}>
{tags.map((item: any, i: number) => {
return (
<Tag
key={i}
color="#f1f4f7"
visible={true}
closable
onClose={this.removeTag.bind(this, i)}
>
<span className={styles.tag}>{item}</span>
</Tag>
);
})}
</div>
<div className={styles.buttonGroup}>
{onSaveFilter && (
<div onClick={this.save} className={styles.saveBtn}>
{locale.saveShortcut}
</div>
)}
<div onClick={this.reset} className={styles.resetBtn}>
{locale.clearFilter}
</div>
</div>
</div>
)}
<div onClick={this.reset} className={styles.resetBtn}>
Clear filters
</div>
</div>
</div>
</div>
);
}}
</Consumer>
);
}
}
......
components/apolloTable/component/filter/index.tsx
View file @ b645f18f
......@@ -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<Props, State> {
}
};
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<Props, State> {
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<Props, State> {
<div className={styles.optionMid}>
<Select
value={item.operationCode || undefined}
placeholder="please select"
placeholder={locale.select}
onChange={this.changeFilterOperate.bind(this, i)}
style={{ width: '100%' }}
>
......@@ -279,7 +280,7 @@ export default class Filter extends Component<Props, State> {
})}
<div className={styles.optionItem}>
<div role="presentation" className={styles.add} onClick={this.addFilterLine}>
Add
{locale.filterAdd}
</div>
</div>
<div className={styles.btns}>
......@@ -288,14 +289,14 @@ export default class Filter extends Component<Props, State> {
className={classNames(styles.btn, styles.search)}
onClick={this.saveFilterList}
>
Search
{locale.filterSearch}
</div>
<div
role="presentation"
className={classNames(styles.btn, styles.reset)}
onClick={this.resetFilterItem}
>
Reset
{locale.filterReset}
</div>
</div>
</div>
......@@ -313,20 +314,27 @@ export default class Filter extends Component<Props, State> {
bg = 'rgba(247,181,0,0.1)';
}
return (
<Popover
overlayClassName={s.popover}
placement="bottomLeft"
title="Filter"
content={this.renderContent()}
visible={visible}
onVisibleChange={this.toggleOption}
trigger="click"
>
<div className={s.operateContainer} style={{ background: bg }}>
<img alt="" className={s.operateIcon} src={filterIcon} />
<span className={s.operateName}>{len > 0 ? `Filtered by ${len} fields` : 'Filter'}</span>
</div>
</Popover>
<Consumer>
{({ locale }) => {
const txt = locale.filter === '筛选' ? `${len}条筛选` : `Filtered by ${len} fields`;
return (
<Popover
overlayClassName={s.popover}
placement="bottomLeft"
title={locale.filter}
content={this.renderContent(locale)}
visible={visible}
onVisibleChange={this.toggleOption}
trigger="click"
>
<div className={s.operateContainer} style={{ background: bg }}>
<img alt="" className={s.operateIcon} src={filterIcon} />
<span className={s.operateName}>{len > 0 ? txt : locale.filter}</span>
</div>
</Popover>
);
}}
</Consumer>
);
}
}
components/apolloTable/component/hide/index.tsx
View file @ b645f18f
......@@ -3,6 +3,7 @@ import { Switch, Popover } from 'antd';
import _ from 'lodash';
import s from './index.less';
import hideIcon from '../../assets/hide.png';
import { Consumer } from '../context';
interface Props {
columns: any;
......@@ -72,7 +73,7 @@ export default class Hide extends Component<Props, State> {
}
};
renderContent = () => {
renderContent = (locale) => {
const { columnConfig } = this.state;
return (
<div className={s.optionsModal}>
......@@ -95,10 +96,10 @@ export default class Hide extends Component<Props, State> {
</div>
<div className={s.btns}>
<div className={s.btn} role="presentation" onClick={this.changeHide.bind(this, 'all', 0)}>
Hide all
{locale.hideHideAll}
</div>
<div className={s.btn} role="presentation" onClick={this.changeHide.bind(this, 'all', 1)}>
Show all
{locale.hideShowAll}
</div>
</div>
</div>
......@@ -115,20 +116,29 @@ export default class Hide extends Component<Props, State> {
bg = 'rgba(66,202,196,0.1)';
}
return (
<Popover
overlayClassName={s.popover}
placement="bottomLeft"
title="Hide"
content={this.renderContent()}
visible={visible}
onVisibleChange={this.toggleOption}
trigger="click"
>
<div className={s.operateContainer} style={{ background: bg }}>
<img alt="" className={s.operateIcon} src={hideIcon} />
<span className={s.operateName}>{len > 0 ? `${len} fields hidden` : 'Hide fields'}</span>
</div>
</Popover>
<Consumer>
{({ locale }) => {
const txt = locale.hide === '隐藏' ? `${len}条隐藏` : `${len} fields hidden`;
return (
<Popover
overlayClassName={s.popover}
placement="bottomLeft"
title={locale.hide}
content={this.renderContent(locale)}
visible={visible}
onVisibleChange={this.toggleOption}
trigger="click"
>
<div className={s.operateContainer} style={{ background: bg }}>
<img alt="" className={s.operateIcon} src={hideIcon} />
<span className={s.operateName}>
{len > 0 ? txt : locale.hide}
</span>
</div>
</Popover>
);
}}
</Consumer>
);
}
}
components/apolloTable/component/index.less
View file @ b645f18f
......@@ -4,13 +4,21 @@
//height: 100%;
width: 100%;
position: relative;
.operateContainer {
&.scroll {
display: flex;
flex-direction: column;
height: calc(100vh - 92px);
}
.operateContainer {
}
.tableContainer {
position: relative;
box-shadow: @boxShadow;
//min-height: 600px;
&.scroll {
flex: 1;
}
.tableC {
padding: 0 16px;
......
components/apolloTable/component/index.tsx
View file @ b645f18f
import React from 'react';
import { Pagination } from 'antd';
import classNames from 'classnames';
import styles from './index.less';
import { CommonProps, CommonState } from './interface';
import Table from './Table';
import OperateConfig from './operate';
import TableOperateConfig from './tableOperate';
import { defaultLocale } from '../locale';
import { Provider } from './context';
class AirTable extends React.Component<CommonProps, CommonState> {
static getDerivedStateFromProps(nextProps: CommonProps, prevState: CommonState) {
......@@ -38,6 +41,19 @@ class AirTable extends React.Component<CommonProps, CommonState> {
}
};
getContext = () => {
const { locale } = this.props;
if (locale) {
if (locale.context) {
if (locale.lang && defaultLocale[locale.lang]) {
return { ...defaultLocale[locale.lang], ...locale.context };
}
return locale.context;
}
}
return defaultLocale.cn;
};
render() {
const { columns, dataSource } = this.state;
const {
......@@ -61,44 +77,50 @@ class AirTable extends React.Component<CommonProps, CommonState> {
columnWidth,
headerHeight,
contentMenu,
onScroll,
} = this.props;
const sortConfig = operateConfig
&& operateConfig.menusGroup
&& operateConfig.menusGroup.find((item: any) => {
const sortConfig =
operateConfig &&
operateConfig.menusGroup &&
operateConfig.menusGroup.find((item: any) => {
return item.type === 'sort';
});
return (
<div className={styles.container}>
{operateConfig && <OperateConfig columns={columns} operateConfig={operateConfig} />}
<div className={styles.tableContainer}>
{tableOperateConfig && <TableOperateConfig operateConfig={tableOperateConfig} />}
<Table
columns={columns}
dataSource={dataSource}
onScroll={this.onScroll}
rowStyle={rowStyle}
rowClassName={rowClassName}
distanceToLoad={distanceToLoad}
emitChangeCell={emitChangeCell}
bordered={bordered}
width={width}
height={height}
sortConfig={sortConfig}
paginationConfig={paginationConfig}
showIndex={showIndex}
emptyPlaceholder={emptyPlaceholder}
cellEditable={cellEditable}
rowHeight={rowHeight}
headerHeight={headerHeight}
columnWidth={columnWidth}
loading={loading}
rowSelection={rowSelection}
noDataPlaceholder={noDataPlaceholder}
contentMenu={contentMenu}
/>
<Provider value={{ locale: this.getContext() }}>
<div className={onScroll ? classNames(styles.container, styles.scroll) : styles.container}>
{operateConfig && <OperateConfig columns={columns} operateConfig={operateConfig} />}
<div
className={onScroll ? classNames(styles.tableContainer, styles.scroll) : styles.tableContainer}
>
{tableOperateConfig && <TableOperateConfig operateConfig={tableOperateConfig} />}
<Table
columns={columns}
dataSource={dataSource}
onScroll={this.onScroll}
rowStyle={rowStyle}
rowClassName={rowClassName}
distanceToLoad={distanceToLoad}
emitChangeCell={emitChangeCell}
bordered={bordered}
width={width}
height={height}
sortConfig={sortConfig}
paginationConfig={paginationConfig}
showIndex={showIndex}
emptyPlaceholder={emptyPlaceholder}
cellEditable={cellEditable}
rowHeight={rowHeight}
headerHeight={headerHeight}
columnWidth={columnWidth}
loading={loading}
rowSelection={rowSelection}
noDataPlaceholder={noDataPlaceholder}
contentMenu={contentMenu}
/>
</div>
{paginationConfig && <Pagination {...paginationConfig} />}
</div>
{paginationConfig && <Pagination {...paginationConfig} />}
</div>
</Provider>
);
}
}
......
components/apolloTable/component/interface.tsx
View file @ b645f18f
......@@ -70,7 +70,8 @@ export interface TableProps extends LoadConfigProps {
loading?: boolean;
rowSelection?: any;
noDataPlaceholder?: any;
contentMenu?:any;
contentMenu?: any;
loadComp?: any;
}
export interface TableState {
columns: ColumnProps[];
......@@ -82,6 +83,7 @@ export interface CommonProps extends TableProps {
operateConfig?: OperateConfigProps;
tableOperateConfig?: OperateConfigProps;
paginationConfig?: any;
locale?: any;
}
export interface CommonState extends TableState {}
......@@ -112,7 +114,7 @@ export interface CellProps {
emptyPlaceholder?: string;
cellEditable?: boolean;
rowSelection?: any;
contentMenu?:any;
contentMenu?: any;
}
export interface EditCellProps {
......
components/apolloTable/component/sort/index.tsx
View file @ b645f18f
......@@ -7,6 +7,7 @@ import styles from './index.less';
import sortIcon from '../../assets/sort.png';
import closeIcon from '../../assets/close.png';
import { ColumnProps } from '../interface';
import { Consumer } from '../context';
interface Props {
columns: any;
......@@ -169,7 +170,7 @@ export default class Sort extends Component<Props, State> {
});
};
renderContent = () => {
renderContent = (locale) => {
const { sortConfig, temp } = this.state;
const filterConfig = this.getFilterConfig();
return (
......@@ -182,7 +183,7 @@ export default class Sort extends Component<Props, State> {
value={item.colName}
onChange={this.changeSortKey.bind(this, i)}
style={{ width: '100%' }}
placeholder="please select"
placeholder={locale.select}
>
{filterConfig.map((option) => {
return (
......@@ -207,7 +208,7 @@ export default class Sort extends Component<Props, State> {
}
onClick={this.changeSortType.bind(this, i, 'ASC')}
>
ASC
{locale.sortASC}
</Button>
<Button
className={
......@@ -217,7 +218,7 @@ export default class Sort extends Component<Props, State> {
}
onClick={this.changeSortType.bind(this, i, 'DESC')}
>
DESC
{locale.sortDESC}
</Button>
</Button.Group>
</div>
......@@ -236,7 +237,7 @@ export default class Sort extends Component<Props, State> {
<div className={styles.optionLeft}>
<Select
value={temp.colName}
placeholder="please select"
placeholder={locale.select}
onChange={this.changeColName}
style={{ width: '100%' }}
>
......@@ -263,7 +264,7 @@ export default class Sort extends Component<Props, State> {
}
onClick={this.changeNewSortType.bind(this, 'ASC')}
>
ASC
{locale.sortASC}
</Button>
<Button
className={
......@@ -273,7 +274,7 @@ export default class Sort extends Component<Props, State> {
}
onClick={this.changeNewSortType.bind(this, 'DESC')}
>
DESC
{locale.sortDESC}
</Button>
</Button.Group>
</div>
......@@ -285,7 +286,7 @@ export default class Sort extends Component<Props, State> {
className={classNames(styles.btn, styles.reset)}
onClick={this.resetSortItem}
>
Reset
{locale.sortReset}
</div>
</div>
</div>
......@@ -303,20 +304,27 @@ export default class Sort extends Component<Props, State> {
bg = 'rgba(92,153,255,0.2)';
}
return (
<Popover
overlayClassName={s.popover}
placement="bottomLeft"
title="Sort"
content={this.renderContent()}
visible={visible}
onVisibleChange={this.toggleOption}
trigger="click"
>
<div className={s.operateContainer} style={{ background: bg }}>
<img alt="" className={s.operateIcon} src={sortIcon} />
<span className={s.operateName}>{len > 0 ? `Sorted by ${len} fields` : 'Sort'}</span>
</div>
</Popover>
<Consumer>
{({ locale }) => {
const txt = locale.sort === '排序' ? `${len}条排序` : `Sorted by ${len} fields`;
return (
<Popover
overlayClassName={s.popover}
placement="bottomLeft"
title={locale.sort}
content={this.renderContent(locale)}
visible={visible}
onVisibleChange={this.toggleOption}
trigger="click"
>
<div className={s.operateContainer} style={{ background: bg }}>
<img alt="" className={s.operateIcon} src={sortIcon} />
<span className={s.operateName}>{len > 0 ? txt : locale.sort}</span>
</div>
</Popover>
);
}}
</Consumer>
);
}
}
components/apolloTable/locale.ts 0 → 100644
View file @ b645f18f
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',
},
};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment