react-paginate - npm Package Compare versions

Comparing version 6.3.2 to 6.4.0

__tests__/PaginationBoxView-test.js

@@ -8,3 +8,3 @@ import React from 'react';
 
-import PaginationBoxView from './../react_components/PaginationBoxView';
+import PaginationBoxView from '../react_components/PaginationBoxView';
 
@@ -1135,2 +1135,27 @@ import ReactTestUtils from 'react-dom/test-utils';
   });
+
+   it('should render default aria labels if they are not specified', function() {
+      const linkedPagination = ReactTestUtils.renderIntoDocument(
+        <PaginationBoxView pageCount={3} />
+      );
+
+      expect(ReactDOM.findDOMNode(linkedPagination).querySelector('li:last-child a')
+        .getAttribute('aria-label')).toBe('Next page');
+      expect(ReactDOM.findDOMNode(linkedPagination).querySelector('li:first-child a')
+        .getAttribute('aria-label')).toBe('Previous page');
+    });
+
+    it('should render custom aria labels if they are defined', function() {
+      const linkedPagination = ReactTestUtils.renderIntoDocument(
+        <PaginationBoxView pageCount={3}
+                           nextAriaLabel={'Go to the next page'}
+                           previousAriaLabel={'Go to the previous page'}
+        />
+      );
+
+      expect(ReactDOM.findDOMNode(linkedPagination).querySelector('li:last-child a')
+        .getAttribute('aria-label')).toBe('Go to the next page');
+      expect(ReactDOM.findDOMNode(linkedPagination).querySelector('li:first-child a')
+        .getAttribute('aria-label')).toBe('Go to the previous page');
+    });
 });

.eslintrc.json

@@ -13,3 +13,3 @@ {
   ],
