update apolloTable locale

components/apolloTable/component/Cell.tsx

@@ -191,7 +191,6 @@ const Cell = (props: CellProps) => {
                 )}
             </div>
         );
-        console.log('contentMenu', contentMenu);
 
         return contentMenu ? (
             <Popover

components/apolloTable/component/Table.less

@@ -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/context.ts

+import React from 'react';
+
+const { Consumer, Provider } = React.createContext({});
+export { Consumer, Provider };

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,7 +30,8 @@ const formatTags = (columns: ColumnProps[], tags: any[]) => {
                 return item.text;
             })
             .join(',');
-        const op = operator.find((item: any) => {
+        const op =
+            operator.find((item: any) => {
                 return item.id === tag.operationCode;
             }) || {};
         textTags.push(`${colConfig.columnChsName} ${op.name} ${value}`);
@@ -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),
@@ -104,9 +106,12 @@ class FormFilterButton extends Component<Props, State> {
     render() {
         const { tags } = this.state;
         const { onSaveFilter } = this.props;
+        return (
+            <Consumer>
+                {({ locale }) => {
                     return (
                         <div className={styles.container}>
-                <div className={styles.title}>Selected conditions:</div>
+                            <div className={styles.title}>{locale.selectedConditions}</div>
                             <div className={styles.footer}>
                                 <div className={styles.chooseItem}>
                                     {tags.map((item: any, i: number) => {
@@ -126,16 +131,19 @@ class FormFilterButton extends Component<Props, State> {
                                 <div className={styles.buttonGroup}>
                                     {onSaveFilter && (
                                         <div onClick={this.save} className={styles.saveBtn}>
-                                Save as a shortcut
+                                            {locale.saveShortcut}
                                         </div>
                                     )}
                                     <div onClick={this.reset} className={styles.resetBtn}>
-                            Clear filters
+                                        {locale.clearFilter}
                                     </div>
                                 </div>
                             </div>
                         </div>
                     );
+                }}
+            </Consumer>
+        );
     }
 }
 

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<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>
@@ -312,21 +313,28 @@ export default class Filter extends Component<Props, State> {
         if (len > 0) {
             bg = 'rgba(247,181,0,0.1)';
         }
+        return (
+            <Consumer>
+                {({ locale }) => {
+                    const txt = locale.filter === '筛选' ? `${len}条筛选` : `Filtered by ${len} fields`;
                     return (
                         <Popover
                             overlayClassName={s.popover}
                             placement="bottomLeft"
-                title="Filter"
-                content={this.renderContent()}
+                            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 ? `Filtered by ${len} fields` : 'Filter'}</span>
+                                <span className={s.operateName}>{len > 0 ? txt : locale.filter}</span>
                             </div>
                         </Popover>
                     );
+                }}
+            </Consumer>
+        );
     }
 }

components/apolloTable/component/hide/index.tsx

@@ -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>
@@ -114,21 +115,30 @@ export default class Hide extends Component<Props, State> {
         if (len > 0) {
             bg = 'rgba(66,202,196,0.1)';
         }
+        return (
+            <Consumer>
+                {({ locale }) => {
+                    const txt = locale.hide === '隐藏' ? `${len}条隐藏` : `${len} fields hidden`;
                     return (
                         <Popover
                             overlayClassName={s.popover}
                             placement="bottomLeft"
-                title="Hide"
-                content={this.renderContent()}
+                            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 ? `${len} fields hidden` : 'Hide fields'}</span>
+                                <span className={s.operateName}>
+                                    {len > 0 ? txt : locale.hide}
+                                </span>
                             </div>
                         </Popover>
                     );
+                }}
+            </Consumer>
+        );
     }
 }

components/apolloTable/component/index.less

@@ -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

 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,16 +77,21 @@ 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}>
+            <Provider value={{ locale: this.getContext() }}>
+                <div className={onScroll ? classNames(styles.container, styles.scroll) : styles.container}>
                     {operateConfig && <OperateConfig columns={columns} operateConfig={operateConfig} />}
-                <div className={styles.tableContainer}>
+                    <div
+                        className={onScroll ? classNames(styles.tableContainer, styles.scroll) : styles.tableContainer}
+                    >
                         {tableOperateConfig && <TableOperateConfig operateConfig={tableOperateConfig} />}
                         <Table
                             columns={columns}
@@ -99,6 +120,7 @@ class AirTable extends React.Component<CommonProps, CommonState> {
                     </div>
                     {paginationConfig && <Pagination {...paginationConfig} />}
                 </div>
+            </Provider>
         );
     }
 }

components/apolloTable/component/interface.tsx

@@ -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

@@ -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>
@@ -302,21 +303,28 @@ export default class Sort extends Component<Props, State> {
         if (len > 0) {
             bg = 'rgba(92,153,255,0.2)';
         }
+        return (
+            <Consumer>
+                {({ locale }) => {
+                    const txt = locale.sort === '排序' ? `${len}条排序` : `Sorted by ${len} fields`;
                     return (
                         <Popover
                             overlayClassName={s.popover}
                             placement="bottomLeft"
-                title="Sort"
-                content={this.renderContent()}
+                            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 ? `Sorted by ${len} fields` : 'Sort'}</span>
+                                <span className={s.operateName}>{len > 0 ? txt : locale.sort}</span>
                             </div>
                         </Popover>
                     );
+                }}
+            </Consumer>
+        );
     }
 }

components/apolloTable/locale.ts

+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',
+    },
+};