Commit ed397fd5 authored by zhangwenshuai's avatar zhangwenshuai

update

parent 5f14696a
...@@ -15,7 +15,6 @@ ...@@ -15,7 +15,6 @@
position: absolute; position: absolute;
z-index: 1; z-index: 1;
width: 100%; width: 100%;
height: 100%;
top: 0; top: 0;
left: 0; left: 0;
} }
...@@ -32,6 +32,7 @@ const Cell = (props: CellProps) => { ...@@ -32,6 +32,7 @@ const Cell = (props: CellProps) => {
cellData.map((item) => { cellData.map((item) => {
temp.push({ text: item.text, value: item.value }); temp.push({ text: item.text, value: item.value });
}); });
debugger
if (_.isEqual(temp, changedValue)) { if (_.isEqual(temp, changedValue)) {
setStatus('detail'); setStatus('detail');
return; return;
......
...@@ -64,3 +64,12 @@ ...@@ -64,3 +64,12 @@
.bodyCell { .bodyCell {
font-size: 20px; font-size: 20px;
} }
.fillHandleWrapper {
position: absolute;
overflow: hidden;
top: 0;
bottom: 0;
left: 0;
right: 0;
pointer-events: none;
}
...@@ -105,7 +105,7 @@ export default class AirTable extends Component<TableProps, TableState> { ...@@ -105,7 +105,7 @@ export default class AirTable extends Component<TableProps, TableState> {
onScroll = ({ clientHeight, scrollHeight, scrollTop }: any) => { onScroll = ({ clientHeight, scrollHeight, scrollTop }: any) => {
const height = clientHeight + scrollTop || 0; const height = clientHeight + scrollTop || 0;
const { onScroll, distanceToLoad = 100 } = this.props; const { onScroll, distanceToLoad = 100 } = this.props;
if (scrollTop > 0 && height + distanceToLoad >= scrollHeight && typeof onScroll === 'function') { if (scrollTop > 0 && height >= (scrollHeight - distanceToLoad) && typeof onScroll === 'function') {
onScroll(); onScroll();
} }
}; };
...@@ -331,11 +331,11 @@ export default class AirTable extends Component<TableProps, TableState> { ...@@ -331,11 +331,11 @@ export default class AirTable extends Component<TableProps, TableState> {
width={width} width={width}
rowHeight={rowHeight} rowHeight={rowHeight}
rowCount={rowCount} rowCount={rowCount}
height={totalHeight}
onScroll={(...arg: Array<Object>) => { onScroll={(...arg: Array<Object>) => {
onScroll(...arg); onScroll(...arg);
this.onScroll(arg[0]); this.onScroll(arg[0]);
}} }}
height={totalHeight}
cellRenderer={this.renderBodyRow.bind(this, data)} cellRenderer={this.renderBodyRow.bind(this, data)}
columns={columns} columns={columns}
/> />
...@@ -346,6 +346,7 @@ export default class AirTable extends Component<TableProps, TableState> { ...@@ -346,6 +346,7 @@ export default class AirTable extends Component<TableProps, TableState> {
}} }}
</AutoSizer> </AutoSizer>
</div> </div>
<div className={styles.fillHandleWrapper} />
</div> </div>
); );
}} }}
......
...@@ -26,7 +26,15 @@ export const GetFormatter = { ...@@ -26,7 +26,15 @@ export const GetFormatter = {
return { value: item.value, name: text, size }; return { value: item.value, name: text, size };
}); });
}, },
CHECKBOX: (val) => { CHECKBOX: (val, config) => {
const { isMultiple } = config || {};
if (isMultiple) {
return Array.isArray(val)
? val.map((item) => {
return item.value;
})
: [];
}
const obj = Array.isArray(val) && val.length > 0 ? val[0] : {}; const obj = Array.isArray(val) && val.length > 0 ? val[0] : {};
return obj.value; return obj.value;
}, },
...@@ -57,8 +65,7 @@ export const GetFormatter = { ...@@ -57,8 +65,7 @@ export const GetFormatter = {
return obj.value ? moment(obj.value) : void 0; return obj.value ? moment(obj.value) : void 0;
}, },
LINK: (val) => { LINK: (val) => {
const obj = Array.isArray(val) && val.length > 0 ? val[0] : {}; return Array.isArray(val) && val.length > 0 ? val : [];
return obj.value;
}, },
MULTIPLE_SEARCH: (val) => { MULTIPLE_SEARCH: (val) => {
if (!Array.isArray(val)) return void 0; if (!Array.isArray(val)) return void 0;
......
...@@ -28,9 +28,16 @@ export const SetFormatter = { ...@@ -28,9 +28,16 @@ export const SetFormatter = {
if (!val) return null; if (!val) return null;
return val.map((item) => ({ value: item.value, text: item.name + '(' + item.size + ')' })); return val.map((item) => ({ value: item.value, text: item.name + '(' + item.size + ')' }));
}, },
CHECKBOX: (event) => { CHECKBOX: (value) => {
const node = event.currentTarget || {}; if (!value) {
return [{ value: node.value, text: node.value }]; return emptyModel;
}
if (Array.isArray(value)) {
return value.map((item) => {
return { value: item, text: item };
});
}
return [{ value: value, text: value }];
}, },
SELECT: (val) => { SELECT: (val) => {
// 处理成[{}]结构 // 处理成[{}]结构
...@@ -77,9 +84,8 @@ export const SetFormatter = { ...@@ -77,9 +84,8 @@ export const SetFormatter = {
val = val.format ? val.format(setFormat) : val; val = val.format ? val.format(setFormat) : val;
return [{ value: val, text: val }]; return [{ value: val, text: val }];
}, },
LINK: (event) => { LINK: (val) => {
const node = event.currentTarget || {}; return Array.isArray(val) && val.length > 0 ? val : [emptyModel];
return [{ value: node.value, text: node.value }];
}, },
MULTIPLE_SEARCH: (val) => { MULTIPLE_SEARCH: (val) => {
if (!val || typeof val !== 'object') return val; if (!val || typeof val !== 'object') return val;
......
...@@ -17,7 +17,7 @@ export const config: any = { ...@@ -17,7 +17,7 @@ export const config: any = {
}, },
'2': { '2': {
name: '超链接', name: '超链接',
component: require('./edit/search').default, component: require('./edit/link').default,
getFormatter: GetFormatter.LINK, getFormatter: GetFormatter.LINK,
setFormatter: SetFormatter.LINK, setFormatter: SetFormatter.LINK,
detail: require('./detail/link').default, detail: require('./detail/link').default,
...@@ -45,6 +45,10 @@ export const config: any = { ...@@ -45,6 +45,10 @@ export const config: any = {
component: require('./edit/checkbox').default, // 暂未添加 component: require('./edit/checkbox').default, // 暂未添加
getFormatter: GetFormatter['CHECKBOX'], getFormatter: GetFormatter['CHECKBOX'],
setFormatter: SetFormatter['CHECKBOX'], setFormatter: SetFormatter['CHECKBOX'],
componentAttr: {
autoFocus: true,
emitTrigger: 'onBlur',
},
detail: require('./detail/checkbox').default, detail: require('./detail/checkbox').default,
}, },
'6': { '6': {
......
...@@ -3,13 +3,20 @@ import styles from './index.less'; ...@@ -3,13 +3,20 @@ import styles from './index.less';
import { CommonProps } from '../detailInterface'; import { CommonProps } from '../detailInterface';
export default function Detail(props: CommonProps) { export default function Detail(props: CommonProps) {
const { value, formatter } = props; const { value, componentAttr } = props;
const formatValue = formatter ? formatter(value) : value; if (!value) return null;
if (!formatValue) return null;
if (typeof formatValue === 'string') { const { isMultiple } = componentAttr || {};
return <div className={styles.text}>{formatValue}</div>; let text = '';
if (isMultiple) {
text = (Array.isArray(value)
? value.map((item) => {
return item.text;
})
: []
).join(',');
} else { } else {
return '数据错误'; text = Array.isArray(value) && value.length > 0 ? value[0].text : '';
} }
return <div className={styles.text}>{text}</div>;
} }
...@@ -3,13 +3,21 @@ import styles from './index.less'; ...@@ -3,13 +3,21 @@ import styles from './index.less';
import { LinkProps } from '../detailInterface'; import { LinkProps } from '../detailInterface';
export default function Detail(props: LinkProps) { export default function Detail(props: LinkProps) {
const { value, formatter } = props; const { value } = props;
const formatValue = formatter ? formatter(value) : value; if (!value) return null;
if (!formatValue) return null; if (Array.isArray(value)) {
return (
if (typeof formatValue === 'string') { <div className={styles.text}>
return <div className={styles.text}>{formatValue}</div>; {value.map((item, i) => {
} else { return (
return '数据错误'; <div key={i}>
<a target="_blank" href={item.value} style={{ textDecoration: 'underline' }}>
{item.text || item.value}
</a>
</div>
);
})}
</div>
);
} }
} }
import React from 'react'; import React, { useEffect, useRef, useState } from 'react';
import { Input } from 'antd'; import { Checkbox } from 'antd';
import styles from './styles.less'; import styles from './styles.less';
import { CommonProps } from '../editInterface'; import { ApolloCheckboxProps, ApolloCheckboxGroupProps } from '../editInterface';
export default function(props: CommonProps) { import { antiAssign } from '@/apollo-table/utils/utils';
const { value, placeholder,onChange } = props;
const selfProps = { value, placeholder,onChange }; const ApolloCheckbox = (props: ApolloCheckboxProps) => {
const { onChange, emitTrigger, onEmitChange, label } = props;
const selfProps = antiAssign(props, ['value', 'onChange', 'emitTrigger', 'onEmitChange', 'label']);
const [checked, setChecked] = useState(!!props.value);
const changeValue = (e) => {
setChecked(e.target.checked);
if (typeof onChange === 'function') {
onChange(e.target.checked);
}
if (!emitTrigger || emitTrigger === 'onChange') {
emitChange(e.target.checked);
}
};
const emitChange = (value) => {
if (typeof onEmitChange === 'function') {
onEmitChange(value);
}
};
const onBlur = (e) => {
emitChange(e.target.checked);
};
if (emitTrigger === 'onBlur') {
selfProps.onBlur = onBlur;
}
return ( return (
<div className={styles.container}> <div className={styles.container}>
<Input className={styles.input} {...selfProps} /> <Checkbox className={styles.checkbox} {...selfProps} checked={checked} onChange={changeValue}>
{label}
</Checkbox>
</div>
);
};
const ApolloCheckboxGroup = (props: ApolloCheckboxGroupProps) => {
const { 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 dom = useRef();
const changeValue = (value) => {
setValue(value);
dom.current = value;
if (typeof onChange === 'function') {
onChange(value);
}
if (!emitTrigger || emitTrigger === 'onChange') {
emitChange(value);
}
};
const emitChange = (value) => {
if (typeof onEmitChange === 'function') {
onEmitChange(value);
}
};
const onBlur = () => {
emitChange(dom.current);
};
useEffect(() => {
document.addEventListener('click', onBlur, false);
return () => {
document.removeEventListener('click', onBlur, false);
};
}, []);
const onClick = (e) => {
e.stopPropagation(); //阻止事件冒泡
e.nativeEvent.stopImmediatePropagation();
};
return (
<div className={styles.container} onClick={onClick}>
<Checkbox.Group className={styles.checkboxGroup} {...selfProps} value={value} onChange={changeValue} />
</div> </div>
); );
} };
const ApolloCheck = (props) => {
const { isMultiple } = props;
if (isMultiple) {
const groupProps = antiAssign(props, ['columnConfig', 'isMultiple']);
return ApolloCheckboxGroup(groupProps);
}
const selfProps = antiAssign(props, ['columnConfig', 'isMultiple', 'options']);
return ApolloCheckbox(selfProps);
};
export default ApolloCheck;
...@@ -2,16 +2,14 @@ ...@@ -2,16 +2,14 @@
position: relative; position: relative;
top: 0; top: 0;
left: 0; left: 0;
width: 100%;
.input { height: 100%;
padding-right: 100px; font-size: 0;
.checkbox {
width: 100%;
} }
.checkboxGroup {
.wordNumber { width: 100%;
position: absolute; padding: 5px;
color: #E1E1E1FF;
font-size: 12px;
right: 7px;
top: 7px;
} }
} }
...@@ -2,7 +2,12 @@ import { DatePickerProps } from 'antd/es/date-picker/interface'; ...@@ -2,7 +2,12 @@ import { DatePickerProps } from 'antd/es/date-picker/interface';
import { TextAreaProps, InputProps } from 'antd/es/input'; import { TextAreaProps, InputProps } from 'antd/es/input';
import { InputNumberProps } from 'antd/es/input-number'; import { InputNumberProps } from 'antd/es/input-number';
import { SelectProps } from 'antd/es/select'; import { SelectProps } from 'antd/es/select';
import { CheckboxProps, CheckboxGroupProps } from 'antd/es/checkbox';
export interface LinkData {
text?: string;
value: string;
}
export interface CommonProps { export interface CommonProps {
onEmitChange?: Function; onEmitChange?: Function;
emitTrigger?: string; emitTrigger?: string;
...@@ -10,13 +15,10 @@ export interface CommonProps { ...@@ -10,13 +15,10 @@ export interface CommonProps {
export interface ApolloInputProps extends InputProps, CommonProps { export interface ApolloInputProps extends InputProps, CommonProps {
value: string | undefined; value: string | undefined;
} }
export interface LinkProps extends CommonProps { export interface ApolloLinkProps extends CommonProps {
value: any[]; value: LinkData[];
maxLength: number; onChange: Function;
} columnConfig: any;
export interface LinkState {
prevProps: LinkProps;
value: any[];
} }
export interface ApolloTextAreaProps extends TextAreaProps, CommonProps { export interface ApolloTextAreaProps extends TextAreaProps, CommonProps {
value: string | undefined; value: string | undefined;
...@@ -45,3 +47,7 @@ export interface ApolloNumberProps extends InputNumberProps, CommonProps { ...@@ -45,3 +47,7 @@ export interface ApolloNumberProps extends InputNumberProps, CommonProps {
floatRange?: number; floatRange?: number;
} }
export interface ApolloDateProps extends DatePickerProps, CommonProps {} export interface ApolloDateProps extends DatePickerProps, CommonProps {}
export interface ApolloCheckboxProps extends CheckboxProps, CommonProps {
label: string;
}
export interface ApolloCheckboxGroupProps extends CheckboxGroupProps, CommonProps {}
...@@ -6,7 +6,7 @@ import { ApolloInputProps } from '../editInterface'; ...@@ -6,7 +6,7 @@ import { ApolloInputProps } from '../editInterface';
const ApolloInput = (props: ApolloInputProps) => { const ApolloInput = (props: ApolloInputProps) => {
const { maxLength, onChange, emitTrigger, onEmitChange, style } = props; const { maxLength, onChange, emitTrigger, onEmitChange, style } = props;
const selfProps = antiAssign(props, ['value', 'onChange', 'emitTrigger', 'onEmitChange', 'style']); const selfProps = antiAssign(props, ['columnConfig', 'value', 'onChange', 'emitTrigger', 'onEmitChange', 'style']);
const [value, setValue] = useState(props.value); const [value, setValue] = useState(props.value);
useEffect(() => { useEffect(() => {
setValue(props.value); setValue(props.value);
......
import React from 'react'; import React, { useEffect, useRef, useState } from 'react';
import { Input, Button } from 'antd'; import { Input } from 'antd';
import IconFont from '../../extra/iconFont'; import IconFont from '../../extra/iconFont';
import styles from './styles.less'; import styles from './styles.less';
import { LinkProps, LinkState } from '../editInterface'; import { ApolloLinkProps } from '../editInterface';
class Link extends React.Component<LinkProps, LinkState> { const Link = (props: ApolloLinkProps) => {
static getDerivedStateFromProps(nextProps: LinkProps, prevState: LinkState) { const { onEmitChange } = props;
const { prevProps } = prevState; const [value, setValue] = useState(props.value);
let nextState: LinkState = { const dom = useRef(value);
...prevState, const changeText = (i, e) => {
prevProps: nextProps,
};
if (JSON.stringify(prevProps.value) !== JSON.stringify(nextProps.value)) {
nextState.value = nextProps.value;
}
return nextState;
}
constructor(props: LinkProps) {
super(props);
const { value } = props;
this.state = {
prevProps: props,
value,
};
}
addLink = () => {
const { value } = this.state;
const newValue = (value && value.slice()) || []; const newValue = (value && value.slice()) || [];
newValue.push({}); newValue[i].text = e.target.value;
this.setState({ setValue(newValue);
value: newValue, dom.current = newValue;
});
}; };
const changeValue = (i, e) => {
changeLinkValue = (index, e) => { const newValue = (value && value.slice()) || [];
const { value } = this.state; newValue[i].value = e.target.value;
const temp = value[index]; setValue(newValue);
temp.value = e.target.value; dom.current = newValue;
this.setState(
{
value,
},
this.changeLink,
);
}; };
const addLink = () => {
changeLinkText = (index, e) => { const newValue = (value && value.slice()) || [];
const { value } = this.state; newValue.push({ text: '', value: '' });
const temp = value[index]; setValue(newValue);
temp.text = e.target.value; dom.current = newValue;
this.setState(
{
value,
},
this.changeLink,
);
}; };
const delLink = (i) => {
changeLink = () => { let newValue = (value && value.slice()) || [];
const { onChange } = this.props; newValue.splice(i, 1);
const { value } = this.state; setValue(newValue);
if (typeof onChange === 'function') { dom.current = newValue;
onChange(value); };
const emitChange = (value) => {
if (typeof onEmitChange === 'function') {
onEmitChange(value);
} }
}; };
const onBlur = () => {
render() { emitChange(dom.current);
const { value } = this.state; };
return ( useEffect(() => {
<div className={styles.container}> document.addEventListener('click', onBlur, false);
{value && return () => {
value.map((link, i) => { document.removeEventListener('click', onBlur, false);
return ( };
<div key={i}> }, []);
<div> const onClick = (e) => {
<span>链接地址:</span> e.stopPropagation(); //阻止事件冒泡
<Input e.nativeEvent.stopImmediatePropagation();
className={styles.input} };
value={link.value} return (
onChange={this.changeLinkValue.bind(this, i)} <div className={styles.container} onClick={onClick}>
/> {value &&
</div> value.map((link, i) => {
<div> return (
<span>显示文字:</span> <div key={i} className={styles.content}>
<Input <div className={styles.row}>
className={styles.input} <span className={styles.label}>显示文字:</span>
value={link.text} <Input className={styles.input} value={link.text} onChange={changeText.bind(null, i)} />
onChange={this.changeLinkText.bind(this, i)} </div>
/> <div className={styles.row}>
<span className={styles.label}>链接地址:</span>
<Input
className={styles.input}
value={link.value}
onChange={changeValue.bind(null, i)}
/>
<div className={styles.delContainer} onClick={delLink.bind(null, i)}>
<IconFont className={styles.del} type="iconshanchu" />
</div> </div>
</div> </div>
); </div>
})} );
<Button type="primary" className={styles.btn} onClick={this.addLink}> })}
<IconFont className={styles.icon} type="iconxinzeng" /> <div className={styles.btn} onClick={addLink}>
<span className={styles.text}>新增</span> <IconFont className={styles.icon} type="iconxinzeng" />
</Button>
</div> </div>
); </div>
} );
} };
export default Link; export default Link;
@import '~@/common';
.container { .container {
position: relative; position: relative;
top: 0; top: 0;
left: 0; left: 0;
width: 100%;
.input { background: white;
padding-right: 100px; padding: @paddingSmX;
border: 1px solid @primaryColor;
.content {
border-bottom: 1px solid @borderColor;
.row {
display: flex;
align-items: center;
padding: @paddingSmX 0;
.label {
width: 60px;
font-size: @textFontSm;
}
.input {
flex: 1;
}
.delContainer {
width: 20px;
text-align: center;
cursor: pointer;
.del {
font-size: @textFontSm;
}
}
}
} }
.btn {
.wordNumber { .icon{
position: absolute; font-size: @textFontSm;
color: #E1E1E1FF; cursor: pointer;
font-size: 12px; }
right: 7px;
top: 7px;
} }
} }
...@@ -6,7 +6,7 @@ import { antiAssign } from '@/apollo-table/utils/utils'; ...@@ -6,7 +6,7 @@ import { antiAssign } from '@/apollo-table/utils/utils';
const ApolloNumber = (props: ApolloNumberProps) => { const ApolloNumber = (props: ApolloNumberProps) => {
const { onChange, emitTrigger, onEmitChange } = props; const { onChange, emitTrigger, onEmitChange } = props;
const selfProps = antiAssign(props, ['value', 'onChange', 'emitTrigger', 'onEmitChange']); const selfProps = antiAssign(props, ['columnConfig', 'value', 'onChange', 'emitTrigger', 'onEmitChange']);
const [value, setValue] = useState(props.value); const [value, setValue] = useState(props.value);
useEffect(() => { useEffect(() => {
setValue(props.value); setValue(props.value);
......
...@@ -6,7 +6,7 @@ import styles from './styles.less'; ...@@ -6,7 +6,7 @@ import styles from './styles.less';
const ApolloSelect = (props: ApolloSelectProps) => { const ApolloSelect = (props: ApolloSelectProps) => {
const { options = [], onChange, emitTrigger, onEmitChange, isMultiple } = props; const { options = [], onChange, emitTrigger, onEmitChange, isMultiple } = props;
const selfProps = antiAssign(props, ['value', 'onChange', 'emitTrigger', 'onEmitChange', 'isMultiple', 'options']); const selfProps = antiAssign(props, ['columnConfig', 'value', 'onChange', 'emitTrigger', 'onEmitChange', 'isMultiple', 'options']);
const [value, setValue] = useState(props.value); const [value, setValue] = useState(props.value);
const [option, setOption] = useState(undefined); const [option, setOption] = useState(undefined);
useEffect(() => { useEffect(() => {
......
...@@ -6,7 +6,7 @@ import { ApolloTextAreaProps } from '../editInterface'; ...@@ -6,7 +6,7 @@ import { ApolloTextAreaProps } from '../editInterface';
const ApolloTextArea = (props: ApolloTextAreaProps) => { const ApolloTextArea = (props: ApolloTextAreaProps) => {
const { maxLength, onChange, emitTrigger, onEmitChange } = props; const { maxLength, onChange, emitTrigger, onEmitChange } = props;
const selfProps = antiAssign(props, ['value', 'onChange', 'emitTrigger', 'onEmitChange']); const selfProps = antiAssign(props, ['columnConfig', 'value', 'onChange', 'emitTrigger', 'onEmitChange']);
const [value, setValue] = useState(props.value); const [value, setValue] = useState(props.value);
useEffect(() => { useEffect(() => {
setValue(props.value); setValue(props.value);
......
...@@ -31,7 +31,8 @@ const Demo1 = (props) => { ...@@ -31,7 +31,8 @@ const Demo1 = (props) => {
const getColumnsList = async () => { const getColumnsList = async () => {
const res = await getColumnConfig({ tableId }); const res = await getColumnConfig({ tableId });
if (res && res.success && res.data) { if (res && res.success && res.data) {
const arr = Array.isArray(res.data) ? res.data : []; let arr = Array.isArray(res.data) ? res.data : [];
arr[0].columnType=2;
setColumns(formatColumns(arr)); setColumns(formatColumns(arr));
} }
}; };
...@@ -104,12 +105,7 @@ const Demo1 = (props) => { ...@@ -104,12 +105,7 @@ const Demo1 = (props) => {
const value = moment(cellData[0] && cellData[0].value); const value = moment(cellData[0] && cellData[0].value);
return ( return (
<div className={s.xxx}> <div className={s.xxx}>
<DatePicker <Input/>
value={value}
getPopupContainer={(trigger) => {
return trigger.parentElement;
}}
/>
</div> </div>
); );
} }
...@@ -132,7 +128,7 @@ const Demo1 = (props) => { ...@@ -132,7 +128,7 @@ const Demo1 = (props) => {
dataSource={dataSource} dataSource={dataSource}
onScroll={debounceScroll} onScroll={debounceScroll}
emitChangeCell={emitChangeCell} emitChangeCell={emitChangeCell}
bordered={true} bordered={false}
rowClassName={s.row} 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