Skip to content

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

修改ts配置

parent f35972ec
Expand all Show whitespace changes
Inline Side-by-side
Showing with 306 additions and 174 deletions
.babelrc 0 → 100644
View file @ ccab7fe3
{
"presets": [
"env",
"react",
"stage-0"
],
"plugins": [
[
"import",
{
"libraryName": "antd",
"style": true
}
]
]
}
src/apollo-table/component/Cell.tsx
View file @ ccab7fe3
......@@ -114,6 +114,7 @@ export default class Cell extends React.Component<CellProps, CellState> {
title: '确认要删除该条数据吗？',
autoFocusButton: null,
onOk: async () => {
if (typeof delData === 'function') {
const response = await delData({ tableId, data: { id: record.id } });
if (response && response.success) {
message.success('删除成功');
......@@ -121,6 +122,7 @@ export default class Cell extends React.Component<CellProps, CellState> {
getData({ isClean: true });
}
}
}
},
});
};
......@@ -193,7 +195,7 @@ export default class Cell extends React.Component<CellProps, CellState> {
</div>
)}
{extraMenu && extraMenu.length > 0 && (
<>
<React.Fragment>
<div className={style.splitLine} />
{extraMenu.map((item: any, i: number) => {
if (typeof item.hidden === 'function' && item.hidden({ record: cellData, menu: item })) {
......@@ -216,7 +218,7 @@ export default class Cell extends React.Component<CellProps, CellState> {
</div>
);
})}
</>
</React.Fragment>
)}
</div>
);
......
src/apollo-table/component/Row.tsx
View file @ ccab7fe3
import React, { PureComponent } from 'react';
import { config } from './config';
import s from './Row.less';
import { ColumnProps } from './interface';
import IconFont from './base/extra/iconFont';
import React from 'react';
import { RowRendererParams } from './interface';
import styles from './Table.less';
import _ from 'lodash';
import Cell from './Cell';
export default class TableRow extends PureComponent<ColumnProps> {
render() {
let { type, title, width = 200, columnAttrObj = {} } = this.props;
if (!config[String(type)]) {
type = '1';
const renderBodyCell = ({ column, columnIndex, rowData, rowIndex, key }) => {
const columnData: any = rowData.rowData[columnIndex]; // 列数据
const cellData: any = columnData.cellValueList; // 列数据
let text = '';
if (Array.isArray(cellData) && cellData.length > 0) {
text = cellData[0].text;
}
let icon = config[String(type)] && config[String(type)].icon;
if (String(type) === '13' && !columnAttrObj.isMultiple) {
icon = 'iconziduan-lianxiangdanxuan';
const { width = 200, fixed } = column;
const style: any = {
display: 'inline-block',
width: '200px',
};
if (fixed) {
style.position = 'sticky';
style.left = 0;
}
return (
<div className={s.colContainer} style={{ width }}>
<div className={s.colBrief}>
{icon && (typeof icon === 'string' ? <IconFont className={s.colIcon} type={icon} /> : icon)}
<span className={s.colTitle}>{title}</span>
</div>
<div key={key} style={style}>
{text}
</div>
);
};
export default function defaultRowRenderer({
rowClassName,
columns,
rowIndex,
key,
onRowClick,
onRowDoubleClick,
onRowMouseOut,
onRowMouseOver,
onRowRightClick,
rowData,
rowStyle,
}: RowRendererParams) {
const a11yProps: any = { 'aria-rowindex': rowIndex + 1 };
if (onRowClick || onRowDoubleClick || onRowMouseOut || onRowMouseOver || onRowRightClick) {
a11yProps['aria-label'] = 'row';
a11yProps.tabIndex = 0;
if (onRowClick) {
a11yProps.onClick = (event) => onRowClick({ event, rowIndex, rowData });
}
if (onRowDoubleClick) {
a11yProps.onDoubleClick = (event) => onRowDoubleClick({ event, rowIndex, rowData });
}
if (onRowMouseOut) {
a11yProps.onMouseOut = (event) => onRowMouseOut({ event, rowIndex, rowData });
}
if (onRowMouseOver) {
a11yProps.onMouseOver = (event) => onRowMouseOver({ event, rowIndex, rowData });
}
if (onRowRightClick) {
a11yProps.onContextMenu = (event) => onRowRightClick({ event, rowIndex, rowData });
}
}
return (
<div {...a11yProps} className={rowClassName} key={key} role="row" style={rowStyle}>
{columns.map((column, columnIndex) =>
renderBodyCell({
column,
columnIndex,
rowData,
rowIndex,
key,
}),
)}
</div>
);
}
src/apollo-table/component/Table.less
View file @ ccab7fe3
......@@ -45,9 +45,7 @@
display: flex;
justify-content: flex-start;
align-items: center;
border-right: 1px solid #e8e8e8;
border-bottom: 1px solid #e8e8e8;
box-sizing: border-box;
height: 100%;
&.disabled {
background: @disabledColor;
......@@ -112,6 +110,7 @@
width: 20px;
text-align: center;
cursor: pointer;
height: 16px;
.addIcon {
display: none;
color: @primaryColor;
......@@ -206,4 +205,11 @@
width: 100%;
outline: none;
}
.bodyRow {
width: 100%;
box-sizing: border-box;
}
.bodyCell {
width: 100%;
height: 100%;
}
src/apollo-table/component/Table.tsx
View file @ ccab7fe3
This diff is collapsed.
src/apollo-table/component/base/config.tsx
View file @ ccab7fe3
......@@ -29,13 +29,13 @@ export const config: any = {
},
detail: require('./detail/textarea').default,
},
// '4': {
// name: '附件上传',
// component: require('./edit/upload').default,
// getFormatter: GetFormatter['UPLOAD'],
// setFormatter: SetFormatter['UPLOAD'],
// detail: require('./detail/upload').default,
// },
'4': {
name: '附件上传',
component: require('./edit/input').default,
setFormatter: SetFormatter['INPUT'],
getFormatter: GetFormatter['INPUT'],
detail: require('./detail/input').default,
},
'5': {
name: '复选',
component: require('./edit/checkbox').default, // 暂未添加
......
src/apollo-table/component/base/detail/text-select/index.tsx
View file @ ccab7fe3
......@@ -14,11 +14,10 @@ export default function Detail(props: SearchProps) {
const tagsVal = value.filter((ls) => ls.value);
const textVal = value.filter((ls) => !ls.value);
return (
<>
{' '}
<React.Fragment>
{tagsVal.length > 0 ? <Tag value={tagsVal} {...selfAttr} /> : null}
{textVal.length > 0 ? <div className={styles.text}>{textVal[0].text}</div> : null}
</>
</React.Fragment>
);
}
}
src/apollo-table/component/base/detail/upload/index.tsx
View file @ ccab7fe3
import React from 'react';
import Upload from '../../extra/upload';
// import Upload from '../../extra/upload';
import styles from './styles.less';
import { UploadProps } from '../detailInterface';
......@@ -10,13 +10,12 @@ export default function Detail(props: UploadProps) {
const { value, formatter, width } = props;
const formatValue = formatter ? formatter(value) : value;
if (!formatValue) return null;
let themeValue: any[] = [];
if (Array.isArray(formatValue)) {
themeValue = formatValue.map((item) => {
return {
...item,
...Upload.checkoutFileType(item.value),
// ...Upload.checkoutFileType(item.value),
};
});
}
......
src/apollo-table/component/base/edit/upload/index.tsx
View file @ ccab7fe3
import UpLoad from '../../extra/upload';
// import UpLoad from '../../extra/upload';
export default UpLoad;
// export default UpLoad;
src/apollo-table/component/base/extra/associationSearch/index.tsx
View file @ ccab7fe3
......@@ -197,7 +197,7 @@ class AssociationSearch extends React.Component<Props> {
const { data, fetching, value } = this.state;
const { selfCom, autoFocus, onChange, ...rest } = this.props;
return (
<>
<React.Fragment>
<Select
filterOption={false}
suffixIcon={<img alt="" className={s.suffixIcon} src="https://static.mttop.cn/admin/search.png" />}
......@@ -226,7 +226,7 @@ class AssociationSearch extends React.Component<Props> {
})}
</Select>
{selfCom || null}
</>
</React.Fragment>
);
}
}
......
src/apollo-table/component/base/extra/dataEntry/textSelect/index.tsx
View file @ ccab7fe3
......@@ -20,23 +20,22 @@ interface Props {
value: any;
label: string;
};
placeholder?:string;
width?:number;
disabled?:boolean;
placeholder?: string;
width?: number;
disabled?: boolean;
}
interface State {
searchStr: string,
list: any[],
loading: boolean,
selected: any[],
tempSelected: any[],
tempVisible: boolean,
searchStr: string;
list: any[];
loading: boolean;
selected: any[] | undefined;
tempSelected: any[] | undefined;
tempVisible: boolean;
}
class TextSelect extends React.Component<Props,State> {
class TextSelect extends React.Component<Props, State> {
container: any;
input: any;
width: number;
inputWidth = 320;
width: number = 320;
constructor(props) {
super(props);
......
src/apollo-table/component/base/index.tsx
View file @ ccab7fe3
......@@ -30,7 +30,7 @@ export const getComponent = (type: string) => {
return value;
};
const getFormat = (columnConfig: any, values: any[]) => {
const getFormat = (columnConfig: any, values: any) => {
const { columnAttrObj, columnType } = columnConfig || {};
if (!values || !Array.isArray(values) || values.length <= 0) return undefined;
const newValue = values.filter((item) => {
......
src/apollo-table/component/index.less
View file @ ccab7fe3
......@@ -11,5 +11,8 @@
.tableC {
padding: 0 16px;
}
.rowClassName{
border: 1px solid black;
}
}
}
src/apollo-table/component/index.tsx
View file @ ccab7fe3
......@@ -38,6 +38,7 @@ class AirTable extends React.Component<CommonProps, CommonState> {
render() {
const { columns, dataSource, tableId } = this.state;
const { rowStyle } = this.props;
const operateConfig = {};
return (
<div className={styles.container}>
......@@ -48,6 +49,8 @@ class AirTable extends React.Component<CommonProps, CommonState> {
tableId={tableId}
onScroll={this.onScroll}
operateConfig={operateConfig}
rowStyle={rowStyle}
rowClassName={styles.rowClassName}
/>
</div>
</div>
......
src/apollo-table/component/interface.tsx
View file @ ccab7fe3
......@@ -6,6 +6,9 @@ export interface CommonProps {
tableId: number;
checked?: any[];
columnWidth?: number;
rowClassName?: string | Function;
rowStyle?: Object | Function;
rowRenderer?: Function;
}
export interface CommonState {
......@@ -32,6 +35,10 @@ export interface TableProps extends CommonProps {
noAdd?: boolean;
noEdit?: boolean;
noDel?: boolean;
rowClassName?: string | Function;
rowStyle?: Object | Function;
rowRenderer?: Function;
rowBorder?:string;
}
export interface TableState extends CommonState {
......@@ -39,6 +46,21 @@ export interface TableState extends CommonState {
tableHeight: number;
tableWidth: number;
}
export interface RowRendererParams {
rowClassName?: string|Function;
columns: Array<any>;
rowIndex: number;
isScrolling: boolean;
onRowClick?: Function;
onRowDoubleClick?: Function;
onRowMouseOver?: Function;
onRowMouseOut?: Function;
onRowRightClick?: Function;
rowData: any;
rowStyle?: any;
key: string;
}
export interface ColumnProps {
type: string;
title: string;
......
src/apollo-table/utils/request.tsx
View file @ ccab7fe3
......@@ -31,7 +31,7 @@ const handleRestfulUrl = (url: string = '', options: any = {}) => {
const { API_IDS = '' } = newParams || {};
const type = checkoutType(API_IDS);
if (type === 'array' && API_IDS.length > 0) {
const ids = [];
const ids:any[] = [];
return url.replace(/{id}/g, (word) => {
ids.push(word);
return API_IDS[ids.length - 1];
......
src/test/index.tsx
View file @ ccab7fe3
......@@ -4,5 +4,14 @@ import ApolloTable from '../apollo-table';
import Data from './data';
const { cols, list } = Data;
render(<ApolloTable columns={cols} dataSource={list} tableId={1} />, 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'),
);
tsconfig.json
View file @ ccab7fe3
......@@ -3,22 +3,19 @@
"outDir": "./dist/",
"sourceMap": false,
"noImplicitAny": false,
"module": "commonjs",
"module": "esnext",
"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",
"jsx": "preserve",
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"moduleResolution": "node",
"importHelpers": true,
"strict": true,
"baseUrl": ".",
"paths": {
"@/*": [
"src/*"
]
}
}
}
webpack.config.js
View file @ ccab7fe3
......@@ -2,28 +2,12 @@ const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const webpack = require('webpack');
// 根据API_ENV环境不同分为debugger开发代理(api),development为使用dev的api,production为使用线上api
function getIp() {
const interfaces = require('os').networkInterfaces(); // 在开发环境中获取局域网中的本机iP地址
let IPAdress = '';
for (var devName in interfaces) {
var iface = interfaces[devName];
for (var i = 0; i < iface.length; i++) {
var alias = iface[i];
if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) {
IPAdress = alias.address;
}
}
}
return IPAdress;
}
const proxyHost = {
localhost: 'http://192.168.16.252:8093', //链接本地调试
development: 'https://arthas.mttop.cn',
production: 'https://mt.mttop.cn',
feature: 'http://192.168.8.108:8096',
mock: `http://${getIp()}:8000`,
};
const proxy_env = proxyHost[process.env.PROXY_ENV];
......@@ -44,24 +28,40 @@ module.exports = {
rules: [
{
test: /\.tsx?$/,
include: [path.resolve(__dirname, 'src')],
use: ['ts-loader'],
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
},
{
loader: 'ts-loader',
},
],
},
{
test: /\.jsx?$/,
include: [path.resolve(__dirname, 'src')],
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
{
test: /\.less$/,
include: /node_modules\/antd/, // antd中的样式
use: [
'style-loader',
'css-loader',
{
loader: 'babel-loader',
loader: 'less-loader',
options: {
presets: ['@babel/preset-env'],
javascriptEnabled: true,
},
},
],
},
{
test: /\.less$/,
include: [path.resolve(__dirname, 'src')],
exclude: /node_modules/, // 项目中的样式
use: [
'style-loader',
{
......@@ -70,11 +70,16 @@ module.exports = {
modules: true,
},
},
'less-loader',
{
loader: 'less-loader',
options: {
modules: true,
},
},
],
},
{
test: /\.css$/,
test: /\.css$/, // 外部引入的react-virtualized/styles.css
use: [
'style-loader',
{
......
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