Skip to content

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

update apolloTable locale

parent 728c2b95
Expand all 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
This diff is collapsed.
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