pcln-carousel - npm Package Compare versions

Comparing version 0.1.2 to 0.2.0

dist/cjs/Carousel.js

@@ -14,6 +14,2 @@ "use strict";
 
-var _moize = _interopRequireDefault(require("moize"));
-
-var _uuid = require("uuid");
-
 var _layoutToFlexWidths = require("./layoutToFlexWidths");
@@ -23,6 +19,14 @@
 
+var _pclnDesignSystem = require("pcln-design-system");
+
+var _Dots = require("./Dots");
+
+var _ArrowButton = require("./ArrowButton");
+
+var _Slider = require("./Slider");
+
+var _helpers = require("./helpers");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var getSlideKey = (0, _moize["default"])(_uuid.v4);
-
 var Carousel = function Carousel(_ref) {
@@ -32,4 +36,2 @@ var children = _ref.children,
       showDots = _ref$showDots === void 0 ? false : _ref$showDots,
-      _ref$showForwardBackB = _ref.showForwardBackBtns,
-      showForwardBackBtns = _ref$showForwardBackB === void 0 ? false : _ref$showForwardBackB,
       layout = _ref.layout,
@@ -50,5 +52,11 @@ _ref$infinite = _ref.infinite,
       _ref$visibleSlides = _ref.visibleSlides,
-      visibleSlides = _ref$visibleSlides === void 0 ? 1 : _ref$visibleSlides;
+      visibleSlides = _ref$visibleSlides === void 0 ? 1 : _ref$visibleSlides,
+      _ref$arrowsPosition = _ref.arrowsPosition,
+      arrowsPosition = _ref$arrowsPosition === void 0 ? 'side' : _ref$arrowsPosition,
+      _ref$slideSpacing = _ref.slideSpacing,
+      slideSpacing = _ref$slideSpacing === void 0 ? 2 : _ref$slideSpacing;
   var widths = (0, _layoutToFlexWidths.layoutToFlexWidths)(layout, children.length);
   var layoutSize = layout === null || layout === void 0 ? void 0 : layout.split('-').length;
+  var visibleSlidesArray = (0, _helpers.getVisibleSlidesArray)(visibleSlides);
+  var responsiveVisibleSlides = (0, _helpers.useResponsiveVisibleSlides)(visibleSlidesArray);
   return /*#__PURE__*/_react["default"].createElement(_Carousel.CarouselWrapper, null, /*#__PURE__*/_react["default"].createElement(_pureReactCarousel.CarouselProvider, {
@@ -58,3 +66,3 @@ naturalSlideWidth: naturalSlideWidth,
     totalSlides: children.length,
-    visibleSlides: layoutSize || visibleSlides,
+    visibleSlides: layoutSize || responsiveVisibleSlides,
     dragEnabled: true,
@@ -67,3 +75,22 @@ isIntrinsicHeight: isIntrinsicHeight,
     infinite: infinite
-  }, /*#__PURE__*/_react["default"].createElement(_pureReactCarousel.Slider, null, _react["default"].Children.map(children, function (item, index) {
+  }, arrowsPosition === 'top' ? /*#__PURE__*/_react["default"].createElement(_pclnDesignSystem.Flex, {
+    justifyContent: "flex-end",
+    mb: 2,
+    mr: slideSpacing
+  }, /*#__PURE__*/_react["default"].createElement(_ArrowButton.ArrowButton, {
+    type: "prev",
+    position: "top",
+    setPosition: arrowsPosition
+  }), /*#__PURE__*/_react["default"].createElement(_ArrowButton.ArrowButton, {
+    type: "next",
+    position: "top",
+    ml: 3,
+    setPosition: arrowsPosition
+  })) : null, /*#__PURE__*/_react["default"].createElement(_pclnDesignSystem.Relative, null, /*#__PURE__*/_react["default"].createElement(_ArrowButton.ArrowButton, {
+    pl: slideSpacing,
+    ml: "-30px",
+    type: "prev",
+    position: "side",
+    setPosition: arrowsPosition
+  }), /*#__PURE__*/_react["default"].createElement(_Slider.Slider, null, _react["default"].Children.map(children, function (item, index) {
     return (
@@ -74,3 +101,3 @@ /*#__PURE__*/
         index: index,
-        key: getSlideKey(item),
+        key: (0, _helpers.getSlideKey)(item),
         style: widths[index] && {
@@ -80,5 +107,27 @@ width: widths[index]
         "data-testid": "slide-".concat(index)
-      }, item)
+      }, /*#__PURE__*/_react["default"].createElement(_pclnDesignSystem.Box, {
+        p: slideSpacing
+      }, item))
     );
-  })), showForwardBackBtns && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_pureReactCarousel.ButtonBack, null, "Back"), /*#__PURE__*/_react["default"].createElement(_pureReactCarousel.ButtonNext, null, "Next")), showDots && /*#__PURE__*/_react["default"].createElement(_pureReactCarousel.DotGroup, null)));
+  })), /*#__PURE__*/_react["default"].createElement(_ArrowButton.ArrowButton, {
+    mr: "-30px",
+    pr: slideSpacing,
+    type: "next",
+    position: "side",
+    setPosition: arrowsPosition
+  })), arrowsPosition === 'bottom' || showDots ? /*#__PURE__*/_react["default"].createElement(_pclnDesignSystem.Flex, {
+    alignItems: "center",
+    justifyContent: "center",
+    pt: 2
+  }, /*#__PURE__*/_react["default"].createElement(_ArrowButton.ArrowButton, {
+    mr: 3,
+    type: "prev",
+    position: "bottom",
+    setPosition: arrowsPosition
+  }), showDots && /*#__PURE__*/_react["default"].createElement(_Dots.Dots, null), /*#__PURE__*/_react["default"].createElement(_ArrowButton.ArrowButton, {
+    ml: 3,
+    type: "next",
+    position: "bottom",
+    setPosition: arrowsPosition
+  })) : null));
 };
