Skip to content

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

update

parent b2aecf3c
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 375 additions and 901 deletions
src/apollo-table/component/Cell.less
View file @ cdafc0f7
@import '../../common';
.cell {
max-width: 100%;
min-width: 100%;
.detailCell {
display: flex;
align-items: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
height: 100%;
&.disabled {
background: @disabledColor;
}
.cellContent {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
height: 100%;
font-size: 14px;
}
font-size: @textFontGen;
padding: 0 10px;
}
.editPop {
width: 300px;
:global(.ant-popover-inner){
box-shadow: none;
}
:global(.ant-popover-inner-content) {
padding: 0;
border: 1px solid @primaryColor;
border-radius: 2px;
}
}
.menuPop {
width: 110px;
:global(.ant-popover-inner-content) {
padding: @paddingSmX 0;
border-radius: @borderRadius;
background: #333333;
}
.menuContainer {
.splitLine {
height: 1px;
background: white;
opacity: 0.2;
}
.menu {
display: flex;
height: 28px;
padding: 0 @paddingGen;
align-items: center;
cursor: pointer;
&:hover {
background: rgba(216, 216, 216, 0.1);
}
.menuIcon {
width: 12px;
margin-right: @marginSmX;
color: white;
font-size: @textFontGen;
display: flex;
}
.menuTitle {
font-size: @textFontGen;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: white;
}
}
}
.editCell {
position: absolute;
z-index: 1;
width: 100%;
top: 0;
left: 0;
}
src/apollo-table/component/Cell.tsx
View file @ cdafc0f7
This diff is collapsed.
src/apollo-table/component/Table.less
View file @ cdafc0f7
@import '../../common';
.tableCell {
&.sortCol {
background: @hoverColor;
}
}
.indexCell {
padding: 0 10px;
display: flex;
justify-content: flex-start;
align-items: center;
height: 100%;
&.disabled {
background: @disabledColor;
&:hover {
box-shadow: none;
}
}
&:hover {
box-shadow: inset 0 0 0 1px @operateColor;
.showFormBtnCls {
.showFormBtn {
display: initial;
}
}
.unchecked {
display: initial;
}
.no {
display: none;
}
.addCls {
.addIcon {
display: initial;
}
}
}
.cellNo {
display: flex;
align-items: center;
min-width: 50px;
}
.cellContent {
flex: 1;
overflow: hidden;
height: 100%;
display: flex;
align-items: center;
.firstCell {
min-width: 0;
max-width: 80%;
}
.empty {
min-width: 80%;
}
.historyCount {
margin: @marginSmX;
cursor: pointer;
.countNo {
color: @primaryColor;
}
}
}
.addCls {
width: 20px;
text-align: center;
cursor: pointer;
height: 16px;
.addIcon {
display: none;
color: @primaryColor;
}
}
.unchecked {
display: none;
}
.no {
width: 17px;
display: block;
text-align: center;
white-space: nowrap;
}
.showFormBtnCls {
margin: 0 5px;
width: 18px;
cursor: pointer;
.showFormBtn {
display: none;
width: 18px;
border-radius: 50%;
&:hover {
background: #d0f0fd;
}
}
}
}
.GridRow {
position: relative;
display: flex;
......@@ -171,11 +61,6 @@
width: 100%;
outline: none;
}
.bodyRow {
width: 100%;
box-sizing: border-box;
}
.bodyCell {
width: 100%;
height: 100%;
font-size: 20px;
}
src/apollo-table/component/Table.tsx
View file @ cdafc0f7
This diff is collapsed.
src/apollo-table/component/base/_utils/setFormatter.tsx
View file @ cdafc0f7
export const formatStr = 'YYYY-MM-DD HH:mm:ss';
export const emptyModel = [{ text: '', value: '' }];
const emptyFormat = (value) => {};
export const SetFormatter = {
INPUT: (event) => {
const node = event.currentTarget || {};
......@@ -16,9 +17,11 @@ export const SetFormatter = {
}));
}
},
TEXTAREA: (event) => {
const node = event.currentTarget || {};
return [{ value: node.value, text: node.value }];
TEXTAREA: (value) => {
if (!value) {
return emptyModel;
}
return [{ value: value, text: value }];
},
UPLOAD: (val) => {
if (!val) return null;
......
src/apollo-table/component/base/config.tsx
View file @ cdafc0f7
......@@ -25,7 +25,8 @@ export const config: any = {
getFormatter: GetFormatter['TEXTAREA'],
setFormatter: SetFormatter['TEXTAREA'],
componentAttr: {
autosize: { minRows: 3 },
autoSize: true,
emitTrigger: 'onBlur',
},
detail: require('./detail/textarea').default,
},
......
src/apollo-table/component/base/detail/index.tsx
View file @ cdafc0f7
......@@ -26,14 +26,7 @@ export const getDetail = (type: string) => {
const transferColumn = transferAttr(columnType, newProps);
return (
<div className={styles.container}>
<Detail
{...this.props}
componentAttr={transferColumn}
formatter={NodeObj.getFormatter}
value={value}
/>
</div>
<Detail {...this.props} componentAttr={transferColumn} formatter={NodeObj.getFormatter} value={value} />
);
}
};
......
src/apollo-table/component/base/edit/editInterface.tsx
View file @ cdafc0f7
import { DatePickerProps } from 'antd/es/date-picker/interface';
import { TextAreaProps } from 'antd/es/input';
export interface CommonProps {
value: any[] | undefined;
placeholder?: string;
formatter?: Function;
onChange: any;
disabled?: boolean;
onEmitChange?: Function;
emitTrigger?: string;
}
export interface InputProps extends CommonProps {
maxLength: number;
......@@ -18,9 +16,8 @@ export interface LinkState {
prevProps: LinkProps;
value: any[];
}
export interface TextAreaProps extends CommonProps {
maxLength: number;
autosize?: boolean | any;
export interface ApolloTextAreaProps extends TextAreaProps, CommonProps {
value: string | undefined;
}
export interface SearchProps extends CommonProps {
type: string;
......
src/apollo-table/component/base/edit/textarea/index.tsx
View file @ cdafc0f7
import React from 'react';
import React, { useEffect, useState } from 'react';
import { Input } from 'antd';
import styles from './styles.less';
import { TextAreaProps } from '../editInterface';
import { antiAssign } from '@/apollo-table/utils/utils';
import { ApolloTextAreaProps } from '../editInterface';
export default function(props: TextAreaProps) {
const { maxLength, value, disabled, placeholder, autosize } = props;
const selfProps = { value, disabled, placeholder, autosize };
const TextArea = (props: ApolloTextAreaProps) => {
const { maxLength, onChange, emitTrigger, onEmitChange } = props;
const selfProps = antiAssign(props, ['value', 'onChange', 'emitTrigger', 'onEmitChange']);
const [value, setValue] = useState(props.value);
useEffect(() => {
setValue(props.value);
}, [props.value]);
const changeValue = (e) => {
setValue(e.target.value);
if (typeof onChange === 'function') {
onChange(e.target.value);
}
if (!emitTrigger || emitTrigger === 'onChange') {
emitChange(e);
}
};
const emitChange = (e) => {
if (typeof onEmitChange === 'function') {
onEmitChange(e.target.value);
}
};
if (emitTrigger === 'onBlur') {
selfProps.onBlur = emitChange;
}
return (
<div className={styles.container}>
<Input.TextArea className={styles.input} {...selfProps} />
{maxLength ? (
<span className={styles.wordNumber}>{`已输入${(value || '').length || 0}/${maxLength}`}</span>
) : null}
<Input.TextArea className={styles.input} {...selfProps} value={value} onChange={changeValue} />
{maxLength && (
<span className={styles.wordNumber}>{`已输入${(value || '').length}/${maxLength}`}</span>
)}
</div>
);
}
};
export default TextArea;
src/apollo-table/component/base/edit/textarea/styles.less
View file @ cdafc0f7
.container{
.container {
position: relative;
top:0;
top: 0;
left: 0;
.input{
.input {
padding-bottom: 18px;
}
textarea{
textarea {
padding-bottom: 18px;
}
.wordNumber{
position: absolute;
right:12px;
bottom: 2px;
color:#E1E1E1FF;
font-size: 12px;
}
.wordNumber {
position: absolute;
right: 12px;
bottom: 2px;
color: #e1e1e1ff;
font-size: 12px;
}
}
src/apollo-table/component/base/index.tsx
View file @ cdafc0f7
......@@ -17,11 +17,8 @@ export const getComponent = (type: string) => {
console.error(type + '组件未定义');
return;
}
const setFormat = (columnConfig: any, values: any[]) => {
const setFormat = (columnConfig: any, value: any[]) => {
const { columnAttrObj, columnType } = columnConfig || {};
if (!values || values.length <= 0) return undefined;
const value = values[0] || undefined;
if (!value) return undefined;
const transferColumn = transferAttr(columnType, {
...(NodeObj.componentAttr || {}),
...(columnAttrObj || {}),
......@@ -30,67 +27,59 @@ export const getComponent = (type: string) => {
return value;
};
const getFormat = (columnConfig: any, values: any) => {
const getFormat = (columnConfig: any, value: any) => {
const { columnAttrObj, columnType } = columnConfig || {};
if (!values || !Array.isArray(values) || values.length <= 0) return undefined;
const newValue = values.filter((item) => {
return item.value || item.value === 0 || item.label || item.text;
});
if (!value || !Array.isArray(value) || value.length <= 0) return undefined;
const transferColumn = transferAttr(columnType, {
...(NodeObj.componentAttr || {}),
...(columnAttrObj || {}),
});
if (NodeObj.getFormatter) {
return NodeObj.getFormatter(newValue, transferColumn);
return NodeObj.getFormatter(value, transferColumn);
}
return newValue;
return value;
};
const com: any = class Base extends React.Component<BaseComponentProps, BaseComponentState> {
static getDerivedStateFromProps(nextProps: BaseComponentProps, prevState: BaseComponentState) {
const { prevProps } = prevState;
const { columnConfig } = prevState;
let nextState: BaseComponentState = {
...prevState,
prevProps: nextProps,
columnConfig: nextProps.columnConfig,
value: getFormat(nextProps.columnConfig, nextProps.value),
};
if (JSON.stringify(prevProps.columnConfig) !== JSON.stringify(nextProps.columnConfig)) {
if (JSON.stringify(columnConfig) !== JSON.stringify(nextProps.columnConfig)) {
nextState.columnConfig = nextProps.columnConfig;
}
if (JSON.stringify(nextProps.value) !== JSON.stringify(nextProps.value)) {
nextState.value = getFormat(nextProps.columnConfig, nextProps.value);
}
return nextState;
}
constructor(props: BaseComponentProps) {
super(props);
const { columnConfig } = props;
this.state = {
prevProps: props,
value: undefined,
columnConfig: {},
columnConfig,
};
}
onChange = ({ changedValue, isBlur }: any) => {
onChange = (changedValue: any) => {
const { columnConfig } = this.state;
const { onChange, changeParams } = this.props;
const { onChange } = this.props;
let value = setFormat(columnConfig, changedValue);
// 置空默认逻辑
if (value && value.length === 0) {
value = emptyModel;
}
if (typeof onChange === 'function') {
onChange(value);
}
if (typeof changeParams === 'function') {
changeParams({ value, changedValue, isBlur });
};
// 触发修改回调
onEmitChange = (changedValue: any) => {
const { columnConfig } = this.state;
const { onEmitChange } = this.props;
let value = setFormat(columnConfig, changedValue);
if (typeof onEmitChange === 'function') {
onEmitChange(value,changedValue);
}
};
render() {
const { ...others } = this.props;
const { columnConfig, value } = this.state;
const { value, ...others } = this.props;
const { columnConfig } = this.state;
const { columnAttrObj, columnType } = columnConfig || {};
let transferColumn = transferAttr(columnType, {
...(NodeObj.componentAttr || {}),
......@@ -100,7 +89,14 @@ export const getComponent = (type: string) => {
...others,
...(transferColumn || {}),
};
return <Node {...newProps} value={value} onChange={this.onChange} />;
return (
<Node
{...newProps}
value={getFormat(columnConfig, value)}
onChange={this.onChange}
onEmitChange={this.onEmitChange}
/>
);
}
};
com.Detail = getDetail(type);
......
src/apollo-table/component/index.tsx
View file @ cdafc0f7
......@@ -5,32 +5,26 @@ import Table from './Table';
class AirTable extends React.Component<CommonProps, CommonState> {
static getDerivedStateFromProps(nextProps: CommonProps, prevState: CommonState) {
const { prevProps } = prevState;
const { columns, dataSource } = prevState;
let nextState: CommonState = {
...prevState,
prevProps: nextProps,
};
if (JSON.stringify(prevProps.dataSource) !== JSON.stringify(nextProps.dataSource)) {
if (JSON.stringify(dataSource) !== JSON.stringify(nextProps.dataSource)) {
nextState.dataSource = nextProps.dataSource;
}
if (JSON.stringify(prevProps.columns) !== JSON.stringify(nextProps.columns)) {
if (JSON.stringify(columns) !== JSON.stringify(nextProps.columns)) {
nextState.columns = nextProps.columns;
}
if (prevProps.tableId !== nextProps.tableId) {
nextState.tableId = nextProps.tableId;
}
return nextState;
}
constructor(props: CommonProps) {
super(props);
const { columns, dataSource, tableId } = props;
const { columns, dataSource } = props;
this.state = {
prevProps: props,
columns,
dataSource,
tableId,
};
}
......@@ -42,20 +36,20 @@ class AirTable extends React.Component<CommonProps, CommonState> {
};
render() {
const { columns, dataSource, tableId } = this.state;
const { rowStyle, rowClassName } = this.props;
const operateConfig = {};
const { columns, dataSource } = this.state;
const { rowStyle, rowClassName, distanceToLoad, emitChangeCell, bordered } = this.props;
return (
<div className={styles.container}>
<div className={styles.tableContainer}>
<Table
columns={columns}
dataSource={dataSource}
tableId={tableId}
onScroll={this.onScroll}
operateConfig={operateConfig}
rowStyle={rowStyle}
rowClassName={rowClassName}
distanceToLoad={distanceToLoad}
emitChangeCell={emitChangeCell}
bordered={bordered}
/>
</div>
</div>
......
src/apollo-table/component/interface.tsx
View file @ cdafc0f7
import React from 'react';
export interface CommonProps {
export interface OperateConfigProps {
menusGroup?: Object[];
buttonsGroup?: Object[];
moreGroup?: Object[];
}
export interface LoadConfigProps {
onScroll?: Function;
distanceToLoad?: number;
}
export interface EmitChangeProps {
emitChangeCell: Function;
emitChangeRow?: Function;
emitChangeColumns?: Function;
emitChangeOperate?: Function;
}
export interface TableProps extends LoadConfigProps {
columns: any[];
dataSource: any[];
tableId: number;
checked?: any[];
columnWidth?: number;
rowClassName?: string | Function;
rowStyle?: Object | Function;
rowRenderer?: Function;
onScroll?:Function;
bordered?: boolean;
height?: number;
width?: number;
emitChangeCell: Function;
}
export interface CommonState {
prevProps: CommonProps;
export interface TableState {
columns: any[];
dataSource: any[];
tableId: number;
checked?: any[];
columnWidth?: number;
tableHeight?: number;
tableWidth?: number;
}
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;
rowClassName?: string | Function;
rowStyle?: Object | Function;
rowRenderer?: Function;
rowBorder?:string;
export interface CommonProps extends TableProps {
operateConfig?: OperateConfigProps;
}
export interface TableState extends CommonState {
prevProps: TableProps;
tableHeight: number;
tableWidth: number;
}
export interface CommonState extends TableState {}
export interface RowRendererParams {
rowClassName?: string|Function;
rowClassName?: string | Function;
columns: Array<any>;
rowIndex: number;
isScrolling: boolean;
......@@ -74,39 +66,24 @@ export interface BaseComponentProps {
columnConfig: any;
formatter?: Function;
onChange?: Function;
changeParams?: Function;
onEmitChange?: Function;
}
export interface BaseComponentState {
prevProps: BaseComponentProps;
value: any[] | undefined;
// value: any[] | undefined;
columnConfig: any;
}
export interface CellProps {
columns: any[];
rowIndex: number;
columnIndex: number;
columnConfig: any;
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;
emitChangeCell: Function;
cellClassName?: string;
cellStyle: object;
}
export interface CellState {
prevProps: CellProps;
editValue: any[];
originValue: any[];
isEditVisible: boolean;
isMenuVisible: boolean;
status: string;
}
export interface EditCellProps {
columns: any[];
......
src/apollo-table/utils/utils.tsx
View file @ cdafc0f7
......@@ -27,7 +27,7 @@ export function getStrLeng(str: string) {
* @returns {string} 返回随机字符串
*/
export function getRandom(len:number = 6, type?:string, extra?:string) {
export function getRandom(len: number = 6, type?: string, extra?: string) {
let num = '0123456789';
let letter = 'abcdefghigklmnopqrstuvwxyz';
let upLetter = letter.toUpperCase();
......@@ -54,7 +54,68 @@ export function getRandom(len:number = 6, type?:string, extra?:string) {
str += extra;
}
for (let i = 0; i < len; i++) {
result += str[Math.floor(Math.random() * str.length)]
result += str[Math.floor(Math.random() * str.length)];
}
return result;
}
/**
* 提出原对象中指定属性
* @param src 原对象
* @param anti 属性名称数组
*/
export function antiAssign(src: object, anti: string[]) {
const result = _.assign({}, src);
Object.keys(result).map((key) => {
if (anti.includes(key)) {
delete result[key];
}
});
return result;
}
/**
* 合并样式class
* @param className 原样式名
* @param mergeClassName 合并样式名或方法
* @param mergeData 合并样式方法的参数
*/
export function getMergeClassName(
className: string | undefined,
mergeClassName: string | Function | undefined,
mergeData?: any,
): string {
if (!className) {
className = '';
}
if (!mergeClassName) {
mergeClassName = '';
}
if (typeof mergeClassName === 'function') {
className = `${className} ${mergeClassName(mergeData)}`;
} else {
className = `${className} ${mergeClassName}`;
}
return className;
}
/**
* 合并样式style
* @param style 原样式
* @param mergeStyle 合并样式对象或方法
* @param mergeData 合并样式方法的参数
*/
export function getMergeStyle(style: any, mergeStyle: object | Function | undefined, mergeData: any) {
if (!style) {
style = {};
}
if (!mergeStyle) {
mergeStyle = {};
}
if (typeof mergeStyle === 'function') {
_.assign(style, mergeStyle(mergeData));
} else {
_.assign(style, mergeStyle);
}
return style;
}
src/test/demo1.less 0 → 100644
View file @ cdafc0f7
.row{
color: green;
}
src/test/demo1.tsx
View file @ cdafc0f7
import React, { useState, useEffect, useCallback } from 'react';
import _ from 'lodash';
import ApolloTable from '../apollo-table';
import { getColumnConfig, getDataSource } from './serives';
import { getColumnConfig, getDataSource, addOrUpdateDataSource } from './serives';
import { message } from 'antd';
import s from './demo1.less';
const rowStyle = ({ index, record }) => {
const rowStyle = ({ rowIndex }) => {
const style: any = {};
if (index % 3 === 0) {
if (rowIndex % 3 === 0) {
style.fontSize = '20px';
style.background = 'red';
}
return style;
......@@ -41,10 +43,11 @@ const Demo1 = (props) => {
hasNextPage: false,
nextPage: 1,
});
const [flush,setFlush]=useState(false);
useEffect(() => {
const getDataList = async () => {
const data = {
pageNum: pageConfig.nextPage,
pageNum: pageConfig.pageNum,
pageSize: pageConfig.pageSize,
};
const res = await getDataSource({ tableId, data });
......@@ -59,7 +62,7 @@ const Demo1 = (props) => {
}, [pageConfig.pageNum]);
const fetchData = useCallback(async (isClean: boolean) => {
const data = {
pageNum: isClean ? 1 : pageConfig.nextPage,
pageNum: isClean ? 1 : pageConfig.pageNum,
pageSize: pageConfig.pageSize,
};
const res = await getDataSource({ tableId, data });
......@@ -76,13 +79,21 @@ const Demo1 = (props) => {
}
};
const debounceScroll = _.debounce(onScroll, 400);
const emitChangeCell = async ({ rowId, value }) => {
const res = await addOrUpdateDataSource({ data: { id: rowId, value } });
if (res && res.success) {
fetchData(true);
}
};
return (
<ApolloTable
rowStyle={rowStyle}
columns={columns}
dataSource={dataSource}
tableId={tableId}
onScroll={debounceScroll}
emitChangeCell={emitChangeCell}
bordered={true}
rowClassName={s.row}
/>
);
};
......
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