Skip to content

A
airtable
Commit da0be9dd authored by zhangwenshuai's avatar zhangwenshuai
Browse files
Options

修改ts类型

parent f3572e8e
Hide whitespace changes
Inline Side-by-side
Showing with 414 additions and 400 deletions
src/apollo-table/component/Cell.tsx
View file @ da0be9dd
import React from 'react';
import { message, Popover, Modal } from 'antd';
import { config } from './config';
import style from './Cell.less';
import _ from 'lodash';
......
src/apollo-table/component/Column.tsx
View file @ da0be9dd
......@@ -8,6 +8,9 @@ export default class TableColumn extends PureComponent<ColumnProps> {
render() {
let { type, title, width = 200, columnAttrObj = {} } = this.props;
if(!config[String(type)]){
type='1';
}
let icon = config[String(type)] && config[String(type)].icon;
if (String(type) === '13' && !columnAttrObj.isMultiple) {
icon = 'iconziduan-lianxiangdanxuan';
......
src/apollo-table/component/EditCell.tsx
View file @ da0be9dd
......@@ -2,7 +2,7 @@ import React from 'react';
import { EditCellProps, EditCellState } from './interface';
import FormHelper from '../utils/formHelper';
const formatData = (columns: [], rowData: [], noEdit?: boolean) => {
const formatData = (columns: any[], rowData: any[], noEdit?: boolean) => {
const temp: any[] = [];
columns.forEach((item: any) => {
const value: any = rowData.find((itemData: any) => {
......@@ -17,14 +17,14 @@ const formatData = (columns: [], rowData: [], noEdit?: boolean) => {
});
return temp;
};
const formHelp = (columns: [], record: any, item: any) => {
const formHelp = (columns: any[], record: any, item: any) => {
const list = formatData(columns, record.rowData);
const itemsConfig = FormHelper.getFormData({ list, rowLocked: record.isLocked });
return itemsConfig.find((temp: any) => {
return temp.columnName === item.columnName;
});
};
export default class EditCell extends React.Component {
export default class EditCell extends React.Component<EditCellProps, EditCellState> {
static getDerivedStateFromProps(nextProps: EditCellProps, prevState: EditCellState) {
const { prevProps } = prevState;
let columnConfig = formHelp(nextProps.columns, nextProps.rowData, nextProps.columnConfig);
......
src/apollo-table/component/Table.tsx
View file @ da0be9dd
......@@ -13,6 +13,10 @@ import IconFont from './base/extra/iconFont';
import scrollbarSize from '../utils/scrollbarSize';
export default class AirTable extends Component<TableProps, TableState> {
private indexCount: any;
config: any;
memoizeLeftCount: Function;
memoizeData: Function;
static getDerivedStateFromProps(nextProps: TableProps, prevState: TableState) {
const { prevProps } = prevState;
let nextState: TableState = {
......@@ -144,7 +148,7 @@ export default class AirTable extends Component<TableProps, TableState> {
const flag = this.getCheckedAll();
let result = [];
if (flag) {
result = temp.concat(dataSource).filter((v:any) => {
result = temp.concat(dataSource).filter((v: any) => {
return (
temp.some((item: any) => {
return item.id === v.id;
......@@ -170,7 +174,7 @@ export default class AirTable extends Component<TableProps, TableState> {
// 下拉加载
onScrollRow = ({ clientHeight, scrollTop }: any) => {
const height = clientHeight + scrollTop || 0;
const { dataSource = [], } = this.state;
const { dataSource = [] } = this.state;
const { rowHeight } = this.config;
const { onScroll } = this.props;
const offset = 100;
......@@ -183,7 +187,7 @@ export default class AirTable extends Component<TableProps, TableState> {
renderHeaderCell = ({ columnIndex, key, rowIndex, style }: any) => {
const { columns } = this.state;
if (columns.length === 0) return null;
const { columnType, columnChsName, width } = columns[columnIndex] || {};
const { columnType, columnChsName, width, columnAttrObj } = columns[columnIndex] || {};
if (columnIndex === 0) {
return (
<div key={key} className={styles.leftHeaderCell} style={{ ...style, width: width || 200 }}>
......@@ -191,14 +195,14 @@ export default class AirTable extends Component<TableProps, TableState> {
<Checkbox checked={this.getCheckedAll()} onClick={this.changeCheckboxAll} />
</div>
<div className={styles.cellContent}>
<Column type={String(columnType)} title={columnChsName} width={width} />
<Column type={String(columnType)} title={columnChsName} width={width} columnAttrObj={columnAttrObj} />
</div>
</div>
);
}
return (
<div className={styles.leftHeaderCell} key={key} style={{ ...style, width: width || 200 }}>
<Column type={String(columnType)} title={columnChsName} width={width} />
<Column type={String(columnType)} title={columnChsName} width={width} columnAttrObj={columnAttrObj} />
</div>
);
};
......@@ -239,7 +243,7 @@ export default class AirTable extends Component<TableProps, TableState> {
const {
updateData,
hasGroup,
showForm=()=>{},
showForm = () => {},
delData,
getData,
extraMenu,
......@@ -248,7 +252,7 @@ export default class AirTable extends Component<TableProps, TableState> {
noDel,
tableId,
flush,
showHistory=()=>{},
showHistory = () => {},
} = this.props;
if (columns.length === 0 || data.length === 0) {
return;
......@@ -346,7 +350,11 @@ export default class AirTable extends Component<TableProps, TableState> {
>
{filterRowData.groupHistoryCount && filterRowData.groupHistoryCount > 1 && (
<span className={styles.countNo}>
{`(${filterRowData.groupHistoryCount > 99 ? '99+' : filterRowData.groupHistoryCount})`}
{`(${
filterRowData.groupHistoryCount > 99
? '99+'
: filterRowData.groupHistoryCount
})`}
</span>
)}
</div>
......@@ -491,68 +499,71 @@ export default class AirTable extends Component<TableProps, TableState> {
<AutoSizer disableHeight>
{({ width }: any) => {
// 如果列太少不满一屏时，列头宽度按列计算
const headerWidth:number = columnWidth * columnCount < width ? columnWidth * columnCount : width;
return ( <div>
{
//右侧表头
<div
style={{
backgroundColor: `rgba(246, 246, 246, 1)`,
height: rowHeight,
width:
columnWidth * columnCount < width
? columnWidth * columnCount
: headerWidth - scrollbarSize(),
}}
>
<Grid
className={styles.HeaderGrid}
overscanColumnCount={overscanColumnCount}
columnData={columns}
columnWidth={columnWidth}
columnCount={columnCount}
width={width - scrollbarSize()}
rowHeight={rowHeight}
rowCount={1}
height={rowHeight}
scrollLeft={scrollLeft}
cellRenderer={this.renderHeaderCell}
checked={checked}
/>
</div>
}
{
//右侧内容
<div
style={{
height,
width,
}}
>
<Grid
className={styles.BodyGrid}
overscanColumnCount={overscanColumnCount}
overscanRowCount={overscanRowCount}
dataSource={dataSource}
columnWidth={columnWidth}
columnCount={columnCount}
width={width}
rowHeight={rowHeight}
rowCount={rowCount}
height={height}
onScroll={(...arg: Array<Object>) => {
onScroll(...arg);
this.onScrollRow(...arg);
const headerWidth: number =
columnWidth * columnCount < width ? columnWidth * columnCount : width;
return (
<div>
{
//右侧表头
<div
style={{
backgroundColor: `rgba(246, 246, 246, 1)`,
height: rowHeight,
width:
columnWidth * columnCount < width
? columnWidth * columnCount
: headerWidth - scrollbarSize(),
}}
cellRenderer={this.renderBodyCell.bind(this, data)}
columns={columns}
checked={checked}
hasGroup={hasGroup}
/>
</div>
}
</div>
)}}
>
<Grid
className={styles.HeaderGrid}
overscanColumnCount={overscanColumnCount}
columnData={columns}
columnWidth={columnWidth}
columnCount={columnCount}
width={width - scrollbarSize()}
rowHeight={rowHeight}
rowCount={1}
height={rowHeight}
scrollLeft={scrollLeft}
cellRenderer={this.renderHeaderCell}
checked={checked}
/>
</div>
}
{
//右侧内容
<div
style={{
height,
width,
}}
>
<Grid
className={styles.BodyGrid}
overscanColumnCount={overscanColumnCount}
overscanRowCount={overscanRowCount}
dataSource={dataSource}
columnWidth={columnWidth}
columnCount={columnCount}
width={width}
rowHeight={rowHeight}
rowCount={rowCount}
height={height}
onScroll={(...arg: Array<Object>) => {
onScroll(...arg);
this.onScrollRow(arg[0]);
}}
cellRenderer={this.renderBodyCell.bind(this, data)}
columns={columns}
checked={checked}
hasGroup={hasGroup}
/>
</div>
}
</div>
);
}}
</AutoSizer>
</div>
</div>
......
src/apollo-table/component/base/config.tsx
View file @ da0be9dd
......@@ -12,135 +12,135 @@ export const config: any = {
detail: require('./detail/input').default,
icon: require('../../assets/type/text.png'),
},
'2': {
name: '模糊搜索单选',
component: require('./edit/search').default,
getFormatter: GetFormatter['SEARCH'],
setFormatter: SetFormatter['SEARCH'],
componentAttr: {
allowClear: true,
},
detail: require('./detail/search').default,
},
'3': {
name: '多行文本',
component: require('./edit/textarea').default,
getFormatter: GetFormatter['TEXTAREA'],
setFormatter: SetFormatter['TEXTAREA'],
componentAttr: {
autosize: { minRows: 3 },
},
detail: require('./detail/textarea').default,
},
'4': {
name: '附件上传',
component: require('./edit/upload').default,
getFormatter: GetFormatter['UPLOAD'],
setFormatter: SetFormatter['UPLOAD'],
detail: require('./detail/upload').default,
},
'5': {
name: '复选',
component: require('./edit/checkbox').default, // 暂未添加
getFormatter: GetFormatter['CHECKBOX'],
setFormatter: SetFormatter['CHECKBOX'],
detail: require('./detail/checkbox').default,
},
'6': {
name: '下拉单选',
component: require('./edit/select').default,
componentAttr: {
labelInValue: true,
allowClear: true,
},
getFormatter: GetFormatter['SELECT'],
setFormatter: SetFormatter['SELECT'],
detail: require('./detail/select').default,
},
'7': {
name: '下拉多选',
component: require('./edit/multiple-select').default,
componentAttr: {
labelInValue: true,
mode: 'tags',
maxTagCount: 3,
},
getFormatter: GetFormatter['MULTIPLE_SELECT'],
setFormatter: SetFormatter['MULTIPLE_SELECT'],
detail: require('./detail/multiple-select').default,
},
'8': {
name: '评级',
component: require('./edit/rate').default,
componentAttr: {
allowClear: true,
character: <Icon type="like" theme="filled" />,
},
getFormatter: GetFormatter['RATE'],
setFormatter: SetFormatter['RATE'],
detail: require('./detail/rate').default,
},
'9': {
name: '数字输入',
component: require('./edit/number').default,
componentAttr: {
precision: 2,
},
setFormatter: SetFormatter['NUMBER'],
getFormatter: GetFormatter['NUMBER'],
detail: require('./detail/number').default,
},
'10': {
name: '百分比',
component: require('./edit/percentage').default, // 暂未添加
setFormatter: SetFormatter['PERCENTAGE'],
getFormatter: GetFormatter['PERCENTAGE'],
detail: require('./detail/percentage').default,
},
'11': {
name: '日期',
component: require('./edit/date').default,
componentAttr: {
format: formatStr,
showTime: true,
},
getFormatter: GetFormatter['DATE'],
setFormatter: SetFormatter['DATE'],
detail: require('./detail/date').default,
},
'12': {
name: '引用',
component: require('./edit/link').default, // 暂未添加
getFormatter: GetFormatter['LINK'],
setFormatter: SetFormatter['LINK'],
detail: require('./detail/link').default,
},
'13': {
name: '模糊搜索多选',
component: require('./edit/multiple-search').default,
getFormatter: GetFormatter['MULTIPLE_SEARCH'],
setFormatter: SetFormatter['MULTIPLE_SEARCH'],
componentAttr: {
allowClear: true,
},
detail: require('./detail/multiple-search').default,
},
'14': {
name: '树组件',
component: require('./edit/tree-select').default,
placeholder: '请选择',
getFormatter: GetFormatter['TREE_SELECT'],
setFormatter: SetFormatter['TREE_SELECT'],
detail: require('./detail/tree-select').default,
},
'15': {
name: '文本选择',
component: require('./edit/text-select').default,
getFormatter: GetFormatter['TEXT_SELECT'],
setFormatter: SetFormatter['TEXT_SELECT'],
componentAttr: {
allowClear: true,
},
detail: require('./detail/text-select').default,
},
// '2': {
// name: '模糊搜索单选',
// component: require('./edit/search').default,
// getFormatter: GetFormatter['SEARCH'],
// setFormatter: SetFormatter['SEARCH'],
// componentAttr: {
// allowClear: true,
// },
// detail: require('./detail/search').default,
// },
// '3': {
// name: '多行文本',
// component: require('./edit/textarea').default,
// getFormatter: GetFormatter['TEXTAREA'],
// setFormatter: SetFormatter['TEXTAREA'],
// componentAttr: {
// autosize: { minRows: 3 },
// },
// detail: require('./detail/textarea').default,
// },
// '4': {
// name: '附件上传',
// component: require('./edit/upload').default,
// getFormatter: GetFormatter['UPLOAD'],
// setFormatter: SetFormatter['UPLOAD'],
// detail: require('./detail/upload').default,
// },
// '5': {
// name: '复选',
// component: require('./edit/checkbox').default, // 暂未添加
// getFormatter: GetFormatter['CHECKBOX'],
// setFormatter: SetFormatter['CHECKBOX'],
// detail: require('./detail/checkbox').default,
// },
// '6': {
// name: '下拉单选',
// component: require('./edit/select').default,
// componentAttr: {
// labelInValue: true,
// allowClear: true,
// },
// getFormatter: GetFormatter['SELECT'],
// setFormatter: SetFormatter['SELECT'],
// detail: require('./detail/select').default,
// },
// '7': {
// name: '下拉多选',
// component: require('./edit/multiple-select').default,
// componentAttr: {
// labelInValue: true,
// mode: 'tags',
// maxTagCount: 3,
// },
// getFormatter: GetFormatter['MULTIPLE_SELECT'],
// setFormatter: SetFormatter['MULTIPLE_SELECT'],
// detail: require('./detail/multiple-select').default,
// },
// '8': {
// name: '评级',
// component: require('./edit/rate').default,
// componentAttr: {
// allowClear: true,
// character: <Icon type="like" theme="filled" />,
// },
// getFormatter: GetFormatter['RATE'],
// setFormatter: SetFormatter['RATE'],
// detail: require('./detail/rate').default,
// },
// '9': {
// name: '数字输入',
// component: require('./edit/number').default,
// componentAttr: {
// precision: 2,
// },
// setFormatter: SetFormatter['NUMBER'],
// getFormatter: GetFormatter['NUMBER'],
// detail: require('./detail/number').default,
// },
// '10': {
// name: '百分比',
// component: require('./edit/percentage').default, // 暂未添加
// setFormatter: SetFormatter['PERCENTAGE'],
// getFormatter: GetFormatter['PERCENTAGE'],
// detail: require('./detail/percentage').default,
// },
// '11': {
// name: '日期',
// component: require('./edit/date').default,
// componentAttr: {
// format: formatStr,
// showTime: true,
// },
// getFormatter: GetFormatter['DATE'],
// setFormatter: SetFormatter['DATE'],
// detail: require('./detail/date').default,
// },
// '12': {
// name: '引用',
// component: require('./edit/link').default, // 暂未添加
// getFormatter: GetFormatter['LINK'],
// setFormatter: SetFormatter['LINK'],
// detail: require('./detail/link').default,
// },
// '13': {
// name: '模糊搜索多选',
// component: require('./edit/multiple-search').default,
// getFormatter: GetFormatter['MULTIPLE_SEARCH'],
// setFormatter: SetFormatter['MULTIPLE_SEARCH'],
// componentAttr: {
// allowClear: true,
// },
// detail: require('./detail/multiple-search').default,
// },
// '14': {
// name: '树组件',
// component: require('./edit/tree-select').default,
// placeholder: '请选择',
// getFormatter: GetFormatter['TREE_SELECT'],
// setFormatter: SetFormatter['TREE_SELECT'],
// detail: require('./detail/tree-select').default,
// },
// '15': {
// name: '文本选择',
// component: require('./edit/text-select').default,
// getFormatter: GetFormatter['TEXT_SELECT'],
// setFormatter: SetFormatter['TEXT_SELECT'],
// componentAttr: {
// allowClear: true,
// },
// detail: require('./detail/text-select').default,
// },
};
src/apollo-table/component/base/detail/index.tsx
View file @ da0be9dd
......@@ -2,7 +2,7 @@ import React from 'react';
import { config } from '../config';
import styles from './styles.less';
import { transferAttr } from '../_utils/transferAttr';
import { BaseComponentProps } from '../../../component/interface';
import { BaseComponentProps } from '../../interface';
import Text from './input';
// 此方法为高阶组件,不应再render里面频繁调用,防止频繁实例化,带来性能上的浪费
......@@ -32,7 +32,6 @@ export const getDetail = (type: string) => {
componentAttr={transferColumn}
formatter={NodeObj.getFormatter}
value={value}
onChange={this.onChange}
/>
</div>
);
......
src/apollo-table/component/base/detail/input/index.tsx
View file @ da0be9dd
import React from 'react';
import styles from './index.less';
import {BaseComponentProps} from '@/apollo-table/component/interface';
import {BaseComponentProps} from '../../../interface';
export default function Detail(props:BaseComponentProps) {
const value = props.formatter ? props.formatter(props.value) : props.value;
......
src/apollo-table/component/base/edit/editInterface.tsx
View file @ da0be9dd
export interface CommonProps {
columnConfig: any;
placeholder?:string;
formatter?: Function;
onChange?: Function;
}
......
src/apollo-table/component/base/edit/input/index.tsx
View file @ da0be9dd
......@@ -4,11 +4,12 @@ import styles from './styles.less';
import { InputProps } from '../editInterface';
export default function(props: InputProps) {
const { value, maxLength } = props;
const { value, maxLength, placeholder } = props;
const inputProps = { value, maxLength, placeholder };
return (
<div className={styles.container}>
<Input className={styles.input} {...props} />
<Input className={styles.input} {...inputProps} />
{maxLength && (
<span className={styles.wordNumber}>
已输入{(value || '').length || 0}/{maxLength}
......
src/apollo-table/component/base/index.tsx
View file @ da0be9dd
......@@ -45,7 +45,7 @@ export const getComponent = (type: string) => {
}
return newValue;
};
const com = class extends React.Component {
const com: any = class Base extends React.Component<BaseComponentProps, BaseComponentState> {
static getDerivedStateFromProps(nextProps: BaseComponentProps, prevState: BaseComponentState) {
const { prevProps } = prevState;
......@@ -90,7 +90,7 @@ export const getComponent = (type: string) => {
render() {
const { ...others } = this.props;
const { columnConfig } = this.props;
const { columnConfig, value } = this.state;
const { columnAttrObj, columnType } = columnConfig || {};
let transferColumn = transferAttr(columnType, {
...(NodeObj.componentAttr || {}),
......@@ -100,7 +100,7 @@ export const getComponent = (type: string) => {
...others,
...(transferColumn || {}),
};
return <Node {...newProps} value={this.state.value} onChange={this.onChange} />;
return <Node {...newProps} value={value} onChange={this.onChange} />;
}
};
com.Detail = getDetail(type);
......
src/apollo-table/component/config.ts
View file @ da0be9dd
......@@ -6,75 +6,75 @@ export const config:any = {
component: getComponent('1'),
icon: 'iconziduan-danhangwenben',
},
'2': {
name: '超链接',
component: getComponent('2'),
icon: 'iconziduan-chaolianjie',
},
'3': {
name: '多行文本',
component: getComponent('3'),
icon: 'iconziduan-duohangwenben',
},
'4': {
name: '附件上传',
component: getComponent('4'),
icon: 'iconziduan-fujian',
},
'5': {
name: '复选',
component: getComponent('5'),
icon: 'iconziduan-fuxuan',
},
'6': {
name: '下拉单选',
component: getComponent('6'),
icon: 'iconziduan-xiala',
},
'7': {
name: '下拉多选',
component: getComponent('7'),
icon: 'iconziduan-xialaduoxuan',
},
'8': {
name: '评级',
component: getComponent('8'),
icon: 'iconziduan-pingji',
},
'9': {
name: '数字输入',
component: getComponent('9'),
icon: 'iconziduan-shuzi',
},
'10': {
name: '百分比',
component: getComponent('10'),
icon: 'iconziduan-baifenbi',
},
'11': {
name: '日期',
component: getComponent('11'),
icon: 'iconziduan-riqi',
},
'12': {
name: '引用',
component: getComponent('12'),
icon: 'iconziduan-yinyong',
},
'13': {
name: '模糊搜索多选',
component: getComponent('13'),
icon: 'iconziduan-lianxiangduoxuan',
},
'14': {
name: '树结构',
component: getComponent('14'),
icon: 'iconziduan-ren',
},
'15': {
name: '文本搜索框',
component: getComponent('15'),
icon: 'iconziduan-lianxiangdanxuan',
},
// '2': {
// name: '超链接',
// component: getComponent('2'),
// icon: 'iconziduan-chaolianjie',
// },
// '3': {
// name: '多行文本',
// component: getComponent('3'),
// icon: 'iconziduan-duohangwenben',
// },
// '4': {
// name: '附件上传',
// component: getComponent('4'),
// icon: 'iconziduan-fujian',
// },
// '5': {
// name: '复选',
// component: getComponent('5'),
// icon: 'iconziduan-fuxuan',
// },
// '6': {
// name: '下拉单选',
// component: getComponent('6'),
// icon: 'iconziduan-xiala',
// },
// '7': {
// name: '下拉多选',
// component: getComponent('7'),
// icon: 'iconziduan-xialaduoxuan',
// },
// '8': {
// name: '评级',
// component: getComponent('8'),
// icon: 'iconziduan-pingji',
// },
// '9': {
// name: '数字输入',
// component: getComponent('9'),
// icon: 'iconziduan-shuzi',
// },
// '10': {
// name: '百分比',
// component: getComponent('10'),
// icon: 'iconziduan-baifenbi',
// },
// '11': {
// name: '日期',
// component: getComponent('11'),
// icon: 'iconziduan-riqi',
// },
// '12': {
// name: '引用',
// component: getComponent('12'),
// icon: 'iconziduan-yinyong',
// },
// '13': {
// name: '模糊搜索多选',
// component: getComponent('13'),
// icon: 'iconziduan-lianxiangduoxuan',
// },
// '14': {
// name: '树结构',
// component: getComponent('14'),
// icon: 'iconziduan-ren',
// },
// '15': {
// name: '文本搜索框',
// component: getComponent('15'),
// icon: 'iconziduan-lianxiangdanxuan',
// },
};
export default config;
src/apollo-table/component/index.tsx
View file @ da0be9dd
import React from 'react';
import * as PropTypes from 'prop-types';
import styles from './index.less';
import { CommonProps, CommonState } from './interface';
import Table from './Table';
import Data from './data';
const {cols,list} = Data;
class AirTable extends React.Component<CommonProps, CommonState> {
static propTypes = {
dataSource: PropTypes.array,
columns: PropTypes.array,
tableId: PropTypes.number,
};
static defaultProps = {
dataSource: list,
columns: cols,
tableId: 1,
};
static getDerivedStateFromProps(nextProps: CommonProps, prevState: CommonState) {
const { prevProps } = prevState;
......@@ -39,22 +25,29 @@ class AirTable extends React.Component<CommonProps, CommonState> {
constructor(props: CommonProps) {
super(props);
const { columns, dataSource, tableId } = props;
this.state = {
columns,
dataSource,
tableId,
prevProps: props,
columns: [],
dataSource: [],
tableId: 1,
};
}
onScroll = () => {};
render() {
const { columns, dataSource, tableId } = this.state;
const operateConfig = {};
return (
<div className={styles.container}>
<div className={styles.tableContainer}>
<Table columns={columns} dataSource={dataSource} tableId={tableId} />
<Table
columns={columns}
dataSource={dataSource}
tableId={tableId}
onScroll={this.onScroll}
operateConfig={operateConfig}
/>
</div>
</div>
);
......
src/apollo-table/component/interface.tsx
View file @ da0be9dd
import React from 'react';
export interface CommonProps {
columns?: [];
dataSource?: [];
tableId?: number;
checked?: [];
columns: any[];
dataSource: any[];
tableId: number;
checked?: any[];
columnWidth?: number;
}
export interface CommonState {
prevProps: CommonProps;
columns?: [];
dataSource?: [];
tableId?: number;
checked?: [];
columns: any[];
dataSource: any[];
tableId: number;
checked?: any[];
columnWidth?: number;
}
export interface TableProps extends CommonProps {}
export interface TableProps extends CommonProps {
onScroll: Function;
operateConfig: any;
changeChecked?: Function;
hasGroup?: boolean;
updateData?: Function;
showForm?: Function;
showHistory?: Function;
delData?: Function;
getData?: Function;
flush?: Function;
extraMenu?: any;
noAdd?: boolean;
noEdit?: boolean;
noDel?: boolean;
}
export interface TableState extends CommonState {
prevProps: TableProps;
height: number;
}
export interface ColumnProps {
type: string;
title: string;
width?: number;
columnAttrObj?: any;
}
export interface BaseComponentProps {
value: [];
value: any[] | undefined;
columnConfig: any;
formatter?: Function;
onChange?: Function;
changeParams?: Function;
}
export interface BaseComponentState {
prevProps: BaseComponentProps;
value: [];
value: any[] | undefined;
columnConfig: any;
}
export interface CellProps {
columns: [];
columns: any[];
columnConfig: any;
rowData: [];
cellData: [];
rowData: any;
cellData: any;
tableId: number;
changeChecked?: Function;
hasGroup?: boolean;
updateData?: Function;
showForm?: any;
showHistory?: Function;
delData?: Function;
getData?: Function;
flush?: Function;
extraMenu?: any;
noAdd?: boolean;
noEdit?: boolean;
noDel?: boolean;
overlayClassName?: string;
}
export interface CellState {
prevProps: CellProps;
columns: [];
columnConfig: any;
rowData: [];
editValue: [];
originValue: [];
editValue: any[];
originValue: any[];
isEditVisible: boolean;
isMenuVisible: boolean;
}
export interface EditCellProps {
columns: [];
columns: any[];
columnConfig: any;
rowData: [];
value: any;
rowData: any;
value: any[];
tableId: number;
cellData: any;
rowId: number;
component: any;
onChange: Function;
componentAttr?: any;
columnObj?: any;
record: any;
}
export interface EditCellState {
prevProps: EditCellProps;
......
src/apollo-table/utils/formHelper.tsx
View file @ da0be9dd
......@@ -26,7 +26,9 @@ const getLocalData = ({ getLocalDataMethod }: any) => {
} else {
// console.log('没有找到获取本地数据的方法getLocalDataMethod');
}
//@ts-ignore
} else if (window.mtBridge) {
//@ts-ignore
localData = window.mtBridge.data.localData || {};
} else {
// console.log('没有找到native交互桥mtBridge');
......
src/apollo-table/utils/storage.tsx
View file @ da0be9dd
......@@ -5,7 +5,7 @@ function checkCookieAuth() {
return navigator.cookieEnabled;
}
const storage = {
const storage:any = {
getItem(key: string) {
try {
const value = localStorage.getItem(key);
......
src/test/index.tsx
View file @ da0be9dd
import React from 'react';
import { render } from 'react-dom';
import ApolloTable from '../src/apollo-table';
import ApolloTable from '../apollo-table';
import Data from './data';
render(<ApolloTable>hh</ApolloTable>, document.getElementById('root'));
const { cols, list } = Data;
render(<ApolloTable columns={cols} dataSource={list} tableId={1} />, document.getElementById('root'));
tsconfig.json
View file @ da0be9dd
{
"compilerOptions": {
/* Basic Options */
// "incremental": true, /* Enable incremental compilation */
"target": "es5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */
"module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
"lib": [
"es2016",
"dom"
], /* Specify library files to be included in the compilation. */
// "allowJs": true, /* Allow javascript files to be compiled. */
// "checkJs": true, /* Report errors in .js files. */
"jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
"declaration": false, /* Generates corresponding '.d.ts' file. */
// "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */
// "sourceMap": true, /* Generates corresponding '.map' file. */
// "outFile": "./", /* Concatenate and emit output to single file. */
"outDir": "./dist", /* Redirect output structure to the directory. */
// "rootDir": "./test", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
// "composite": true, /* Enable project compilation */
// "tsBuildInfoFile": "./", /* Specify file to store incremental compilation information */
"removeComments": true, /* Do not emit comments to output. */
// "noEmit": true, /* Do not emit outputs. */
// "importHelpers": true, /* Import emit helpers from 'tslib'. */
// "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
// "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
/* Strict Type-Checking Options */
"strict": true, /* Enable all strict type-checking options. */
"noImplicitAny": false, /* Raise error on expressions and declarations with an implied 'any' type. */
// "strictNullChecks": true, /* Enable strict null checks. */
// "strictFunctionTypes": true, /* Enable strict checking of function types. */
// "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
// "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */
// "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */
// "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */
/* Additional Checks */
// "noUnusedLocals": true, /* Report errors on unused locals. */
// "noUnusedParameters": true, /* Report errors on unused parameters. */
// "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
// "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */
/* Module Resolution Options */
// "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
// "baseUrl": "./", /* Base directory to resolve non-absolute module names. */
// "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
// "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */
"typeRoots": [
"node_modules/@types"
], /* List of folders to include type definitions from. */
// "types": [], /* Type declaration files to be included in compilation. */
"allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
"esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
// "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */
// "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */
/* Source Map Options */
// "sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */
// "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */
// "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */
// "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
/* Experimental Options */
"experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */
"emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */
/* Advanced Options */
"forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
}
"compilerOptions": {
"outDir": "./dist/",
"sourceMap": false,
"noImplicitAny": false,
"module": "commonjs",
"target": "es5",
"jsx": "react",
"esModuleInterop": true
},
"include": ["./typings.d.ts"],
"files": [
"./src/test/index.tsx",
"./src/test/data.ts",
"./src/apollo-table/index.tsx",
"./src/apollo-table/component/index.tsx",
"./src/apollo-table/component/interface.tsx",
"./src/apollo-table/component/config.ts",
"./src/apollo-table/component/Table.tsx",
"./src/apollo-table/component/Column.tsx",
"./src/apollo-table/component/base/index.tsx",
"./src/apollo-table/component/base/config.tsx",
]
}
webpack.config.js
View file @ da0be9dd
......@@ -31,11 +31,11 @@ module.exports = {
mode: 'development',
entry: './src/test/index.tsx',
output: {
filename: '[name].js',
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
resolve: {
extensions: ['.ts', '.tsx', '.js', '.jsx', '.json', '.less'],
extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
alias: {
'@': path.resolve(__dirname, 'src'),
},
......@@ -73,6 +73,16 @@ module.exports = {
'less-loader',
],
},
{
test: /\.css$/,
// include: [path.resolve(__dirname, 'src')],
use: [
'style-loader',
{
loader: 'css-loader',
},
],
},
{
test: /\.(jpg|png|gif)$/,
use: {
......
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