@@ -92,4 +141,6 @@
    * this will be overridden by the number of items in the layout.
+   * Can also be sent as array to set responsive sizes:
+   * [below 768px, below 1024px, above 1020px]
    * E.g. `layout={'25-50-25'}` will result in 3 slides shown per page. */
-  visibleSlides: _propTypes["default"].number,
+  visibleSlides: _propTypes["default"].any,
 
@@ -99,5 +150,2 @@ /** Show clickable navigation dots */
 
-  /** Show forward/back navigation buttons */
-  showForwardBackBtns: _propTypes["default"].bool,
-
   /** Percent width for each of the first N slides to use as a layout. Remaining slides will be divided
@@ -117,3 +165,3 @@ * into pages with the same number of items as the "layout" page. Not compatible with vertical orientation. */
   /** Possible values are "horizontal" and "vertical". Lets you have a horizontal or vertical carousel.
-   * Not compatible with `layout`. */
+   * Not compatible with `layout`. Use vertical at own risk */
   orientation: _propTypes["default"].oneOf(['horizontal', 'vertical']),
@@ -131,4 +179,8 @@
   isIntrinsicHeight: _propTypes["default"].bool,
-  arrowsPosition: _propTypes["default"].oneOf(['']) // todo
 
+  /** Positioning for the navigation arrow buttons */
+  arrowsPosition: _propTypes["default"].oneOf(['side', 'top', 'bottom', 'hide']),
+
+  /** Padding around the slides */
+  slideSpacing: _propTypes["default"].number
 };

dist/esm/Carousel.js

 import React from 'react';
 import PropTypes from 'prop-types';
-import { CarouselProvider, Slider, Slide, ButtonBack, ButtonNext, DotGroup } from 'pure-react-carousel';
-import moize from 'moize';
-import { v4 as uuidv4 } from 'uuid';
+import { CarouselProvider, Slide } from 'pure-react-carousel';
 import { layoutToFlexWidths } from './layoutToFlexWidths';
 import { CarouselWrapper } from './Carousel.styles';
