From 3b02fd54e1d8ca7b0f586bd302bb6dc0a4e0777b Mon Sep 17 00:00:00 2001 From: Janeene Beeforth Date: Mon, 26 Feb 2018 16:59:52 +1100 Subject: [PATCH] Fix error in CustomFilter definitions & support expandAll options. --- types/react-bootstrap-table/index.d.ts | 49 ++++++++++++----- .../react-bootstrap-table-tests.tsx | 53 ++++++++++++++++--- 2 files changed, 82 insertions(+), 20 deletions(-) diff --git a/types/react-bootstrap-table/index.d.ts b/types/react-bootstrap-table/index.d.ts index c6f5b7654e..1ad6b3be73 100644 --- a/types/react-bootstrap-table/index.d.ts +++ b/types/react-bootstrap-table/index.d.ts @@ -840,6 +840,10 @@ export interface Options { * Background color on expanded rows (css color value). */ expandRowBgColor?: string; + /** + * Expand all rows + */ + expandAll?: boolean; /** * Tell react-bootstrap-table how to trigger expanding by clicking on 'row' or 'column' level. * If the value is 'column', by default all the columns are expandable. If you want to specify some columns as @@ -1513,11 +1517,6 @@ export interface Editable { attrs?: EditableAttrs; } -export type SetFilterCallback = (targetValue: any) => boolean; -export interface ApplyFilterParameter { - callback: SetFilterCallback; -} - /** * Text filter type. */ @@ -1709,10 +1708,25 @@ export interface DateFilter { }; } +/** + * Custom Filter Parameters + */ +export interface CustomFilterParameters { + callback(cell: any, params: Params): boolean; + callbackParameters: Params; +} + +/** + * Custom filter element type. + */ +export class CustomFilterElement extends Component { + cleanFiltered: () => void; +} + /** * Custom filter type. */ -export interface CustomFilter { +export interface CustomFilter { /** * Type must be 'CustomFilter' */ @@ -1721,13 +1735,13 @@ export interface CustomFilter { * Function to generate the filter component */ getElement( - filterHandler: (parameters?: ApplyFilterParameter) => void, - customFilterParameters: object - ): ReactElement; + filterHandler: (value?: CustomFilterParameters, type?: 'CustomFilter') => void, + customFilterParameters: CustomFilterParameters + ): ReactElement; /** * Custom filter parameters to be passed to the generator function */ - customFilterParameters: object; + customFilterParameters: CustomFilterParameters; } /** @@ -1818,8 +1832,8 @@ export type FilterValue = /** * Filter object that can be passed to BootstrapTableFilter.handleFilterData function. */ -export interface FilterData { - [dataField: string]: FilterValue; +export interface FilterData { + [dataField: string]: FilterValue | CustomFilterValue; } /** @@ -1880,6 +1894,13 @@ export interface ExpandColumnComponentProps { isExpanded: boolean; } +/** + * Input properties for the expandedColumnHeaderComponent function. + */ +export interface ExpandedColumnHeaderProps { + anyExpand: boolean; +} + /** * Customize the options for expand row feature. */ @@ -1901,6 +1922,10 @@ export interface ExpandColumnOptions { * should be shown first. Default is true, false will move the expand indicator column after selection column. */ expandColumnBeforeSelectColumn?: boolean; + /** + * a callback function to customise the header column + */ + expandedColumnHeaderComponent?(props: ExpandedColumnHeaderProps): string | ReactElement; } /** diff --git a/types/react-bootstrap-table/react-bootstrap-table-tests.tsx b/types/react-bootstrap-table/react-bootstrap-table-tests.tsx index edf2111b78..39422f2152 100644 --- a/types/react-bootstrap-table/react-bootstrap-table-tests.tsx +++ b/types/react-bootstrap-table/react-bootstrap-table-tests.tsx @@ -1,11 +1,11 @@ import * as React from 'react'; import { render } from 'react-dom'; import { - ApplyFilterParameter, BootstrapTable, ButtonGroupProps, CellEdit, ColumnDescription, + CustomFilter, CustomSelectProps, DeleteButton, EditableAttrs, @@ -15,6 +15,7 @@ import { ExportCSVButton, Filter, FilterData, + FilterType, FooterData, InsertButton, InsertModalColumnDescription, @@ -32,7 +33,8 @@ import { SizePerPageDropDown, SortOrder, TableHeaderColumn, - ToolBarProps + ToolBarProps, + CustomFilterParameters } from 'react-bootstrap-table'; interface Product { @@ -135,15 +137,21 @@ class TextFilterWithCondition extends React.Component { } } -function getCustomFilter(filterHandler: (parameters?: ApplyFilterParameter) => void, customFilterParameters: any) { +interface CustomFilterParams { + textOK: string; + textNOK: string; +} +function getCustomFilter(filterHandler: (parameters?: CustomFilterParameters, type?: 'CustomFilter') => void, customFilterParameters: CustomFilterParameters) { return (
); } -class CustomFilter extends React.Component { +function customFilterCallback(cell: any, callbackParameters: CustomFilterParams) { return true; } + +class CustomFilterTable extends React.Component { render() { - const filter: Filter = { type: 'CustomFilter', getElement: getCustomFilter, customFilterParameters: { textOK: 'yes', textNOK: 'no' } }; + const filter: Filter = { type: 'CustomFilter', getElement: getCustomFilter, customFilterParameters: { callback: customFilterCallback, callbackParameters: { textOK: 'yes', textNOK: 'no' }} }; return ( Product ID @@ -154,9 +162,38 @@ class CustomFilter extends React.Component { } } -class RemoteProps extends React.Component { +class RemotePropsDefault extends React.Component { render() { - const filter: Filter = { type: 'CustomFilter', getElement: getCustomFilter, customFilterParameters: { textOK: 'yes', textNOK: 'no' } }; + const filter: CustomFilter = { type: 'CustomFilter', getElement: getCustomFilter, customFilterParameters: { callback: customFilterCallback, callbackParameters: { textOK: 'yes', textNOK: 'no' }} }; + return ( + { + remoteObj.cellEdit = true; + return remoteObj; + }} + options={{ + onCellEdit: (row: any, fieldName: string, value: any) => { console.info(row); return value; } + }} + > + Product ID + Product Name + Product Is In Stock + + ); + } +} + +class RemotePropsSpecified extends React.Component { + render() { + const filter: CustomFilter = { + type: 'CustomFilter', + getElement: getCustomFilter, + customFilterParameters: { + callback: customFilterCallback, + callbackParameters: { textOK: 'yes', textNOK: 'no' } + } + }; return (