-  "parser": "babel-eslint",
+  "parser": "@babel/eslint-parser",
   "parserOptions": {
@@ -16,0 +16,0 @@ "ecmaFeatures": {

demo/js/demo.js

@@ -15,3 +15,3 @@ import React, { Component } from 'react';
   render() {
-    let commentNodes = this.props.data.map(function(comment, index) {
+    let commentNodes = this.props.data.map(function (comment, index) {
       return <div key={index}>{comment.comment}</div>;
@@ -51,3 +51,3 @@ });
 
-      success: data => {
+      success: (data) => {
         this.setState({
@@ -69,3 +69,3 @@ data: data.comments,
 
-  handlePageClick = data => {
+  handlePageClick = (data) => {
     let selected = data.selected;
@@ -72,0 +72,0 @@ let offset = Math.ceil(selected * this.props.perPage);

demo/webpack.config.js

@@ -5,9 +5,13 @@ /* global __dirname */
 
-const dir_js = path.resolve(__dirname, 'js');
-const dir_build = path.resolve(__dirname, 'build');
+const dir_demo_js = path.resolve(__dirname, 'js');
+const dir_demo_build = path.resolve(__dirname, 'build');
 
+const dir_js = path.join(__dirname, '..', 'react_components');
+const dir_node_modules = path.resolve(__dirname, '..', 'node_modules');
+
 module.exports = {
-  entry: path.resolve(dir_js, 'demo.js'),
+  target: 'node',
+  entry: path.resolve(dir_demo_js, 'demo.js'),
   output: {
-    path: dir_build,
+    path: dir_demo_build,
     filename: 'demo.js',
@@ -17,3 +21,3 @@ publicPath: 'build',
   devServer: {
-    contentBase: dir_build,
+    contentBase: dir_demo_build,
   },
@@ -24,11 +28,13 @@ module: {
         use: 'react-hot-loader/webpack',
-        test: dir_js,
+        test: dir_demo_js,
       },
       {
         use: 'babel-loader',
-        test: dir_js,
+        test: dir_demo_js,
+        exclude: dir_node_modules,
       },
       {
         use: 'babel-loader',
-        test: path.join(__dirname, '..', 'react_components'),
+        test: dir_js,
+        exclude: dir_node_modules,
       },
@@ -39,3 +45,3 @@ ],
     alias: {
-      'react-paginate': path.join(__dirname, '..', 'react_components'),
+      'react-paginate': dir_js,
     },
@@ -42,0 +48,0 @@ },

package.json

 {
   "name": "react-paginate",
-  "version": "6.3.2",
+  "version": "6.4.0",
   "description": "A ReactJS component that creates a pagination.",
-  "main": "./dist/index.js",
+  "main": "./dist/react-paginate.js",
   "repository": {
@@ -30,50 +30,33 @@ "type": "git",
   "devDependencies": {
-    "babel-cli": "^6.26.0",
-    "babel-core": "^6.26.0",
-    "babel-eslint": "^10.0.1",
-    "babel-jest": "^23.0.0-alpha.0",
-    "babel-loader": "^7.1.4",
-    "babel-plugin-transform-class-properties": "^6.24.1",
-    "babel-preset-env": "^1.6.1",
-    "babel-preset-react": "^6.24.1",
-    "eslint": "^5.12.0",
-    "eslint-config-prettier": "^3.3.0",
-    "eslint-plugin-prettier": "^3.0.1",
-    "eslint-plugin-react": "^7.12.3",
-    "express": "^4.14.0",
-    "jest-cli": "^23.0.0-alpha.0",
-    "jquery": "^3.1.1",
-    "prettier": "1.15.3",
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0",
-    "react-hot-loader": "^3.0.0",
-    "serve-static": "^1.11.1",
-    "webpack": "^4.24.0",
-    "webpack-cli": "^3.1.2",
-    "webpack-dev-middleware": "^3.4.0"
+    "@babel/cli": "^7.10.5",
+    "@babel/core": "^7.11.1",
+    "@babel/eslint-parser": "^7.11.3",
+    "@babel/plugin-proposal-class-properties": "^7.10.4",
+    "@babel/preset-env": "^7.11.0",
+    "@babel/preset-react": "^7.10.4",
+    "babel-core": "^6.26.3",
+    "babel-jest": "^23.6.0",
+    "babel-loader": "^8.1.0",
+    "eslint": "^7.6.0",
+    "eslint-config-prettier": "^6.11.0",
+    "eslint-plugin-prettier": "^3.1.4",
+    "eslint-plugin-react": "^7.20.5",
+    "express": "^4.17.1",
+    "jest-cli": "^26.2.2",
+    "jquery": "^3.5.1",
+    "prettier": "^2.0.5",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-hot-loader": "^4.12.21",
+    "serve-static": "^1.14.1",
+    "webpack": "^4.44.1",
+    "webpack-cli": "^3.3.12",
+    "webpack-dev-middleware": "^3.7.2"
   },
   "scripts": {
     "test": "jest",
-    "prepublish": "babel ./react_components --out-dir ./dist --source-maps",
-    "start": "npm run demo",
-    "demo": "webpack --config demo/webpack.config.js --mode=development && node demo/data.js && node demo/server.js"
-  },
-  "jest": {
-    "verbose": true,
-    "testURL": "http://localhost/",
-    "transform": {
-      ".*": "<rootDir>/node_modules/babel-jest"
-    },
-    "roots": [
-      "__tests__"
-    ],
-    "unmockedModulePathPatterns": [
-      "<rootDir>/node_modules/react",
-      "<rootDir>/node_modules/react-dom",
-      "<rootDir>/node_modules/fbjs"
-    ],
-    "modulePathIgnorePatterns": [
-      "<rootDir>/node_modules/"
-    ]
+    "build": "webpack --config webpack.config.js --mode=production",
+    "demo": "webpack --config demo/webpack.config.js --mode=development && node demo/data.js && node demo/server.js",
+    "start": "npm run demo"
   }
 }

react_components/BreakView.js

@@ -6,3 +6,3 @@ 'use strict';
 
-const BreakView = props => {
+const BreakView = (props) => {
   const { breakLabel, breakClassName, breakLinkClassName, onClick } = props;
@@ -9,0 +9,0 @@ const className = breakClassName || 'break';

react_components/PageView.js

@@ -6,3 +6,3 @@ 'use strict';
 
-const PageView = props => {
+const PageView = (props) => {
   let pageClassName = props.pageClassName;
@@ -9,0 +9,0 @@ let pageLinkClassName = props.pageLinkClassName;

react_components/PaginationBoxView.js

@@ -14,3 +14,5 @@ 'use strict';
     previousLabel: PropTypes.node,
+    previousAriaLabel: PropTypes.string,
     nextLabel: PropTypes.node,
+    nextAriaLabel: PropTypes.string,
     breakLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
@@ -43,6 +45,8 @@ hrefBuilder: PropTypes.func,
     activeClassName: 'selected',
+    previousLabel: 'Previous',
     previousClassName: 'previous',
+    previousAriaLabel: 'Previous page',
+    nextLabel: 'Next',
     nextClassName: 'next',
-    previousLabel: 'Previous',
-    nextLabel: 'Next',
+    nextAriaLabel: 'Next page',
     breakLabel: '...',
@@ -97,3 +101,3 @@ disabledClassName: 'disabled',
 
-  handlePreviousPage = evt => {
+  handlePreviousPage = (evt) => {
     const { selected } = this.state;
@@ -106,3 +110,3 @@ evt.preventDefault ? evt.preventDefault() : (evt.returnValue = false);
 
-  handleNextPage = evt => {
+  handleNextPage = (evt) => {
     const { selected } = this.state;
@@ -184,3 +188,3 @@ const { pageCount } = this.props;
 
-  callCallback = selectedItem => {
+  callCallback = (selectedItem) => {
     if (
@@ -257,3 +261,3 @@ typeof this.props.onPageChange !== 'undefined' &&
       let breakView;
-      let createPageView = index => this.getPageElement(index);
+      let createPageView = (index) => this.getPageElement(index);
 
@@ -313,10 +317,12 @@ for (index = 0; index < pageCount; index++) {
       disabledClassName,
-      previousClassName,
-      nextClassName,
       pageCount,
       containerClassName,
+      previousLabel,
+      previousClassName,
       previousLinkClassName,
-      previousLabel,
+      previousAriaLabel,
+      nextLabel,
+      nextClassName,
       nextLinkClassName,
-      nextLabel,
+      nextAriaLabel,
     } = this.props;
@@ -346,2 +352,3 @@
             aria-disabled={previousAriaDisabled}
+            aria-label={previousAriaLabel}
           >
@@ -363,2 +370,3 @@ {previousLabel}
             aria-disabled={nextAriaDisabled}
+            aria-label={nextAriaLabel}
           >
@@ -365,0 +373,0 @@ {nextLabel}

webpack.config.js

 /* global __dirname */
-var path = require('path');
-var dir_js = path.resolve(__dirname, 'react_components');
-var dir_build = path.resolve(__dirname, 'build');
 
-module.exports = {
+const path = require('path');
+
+const dir_js = path.resolve(__dirname, 'react_components');
+const dir_build = path.resolve(__dirname, 'build');
+const dir_dist = path.resolve(__dirname, 'dist');
+const dir_node_modules = path.resolve(__dirname, 'node_modules');
+
+const config = {
+  target: 'node',
   entry: path.resolve(dir_js, 'index.js'),
@@ -22,2 +27,3 @@ output: {
         test: dir_js,
+        exclude: dir_node_modules,
       },
@@ -27,2 +33,3 @@ {
         test: dir_js,
+        exclude: dir_node_modules,
       },
@@ -47,1 +54,8 @@ ],
 };
+
+module.exports = (env, argv) => {
+  if (argv.mode === 'production') {
+    config.output.path = dir_dist;
+  }
+  return config;
+}

New alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

303683

increased by0.33%

Worsened metrics

Dev dependency count

24

increased by4.35%

Number of package files

29

decreased by-14.71%

Lines of code

1809

decreased by-16.06%

Number of low quality alerts

2

increased by100%

No dependency changes