material-ui 1.x support

.travis.yml

@@ -0,0 +1,14 @@
+language: node_js
+node_js:
+- node
+before_deploy:
+- npm run build
+deploy:
+  provider: npm
+  email: [email protected]
+  api_key:
+    secure: pJoD0vJVXuudxAxlxV+Lkc8dkqkHEB50HRC+KoHdjkLzSSbctaSIXkAILhCsqsRISDR4tFuHEJnP7PTFcjjDu53JeXYong3hbM85as2UYktL2a9icEE1Rlp269JACsS7lEBJcpiDSq1zbDRdj6puPfx5UCLahijp2O965SGfaLYdy9pzt4NxF+oyesMjT6avwTuQA9Sr+f2RkfB1icZ0+6geTZUdh8tEq0FJN4A3QkuVpZEnSmxcr5lNcnBPflNq4KZdvL5qHvTIr9sLc1S26TGfh/nmfBosCqoR4mBO/NTd71FlfVbivqCtjeGaU/Sy9q81nWacvp9t2FXmNCL+E1bCKiptZlCJvLRaK6i1s1AibOChyEhqOvALGVU/ECuFe5A4yAMM+1G8bWsNqIhikkrT5EFtWP9ZHvKjt/5zG1XBIbsqkeWRiV/dcg5GKPD8/DAK7ZQQ7aks3tRSdX8X9c+QmmgfkdFbhzYNmt1Z6C5uRVoKadMBILc1n/eyhXFvuga7K9oqz560nCemovG8oEHKqoXc5WIpeeFok2hzAAE3mi6ynE2/B+Bk3REfvbQiUR/SDPMSrX4aiiL8l5VB4O4lLY03k4UdKd+5wMoXHIlMHEKIWekEqoub0UsAeegvlm/nOZihENPS4stwFoYHerIMqzjYP2MLKNZvVF4iHd4=
+  skip_cleanup: true
+  on:
+    branch: master
+    condition: "-z $TRAVIS_TAG"

README.md

@@ -1,3 +1,36 @@
 # react-ultimate-pagination-material-ui
 
 React.js pagination component with Material UI theme
+
+## usage
+
+```
+import createUltimatePagination from 'react-ultimate-pagination-material-ui'
+
+// all args are optional
+const Pagination = createUltimatePagination(
+  {
+    buttonClass,
+    wrapperClass,
+    wrapperComponent
+  }
+)
+
+//...
+
+<Pagination
+  currentPage={page.currentPage}
+  totalPages={page.totalPages}
+  boundaryPagesRange={1}
+  siblingPagesRange={1}
+  hidePreviousAndNextPageLinks={false}
+  hideFirstAndLastPageLinks={false}
+  hideEllipsis={false}
+  onChange={this.handlePage}
+/>
+
+//...
+```
+> - `wrapperComponent` defaults to a `div` if not specified
+> - use `wrapperClass` to style default `div` __or__ pass styled `wrapperComponent`
+> - `wrapperClass` will be ignored if `wrapperComponent` is passed

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "react-ultimate-pagination-material-ui",
-  "version": "1.0.3",
+  "name": "@tony-kerz/react-ultimate-pagination-material-ui",
+  "version": "1.1.6",
   "description": "",
   "main": "lib/react-ultimate-pagination-material-ui.js",
   "files": [
@@ -25,18 +25,24 @@
   },
   "homepage": "https://github.com/ultimate-pagination/react-ultimate-pagination-material-ui#readme",
   "peerDependencies": {
-    "material-ui": ">=0.15.0"
+    "material-ui": "^1.0.0-beta.8",
+    "material-ui-icons": "^1.0.0-beta.5"
   },
   "dependencies": {
     "react-ultimate-pagination": "1.0.2"
   },
   "devDependencies": {
     "babel-cli": "^6.7.7",
     "babel-core": "^6.7.6",
-    "babel-loader": "^6.2.4",
+    "babel-loader": "^7.1.2",
     "babel-preset-es2015": "^6.6.0",
     "babel-preset-react": "^6.5.0",
-    "npm-run-all": "^1.8.0",
-    "webpack": "^1.13.0"
+    "material-ui": "^1.0.0-beta.8",
+    "material-ui-icons": "^1.0.0-beta.5",
+    "npm-run-all": "^4.1.1",
+    "webpack": "^3.5.6"
+  },
+  "publishConfig": {
+    "access": "public"
   }
 }

src/react-ultimate-pagination-material-ui.js

@@ -1,48 +1,80 @@
 import React from 'react';
 import {createUltimatePagination, ITEM_TYPES} from 'react-ultimate-pagination';
