From a2a2f11716fc726bd929e4ad775fe2a1e000e55c Mon Sep 17 00:00:00 2001 From: Melloware Date: Tue, 20 Feb 2024 16:10:05 -0500 Subject: [PATCH] Fix #6018: Doc update for editable tree/dt cells (#6020) --- components/doc/datatable/edit/celleditdoc.js | 16 ++++++++-------- components/doc/treetable/editdoc.js | 6 +++--- components/lib/treetable/TreeTableBodyCell.js | 12 +++++++----- 3 files changed, 18 insertions(+), 16 deletions(-) diff --git a/components/doc/datatable/edit/celleditdoc.js b/components/doc/datatable/edit/celleditdoc.js index d21bd554b0..b19c78bd80 100644 --- a/components/doc/datatable/edit/celleditdoc.js +++ b/components/doc/datatable/edit/celleditdoc.js @@ -1,12 +1,12 @@ +import DeferredDemo from '@/components/demo/DeferredDemo'; import { DocSectionCode } from '@/components/doc/common/docsectioncode'; import { DocSectionText } from '@/components/doc/common/docsectiontext'; import { Column } from '@/components/lib/column/Column'; import { DataTable } from '@/components/lib/datatable/DataTable'; import { InputNumber } from '@/components/lib/inputnumber/InputNumber'; import { InputText } from '@/components/lib/inputtext/InputText'; -import { useEffect, useState } from 'react'; +import { useState } from 'react'; import { ProductService } from '../../../../service/ProductService'; -import DeferredDemo from '@/components/demo/DeferredDemo'; export function CellEditDoc(props) { const [products, setProducts] = useState(null); @@ -60,11 +60,11 @@ export function CellEditDoc(props) { }; const textEditor = (options) => { - return options.editorCallback(e.target.value)} />; + return options.editorCallback(e.target.value)} onKeyDown={(e) => e.stopPropagation()} />; }; const priceEditor = (options) => { - return options.editorCallback(e.value)} mode="currency" currency="USD" locale="en-US" />; + return options.editorCallback(e.value)} mode="currency" currency="USD" locale="en-US" onKeyDown={(e) => e.stopPropagation()} />; }; const priceBodyTemplate = (rowData) => { @@ -141,11 +141,11 @@ export default function CellEditingDemo() { }; const textEditor = (options) => { - return options.editorCallback(e.target.value)} />; + return options.editorCallback(e.target.value)} onKeyDown={(e) => e.stopPropagation()} />; }; const priceEditor = (options) => { - return options.editorCallback(e.value)} mode="currency" currency="USD" locale="en-US" />; + return options.editorCallback(e.value)} mode="currency" currency="USD" locale="en-US" onKeyDown={(e) => e.stopPropagation()} />; }; const priceBodyTemplate = (rowData) => { @@ -241,11 +241,11 @@ export default function CellEditingDemo() { }; const textEditor = (options: ColumnEditorOptions) => { - return ) => options.editorCallback(e.target.value)} />; + return ) => options.editorCallback(e.target.value)} onKeyDown={(e) => e.stopPropagation()} />; }; const priceEditor = (options: ColumnEditorOptions) => { - return options.editorCallback(e.value)} mode="currency" currency="USD" locale="en-US" />; + return options.editorCallback(e.value)} mode="currency" currency="USD" locale="en-US" onKeyDown={(e) => e.stopPropagation()} />; }; const priceBodyTemplate = (rowData: Product) => { diff --git a/components/doc/treetable/editdoc.js b/components/doc/treetable/editdoc.js index a637eb96ce..8adf370f39 100644 --- a/components/doc/treetable/editdoc.js +++ b/components/doc/treetable/editdoc.js @@ -37,7 +37,7 @@ export function EditDoc(props) { }; const inputTextEditor = (options) => { - return onEditorValueChange(options, e.target.value)} />; + return onEditorValueChange(options, e.target.value)} onKeyDown={(e) => e.stopPropagation()} />; }; const sizeEditor = (options) => { @@ -101,7 +101,7 @@ export default function EditDemo() { }; const inputTextEditor = (options) => { - return onEditorValueChange(options, e.target.value)} />; + return onEditorValueChange(options, e.target.value)} onKeyDown={(e) => e.stopPropagation()} />; }; const sizeEditor = (options) => { @@ -169,7 +169,7 @@ export default function EditDemo() { }; const inputTextEditor = (options: ColumnEditorOptions) => { - return ) => onEditorValueChange(options, e.target.value)} />; + return ) => onEditorValueChange(options, e.target.value)} onKeyDown={(e) => e.stopPropagation()} />; }; const sizeEditor = (options: ColumnEditorOptions) => { diff --git a/components/lib/treetable/TreeTableBodyCell.js b/components/lib/treetable/TreeTableBodyCell.js index 1d52bc90d5..45cdbdf2a2 100644 --- a/components/lib/treetable/TreeTableBodyCell.js +++ b/components/lib/treetable/TreeTableBodyCell.js @@ -76,11 +76,12 @@ export const TreeTableBodyCell = (props) => { } selfClick.current = false; - } + }, + when: getColumnProp('editor') }); const onClick = (event) => { - if (props.editor && !editingState && (props.selectOnEdit || (!props.selectOnEdit && props.selected))) { + if (getColumnProp('editor') && !editingState && (props.selectOnEdit || (!props.selectOnEdit && props.selected))) { selfClick.current = true; const params = getCellCallbackParams(event); @@ -169,7 +170,7 @@ export const TreeTableBodyCell = (props) => { }; React.useEffect(() => { - if (elementRef.current && props.editor) { + if (elementRef.current && getColumnProp('editor')) { clearTimeout(tabIndexTimeout.current); if (editingState) { @@ -200,10 +201,11 @@ export const TreeTableBodyCell = (props) => { const bodyClassName = ObjectUtils.getPropValue(props.bodyClassName, props.node.data, { field: props.field, rowIndex: props.rowIndex, props: props }); const style = props.bodyStyle || props.style; + const columnEditor = getColumnProp('editor'); let content; if (editingState) { - if (props.editor) content = ObjectUtils.getJSXElement(props.editor, { node: props.node, rowData: props.rowData, value: ObjectUtils.resolveFieldData(props.node.data, props.field), field: props.field, rowIndex: props.rowIndex, props }); + if (columnEditor) content = ObjectUtils.getJSXElement(columnEditor, { node: props.node, rowData: props.rowData, value: ObjectUtils.resolveFieldData(props.node.data, props.field), field: props.field, rowIndex: props.rowIndex, props }); else throw new Error('Editor is not found on column.'); } else { if (props.body) content = ObjectUtils.getJSXElement(props.body, props.node, { field: props.field, rowIndex: props.rowIndex, props }); @@ -222,7 +224,7 @@ export const TreeTableBodyCell = (props) => { const editorKeyHelperLabelProps = mergeProps(getColumnPTOptions('editorKeyHelper')); /* eslint-disable */ - const editorKeyHelper = props.editor && ( + const editorKeyHelper = columnEditor && (