diff --git a/src/apollo-table/component/Cell.tsx b/src/apollo-table/component/Cell.tsx index a7798b9b7187fca1eea58317951dfcdcda45f559..ac74b006ce5addecdcb789cee9a82abbe5b75d10 100644 --- a/src/apollo-table/component/Cell.tsx +++ b/src/apollo-table/component/Cell.tsx @@ -1,6 +1,5 @@ import React from 'react'; import { message, Popover, Modal } from 'antd'; - import { config } from './config'; import style from './Cell.less'; import _ from 'lodash'; diff --git a/src/apollo-table/component/Column.tsx b/src/apollo-table/component/Column.tsx index 3c5332a1751fa275e8824fcc408ead177b53b470..321669e2553be22e111996c8dc36057c5dfcaa3e 100644 --- a/src/apollo-table/component/Column.tsx +++ b/src/apollo-table/component/Column.tsx @@ -8,6 +8,9 @@ export default class TableColumn extends PureComponent { 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'; diff --git a/src/apollo-table/component/EditCell.tsx b/src/apollo-table/component/EditCell.tsx index e2f53471adac6b87dcc87658bae67d49cb8c76c5..c02551e6c47fdc88181cf9e7ce43333b59fbcc00 100644 --- a/src/apollo-table/component/EditCell.tsx +++ b/src/apollo-table/component/EditCell.tsx @@ -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 { static getDerivedStateFromProps(nextProps: EditCellProps, prevState: EditCellState) { const { prevProps } = prevState; let columnConfig = formHelp(nextProps.columns, nextProps.rowData, nextProps.columnConfig); diff --git a/src/apollo-table/component/Table.tsx b/src/apollo-table/component/Table.tsx index 5ae27950824d295bfa9bc1424bb00f92a3084fcb..09282def2175aae12b0ac8ac67c222e4c3796048 100644 --- a/src/apollo-table/component/Table.tsx +++ b/src/apollo-table/component/Table.tsx @@ -13,6 +13,10 @@ import IconFont from './base/extra/iconFont'; import scrollbarSize from '../utils/scrollbarSize'; export default class AirTable extends Component { + 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 { 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 { // 下拉加载 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 { 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 (
@@ -191,14 +195,14 @@ export default class AirTable extends Component {
- +
); } return (
- +
); }; @@ -239,7 +243,7 @@ export default class AirTable extends Component { const { updateData, hasGroup, - showForm=()=>{}, + showForm = () => {}, delData, getData, extraMenu, @@ -248,7 +252,7 @@ export default class AirTable extends Component { 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 { > {filterRowData.groupHistoryCount && filterRowData.groupHistoryCount > 1 && ( - {`(${filterRowData.groupHistoryCount > 99 ? '99+' : filterRowData.groupHistoryCount})`} + {`(${ + filterRowData.groupHistoryCount > 99 + ? '99+' + : filterRowData.groupHistoryCount + })`} )} @@ -491,68 +499,71 @@ export default class AirTable extends Component { {({ width }: any) => { // 如果列太少不满一屏时,列头宽度按列计算 - const headerWidth:number = columnWidth * columnCount < width ? columnWidth * columnCount : width; - return (
- { - //右侧表头 -
- -
- } - { - //右侧内容 -
- ) => { - onScroll(...arg); - this.onScrollRow(...arg); + const headerWidth: number = + columnWidth * columnCount < width ? columnWidth * columnCount : width; + return ( +
+ { + //右侧表头 +
-
- } -
- )}} + > + +
+ } + { + //右侧内容 +
+ ) => { + onScroll(...arg); + this.onScrollRow(arg[0]); + }} + cellRenderer={this.renderBodyCell.bind(this, data)} + columns={columns} + checked={checked} + hasGroup={hasGroup} + /> +
+ } +
+ ); + }}
diff --git a/src/apollo-table/component/base/config.tsx b/src/apollo-table/component/base/config.tsx index 27782fd3143868bee6a1d709605d71ab3c1b4947..88791cb3a2bd6c98704346e7b6315c9281d29100 100644 --- a/src/apollo-table/component/base/config.tsx +++ b/src/apollo-table/component/base/config.tsx @@ -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: , - }, - 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: , + // }, + // 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, + // }, }; diff --git a/src/apollo-table/component/base/detail/index.tsx b/src/apollo-table/component/base/detail/index.tsx index e4116ed3c6a2d586f870ba4b4372e46e6d5c873d..22f9b80228912b8327275990c0ad1ba65c19c402 100644 --- a/src/apollo-table/component/base/detail/index.tsx +++ b/src/apollo-table/component/base/detail/index.tsx @@ -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} /> ); diff --git a/src/apollo-table/component/base/detail/input/index.tsx b/src/apollo-table/component/base/detail/input/index.tsx index f2bce1a88f015314204b429a450b27aa4a114860..e6b5065a0e423220d1ada025ba62f6b97e1654fc 100644 --- a/src/apollo-table/component/base/detail/input/index.tsx +++ b/src/apollo-table/component/base/detail/input/index.tsx @@ -1,6 +1,6 @@ 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; diff --git a/src/apollo-table/component/base/edit/editInterface.tsx b/src/apollo-table/component/base/edit/editInterface.tsx index f43717d3e090f8f7afcc6491e6e8de157de15308..8cd5eae0d8804470f58f6b319d1a518e2f00e342 100644 --- a/src/apollo-table/component/base/edit/editInterface.tsx +++ b/src/apollo-table/component/base/edit/editInterface.tsx @@ -1,5 +1,6 @@ export interface CommonProps { columnConfig: any; + placeholder?:string; formatter?: Function; onChange?: Function; } diff --git a/src/apollo-table/component/base/edit/input/index.tsx b/src/apollo-table/component/base/edit/input/index.tsx index 496fbe15d074bbd2817b2c5511a299d4af5c69e5..57908a999f42e0c36209d544c72f367ecfc9ad09 100644 --- a/src/apollo-table/component/base/edit/input/index.tsx +++ b/src/apollo-table/component/base/edit/input/index.tsx @@ -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 (
- + {maxLength && ( 已输入{(value || '').length || 0}/{maxLength} diff --git a/src/apollo-table/component/base/index.tsx b/src/apollo-table/component/base/index.tsx index 5539608e4d02e06224d90e2e9dd96f4f19776767..6d5ec30ea4b8a968335036ee10053b3c1b5530a4 100644 --- a/src/apollo-table/component/base/index.tsx +++ b/src/apollo-table/component/base/index.tsx @@ -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 { 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 ; + return ; } }; com.Detail = getDetail(type); diff --git a/src/apollo-table/component/config.ts b/src/apollo-table/component/config.ts index 984182726ee2457a4236abfd2c7bcc936a81d9e7..1098845ae195881361bb1376c141e41d97744f2e 100644 --- a/src/apollo-table/component/config.ts +++ b/src/apollo-table/component/config.ts @@ -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; diff --git a/src/apollo-table/component/index.tsx b/src/apollo-table/component/index.tsx index 0f12b3186e89ab97bbe3fc2d1f54d0e640fd08cd..22263253c406284f657b4bd809427c5b1bcc73cc 100644 --- a/src/apollo-table/component/index.tsx +++ b/src/apollo-table/component/index.tsx @@ -1,23 +1,9 @@ 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 { - 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 { 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 (
- +
); diff --git a/src/apollo-table/component/interface.tsx b/src/apollo-table/component/interface.tsx index 3bbf04fd43568d676d6218dfb451bc5ed8c01679..1ff575d9bd790137dc7a5fd843fcbc8a1a791a0a 100644 --- a/src/apollo-table/component/interface.tsx +++ b/src/apollo-table/component/interface.tsx @@ -1,63 +1,102 @@ 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; diff --git a/src/apollo-table/utils/formHelper.tsx b/src/apollo-table/utils/formHelper.tsx index b18f62c870ff561b7796298377d9c25682706723..21d56048cf6c5fd75ce9d8f5c4973d6707aef239 100644 --- a/src/apollo-table/utils/formHelper.tsx +++ b/src/apollo-table/utils/formHelper.tsx @@ -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'); diff --git a/src/apollo-table/utils/storage.tsx b/src/apollo-table/utils/storage.tsx index 3f980b63e8789d5de564056a300aba5a1ad6a056..4932ab08b221f438e96e4e4a4484714fb6580b8f 100644 --- a/src/apollo-table/utils/storage.tsx +++ b/src/apollo-table/utils/storage.tsx @@ -5,7 +5,7 @@ function checkCookieAuth() { return navigator.cookieEnabled; } -const storage = { +const storage:any = { getItem(key: string) { try { const value = localStorage.getItem(key); diff --git a/src/apollo-table/component/data.ts b/src/test/data.ts similarity index 100% rename from src/apollo-table/component/data.ts rename to src/test/data.ts diff --git a/src/test/index.tsx b/src/test/index.tsx index f94ebc194a5c5a7d5f42091ddacbf8ceb4f1f674..bfff845e50ead1605696949e8d7d3fa557987522 100644 --- a/src/test/index.tsx +++ b/src/test/index.tsx @@ -1,5 +1,8 @@ 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(hh, document.getElementById('root')); +const { cols, list } = Data; + +render(, document.getElementById('root')); diff --git a/tsconfig.json b/tsconfig.json index 8bd432604f2103b3bff6580de7be705cbbae1598..aafae15ef2ebbded988ae3b4c1c6a8628e3d30f2 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,71 +1,24 @@ { - "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", + ] } diff --git a/webpack.config.js b/webpack.config.js index 31f088cf4fe90a5d2322d750070bd9cafd36dc1c..217c1bb88f7a5824bd588f94e560913ffcea02ca 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -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: {