@blueprintjs/table
Version:
Scalable interactive table component
70 lines (69 loc) • 2.75 kB
TypeScript
import * as React from "react";
import { type EditableTextProps } from "@blueprintjs/core";
import { type CellProps } from "./cell";
export interface EditableCellProps extends CellProps {
/**
* Whether the given cell is the current active/focused cell.
*/
isFocused?: boolean;
/**
* The value displayed in the text box. Be sure to update this value when
* rendering this component after a confirmed change.
*/
value?: string;
/**
* A listener that is triggered if the user cancels the edit. This is
* important to listen to if you are doing anything with `onChange` events,
* since you'll likely want to revert whatever changes you made. The
* callback will also receive the row index and column index if they were
* originally provided via props.
*/
onCancel?: (value: string, rowIndex?: number, columnIndex?: number) => void;
/**
* A listener that is triggered as soon as the editable name is modified.
* This can be due, for example, to keyboard input or the clipboard. The
* callback will also receive the row index and column index if they were
* originally provided via props.
*/
onChange?: (value: string, rowIndex?: number, columnIndex?: number) => void;
/**
* A listener that is triggered once the editing is confirmed. This is
* usually due to the <code>return</code> (or <code>enter</code>) key press.
* The callback will also receive the row index and column index if they
* were originally provided via props.
*/
onConfirm?: (value: string, rowIndex?: number, columnIndex?: number) => void;
/**
* Props that should be passed to the EditableText when it is used to edit
*/
editableTextProps?: Omit<EditableTextProps, "elementRef">;
}
export interface EditableCellState {
isEditing?: boolean;
savedValue?: string;
dirtyValue?: string;
}
export declare class EditableCell extends React.Component<EditableCellProps, EditableCellState> {
static displayName: string;
static defaultProps: {
truncated: boolean;
wrapText: boolean;
};
private cellRef;
private contentsRef;
constructor(props: EditableCellProps);
componentDidMount(): void;
componentDidUpdate(prevProps: EditableCellProps): void;
shouldComponentUpdate(nextProps: EditableCellProps, nextState: EditableCellState): boolean;
render(): React.JSX.Element;
renderHotkeys(): React.JSX.Element;
private checkShouldFocus;
private handleKeyPress;
private handleEdit;
private handleCancel;
private handleChange;
private handleConfirm;
private invokeCallback;
private handleCellActivate;
private handleCellDoubleClick;
}