From 1a3673bf0f56a8edc75126b342ffcf5506afa776 Mon Sep 17 00:00:00 2001 From: Petar Paar Date: Sat, 24 Oct 2015 00:10:07 -0700 Subject: [PATCH 1/3] Add definition for fixed-data-table --- fixed-data-table/fixed-data-table.d.ts | 395 +++++++++++++++++++++++++ 1 file changed, 395 insertions(+) create mode 100644 fixed-data-table/fixed-data-table.d.ts diff --git a/fixed-data-table/fixed-data-table.d.ts b/fixed-data-table/fixed-data-table.d.ts new file mode 100644 index 0000000000..335f6e0444 --- /dev/null +++ b/fixed-data-table/fixed-data-table.d.ts @@ -0,0 +1,395 @@ +// Type definitions for fixed-data-table 0.4.7 +// Project: https://github.com/facebook/fixed-data-table +// Definitions by: Petar Paar +// Definitions: https://github.com/borisyankov/DefinitelyTyped + +/// +declare module FixedDataTable { + var version: string; + + interface TableProps { + /** + * Pixel width of table. If all columns do not fit, + * a horizontal scrollbar will appear. + */ + width: number; + + /** + * Pixel height of table. If all rows do not fit, + * a vertical scrollbar will appear. + * + * Either `height` or `maxHeight` must be specified. + */ + height?: number; + + /** + * Maximum pixel height of table. If all rows do not fit, + * a vertical scrollbar will appear. + * + * Either `height` or `maxHeight` must be specified. + */ + maxHeight?: number; + + /** + * Pixel height of table's owner, this is used in a managed scrolling + * situation when you want to slide the table up from below the fold + * without having to constantly update the height on every scroll tick. + * Instead, vary this property on scroll. By using `ownerHeight`, we + * over-render the table while making sure the footer and horizontal + * scrollbar of the table are visible when the current space for the table + * in view is smaller than the final, over-flowing height of table. It + * allows us to avoid resizing and reflowing table when it is moving in the + * view. + * + * This is used if `ownerHeight < height` (or `maxHeight`). + */ + ownerHeight?: number; + + /** + * hidden or auto + */ + overflowX?: string; + overflowY?: string; + + /** + * Number of rows in the table. + */ + rowsCount: number; + + /** + * Pixel height of rows unless `rowHeightGetter` is specified and returns + * different value. + */ + rowHeight: number; + + /** + * If specified, `rowHeightGetter(index)` is called for each row and the + * returned value overrides `rowHeight` for particular row. + */ + rowHeightGetter?: Function; + + /** + * To get rows to display in table, `rowGetter(index)` + * is called. `rowGetter` should be smart enough to handle async + * fetching of data and return temporary objects + * while data is being fetched. + */ + rowGetter: Function; + + /** + * To get any additional CSS classes that should be added to a row, + * `rowClassNameGetter(index)` is called. + */ + rowClassNameGetter?: Function; + + /** + * Pixel height of the column group header. + */ + groupHeaderHeight?: number; + + /** + * Pixel height of header. + */ + headerHeight: number; + + /** + * Function that is called to get the data for the header row. + * If the function returns null, the header will be set to the + * Column's label property. + */ + headerDataGetter?: Function; + + /** + * Pixel height of footer. + */ + footerHeight?: number; + + /** + * DEPRECATED - use footerDataGetter instead. + * Data that will be passed to footer cell renderers. + */ + footerData?: any, + + /** + * Function that is called to get the data for the footer row. + */ + footerDataGetter?: Function; + + /** + * Value of horizontal scroll. + */ + scrollLeft?: number; + + /** + * Index of column to scroll to. + */ + scrollToColumn?: number; + + /** + * Value of vertical scroll. + */ + scrollTop?: number; + + /** + * Index of row to scroll to. + */ + scrollToRow?: number; + + /** + * Callback that is called when scrolling starts with current horizontal + * and vertical scroll values. + */ + onScrollStart?: Function; + + /** + * Callback that is called when scrolling ends or stops with new horizontal + * and vertical scroll values. + */ + onScrollEnd?: Function; + + /** + * Callback that is called when `rowHeightGetter` returns a different height + * for a row than the `rowHeight` prop. This is necessary because initially + * table estimates heights of some parts of the content. + */ + onContentHeightChange?: Function; + + /** + * Callback that is called when a row is clicked. + */ + onRowClick?: Function; + + /** + * Callback that is called when a row is double clicked. + */ + onRowDoubleClick?: Function; + + /** + * Callback that is called when a mouse-down event happens on a row. + */ + onRowMouseDown?: Function; + + /** + * Callback that is called when a mouse-enter event happens on a row. + */ + onRowMouseEnter?: Function; + + /** + * Callback that is called when a mouse-leave event happens on a row. + */ + onRowMouseLeave?: Function; + + /** + * Callback that is called when resizer has been released + * and column needs to be updated. + * + * Required if the isResizable property is true on any column. + * + * ``` + * function( + * newColumnWidth: number, + * dataKey: string, + * ) + * ``` + */ + onColumnResizeEndCallback?: Function; + + /** + * Whether a column is currently being resized. + */ + isColumnResizing?: boolean + } + + interface ColumnProps { + /** + * The horizontal alignment of the table cell content. + * 'left', 'center', 'right' + */ + align?: string, + + /** + * className for this column's header cell. + */ + headerClassName?: string; + + /** + * className for this column's footer cell. + */ + footerClassName?: string; + + /** + * className for each of this column's data cells. + */ + cellClassName?: string; + + /** + * The cell renderer that returns React-renderable content for table cell. + * ``` + * function( + * cellData: any, + * cellDataKey: string, + * rowData: object, + * rowIndex: number, + * columnData: any, + * width: number + * ): ?$jsx + * ``` + */ + cellRenderer?: Function; + + /** + * The getter `function(string_cellDataKey, object_rowData)` that returns + * the cell data for the `cellRenderer`. + * If not provided, the cell data will be collected from + * `rowData[cellDataKey]` instead. The value that `cellDataGetter` returns + * will be used to determine whether the cell should re-render. + */ + cellDataGetter?: Function; + + /** + * The key to retrieve the cell data from the data row. Provided key type + * must be either `string` or `number`. Since we use this + * for keys, it must be specified for each column. + */ + dataKey: string|number, + + /** + * Controls if the column is fixed when scrolling in the X axis. + */ + fixed?: boolean, + + /** + * The cell renderer that returns React-renderable content for table column + * header. + * ``` + * function( + * label: ?string, + * cellDataKey: string, + * columnData: any, + * rowData: array, + * width: number + * ): ?$jsx + * ``` + */ + headerRenderer?: Function; + + /** + * The cell renderer that returns React-renderable content for table column + * footer. + * ``` + * function( + * label: ?string, + * cellDataKey: string, + * columnData: any, + * rowData: array, + * width: number + * ): ?$jsx + * ``` + */ + footerRenderer?: Function; + + /** + * Bucket for any data to be passed into column renderer functions. + */ + columnData?: any, + + /** + * The column's header label. + */ + label: string; + + /** + * The pixel width of the column. + */ + width: number; + + /** + * If this is a resizable column this is its minimum pixel width. + */ + minWidth?: number; + + /** + * If this is a resizable column this is its maximum pixel width. + */ + maxWidth?: number; + + /** + * The grow factor relative to other columns. Same as the flex-grow API + * from http://www.w3.org/TR/css3-flexbox/. Basically, take any available + * extra width and distribute it proportionally according to all columns' + * flexGrow values. Defaults to zero (no-flexing). + */ + flexGrow?: number; + + /** + * Whether the column can be resized with the + * FixedDataTableColumnResizeHandle. Please note that if a column + * has a flex grow, once you resize the column this will be set to 0. + * + * This property only provides the UI for the column resizing. If this + * is set to true, you will need ot se the onColumnResizeEndCallback table + * property and render your columns appropriately. + */ + isResizable?: boolean, + + /** + * Experimental feature + * Whether cells in this column can be removed from document when outside + * of viewport as a result of horizontal scrolling. + * Setting this property to true allows the table to not render cells in + * particular column that are outside of viewport for visible rows. This + * allows to create table with many columns and not have vertical scrolling + * performance drop. + * Setting the property to false will keep previous behaviour and keep + * cell rendered if the row it belongs to is visible. + */ + allowCellsRecycling?: boolean + } + + interface ColumnGroupProps { + /** + * The horizontal alignment of the table cell content. + * 'left', 'center', 'right' + */ + align?: string; + + /** + * Controls if the column group is fixed when scrolling in the X axis. + */ + fixed?: boolean, + + /** + * Bucket for any data to be passed into column group renderer functions. + */ + columnGroupData?: any, + + /** + * The column group's header label. + */ + label?: string; + + /** + * The cell renderer that returns React-renderable content for a table + * column group header. If it's not specified, the label from props will + * be rendered as header content. + * ``` + * function( + * label: ?string, + * cellDataKey: string, + * columnGroupData: any, + * rowData: array, // array of labels of all columnGroups + * width: number + * ): ?$jsx + * ``` + */ + groupHeaderRenderer?: Function; + } + + class Table extends React.Component {} + class Column extends React.Component {} + class ColumnGroup extends React.Component {} +} + +declare module "fixed-data-table" { + export = FixedDataTable; +} \ No newline at end of file From 4481020e22f30631b0f553b3de2034298c584313 Mon Sep 17 00:00:00 2001 From: Petar Paar Date: Sat, 24 Oct 2015 01:36:41 -0700 Subject: [PATCH 2/3] fixed-data-table d.ts added --- fixed-data-table/fixed-data-table-tests.tsx | 37 ++++++++++++++++ .../fixed-data-table-tests.tsx.tscparams | 1 + fixed-data-table/fixed-data-table.d.ts | 43 +++++++++++-------- 3 files changed, 63 insertions(+), 18 deletions(-) create mode 100644 fixed-data-table/fixed-data-table-tests.tsx create mode 100644 fixed-data-table/fixed-data-table-tests.tsx.tscparams diff --git a/fixed-data-table/fixed-data-table-tests.tsx b/fixed-data-table/fixed-data-table-tests.tsx new file mode 100644 index 0000000000..a3b383dcc6 --- /dev/null +++ b/fixed-data-table/fixed-data-table-tests.tsx @@ -0,0 +1,37 @@ +/// +/// + +import * as React from "react"; +import * as FixedDataTable from "fixed-data-table"; + +var rows = [ + ['a1', 'b1', 'c1'], + ['a2', 'b2', 'c2'], + ['a3', 'b3', 'c3'], + // .... and more +]; + +function rowGetter(rowIndex) { + return rows[rowIndex]; +} + + var table = + + + + +React.render(table, document.body); diff --git a/fixed-data-table/fixed-data-table-tests.tsx.tscparams b/fixed-data-table/fixed-data-table-tests.tsx.tscparams new file mode 100644 index 0000000000..c90abf04fc --- /dev/null +++ b/fixed-data-table/fixed-data-table-tests.tsx.tscparams @@ -0,0 +1 @@ +--target es5 --noImplicitAny --experimentalDecorators --jsx react diff --git a/fixed-data-table/fixed-data-table.d.ts b/fixed-data-table/fixed-data-table.d.ts index 335f6e0444..1dc22dc3de 100644 --- a/fixed-data-table/fixed-data-table.d.ts +++ b/fixed-data-table/fixed-data-table.d.ts @@ -3,11 +3,12 @@ // Definitions by: Petar Paar // Definitions: https://github.com/borisyankov/DefinitelyTyped -/// -declare module FixedDataTable { - var version: string; +/// - interface TableProps { +declare module FixedDataTable { + export var version: string; + + export interface TableProps extends __React.Props { /** * Pixel width of table. If all columns do not fit, * a horizontal scrollbar will appear. @@ -108,7 +109,7 @@ declare module FixedDataTable { * DEPRECATED - use footerDataGetter instead. * Data that will be passed to footer cell renderers. */ - footerData?: any, + footerData?: any; /** * Function that is called to get the data for the footer row. @@ -205,7 +206,7 @@ declare module FixedDataTable { * The horizontal alignment of the table cell content. * 'left', 'center', 'right' */ - align?: string, + align?: string; /** * className for this column's header cell. @@ -251,12 +252,12 @@ declare module FixedDataTable { * must be either `string` or `number`. Since we use this * for keys, it must be specified for each column. */ - dataKey: string|number, + dataKey: string|number; /** * Controls if the column is fixed when scrolling in the X axis. */ - fixed?: boolean, + fixed?: boolean; /** * The cell renderer that returns React-renderable content for table column @@ -291,7 +292,7 @@ declare module FixedDataTable { /** * Bucket for any data to be passed into column renderer functions. */ - columnData?: any, + columnData?: any; /** * The column's header label. @@ -330,7 +331,7 @@ declare module FixedDataTable { * is set to true, you will need ot se the onColumnResizeEndCallback table * property and render your columns appropriately. */ - isResizable?: boolean, + isResizable?: boolean; /** * Experimental feature @@ -343,10 +344,10 @@ declare module FixedDataTable { * Setting the property to false will keep previous behaviour and keep * cell rendered if the row it belongs to is visible. */ - allowCellsRecycling?: boolean + allowCellsRecycling?: boolean; } - interface ColumnGroupProps { + export interface ColumnGroupProps { /** * The horizontal alignment of the table cell content. * 'left', 'center', 'right' @@ -356,12 +357,12 @@ declare module FixedDataTable { /** * Controls if the column group is fixed when scrolling in the X axis. */ - fixed?: boolean, + fixed?: boolean; /** * Bucket for any data to be passed into column group renderer functions. */ - columnGroupData?: any, + columnGroupData?: any; /** * The column group's header label. @@ -385,11 +386,17 @@ declare module FixedDataTable { groupHeaderRenderer?: Function; } - class Table extends React.Component {} - class Column extends React.Component {} - class ColumnGroup extends React.Component {} + export class Table extends __React.Component { + render(): __React.DOMElement + } + export class Column extends __React.Component { + render(): __React.DOMElement + } + export class ColumnGroup extends __React.Component { + render(): __React.DOMElement + } } -declare module "fixed-data-table" { +declare module "fixed-data-table" { export = FixedDataTable; } \ No newline at end of file From 46fbd7ea52ab26ff410318dc683a93553eeae8f6 Mon Sep 17 00:00:00 2001 From: Petar Paar Date: Sat, 24 Oct 2015 01:39:19 -0700 Subject: [PATCH 3/3] test fix --- fixed-data-table/fixed-data-table-tests.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/fixed-data-table/fixed-data-table-tests.tsx b/fixed-data-table/fixed-data-table-tests.tsx index a3b383dcc6..9265186fbd 100644 --- a/fixed-data-table/fixed-data-table-tests.tsx +++ b/fixed-data-table/fixed-data-table-tests.tsx @@ -11,7 +11,7 @@ var rows = [ // .... and more ]; -function rowGetter(rowIndex) { +function rowGetter(rowIndex: number) { return rows[rowIndex]; }