-
Notifications
You must be signed in to change notification settings - Fork 4.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
afe52f0
commit c471c55
Showing
33 changed files
with
962 additions
and
307 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
28 changes: 28 additions & 0 deletions
28
docs/app/Examples/addons/Pagination/Usage/PaginationExampleControlled.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,28 @@ | ||
import React, { Component } from 'react' | ||
import { Grid, Input, Pagination, Segment } from 'semantic-ui-react' | ||
|
||
export default class PaginationExampleControlled extends Component { | ||
state = { activePage: 1 } | ||
|
||
handleInputChange = (e, { value }) => this.setState({ activePage: value }) | ||
|
||
handlePaginationChange = (e, { activePage }) => this.setState({ activePage }) | ||
|
||
render() { | ||
const { activePage } = this.state | ||
|
||
return ( | ||
<Grid columns={2} verticalAlign='middle'> | ||
<Grid.Column> | ||
<Segment secondary> | ||
<div>activePage: {activePage}</div> | ||
<Input min={1} max={5} onChange={this.handleInputChange} type='range' value={activePage} /> | ||
</Segment> | ||
</Grid.Column> | ||
<Grid.Column> | ||
<Pagination activePage={activePage} onPageChange={this.handlePaginationChange} totalPages={5} /> | ||
</Grid.Column> | ||
</Grid> | ||
) | ||
} | ||
} |
14 changes: 14 additions & 0 deletions
14
docs/app/Examples/addons/Pagination/Usage/PaginationExampleMenuProps.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
import React from 'react' | ||
import { Pagination } from 'semantic-ui-react' | ||
|
||
const PaginationExampleShorthand = () => ( | ||
<Pagination | ||
defaultActivePage={1} | ||
pointing | ||
secondary | ||
showPreviousAndNext={false} | ||
totalPages={3} | ||
/> | ||
) | ||
|
||
export default PaginationExampleShorthand |
112 changes: 112 additions & 0 deletions
112
docs/app/Examples/addons/Pagination/Usage/PaginationExampleOptions.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,112 @@ | ||
import React, { Component } from 'react' | ||
import { Grid, Form, Pagination, Segment } from 'semantic-ui-react' | ||
|
||
export default class PaginationExampleCustomization extends Component { | ||
state = { | ||
activePage: 5, | ||
boundaryRange: 1, | ||
siblingRange: 1, | ||
showEllipsis: true, | ||
showFirstAndLast: true, | ||
showPreviousAndNext: true, | ||
totalPages: 50, | ||
} | ||
|
||
handleCheckboxChange = (e, { checked, name }) => this.setState({ [name]: checked }) | ||
|
||
handleInputChange = (e, { name, value }) => this.setState({ [name]: value }) | ||
|
||
handlePaginationChange = (e, { activePage }) => this.setState({ activePage }) | ||
|
||
render() { | ||
const { | ||
activePage, | ||
boundaryRange, | ||
siblingRange, | ||
showEllipsis, | ||
showFirstAndLast, | ||
showPreviousAndNext, | ||
totalPages, | ||
} = this.state | ||
|
||
return ( | ||
<Grid columns={1}> | ||
<Grid.Column> | ||
<Pagination | ||
activePage={activePage} | ||
boundaryRange={boundaryRange} | ||
onPageChange={this.handlePaginationChange} | ||
showEllipsis={showEllipsis} | ||
showFirstAndLast={showFirstAndLast} | ||
showPreviousAndNext={showPreviousAndNext} | ||
siblingRange={siblingRange} | ||
size='mini' | ||
totalPages={totalPages} | ||
/> | ||
</Grid.Column> | ||
|
||
<Grid.Column> | ||
<Form as={Segment}> | ||
<Form.Group widths={2}> | ||
<Form.Input | ||
label='Active page' | ||
name='activePage' | ||
min={1} | ||
onChange={this.handleInputChange} | ||
type='number' | ||
value={activePage} | ||
/> | ||
<Form.Input | ||
label='Total pages' | ||
name='totalPages' | ||
min={1} | ||
onChange={this.handleInputChange} | ||
type='number' | ||
value={totalPages} | ||
/> | ||
</Form.Group> | ||
<Form.Group widths={2}> | ||
<Form.Input | ||
label='Boundary pages range' | ||
name='boundaryRange' | ||
min={1} | ||
onChange={this.handleInputChange} | ||
type='number' | ||
value={boundaryRange} | ||
/> | ||
<Form.Input | ||
label='Sibling pages range' | ||
name='siblingRange' | ||
min={1} | ||
onChange={this.handleInputChange} | ||
type='number' | ||
value={siblingRange} | ||
/> | ||
</Form.Group> | ||
<Form.Group inline> | ||
<Form.Checkbox | ||
checked={showEllipsis} | ||
label='Show ellipsis' | ||
name='showEllipsis' | ||
onChange={this.handleCheckboxChange} | ||
/> | ||
<Form.Checkbox | ||
checked={showFirstAndLast} | ||
label='Show first and last pages' | ||
name='showFirstAndLast' | ||
onChange={this.handleCheckboxChange} | ||
/> | ||
<Form.Checkbox | ||
checked={showPreviousAndNext} | ||
label='Show previous and next pages' | ||
name='showPreviousAndNext' | ||
onChange={this.handleCheckboxChange} | ||
/> | ||
</Form.Group> | ||
</Form> | ||
</Grid.Column> | ||
|
||
</Grid> | ||
) | ||
} | ||
} |
17 changes: 17 additions & 0 deletions
17
docs/app/Examples/addons/Pagination/Usage/PaginationExampleShorthand.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
import React from 'react' | ||
import { Icon, Pagination } from 'semantic-ui-react' | ||
|
||
const PaginationExampleShorthand = () => ( | ||
<Pagination | ||
defaultActivePage={5} | ||
ellipsisItem={{ content: <Icon name='ellipsis horizontal' />, icon: true }} | ||
firstItem={{ content: <Icon name='angle double left' />, icon: true }} | ||
lastItem={{ content: <Icon name='angle double right' />, icon: true }} | ||
prevItem={{ content: <Icon name='angle left' />, icon: true }} | ||
nextItem={{ content: <Icon name='angle right' />, icon: true }} | ||
showFirstAndLast | ||
totalPages={10} | ||
/> | ||
) | ||
|
||
export default PaginationExampleShorthand |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,31 @@ | ||
import React from 'react' | ||
|
||
import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample' | ||
import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection' | ||
|
||
const PaginationUsageExamples = () => ( | ||
<ExampleSection title='Usage'> | ||
<ComponentExample | ||
title='Controlled' | ||
description='A pagination can be controlled component.' | ||
examplePath='addons/Pagination/Usage/PaginationExampleControlled' | ||
/> | ||
<ComponentExample | ||
title='Options' | ||
description='A pagination has configurable options.' | ||
examplePath='addons/Pagination/Usage/PaginationExampleOptions' | ||
/> | ||
<ComponentExample | ||
title='Menu Props' | ||
description='A pagination is a wrapper for Menu component, you can use Menu props with Pagination.' | ||
examplePath='addons/Pagination/Usage/PaginationExampleMenuProps' | ||
/> | ||
<ComponentExample | ||
title='Shorthand' | ||
description='A pagination has support of shorthand API for its items.' | ||
examplePath='addons/Pagination/Usage/PaginationExampleShorthand' | ||
/> | ||
</ExampleSection> | ||
) | ||
|
||
export default PaginationUsageExamples |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,13 +1,67 @@ | ||
import * as React from 'react'; | ||
|
||
import { SemanticShorthandItem } from '../..'; | ||
import { default as PaginationItem, PaginationItemProps } from './PaginationItem'; | ||
|
||
export interface PaginationProps { | ||
[key: string]: any; | ||
|
||
/** An element type to render as (string or function). */ | ||
as?: any; | ||
/** A pagination item can have an aria label. */ | ||
ariaLabel?: string; | ||
|
||
/** Initial activePage value. */ | ||
defaultActivePage?: number | string; | ||
|
||
/** Index of the currently active page. */ | ||
activePage?: number | string; | ||
|
||
/** Number of always visible pages at the beginning and end. */ | ||
boundaryRange?: number | string; | ||
|
||
/** A shorthand for PaginationItem. */ | ||
ellipsisItem?: SemanticShorthandItem<PaginationItemProps>; | ||
|
||
/** A shorthand for PaginationItem. */ | ||
firstItem?: SemanticShorthandItem<PaginationItemProps>; | ||
|
||
/** A shorthand for PaginationItem. */ | ||
lastItem?: SemanticShorthandItem<PaginationItemProps>; | ||
|
||
/** A shorthand for PaginationItem. */ | ||
nextItem?: SemanticShorthandItem<PaginationItemProps>; | ||
|
||
/** A shorthand for PaginationItem. */ | ||
pageItem?: SemanticShorthandItem<PaginationItemProps>; | ||
|
||
/** A shorthand for PaginationItem. */ | ||
prevItem?: SemanticShorthandItem<>; | ||
|
||
/** | ||
* Called on change of an active page. | ||
* | ||
* @param {SyntheticEvent} event - React's original SyntheticEvent. | ||
* @param {object} data - All props. | ||
*/ | ||
onPageChange?: (event: React.MouseEvent<HTMLAnchorElement>, data: PaginationProps) => void; | ||
|
||
/** Boolean flag to show ellipsis. */ | ||
showEllipsis?: boolean; | ||
|
||
/** Boolean flag to hide first and last page links. */ | ||
showFirstAndLast?: boolean; | ||
|
||
/** Boolean flag to show previous and next page links. */ | ||
showPreviousAndNext?: boolean; | ||
|
||
/** Number of always visible pages before and after the current one. */ | ||
siblingRange?: number | string; | ||
|
||
/** Total number of pages. */ | ||
totalPages: number | string; | ||
} | ||
|
||
declare class Pagination extends React.Component<PaginationProps, {}> { | ||
static Item: typeof PaginationItem; | ||
} | ||
|
||
export default Pagination; |
Oops, something went wrong.