Skip to content

S
submodule
Commit 5019d86a authored by zhangwenshuai's avatar zhangwenshuai
Browse files
Options

update autoFocus and textarea

parent fd76d883
Hide whitespace changes
Inline Side-by-side
Showing with 287 additions and 233 deletions
components/apolloTable/component/Cell.tsx
View file @ 5019d86a
......@@ -371,12 +371,14 @@ const Cell = (props: CellProps) => {
emitChangeCellData(value, optionValue, reset);
}}
tableId={tableId}
rowId={record.id}
cellRenderProps={cellRenderProps}
style={{
minHeight: cellStyle.height,
borderRadius: 0,
}}
maxPopHeight={maxPopHeight}
autoFocus={true}
/>
</div>
);
......
components/apolloTable/component/base/edit/editInterface.tsx
View file @ 5019d86a
......@@ -14,8 +14,10 @@ export interface CommonProps {
onEmitChange?: Function;
isMobile?: boolean;
origin?: string;
tableId?: string|number;
tableId?: number;
rowId?: number;
onBlurFn?: Function;
columnConfig?: any;
}
export interface ApolloInputProps extends InputProps, CommonProps {
value: string | undefined;
......@@ -23,10 +25,11 @@ export interface ApolloInputProps extends InputProps, CommonProps {
export interface ApolloLinkProps extends CommonProps {
value: LinkData[];
onChange: Function;
columnConfig: any;
}
export interface ApolloTextAreaProps extends TextAreaProps, CommonProps {
value: string | undefined;
getDetail?: Function;
maxPopHeight?: number;
}
export interface ApolloSearchProps extends SelectProps<any>, CommonProps {
type: string;
......@@ -41,7 +44,7 @@ export interface ApolloInputSearchProps extends SelectProps<any>, CommonProps {
export interface ApolloSelectProps extends SelectProps<any>, CommonProps {
isMultiple?: boolean;
options?: any[];
maxPopHeight?:boolean;
maxPopHeight?: number;
}
export interface ApolloNumberProps extends InputNumberProps, CommonProps {}
export interface ApolloCheckboxProps extends CheckboxProps, CommonProps {
......
components/apolloTable/component/base/edit/onBlurFn.tsx → components/apolloTable/component/base/edit/onBlurFn.ts
View file @ 5019d86a
......@@ -3,18 +3,20 @@ import { config } from '../config';
export const onBlurFn = (props: any) => {
const { columnConfig, rowId, onBlurFn, value } = props;
const { type } = columnConfig
const extraData: any[] = []
const { type } = columnConfig;
const extraData: any[] = [];
if (typeof onBlurFn === 'function') {
const newVal = setFormat(config[type], columnConfig, value)
const newVal = setFormat(config[type], columnConfig, value);
extraData.push({
columnCode: columnConfig.columnName,
cellValueList: newVal,
});
onBlurFn({
rowId,
value: extraData,
}, newVal);
onBlurFn(
{
rowId,
value: extraData,
},
newVal,
);
}
};
components/apolloTable/component/base/edit/text-link/index.tsx
View file @ 5019d86a
import React, { useEffect, useState } from 'react';
import { Input, Modal } from 'antd';
import styles from './styles.less';
import { onBlurFn } from '../onBlurFn';
import { antiAssign } from '../../../../utils/utils';
import { ApolloTextAreaProps } from '../editInterface';
import { Consumer } from '../../../context';
import { ApolloTextArea } from '../textarea';
export const ApolloTextLink = (props: ApolloTextAreaProps) => {
const { maxLength, onChange, value, onEmitChange, columnConfig, origin, tableId } = props;
const { columnChsName } = columnConfig;
const selfProps = antiAssign(props, [
'columnConfig',
'onChange',
'value',
'cutLength',
'getDetail',
'rowData',
'onEmitChange',
'isMultiple',
'origin',
'tableId',
'cellRenderProps',
'maxPopHeight',
'getPopupContainer',
'getCalendarContainer',
'disableOptions',
'rowId',
'onBlurFn',
'getInstanceDetail',
]);
selfProps.disabled = !!props.disabled;
const [curValue, setCurValue] = useState(value);
const [visible, setVisible] = useState(false);
useEffect(() => {
if (origin !== 'editForm') {
getMore();
}
}, []);
const [inputVal, setInputVal] = useState(value);
useEffect(() => {
setInputVal(value);
}, [value]);
// useEffect(() => {
// if (value && value.length === cutLength) {
// getMore();
// }
// }, []);
const inputOnBlurFn = () => {
if (typeof onBlurFn === 'function') {
onBlurFn(props);
}
};
const changeValue = (e) => {
if (typeof onChange === 'function') {
onChange(e.target.value);
}
};
export const ApolloTextLink = ApolloTextArea;
const changeCurValue = (e) => {
if (typeof onChange === 'function') {
setCurValue(e.target.value);
}
};
const clearEdit = () => {
// 清除所有dom的编辑状态
const doms = document.querySelectorAll(`.cellUnit.table_${tableId}`);
if (doms) {
doms.forEach((item) => {
item.setAttribute('data-editing-cell', '0');
});
}
};
const hide = () => {
if (typeof onEmitChange === 'function') {
onEmitChange(value);
}
clearEdit();
setVisible(false);
};
const confirmChange = () => {
if (typeof onEmitChange === 'function') {
onEmitChange(curValue);
}
clearEdit();
setVisible(false);
};
const getMore = async () => {
setVisible(true);
};
if (origin === 'editForm') {
return (
<Consumer>
{({ locale }) => {
return (
<div className={styles.container}>
<Input.TextArea
className={styles.inputForm}
{...selfProps}
value={inputVal}
onBlur={inputOnBlurFn}
onChange={(e) => {
changeValue(e);
setInputVal(e.target.value);
}}
/>
{!!maxLength && (
<span className={styles.wordNumberForm}>
{`${locale.alreadyInput} ${(value || '').length}/${maxLength}`}
</span>
)}
</div>
);
}}
</Consumer>
);
}
return (
<Consumer>
{({ locale }) => {
return (
<div className={styles.container}>
<Input
className={styles.cellInput}
style={selfProps.style}
value={value}
/>
<Modal visible={visible} title={columnChsName} onCancel={hide} onOk={confirmChange}>
<Input.TextArea
className={styles.input}
{...selfProps}
value={curValue}
onChange={changeCurValue}
/>
{!!maxLength && (
<span className={styles.wordNumber}>
{`${locale.alreadyInput} ${(curValue || '').length}/${maxLength}`}
</span>
)}
</Modal>
</div>
);
}}
</Consumer>
);
};
// import React, { useEffect, useState } from 'react';
// import { Input, Modal } from 'antd';
// import styles from './styles.less';
// import { onBlurFn } from '../onBlurFn';
// import { antiAssign } from '../../../../utils/utils';
// import { ApolloTextAreaProps } from '../editInterface';
// import { Consumer } from '../../../context';
//
// export const ApolloTextLink = (props: ApolloTextAreaProps) => {
// const { maxLength, onChange, value, onEmitChange, columnConfig, origin, tableId } = props;
// const { columnChsName } = columnConfig;
// const selfProps = antiAssign(props, [
// 'columnConfig',
// 'onChange',
// 'value',
// 'cutLength',
// 'getDetail',
// 'rowData',
// 'onEmitChange',
// 'isMultiple',
// 'origin',
// 'tableId',
// 'cellRenderProps',
// 'maxPopHeight',
// 'getPopupContainer',
// 'getCalendarContainer',
// 'disableOptions',
// 'rowId',
// 'onBlurFn',
// 'getInstanceDetail',
// ]);
// selfProps.disabled = !!props.disabled;
// const [curValue, setCurValue] = useState(value);
// const [visible, setVisible] = useState(false);
// useEffect(() => {
// if (origin !== 'editForm') {
// getMore();
// }
// }, []);
// const [inputVal, setInputVal] = useState(value);
// useEffect(() => {
// setInputVal(value);
// }, [value]);
// // useEffect(() => {
// // if (value && value.length === cutLength) {
// // getMore();
// // }
// // }, []);
// const inputOnBlurFn = () => {
// if (typeof onBlurFn === 'function') {
// onBlurFn(props);
// }
// };
// const changeValue = (e) => {
// if (typeof onChange === 'function') {
// onChange(e.target.value);
// }
// };
//
// const changeCurValue = (e) => {
// if (typeof onChange === 'function') {
// setCurValue(e.target.value);
// }
// };
//
// const clearEdit = () => {
// // 清除所有dom的编辑状态
// const doms = document.querySelectorAll(`.cellUnit.table_${tableId}`);
// if (doms) {
// doms.forEach((item) => {
// item.setAttribute('data-editing-cell', '0');
// });
// }
// };
//
// const hide = () => {
// if (typeof onEmitChange === 'function') {
// onEmitChange(value);
// }
// clearEdit();
// setVisible(false);
// };
//
// const confirmChange = () => {
// if (typeof onEmitChange === 'function') {
// onEmitChange(curValue);
// }
// clearEdit();
// setVisible(false);
// };
//
// const getMore = async () => {
// setVisible(true);
// };
//
// if (origin === 'editForm') {
// return (
// <Consumer>
// {({ locale }) => {
// return (
// <div className={styles.container}>
// <Input.TextArea
// className={styles.inputForm}
// {...selfProps}
// value={inputVal}
// onBlur={inputOnBlurFn}
// onChange={(e) => {
// changeValue(e);
// setInputVal(e.target.value);
// }}
// />
// {!!maxLength && (
// <span className={styles.wordNumberForm}>
// {`${locale.alreadyInput} ${(value || '').length}/${maxLength}`}
// </span>
// )}
// </div>
// );
// }}
// </Consumer>
// );
// }
//
// return (
// <Consumer>
// {({ locale }) => {
// return (
// <div className={styles.container}>
// <Input
// className={styles.cellInput}
// style={selfProps.style}
// value={value}
// />
// <Modal visible={visible} title={columnChsName} onCancel={hide} onOk={confirmChange}>
// <Input.TextArea
// className={styles.input}
// {...selfProps}
// value={curValue}
// onChange={changeCurValue}
// />
// {!!maxLength && (
// <span className={styles.wordNumber}>
// {`${locale.alreadyInput} ${(curValue || '').length}/${maxLength}`}
// </span>
// )}
// </Modal>
// </div>
// );
// }}
// </Consumer>
// );
// };
components/apolloTable/component/base/edit/textarea/index.tsx
View file @ 5019d86a
import React, { useEffect, useState } from 'react';
import { Input, Modal } from 'antd';
import React, { useEffect, useState, useRef } from 'react';
import { Input } from 'antd';
import styles from './styles.less';
import { onBlurFn } from '../onBlurFn';
import { antiAssign } from '../../../../utils/utils';
import { ApolloTextAreaProps } from '../editInterface';
import { Consumer } from '../../../context';
import { placeCaretAtEnd } from '../../../../utils/autoFocus';
export const ApolloTextArea = (props: ApolloTextAreaProps) => {
const { maxLength, onChange, value, getDetail, rowData, onEmitChange, columnConfig, origin, tableId } = props;
const { columnChsName } = columnConfig;
const {
maxLength,
onChange,
value,
getDetail,
rowId,
onEmitChange,
columnConfig,
origin,
tableId,
maxPopHeight,
} = props;
const { columnName } = columnConfig;
const selfProps = antiAssign(props, [
'columnConfig',
'onChange',
'value',
'cutLength',
'getDetail',
'onEmitChange',
......@@ -30,69 +41,49 @@ export const ApolloTextArea = (props: ApolloTextAreaProps) => {
]);
selfProps.disabled = !!props.disabled;
const [curValue, setCurValue] = useState(value);
const [visible, setVisible] = useState(false);
const divInput = useRef(null);
useEffect(() => {
if (origin !== 'editForm') {
getMore();
if (divInput && divInput.current) {
placeCaretAtEnd(divInput.current);
}
}
}, []);
const [inputVal, setInputVal] = useState(value);
useEffect(() => {
setInputVal(value);
}, [value]);
const getMore = async () => {
if (getDetail && rowId) {
let newValue = await getDetail({ rowId });
if (newValue) {
newValue = newValue[0] && newValue[0].value;
setCurValue(newValue);
}
}
};
const changeValue = (e: any) => {
if (typeof onChange === 'function') {
onChange(e.target.value);
}
};
const inputOnBlurFn = () => {
if (typeof onBlurFn === 'function') {
onBlurFn(props);
if (origin === 'editForm') {
if (typeof onBlurFn === 'function') {
onBlurFn(props);
}
} else {
if (typeof onEmitChange === 'function') {
onEmitChange(curValue);
}
}
};
const changeCurValue = (e: any) => {
if (typeof onChange === 'function') {
setCurValue(e.target.value);
}
};
const clearEdit = () => {
// 清除所有dom的编辑状态
const doms = document.querySelectorAll(`.cellUnit.table_${tableId}`);
if (doms) {
doms.forEach((item) => {
item.setAttribute('data-editing-cell', '0');
});
}
};
const hide = () => {
if (typeof onEmitChange === 'function') {
onEmitChange(value);
}
clearEdit();
setVisible(false);
};
const confirmChange = () => {
if (typeof onEmitChange === 'function') {
onEmitChange(curValue);
setCurValue(e.target.innerText);
}
clearEdit();
setVisible(false);
};
const getMore = async () => {
if (getDetail && rowData) {
let newValue = await getDetail({ rowId: rowData.id });
if (newValue) {
newValue = newValue[0] && newValue[0].value;
setCurValue(newValue);
}
}
setVisible(true);
};
// 表单部分
if (origin === 'editForm') {
return (
<Consumer>
......@@ -102,14 +93,9 @@ export const ApolloTextArea = (props: ApolloTextAreaProps) => {
<Input.TextArea
className={styles.inputForm}
{...selfProps}
value={inputVal}
onBlur={inputOnBlurFn}
onChange={(e) => {
changeValue(e);
setInputVal(e.target.value);
}}
onChange={changeValue}
/>
{!!maxLength && (
<span className={styles.wordNumberForm}>
{`${locale.alreadyInput} ${(value || '').length}/${maxLength}`}
......@@ -121,26 +107,40 @@ export const ApolloTextArea = (props: ApolloTextAreaProps) => {
</Consumer>
);
}
// 表格部分
const table = document.getElementById(`apolloTable_${tableId}`);
const cell = document.getElementById(`cellUnit_${tableId}_${rowId}_${columnName}`);
const tableRect = table && table.getBoundingClientRect();
const cellRect = cell && cell.getBoundingClientRect();
const style: any = {};
if (maxPopHeight) {
style.maxHeight = maxPopHeight;
}
if (tableRect && cellRect && maxPopHeight && maxPopHeight + cellRect.top > tableRect.bottom) {
style.bottom = 0;
style.top = 'auto';
}
return (
<Consumer>
{({ locale }) => {
return (
<div className={styles.container}>
<Input className={styles.cellInput} style={selfProps.style} value={value} />
<Modal visible={visible} title={columnChsName} onCancel={hide} onOk={confirmChange}>
<Input.TextArea
className={styles.input}
{...selfProps}
value={curValue}
onChange={changeCurValue}
/>
{!!maxLength && (
<span className={styles.wordNumber}>
{`${locale.alreadyInput} ${(curValue || '').length}/${maxLength}`}
</span>
)}
</Modal>
<div className={styles.tableCell} style={style}>
<div
ref={divInput}
contentEditable={!selfProps.disabled}
className={styles.divInput}
{...selfProps}
onBlur={inputOnBlurFn}
onInput={changeCurValue}
>
{value}
</div>
{!!maxLength && (
<span className={styles.numTip}>
{`${locale.alreadyInput} ${(curValue || '').length}/${maxLength}`}
</span>
)}
</div>
);
}}
......
components/apolloTable/component/base/edit/textarea/styles.less
View file @ 5019d86a
@import '../../../../common';
.container {
position: relative;
top: 0;
left: 0;
.inputForm{
.inputForm {
padding-bottom: 18px;
}
.wordNumberForm {
......@@ -12,7 +13,7 @@
color: #e1e1e1;
font-size: 12px;
}
.cellInput{
.cellInput {
user-select: none;
}
}
......@@ -27,3 +28,28 @@
color: #e1e1e1;
font-size: 12px;
}
.tableCell {
position: absolute;
top: 0;
left: 0;
width: 100%;
display: flex;
flex-direction: column;
background: white;
border: 1px solid @primaryColor;
padding: @paddingSmX @paddingSm 0;
.divInput {
outline: none !important;
font-size: @textFontGen;
flex: 1;
overflow-y: auto;
overflow-x: hidden;
}
.numTip {
height: 20px;
line-height: 20px;
text-align: right;
color: @textSupplyColor;
font-size: @textFontSm;
}
}
components/apolloTable/utils/autoFocus.ts 0 → 100644
View file @ 5019d86a
function placeCaretAtEnd(el) {
el.focus();
if (typeof window.getSelection !== 'undefined' && typeof document.createRange !== 'undefined') {
const range = document.createRange();
range.selectNodeContents(el);
range.collapse(false);
const sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
} else if (typeof document.body.createTextRange !== 'undefined') {
const textRange = document.body.createTextRange();
textRange.moveToElementText(el);
textRange.collapse(false);
textRange.select();
}
}
export { placeCaretAtEnd };
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