Add type definitions for material-ui-pagination package.

This commit is contained in:
makoto abe
2017-07-13 19:16:31 +09:00
parent 444664dd77
commit dac1bf9e06
4 changed files with 109 additions and 0 deletions
+14
View File
@@ -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
}
}
+1
View File
@@ -0,0 +1 @@
{ "extends": "dtslint/dt.json" }