Skip to content

S
submodule
Commit 5a27c7e9 authored by zhangwenshuai's avatar zhangwenshuai
Browse files
Options

update edit props

parent 38f5407a
Show whitespace changes
Inline Side-by-side
Showing with 209 additions and 70 deletions
components/apolloTable/component/base/edit/cascader/index.tsx
View file @ 5a27c7e9
......@@ -17,7 +17,18 @@ export const ApolloCascader = (props: ApolloCascaderProps) => {
onChange,
request,
} = props;
const selfProps = antiAssign(props, ['columnConfig', 'onChange', 'requestCode', 'request', 'fieldNames']);
const selfProps = antiAssign(props, [
'columnConfig',
'onChange',
'requestCode',
'request',
'fieldNames',
'tableId',
'cellRenderProps',
'maxPopHeight',
'getCalendarContainer',
'origin',
]);
const [options, setOptions] = React.useState([]);
React.useEffect(() => {
const fetchData = async () => {
......
components/apolloTable/component/base/edit/date/index.tsx
View file @ 5a27c7e9
......@@ -6,7 +6,15 @@ import styles from './styles.less';
export const ApolloDate = (props: any) => {
const { origin, onChange, showTime } = props;
const selfProps = antiAssign(props, ['onChange', 'columnConfig']);
const selfProps = antiAssign(props, [
'onChange',
'columnConfig',
'tableId',
'cellRenderProps',
'maxPopHeight',
'getPopupContainer',
'origin',
]);
const isOpen = useRef();
const changeValue = (date, dateString) => {
if (typeof onChange === 'function') {
......@@ -25,7 +33,7 @@ export const ApolloDate = (props: any) => {
onBlurFn(props);
}
};
return (origin === 'editForm' ?
return origin === 'editForm' ? (
<DatePicker
className={styles.date}
// value={inputVal}
......@@ -34,7 +42,8 @@ export const ApolloDate = (props: any) => {
{...selfProps}
onChange={changeValue}
onOpenChange={showTime ? timeOnBlurFn : dateOnBlurFn}
/> :
/>
) : (
<DatePicker
className={styles.date}
dropdownClassName={styles.dropdownClassName}
......
components/apolloTable/component/base/edit/dateRange/index.tsx
View file @ 5a27c7e9
......@@ -7,7 +7,17 @@ import styles from './styles.less';
const { RangePicker } = DatePicker;
export const ApolloDateRange = (props: any) => {
const { onChange, placeholder, showTime, beginDatePlaceholder, endDatePlaceholder, origin } = props;
const selfProps = antiAssign(props, ['onChange', 'columnConfig']);
const selfProps = antiAssign(props, [
'onChange',
'columnConfig',
'beginDatePlaceholder',
'endDatePlaceholder',
'tableId',
'cellRenderProps',
'maxPopHeight',
'getPopupContainer',
'origin',
]);
const isOpen = useRef();
const changeValue = (date, dateString) => {
if (typeof onChange === 'function') {
......@@ -26,7 +36,7 @@ export const ApolloDateRange = (props: any) => {
onBlurFn(props);
}
};
return (origin === 'editForm' ?
return origin === 'editForm' ? (
<RangePicker
className={styles.date}
dropdownClassName={styles.dropdownClassName}
......@@ -35,7 +45,8 @@ export const ApolloDateRange = (props: any) => {
placeholder={[beginDatePlaceholder || placeholder, endDatePlaceholder || placeholder]}
onChange={changeValue}
onOpenChange={showTime ? timeOnBlurFn : dateOnBlurFn}
/> :
/>
) : (
<RangePicker
className={styles.date}
dropdownClassName={styles.dropdownClassName}
......
components/apolloTable/component/base/edit/input/index.tsx
View file @ 5a27c7e9
......@@ -8,8 +8,19 @@ import { Consumer } from '../../../context';
export const ApolloInput = (props: ApolloInputProps) => {
const { maxLength, onChange, value, style, origin } = props;
const selfProps = antiAssign(props, ['columnConfig', 'onChange', 'style', 'onEmitChange']);
const [inputVal, setInputVal] = useState(value)
const selfProps = antiAssign(props, [
'columnConfig',
'onChange',
'style',
'onEmitChange',
'rowData',
'tableId',
'cellRenderProps',
'maxPopHeight',
'getPopupContainer',
'getCalendarContainer',
]);
const [inputVal, setInputVal] = useState(value);
useEffect(() => {
setInputVal(value);
}, [value]);
......@@ -42,8 +53,8 @@ export const ApolloInput = (props: ApolloInputProps) => {
{({ locale }) => {
return (
<div className={styles.container}>
{
origin === 'editForm' ? <Input
{origin === 'editForm' ? (
<Input
className={styles.input}
style={newStyle}
{...selfProps}
......@@ -51,9 +62,11 @@ export const ApolloInput = (props: ApolloInputProps) => {
onBlur={inputOnBlurFn}
onChange={(e) => {
changeValue(e.target.value);
setInputVal(e.target.value)
setInputVal(e.target.value);
}}
/> : <Input
/>
) : (
<Input
className={styles.input}
style={newStyle}
{...selfProps}
......@@ -61,12 +74,14 @@ export const ApolloInput = (props: ApolloInputProps) => {
changeValue(e.target.value);
}}
/>
}
)}
{!!maxLength && (
<span className={styles.wordNumber} style={wordNumStyle}>{`${locale.alreadyInput} ${
<span className={styles.wordNumber} style={wordNumStyle}>
{`${locale.alreadyInput} ${
(value || '').length
}/${maxLength}`}</span>
}/${maxLength}`}
</span>
)}
</div>
);
......
components/apolloTable/component/base/edit/number/index.tsx
View file @ 5a27c7e9
......@@ -7,8 +7,17 @@ import { antiAssign } from '../../../../utils/utils';
export const ApolloNumber = (props: ApolloNumberProps) => {
const { onChange, origin, value }: any = props;
const selfProps = antiAssign(props, ['columnConfig', 'onChange']);
const [inputVal, setInputVal] = useState(value)
const selfProps = antiAssign(props, [
'columnConfig',
'onChange',
'tableId',
'cellRenderProps',
'maxPopHeight',
'getCalendarContainer',
'getCalendarContainer',
'origin',
]);
const [inputVal, setInputVal] = useState(value);
useEffect(() => {
setInputVal(value);
}, [value]);
......@@ -28,7 +37,16 @@ export const ApolloNumber = (props: ApolloNumberProps) => {
onBlurFn(props);
}
};
return origin === 'editForm' ?
<InputNumber value={inputVal} onBlur={inputOnBlurFn} className={styles.number} style={style} {...o} onChange={changeValue} />
: <InputNumber className={styles.number} style={style} {...o} onChange={changeValue} />;
return origin === 'editForm' ? (
<InputNumber
value={inputVal}
onBlur={inputOnBlurFn}
className={styles.number}
style={style}
{...o}
onChange={changeValue}
/>
) : (
<InputNumber className={styles.number} style={style} {...o} onChange={changeValue} />
);
};
components/apolloTable/component/base/edit/rate/index.tsx
View file @ 5a27c7e9
......@@ -6,7 +6,15 @@ import { ApolloRateProps } from '../editInterface';
export const ApolloRate = (props: ApolloRateProps) => {
const { onChange } = props;
const selfProps = antiAssign(props, ['columnConfig', 'onChange']);
const selfProps = antiAssign(props, [
'columnConfig',
'onChange',
'tableId',
'cellRenderProps',
'maxPopHeight',
'getCalendarContainer',
'getCalendarContainer',
]);
const changeValue = (value) => {
if (typeof onChange === 'function') {
......
components/apolloTable/component/base/edit/search/index.tsx
View file @ 5a27c7e9
......@@ -8,7 +8,18 @@ import s from './index.less';
export const ApolloSearch = (props: ApolloSearchProps) => {
const { onChange, maxCount, isMultiple, request } = props;
const selfProps = antiAssign(props, ['columnConfig', 'onChange', 'isMultiple', 'options', 'request', 'maxCount']);
const selfProps = antiAssign(props, [
'columnConfig',
'onChange',
'isMultiple',
'options',
'request',
'maxCount',
'request',
'tableId',
'cellRenderProps',
'getCalendarContainer',
]);
const isOpen: any = useRef();
if (isMultiple) {
selfProps.mode = 'multiple';
......
components/apolloTable/component/base/edit/select/index.tsx
View file @ 5a27c7e9
......@@ -7,7 +7,17 @@ import styles from './styles.less';
export const ApolloSelect = (props: ApolloSelectProps) => {
const { options = [], onChange, isMultiple, maxPopHeight } = props;
const selfProps = antiAssign(props, ['columnConfig', 'onChange', 'isMultiple', 'options', 'maxPopHeight']);
const selfProps = antiAssign(props, [
'columnConfig',
'onChange',
'isMultiple',
'options',
'maxPopHeight',
'request',
'tableId',
'cellRenderProps',
'getCalendarContainer',
]);
const isOpen: any = useRef();
if (isMultiple) {
......
components/apolloTable/component/base/edit/text-link/index.tsx
View file @ 5a27c7e9
......@@ -9,7 +9,22 @@ import { Consumer } from '../../../context';
export const ApolloTextLink = (props: ApolloTextAreaProps) => {
const { maxLength, onChange, value, onEmitChange, columnConfig, origin } = props;
const { columnChsName } = columnConfig;
const selfProps = antiAssign(props, ['columnConfig', 'onChange', 'value', 'cutLength', 'getDetail', 'rowData', 'onEmitChange']);
const selfProps = antiAssign(props, [
'columnConfig',
'onChange',
'value',
'cutLength',
'getDetail',
'rowData',
'onEmitChange',
'isMultiple',
'origin',
'tableId',
'cellRenderProps',
'maxPopHeight',
'getPopupContainer',
'getCalendarContainer',
]);
const [curValue, setCurValue] = useState(value);
const [visible, setVisible] = useState(false);
useEffect(() => {
......@@ -18,7 +33,7 @@ export const ApolloTextLink = (props: ApolloTextAreaProps) => {
getMore();
}
}, [value]);
const [inputVal, setInputVal] = useState(value)
const [inputVal, setInputVal] = useState(value);
useEffect(() => {
setInputVal(value);
}, [value]);
......@@ -49,14 +64,14 @@ export const ApolloTextLink = (props: ApolloTextAreaProps) => {
onEmitChange(value);
}
setVisible(false);
}
};
const confirmChange = () => {
if (typeof onEmitChange === 'function') {
onEmitChange(curValue);
}
setVisible(false);
}
};
const getMore = async () => {
setVisible(true);
......@@ -75,7 +90,7 @@ export const ApolloTextLink = (props: ApolloTextAreaProps) => {
onBlur={inputOnBlurFn}
onChange={(e) => {
changeValue(e);
setInputVal(e.target.value)
setInputVal(e.target.value);
}}
/>
{!!maxLength && (
......@@ -87,7 +102,7 @@ export const ApolloTextLink = (props: ApolloTextAreaProps) => {
);
}}
</Consumer>
)
);
}
return (
......@@ -96,9 +111,9 @@ export const ApolloTextLink = (props: ApolloTextAreaProps) => {
return (
<div className={styles.container}>
<Input
{...selfProps}
className={styles.cellInput}
style={selfProps.style}
value={value}
onChange={changeValue}
/>
<Modal visible={visible} title={columnChsName} onCancel={hide} onOk={confirmChange}>
<Input.TextArea
......
components/apolloTable/component/base/edit/text-link/styles.less
View file @ 5a27c7e9
......@@ -12,6 +12,9 @@
color: #e1e1e1;
font-size: 12px;
}
.cellInput{
user-select: none;
}
}
.input {
padding-bottom: 18px;
......
components/apolloTable/component/base/edit/text-select/index.tsx
View file @ 5a27c7e9
......@@ -7,7 +7,14 @@ import s from './index.less';
export const ApolloInputSearch = (props: ApolloInputSearchProps) => {
const { onChange, request } = props;
const selfProps = antiAssign(props, ['columnConfig', 'onChange', 'request']);
const selfProps = antiAssign(props, [
'columnConfig',
'onChange',
'request',
'tableId',
'cellRenderProps',
'getCalendarContainer',
]);
const isOpen = useRef();
const changeValue = (value: any) => {
if (typeof onChange === 'function') {
......
components/apolloTable/component/base/edit/textarea/index.tsx
View file @ 5a27c7e9
......@@ -9,7 +9,20 @@ import { Consumer } from '../../../context';
export const ApolloTextArea = (props: ApolloTextAreaProps) => {
const { maxLength, onChange, value, getDetail, rowData, onEmitChange, columnConfig, origin } = props;
const { columnChsName } = columnConfig;
const selfProps = antiAssign(props, ['columnConfig', 'onChange', 'value', 'cutLength', 'getDetail', 'rowData', 'onEmitChange']);
const selfProps = antiAssign(props, [
'columnConfig',
'onChange',
'value',
'cutLength',
'getDetail',
'onEmitChange',
'rowData',
'tableId',
'cellRenderProps',
'maxPopHeight',
'getPopupContainer',
'getCalendarContainer',
]);
const [curValue, setCurValue] = useState(value);
const [visible, setVisible] = useState(false);
useEffect(() => {
......@@ -18,12 +31,8 @@ export const ApolloTextArea = (props: ApolloTextAreaProps) => {
getMore();
}
}, [value]);
// useEffect(() => {
// if (value && value.length === cutLength) {
// getMore();
// }
// }, []);
const [inputVal, setInputVal] = useState(value)
const [inputVal, setInputVal] = useState(value);
useEffect(() => {
setInputVal(value);
}, [value]);
......@@ -48,14 +57,14 @@ export const ApolloTextArea = (props: ApolloTextAreaProps) => {
onEmitChange(value);
}
setVisible(false);
}
};
const confirmChange = () => {
if (typeof onEmitChange === 'function') {
onEmitChange(curValue);
}
setVisible(false);
}
};
const getMore = async () => {
if (getDetail && rowData) {
......@@ -79,8 +88,8 @@ export const ApolloTextArea = (props: ApolloTextAreaProps) => {
value={inputVal}
onBlur={inputOnBlurFn}
onChange={(e) => {
changeValue(e)
setInputVal(e.target.value)
changeValue(e);
setInputVal(e.target.value);
}}
/>
......@@ -93,7 +102,7 @@ export const ApolloTextArea = (props: ApolloTextAreaProps) => {
);
}}
</Consumer>
)
);
}
return (
......@@ -101,11 +110,7 @@ export const ApolloTextArea = (props: ApolloTextAreaProps) => {
{({ locale }) => {
return (
<div className={styles.container}>
<Input
{...selfProps}
value={value}
onChange={changeValue}
/>
<Input className={styles.cellInput} style={selfProps.style} value={value} />
<Modal visible={visible} title={columnChsName} onCancel={hide} onOk={confirmChange}>
<Input.TextArea
className={styles.input}
......
components/apolloTable/component/base/edit/textarea/styles.less
View file @ 5a27c7e9
......@@ -12,6 +12,9 @@
color: #e1e1e1;
font-size: 12px;
}
.cellInput{
user-select: none;
}
}
.input {
padding-bottom: 18px;
......
components/apolloTable/component/base/edit/tree-select/index.tsx
View file @ 5a27c7e9
......@@ -6,7 +6,15 @@ import s from './index.less';
export const ApolloTreeSelect = (props: ApolloTreeSelectProps) => {
const { onChange, isMultiple } = props;
const selfProps = antiAssign(props, ['columnConfig', 'onChange', 'isMultiple']);
const selfProps = antiAssign(props, [
'columnConfig',
'onChange',
'isMultiple',
'request',
'tableId',
'cellRenderProps',
'getCalendarContainer',
]);
const changeValue = (value) => {
if (typeof onChange === 'function') {
......
components/apolloTable/component/base/edit/upload/index.tsx
View file @ 5a27c7e9
......@@ -6,11 +6,21 @@ import { antiAssign } from '../../../../utils/utils';
import s from './index.less';
import { onBlurFn } from '../onBlurFn';
import Upload from '../../extra/upload';
import addIcon from '../../../../assets/addIcon.png';
export const ApolloUpload = (props: ApolloUploadProps) => {
const { isMultiple, onEmitChange, onChange, disabled, origin } = props;
const selfProps = antiAssign(props, ['onChange', 'value']);
const selfProps = antiAssign(props, [
'onChange',
'value',
'onEmitChange',
'tableId',
'cellRenderProps',
'maxPopHeight',
'getPopupContainer',
'getCalendarContainer',
'isMultiple',
'origin',
]);
if (isMultiple) {
selfProps.multiple = true;
} else {
......@@ -22,7 +32,7 @@ export const ApolloUpload = (props: ApolloUploadProps) => {
const changeValue = (value) => {
setValue(value);
setEmptyVal([]);
onBlurFn({ ...props, value })
onBlurFn({ ...props, value });
};
const [visible, setVisible] = useState(false);
const refHelper = useRef(visible);
......@@ -58,7 +68,6 @@ export const ApolloUpload = (props: ApolloUploadProps) => {
onChange(value);
}
toggleUploadDialog(false);
};
const onCancel = () => {
if (typeof onEmitChange === 'function') {
......@@ -83,10 +92,7 @@ export const ApolloUpload = (props: ApolloUploadProps) => {
return (
<div key={i} className={s.picContainer}>
<Tooltip placement="bottom" title={item.name}>
<img
className={classNames(s.pic, s.editForm)}
src={item.thumbUrl}
/>
<img className={classNames(s.pic, s.editForm)} src={item.thumbUrl} />
</Tooltip>
</div>
);
......@@ -106,7 +112,6 @@ export const ApolloUpload = (props: ApolloUploadProps) => {
return (
<div key={i} className={s.picContainer}>
<Tooltip placement="bottom" title={item.name}>
<img
className={origin === 'editForm' ? classNames(s.pic, s.editForm) : s.pic}
src={item.thumbUrl}
......
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