@hitachivantara/uikit-react-lab 4.0.1-next.1 → 4.0.1-next.4

package/dist/legacy/ImageCarousel/ImageCarousel.js

@@ -0,0 +1,624 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+
+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 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) { _defineProperty(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; }
+
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.array.slice.js";
+import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.object.keys.js";
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.array.filter.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.object.get-own-property-descriptor.js";
+import "core-js/modules/web.dom-collections.for-each.js";
+import "core-js/modules/es.object.get-own-property-descriptors.js";
+import React, { useState, useRef, useEffect, useCallback } from "react";
+import PropTypes from "prop-types";
+import clsx from "clsx";
+import { setId, useUniqueId, HvButton, HvContainer, HvTypography, HvGrid, HvStack, HvPanel, useScrollTo } from "@hitachivantara/uikit-react-core";
+import { Button, Fade } from "@mui/material";
+import { withStyles, makeStyles } from "@mui/styles";
+import { Backwards, Forwards, Close, Fullscreen } from "@hitachivantara/uikit-react-icons";
+import styles from "./styles";
+/**
+ * ImageCarousel description/documentation paragraph
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+
+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 = _objectWithoutProperties(props, _excluded);
+
+  var elementId = useUniqueId(id, "hvcarousel");
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      fullscreen = _useState2[0],
+      setFullscreen = _useState2[1];
+
+  var options = documents.map(function (element) {
+    return {
+      src: element.src,
+      value: setId(elementId, element.value)
+    };
+  });
+
+  var _useState3 = useState(0),
+      _useState4 = _slicedToArray(_useState3, 2),
+      sliceStart = _useState4[0],
+      setSliceStart = _useState4[1];
+
+  var _useState5 = useState(currentStep),
+      _useState6 = _slicedToArray(_useState5, 2),
+      selImage = _useState6[0],
+      setImage = _useState6[1];
+
+  var _useState7 = useState(0),
+      _useState8 = _slicedToArray(_useState7, 2),
+      offset = _useState8[0],
+      setOffset = _useState8[1];
+
+  var _useState9 = useState(false),
+      _useState10 = _slicedToArray(_useState9, 2),
+      imageHover = _useState10[0],
+      setImageHover = _useState10[1];
+
+  var direction = "next";
+  var useStyles = makeStyles(function (theme) {
+    return {
+      button: {
+        backgroundColor: theme.hv.palette.atmosphere.atmo3
+      },
+      imageBox: {
+        minWidth: "100%",
+        display: "flex",
+        justifyContent: "center"
+      },
+      allImages: {
+        width: "max-content",
+        display: "flex"
+      }
+    };
+  });
+  var style = useStyles();
+
+  var _useScrollTo = useScrollTo(0, setId(elementId, "panel"), false, 100, documents, onChange, "row"),
+      _useScrollTo2 = _slicedToArray(_useScrollTo, 2),
+      selectedIndex = _useScrollTo2[0],
+      setScrollTo = _useScrollTo2[1];
+
+  var _useScrollTo3 = useScrollTo(0, setId(elementId, "bigPanel"), false, 0, options, onChange, "row"),
+      _useScrollTo4 = _slicedToArray(_useScrollTo3, 2),
+      selectedBigIndex = _useScrollTo4[0],
+      setBigScrollTo = _useScrollTo4[1];
+
+  var refBackwards = useRef(null);
+  var refForwards = useRef(null);
+  var typeCircle = "circle";
+  var handleSelection = useCallback(function (event, value, index) {
+    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 = 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 = useCallback(function (event, value, index) {
+    var image = document.getElementById(value);
+    var panel = document.getElementById(setId(elementId, "panel"));
+    var container = document.getElementById(setId(elementId, "container"));
+    var containerWidth = container.offsetWidth;
+    var offsetPanel = panel.offsetLeft;
+    var offsetImage = image.offsetLeft;
+    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);
+    }
+  }, [elementId, handleSelection, offset]);
+  useEffect(function () {
+    setCurrentStep === null || setCurrentStep === void 0 ? void 0 : setCurrentStep(selImage);
+  }, [selImage, setCurrentStep]);
+  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__*/_jsxs(HvContainer, _objectSpread(_objectSpread({
+    id: setId(elementId, "container"),
+    className: clsx(className, classes.root, xs ? "xs" : "nxs", fullscreen && classes.fullscreenStyle)
+  }, others), {}, {
+    children: [!xs && /*#__PURE__*/_jsxs("div", {
+      className: classes.title,
+      children: [/*#__PURE__*/_jsx("div", {
+        children: title
+      }), fullscreenProp && /*#__PURE__*/_jsx("div", {
+        children: fullscreen ? /*#__PURE__*/_jsx(HvButton, {
+          className: classes.closeButton,
+          icon: true,
+          "aria-label": "Close",
+          onClick: function onClick() {
+            return setFullscreen(!fullscreen);
+          },
+          children: _Close || (_Close = /*#__PURE__*/_jsx(Close, {}))
+        }) : /*#__PURE__*/_jsx(HvButton, {
+          icon: true,
+          "aria-label": "Fullscreen",
+          onClick: function onClick() {
+            return setFullscreen(true);
+          },
+          children: _Fullscreen || (_Fullscreen = /*#__PURE__*/_jsx(Fullscreen, {}))
+        })
+      })]
+    }), /*#__PURE__*/_jsxs(HvContainer, {
+      className: clsx(classes.imageContainer, fullscreen ? "fullscreen" : "notFullscreen", !xs && "nxs"),
+      onFocus: function onFocus() {
+        return setImageHover(true);
+      },
+      onMouseOver: function onMouseOver() {
+        return setImageHover(true);
+      },
+      onBlur: function onBlur() {
+        return setImageHover(false);
+      },
+      onMouseOut: function onMouseOut() {
+        return setImageHover(false);
+      },
+      children: [/*#__PURE__*/_jsx(HvPanel, {
+        className: clsx(classes.stack, xs ? "xs" : "nxs"),
+        id: setId(elementId, "bigPanel"),
+        children: options.map(function (element, index) {
+          return /*#__PURE__*/_jsx("div", {
+            className: style.imageBox,
+            id: element.value,
+            children: /*#__PURE__*/_jsx(Fade, {
+              in: selImage === index || xs,
+              timeout: {
+                appear: 500,
+                enter: 1200,
+                exit: 200
+              },
+              children: /*#__PURE__*/_jsx("img", {
+                className: clsx(classes.selectedImage, xs ? "xs" : "nxs", fullscreen ? "fullscreen" : "notFullscreen", variant),
+                src: element.src,
+                alt: element.value
+              }, "image ".concat(element.value))
+            })
+          }, "div ".concat(element.value));
+        })
+      }), (xs || lowCardinality) && /*#__PURE__*/_jsxs("div", {
+        className: clsx(classes.lowButtons, !xs && "nxs"),
+        children: [/*#__PURE__*/_jsx("div", {
+          children: /*#__PURE__*/_jsx(Fade, {
+            in: imageHover || visibleArrows,
+            children: /*#__PURE__*/_jsx(HvButton, {
+              ref: refBackwards,
+              className: classes.button,
+              icon: true,
+              "aria-label": "Backwards",
+              onClick: function onClick(event) {
+                return previousImage(event);
+              },
+              children: _Backwards || (_Backwards = /*#__PURE__*/_jsx(Backwards, {}))
+            })
+          })
+        }), /*#__PURE__*/_jsx("div", {
+          children: /*#__PURE__*/_jsx(Fade, {
+            in: imageHover || visibleArrows,
+            children: /*#__PURE__*/_jsx(HvButton, {
+              ref: refForwards,
+              className: classes.button,
+              icon: true,
+              "aria-label": "Forwards",
+              onClick: function onClick(event) {
+                return nextImage(event);
+              },
+              children: _Forwards || (_Forwards = /*#__PURE__*/_jsx(Forwards, {}))
+            })
+          })
+        })]
+      }), xs && /*#__PURE__*/_jsx("div", {
+        className: classes.xsCircles,
+        children: documents.map(function (element, index) {
+          return /*#__PURE__*/_jsx("span", {
+            className: circleType(index),
+            title: typeCircle
+          }, "Circle ".concat(element.value));
+        }).slice(sliceStart, sliceStart + 5)
+      }), counter && /*#__PURE__*/_jsx("div", {
+        className: clsx(classes.divCounter, !xs && "nxs"),
+        children: /*#__PURE__*/_jsx("span", {
+          className: classes.counter,
+          children: /*#__PURE__*/_jsx(HvTypography, {
+            variant: "normalText",
+            style: {
+              color: "white"
+            },
+            children: "".concat(selImage + 1, "/").concat(documents.length)
+          })
+        })
+      })]
+    }), !xs && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [lowCardinality ? /*#__PURE__*/_jsx("div", {
+        className: classes.circles,
+        children: documents.map(function (element, index) {
+          return /*#__PURE__*/_jsx("span", {
+            className: circleType(index),
+            title: "".concat(typeCircle, " ").concat(index)
+          }, "Circle ".concat(element.value));
+        })
+      }) : /*#__PURE__*/_jsxs(HvGrid, {
+        className: clsx(classes.normalButtons),
+        container: true,
+        justifyContent: "space-between",
+        alignItems: "center",
+        children: [/*#__PURE__*/_jsx(HvGrid, {
+          item: true,
+          children: /*#__PURE__*/_jsx(HvButton, {
+            className: infiniteCarousel || selImage !== 0 ? "" : classes.hidden,
+            ref: refBackwards,
+            icon: true,
+            "aria-label": "Backwards",
+            onClick: function onClick(event) {
+              return previousImage(event);
+            },
+            children: _Backwards2 || (_Backwards2 = /*#__PURE__*/_jsx(Backwards, {}))
+          })
+        }), /*#__PURE__*/_jsxs(HvGrid, {
+          item: true,
+          children: [/*#__PURE__*/_jsx(HvTypography, {
+            variant: "highlightText",
+            component: "a",
+            children: selImage + 1
+          }), /*#__PURE__*/_jsx(HvTypography, {
+            variant: "normalText",
+            component: "a",
+            children: " /  ".concat(documents.length)
+          })]
+        }), /*#__PURE__*/_jsx(HvGrid, {
+          item: true,
+          children: /*#__PURE__*/_jsx(HvButton, {
+            className: infiniteCarousel || selImage !== documents.length - 1 ? "" : classes.hidden,
+            ref: refForwards,
+            icon: true,
+            "aria-label": "Forwards",
+            onClick: function onClick(event) {
+              return nextImage(event);
+            },
+            children: _Forwards2 || (_Forwards2 = /*#__PURE__*/_jsx(Forwards, {}))
+          })
+        })]
+      }), thumbnails && /*#__PURE__*/_jsx(HvPanel, {
+        className: classes.panel,
+        id: setId(elementId, "panel"),
+        children: /*#__PURE__*/_jsx(HvStack, {
+          direction: "row",
+          spacing: "xs",
+          withNavigation: true,
+          children: documents.map(function (element, i) {
+            return /*#__PURE__*/_jsx(Button, {
+              id: element.value,
+              className: classes.thumbnailButton,
+              onClick: function onClick() {
+                return setImage(i);
+              },
+              children: /*#__PURE__*/_jsx("img", {
+                className: styleThumbnail(i),
+                src: element.src,
+                alt: element.value
+              }, "Thumbnail ".concat(element.value))
+            }, "Button ".concat(element.value));
+          })
+        }, "Thumbnails")
+      })]
+    })]
+  }));
+};
+
+process.env.NODE_ENV !== "production" ? HvImageCarousel.propTypes = {
+  /**
+   * Class names to be applied.
+   */
+  className: PropTypes.string,
+
+  /**
+   * A Jss Object used to override or extend the styles applied.
+   */
+  classes: PropTypes.shape({
+    /**
+     * Styles applied to the component root class.
+     */
+    root: PropTypes.string,
+
+    /**
+     * Styles applied to the component SelectedImage.
+     */
+    selectedImage: PropTypes.string,
+
+    /**
+     * Styles applied to xs mode
+     */
+    xsMode: PropTypes.string,
+
+    /**
+     * Styles applied to image in xsMode
+     */
+    xsImage: PropTypes.string,
+
+    /**
+     * Styles applied to panel with low cardinality circles
+     */
+    circles: PropTypes.string,
+
+    /**
+     * Styles applied to xs mode circles
+     */
+    xsCircles: PropTypes.string,
+
+    /**
+     * Styles applied to unavailable button
+     */
+    hidden: PropTypes.string,
+
+    /**
+     * Styles applied to the carousel title
+     */
+    title: PropTypes.string,
+
+    /**
+     * Styles applied to the counter
+     */
+    counter: PropTypes.string,
+
+    /**
+     * Styles applied to the div with the counter
+     */
+    divCounter: PropTypes.string,
+
+    /**
+     * Styles applied to the thumbnails
+     */
+    img: PropTypes.string,
+
+    /**
+     * Styles applied to the selected thumbnail
+     */
+    thumbnailSelected: PropTypes.string,
+
+    /**
+     * Styles applied to the thumbnail button
+     */
+    thumbnailButton: PropTypes.string,
+
+    /**
+     * Styles applied to the low cardinality circles
+     */
+    miniCircle: PropTypes.string,
+
+    /**
+     * Styles applied to the circle of the selected image
+     */
+    selectedCircle: PropTypes.string,
+
+    /**
+     * Styles applied to the circle of the selected image in xsmode
+     */
+    xsSelectedCircle: PropTypes.string,
+
+    /**
+     * Styles applied to the panel with low cardinality buttons
+     */
+    lowButtons: PropTypes.string,
+
+    /**
+     * Styles applied to the container of the selected image
+     */
+    imageContainer: PropTypes.string,
+
+    /**
+     * Styles applied to the panel with the thumbnails
+     */
+    stack: PropTypes.string,
+
+    /**
+     * Styles applied to the panel that contains the buttons and counter in default mode
+     */
+    normalButtons: PropTypes.string,
+
+    /**
+     * Styles applied to fullscreen mode.
+     */
+    fullscreenStyle: PropTypes.string,
+
+    /**
+     * Styles applied to close button in fullscreen mode.
+     */
+    closeButton: PropTypes.string,
+
+    /**
+     * Styles applied to change image buttons.
+     */
+    button: PropTypes.string,
+
+    /**
+     * Styles applied to thumbnails panel.
+     */
+    panel: PropTypes.string
+  }).isRequired,
+
+  /**
+   * Documents to be displayed.
+   */
+  documents: PropTypes.array.isRequired,
+
+  /**
+   * Title of the image carousel
+   */
+  title: PropTypes.node,
+
+  /**
+   * A function called each time the selected image changes.
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * Id to be applied to the root node.
+   */
+  id: PropTypes.string,
+
+  /**
+   * A flag that activates the thumbnails.
+   */
+  thumbnails: PropTypes.bool,
+
+  /**
+   * A flag that switches to low cardinality mode
+   */
+  lowCardinality: PropTypes.bool,
+
+  /**
+   * A flag that activates the infinite carousel behavior
+   */
+  infiniteCarousel: PropTypes.bool,
+
+  /**
+   * A flag that activates a counter on the top right corner of the selected image
+   */
+  counter: PropTypes.bool,
+
+  /**
+   * Set Image Carousel to fullscreen mode
+   */
+  fullscreen: PropTypes.bool,
+
+  /**
+   * Set selected image to a particular image in documents
+   */
+  currentStep: PropTypes.number,
+
+  /**
+   * Function that changes the selected image
+   */
+  setCurrentStep: PropTypes.func,
+
+  /**
+   * Image Carousel set to xs mode
+   */
+  xs: PropTypes.bool,
+
+  /**
+   * Arrows always displayed in low cardinality or xs mode
+   */
+  visibleArrows: PropTypes.bool,
+
+  /**
+   * Selected image fit variant
+   */
+  variant: PropTypes.string
+} : void 0;
+export default withStyles(styles, {
+  name: "HvImageCarousel"
+})(HvImageCarousel);
+//# sourceMappingURL=ImageCarousel.js.map