From 9d5c2cb2e19ccbd87cfd38b972a445732ff1b6dc Mon Sep 17 00:00:00 2001 From: Ilya Petukhov Date: Fri, 24 Nov 2017 12:22:37 +0300 Subject: [PATCH] Add type definitions for the fixed-data-table-2 package --- .../fixed-data-table-2-tests.tsx | 196 +++++ types/fixed-data-table-2/index.d.ts | 677 ++++++++++++++++++ types/fixed-data-table-2/tsconfig.json | 22 + types/fixed-data-table-2/tslint.json | 3 + 4 files changed, 898 insertions(+) create mode 100644 types/fixed-data-table-2/fixed-data-table-2-tests.tsx create mode 100644 types/fixed-data-table-2/index.d.ts create mode 100644 types/fixed-data-table-2/tsconfig.json create mode 100644 types/fixed-data-table-2/tslint.json diff --git a/types/fixed-data-table-2/fixed-data-table-2-tests.tsx b/types/fixed-data-table-2/fixed-data-table-2-tests.tsx new file mode 100644 index 0000000000..3b34d6a44a --- /dev/null +++ b/types/fixed-data-table-2/fixed-data-table-2-tests.tsx @@ -0,0 +1,196 @@ +/** + * The tests are based on tests from types/fixed-data-table + */ + +import * as React from "react"; +import { Table, Cell, Column, CellProps } from "fixed-data-table-2"; + +// create your Table +class MyTable1 extends React.Component { + render() { + return ( + + // add columns +
+ ); + } +} + +// create your Columns +class MyTable2 extends React.Component { + render() { + return ( + + Basic content} + width={200} + /> +
+ ); + } +} + +// provide Custom Data +interface MyTable3State { + myTableData: Array<{ name: string }>; +} + +class MyTable3 extends React.Component<{}, MyTable3State> { + constructor(props: {}) { + super(props); + + this.state = { + myTableData: [ + { name: "Rylan" }, + { name: "Amelia" }, + { name: "Estevan" }, + { name: "Florence" }, + { name: "Tressa" }, + ] + }; + } + + render() { + return ( + + Name} + cell={(props) => ( + + {this.state.myTableData[props.rowIndex].name} + + )} + width={200} + /> +
+ ); + } +} + +// Create Reusable Cells +interface RowData { + [field: string]: string; +} + +interface MyCellProps extends CellProps { + field: string; + myData: RowData[]; +} + +class MyTextCell extends React.Component { + render() { + const { rowIndex, field, myData } = this.props; + + return ( + + {myData[rowIndex!][field]} + + ); + } +} + +class MyLinkCell extends React.Component { + render() { + const { rowIndex, field, myData } = this.props; + const link: string = myData[rowIndex!][field]; + + return ( + + {link} + + ); + } +} + +interface MyTable4State { + tableData: RowData[]; +} + +class MyTable4 extends React.Component<{}, MyTable4State> { + constructor(props: {}) { + super(props); + this.state = { + tableData: [ + { name: "Rylan", email: "Angelita_Weimann42@gmail.com" }, + { name: "Amelia", email: "Dexter.Trantow57@hotmail.com" }, + { name: "Estevan", email: "Aimee7@hotmail.com" }, + { name: "Florence", email: "Jarrod.Bernier13@yahoo.com" }, + { name: "Tressa", email: "Yadira1@hotmail.com" } + ] + }; + } + + render() { + return ( + + { + ["name", "email"].map(field => + {field}} + cell={ + + } + width={200} /> + ) + } +
+ ); + } +} + +// Listen for events +class MyTable5 extends React.Component { + render() { + return ( + { }} + onScrollEnd={(x: number, y: number) => { }} + onContentHeightChange={(newHeight: number) => { }} + onRowClick={(event: React.SyntheticEvent
, rowIndex: number) => { }} + onRowDoubleClick={(event: React.SyntheticEvent
, rowIndex: number) => { }} + onRowMouseDown={(event: React.SyntheticEvent
, rowIndex: number) => { }} + onRowMouseEnter={(event: React.SyntheticEvent
, rowIndex: number) => { }} + onRowMouseLeave={(event: React.SyntheticEvent
, rowIndex: number) => { }} + onColumnResizeEndCallback={(newColumnWidth: number, columnKey: string) => { }}> + // add columns +
+ ); + } +} diff --git a/types/fixed-data-table-2/index.d.ts b/types/fixed-data-table-2/index.d.ts new file mode 100644 index 0000000000..a39397a228 --- /dev/null +++ b/types/fixed-data-table-2/index.d.ts @@ -0,0 +1,677 @@ +// Type definitions for fixed-data-table-2 0.8 +// Project: https://github.com/schrodinger/fixed-data-table-2 +// Definitions by: Ilya Petukhov +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.3 + +import * as React from "react"; + +export as namespace FixedDataTable; + +export interface RowProps { + /** the row index */ + rowIndex: number; + + /** supplied from the Table or rowHeightGetter */ + height: number; + + /** supplied from the Table */ + width: number; +} + +export interface ColumnReorderEndEvent { + /** the column before the new location of this one */ + columnBefore?: string; + + /** the column after the new location of this one */ + columnAfter?: string; + + /** the column key that was just reordered */ + reorderColumn: string; +} + +export type ElementOrFunc