-import FlatButton from 'material-ui/FlatButton';
-import NavigationFirstPage from 'material-ui/svg-icons/navigation/first-page';
-import NavigationLastPage from 'material-ui/svg-icons/navigation/last-page';
-import NavigationChevronLeft from 'material-ui/svg-icons/navigation/chevron-left';
-import NavigationChevronRight from 'material-ui/svg-icons/navigation/chevron-right';
-
-const flatButtonStyle = {
-  minWidth: 36
-};
-
-const Page = ({value, isActive, onClick}) => (
-  <FlatButton style={flatButtonStyle} label={value.toString()} primary={isActive} onClick={onClick}/>
-);
-
-const Ellipsis = ({onClick}) => (
-  <FlatButton style={flatButtonStyle} label="..." onClick={onClick}/>
-);
-
-const FirstPageLink = ({isActive, onClick}) => (
-  <FlatButton style={flatButtonStyle} icon={<NavigationFirstPage/>} onClick={onClick}/>
-);
-
-const PreviousPageLink = ({isActive, onClick}) => (
-  <FlatButton style={flatButtonStyle} icon={<NavigationChevronLeft/>} onClick={onClick}/>
-);
-
-const NextPageLink = ({isActive, onClick}) => (
-  <FlatButton style={flatButtonStyle} icon={<NavigationChevronRight/>} onClick={onClick}/>
-);
-
-const LastPageLink = ({isActive, onClick}) => (
-  <FlatButton style={flatButtonStyle} icon={<NavigationLastPage/>} onClick={onClick}/>
-);
-
-const itemTypeToComponent = {
-  [ITEM_TYPES.PAGE]: Page,
-  [ITEM_TYPES.ELLIPSIS]: Ellipsis,
-  [ITEM_TYPES.FIRST_PAGE_LINK]: FirstPageLink,
-  [ITEM_TYPES.PREVIOUS_PAGE_LINK]: PreviousPageLink,
-  [ITEM_TYPES.NEXT_PAGE_LINK]: NextPageLink,
-  [ITEM_TYPES.LAST_PAGE_LINK]: LastPageLink
-};
-
-const UltimatePaginationMaterialUi = createUltimatePagination({itemTypeToComponent});
-
-export default UltimatePaginationMaterialUi;
+import jss from 'jss';
+import classnames from 'classnames';
+import Button from 'material-ui/Button';
+import IconButton from 'material-ui/IconButton';
+import NavigationFirstPage from 'material-ui-icons/FirstPage';
+import NavigationLastPage from 'material-ui-icons/LastPage';
+import NavigationChevronLeft from 'material-ui-icons/ChevronLeft';
+import NavigationChevronRight from 'material-ui-icons/ChevronRight';
+
+const {classes} = jss
+  .createStyleSheet({
+    button: {
+      height: '36px',
+      width: '36px',
+      'min-width': '36px'
+    },
+    wrapper: {
+      display: 'flex'
+    }
+  })
+  .attach();
+
+export default function ({buttonClass, wrapperClass, wrapperComponent} = {}) {
+  const buttonClasses = classnames(classes.button, buttonClass)
+  const wrapperClasses = classnames(classes.wrapper, wrapperClass)
+
+  const Page = ({value, isActive, onClick}) => (
+    <Button className={buttonClasses} color={isActive ? 'primary' : 'default'} onClick={onClick}>
+      {value.toString()}
+    </Button>
+  );
+
+  const Ellipsis = ({onClick}) => (
+    <Button className={buttonClasses} label="..." onClick={onClick}>
+      ...
+    </Button>
+  );
+
+  const FirstPageLink = ({isActive, onClick}) => (
+    <IconButton className={buttonClasses} onClick={onClick}>
+      <NavigationFirstPage/>
+    </IconButton>
+  );
+
+  const PreviousPageLink = ({isActive, onClick}) => (
+    <IconButton className={buttonClasses} onClick={onClick}>
+      <NavigationChevronLeft/>
+    </IconButton>
+  );
+
+  const NextPageLink = ({isActive, onClick}) => (
+    <IconButton className={buttonClasses} onClick={onClick}>
+      <NavigationChevronRight/>
+    </IconButton>
+  );
+
+  const LastPageLink = ({isActive, onClick}) => (
+    <IconButton className={buttonClasses} onClick={onClick}>
+      <NavigationLastPage/>
+    </IconButton>
+  );
+
+  function WrapperComponent(props) {
+    // default style here (use {display: 'flex'} to horizontally align `Button` and `IconButton`)
+    return wrapperComponent || <div className={wrapperClasses}>{props.children}</div>
+  };
+
+  const itemTypeToComponent = {
+    [ITEM_TYPES.PAGE]: Page,
+    [ITEM_TYPES.ELLIPSIS]: Ellipsis,
+    [ITEM_TYPES.FIRST_PAGE_LINK]: FirstPageLink,
+    [ITEM_TYPES.PREVIOUS_PAGE_LINK]: PreviousPageLink,
+    [ITEM_TYPES.NEXT_PAGE_LINK]: NextPageLink,
+    [ITEM_TYPES.LAST_PAGE_LINK]: LastPageLink
+  };
+
+  return createUltimatePagination({itemTypeToComponent, WrapperComponent});
+}

webpack.config.js

@@ -1,7 +1,9 @@
+const path = require('path')
+
 module.exports = {
   entry: './src/react-ultimate-pagination-material-ui.js',
   output: {
-    path: './dist',
+    path: path.resolve(__dirname, './dist'),
     library: 'reactUltimatePaginationMaterialUi',
     libraryTarget: 'umd',
   },
@@ -19,14 +21,11 @@ module.exports = {
   ],
   devtool: 'source-map',
   module: {
-    loaders: [
+    rules: [
       {
         test: /\.jsx?$/,
-        exclude: /(node_modules|bower_components)/,
-        loader: 'babel',
-        query: {
-          presets: ['es2015', 'react']
-        }
+        loader: 'babel-loader',
+        exclude: /(node_modules|bower_components)/
       }
     ]
   }