mirror of
https://github.com/zhigang1992/DefinitelyTyped.git
synced 2026-05-22 20:37:58 +08:00
Initial definitions for react-datagrid.
This commit is contained in:
stephenjelfs
82
react-datagrid/react-datagrid-test.tsx
Normal file
82
react-datagrid/react-datagrid-test.tsx
Normal file
@@ -0,0 +1,82 @@
|
||||
/// <reference path="../es6-promise/es6-promise.d.ts"/>
|
||||
/// <reference path="./react-datagrid.d.ts" />
|
||||
/// <reference path="../react/react.d.ts" />
|
||||
|
||||
import * as React from "react";
|
||||
import ReactDataGrid = require("react-datagrid");
|
||||
|
||||
var data: any[] = [];
|
||||
|
||||
var columns: ReactDataGrid.Column[] = [
|
||||
{ name: 'index', title: '#', width: 50 },
|
||||
{ name: 'firstName', style: { color: 'red' }, visible: true},
|
||||
{ name: 'lastName', render: (v) => {return v + " Phd"}},
|
||||
{ name: 'city', textAlign: 'right', defaultVisible: true},
|
||||
{ name: 'email', defaultHidden: true }
|
||||
];
|
||||
var selected = {};
|
||||
var sortInfo: ReactDataGrid.SortInfo[] = [ { name: 'country', dir: 'asc'}]
|
||||
|
||||
export module X {
|
||||
export class ExampleBasic extends React.Component<{},{}> {
|
||||
render(): React.ReactElement<any> {
|
||||
return (
|
||||
<ReactDataGrid
|
||||
key={0}
|
||||
ref='dlgBasic'
|
||||
idProperty='id'
|
||||
dataSource={data}
|
||||
columns={columns}/>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class ExampleFull extends React.Component<{},{}> {
|
||||
|
||||
render(): React.ReactElement<any> {
|
||||
return (
|
||||
<ReactDataGrid
|
||||
key={1}
|
||||
ref='dlgFull'
|
||||
idProperty='id'
|
||||
dataSource={data}
|
||||
columns={columns}
|
||||
style={{height: 500}}
|
||||
withColumnMenu={false}
|
||||
selected={selected}
|
||||
sortInfo={sortInfo}
|
||||
groupBy={['country','grade']}
|
||||
liveFilter={true}
|
||||
emptyText={'No records'}
|
||||
loading={true}
|
||||
loadMaskOverHeader={false}
|
||||
rowStyle={{color: 'blue'}}
|
||||
showCellBorders="vertical"
|
||||
rowHeight={50}
|
||||
defaultPageSize={110}
|
||||
paginationToolbarProps={{
|
||||
pageSizes: [100, 1000,2000],
|
||||
showPageSize: false,
|
||||
showRefreshIcon: false,
|
||||
iconSize: 30,
|
||||
iconProps: {
|
||||
style: {fill: '#FF8484'},
|
||||
overStyle: {fill: 'red'},
|
||||
disabledStyle: { fill: '#808080'}
|
||||
}
|
||||
}}
|
||||
pagination={true}
|
||||
page={1}
|
||||
pageSize={100}
|
||||
onPageChange={(page: number) => {}}
|
||||
onPageSizeChange={(pageSize: number, props: ReactDataGrid.DataGridProps) => {}}
|
||||
onColumnOrderChange={(index: number, dropIndex: number) => {}}
|
||||
onColumnResize={(firstCol: ReactDataGrid.Column, firstSize: number, secondCol: ReactDataGrid.Column, secondSize: number) => {}}
|
||||
onSelectionChange={(newSelectedId: string, data: any) => {}}
|
||||
onSortChange={(sortInfo: ReactDataGrid.SortInfo[]) => {}}
|
||||
onFilter={(column: ReactDataGrid.Column, value: any, allFilterValues: any[]) => {} }
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
310
react-datagrid/react-datagrid.d.ts
vendored
Normal file
310
react-datagrid/react-datagrid.d.ts
vendored
Normal file
@@ -0,0 +1,310 @@
|
||||
// Type definitions for react-datagrid 1.2.15
|
||||
// Project: https://github.com/zippyui/react-datagrid.git
|
||||
// Definitions by: Stephen Jelfs <https://github.com/stephenjelfs>
|
||||
// Definitions: https://github.com/borisyankov/DefinitelyTyped
|
||||
|
||||
/// <reference path="../react/react.d.ts"/>
|
||||
|
||||
declare module "react-datagrid" {
|
||||
import DataGrid = ReactDataGrid.DataGrid;
|
||||
export = DataGrid;
|
||||
}
|
||||
|
||||
declare namespace ReactDataGrid {
|
||||
import React = __React;
|
||||
|
||||
interface DataGridProps extends React.Props<DataGrid> {
|
||||
/**
|
||||
* Array/String/Function/Promise - for local data, an array of object
|
||||
* to render in the grid. For remote data, a string url, or a function
|
||||
* that returns a promise.
|
||||
*/
|
||||
dataSource: any[] | string | ((query: {pageSize: number, skip: number}) => Promise<any[]>);
|
||||
|
||||
dataSourceCount?: number;
|
||||
|
||||
/**
|
||||
* String - the name of the property where the id is found for each
|
||||
* object in the data array.
|
||||
*/
|
||||
idProperty: string;
|
||||
|
||||
/**
|
||||
* Array - an array of columns that are going to be rendered in the
|
||||
* grid.
|
||||
*/
|
||||
columns: Column[];
|
||||
|
||||
/**
|
||||
* Sorting the data array is not done by the grid. You can however
|
||||
* pass in sort info so the grid renders with sorting icons as needed.
|
||||
*/
|
||||
onSortChange?: (sortInfo: SortInfo[]) => void;
|
||||
|
||||
/**
|
||||
* Array - an array with sorting information.
|
||||
*/
|
||||
sortInfo?: SortInfo[];
|
||||
|
||||
style?: __React.CSSProperties;
|
||||
|
||||
/**
|
||||
* Object/Function - you can specify either a style object to be
|
||||
* applied to all rows, or a function. The function is called with
|
||||
* (data, props) (so you have access to props.index for example) and
|
||||
* is expected to return a style object.
|
||||
*/
|
||||
rowStyle?: __React.CSSProperties | ((data: any, props: RowProps) => React.CSSProperties);
|
||||
|
||||
/**
|
||||
* Boolean - show a column menu to show/hide columns.
|
||||
*/
|
||||
withColumnMenu?: boolean;
|
||||
|
||||
/**
|
||||
* If you want to enable column reordering, just specify the
|
||||
* onColumnOrderChange prop on the grid:
|
||||
*/
|
||||
onColumnOrderChange?: (index: number, dropIndex: number) => void;
|
||||
|
||||
/**
|
||||
* If you want to enable column resized, just specify the
|
||||
* onColumnResize prop on the grid:
|
||||
*/
|
||||
onColumnResize?: (firstCol: Column, firstSize: number,
|
||||
secondCol: Column, secondSize: number) => void;
|
||||
|
||||
/**
|
||||
* If you want to enable selection, just specify the
|
||||
* onSelectionChange prop on the grid:
|
||||
*/
|
||||
onSelectionChange?: (newSelected: {}, data: any) => void;
|
||||
|
||||
/**
|
||||
* When a column is shown/hidden, you can be notified using the
|
||||
* onColumnVisibilityChange callback prop.
|
||||
*/
|
||||
onColumnVisibilityChange?: (column: Column, visibility: boolean) => void;
|
||||
|
||||
/**
|
||||
* The current selection.
|
||||
*/
|
||||
selected?: {};
|
||||
|
||||
/**
|
||||
* Group rows by matching values.
|
||||
*/
|
||||
groupBy?: any[];
|
||||
|
||||
/**
|
||||
* If you want to enable filter, just specify the
|
||||
* onFilter prop on the grid:
|
||||
*/
|
||||
onFilter?: (column: Column, value: any, allFilterValues: any[]) => void;
|
||||
|
||||
/**
|
||||
* To apply the filter while typing.
|
||||
*/
|
||||
liveFilter?: boolean;
|
||||
|
||||
/**
|
||||
* Empty text for no records.
|
||||
*/
|
||||
emptyText?: string;
|
||||
|
||||
/**
|
||||
* Loading grid.
|
||||
*/
|
||||
loading?: boolean;
|
||||
|
||||
/**
|
||||
* If you dont want loadMask over header, specify
|
||||
*/
|
||||
loadMaskOverHeader?: boolean;
|
||||
|
||||
/**
|
||||
* Show cell borders. Other valid values: 'horizontal', 'vertical'.
|
||||
*/
|
||||
showCellBorders?: boolean | string;
|
||||
|
||||
/**
|
||||
* Custom row height.
|
||||
*/
|
||||
rowHeight?: number;
|
||||
|
||||
/**
|
||||
* When you have remote data, pagination is setup by default. If you
|
||||
* want to disable pagination, specify the pagination prop with a false
|
||||
* value.
|
||||
*/
|
||||
pagination?: boolean;
|
||||
defaultPageSize?: number;
|
||||
defaultPage?: number;
|
||||
|
||||
/**
|
||||
* Number - controlled alternative for defaultPageSize. When pageSize
|
||||
* changes, onPageSizeChange(pageSize) is called.
|
||||
*/
|
||||
pageSize?: number;
|
||||
|
||||
/**
|
||||
* Number - controlled alternative for defaultPage. When page changes,
|
||||
* onPageChange(page) is called.
|
||||
*/
|
||||
page?: number;
|
||||
|
||||
/**
|
||||
* Customize the pagination toolbar.
|
||||
*/
|
||||
paginationToolbarProps?: PaginationToolbarProps;
|
||||
|
||||
/**
|
||||
* handle page changes.
|
||||
*/
|
||||
onPageChange?: (page: number) => void;
|
||||
|
||||
/**
|
||||
* handle page size changes.
|
||||
*/
|
||||
onPageSizeChange?: (pageSize: number, props: DataGridProps) => void;
|
||||
}
|
||||
|
||||
interface SortInfo {
|
||||
name: string;
|
||||
dir: string;
|
||||
}
|
||||
|
||||
interface Column {
|
||||
/**
|
||||
* String - each column should have a name property.
|
||||
*/
|
||||
name: string;
|
||||
|
||||
/**
|
||||
* String/ReactElement - a title to show in the header. If not
|
||||
* specified, a humanized version of name will be used. Can be a string
|
||||
* or anything that React can render, so you can customize it as you
|
||||
* please.
|
||||
*/
|
||||
title?: string | React.ReactElement<any>;
|
||||
|
||||
/**
|
||||
* Function - if you want custom rendering, specify this property.
|
||||
*
|
||||
* The column.render function is called with 3 args:
|
||||
* value - the default value to be rendered (equals to data[column.name])
|
||||
* data - the corresponding data object for the current row
|
||||
cellProps - an object with props for the current cell
|
||||
*/
|
||||
render?: (value: any, data: any, cellProps: CellProps) => any;
|
||||
|
||||
/**
|
||||
* Object - if you want cells in this column to be have a custom
|
||||
* style.
|
||||
*/
|
||||
style?: __React.CSSProperties;
|
||||
|
||||
/**
|
||||
* String - one of 'left', 'right', 'center'.
|
||||
*/
|
||||
textAlign?: string;
|
||||
|
||||
/**
|
||||
* String - a className to be applied to all cells in this column
|
||||
*/
|
||||
className?: string;
|
||||
|
||||
width?: number;
|
||||
|
||||
minWidth?: number;
|
||||
|
||||
/**
|
||||
* Columns are flexible via flexbox. Specify a flex property for this.
|
||||
* Unless a column specifies a flex or a width property, it is assumed
|
||||
* to have flex: 1.
|
||||
*/
|
||||
flex?: number;
|
||||
|
||||
/**
|
||||
* Specify a column as visible/hidden.
|
||||
*/
|
||||
defaultVisible?: boolean;
|
||||
defaultHidden?: boolean;
|
||||
|
||||
/**
|
||||
* Boolean - controlled (which means you have to manually set column
|
||||
* visibility when it changes, by using onColumnVisibilityChange).
|
||||
*/
|
||||
visible?: boolean;
|
||||
}
|
||||
|
||||
interface CellProps {
|
||||
/**
|
||||
* the index of the row
|
||||
*/
|
||||
rowIndex: number;
|
||||
|
||||
/**
|
||||
* the index of the column
|
||||
*/
|
||||
index: number;
|
||||
|
||||
/**
|
||||
* a style for the cell
|
||||
*/
|
||||
style: React.CSSProperties;
|
||||
|
||||
/**
|
||||
* a class name for the cell
|
||||
*/
|
||||
className: string;
|
||||
}
|
||||
|
||||
interface RowProps {
|
||||
/**
|
||||
* the index of the row
|
||||
*/
|
||||
index: number;
|
||||
|
||||
/**
|
||||
* a class name for the row when the mouse is over it
|
||||
*/
|
||||
overClassName: string;
|
||||
|
||||
/**
|
||||
* a class name for the row when selected
|
||||
*/
|
||||
selectedClassName: string;
|
||||
|
||||
/**
|
||||
* a class name for the row
|
||||
*/
|
||||
className: string;
|
||||
}
|
||||
|
||||
interface PaginationToolbarProps {
|
||||
/**
|
||||
* Available page sizes.
|
||||
*/
|
||||
pageSizes: number[];
|
||||
|
||||
/**
|
||||
* Hide/show page sizes.
|
||||
*/
|
||||
showPageSize: boolean;
|
||||
|
||||
/**
|
||||
* Customize icons.
|
||||
*/
|
||||
showRefreshIcon: boolean;
|
||||
iconSize: number;
|
||||
iconProps: {
|
||||
style: React.SVGAttributes,
|
||||
overStyle: React.SVGAttributes,
|
||||
disabledStyle: React.SVGAttributes
|
||||
}
|
||||
}
|
||||
|
||||
export class DataGrid extends __React.Component<DataGridProps, {}> {
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user