= string | React.ReactElement | ((props: P) => (string | React.ReactElement)); + +export type TableRowEventHandler = (event: React.SyntheticEvent, rowIndex: number) => void; + +/** + * Data grid component with fixed or scrollable header and columns. + * + * The layout of the data table is as follows: + * + * ``` + * +---------------------------------------------------+ + * | Fixed Column Group | Scrollable Column Group | + * | Header | Header | + * | | | + * +---------------------------------------------------+ + * | | | + * | Fixed Header Columns | Scrollable Header Columns | + * | | | + * +-----------------------+---------------------------+ + * | | | + * | Fixed Body Columns | Scrollable Body Columns | + * | | | + * +-----------------------+---------------------------+ + * | | | + * | Fixed Footer Columns | Scrollable Footer Columns | + * | | | + * +-----------------------+---------------------------+ + * ``` + * + * - Fixed Column Group Header: These are the headers for a group + * of columns if included in the table that do not scroll + * vertically or horizontally. + * + * - Scrollable Column Group Header: The header for a group of columns + * that do not move while scrolling vertically, but move horizontally + * with the horizontal scrolling. + * + * - Fixed Header Columns: The header columns that do not move while scrolling + * vertically or horizontally. + * + * - Scrollable Header Columns: The header columns that do not move + * while scrolling vertically, but move horizontally with the horizontal + * scrolling. + * + * - Fixed Body Columns: The body columns that do not move while scrolling + * horizontally, but move vertically with the vertical scrolling. + * + * - Scrollable Body Columns: The body columns that move while scrolling + * vertically or horizontally. + */ +export interface TableProps extends React.ClassAttributes
{ + /** + * 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; + + /** + * Class name to be passed into parent container + */ + className?: string; + + /** + * 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; + + overflowX?: 'hidden' | 'auto'; + overflowY?: 'hidden' | 'auto'; + + /** + * Boolean flag indicating of touch scrolling should be enabled + * This feature is current in beta and may have bugs + */ + touchScrollEnabled?: boolean; + + /** Boolean flags to control if scrolling with keys is enabled */ + keyboardScrollEnabled?: boolean; + /** Boolean flags to control if scrolling with keys is enabled */ + keyboardPageEnabled?: boolean; + + /** Hide the scrollbar but still enable scroll functionality */ + showScrollbarX?: boolean; + /** Hide the scrollbar but still enable scroll functionality */ + showScrollbarY?: boolean; + + /** + * Callback when horizontally scrolling the grid. + * + * Return false to stop propagation. + */ + onHorizontalScroll?: (scrollPos: number) => boolean; + + /** + * Callback when vertically scrolling the grid. + * + * Return false to stop propagation. + */ + onVerticalScroll?: (scrollPos: number) => boolean; + + /** + * 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?: (index: number) => number; + + /** + * Pixel height of sub-row unless `subRowHeightGetter` is specified and returns + * different value. Defaults to 0 and no sub-row being displayed. + */ + subRowHeight?: number; + + /** + * If specified, `subRowHeightGetter(index)` is called for each row and the + * returned value overrides `subRowHeight` for particular row. + */ + subRowHeightGetter?: (index: number) => number; + + /** + * The row expanded for table row. + * This can either be a React element, or a function that generates + * a React Element. By default, the React element passed in can expect to + * receive the following props: + * + * ``` + * props: { + * rowIndex; number // (the row index) + * height: number // (supplied from the Table or rowHeightGetter) + * width: number // (supplied from the Table) + * } + * ``` + * + * Because you are passing in your own React element, you can feel free to + * pass in whatever props you may want or need. + * + * If you pass in a function, you will receive the same props object as the + * first argument. + */ + rowExpanded?: ElementOrFunc; + + /** + * To get any additional CSS classes that should be added to a row, + * `rowClassNameGetter(index)` is called. + */ + rowClassNameGetter?: (index: number) => string; + + /** + * If specified, `rowKeyGetter(index)` is called for each row and the + * returned value overrides `key` for the particular row. + */ + rowKeyGetter?: (index: number) => string; + + /** + * Pixel height of the column group header. + */ + groupHeaderHeight?: number; + + /** + * Pixel height of header. + */ + headerHeight: number; + + /** + * Pixel height of fixedDataTableCellGroupLayout/cellGroupWrapper. + * Default is headerHeight and groupHeaderHeight. + * + * This can be used with CSS to make a header cell span both the group & normal header row. + * Setting this to a value larger than height will cause the content to + * overflow the height. This is useful when adding a 2nd table as the group + * header and vertically merging the 2 headers when a column is not part + * of a group. Here are the necessary CSS changes: + * + * Both headers: + * - cellGroupWrapper needs overflow-x: hidden and pointer-events: none + * - cellGroup needs pointer-events: auto to reenable them on child els + * Group header: + * - Layout/main needs overflow: visible and a higher z-index + * - CellLayout/main needs overflow-y: visible + * - cellGroup needs overflow: visible + */ + cellGroupWrapperHeight?: number; + + /** + * Pixel height of footer. + */ + footerHeight?: number; + + /** + * 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?: (x: number, y: number) => void; + + /** + * Callback that is called when scrolling ends or stops with new horizontal + * and vertical scroll values. + */ + onScrollEnd?: (x: number, y: number) => void; + + /** + * If enabled scroll events will not be propagated outside of the table. + */ + stopScrollPropagation?: boolean; + + /** + * 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?: (newHeight: number) => void; + + /** + * Callback that is called when a row is clicked. + */ + onRowClick?: TableRowEventHandler; + + /** + * Callback that is called when a row is double clicked. + */ + onRowDoubleClick?: TableRowEventHandler; + + /** + * Callback that is called when a mouse-down event happens on a row. + */ + onRowMouseDown?: TableRowEventHandler; + + /** + * Callback that is called when a mouse-up event happens on a row. + */ + onRowMouseUp?: TableRowEventHandler; + + /** + * Callback that is called when a mouse-enter event happens on a row. + */ + onRowMouseEnter?: TableRowEventHandler; + + /** + * Callback that is called when a mouse-leave event happens on a row. + */ + onRowMouseLeave?: TableRowEventHandler; + + /** + * Callback that is called when a touch-start event happens on a row. + */ + onRowTouchStart?: TableRowEventHandler; + + /** + * Callback that is called when a touch-end event happens on a row. + */ + onRowTouchEnd?: TableRowEventHandler; + + /** + * Callback that is called when a touch-move event happens on a row. + */ + onRowTouchMove?: TableRowEventHandler; + + /** + * 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, + * columnKey: string, + * ) + * ``` + */ + onColumnResizeEndCallback?: (newColumnWidth: number, columnKey: string) => void; + + /** + * Callback that is called when reordering has been completed + * and columns need to be updated. + * + * ``` + * function( + * event { + * columnBefore: string|undefined, // the column before the new location of this one + * columnAfter: string|undefined, // the column after the new location of this one + * reorderColumn: string, // the column key that was just reordered + * } + * ) + * ``` + */ + onColumnReorderEndCallback?: (event: ColumnReorderEndEvent) => void; + + /** + * Whether a column is currently being resized. + */ + isColumnResizing?: boolean; + + /** + * Whether columns are currently being reordered. + */ + isColumnReordering?: boolean; + + /** + * The number of rows outside the viewport to prerender. Defaults to roughly + * half of the number of visible rows. + */ + bufferRowCount?: number; +} + +export class Table extends React.Component { +} + +export interface ColumnHeaderProps { + columnKey?: string; + + /** supplied from the Table or rowHeightGetter */ + height: number; + + /** supplied from the Column */ + width: number; +} + +export interface ColumnCellProps extends ColumnHeaderProps { + /** the row index of the cell */ + rowIndex: number; +} + +/** + * Component that defines the attributes of table column. + */ +export interface ColumnProps extends React.ClassAttributes { + /** + * The horizontal alignment of the table cell content. + */ + align?: 'left' | 'center' | 'right'; + + /** + * Controls if the column is fixed when scrolling in the X axis. + * + * defaultValue: false + */ + fixed?: boolean; + + /** + * Controls if the column is fixed to the right side of the table + * when scrolling in the X axis. + * + * defaultValue: false + */ + fixedRight?: boolean; + + /** + * The header cell for this column. + * This can either be a string a React element, or a function that generates + * a React Element. Passing in a string will render a default header cell + * with that string. By default, the React element passed in can expect to + * receive the following props: + * + * ``` + * props: { + * columnKey: string // (of the column, if given) + * height: number // (supplied from the Table or rowHeightGetter) + * width: number // (supplied from the Column) + * } + * ``` + * + * Because you are passing in your own React element, you can feel free to + * pass in whatever props you may want or need. + * + * If you pass in a function, you will receive the same props object as the + * first argument. + */ + header?: ElementOrFunc; + + /** + * This is the body cell that will be cloned for this column. + * This can either be a string a React element, or a function that generates + * a React Element. Passing in a string will render a default header cell + * with that string. By default, the React element passed in can expect to + * receive the following props: + * + * ``` + * props: { + * rowIndex; number // (the row index of the cell) + * columnKey: string // (of the column, if given) + * height: number // (supplied from the Table or rowHeightGetter) + * width: number // (supplied from the Column) + * } + * ``` + * + * Because you are passing in your own React element, you can feel free to + * pass in whatever props you may want or need. + * + * If you pass in a function, you will receive the same props object as the + * first argument. + */ + cell?: ElementOrFunc; + + /** + * This is the footer cell for this column. + * This can either be a string a React element, or a function that generates + * a React Element. Passing in a string will render a default header cell + * with that string. By default, the React element passed in can expect to + * receive the following props: + * + * ``` + * props: { + * columnKey: string // (of the column, if given) + * height: number // (supplied from the Table or rowHeightGetter) + * width: number // (supplied from the Column) + * } + * ``` + * + * Because you are passing in your own React element, you can feel free to + * pass in whatever props you may want or need. + * + * If you pass in a function, you will receive the same props object as the + * first argument. + */ + footer?: ElementOrFunc; + + /** + * This is used to uniquely identify the column, and is not required unless + * you a resizing columns. This will be the key given in the + * `onColumnResizeEndCallback` on the Table. + */ + columnKey?: string | number; + + /** + * 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 to set the onColumnResizeEndCallback table + * property and render your columns appropriately. + */ + isResizable?: boolean; + + /** + * Whether the column can be dragged to reorder. + */ + isReorderable?: boolean; + + /** + * 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. + * + * defaultValue: false + */ + allowCellsRecycling?: boolean; + + /** + * Flag to enable performance check when rendering. Stops the component from + * rendering if none of it's passed in props have changed + */ + pureRendering?: boolean; +} + +export class Column extends React.Component { +} + +export interface ColumnGroupHeaderProps { + /* supplied from the groupHeaderHeight */ + height: number; + + /* supplied from the Column */ + width: number; +} + +/** + * Component that defines the attributes of a table column group. + */ +export interface ColumnGroupProps extends React.ClassAttributes { + /** + * The horizontal alignment of the table cell content. + */ + align?: 'left' | 'center' | 'right'; + + /** + * Controls if the column group is fixed when scrolling in the X axis. + * + * defaultValue: false + */ + fixed?: boolean; + + /** + * This is the header cell for this column group. + * This can either be a string or a React element. Passing in a string + * will render a default footer cell with that string. By default, the React + * element passed in can expect to receive the following props: + * + * ``` + * props: { + * height: number // (supplied from the groupHeaderHeight) + * width: number // (supplied from the Column) + * } + * ``` + * + * Because you are passing in your own React element, you can feel free to + * pass in whatever props you may want or need. + * + * You can also pass in a function that returns a react elemnt, with the + * props object above passed in as the first parameter. + */ + header?: string | React.ReactElement | ((props: ColumnGroupHeaderProps) => (string | React.ReactElement)); +} + +export class ColumnGroup extends React.Component { +} + +/** + * Component that handles default cell layout and styling. + * + * All props unless specified below will be set onto the top level `div` + * rendered by the cell. + * + * Example usage via from a `Column`: + * ``` + * const MyColumn = ( + * ( + * + * Cell number: {rowIndex} + * + * )} + * width={100} + * /> + * ); + * ``` + */ +export interface CellProps extends React.HTMLAttributes { + /** + * Outer height of the cell. + */ + height?: number; + + /** + * Outer width of the cell. + */ + width?: number; + + /** + * Optional prop that if specified on the `Column` will be passed to the + * cell. It can be used to uniquely identify which column is the cell is in. + */ + columnKey?: string | number; + + /** + * Optional prop that represents the rows index in the table. + * For the 'cell' prop of a Column, this parameter will exist for any + * cell in a row with a positive index. + * + * Below that entry point the user is welcome to consume or + * pass the prop through at their discretion. + */ + rowIndex?: number; +} + +export class Cell extends React.Component { +} diff --git a/types/fixed-data-table-2/tsconfig.json b/types/fixed-data-table-2/tsconfig.json new file mode 100644 index 0000000000..c548d5c369 --- /dev/null +++ b/types/fixed-data-table-2/tsconfig.json @@ -0,0 +1,22 @@ +{ + "files": [ + "index.d.ts", + "fixed-data-table-2-tests.tsx" + ], + "compilerOptions": { + "module": "commonjs", + "lib": ["es6", "dom"], + "jsx":"preserve", + "noImplicitAny": true, + "noImplicitThis": true, + "strictNullChecks": true, + "strictFunctionTypes": true, + "baseUrl": "../", + "typeRoots": [ + "../" + ], + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true + } +} diff --git a/types/fixed-data-table-2/tslint.json b/types/fixed-data-table-2/tslint.json new file mode 100644 index 0000000000..e60c15844f --- /dev/null +++ b/types/fixed-data-table-2/tslint.json @@ -0,0 +1,3 @@ +{ + "extends": "dtslint/dt.json" +} \ No newline at end of file