diff --git a/components/apolloTable/component/Cell.tsx b/components/apolloTable/component/Cell.tsx index c033355e539a71606b5edb9b54837fd0e6f00b76..d23aa9ca31c30070164ff82b35b721057f1b44c0 100644 --- a/components/apolloTable/component/Cell.tsx +++ b/components/apolloTable/component/Cell.tsx @@ -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} /> ); diff --git a/components/apolloTable/component/base/edit/editInterface.tsx b/components/apolloTable/component/base/edit/editInterface.tsx index 5089e13ca94ad871413635ad321c5405e2f6b227..ef731801c26e37e77836caaa6cd1be0533dfaa5e 100644 --- a/components/apolloTable/component/base/edit/editInterface.tsx +++ b/components/apolloTable/component/base/edit/editInterface.tsx @@ -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, CommonProps { type: string; @@ -41,7 +44,7 @@ export interface ApolloInputSearchProps extends SelectProps, CommonProps { export interface ApolloSelectProps extends SelectProps, CommonProps { isMultiple?: boolean; options?: any[]; - maxPopHeight?:boolean; + maxPopHeight?: number; } export interface ApolloNumberProps extends InputNumberProps, CommonProps {} export interface ApolloCheckboxProps extends CheckboxProps, CommonProps { diff --git a/components/apolloTable/component/base/edit/onBlurFn.tsx b/components/apolloTable/component/base/edit/onBlurFn.ts similarity index 66% rename from components/apolloTable/component/base/edit/onBlurFn.tsx rename to components/apolloTable/component/base/edit/onBlurFn.ts index c9153580aaa80bb5bb191e429dc05f382902e5d5..304f34324b291cd2ed5b0c49532f8a489d6c41b8 100644 --- a/components/apolloTable/component/base/edit/onBlurFn.tsx +++ b/components/apolloTable/component/base/edit/onBlurFn.ts @@ -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, + ); } }; - diff --git a/components/apolloTable/component/base/edit/text-link/index.tsx b/components/apolloTable/component/base/edit/text-link/index.tsx index af64c970e412ab3149409af304cafb402441c1cf..610b2ab3a5d380de7a083b4bd5ef675c988b758e 100644 --- a/components/apolloTable/component/base/edit/text-link/index.tsx +++ b/components/apolloTable/component/base/edit/text-link/index.tsx @@ -1,152 +1,156 @@ -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 ( - - {({ locale }) => { - return ( -
- { - changeValue(e); - setInputVal(e.target.value); - }} - /> - {!!maxLength && ( - - {`${locale.alreadyInput} ${(value || '').length}/${maxLength}`} - - )} -
- ); - }} - - ); - } - - return ( - - {({ locale }) => { - return ( -
- - - - {!!maxLength && ( - - {`${locale.alreadyInput} ${(curValue || '').length}/${maxLength}`} - - )} - -
- ); - }} - - ); -}; +// 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 ( +// +// {({ locale }) => { +// return ( +//
+// { +// changeValue(e); +// setInputVal(e.target.value); +// }} +// /> +// {!!maxLength && ( +// +// {`${locale.alreadyInput} ${(value || '').length}/${maxLength}`} +// +// )} +//
+// ); +// }} +// +// ); +// } +// +// return ( +// +// {({ locale }) => { +// return ( +//
+// +// +// +// {!!maxLength && ( +// +// {`${locale.alreadyInput} ${(curValue || '').length}/${maxLength}`} +// +// )} +// +//
+// ); +// }} +// +// ); +// }; diff --git a/components/apolloTable/component/base/edit/textarea/index.tsx b/components/apolloTable/component/base/edit/textarea/index.tsx index 374fe980cb156719ef9501692d01214d87c21a21..e0b618ff75cf1c68b61b1b9ba406f6613170e0e1 100644 --- a/components/apolloTable/component/base/edit/textarea/index.tsx +++ b/components/apolloTable/component/base/edit/textarea/index.tsx @@ -1,18 +1,29 @@ -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 ( @@ -102,14 +93,9 @@ export const ApolloTextArea = (props: ApolloTextAreaProps) => { { - changeValue(e); - setInputVal(e.target.value); - }} + onChange={changeValue} /> - {!!maxLength && ( {`${locale.alreadyInput} ${(value || '').length}/${maxLength}`} @@ -121,26 +107,40 @@ export const ApolloTextArea = (props: ApolloTextAreaProps) => { ); } + // 表格部分 + 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 ( {({ locale }) => { return ( -
- - - - {!!maxLength && ( - - {`${locale.alreadyInput} ${(curValue || '').length}/${maxLength}`} - - )} - +
+
+ {value} +
+ {!!maxLength && ( + + {`${locale.alreadyInput} ${(curValue || '').length}/${maxLength}`} + + )}
); }} diff --git a/components/apolloTable/component/base/edit/textarea/styles.less b/components/apolloTable/component/base/edit/textarea/styles.less index 6c848f568727b65ce9b11b72a487575ca4ca1a80..bce38e6bff12ad64e32ab1b99cef4a1583923c26 100644 --- a/components/apolloTable/component/base/edit/textarea/styles.less +++ b/components/apolloTable/component/base/edit/textarea/styles.less @@ -1,8 +1,9 @@ +@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; + } +} diff --git a/components/apolloTable/utils/autoFocus.ts b/components/apolloTable/utils/autoFocus.ts new file mode 100644 index 0000000000000000000000000000000000000000..3d2a7fb3b6ccd7f2760151d04ae94bda7074b9e5 --- /dev/null +++ b/components/apolloTable/utils/autoFocus.ts @@ -0,0 +1,17 @@ +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 };