@hitachivantara/uikit-react-lab 4.0.2 → 4.0.4

package/dist/ImageCarousel/ImageCarousel.js

@@ -1,142 +1,100 @@
 "use strict";
 
 require("core-js/modules/es.object.keys.js");
-
 require("core-js/modules/es.symbol.js");
-
 require("core-js/modules/es.array.filter.js");
-
 require("core-js/modules/es.object.to-string.js");
-
 require("core-js/modules/es.object.get-own-property-descriptor.js");
-
 require("core-js/modules/web.dom-collections.for-each.js");
-
 require("core-js/modules/es.object.get-own-property-descriptors.js");
-
 require("core-js/modules/es.array.iterator.js");
-
 require("core-js/modules/es.string.iterator.js");
-
 require("core-js/modules/es.weak-map.js");
-
 require("core-js/modules/web.dom-collections.iterator.js");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 require("core-js/modules/es.array.map.js");
-
 require("core-js/modules/es.array.slice.js");
-
 require("core-js/modules/es.array.concat.js");
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _clsx = _interopRequireDefault(require("clsx"));
-
 var _uikitReactCore = require("@hitachivantara/uikit-react-core");
-
 var _material = require("@mui/material");
-
 var _styles = require("@mui/styles");
-
 var _uikitReactIcons = require("@hitachivantara/uikit-react-icons");
