Skip to content

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

添加demo

parent ccab7fe3
Hide whitespace changes
Inline Side-by-side
Showing with 340 additions and 204 deletions
scripts/demo.js 0 → 100644
View file @ b2aecf3c
var a = '你好';
console.log(a);
scripts/test.js 0 → 100644
View file @ b2aecf3c
#!/bin/sh node
const chalk = require('chalk');
const log = console.log;
const ora = require('ora');
const spinner = ora({
text: 'kkk',
prefixText: '√',
spinner: 'betaWave',
});
spinner.start();
setTimeout(() => {
spinner.color = 'yellow';
spinner.text = 'Loading rainbows';
spinner.stop();
}, 5000);
src/apollo-table/component/Table.less
View file @ b2aecf3c
...@@ -6,40 +6,6 @@ ...@@ -6,40 +6,6 @@
} }
} }
.table {
background: white;
:global(.ant-table-bordered.ant-table-empty .ant-table-placeholder) {
display: none;
}
:global(.ant-table-scroll table) {
min-width: 0;
}
:global(.ant-table-thead > tr > th) {
padding: 0;
}
:global(.ant-table-tbody > tr > td) {
padding: 0;
height: 40px;
}
:global(.ant-table-tbody > tr > td:last-child) {
text-align: left;
}
:global(.ant-table-thead > tr > th .ant-table-header-column) {
display: block;
}
:global(.ant-table.ant-table-bordered .ant-table-footer) {
padding: 10px;
background: white;
}
}
.indexCell { .indexCell {
padding: 0 10px; padding: 0 10px;
display: flex; display: flex;
......
src/apollo-table/component/Table.tsx
View file @ b2aecf3c
...@@ -108,7 +108,7 @@ export default class AirTable extends Component<TableProps, TableState> { ...@@ -108,7 +108,7 @@ export default class AirTable extends Component<TableProps, TableState> {
changeCheckbox = (record: any, flag: boolean) => { changeCheckbox = (record: any, flag: boolean) => {
const { changeChecked, hasGroup } = this.props; const { changeChecked, hasGroup } = this.props;
const { checked, dataSource } = this.state; const { checked, dataSource } = this.state;
let temp = checked && checked.slice() || []; let temp = (checked && checked.slice()) || [];
if (flag) { if (flag) {
if (hasGroup) { if (hasGroup) {
const selected = dataSource.filter((item: any) => { const selected = dataSource.filter((item: any) => {
...@@ -136,7 +136,7 @@ export default class AirTable extends Component<TableProps, TableState> { ...@@ -136,7 +136,7 @@ export default class AirTable extends Component<TableProps, TableState> {
// 检测当前分组是否全部选中 // 检测当前分组是否全部选中
getCheckedAll = () => { getCheckedAll = () => {
const { checked, dataSource } = this.state; const { checked, dataSource } = this.state;
const temp = checked && checked.slice() || []; const temp = (checked && checked.slice()) || [];
const result = temp.filter((v: any) => { const result = temp.filter((v: any) => {
return dataSource.some((item: any) => { return dataSource.some((item: any) => {
return item.id === v.id; return item.id === v.id;
...@@ -148,9 +148,9 @@ export default class AirTable extends Component<TableProps, TableState> { ...@@ -148,9 +148,9 @@ export default class AirTable extends Component<TableProps, TableState> {
changeCheckboxAll = () => { changeCheckboxAll = () => {
const { checked, dataSource } = this.state; const { checked, dataSource } = this.state;
const { changeChecked } = this.props; const { changeChecked } = this.props;
const temp = checked && checked.slice() || []; const temp = (checked && checked.slice()) || [];
const flag = this.getCheckedAll(); const flag = this.getCheckedAll();
let result:any[] = []; let result: any[] = [];
if (flag) { if (flag) {
result = temp.concat(dataSource).filter((v: any) => { result = temp.concat(dataSource).filter((v: any) => {
return ( return (
...@@ -219,9 +219,11 @@ export default class AirTable extends Component<TableProps, TableState> { ...@@ -219,9 +219,11 @@ export default class AirTable extends Component<TableProps, TableState> {
renderCheckbox = (record: any, rowIndex: number) => { renderCheckbox = (record: any, rowIndex: number) => {
const { checked } = this.state; const { checked } = this.state;
const { hasGroup } = this.props; const { hasGroup } = this.props;
const flag = checked && checked.some((item: any) => { const flag =
return item.id === record.id; checked &&
}); checked.some((item: any) => {
return item.id === record.id;
});
let checkbox = flag ? ( let checkbox = flag ? (
<Checkbox checked={true} onClick={this.changeCheckbox.bind(this, record, false)} /> <Checkbox checked={true} onClick={this.changeCheckbox.bind(this, record, false)} />
) : ( ) : (
...@@ -456,153 +458,151 @@ export default class AirTable extends Component<TableProps, TableState> { ...@@ -456,153 +458,151 @@ export default class AirTable extends Component<TableProps, TableState> {
const leftCount = this.memoizeLeftCount(columns); const leftCount = this.memoizeLeftCount(columns);
return ( return (
<React.Fragment> <ScrollSync>
<ScrollSync> {({ onScroll, scrollLeft, scrollTop }: any) => {
{({ onScroll, scrollLeft, scrollTop }: any) => { return (
return ( <div className={styles.GridRow}>
<div className={styles.GridRow}> <div
<div className={styles.LeftSideContainer}
className={styles.LeftSideContainer} style={{
style={{ width: `${colWidth * leftCount}px`,
width: `${colWidth * leftCount}px`, height: `${totalHeight - scrollbarSize() + rowHeight}px`,
height: `${totalHeight - scrollbarSize() + rowHeight}px`, }}
}} >
> {
{ //左侧表头
//左侧表头 <div
<div className={styles.LeftSideGridContainer}
className={styles.LeftSideGridContainer} style={{
style={{ position: 'absolute',
position: 'absolute', left: 0,
left: 0, top: 0,
top: 0, backgroundColor: `rgba(246, 246, 246, 1)`,
backgroundColor: `rgba(246, 246, 246, 1)`, borderLeft: '1px solid #e8e8e8',
borderLeft: '1px solid #e8e8e8', }}
}} >
> <Grid
<Grid className={styles.HeaderGrid}
className={styles.HeaderGrid} columnData={columns}
columnData={columns} columnWidth={colWidth}
columnWidth={colWidth} columnCount={leftCount}
columnCount={leftCount} width={colWidth * leftCount}
width={colWidth * leftCount} rowHeight={rowHeight}
rowHeight={rowHeight} rowCount={1}
rowCount={1} height={rowHeight}
height={rowHeight} checked={checked}
checked={checked} changeChecked={changeChecked}
changeChecked={changeChecked} groupConfig={groupConfig}
groupConfig={groupConfig} dataSource={dataSource}
dataSource={dataSource} cellRenderer={this.renderHeaderCell}
cellRenderer={this.renderHeaderCell} />
/> </div>
</div> }
} {
{ //左侧固定列
//左侧固定列 <div
<div className={styles.LeftSideGridContainer}
className={styles.LeftSideGridContainer} style={{
style={{ position: 'absolute',
position: 'absolute', left: 0,
left: 0, top: rowHeight,
top: rowHeight, borderLeft: '1px solid #e8e8e8',
borderLeft: '1px solid #e8e8e8',
}}
>
<Grid
className={styles.LeftSideGrid}
overscanRowCount={overscanRowCount}
cellRenderer={this.renderBodyRow.bind(this, data)}
columnWidth={colWidth}
columnCount={leftCount}
width={colWidth * leftCount}
rowHeight={rowHeight}
rowCount={rowCount}
height={totalHeight - scrollbarSize()}
scrollTop={scrollTop}
checked={checked}
dataSource={dataSource}
columns={columns}
hasGroup={hasGroup}
/>
</div>
}
</div>
<div className={styles.GridColumn}>
<AutoSizer disableHeight>
{({ width }: any) => {
// 如果列太少不满一屏时，列头宽度按列计算
let headerWidth = width;
if (rowCount * rowHeight > tableHeight) {
// 表格行数大于一屏的高度时出现竖向滚动条，此时宽度减出滚动条宽度
headerWidth -= scrollbarSize();
}
return (
<div>
{
//右侧表头
<div
style={{
backgroundColor: `rgba(246, 246, 246, 1)`,
height: rowHeight,
width: headerWidth,
}}
>
<Grid
className={styles.HeaderGrid}
overscanColumnCount={overscanColumnCount}
columnData={columns}
columnWidth={colWidth}
columnCount={columnCount}
width={headerWidth}
rowHeight={rowHeight}
rowCount={1}
height={rowHeight}
scrollLeft={scrollLeft}
cellRenderer={this.renderHeaderCell}
checked={checked}
/>
</div>
}
{
//右侧内容
<div
style={{
height: totalHeight,
width,
}}
>
<Grid
className={styles.BodyGrid}
overscanColumnCount={overscanColumnCount}
overscanRowCount={overscanRowCount}
dataSource={dataSource}
columnWidth={colWidth}
columnCount={columnCount}
width={width}
rowHeight={rowHeight}
rowCount={rowCount}
height={totalHeight}
onScroll={(...arg: Array<Object>) => {
onScroll(...arg);
this.onScrollRow(arg[0]);
}}
cellRenderer={this.renderBodyRow.bind(this, data)}
columns={columns}
checked={checked}
hasGroup={hasGroup}
/>
</div>
}
</div>
);
}} }}
</AutoSizer> >
</div> <Grid
className={styles.LeftSideGrid}
overscanRowCount={overscanRowCount}
cellRenderer={this.renderBodyRow.bind(this, data)}
columnWidth={colWidth}
columnCount={leftCount}
width={colWidth * leftCount}
rowHeight={rowHeight}
rowCount={rowCount}
height={totalHeight - scrollbarSize()}
scrollTop={scrollTop}
checked={checked}
dataSource={dataSource}
columns={columns}
hasGroup={hasGroup}
/>
</div>
}
</div> </div>
); <div className={styles.GridColumn}>
}} <AutoSizer disableHeight>
</ScrollSync> {({ width }: any) => {
</React.Fragment> // 如果列太少不满一屏时，列头宽度按列计算
let headerWidth = width;
if (rowCount * rowHeight > tableHeight) {
// 表格行数大于一屏的高度时出现竖向滚动条，此时宽度减出滚动条宽度
headerWidth -= scrollbarSize();
}
return (
<div>
{
//右侧表头
<div
style={{
backgroundColor: `rgba(246, 246, 246, 1)`,
height: rowHeight,
width: headerWidth,
}}
>
<Grid
className={styles.HeaderGrid}
overscanColumnCount={overscanColumnCount}
columnData={columns}
columnWidth={colWidth}
columnCount={columnCount}
width={headerWidth}
rowHeight={rowHeight}
rowCount={1}
height={rowHeight}
scrollLeft={scrollLeft}
cellRenderer={this.renderHeaderCell}
checked={checked}
/>
</div>
}
{
//右侧内容
<div
style={{
height: totalHeight,
width,
}}
>
<Grid
className={styles.BodyGrid}
overscanColumnCount={overscanColumnCount}
overscanRowCount={overscanRowCount}
dataSource={dataSource}
columnWidth={colWidth}
columnCount={columnCount}
width={width}
rowHeight={rowHeight}
rowCount={rowCount}
height={totalHeight}
onScroll={(...arg: Array<Object>) => {
onScroll(...arg);
this.onScrollRow(arg[0]);
}}
cellRenderer={this.renderBodyRow.bind(this, data)}
columns={columns}
checked={checked}
hasGroup={hasGroup}
/>
</div>
}
</div>
);
}}
</AutoSizer>
</div>
</div>
);
}}
</ScrollSync>
); );
} }
} }
src/apollo-table/component/index.tsx
View file @ b2aecf3c
...@@ -34,11 +34,16 @@ class AirTable extends React.Component<CommonProps, CommonState> { ...@@ -34,11 +34,16 @@ class AirTable extends React.Component<CommonProps, CommonState> {
}; };
} }
onScroll = () => {}; onScroll = () => {
const { onScroll } = this.props;
if (typeof onScroll === 'function') {
onScroll();
}
};
render() { render() {
const { columns, dataSource, tableId } = this.state; const { columns, dataSource, tableId } = this.state;
const { rowStyle } = this.props; const { rowStyle, rowClassName } = this.props;
const operateConfig = {}; const operateConfig = {};
return ( return (
<div className={styles.container}> <div className={styles.container}>
...@@ -50,7 +55,7 @@ class AirTable extends React.Component<CommonProps, CommonState> { ...@@ -50,7 +55,7 @@ class AirTable extends React.Component<CommonProps, CommonState> {
onScroll={this.onScroll} onScroll={this.onScroll}
operateConfig={operateConfig} operateConfig={operateConfig}
rowStyle={rowStyle} rowStyle={rowStyle}
rowClassName={styles.rowClassName} rowClassName={rowClassName}
/> />
</div> </div>
</div> </div>
......
src/apollo-table/component/interface.tsx
View file @ b2aecf3c
...@@ -9,6 +9,7 @@ export interface CommonProps { ...@@ -9,6 +9,7 @@ export interface CommonProps {
rowClassName?: string | Function; rowClassName?: string | Function;
rowStyle?: Object | Function; rowStyle?: Object | Function;
rowRenderer?: Function; rowRenderer?: Function;
onScroll?:Function;
} }
export interface CommonState { export interface CommonState {
......
src/test/demo1.tsx 0 → 100644
View file @ b2aecf3c
import React, { useState, useEffect, useCallback } from 'react';
import _ from 'lodash';
import ApolloTable from '../apollo-table';
import { getColumnConfig, getDataSource } from './serives';
import { message } from 'antd';
const rowStyle = ({ index, record }) => {
const style: any = {};
if (index % 3 === 0) {
style.background = 'red';
}
return style;
};
const tableId = 1;
interface RowData {
id: number;
rowData: any[];
}
interface PageConfig {
pageNum: number;
pageSize: number;
hasNextPage: boolean;
nextPage: number;
}
const Demo1 = (props) => {
const [columns, setColumns] = useState([]);
useEffect(() => {
const getColumnsList = async () => {
const res = await getColumnConfig({ tableId });
if (res && res.success && res.data) {
const arr = Array.isArray(res.data) ? res.data : [];
setColumns(arr);
}
};
getColumnsList();
}, []);
const [dataSource, setDataSource] = useState<RowData[]>([]);
const [pageConfig, setPageConfig] = useState<PageConfig>({
pageNum: 1,
pageSize: 50,
hasNextPage: false,
nextPage: 1,
});
useEffect(() => {
const getDataList = async () => {
const data = {
pageNum: pageConfig.nextPage,
pageSize: pageConfig.pageSize,
};
const res = await getDataSource({ tableId, data });
if (res && res.success && res.data) {
const { list, hasNextPage, nextPage } = res.data;
let arr = Array.isArray(list) ? list : [];
setDataSource([...dataSource, ...arr]);
setPageConfig({ ...data, hasNextPage, nextPage });
}
};
getDataList();
}, [pageConfig.pageNum]);
const fetchData = useCallback(async (isClean: boolean) => {
const data = {
pageNum: isClean ? 1 : pageConfig.nextPage,
pageSize: pageConfig.pageSize,
};
const res = await getDataSource({ tableId, data });
if (res && res.success && res.data) {
const arr = Array.isArray(res.data.list) ? res.data.list : [];
setDataSource(arr);
}
}, []);
const onScroll = () => {
if (pageConfig.hasNextPage) {
setPageConfig({ ...pageConfig, pageNum: pageConfig.nextPage });
} else {
message.warning('没有更多了');
}
};
const debounceScroll = _.debounce(onScroll, 400);
return (
<ApolloTable
rowStyle={rowStyle}
columns={columns}
dataSource={dataSource}
tableId={tableId}
onScroll={debounceScroll}
/>
);
};
export default Demo1;
src/test/index.tsx
View file @ b2aecf3c
import React from 'react'; import React from 'react';
import { render } from 'react-dom'; import { render } from 'react-dom';
import ApolloTable from '../apollo-table'; import Demo1 from './demo1';
import Data from './data';
const { cols, list } = Data; render(<Demo1 />, document.getElementById('root'));
const rowStyle = ({ index, record }) => {
const style: any = {};
if (index % 3 === 0) {
style.background = 'red';
}
return style;
};
render(
<ApolloTable rowStyle={rowStyle} columns={cols} dataSource={list} tableId={1} />,
document.getElementById('root'),
);
src/test/serives.ts 0 → 100644
View file @ b2aecf3c
import request from '../apollo-table/utils/request';
// 获取表头配置
export async function getColumnConfig({ tableId, data }: { tableId: number; data?: any }) {
return request(`/airTable/userConfig/${tableId}`, { method: 'get', prefix: '/crmApi', data });
}
// 设置表头显隐配置
export async function setHideConfig({ tableId, data }) {
return request(`/airTable/hideConfig/${tableId}`, { method: 'post', prefix: '/crmApi', data });
}
// 获取操作栏配置
export async function getOperateConfig({ tableId }) {
return request(`/airTable/table/config/${tableId}`, { method: 'post', prefix: '/crmApi' });
}
// 修改操作栏配置
export async function setOperateConfig({ tableId, data }) {
return request(`/airTable/table/config/save/${tableId}`, { method: 'post', prefix: '/crmApi', data });
}
// 获取数据
export async function getDataSource({ tableId, data }: { tableId: number; data?: any }) {
return request(`/follow/list/${tableId}`, { method: 'post', prefix: '/crmApi', data });
}
// 获取分组数据
export async function getGroupDataSource({ tableId, data }) {
return request(`/follow/group/list/${tableId}`, { method: 'post', prefix: '/crmApi', data });
}
// 修改数据
export async function addOrUpdateDataSource({ data }) {
return request('/follow/addOrUpdate', { method: 'post', prefix: '/crmApi', data });
}
// 删除数据
export async function delData({ data }) {
return request('/follow/del', { method: 'post', prefix: '/crmApi', data });
}
// 获取数据详情
export async function getDetail({ tableId, rowId }) {
return request(`/follow/row/${tableId}/${rowId}`, { method: 'get', prefix: '/crmApi' });
}
webpack.config.js
View file @ b2aecf3c
...@@ -2,6 +2,8 @@ const path = require('path'); ...@@ -2,6 +2,8 @@ const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const webpack = require('webpack'); const webpack = require('webpack');
const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');
const smp = new SpeedMeasurePlugin();
const proxyHost = { const proxyHost = {
localhost: 'http://192.168.16.252:8093', //链接本地调试 localhost: 'http://192.168.16.252:8093', //链接本地调试
...@@ -11,7 +13,7 @@ const proxyHost = { ...@@ -11,7 +13,7 @@ const proxyHost = {
}; };
const proxy_env = proxyHost[process.env.PROXY_ENV]; const proxy_env = proxyHost[process.env.PROXY_ENV];
module.exports = { const config = {
mode: 'development', mode: 'development',
entry: './src/test/index.tsx', entry: './src/test/index.tsx',
output: { output: {
...@@ -146,3 +148,4 @@ module.exports = { ...@@ -146,3 +148,4 @@ module.exports = {
port: 9000, port: 9000,
}, },
}; };
module.exports = smp.wrap(config);
webpack.config.test.js 0 → 100644
View file @ b2aecf3c
const path = require('path');
const I18nPlugin = require('i18n-webpack-plugin');
const languageConfig = {};
const optionsObj = {};
module.exports = {
mode: 'development',
entry: './scripts/demo.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.[hash:6].js',
},
plugins: [new I18nPlugin(languageConfig, optionsObj)],
};
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