Skip to content

Commit

Permalink
Fix #6018: Doc update for editable tree/dt cells (#6020)
Browse files Browse the repository at this point in the history
  • Loading branch information
@melloware
melloware authored Feb 20, 2024
1 parent 5d60914 commit a2a2f11
Show file tree
Hide file tree
Showing 3 changed files with 18 additions and 16 deletions.
16 changes: 8 additions & 8 deletions components/doc/datatable/edit/celleditdoc.js
View file
Original file line number Diff line number Diff line change
@@ -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);
Expand Down Expand Up @@ -60,11 +60,11 @@ export function CellEditDoc(props) {
};

const textEditor = (options) => {
return <InputText type="text" value={options.value} onChange={(e) => options.editorCallback(e.target.value)} />;
return <InputText type="text" value={options.value} onChange={(e) => options.editorCallback(e.target.value)} onKeyDown={(e) => e.stopPropagation()} />;
};

const priceEditor = (options) => {
return <InputNumber value={options.value} onValueChange={(e) => options.editorCallback(e.value)} mode="currency" currency="USD" locale="en-US" />;
return <InputNumber value={options.value} onValueChange={(e) => options.editorCallback(e.value)} mode="currency" currency="USD" locale="en-US" onKeyDown={(e) => e.stopPropagation()} />;
};

const priceBodyTemplate = (rowData) => {
Expand Down Expand Up @@ -141,11 +141,11 @@ export default function CellEditingDemo() {
};
const textEditor = (options) => {
return <InputText type="text" value={options.value} onChange={(e) => options.editorCallback(e.target.value)} />;
return <InputText type="text" value={options.value} onChange={(e) => options.editorCallback(e.target.value)} onKeyDown={(e) => e.stopPropagation()} />;
};
const priceEditor = (options) => {
return <InputNumber value={options.value} onValueChange={(e) => options.editorCallback(e.value)} mode="currency" currency="USD" locale="en-US" />;
return <InputNumber value={options.value} onValueChange={(e) => options.editorCallback(e.value)} mode="currency" currency="USD" locale="en-US" onKeyDown={(e) => e.stopPropagation()} />;
};
const priceBodyTemplate = (rowData) => {
Expand Down Expand Up @@ -241,11 +241,11 @@ export default function CellEditingDemo() {
};
const textEditor = (options: ColumnEditorOptions) => {
return <InputText type="text" value={options.value} onChange={(e: React.ChangeEvent<HTMLInputElement>) => options.editorCallback(e.target.value)} />;
return <InputText type="text" value={options.value} onChange={(e: React.ChangeEvent<HTMLInputElement>) => options.editorCallback(e.target.value)} onKeyDown={(e) => e.stopPropagation()} />;
};
const priceEditor = (options: ColumnEditorOptions) => {
return <InputNumber value={options.value} onValueChange={(e: InputNumberValueChangeEvent) => options.editorCallback(e.value)} mode="currency" currency="USD" locale="en-US" />;
return <InputNumber value={options.value} onValueChange={(e: InputNumberValueChangeEvent) => options.editorCallback(e.value)} mode="currency" currency="USD" locale="en-US" onKeyDown={(e) => e.stopPropagation()} />;
};
const priceBodyTemplate = (rowData: Product) => {
Expand Down
6 changes: 3 additions & 3 deletions components/doc/treetable/editdoc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ export function EditDoc(props) {
};

const inputTextEditor = (options) => {
return <InputText type="text" value={options.rowData[options.field]} onChange={(e) => onEditorValueChange(options, e.target.value)} />;
return <InputText type="text" value={options.rowData[options.field]} onChange={(e) => onEditorValueChange(options, e.target.value)} onKeyDown={(e) => e.stopPropagation()} />;
};

const sizeEditor = (options) => {
Expand Down Expand Up @@ -101,7 +101,7 @@ export default function EditDemo() {
};
const inputTextEditor = (options) => {
return <InputText type="text" value={options.rowData[options.field]} onChange={(e) => onEditorValueChange(options, e.target.value)} />;
return <InputText type="text" value={options.rowData[options.field]} onChange={(e) => onEditorValueChange(options, e.target.value)} onKeyDown={(e) => e.stopPropagation()} />;
};
const sizeEditor = (options) => {
Expand Down Expand Up @@ -169,7 +169,7 @@ export default function EditDemo() {
};
const inputTextEditor = (options: ColumnEditorOptions) => {
return <InputText type="text" value={options.rowData[options.field]} onChange={(e: React.ChangeEvent<HTMLInputElement>) => onEditorValueChange(options, e.target.value)} />;
return <InputText type="text" value={options.rowData[options.field]} onChange={(e: React.ChangeEvent<HTMLInputElement>) => onEditorValueChange(options, e.target.value)} onKeyDown={(e) => e.stopPropagation()} />;
};
const sizeEditor = (options: ColumnEditorOptions) => {
Expand Down
12 changes: 7 additions & 5 deletions components/lib/treetable/TreeTableBodyCell.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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 });
Expand All @@ -222,7 +224,7 @@ export const TreeTableBodyCell = (props) => {

const editorKeyHelperLabelProps = mergeProps(getColumnPTOptions('editorKeyHelper'));
/* eslint-disable */
const editorKeyHelper = props.editor && (
const editorKeyHelper = columnEditor && (
<a {...editorKeyHelperProps}>
<span {...editorKeyHelperLabelProps}></span>
</a>
Expand Down

0 comments on commit a2a2f11

Please sign in to comment.