feat(Pagination): add component

docs/app/Examples/addons/Pagination/Types/PaginationExamplePagination.js

@@ -2,7 +2,7 @@ import React from 'react'
 import { Pagination } from 'semantic-ui-react'
 
 const PaginationExamplePagination = () => (
-  <Pagination defaultActivePage={5} pageCount={10} />
+  <Pagination defaultActivePage={5} totalPages={10} />
 )
 
 export default PaginationExamplePagination

docs/app/Examples/addons/Pagination/Types/index.js

@@ -1,5 +1,4 @@
 import React from 'react'
-import { Message } from 'semantic-ui-react'
 
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'

docs/app/Examples/addons/Pagination/Usage/PaginationExampleControlled.js

@@ -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>
+    )
+  }
+}

docs/app/Examples/addons/Pagination/Usage/PaginationExampleMenuProps.js

@@ -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

docs/app/Examples/addons/Pagination/Usage/PaginationExampleOptions.js

@@ -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>
+    )
+  }
+}

docs/app/Examples/addons/Pagination/Usage/PaginationExampleShorthand.js

@@ -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

docs/app/Examples/addons/Pagination/Usage/index.js

@@ -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

docs/app/Examples/addons/Pagination/index.js

@@ -1,10 +1,12 @@
 import React from 'react'
 
 import Types from './Types'
+import Usage from './Usage'
 
 const PaginationExamples = () => (
   <div>
     <Types />
+    <Usage />
   </div>
 )
 

docs/app/Examples/collections/Menu/Types/index.js

@@ -1,4 +1,6 @@
 import React from 'react'
+import { Link } from 'react-router-dom'
+import { Message } from 'semantic-ui-react'
 
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
@@ -67,7 +69,11 @@ const Types = () => (
       title='Pagination'
       description='A pagination menu is specially formatted to present links to pages of content.'
       examplePath='collections/Menu/Types/MenuExamplePagination'
-    />
+    >
+      <Message info>
+          For fully featured pagination, see <Link to='/addons/pagination'>Pagination</Link> addon.
+      </Message>
+    </ComponentExample>
   </ExampleSection>
 )
 

index.d.ts

@@ -1,13 +1,15 @@
 // Addons
+export { default as Confirm, ConfirmProps } from './dist/commonjs/addons/Confirm';
+export { default as Pagination, PaginationProps } from './dist/commonjs/addons/Pagination';
+export { default as PaginationItem, PaginationItemProps } from './dist/commonjs/addons/Pagination/PaginationItem';
+export { default as Portal, PortalProps } from './dist/commonjs/addons/Portal';
+export { default as Radio, RadioProps } from './dist/commonjs/addons/Radio';
+export { default as Ref, RefProps } from './dist/commonjs/addons/Ref';
 export {
   default as Responsive,
   ResponsiveProps,
   ResponsiveWidthShorthand
 } from './dist/commonjs/addons/Responsive';
-export { default as Confirm, ConfirmProps } from './dist/commonjs/addons/Confirm';
-export { default as Portal, PortalProps } from './dist/commonjs/addons/Portal';
-export { default as Radio, RadioProps } from './dist/commonjs/addons/Radio';
-export { default as Ref, RefProps } from './dist/commonjs/addons/Ref';
 export { default as Select, SelectProps } from './dist/commonjs/addons/Select';
 export { default as TextArea, TextAreaProps } from './dist/commonjs/addons/TextArea';
 export {

src/addons/Pagination/Pagination.d.ts

@@ -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;