mirror of
https://github.com/gosticks/DefinitelyTyped.git
synced 2026-08-12 21:10:23 +00:00
Add type definitions for material-ui-pagination package.
This commit is contained in:
+14
@@ -0,0 +1,14 @@
|
||||
// Type definitions for material-ui-pagination 1.0
|
||||
// Project: https://github.com/lo-tp/material-ui-pagination
|
||||
// Definitions by: m0a <https://m0a.github.io>
|
||||
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
||||
// TypeScript Version: 2.3
|
||||
import * as React from 'react';
|
||||
export interface PaginationProps {
|
||||
total: number;
|
||||
display: number;
|
||||
current: number;
|
||||
onChange(value: number): void;
|
||||
}
|
||||
declare class Pagination extends React.Component<PaginationProps, {}> {}
|
||||
export default Pagination;
|
||||
@@ -0,0 +1,69 @@
|
||||
import * as React from 'react';
|
||||
import { Component, PropTypes } from 'react';
|
||||
import * as ReactDOM from 'react-dom';
|
||||
import Pagination from 'material-ui-pagination';
|
||||
import * as ui from 'material-ui';
|
||||
import { MuiThemeProvider } from 'material-ui/styles';
|
||||
import * as injectTapEventPlugin from 'react-tap-event-plugin';
|
||||
|
||||
// Needed for onTouchTap
|
||||
// Check this repo:
|
||||
// https://github.com/zilverline/react-tap-event-plugin
|
||||
injectTapEventPlugin();
|
||||
|
||||
interface PagerState {
|
||||
pageIndex: number;
|
||||
}
|
||||
|
||||
class Pager extends React.Component<{}, PagerState> {
|
||||
constructor() {
|
||||
super();
|
||||
this.state = {
|
||||
pageIndex: 0
|
||||
};
|
||||
}
|
||||
setPageIndex = (pageIndex: number) => {
|
||||
this.setState({ pageIndex });
|
||||
}
|
||||
render() {
|
||||
const { pageIndex } = this.state;
|
||||
const length = 100;
|
||||
const perPage = 10;
|
||||
const totalPage = Math.floor(length / perPage);
|
||||
|
||||
let list: JSX.Element[] = [];
|
||||
for (let i = pageIndex * perPage; i < (pageIndex * perPage + perPage); i++) {
|
||||
list.push(<p key={`${i}`}>{`No.${i}`}</p>);
|
||||
}
|
||||
|
||||
return (<div>
|
||||
<ui.Card>
|
||||
<Pagination
|
||||
total={totalPage}
|
||||
display={8}
|
||||
current={pageIndex}
|
||||
onChange={this.setPageIndex}
|
||||
/>
|
||||
</ui.Card>
|
||||
<div>
|
||||
{list}
|
||||
</div>
|
||||
<ui.Card>
|
||||
<Pagination
|
||||
total={totalPage}
|
||||
display={8}
|
||||
current={pageIndex}
|
||||
onChange={this.setPageIndex}
|
||||
/>
|
||||
</ui.Card>
|
||||
</div>);
|
||||
}
|
||||
}
|
||||
|
||||
const Index = () => (
|
||||
<MuiThemeProvider>
|
||||
<Pager />
|
||||
</MuiThemeProvider>
|
||||
);
|
||||
|
||||
ReactDOM.render(<Index />, document.getElementById('root') as HTMLElement);
|
||||
@@ -0,0 +1,25 @@
|
||||
{
|
||||
"files": [
|
||||
"index.d.ts",
|
||||
"material-ui-pagination-tests.tsx"
|
||||
],
|
||||
"compilerOptions": {
|
||||
"module": "commonjs",
|
||||
"lib": [
|
||||
"es6",
|
||||
"dom"
|
||||
],
|
||||
"noImplicitAny": false,
|
||||
"noImplicitThis": true,
|
||||
"strictNullChecks": false,
|
||||
"baseUrl": "../",
|
||||
"jsx": "react",
|
||||
"experimentalDecorators": true,
|
||||
"typeRoots": [
|
||||
"../"
|
||||
],
|
||||
"types": [],
|
||||
"noEmit": true,
|
||||
"forceConsistentCasingInFileNames": true
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
{ "extends": "dtslint/dt.json" }
|
||||
Reference in New Issue
Block a user