-
 var _styles2 = _interopRequireDefault(require("./styles"));
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 var _Close, _Fullscreen, _Backwards, _Forwards, _Backwards2, _Forwards2;
-
 var _excluded = ["className", "classes", "documents", "title", "id", "fullscreen", "thumbnails", "lowCardinality", "infiniteCarousel", "xs", "onChange", "counter", "currentStep", "setCurrentStep", "visibleArrows", "variant"];
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 /**
  * ImageCarousel description/documentation paragraph
  */
 var HvImageCarousel = function HvImageCarousel(props) {
   var className = props.className,
-      classes = props.classes,
-      documents = props.documents,
-      title = props.title,
-      id = props.id,
-      _props$fullscreen = props.fullscreen,
-      fullscreenProp = _props$fullscreen === void 0 ? false : _props$fullscreen,
-      _props$thumbnails = props.thumbnails,
-      thumbnails = _props$thumbnails === void 0 ? false : _props$thumbnails,
-      _props$lowCardinality = props.lowCardinality,
-      lowCardinality = _props$lowCardinality === void 0 ? false : _props$lowCardinality,
-      _props$infiniteCarous = props.infiniteCarousel,
-      infiniteCarousel = _props$infiniteCarous === void 0 ? false : _props$infiniteCarous,
-      _props$xs = props.xs,
-      xs = _props$xs === void 0 ? false : _props$xs,
-      onChange = props.onChange,
-      _props$counter = props.counter,
-      counter = _props$counter === void 0 ? false : _props$counter,
-      _props$currentStep = props.currentStep,
-      currentStep = _props$currentStep === void 0 ? 0 : _props$currentStep,
-      setCurrentStep = props.setCurrentStep,
-      _props$visibleArrows = props.visibleArrows,
-      visibleArrows = _props$visibleArrows === void 0 ? false : _props$visibleArrows,
-      _props$variant = props.variant,
-      variant = _props$variant === void 0 ? "contain" : _props$variant,
-      others = (0, _objectWithoutProperties2.default)(props, _excluded);
+    classes = props.classes,
+    documents = props.documents,
+    title = props.title,
+    id = props.id,
+    _props$fullscreen = props.fullscreen,
+    fullscreenProp = _props$fullscreen === void 0 ? false : _props$fullscreen,
+    _props$thumbnails = props.thumbnails,
+    thumbnails = _props$thumbnails === void 0 ? false : _props$thumbnails,
+    _props$lowCardinality = props.lowCardinality,
+    lowCardinality = _props$lowCardinality === void 0 ? false : _props$lowCardinality,
+    _props$infiniteCarous = props.infiniteCarousel,
+    infiniteCarousel = _props$infiniteCarous === void 0 ? false : _props$infiniteCarous,
+    _props$xs = props.xs,
+    xs = _props$xs === void 0 ? false : _props$xs,
+    onChange = props.onChange,
+    _props$counter = props.counter,
+    counter = _props$counter === void 0 ? false : _props$counter,
+    _props$currentStep = props.currentStep,
+    currentStep = _props$currentStep === void 0 ? 0 : _props$currentStep,
+    setCurrentStep = props.setCurrentStep,
+    _props$visibleArrows = props.visibleArrows,
+    visibleArrows = _props$visibleArrows === void 0 ? false : _props$visibleArrows,
+    _props$variant = props.variant,
+    variant = _props$variant === void 0 ? "contain" : _props$variant,
+    others = (0, _objectWithoutProperties2.default)(props, _excluded);
   var elementId = (0, _uikitReactCore.useUniqueId)(id, "hvcarousel");
-
   var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      fullscreen = _useState2[0],
-      setFullscreen = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    fullscreen = _useState2[0],
+    setFullscreen = _useState2[1];
   var options = documents.map(function (element) {
     return {
       src: element.src,
       value: (0, _uikitReactCore.setId)(elementId, element.value)
     };
   });
-
   var _useState3 = (0, _react.useState)(0),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      sliceStart = _useState4[0],
-      setSliceStart = _useState4[1];
-
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    sliceStart = _useState4[0],
+    setSliceStart = _useState4[1];
   var _useState5 = (0, _react.useState)(currentStep),
-      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-      selImage = _useState6[0],
-      setImage = _useState6[1];
-
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    selImage = _useState6[0],
+    setImage = _useState6[1];
   var _useState7 = (0, _react.useState)(0),
-      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-      offset = _useState8[0],
-      setOffset = _useState8[1];
-
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    offset = _useState8[0],
+    setOffset = _useState8[1];
   var _useState9 = (0, _react.useState)(false),
-      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-      imageHover = _useState10[0],
-      setImageHover = _useState10[1];
-
+    _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+    imageHover = _useState10[0],
+    setImageHover = _useState10[1];
   var direction = "next";
   var useStyles = (0, _styles.makeStyles)(function (theme) {
     return {
@@ -155,17 +113,14 @@ var HvImageCarousel = function HvImageCarousel(props) {
     };
   });
   var style = useStyles();
-
   var _useScrollTo = (0, _uikitReactCore.useScrollTo)(0, (0, _uikitReactCore.setId)(elementId, "panel"), false, 100, documents, onChange, "row"),
-      _useScrollTo2 = (0, _slicedToArray2.default)(_useScrollTo, 2),
-      selectedIndex = _useScrollTo2[0],
-      setScrollTo = _useScrollTo2[1];
-
+    _useScrollTo2 = (0, _slicedToArray2.default)(_useScrollTo, 2),
+    selectedIndex = _useScrollTo2[0],
+    setScrollTo = _useScrollTo2[1];
   var _useScrollTo3 = (0, _uikitReactCore.useScrollTo)(0, (0, _uikitReactCore.setId)(elementId, "bigPanel"), false, 0, options, onChange, "row"),
-      _useScrollTo4 = (0, _slicedToArray2.default)(_useScrollTo3, 2),
-      selectedBigIndex = _useScrollTo4[0],
-      setBigScrollTo = _useScrollTo4[1];
-
+    _useScrollTo4 = (0, _slicedToArray2.default)(_useScrollTo3, 2),
+    selectedBigIndex = _useScrollTo4[0],
+    setBigScrollTo = _useScrollTo4[1];
   var refBackwards = (0, _react.useRef)(null);
   var refForwards = (0, _react.useRef)(null);
   var typeCircle = "circle";
@@ -173,19 +128,15 @@ var HvImageCarousel = function HvImageCarousel(props) {
     var wrappedOnChange = function wrappedOnChange() {
       onChange === null || onChange === void 0 ? void 0 : onChange(event, index);
     };
-
     setScrollTo(event, value, index, wrappedOnChange);
   }, [onChange, setScrollTo]);
-
   var handleFocus = function handleFocus(focus) {
     if (focus === refBackwards.current || focus === refForwards.current) focus.focus();
   };
-
   var handleBigSelection = (0, _react.useCallback)(function (event, value, index) {
     var wrappedOnChange = function wrappedOnChange() {
       onChange === null || onChange === void 0 ? void 0 : onChange(event, index);
     };
-
     setBigScrollTo(event, value, index, wrappedOnChange);
   }, [onChange, setBigScrollTo]);
   var handleVisibility = (0, _react.useCallback)(function (event, value, index) {
@@ -198,7 +149,6 @@ var HvImageCarousel = function HvImageCarousel(props) {
     var imageWidth = image.offsetWidth;
     var scroll = panel.scrollLeft;
     var focus = document.activeElement;
-
     if (offsetPanel + offsetImage + offset + imageWidth - scroll > containerWidth || offsetImage - scroll < 0) {
       handleSelection(event, value, index);
       handleFocus(focus);
@@ -209,62 +159,50 @@ var HvImageCarousel = function HvImageCarousel(props) {
   }, [selImage, setCurrentStep]);
   (0, _react.useEffect)(function () {
     if (fullscreen) setOffset(150);else setOffset(0);
-
     if (thumbnails) {
       handleVisibility(undefined, documents[selImage].value, selImage, selectedIndex);
     }
-
     handleBigSelection(undefined, options[selImage].value, selImage, selectedBigIndex);
   }, [documents, fullscreen, handleBigSelection, handleVisibility, options, selImage, selectedBigIndex, selectedIndex, thumbnails]);
-
   var changeSlice = function changeSlice() {
     if (direction === "next") {
       if (infiniteCarousel && selImage === documents.length - 1) setSliceStart(0);else if (selImage > sliceStart + 2 && selImage !== documents.length - 2) setSliceStart(sliceStart + 1);
     }
-
     if (direction === "prev") {
       if (infiniteCarousel && selImage === 0) setSliceStart(documents.length > 5 ? documents.length - 5 : 0);else if (selImage < sliceStart + 2 && selImage !== 1) setSliceStart(sliceStart - 1);
     }
   };
-
   var nextImage = function nextImage() {
     var next;
     if (selImage !== documents.length - 1) next = selImage + 1;else if (infiniteCarousel) next = 0;
     setImage(next);
-
     if (xs) {
       direction = "next";
       changeSlice();
     }
   };
-
   var previousImage = function previousImage() {
     var previous;
     if (selImage !== 0) previous = selImage - 1;else if (infiniteCarousel) previous = documents.length - 1;
     setImage(previous);
-
     if (xs) {
       direction = "prev";
       changeSlice();
     }
   };
-
   var styleThumbnail = function styleThumbnail(index) {
     if (index !== selImage) return classes.img;
     return classes.thumbnailSelected;
   };
-
   var circleType = function circleType(index) {
     if (index === selImage) {
       typeCircle = "BigCircle";
       if (xs) return classes.xsSelectedCircle;
       return classes.selectedCircle;
     }
-
     typeCircle = "Circle";
     return classes.miniCircle;
   };
-
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_uikitReactCore.HvContainer, _objectSpread(_objectSpread({
     id: (0, _uikitReactCore.setId)(elementId, "container"),
     className: (0, _clsx.default)(className, classes.root, xs ? "xs" : "nxs", fullscreen && classes.fullscreenStyle)
@@ -455,13 +393,11 @@ var HvImageCarousel = function HvImageCarousel(props) {
     })]
   }));
 };
-
 process.env.NODE_ENV !== "production" ? HvImageCarousel.propTypes = {
   /**
    * Class names to be applied.
    */
   className: _propTypes.default.string,
-
   /**
    * A Jss Object used to override or extend the styles applied.
    */
@@ -470,197 +406,158 @@ process.env.NODE_ENV !== "production" ? HvImageCarousel.propTypes = {
      * Styles applied to the component root class.
      */
     root: _propTypes.default.string,
-
     /**
      * Styles applied to the component SelectedImage.
      */
     selectedImage: _propTypes.default.string,
-
     /**
      * Styles applied to xs mode
      */
     xsMode: _propTypes.default.string,
-
     /**
      * Styles applied to image in xsMode
      */
     xsImage: _propTypes.default.string,
-
     /**
      * Styles applied to panel with low cardinality circles
      */
     circles: _propTypes.default.string,
-
     /**
      * Styles applied to xs mode circles
      */
     xsCircles: _propTypes.default.string,
-
     /**
      * Styles applied to unavailable button
      */
     hidden: _propTypes.default.string,
-
     /**
      * Styles applied to the carousel title
      */
     title: _propTypes.default.string,
-
     /**
      * Styles applied to the counter
      */
     counter: _propTypes.default.string,
-
     /**
      * Styles applied to the div with the counter
      */
     divCounter: _propTypes.default.string,
-
     /**
      * Styles applied to the thumbnails
      */
     img: _propTypes.default.string,
-
     /**
      * Styles applied to the selected thumbnail
      */
     thumbnailSelected: _propTypes.default.string,
-
     /**
      * Styles applied to the thumbnail button
      */
     thumbnailButton: _propTypes.default.string,
-
     /**
      * Styles applied to the low cardinality circles
      */
     miniCircle: _propTypes.default.string,
-
     /**
      * Styles applied to the circle of the selected image
      */
     selectedCircle: _propTypes.default.string,
-
     /**
      * Styles applied to the circle of the selected image in xsmode
      */
     xsSelectedCircle: _propTypes.default.string,
-
     /**
      * Styles applied to the panel with low cardinality buttons
      */
     lowButtons: _propTypes.default.string,
-
     /**
      * Styles applied to the container of the selected image
      */
     imageContainer: _propTypes.default.string,
-
     /**
      * Styles applied to the panel with the thumbnails
      */
     stack: _propTypes.default.string,
-
     /**
      * Styles applied to the panel that contains the buttons and counter in default mode
      */
     normalButtons: _propTypes.default.string,
-
     /**
      * Styles applied to fullscreen mode.
      */
     fullscreenStyle: _propTypes.default.string,
-
     /**
      * Styles applied to close button in fullscreen mode.
      */
     closeButton: _propTypes.default.string,
-
     /**
      * Styles applied to change image buttons.
      */
     button: _propTypes.default.string,
-
     /**
      * Styles applied to thumbnails panel.
      */
     panel: _propTypes.default.string
   }).isRequired,
-
   /**
    * Documents to be displayed.
    */
   documents: _propTypes.default.array.isRequired,
-
   /**
    * Title of the image carousel
    */
   title: _propTypes.default.node,
-
   /**
    * A function called each time the selected image changes.
    */
   onChange: _propTypes.default.func,
-
   /**
    * Id to be applied to the root node.
    */
   id: _propTypes.default.string,
-
   /**
    * A flag that activates the thumbnails.
    */
   thumbnails: _propTypes.default.bool,
-
   /**
    * A flag that switches to low cardinality mode
    */
   lowCardinality: _propTypes.default.bool,
-
   /**
    * A flag that activates the infinite carousel behavior
    */
   infiniteCarousel: _propTypes.default.bool,
-
   /**
    * A flag that activates a counter on the top right corner of the selected image
    */
   counter: _propTypes.default.bool,
-
   /**
    * Set Image Carousel to fullscreen mode
    */
   fullscreen: _propTypes.default.bool,
-
   /**
    * Set selected image to a particular image in documents
    */
   currentStep: _propTypes.default.number,
-
   /**
    * Function that changes the selected image
    */
   setCurrentStep: _propTypes.default.func,
-
   /**
    * Image Carousel set to xs mode
    */
   xs: _propTypes.default.bool,
-
   /**
    * Arrows always displayed in low cardinality or xs mode
    */
   visibleArrows: _propTypes.default.bool,
-
   /**
    * Selected image fit variant
    */
   variant: _propTypes.default.string
 } : void 0;
-
 var _default = (0, _styles.withStyles)(_styles2.default, {
   name: "HvImageCarousel"
 })(HvImageCarousel);
-
 exports.default = _default;
 //# sourceMappingURL=ImageCarousel.js.map