Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-elastic-carousel
Advanced tools
react-elastic-carousel - npm Package Compare versions
Comparing version 0.10.0-beta to 0.10.0-beta.1
@@ -350,3 +350,3 @@ import styled from 'styled-components'; | ||
| function _templateObject() { | ||
| var data = _taggedTemplateLiteral(["\n transition: all 0.3s ease;\n font-size: 1.6em;\n background-color: rgba(103, 58, 183, 0.1);\n color: ", ";\n box-shadow: 0 0 2px 0px #333;\n border-radius: 50%;\n border: none;\n width: 50px;\n height: 50px;\n min-width: 50px;\n line-height: 50px;\n align-self: center;\n cursor: pointer;\n outline: none;\n &:hover:enabled,\n &:focus:enabled {\n color: #fff;\n background-color: rgba(103, 58, 183, 1);\n box-shadow: 0 0 2px 0 #333;\n }\n &:disabled {\n cursor: not-allowed;\n }\n"]); | ||
| var data = _taggedTemplateLiteral(["\n box-sizing: border-box;\n transition: all 0.3s ease;\n font-size: 1.6em;\n background-color: rgba(103, 58, 183, 0.1);\n color: ", ";\n box-shadow: 0 0 2px 0px #333;\n border-radius: 50%;\n border: none;\n padding: 0;\n width: 50px;\n height: 50px;\n min-width: 50px;\n line-height: 50px;\n align-self: center;\n cursor: pointer;\n outline: none;\n &:hover:enabled,\n &:focus:enabled {\n color: #fff;\n background-color: rgba(103, 58, 183, 1);\n box-shadow: 0 0 2px 0 #333;\n }\n &:disabled {\n cursor: not-allowed;\n }\n"]); | ||
@@ -739,3 +739,3 @@ _templateObject = function _templateObject() { | ||
| function _templateObject$6() { | ||
| var data = _taggedTemplateLiteral(["\n transition: all 250ms ease;\n border: none;\n margin: 5px;\n background-color: ", ";\n font-size: 1.3em;\n content: \"\";\n height: 10px;\n width: 10px;\n box-shadow: ", ";\n border-radius: 50%;\n outline: none;\n &:hover,\n &:focus {\n cursor: pointer;\n box-shadow: ", ";\n }\n"]); | ||
| var data = _taggedTemplateLiteral(["\n box-sizing: border-box;\n padding: 0;\n transition: all 250ms ease;\n border: none;\n margin: 5px;\n background-color: ", ";\n font-size: 1.3em;\n content: \"\";\n height: 10px;\n width: 10px;\n box-shadow: ", ";\n border-radius: 50%;\n outline: none;\n &:hover,\n &:focus {\n cursor: pointer;\n box-shadow: ", ";\n }\n"]); | ||
@@ -1124,5 +1124,7 @@ _templateObject$6 = function _templateObject() { | ||
| // This usually happens with breakpoints. see https://github.com/sag1v/react-elastic-carousel/issues/122 | ||
| var activeIndex = currentState.activeIndex; | ||
| var endLimit = childrenLength - itemsToShow; | ||
| var activeIndex = currentState.activeIndex; // we take the lowest, in case itemsToShow is greater than childrenLength | ||
| var maxItemsToShow = Math.min(childrenLength, itemsToShow); | ||
| var endLimit = childrenLength - maxItemsToShow; | ||
| if (activeIndex > endLimit) { | ||
@@ -1536,3 +1538,4 @@ activeIndex = endLimit; | ||
| var childrenLength = Children.toArray(children).length; | ||
| var numOfPages = Math.ceil(childrenLength / itemsToShow); | ||
| var safeItemsToShow = Math.max(itemsToShow, 1); | ||
| var numOfPages = Math.ceil(childrenLength / safeItemsToShow); | ||
| return numOfPages || 1; | ||
@@ -1544,11 +1547,20 @@ }); | ||
| var _this$getDerivedProps9 = _this.getDerivedPropsFromBreakPoint(), | ||
| itemsToShow = _this$getDerivedProps9.itemsToShow; | ||
| itemsToShow = _this$getDerivedProps9.itemsToShow, | ||
| children = _this$getDerivedProps9.children; | ||
| var activeIndex = state.activeIndex, | ||
| activePage = state.activePage; | ||
| var newActivePage = Math.ceil(activeIndex / itemsToShow); | ||
| if (activePage !== newActivePage) { | ||
| var numOfPages = _this.getNumOfPages(); | ||
| var childrenLength = Children.toArray(children).length; | ||
| var inRangeItemsToShow = Math.min(childrenLength, itemsToShow); // watch out from 0 (so we wont divide by zero) | ||
| var safeItemsToShow = Math.max(inRangeItemsToShow, 1); | ||
| var newActivePage = Math.ceil(activeIndex / safeItemsToShow); | ||
| var inRangeActivePageIndex = Math.min(numOfPages - 1, newActivePage); | ||
| if (activePage !== inRangeActivePageIndex) { | ||
| return { | ||
| activePage: newActivePage | ||
| activePage: inRangeActivePageIndex | ||
| }; | ||
@@ -1599,3 +1611,10 @@ } | ||
| if (prevChildrenLength !== currentChildrenLength || prevProps.itemsToShow !== itemsToShow || prevProps.itemsToScroll !== itemsToScroll || prevProps.breakPoints !== breakPoints || sliderContainerWidth !== prevState.sliderContainerWidth) { | ||
| // we mimic a container resize to recalculate item width when itemsToShow are updated | ||
| this.onContainerResize({ | ||
| contentRect: { | ||
| width: sliderContainerWidth | ||
| } | ||
| }); | ||
| this.setPages(); | ||
| this.updateActivePage(); | ||
| } // autoplay update | ||
@@ -1602,0 +1621,0 @@ |
@@ -357,3 +357,3 @@ 'use strict'; | ||
| function _templateObject() { | ||
| var data = _taggedTemplateLiteral(["\n transition: all 0.3s ease;\n font-size: 1.6em;\n background-color: rgba(103, 58, 183, 0.1);\n color: ", ";\n box-shadow: 0 0 2px 0px #333;\n border-radius: 50%;\n border: none;\n width: 50px;\n height: 50px;\n min-width: 50px;\n line-height: 50px;\n align-self: center;\n cursor: pointer;\n outline: none;\n &:hover:enabled,\n &:focus:enabled {\n color: #fff;\n background-color: rgba(103, 58, 183, 1);\n box-shadow: 0 0 2px 0 #333;\n }\n &:disabled {\n cursor: not-allowed;\n }\n"]); | ||
| var data = _taggedTemplateLiteral(["\n box-sizing: border-box;\n transition: all 0.3s ease;\n font-size: 1.6em;\n background-color: rgba(103, 58, 183, 0.1);\n color: ", ";\n box-shadow: 0 0 2px 0px #333;\n border-radius: 50%;\n border: none;\n padding: 0;\n width: 50px;\n height: 50px;\n min-width: 50px;\n line-height: 50px;\n align-self: center;\n cursor: pointer;\n outline: none;\n &:hover:enabled,\n &:focus:enabled {\n color: #fff;\n background-color: rgba(103, 58, 183, 1);\n box-shadow: 0 0 2px 0 #333;\n }\n &:disabled {\n cursor: not-allowed;\n }\n"]); | ||
@@ -746,3 +746,3 @@ _templateObject = function _templateObject() { | ||
| function _templateObject$6() { | ||
| var data = _taggedTemplateLiteral(["\n transition: all 250ms ease;\n border: none;\n margin: 5px;\n background-color: ", ";\n font-size: 1.3em;\n content: \"\";\n height: 10px;\n width: 10px;\n box-shadow: ", ";\n border-radius: 50%;\n outline: none;\n &:hover,\n &:focus {\n cursor: pointer;\n box-shadow: ", ";\n }\n"]); | ||
| var data = _taggedTemplateLiteral(["\n box-sizing: border-box;\n padding: 0;\n transition: all 250ms ease;\n border: none;\n margin: 5px;\n background-color: ", ";\n font-size: 1.3em;\n content: \"\";\n height: 10px;\n width: 10px;\n box-shadow: ", ";\n border-radius: 50%;\n outline: none;\n &:hover,\n &:focus {\n cursor: pointer;\n box-shadow: ", ";\n }\n"]); | ||
@@ -1131,5 +1131,7 @@ _templateObject$6 = function _templateObject() { | ||
| // This usually happens with breakpoints. see https://github.com/sag1v/react-elastic-carousel/issues/122 | ||
| var activeIndex = currentState.activeIndex; | ||
| var endLimit = childrenLength - itemsToShow; | ||
| var activeIndex = currentState.activeIndex; // we take the lowest, in case itemsToShow is greater than childrenLength | ||
| var maxItemsToShow = Math.min(childrenLength, itemsToShow); | ||
| var endLimit = childrenLength - maxItemsToShow; | ||
| if (activeIndex > endLimit) { | ||
@@ -1543,3 +1545,4 @@ activeIndex = endLimit; | ||
| var childrenLength = React.Children.toArray(children).length; | ||
| var numOfPages = Math.ceil(childrenLength / itemsToShow); | ||
| var safeItemsToShow = Math.max(itemsToShow, 1); | ||
| var numOfPages = Math.ceil(childrenLength / safeItemsToShow); | ||
| return numOfPages || 1; | ||
@@ -1551,11 +1554,20 @@ }); | ||
| var _this$getDerivedProps9 = _this.getDerivedPropsFromBreakPoint(), | ||
| itemsToShow = _this$getDerivedProps9.itemsToShow; | ||
| itemsToShow = _this$getDerivedProps9.itemsToShow, | ||
| children = _this$getDerivedProps9.children; | ||
| var activeIndex = state.activeIndex, | ||
| activePage = state.activePage; | ||
| var newActivePage = Math.ceil(activeIndex / itemsToShow); | ||
| if (activePage !== newActivePage) { | ||
| var numOfPages = _this.getNumOfPages(); | ||
| var childrenLength = React.Children.toArray(children).length; | ||
| var inRangeItemsToShow = Math.min(childrenLength, itemsToShow); // watch out from 0 (so we wont divide by zero) | ||
| var safeItemsToShow = Math.max(inRangeItemsToShow, 1); | ||
| var newActivePage = Math.ceil(activeIndex / safeItemsToShow); | ||
| var inRangeActivePageIndex = Math.min(numOfPages - 1, newActivePage); | ||
| if (activePage !== inRangeActivePageIndex) { | ||
| return { | ||
| activePage: newActivePage | ||
| activePage: inRangeActivePageIndex | ||
| }; | ||
@@ -1606,3 +1618,10 @@ } | ||
| if (prevChildrenLength !== currentChildrenLength || prevProps.itemsToShow !== itemsToShow || prevProps.itemsToScroll !== itemsToScroll || prevProps.breakPoints !== breakPoints || sliderContainerWidth !== prevState.sliderContainerWidth) { | ||
| // we mimic a container resize to recalculate item width when itemsToShow are updated | ||
| this.onContainerResize({ | ||
| contentRect: { | ||
| width: sliderContainerWidth | ||
| } | ||
| }); | ||
| this.setPages(); | ||
| this.updateActivePage(); | ||
| } // autoplay update | ||
@@ -1609,0 +1628,0 @@ |
| { | ||
| "name": "react-elastic-carousel", | ||
| "version": "0.10.0-beta", | ||
| "version": "0.10.0-beta.1", | ||
| "description": "A flexible and responsive carousel component for react", | ||
@@ -18,2 +18,3 @@ "author": "sag1v (Sagiv Ben Giat)", | ||
| "start": "concurrently -r -k -s all \"docz dev\" \"yarn run lint:watch\"", | ||
| "demo": "rollup --config rollup.config.demo.js --watch", | ||
| "lint:fix": "eslint src/. --fix", | ||
@@ -65,2 +66,3 @@ "lint:watch": "esw --watch --fix src/.", | ||
| "@babel/preset-react": "^7.0.0", | ||
| "@rollup/plugin-replace": "^2.3.4", | ||
| "babel-eslint": "^9.0.0", | ||
@@ -100,4 +102,6 @@ "concurrently": "^4.1.0", | ||
| "rollup-plugin-copy": "^3.3.0", | ||
| "rollup-plugin-livereload": "^2.0.0", | ||
| "rollup-plugin-node-resolve": "^3.3.0", | ||
| "rollup-plugin-postcss": "^1.6.2", | ||
| "rollup-plugin-serve": "^1.1.0", | ||
| "rollup-plugin-url": "^1.4.0", | ||
@@ -104,0 +108,0 @@ "styled-components": "^5.1.0" |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by1.81%
299743
- Lines of code
- increased by0.91%
3316
Worsened metrics
- Dev dependency count
- increased by5.17%
61
No dependency changes