kylefang/DefinitelyTyped
1
0
Fork 0
mirror of https://github.com/zhigang1992/DefinitelyTyped.git synced 2026-04-08 17:19:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

react-data-grid Add generic ReactDataGrid and proptypes for some Editors

Browse Source 
* Add generic ReactDataGrid to return actual row type on methods that return rows
* Add props for AutoComplete, AutoCompleteTokensEditor and DropDownEditor editors
* Add EditorBase class
This commit is contained in:
sgrabar
2018-08-31 11:05:39 +02:00
parent 5e58f71c5e
commit af59f37b7e
7 changed files with 1223 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
types/react-data-grid/index.d.ts vendored
View File

@@ -1,24 +1,43 @@
// Type definitions for react-data-grid 2.0
// Type definitions for react-data-grid 3.0
// Project: https://github.com/adazzle/react-data-grid.git
// Definitions by: Simon Gellis <https://github.com/SupernaviX>, Kieran Peat <https://github.com/KieranPeat>, Martin Novak <https://github.com/martinnov92>
// Definitions by: Simon Gellis <https://github.com/SupernaviX>, Kieran Peat <https://github.com/KieranPeat>, Martin Novak <https://github.com/martinnov92>, Sebastijan Grabar <https://github.com/baso53>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 2.8
/// <reference types="react" />
declare namespace AdazzleReactDataGrid {
interface SelectionParams {
rowIdx: number,
row: any
interface ExcelColumn {
editable: boolean;
name: any;
key: string;
width: number;
resizeable: boolean;
filterable: boolean;
}
interface GridProps {
interface EditorBaseProps {
value: any;
column: ExcelColumn;
height: number;
onBlur: () => void;
onCommit: () => void;
onCommitCancel: () => void;
rowData: any;
rowMetaData: any;
}
interface SelectionParams<T> {
rowIdx: number;
row: T;
}
interface GridProps<T> {
/**
* Gets the data to render in each row. Required.
* Can be an array or a function that takes an index and returns an object.
*/
rowGetter: Array<object> | ((rowIdx: number) => object)
rowGetter: Array<T> | ((rowIdx: number) => T)
/**
* The total number of rows to render. Required.
*/
@@ -26,14 +45,14 @@ declare namespace AdazzleReactDataGrid {
/**
* The columns to render.
*/
columns?: Array<Column>
columns?: Array<Column<T>>
/**
* Invoked when the user changes the value of a single cell.
* Should update that cell's value.
* @param e Information about the event
*/
onRowUpdated?: (e: RowUpdateEvent) => void
onRowUpdated?: (e: RowUpdateEvent<T>) => void
/**
* Invoked when the user pulls down the drag handle of an editable cell.
* Should update the values of the selected cells.
@@ -45,7 +64,7 @@ declare namespace AdazzleReactDataGrid {
* Should update the values of the cells beneath the selected cell.
* @param e Information about the event
*/
onDragHandleDoubleClick?: (e: DragHandleDoubleClickEvent) => void
onDragHandleDoubleClick?: (e: DragHandleDoubleClickEvent<T>) => void
/**
* Invoked when the user copies a value from one cell and pastes it into another (in the same column).
* Should update the value of the cell in row e.toRow.
@@ -56,7 +75,7 @@ declare namespace AdazzleReactDataGrid {
* Invoked after the user updates the grid rows in any way.
* @param e Information about the event
*/
onGridRowsUpdated?: (e: GridRowsUpdatedEvent) => void
onGridRowsUpdated?: (e: GridRowsUpdatedEvent<T>) => void
/**
* A toolbar to display above the grid.
@@ -164,7 +183,7 @@ declare namespace AdazzleReactDataGrid {
* Called when a row is selected.
* @param rows The (complete) current selection of rows.
*/
onRowSelect?: (rows: Array<object>) => void
onRowSelect?: (rows: Array<T>) => void
/**
* A property that's unique to every row.
* This property is required to enable row selection.
@@ -206,8 +225,8 @@ declare namespace AdazzleReactDataGrid {
rowSelection?: {
showCheckbox?: boolean
enableShiftSelect?: boolean
onRowsSelected?: (rows: Array<SelectionParams>) => void,
onRowsDeselected?: (rows: Array<SelectionParams>) => void,
onRowsSelected?: (rows: Array<SelectionParams<T>>) => void,
onRowsDeselected?: (rows: Array<SelectionParams<T>>) => void,
selectBy?: {
indexes?: Array<number>;
keys?: { rowKey: string, values: Array<any> };
@@ -230,7 +249,7 @@ declare namespace AdazzleReactDataGrid {
* @param rowIdx zero index number of row clicked
* @param row object behind the row
*/
onRowClick?: (rowIdx : number, row : object) => void
onRowClick?: (rowIdx: number, row: T) => void
/**
* An event function called when a row is expanded with the toggle
@@ -246,12 +265,12 @@ declare namespace AdazzleReactDataGrid {
*/
getValidFilterValues?: (columnKey: string) => Array<any>
getCellActions?: (column: Column, row: object) => (ActionButton | ActionMenu)[]
getCellActions?: (column: Column<T>, row: T) => (ActionButton | ActionMenu)[]
}
type ActionButton = {
icon: string;
callback: () => void;
callback: () => void;
}
type ActionMenu = {
@@ -266,7 +285,7 @@ declare namespace AdazzleReactDataGrid {
/**
* Information about a specific column to be rendered.
*/
interface Column {
interface Column<T> {
/**
* A unique key for this column. Required.
* Each row should have a property with this name, which contains this column's value.
@@ -314,7 +333,10 @@ declare namespace AdazzleReactDataGrid {
* The editor for this column. Several editors are available in "react-data-grid/addons".
* @default A simple text editor
*/
editor?: React.ReactElement<any> | React.ComponentClass<any> | React.StatelessComponent<any>
editor?:
| React.ReactElement<EditorBaseProps>
| React.ComponentClass<EditorBaseProps>
| React.StatelessComponent<EditorBaseProps>;
/**
* A custom read-only formatter for this column. An image formatter is available in "react-data-grid/addons".
*/
@@ -331,11 +353,11 @@ declare namespace AdazzleReactDataGrid {
*/
events?: {
[name: string]: ColumnEventCallback
}
};
/**
* Retrieve meta data about the row, optionally provide column as a second argument
*/
getRowMetaData?: (rowdata: any, column?: Column) => any;
getRowMetaData?: (rowdata: T, column?: Column<T>) => any;
/**
* A class name to be applied to the cells in the column
*/
@@ -359,7 +381,7 @@ declare namespace AdazzleReactDataGrid {
/**
* Information about a row update
*/
interface RowUpdateEvent {
interface RowUpdateEvent<T> {
/**
* The index of the updated row.
*/
@@ -367,7 +389,7 @@ declare namespace AdazzleReactDataGrid {
/**
* The columns that were updated and their values.
*/
updated: object
updated: T
/**
* The name of the column that was updated.
*/
@@ -403,7 +425,7 @@ declare namespace AdazzleReactDataGrid {
/**
* Information about a drag handle double click
*/
interface DragHandleDoubleClickEvent {
interface DragHandleDoubleClickEvent<T> {
/**
* The row where the double click occurred.
*/
@@ -415,7 +437,7 @@ declare namespace AdazzleReactDataGrid {
/**
* The values of the row.
*/
rowData: object
rowData: T
/**
* The double click event.
*/
@@ -451,7 +473,7 @@ declare namespace AdazzleReactDataGrid {
/**
* Information about some update to the grid's contents
*/
interface GridRowsUpdatedEvent {
interface GridRowsUpdatedEvent<T> {
/**
* The key of the column where the event occurred.
*/
@@ -467,7 +489,7 @@ declare namespace AdazzleReactDataGrid {
/**
* The columns that were updated and their values.
*/
updated: object
updated: T
/**
* The action that occurred to trigger this event.
* One of 'cellUpdate', 'cellDrag', 'columnFill', or 'copyPaste'.
@@ -511,7 +533,7 @@ declare namespace AdazzleReactDataGrid {
* Excel-like grid component built with React, with editors, keyboard navigation, copy & paste, and the like
* http://adazzle.github.io/react-data-grid/
*/
export class ReactDataGrid extends React.Component<GridProps> {
export class ReactDataGrid<T> extends React.Component<GridProps<T>> {
/**
* Opens the editor for the cell (idx) in the given row (rowIdx). If the column is not editable then nothing will happen.
*/
@@ -531,6 +553,18 @@ declare namespace AdazzleReactDataGrid {
export import GridRowsUpdatedEvent = AdazzleReactDataGrid.GridRowsUpdatedEvent;
export import OnRowExpandToggle = AdazzleReactDataGrid.OnRowExpandToggle;
export namespace editors {
class EditorBase extends React.Component<EditorBaseProps, any> {
getStyle(): { width: string };
getValue(): any;
getInputNode(): Element | null | Text;
inheritContainerStyles(): boolean;
}
}
// Actual classes exposed on module.exports
/**
* A react component that renders a row of the grid
@@ -544,12 +578,46 @@ declare namespace AdazzleReactDataGrid {
}
declare namespace AdazzleReactDataGridPlugins {
// TODO: refine types for these addons
interface AutoCompleteEditorProps {
onCommit?: () => void;
options?: Array<{ id: number; title: string }>;
label?: any;
value?: any;
height?: number;
valueParams?: string[];
column?: AdazzleReactDataGrid.ExcelColumn;
resultIdentifier?: string;
search?: string;
onKeyDown?: () => void;
onFocus?: () => void;
editorDisplayValue?: (column: AdazzleReactDataGrid.ExcelColumn, value: any) => string;
}
interface AutoCompleteTokensEditorProps {
options: Array<string> | Array<{ id: number; caption: string }>;
column?: AdazzleReactDataGrid.ExcelColumn;
value?: any[];
}
interface DropDownEditorProps {
options:
| Array<string>
| Array<{
id: string;
title: string;
value: string;
text: string;
}>;
}
export namespace Editors {
export class AutoComplete extends React.Component<any> { }
export class DropDownEditor extends React.Component<any> { }
export class SimpleTextEditor extends React.Component<any> { }
export class CheckboxEditor extends React.Component<any> { }
export class AutoComplete extends React.Component<AutoCompleteEditorProps> {}
export class AutoCompleteTokensEditor extends React.Component<AutoCompleteTokensEditorProps> {}
export class DropDownEditor extends React.Component<DropDownEditorProps> {}
// TODO: refine types for these addons
export class SimpleTextEditor extends React.Component<any> {}
export class CheckboxEditor extends React.Component<any> {}
}
export namespace Filters {
export class NumericFilter extends React.Component<any> { }

10
types/react-data-grid/react-data-grid-tests.tsx
View File

@@ -131,7 +131,7 @@ var counties = [
var titles = ['Dr.', 'Mr.', 'Mrs.', 'Miss', 'Ms.'];
var columns:ReactDataGrid.Column[] = [
var columns:ReactDataGrid.Column<typeof counties>[] = [
{
key: 'id',
name: 'ID',
@@ -152,7 +152,7 @@ var columns:ReactDataGrid.Column[] = [
editor: <AutoCompleteEditor options={counties}/>,
width: 200,
resizable: true,
getRowMetaData: (rowdata: any, column: ReactDataGrid.Column) => {
getRowMetaData: (rowdata: any, column: ReactDataGrid.Column<typeof counties>) => {
return {};
}
},
@@ -262,7 +262,7 @@ class Example extends React.Component<any, any> {
return clonedColumns;
}
handleGridRowsUpdated(updatedRowData:ReactDataGrid.GridRowsUpdatedEvent) {
handleGridRowsUpdated(updatedRowData:ReactDataGrid.GridRowsUpdatedEvent<typeof counties>) {
var rows = this.state.rows;
for (var i = updatedRowData.fromRow; i <= updatedRowData.toRow; i++) {
@@ -315,12 +315,12 @@ class Example extends React.Component<any, any> {
return this.state.rows.length;
}
onRowsSelected(rows: Array<ReactDataGrid.SelectionParams>) {
onRowsSelected(rows: Array<ReactDataGrid.SelectionParams<typeof counties>>) {
var selectedIndexes = this.state.selectedIndexes as Array<number>;
this.setState({selectedIndexes: selectedIndexes.concat(rows.map(r => r.rowIdx))});
}
onRowsDeselected(rows: Array<ReactDataGrid.SelectionParams>) {
onRowsDeselected(rows: Array<ReactDataGrid.SelectionParams<typeof counties>>) {
var rowIndexes = rows.map(r => r.rowIdx);
var selectedIndexes = this.state.selectedIndexes as Array<number>;
this.setState({selectedIndexes: selectedIndexes.filter(i => rowIndexes.indexOf(i) === -1 )});

7
types/react-data-grid/v1/tsconfig.json
View File

@@ -20,11 +20,14 @@
"paths": {
"react-data-grid": [
"react-data-grid/v1"
]
],
"react-data-grid/*": [
"react-data-grid/v1/*"
]
}
},
"files": [
"index.d.ts",
"react-data-grid-tests.tsx"
]
}
}

636
types/react-data-grid/v2/index.d.ts vendored Normal file
View File

@@ -0,0 +1,636 @@
// Type definitions for react-data-grid 2.0
// Project: https://github.com/adazzle/react-data-grid.git
// Definitions by: Simon Gellis <https://github.com/SupernaviX>, Kieran Peat <https://github.com/KieranPeat>, Martin Novak <https://github.com/martinnov92>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 2.8
/// <reference types="react" />
declare namespace AdazzleReactDataGrid {
interface SelectionParams {
rowIdx: number,
row: any
}
interface GridProps {
/**
* Gets the data to render in each row. Required.
* Can be an array or a function that takes an index and returns an object.
*/
rowGetter: Array<object> | ((rowIdx: number) => object)
/**
* The total number of rows to render. Required.
*/
rowsCount: number
/**
* The columns to render.
*/
columns?: Array<Column>
/**
* Invoked when the user changes the value of a single cell.
* Should update that cell's value.
* @param e Information about the event
*/
onRowUpdated?: (e: RowUpdateEvent) => void
/**
* Invoked when the user pulls down the drag handle of an editable cell.
* Should update the values of the selected cells.
* @param e Information about the event
*/
onCellsDragged?: (e: CellDragEvent) => void
/**
* Invoked when the user double clicks on the drag handle of an editable cell.
* Should update the values of the cells beneath the selected cell.
* @param e Information about the event
*/
onDragHandleDoubleClick?: (e: DragHandleDoubleClickEvent) => void
/**
* Invoked when the user copies a value from one cell and pastes it into another (in the same column).
* Should update the value of the cell in row e.toRow.
* @param e Information about the event
*/
onCellCopyPaste?: (e: CellCopyPasteEvent) => void
/**
* Invoked after the user updates the grid rows in any way.
* @param e Information about the event
*/
onGridRowsUpdated?: (e: GridRowsUpdatedEvent) => void
/**
* A toolbar to display above the grid.
* Consider using the toolbar included in "react-data-grid/addons".
*/
toolbar?: React.ReactElement<any>
/**
* A context menu to disiplay when the user right-clicks a cell.
* Consider using "react-contextmenu", included in "react-data-grid/addons".
*/
contextMenu?: React.ReactElement<any>
/**
* A react component to customize how rows are rendered.
* If you want to define your own, consider extending ReactDataGrid.Row.
*/
rowRenderer?: React.ReactElement<any> | React.ComponentClass<any> | React.StatelessComponent<any>
/**
* A component to display when there are no rows to render.
*/
emptyRowsView?: React.ComponentClass<any> | React.StatelessComponent<any>
/**
* The minimum width of the entire grid in pixels.
*/
minWidth?: number
/**
* The minimum height of the entire grid in pixels.
* @default 350
*/
minHeight?: number
/**
* The height of each individual row in pixels.
* @default 35
*/
rowHeight?: number
/**
* The height of the header row in pixels.
* @default rowHeight
*/
headerRowHeight?: number
/**
* The height of the header filter row in pixels.
* @default 45
*/
headerFiltersHeight?: number
/**
* The minimum width of each column in pixels.
* @default 80
*/
minColumnWidth?: number
/**
* Invoked when a column has been resized.
* @param index The index of the column
* @param width The new width of the column
*/
onColumnResize?: (index: number, width: number) => void
/**
* Controls what happens when the user navigates beyond the first or last cells.
* 'loopOverRow' will navigate to the beginning/end of the current row.
* 'changeRow' will navigate to the beginning of the next row or the end of the last.
* 'none' will do nothing.
* @default none
*/
cellNavigationMode?: 'none' | 'loopOverRow' | 'changeRow'
/**
* Called when the user sorts the grid by some column.
* Should update the order of the rows returned by rowGetter.
* @param sortColumn The name of the column being sorted by
* @param sortDirection The direction to sort ('ASC'/'DESC'/'NONE')
*/
onGridSort?: (sortColumn: string, sortDirection: 'ASC' | 'DESC' | 'NONE') => void
/**
* Initial sorting direction
*/
sortDirection?: 'ASC' | 'DESC' | 'NONE'
/**
* key of the initial sorted column
*/
sortColumn?: string
/**
* Called when the user filters a column by some value.
* Should restrict the rows in rowGetter to only things that match the filter.
* @param filter The filter being added
*/
onAddFilter?: (filter: Filter) => void
/**
* Called when the user clears all filters.
* Should restore the rows in rowGetter to their original state.
*/
onClearFilters?: () => void
/**
* When set to true or 'multi', enables multiple row select.
* When set to 'single', enables single row select.
* When set to false or not set, disables row select.
* @default false
*/
enableRowSelect?: boolean | 'single' | 'multi'
/**
* Called when a row is selected.
* @param rows The (complete) current selection of rows.
*/
onRowSelect?: (rows: Array<object>) => void
/**
* A property that's unique to every row.
* This property is required to enable row selection.
* @default 'id'
*/
rowKey?: string
/**
* Enables cells to be selected when clicked.
* @default false
*/
enableCellSelect?: boolean
/**
* Enables cells to be dragged and dropped
* @default false
*/
enableDragAndDrop?: boolean
/**
* Called when a cell is selected.
* @param coordinates The row and column indices of the selected cell.
*/
onCellSelected?: (coordinates: {rowIdx: number, idx: number}) => void
/**
* Called when a cell is deselected.
* @param coordinates The row and column indices of the deselected cell.
*/
onCellDeSelected?: (coordinates: {rowIdx: number, idx: number}) => void
/**
* How long to wait before rendering a new row while scrolling in milliseconds.
* @default 0
*/
rowScrollTimeout?: number
/**
* Options object for selecting rows
*/
rowSelection?: {
showCheckbox?: boolean
enableShiftSelect?: boolean
onRowsSelected?: (rows: Array<SelectionParams>) => void,
onRowsDeselected?: (rows: Array<SelectionParams>) => void,
selectBy?: {
indexes?: Array<number>;
keys?: { rowKey: string, values: Array<any> };
isSelectedKey?: string;
}
}
/**
* A custom formatter for the select all checkbox cell
* @default react-data-grid/src/formatters/SelectAll.js
*/
selectAllRenderer?: React.ComponentClass<any> | React.StatelessComponent<any>;
/**
* A custom formatter for select row column
* @default AdazzleReactDataGridPlugins.Editors.CheckboxEditor
*/
rowActionsCell?: React.ComponentClass<any> | React.StatelessComponent<any>;
/**
* An event function called when a row is clicked.
* Clicking the header row will trigger a call with -1 for the rowIdx.
* @param rowIdx zero index number of row clicked
* @param row object behind the row
*/
onRowClick?: (rowIdx : number, row : object) => void
/**
* An event function called when a row is expanded with the toggle
* @param props OnRowExpandToggle object
*/
onRowExpandToggle?: (props: OnRowExpandToggle ) => void
/**
* Responsible for returning an Array of values that can be used for filtering
* a column that is column.filterable and using a column.filterRenderer that
* displays a list of options.
* @param columnKey the column key that we are looking to pull values from
*/
getValidFilterValues?: (columnKey: string) => Array<any>
getCellActions?: (column: Column, row: object) => (ActionButton | ActionMenu)[]
}
type ActionButton = {
icon: string;
callback: () => void;
}
type ActionMenu = {
icon: string;
actions: {
icon: string;
text: string;
callback: () => void;
}[];
}
/**
* Information about a specific column to be rendered.
*/
interface Column {
/**
* A unique key for this column. Required.
* Each row should have a property with this name, which contains this column's value.
*/
key: string
/**
* This column's display name. Required.
*/
name: string
/**
* A custom width for this specific column.
* @default minColumnWidth from the ReactDataGrid
*/
width?: number
/**
* Whether this column can be resized by the user.
* @default false
*/
resizable?: boolean
/**
* Whether this column should stay fixed on the left as the user scrolls horizontally.
* @default false
*/
locked?: boolean
/**
* Whether this column can be edited.
* @default false
*/
editable?: boolean
/**
* Whether the rows in the grid can be sorted by this column.
* @default false
*/
sortable?: boolean
/**
* Whether the rows in the grid can be filtered by this column.
* @default false
*/
filterable?: boolean;
/**
* A custom formatter for this column's filter.
*/
filterRenderer?: React.ReactElement<any> | React.ComponentClass<any> | React.StatelessComponent<any>;
/**
* The editor for this column. Several editors are available in "react-data-grid/addons".
* @default A simple text editor
*/
editor?: React.ReactElement<any> | React.ComponentClass<any> | React.StatelessComponent<any>
/**
* A custom read-only formatter for this column. An image formatter is available in "react-data-grid/addons".
*/
formatter?: React.ReactElement<any> | React.ComponentClass<any> | React.StatelessComponent<any>
/**
* A custom formatter for this column's header.
*/
headerRenderer?: React.ReactElement<any> | React.ComponentClass<any> | React.StatelessComponent<any>
/**
* Events to be bound to the cells in this specific column.
* Each event must respect this standard in order to work correctly:
* @example
* function onXxx(ev :SyntheticEvent, (rowIdx, idx, name): args)
*/
events?: {
[name: string]: ColumnEventCallback
}
/**
* Retrieve meta data about the row, optionally provide column as a second argument
*/
getRowMetaData?: (rowdata: any, column?: Column) => any;
/**
* A class name to be applied to the cells in the column
*/
cellClass?: string;
/**
* Whether this column can be dragged (re-arranged).
* @default false
*/
draggable?: boolean;
}
interface ColumnEventCallback {
/**
* A callback for a native react event on a specific cell.
* @param ev The react event
* @param args The row and column coordinates of the cell, and the name of the event.
*/
(ev: React.SyntheticEvent<any>, args: {rowIdx: number, idx: number, name: string}): void
}
/**
* Information about a row update
*/
interface RowUpdateEvent {
/**
* The index of the updated row.
*/
rowIdx: number
/**
* The columns that were updated and their values.
*/
updated: object
/**
* The name of the column that was updated.
*/
cellKey: string
/**
* The name of the key pressed to trigger the event ('Tab', 'Enter', etc.).
*/
key: string
}
/**
* Information about a cell drag
*/
interface CellDragEvent {
/**
* The name of the column that was dragged.
*/
cellKey: string
/**
* The row where the drag began.
*/
fromRow: number
/**
* The row where the drag ended.
*/
toRow: number
/**
* The value of the cell that was dragged.
*/
value: any
}
/**
* Information about a drag handle double click
*/
interface DragHandleDoubleClickEvent {
/**
* The row where the double click occurred.
*/
rowIdx: number
/**
* The column where the double click occurred.
*/
idx: number
/**
* The values of the row.
*/
rowData: object
/**
* The double click event.
*/
e: React.SyntheticEvent<any>
}
/**
* Information about a copy paste
*/
interface CellCopyPasteEvent {
/**
* The row that was pasted to.
*/
rowIdx: number
/**
* The value that was pasted.
*/
value: any
/**
* The row that was copied from.
*/
fromRow: number
/**
* The row that was pasted to.
*/
toRow: number
/**
* The key of the column where the copy paste occurred.
*/
cellKey: string
}
/**
* Information about some update to the grid's contents
*/
interface GridRowsUpdatedEvent {
/**
* The key of the column where the event occurred.
*/
cellKey: string
/**
* The top row affected by the event.
*/
fromRow: number
/**
* The bottom row affected by the event.
*/
toRow: number
/**
* The columns that were updated and their values.
*/
updated: object
/**
* The action that occurred to trigger this event.
* One of 'cellUpdate', 'cellDrag', 'columnFill', or 'copyPaste'.
*/
action: 'cellUpdate' | 'cellDrag' | 'columnFill' | 'copyPaste'
}
/**
* Information about the row toggler
*/
interface OnRowExpandToggle {
/**
* The name of the column group the row is in
*/
columnGroupName: string
/**
* The name of the expanded row
*/
name: string
/**
* If it should expand or not
*/
shouldExpand: boolean
}
/**
* Some filter to be applied to the grid's contents
*/
interface Filter {
/**
* The key of the column being filtered.
*/
columnKey: string
/**
* The term to filter by.
*/
filterTerm: string
}
/**
* Excel-like grid component built with React, with editors, keyboard navigation, copy & paste, and the like
* http://adazzle.github.io/react-data-grid/
*/
export class ReactDataGrid extends React.Component<GridProps> {
/**
* Opens the editor for the cell (idx) in the given row (rowIdx). If the column is not editable then nothing will happen.
*/
openCellEditor(rowIdx: number, idx: number): void;
}
export namespace ReactDataGrid {
// Useful types
export import Column = AdazzleReactDataGrid.Column;
export import Filter = AdazzleReactDataGrid.Filter;
// Various events
export import RowUpdateEvent = AdazzleReactDataGrid.RowUpdateEvent;
export import SelectionParams = AdazzleReactDataGrid.SelectionParams;
export import CellDragEvent = AdazzleReactDataGrid.CellDragEvent;
export import DragHandleDoubleClickEvent = AdazzleReactDataGrid.DragHandleDoubleClickEvent;
export import CellCopyPasteEvent = AdazzleReactDataGrid.CellCopyPasteEvent;
export import GridRowsUpdatedEvent = AdazzleReactDataGrid.GridRowsUpdatedEvent;
export import OnRowExpandToggle = AdazzleReactDataGrid.OnRowExpandToggle;
// Actual classes exposed on module.exports
/**
* A react component that renders a row of the grid
*/
export class Row extends React.Component<any> { }
/**
* A react coponent that renders a cell of the grid
*/
export class Cell extends React.Component<any> { }
}
}
declare namespace AdazzleReactDataGridPlugins {
// TODO: refine types for these addons
export namespace Editors {
export class AutoComplete extends React.Component<any> { }
export class DropDownEditor extends React.Component<any> { }
export class SimpleTextEditor extends React.Component<any> { }
export class CheckboxEditor extends React.Component<any> { }
}
export namespace Filters {
export class NumericFilter extends React.Component<any> { }
export class AutoCompleteFilter extends React.Component<any> { }
export class MultiSelectFilter extends React.Component<any> { }
export class SingleSelectFilter extends React.Component<any> { }
}
export namespace Formatters {
export class ImageFormatter extends React.Component<any> { }
export class DropDownFormatter extends React.Component<any> { }
}
export class Toolbar extends React.Component<any> {}
export namespace DraggableHeader {
export class DraggableContainer extends React.Component<any>{ }
}
export namespace Data {
export const Selectors: {
getRows: (state: object) => object[];
getSelectedRowsByKey: (state: object) => object[];
}
}
// TODO: re-export the react-contextmenu typings once those exist
// https://github.com/vkbansal/react-contextmenu/issues/10
export namespace Menu {
export class ContextMenu extends React.Component<any> { }
export class MenuHeader extends React.Component<any> { }
export class MenuItem extends React.Component<any> { }
export class SubMenu extends React.Component<any> { }
export const monitor: {
getItem(): any
getPosition(): any
hideMenu(): void
};
export function connect(Menu: any): any;
export function ContextMenuLayer(
identifier: any,
configure?: (props: any) => any
): (Component: any) => any
}
}
declare module "react-data-grid" {
import ReactDataGrid = AdazzleReactDataGrid.ReactDataGrid;
// commonjs export
export = ReactDataGrid;
}
declare module "react-data-grid-addons" {
import Plugins = AdazzleReactDataGridPlugins;
import Editors = Plugins.Editors;
import Filters = Plugins.Filters;
import Formatters = Plugins.Formatters;
import Toolbar = Plugins.Toolbar;
import Menu = Plugins.Menu;
import Data = Plugins.Data;
import DraggableHeader = Plugins.DraggableHeader;
// ES6 named exports
export {
Editors,
Filters,
Formatters,
Toolbar,
Menu,
Data,
DraggableHeader
}
// attach to window
global {
interface Window {
ReactDataGridPlugins: {
Editors: typeof Editors,
Filters: typeof Filters,
Formatters: typeof Formatters,
Toolbar: typeof Toolbar,
Menu: typeof Menu,
Data: typeof Data,
DraggableHeader: typeof DraggableHeader
}
}
}
}

362
types/react-data-grid/v2/react-data-grid-tests.tsx Normal file
View File

@@ -0,0 +1,362 @@
import * as React from 'react';
import ReactDataGrid = require('react-data-grid');
import * as ReactDataGridPlugins from 'react-data-grid-addons';
import faker = require('faker');
var Editors = ReactDataGridPlugins.Editors;
var Toolbar = ReactDataGridPlugins.Toolbar;
var AutoCompleteEditor = Editors.AutoComplete;
var DropDownEditor = Editors.DropDownEditor;
var { Selectors } = ReactDataGridPlugins.Data;
class CustomFilterHeaderCell extends React.Component<any, any> {
state = {
filterTerm: ""
};
handleChange(e: any) {
let val = e.target.value;
this.setState({filterTerm: val});
this.props.onChange({filterTerm: val, column: this.props.column});
}
render() {
return (
<div>
<input type="text" value={this.state.filterTerm} onChange={(e) => this.handleChange(e)} />
</div>
);
}
}
class CustomRowSelectorCell extends ReactDataGridPlugins.Editors.CheckboxEditor {
render(){
return super.render();
}
}
export interface ICustomSelectAllProps {
onChange: any;
inputRef: any;
}
class CustomSelectAll extends React.Component<ICustomSelectAllProps> {
render() {
return (
<div className='react-grid-checkbox-container checkbox-align'>
<input
className='react-grid-checkbox'
type='checkbox'
name='select-all-checkbox'
id='select-all-checkbox'
ref={this.props.inputRef}
onChange={this.props.onChange}
/>
<label htmlFor='select-all-checkbox' className='react-grid-checkbox-label'></label>
</div>
);
}
}
faker.locale = 'en_GB';
function createFakeRowObjectData(index:number):Object {
return {
id: 'id_' + index,
avartar: faker.image.avatar(),
county: faker.address.county(),
email: faker.internet.email(),
title: faker.name.prefix(),
firstName: faker.name.firstName(),
lastName: faker.name.lastName(),
street: faker.address.streetName(),
zipCode: faker.address.zipCode(),
date: faker.date.past().toLocaleDateString(),
bs: faker.company.bs(),
catchPhrase: faker.company.catchPhrase(),
companyName: faker.company.companyName(),
words: faker.lorem.words(),
sentence: faker.lorem.sentence()
};
}
function createRows(numberOfRows:number) {
var rows:Object[] = [];
for (var i = 0; i < numberOfRows; i++) {
rows[i] = createFakeRowObjectData(i);
}
return rows;
}
var counties = [
{id: 0, title: 'Bedfordshire'},
{id: 1, title: 'Berkshire'},
{id: 2, title: 'Buckinghamshire'},
{id: 3, title: 'Cambridgeshire'},
{id: 4, title: 'Cheshire'},
{id: 5, title: 'Cornwall'},
{id: 6, title: 'Cumbria, (Cumberland)'},
{id: 7, title: 'Derbyshire'},
{id: 8, title: 'Devon'},
{id: 9, title: 'Dorset'},
{id: 10, title: 'Durham'},
{id: 11, title: 'Essex'},
{id: 12, title: 'Gloucestershire'},
{id: 13, title: 'Hampshire'},
{id: 14, title: 'Hertfordshire'},
{id: 15, title: 'Huntingdonshire'},
{id: 16, title: 'Kent'},
{id: 17, title: 'Lancashire'},
{id: 18, title: 'Leicestershire'},
{id: 19, title: 'Lincolnshire'},
{id: 20, title: 'Middlesex'},
{id: 21, title: 'Norfolk'},
{id: 22, title: 'Northamptonshire'},
{id: 23, title: 'Northumberland'},
{id: 24, title: 'Nottinghamshire'},
{id: 25, title: 'Northamptonshire'},
{id: 26, title: 'Oxfordshire'},
{id: 27, title: 'Northamptonshire'},
{id: 28, title: 'Rutland'},
{id: 29, title: 'Shropshire'},
{id: 30, title: 'Somerset'},
{id: 31, title: 'Staffordshire'},
{id: 32, title: 'Suffolk'},
{id: 33, title: 'Surrey'},
{id: 34, title: 'Sussex'},
{id: 35, title: 'Warwickshire'},
{id: 36, title: 'Westmoreland'},
{id: 37, title: 'Wiltshire'},
{id: 38, title: 'Worcestershire'},
{id: 39, title: 'Yorkshire'}
];
var titles = ['Dr.', 'Mr.', 'Mrs.', 'Miss', 'Ms.'];
var columns:ReactDataGrid.Column[] = [
{
key: 'id',
name: 'ID',
width: 80,
resizable: true
},
{
key: 'avartar',
name: 'Avartar',
width: 60,
formatter: ReactDataGridPlugins.Formatters.ImageFormatter,
resizable: true,
headerRenderer: <ReactDataGridPlugins.Formatters.ImageFormatter value={faker.image.cats()}/>
},
{
key: 'county',
name: 'County',
editor: <AutoCompleteEditor options={counties}/>,
width: 200,
resizable: true,
getRowMetaData: (rowdata: any, column: ReactDataGrid.Column) => {
return {};
}
},
{
key: 'title',
name: 'Title',
editor: <DropDownEditor options={titles}/>,
width: 200,
resizable: true,
events: {
onDoubleClick: function () {
console.log("The user double clicked on title column");
}
}
},
{
key: 'firstName',
name: 'First Name',
editable: true,
width: 200,
resizable: true
},
{
key: 'lastName',
name: 'Last Name',
editable: true,
width: 200,
resizable: true
},
{
key: 'email',
name: 'Email',
editable: true,
width: 200,
resizable: true
},
{
key: 'street',
name: 'Street',
editable: true,
width: 200,
resizable: true
},
{
key: 'zipCode',
name: 'ZipCode',
editable: true,
width: 200,
resizable: true
},
{
key: 'date',
name: 'Date',
editable: true,
width: 200,
resizable: true
},
{
key: 'bs',
name: 'bs',
editable: true,
width: 200,
resizable: true
},
{
key: 'catchPhrase',
name: 'Catch Phrase',
editable: true,
width: 200,
resizable: true
},
{
key: 'companyName',
name: 'Company Name',
editable: true,
width: 200,
resizable: true,
filterable: true,
filterRenderer: CustomFilterHeaderCell
},
{
key: 'sentence',
name: 'Sentence',
editable: true,
width: 200,
resizable: true,
cellClass: 'sentence-class'
}
];
class Example extends React.Component<any, any> {
getInitialState() {
var fakeRows = createRows(2000);
return {rows: fakeRows};
}
getColumns() {
var clonedColumns = columns.slice();
clonedColumns[2].events = {
onClick: function (ev:React.SyntheticEvent<any>, args:{idx:number, rowIdx:number}) {
var idx = args.idx;
var rowIdx = args.rowIdx;
this.refs.grid.openCellEditor(rowIdx, idx);
}.bind(this)
};
return clonedColumns;
}
handleGridRowsUpdated(updatedRowData:ReactDataGrid.GridRowsUpdatedEvent) {
var rows = this.state.rows;
for (var i = updatedRowData.fromRow; i <= updatedRowData.toRow; i++) {
var rowToUpdate = rows[i];
var updatedRow = Object.assign({}, rowToUpdate, updatedRowData.updated);
rows[i] = updatedRow;
}
this.setState({rows: rows});
}
onRowExpandToggle = ({ columnGroupName, name, shouldExpand }:ReactDataGrid.OnRowExpandToggle ) => {
let expandedRows = Object.assign({}, this.state.expandedRows);
expandedRows[columnGroupName] = Object.assign({}, expandedRows[columnGroupName]);
expandedRows[columnGroupName][name] = {isExpanded: shouldExpand};
this.setState({expandedRows: expandedRows});
}
onRowClick(rowIdx:number, row: Object) {
// Do nothing, just test that it accepts an event
}
getRows() {
const rows = Selectors.getRows(this.state);
console.log(rows);
return rows;
}
handleAddRow(e:any) {
var newRow = {
value: e.newRowIndex,
userStory: '',
developer: '',
epic: ''
};
var rows = this.state.rows;
rows.push(newRow);
this.setState({rows: rows});
}
getRowAt(index:number) {
this.getRows();
if (index < 0 || index > this.getSize()) {
return undefined;
}
return this.state.rows[index];
}
getSize() {
return this.state.rows.length;
}
onRowsSelected(rows: Array<ReactDataGrid.SelectionParams>) {
var selectedIndexes = this.state.selectedIndexes as Array<number>;
this.setState({selectedIndexes: selectedIndexes.concat(rows.map(r => r.rowIdx))});
}
onRowsDeselected(rows: Array<ReactDataGrid.SelectionParams>) {
var rowIndexes = rows.map(r => r.rowIdx);
var selectedIndexes = this.state.selectedIndexes as Array<number>;
this.setState({selectedIndexes: selectedIndexes.filter(i => rowIndexes.indexOf(i) === -1 )});
}
render() {
let selectedRows = ['id1', 'id2'];
return (
<ReactDataGrid
ref='grid'
enableCellSelect={true}
enableDragAndDrop={true}
columns={this.getColumns()}
rowGetter={this.getRowAt}
rowsCount={this.getSize()}
onGridRowsUpdated={this.handleGridRowsUpdated}
onRowExpandToggle={this.onRowExpandToggle}
toolbar={<Toolbar onAddRow={this.handleAddRow}/>}
enableRowSelect={true}
rowHeight={50}
minHeight={600}
rowScrollTimeout={200}
rowSelection={{
showCheckbox: true,
enableShiftSelect: true,
onRowsSelected: this.onRowsSelected,
onRowsDeselected: this.onRowsDeselected,
selectBy: {
keys: {rowKey: 'id', values: selectedRows}
}
}}
rowActionsCell={CustomRowSelectorCell}
selectAllRenderer={CustomSelectAll}
onRowClick={this.onRowClick}
/>
);
}
}

33
types/react-data-grid/v2/tsconfig.json Normal file
View File

@@ -0,0 +1,33 @@
{
"compilerOptions": {
"module": "commonjs",
"lib": [
"es6",
"dom"
],
"noImplicitAny": true,
"noImplicitThis": false,
"strictNullChecks": false,
"strictFunctionTypes": true,
"baseUrl": "../../",
"jsx": "react",
"typeRoots": [
"../../"
],
"types": [],
"noEmit": true,
"forceConsistentCasingInFileNames": true,
"paths": {
"react-data-grid": [
"react-data-grid/v2"
],
"react-data-grid/*": [
"react-data-grid/v2/*"
]
}
},
"files": [
"index.d.ts",
"react-data-grid-tests.tsx"
]
}

80
types/react-data-grid/v2/tslint.json Normal file
View File

@@ -0,0 +1,80 @@
{
"extends": "dtslint/dt.json",
"rules": {
"adjacent-overload-signatures": false,
"array-type": false,
"arrow-return-shorthand": false,
"ban-types": false,
"callable-types": false,
"comment-format": false,
"dt-header": false,
"eofline": false,
"export-just-namespace": false,
"import-spacing": false,
"interface-name": false,
"interface-over-type-literal": false,
"jsdoc-format": false,
"max-line-length": false,
"member-access": false,
"new-parens": false,
"no-any-union": false,
"no-boolean-literal-compare": false,
"no-conditional-assignment": false,
"no-consecutive-blank-lines": false,
"no-construct": false,
"no-declare-current-package": false,
"no-duplicate-imports": false,
"no-duplicate-variable": false,
"no-empty-interface": false,
"no-for-in-array": false,
"no-inferrable-types": false,
"no-internal-module": false,
"no-irregular-whitespace": false,
"no-mergeable-namespace": false,
"no-misused-new": false,
"no-namespace": false,
"no-object-literal-type-assertion": false,
"no-padding": false,
"no-redundant-jsdoc": false,
"no-redundant-jsdoc-2": false,
"no-redundant-undefined": false,
"no-reference-import": false,
"no-relative-import-in-test": false,
"no-self-import": false,
"no-single-declare-module": false,
"no-string-throw": false,
"no-unnecessary-callback-wrapper": false,
"no-unnecessary-class": false,
"no-unnecessary-generics": false,
"no-unnecessary-qualifier": false,
"no-unnecessary-type-assertion": false,
"no-useless-files": false,
"no-var-keyword": false,
"no-var-requires": false,
"no-void-expression": false,
"no-trailing-whitespace": false,
"object-literal-key-quotes": false,
"object-literal-shorthand": false,
"one-line": false,
"one-variable-per-declaration": false,
"only-arrow-functions": false,
"prefer-conditional-expression": false,
"prefer-const": false,
"prefer-declare-function": false,
"prefer-for-of": false,
"prefer-method-signature": false,
"prefer-object-spread": false,
"prefer-template": false,
"radix": false,
"semicolon": false,
"space-before-function-paren": false,
"space-within-parens": false,
"strict-export-declare-modifiers": false,
"trim-file": false,
"triple-equals": false,
"typedef-whitespace": false,
"unified-signatures": false,
"void-return": false,
"whitespace": false
}
}