-var getSlideKey = moize(uuidv4);
+import { Flex, Relative, Box } from 'pcln-design-system';
+import { Dots } from './Dots';
+import { ArrowButton } from './ArrowButton';
+import { Slider } from './Slider';
+import { getSlideKey, getVisibleSlidesArray, useResponsiveVisibleSlides } from './helpers';
 export var Carousel = function Carousel(_ref) {
@@ -13,4 +15,2 @@ var children = _ref.children,
       showDots = _ref$showDots === void 0 ? false : _ref$showDots,
-      _ref$showForwardBackB = _ref.showForwardBackBtns,
-      showForwardBackBtns = _ref$showForwardBackB === void 0 ? false : _ref$showForwardBackB,
       layout = _ref.layout,
@@ -31,5 +31,11 @@ _ref$infinite = _ref.infinite,
       _ref$visibleSlides = _ref.visibleSlides,
-      visibleSlides = _ref$visibleSlides === void 0 ? 1 : _ref$visibleSlides;
+      visibleSlides = _ref$visibleSlides === void 0 ? 1 : _ref$visibleSlides,
+      _ref$arrowsPosition = _ref.arrowsPosition,
+      arrowsPosition = _ref$arrowsPosition === void 0 ? 'side' : _ref$arrowsPosition,
+      _ref$slideSpacing = _ref.slideSpacing,
+      slideSpacing = _ref$slideSpacing === void 0 ? 2 : _ref$slideSpacing;
   var widths = layoutToFlexWidths(layout, children.length);
   var layoutSize = layout === null || layout === void 0 ? void 0 : layout.split('-').length;
+  var visibleSlidesArray = getVisibleSlidesArray(visibleSlides);
+  var responsiveVisibleSlides = useResponsiveVisibleSlides(visibleSlidesArray);
   return /*#__PURE__*/React.createElement(CarouselWrapper, null, /*#__PURE__*/React.createElement(CarouselProvider, {
@@ -39,3 +45,3 @@ naturalSlideWidth: naturalSlideWidth,
     totalSlides: children.length,
-    visibleSlides: layoutSize || visibleSlides,
+    visibleSlides: layoutSize || responsiveVisibleSlides,
     dragEnabled: true,
@@ -48,3 +54,22 @@ isIntrinsicHeight: isIntrinsicHeight,
     infinite: infinite
-  }, /*#__PURE__*/React.createElement(Slider, null, React.Children.map(children, function (item, index) {
+  }, arrowsPosition === 'top' ? /*#__PURE__*/React.createElement(Flex, {
+    justifyContent: "flex-end",
+    mb: 2,
+    mr: slideSpacing
+  }, /*#__PURE__*/React.createElement(ArrowButton, {
+    type: "prev",
+    position: "top",
+    setPosition: arrowsPosition
+  }), /*#__PURE__*/React.createElement(ArrowButton, {
+    type: "next",
+    position: "top",
+    ml: 3,
+    setPosition: arrowsPosition
+  })) : null, /*#__PURE__*/React.createElement(Relative, null, /*#__PURE__*/React.createElement(ArrowButton, {
+    pl: slideSpacing,
+    ml: "-30px",
+    type: "prev",
+    position: "side",
+    setPosition: arrowsPosition
+  }), /*#__PURE__*/React.createElement(Slider, null, React.Children.map(children, function (item, index) {
     return (
@@ -60,5 +85,27 @@ /*#__PURE__*/
         "data-testid": "slide-".concat(index)
-      }, item)
+      }, /*#__PURE__*/React.createElement(Box, {
+        p: slideSpacing
+      }, item))
     );
-  })), showForwardBackBtns && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ButtonBack, null, "Back"), /*#__PURE__*/React.createElement(ButtonNext, null, "Next")), showDots && /*#__PURE__*/React.createElement(DotGroup, null)));
+  })), /*#__PURE__*/React.createElement(ArrowButton, {
+    mr: "-30px",
+    pr: slideSpacing,
+    type: "next",
+    position: "side",
+    setPosition: arrowsPosition
+  })), arrowsPosition === 'bottom' || showDots ? /*#__PURE__*/React.createElement(Flex, {
+    alignItems: "center",
+    justifyContent: "center",
+    pt: 2
+  }, /*#__PURE__*/React.createElement(ArrowButton, {
+    mr: 3,
+    type: "prev",
+    position: "bottom",
+    setPosition: arrowsPosition
+  }), showDots && /*#__PURE__*/React.createElement(Dots, null), /*#__PURE__*/React.createElement(ArrowButton, {
+    ml: 3,
+    type: "next",
+    position: "bottom",
+    setPosition: arrowsPosition
+  })) : null));
 };
@@ -70,4 +117,6 @@ Carousel.propTypes = {
    * this will be overridden by the number of items in the layout.
+   * Can also be sent as array to set responsive sizes:
+   * [below 768px, below 1024px, above 1020px]
    * E.g. `layout={'25-50-25'}` will result in 3 slides shown per page. */
-  visibleSlides: PropTypes.number,
+  visibleSlides: PropTypes.any,
 
@@ -77,5 +126,2 @@ /** Show clickable navigation dots */
 
-  /** Show forward/back navigation buttons */
-  showForwardBackBtns: PropTypes.bool,
-
   /** Percent width for each of the first N slides to use as a layout. Remaining slides will be divided
@@ -95,3 +141,3 @@ * into pages with the same number of items as the "layout" page. Not compatible with vertical orientation. */
   /** Possible values are "horizontal" and "vertical". Lets you have a horizontal or vertical carousel.
-   * Not compatible with `layout`. */
+   * Not compatible with `layout`. Use vertical at own risk */
   orientation: PropTypes.oneOf(['horizontal', 'vertical']),
@@ -109,4 +155,8 @@
   isIntrinsicHeight: PropTypes.bool,
-  arrowsPosition: PropTypes.oneOf(['']) // todo
 
+  /** Positioning for the navigation arrow buttons */
+  arrowsPosition: PropTypes.oneOf(['side', 'top', 'bottom', 'hide']),
+
+  /** Padding around the slides */
+  slideSpacing: PropTypes.number
 };

package.json

 {
   "name": "pcln-carousel",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "Priceline Design System Carousel Component",
@@ -55,3 +55,4 @@ "main": "dist/cjs/index.js",
     "npm-run-all": "^4.1.5",
-    "pcln-design-system": "4.14.0",
+    "pcln-icons": "4.6.0",
+    "pcln-design-system": "4.15.0",
     "react": "^17.0.2",
@@ -67,3 +68,3 @@ "react-dom": "^17.0.2",
     "styled-components": ">=4.4.1",
-    "pcln-design-system": "4.14.0"
+    "pcln-design-system": "4.15.0"
   },
@@ -70,0 +71,0 @@ "scripts": {

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

46466

increased by127.83%

Number of package files

30

increased by200%

Lines of code

717

increased by181.18%

Worsened metrics

Dev dependency count

23

increased by4.55%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes