mirror of
https://github.com/gosticks/DefinitelyTyped.git
synced 2026-10-05 15:27:05 +00:00
griddle-react: Provides its own types (#22383)
This commit is contained in:
Andy
@@ -402,6 +402,12 @@
|
||||
"sourceRepoURL": "https://github.com/PeculiarVentures/graphene",
|
||||
"asOfVersion": "2.0.31"
|
||||
},
|
||||
{
|
||||
"libraryName": "griddle-react",
|
||||
"typingsPackageName": "griddle-react",
|
||||
"sourceRepoURL": "https://github.com/griddlegriddle/griddle",
|
||||
"asOfVersion": "1.3.0"
|
||||
},
|
||||
{
|
||||
"libraryName": "gulp-typescript",
|
||||
"typingsPackageName": "gulp-typescript",
|
||||
|
||||
Vendored
-168
@@ -1,168 +0,0 @@
|
||||
// Type definitions for griddle-react 0.7
|
||||
// Project: https://github.com/griddlegriddle/griddle
|
||||
// Definitions by: David Hara <https://github.com/hodavidhara>
|
||||
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
||||
// TypeScript Version: 2.3
|
||||
|
||||
/*
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2016 David Hara
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
*/
|
||||
|
||||
import * as React from 'react';
|
||||
|
||||
type ReactClass<T> = React.ComponentClass<T> | React.StatelessComponent<T>;
|
||||
|
||||
export interface CustomColumnComponentProps<T> {
|
||||
data: any;
|
||||
rowData: T;
|
||||
metaData: ColumnMetaData<T>;
|
||||
}
|
||||
|
||||
export interface CustomRowComponentProps<T> {
|
||||
data: T;
|
||||
}
|
||||
|
||||
export interface CustomGridComponentProps<T> {
|
||||
data: T[];
|
||||
}
|
||||
|
||||
export interface CustomPagerComponentProps {
|
||||
currentPage: number;
|
||||
maxPage: number;
|
||||
nextText: string;
|
||||
previousText: string;
|
||||
next(): void;
|
||||
previous(): void;
|
||||
setPage(number: number): void;
|
||||
}
|
||||
|
||||
export interface CustomHeaderComponentProps {
|
||||
filterByColumn?(filter: string, columnName: string): void;
|
||||
columnName: string;
|
||||
displayName: string;
|
||||
}
|
||||
|
||||
export interface CustomFilterComponentProps {
|
||||
placeholderText?: string;
|
||||
changeFilter(val: any): void;
|
||||
}
|
||||
|
||||
export interface ColumnMetaData<T> {
|
||||
columnName: string;
|
||||
cssClassName?: string;
|
||||
customComponent?: ReactClass<CustomColumnComponentProps<T>>;
|
||||
customHeaderComponent?: ReactClass<CustomHeaderComponentProps>;
|
||||
customHeaderComponentProps?: {};
|
||||
displayName?: string;
|
||||
locked?: boolean;
|
||||
order?: number;
|
||||
sortable?: boolean;
|
||||
visible?: boolean;
|
||||
}
|
||||
|
||||
export type BodyCssClassNameFunction<T> = (rowData: T) => string;
|
||||
|
||||
export interface RowMetaData<T> {
|
||||
bodyCssClassName?: BodyCssClassNameFunction<T> | string;
|
||||
}
|
||||
|
||||
export interface GriddleProps<T> {
|
||||
columns?: string[];
|
||||
columnMetadata?: Array<ColumnMetaData<T>>;
|
||||
rowMetadata?: RowMetaData<T>;
|
||||
results?: T[];
|
||||
resultsPerPage?: number;
|
||||
initialSort?: string;
|
||||
initialSortAscending?: boolean;
|
||||
gridClassName?: string;
|
||||
tableClassName?: string;
|
||||
customFormatClassName?: string;
|
||||
settingsText?: string;
|
||||
filterPlaceholderText?: string;
|
||||
nextText?: string;
|
||||
previousText?: string;
|
||||
maxRowsText?: string;
|
||||
enableCustomFormatText?: string;
|
||||
childrenColumnName?: string;
|
||||
metadataColumns?: string[];
|
||||
showFilter?: boolean;
|
||||
showSettings?: boolean;
|
||||
useCustomRowComponent?: boolean;
|
||||
useCustomGridComponent?: boolean;
|
||||
useCustomPagerComponent?: boolean;
|
||||
useCustomFilterer?: boolean;
|
||||
useCustomFilterComponent?: boolean;
|
||||
useGriddleStyles?: boolean;
|
||||
customRowComponent?: ReactClass<CustomRowComponentProps<T>>;
|
||||
customGridComponent?: ReactClass<CustomGridComponentProps<T>>;
|
||||
customPagerComponent?: ReactClass<CustomPagerComponentProps>;
|
||||
customFilterComponent?: ReactClass<CustomFilterComponentProps>;
|
||||
customFilterer?(items: T[], query: any): T[];
|
||||
enableToggleCustom?: boolean;
|
||||
noDataMessage?: string;
|
||||
noDataClassName?: string;
|
||||
customNoDataComponent?: ReactClass<void>;
|
||||
showTableHeading?: boolean;
|
||||
showPager?: boolean;
|
||||
useFixedHeader?: boolean;
|
||||
useExternal?: boolean;
|
||||
externalSetPage?(index: number): void;
|
||||
externalChangeSort?(sort: string, sortAscending: boolean): void;
|
||||
externalSetFilter?(filter: string): void;
|
||||
externalSetPageSize?(size: number): void;
|
||||
externalMaxPage?: number;
|
||||
externalCurrentPage?: number;
|
||||
externalSortColumn?: string;
|
||||
externalSortAscending?: boolean;
|
||||
externalLoadingComponent?: ReactClass<void>;
|
||||
externalIsLoading?: boolean;
|
||||
enableInfiniteScroll?: boolean;
|
||||
bodyHeight?: number;
|
||||
paddingHeight?: number;
|
||||
rowHeight?: number;
|
||||
infiniteScrollLoadTreshold?: number;
|
||||
useFixedLayout?: boolean;
|
||||
isSubGriddle?: boolean;
|
||||
enableSort?: boolean;
|
||||
sortAscendingClassName?: string;
|
||||
sortDescendingClassName?: string;
|
||||
parentRowCollapsedClassName?: string;
|
||||
parentRowExpandedClassName?: string;
|
||||
settingsToggleClassName?: string;
|
||||
nextClassName?: string;
|
||||
previousClassName?: string;
|
||||
sortAscendingComponent?: string | React.ReactElement<any>;
|
||||
sortDescendingComponent?: string | React.ReactElement<any>;
|
||||
sortDefaultComponent?: string | React.ReactElement<any>;
|
||||
parentRowCollapsedComponent?: string | React.ReactElement<any>;
|
||||
parentRowExpandedComponent?: string | React.ReactElement<any>;
|
||||
settingsIconComponent?: string | React.ReactElement<any>;
|
||||
nextIconComponent?: string | React.ReactElement<any>;
|
||||
previousIconComponent?: string | React.ReactElement<any>;
|
||||
onRowClick?(): void;
|
||||
}
|
||||
|
||||
declare class Griddle<T> extends React.Component<GriddleProps<T>> {
|
||||
}
|
||||
|
||||
export default Griddle;
|
||||
@@ -1,70 +0,0 @@
|
||||
/*
|
||||
Licensed under the MIT License (MIT)
|
||||
|
||||
Copyright (c) 2016 David Hara
|
||||
*/
|
||||
|
||||
import * as React from 'react';
|
||||
import Griddle, { CustomColumnComponentProps } from 'griddle-react';
|
||||
|
||||
interface MyCustomResult {
|
||||
name: string;
|
||||
test: string;
|
||||
}
|
||||
|
||||
class LinkComponent extends React.Component<CustomColumnComponentProps<MyCustomResult>> {
|
||||
render() {
|
||||
const url = `speakers/${this.props.rowData.test}/${this.props.data}`;
|
||||
return <a href={url}>{this.props.data}</a>;
|
||||
}
|
||||
}
|
||||
|
||||
const StatelessFunctionComponent = (props: CustomColumnComponentProps<MyCustomResult>) => {
|
||||
const url = `speakers/${props.rowData.test}/${props.data}`;
|
||||
return <a href={url}>{props.data}</a>;
|
||||
};
|
||||
|
||||
const columnMeta = [
|
||||
{
|
||||
columnName: "name",
|
||||
order: 1,
|
||||
locked: false,
|
||||
visible: true,
|
||||
customComponent: StatelessFunctionComponent
|
||||
}];
|
||||
|
||||
const results: MyCustomResult[] = [
|
||||
{
|
||||
name: 'David Hara',
|
||||
test: 'blah'
|
||||
},
|
||||
{
|
||||
name: 'Hara, David',
|
||||
test: 'blah2'
|
||||
}
|
||||
];
|
||||
|
||||
const rowMetaData = {
|
||||
bodyCssClassName: (rowData: MyCustomResult) => {
|
||||
return rowData.test;
|
||||
}
|
||||
};
|
||||
|
||||
class CustomColumnComponentGrid extends React.Component {
|
||||
render() {
|
||||
type TypedGriddle = new () => Griddle<MyCustomResult>;
|
||||
const TypedGriddle = Griddle as TypedGriddle;
|
||||
|
||||
return (
|
||||
<TypedGriddle
|
||||
results={results}
|
||||
columnMetadata={columnMeta}
|
||||
rowMetadata={rowMetaData}
|
||||
sortAscendingComponent={<span className="fa fa-sort-alpha-asc"/>}
|
||||
sortDescendingComponent={<span className="fa fa-sort-alpha-desc"/>}
|
||||
customRowComponent={LinkComponent} />
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default CustomColumnComponentGrid;
|
||||
@@ -1,89 +0,0 @@
|
||||
/*
|
||||
Licensed under the MIT License (MIT)
|
||||
|
||||
Copyright (c) 2016 David Hara
|
||||
*/
|
||||
|
||||
import * as _ from 'lodash';
|
||||
import * as React from 'react';
|
||||
import Griddle, { CustomFilterComponentProps } from 'griddle-react';
|
||||
|
||||
const CustomFilterFunction = (items: ResultType[], query: string): ResultType[] => {
|
||||
return _.filter(items, (item) => {
|
||||
let match = false;
|
||||
_.forIn(item, (value, key) => {
|
||||
if (String(value).toLowerCase().indexOf(query.toLowerCase()) >= 0) {
|
||||
match = true;
|
||||
return;
|
||||
}
|
||||
});
|
||||
|
||||
return match;
|
||||
});
|
||||
};
|
||||
|
||||
class CustomFilterComponent extends React.Component<CustomFilterComponentProps> {
|
||||
query = '';
|
||||
|
||||
searchChange(event: React.FormEvent<HTMLInputElement>) {
|
||||
this.query = event.currentTarget.value;
|
||||
this.props.changeFilter(this.query);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="filter-container">
|
||||
<input type="text"
|
||||
name="search"
|
||||
placeholder="Search..."
|
||||
onChange={this.searchChange.bind(this)}/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
interface ResultType {
|
||||
id: number;
|
||||
name: string;
|
||||
city: string;
|
||||
state: string;
|
||||
country: string;
|
||||
company: string;
|
||||
favoriteNumber: number;
|
||||
}
|
||||
|
||||
const someData: ResultType[] = [
|
||||
{
|
||||
id: 0,
|
||||
name: "Mayer Leonard",
|
||||
city: "Kapowsin",
|
||||
state: "Hawaii",
|
||||
country: "United Kingdom",
|
||||
company: "Ovolo",
|
||||
favoriteNumber: 7
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: "Koch Becker",
|
||||
city: "Johnsonburg",
|
||||
state: "New Jersey",
|
||||
country: "Madagascar",
|
||||
company: "Eventage",
|
||||
favoriteNumber: 2
|
||||
}
|
||||
];
|
||||
|
||||
class CustomFilterComponentGrid extends React.Component {
|
||||
render() {
|
||||
type TypedGriddle = new () => Griddle<ResultType>;
|
||||
const TypedGriddle = Griddle as TypedGriddle;
|
||||
|
||||
return (
|
||||
<TypedGriddle results={someData} showFilter={true}
|
||||
useCustomFilterer={true} customFilterer={CustomFilterFunction}
|
||||
useCustomFilterComponent={true} customFilterComponent={CustomFilterComponent}/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default CustomFilterComponentGrid;
|
||||
@@ -1,94 +0,0 @@
|
||||
/*
|
||||
Licensed under the MIT License (MIT)
|
||||
|
||||
Copyright (c) 2016 David Hara
|
||||
*/
|
||||
|
||||
import * as React from 'react';
|
||||
import Griddle, { ColumnMetaData, CustomHeaderComponentProps } from 'griddle-react';
|
||||
|
||||
interface MoreCustomHeaderComponentProps extends CustomHeaderComponentProps {
|
||||
color: string;
|
||||
}
|
||||
|
||||
class HeaderComponent extends React.Component<MoreCustomHeaderComponentProps> {
|
||||
textOnClick(e: React.FormEvent<HTMLInputElement>) {
|
||||
e.stopPropagation();
|
||||
}
|
||||
|
||||
filterText(e: React.FormEvent<HTMLInputElement>) {
|
||||
this.props.filterByColumn(e.currentTarget.value, this.props.columnName);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<span>
|
||||
<div><strong style={{color: this.props.color}}>{this.props.displayName}</strong></div>
|
||||
<input type='text' onChange={this.filterText.bind(this)} onClick={this.textOnClick.bind(this)}/>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
interface ResultType {
|
||||
id: number;
|
||||
name: string;
|
||||
city: string;
|
||||
state: string;
|
||||
country: string;
|
||||
company: string;
|
||||
favoriteNumber: number;
|
||||
}
|
||||
|
||||
const someData: ResultType[] = [
|
||||
{
|
||||
id: 0,
|
||||
name: "Mayer Leonard",
|
||||
city: "Kapowsin",
|
||||
state: "Hawaii",
|
||||
country: "United Kingdom",
|
||||
company: "Ovolo",
|
||||
favoriteNumber: 7
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: "Koch Becker",
|
||||
city: "Johnsonburg",
|
||||
state: "New Jersey",
|
||||
country: "Madagascar",
|
||||
company: "Eventage",
|
||||
favoriteNumber: 2
|
||||
}
|
||||
];
|
||||
|
||||
const columnMeta: Array<ColumnMetaData<ResultType>> = [
|
||||
{
|
||||
columnName: 'name',
|
||||
order: 1,
|
||||
sortable: false,
|
||||
visible: true,
|
||||
},
|
||||
{
|
||||
columnName: 'city',
|
||||
customHeaderComponent: HeaderComponent,
|
||||
customHeaderComponentProps: {color: 'red'}
|
||||
},
|
||||
{
|
||||
columnName: 'state',
|
||||
customHeaderComponent: HeaderComponent,
|
||||
customHeaderComponentProps: {color: 'blue'}
|
||||
}
|
||||
];
|
||||
|
||||
class CustomHeaderComponentGrid extends React.Component {
|
||||
render() {
|
||||
type TypedGriddle = new () => Griddle<ResultType>;
|
||||
const TypedGriddle = Griddle as TypedGriddle;
|
||||
|
||||
return (
|
||||
<TypedGriddle results={someData} columnMetadata={columnMeta} columns={["name", "city", "state", "country"]}/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default CustomHeaderComponentGrid;
|
||||
@@ -1,78 +0,0 @@
|
||||
/*
|
||||
Licensed under the MIT License (MIT)
|
||||
|
||||
Copyright (c) 2016 David Hara
|
||||
*/
|
||||
|
||||
import * as React from 'react';
|
||||
import { render } from 'react-dom';
|
||||
import Griddle, { CustomColumnComponentProps } from 'griddle-react';
|
||||
import CustomColumnComponentGrid from './CustomColumnComponent';
|
||||
import CustomHeaderComponentGrid from './CustomHeaderComponent';
|
||||
import CustomFilterComponentGrid from './CustomFilterComponent';
|
||||
|
||||
interface MyCustomResult {
|
||||
name: string;
|
||||
test: string;
|
||||
}
|
||||
|
||||
class LinkComponent extends React.Component<CustomColumnComponentProps<MyCustomResult>> {
|
||||
render() {
|
||||
const url = `speakers/${this.props.rowData.test}/${this.props.data}`;
|
||||
return <a href={url}>{this.props.data}</a>;
|
||||
}
|
||||
}
|
||||
|
||||
const StatelessFunctionComponent = (props: CustomColumnComponentProps<MyCustomResult>) => {
|
||||
const url = `speakers/${props.rowData.test}/${props.data}`;
|
||||
return <a href={url}>{props.data}</a>;
|
||||
};
|
||||
|
||||
const columnMeta = [
|
||||
{
|
||||
columnName: "name",
|
||||
order: 1,
|
||||
locked: false,
|
||||
visible: true,
|
||||
customComponent: StatelessFunctionComponent
|
||||
}];
|
||||
|
||||
const results: MyCustomResult[] = [
|
||||
{
|
||||
name: 'David Hara',
|
||||
test: 'blah'
|
||||
},
|
||||
{
|
||||
name: 'Hara, David',
|
||||
test: 'blah2'
|
||||
}
|
||||
];
|
||||
|
||||
const rowMetaData = {
|
||||
bodyCssClassName: (rowData: MyCustomResult) => {
|
||||
return rowData.test;
|
||||
}
|
||||
};
|
||||
|
||||
type TypedGriddle = new () => Griddle<MyCustomResult>;
|
||||
const TypedGriddle = Griddle as TypedGriddle;
|
||||
|
||||
render(
|
||||
<div>
|
||||
<h1>Custom Column Component Grid</h1>
|
||||
<CustomColumnComponentGrid />
|
||||
<h1>Custom Header Component Grid</h1>
|
||||
<CustomHeaderComponentGrid />
|
||||
<h1>Custom Filter Component Grid</h1>
|
||||
<CustomFilterComponentGrid />
|
||||
<TypedGriddle
|
||||
results={results}
|
||||
columnMetadata={columnMeta}
|
||||
rowMetadata={rowMetaData}
|
||||
sortAscendingComponent={<span className="fa fa-sort-alpha-asc"/>}
|
||||
sortDescendingComponent={<span className="fa fa-sort-alpha-desc"/>}
|
||||
customRowComponent={LinkComponent}
|
||||
/>
|
||||
</div>,
|
||||
document.getElementById('root')
|
||||
);
|
||||
@@ -1,28 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"module": "commonjs",
|
||||
"lib": [
|
||||
"es6",
|
||||
"dom"
|
||||
],
|
||||
"jsx": "preserve",
|
||||
"noImplicitAny": true,
|
||||
"noImplicitThis": true,
|
||||
"strictNullChecks": false,
|
||||
"strictFunctionTypes": false,
|
||||
"baseUrl": "../",
|
||||
"typeRoots": [
|
||||
"../"
|
||||
],
|
||||
"types": [],
|
||||
"noEmit": true,
|
||||
"forceConsistentCasingInFileNames": true
|
||||
},
|
||||
"files": [
|
||||
"index.d.ts",
|
||||
"test/index.tsx",
|
||||
"test/CustomColumnComponent.tsx",
|
||||
"test/CustomFilterComponent.tsx",
|
||||
"test/CustomHeaderComponent.tsx"
|
||||
]
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
{
|
||||
"extends": "dtslint/dt.json"
|
||||
}
|
||||
Reference in New Issue
Block a user