hplx-react-elements-dev 1.1.3 → 1.1.4

package/dist/esm/carousel/imageCarousel.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { CarouselProps } from "../types";
+import "../carousel/imageCarousel.css";
+declare const ImageCarousel: ({ imageList, isNextPrev, caroselLeftIcon, caroselRightIcon, timeInterval, autoPlay, carouselIndicator }: CarouselProps) => JSX.Element;
+export default ImageCarousel;

package/dist/esm/index.css

@@ -1540,3 +1540,81 @@
   color: #849095;
   padding: 0.833em;
 }
+
+.slider {
+  position: relative;
+}
+
+.image {
+  width: 100%;
+}
+
+.right-arrow {
+  position: absolute;
+  top: 50%;
+  right: 32px;
+  font-size: 2rem;
+  color: #fff;
+  z-index: 10;
+  cursor: pointer;
+  -webkit-user-select: none;
+          user-select: none;
+  background: rgba(0, 0, 0, 0.2);
+  opacity: 0.2;
+  border-radius: 50%;
+  width: 50px;
+  height: 50px;
+  text-align: center;
+}
+
+.left-arrow {
+  position: absolute;
+  top: 50%;
+  left: 32px;
+  font-size: 2rem;
+  color: #fff;
+  z-index: 10;
+  cursor: pointer;
+  -webkit-user-select: none;
+          user-select: none;
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 50%;
+  width: 50px;
+  height: 50px;
+  text-align: center;
+}
+.left-arrow:hover,
+.right-arrow:hover {
+  background: rgba(0, 0, 0, 0.8);
+}
+
+.slide {
+  opacity: 0;
+  transition-duration: 2s;
+  transition-timing-function: ease;
+}
+
+.slide.active {
+  opacity: 1;
+  transition-duration: 1s;
+  transform: scale(1);
+}
+.carousel-indicators li {
+  width: 10px;
+  height: 10px;
+  border-radius: 100%;
+  float: left;
+  background: rgba(255, 255, 255, 0.5);
+  border: 1px solid rgba(255, 255, 255, 0.5);
+  margin: 0px 5px;
+  cursor: pointer;
+}
+.carousel-indicators li.active {
+  background: #fff;
+  border: 1px solid #fff;
+}
+.carousel-indicators {
+  position: absolute;
+  left: 50%;
+  bottom: 5%;
+}

package/dist/esm/index.d.ts

@@ -30,3 +30,4 @@ export { default as InputTag } from "./inputTag/InputTag";
 export { default as InputTagDropdownItem } from "./inputTag/InputTagDropdownItem";
 export { default as CalendarView } from "./calendarView/CalendarView";
 export { default as PopUpModal } from "./popUpModal/PopUpModal";
+export { default as ImageCarousel } from "./carousel/imageCarousel";

package/dist/esm/index.js

@@ -20511,4 +20511,98 @@ var PopUpModal = function PopUpModal(_a) {
   }));
 };
 
-export { AddSuggestion, Avatar, Badge, BadgeGroup, Button, ButtonGroups, CalendarView, Card, Checkbox, CheckboxGroup, CheckboxGroupItem, CollapsibleCard, DatePicker, DoubleInput, DropdownField, DropdownItems as DropdownItem, InputField, InputFieldSplit, InputTag, InputTagDropdownItem, MessageToast, NestedDropdown, OtpField, PopUpModal, ProgressBar, ProgressCircle, RadioBtn, Slider, TextAreaField, ToggleSwitch, Tooltip, Typography };
+var ImageCarousel = function ImageCarousel(_a) {
+  var imageList = _a.imageList,
+      _b = _a.isNextPrev,
+      isNextPrev = _b === void 0 ? true : _b,
+      _c = _a.caroselLeftIcon,
+      caroselLeftIcon = _c === void 0 ? 'hx_left' : _c,
+      _d = _a.caroselRightIcon,
+      caroselRightIcon = _d === void 0 ? 'hx_right' : _d,
+      _e = _a.timeInterval,
+      timeInterval = _e === void 0 ? 5000 : _e,
+      _f = _a.autoPlay,
+      autoPlay = _f === void 0 ? true : _f,
+      _g = _a.carouselIndicator,
+      carouselIndicator = _g === void 0 ? true : _g;
+
+  var _h = useState(0),
+      current = _h[0],
+      setCurrent = _h[1];
+
+  var length = imageList.length;
+
+  var nextSlide = function nextSlide() {
+    setCurrent(current === length - 1 ? 0 : current + 1);
+  };
+
+  var prevSlide = function prevSlide() {
+    setCurrent(current === 0 ? length - 1 : current - 1);
+  };
+
+  var goToSlide = function goToSlide(slideNumber) {
+    setCurrent(slideNumber);
+  };
+
+  if (!Array.isArray(imageList) || imageList.length <= 0) {
+    return jsxRuntime.exports.jsx("p", {
+      children: "Image list data is not available !"
+    });
+  } //Single image exist then display image and disable all the functions of carousel
+
+
+  if (imageList.length === 1) {
+    carouselIndicator = false;
+    isNextPrev = false;
+    autoPlay = false;
+  }
+
+  if (timeInterval > 0 && autoPlay) {
+    setTimeout(function () {
+      nextSlide();
+    }, timeInterval);
+  }
+
+  var carouselIndicatorDoms = [];
+  return jsxRuntime.exports.jsxs("div", __assign({
+    className: "slider"
+  }, {
+    children: [Boolean(caroselLeftIcon) && isNextPrev && jsxRuntime.exports.jsx("div", __assign({
+      className: "left-arrow"
+    }, {
+      children: jsxRuntime.exports.jsx("span", {
+        className: caroselLeftIcon,
+        onClick: prevSlide
+      })
+    })), Boolean(caroselRightIcon) && isNextPrev && jsxRuntime.exports.jsx("div", __assign({
+      className: "right-arrow "
+    }, {
+      children: jsxRuntime.exports.jsx("span", {
+        className: caroselRightIcon,
+        onClick: nextSlide
+      })
+    })), imageList.map(function (d, index) {
+      carouselIndicatorDoms.push(jsxRuntime.exports.jsx("li", {
+        className: index === current ? 'active' : '',
+        onClick: function onClick() {
+          goToSlide(index);
+        }
+      }));
+      return jsxRuntime.exports.jsx("div", __assign({
+        className: index === current ? 'slide active ' : 'slide'
+      }, {
+        children: index === current && jsxRuntime.exports.jsx("img", {
+          src: d,
+          alt: d,
+          className: 'image'
+        })
+      }), index);
+    }), carouselIndicator && jsxRuntime.exports.jsx("ul", __assign({
+      className: "carousel-indicators"
+    }, {
+      children: carouselIndicatorDoms
+    }))]
+  }));
+};
+
+export { AddSuggestion, Avatar, Badge, BadgeGroup, Button, ButtonGroups, CalendarView, Card, Checkbox, CheckboxGroup, CheckboxGroupItem, CollapsibleCard, DatePicker, DoubleInput, DropdownField, DropdownItems as DropdownItem, ImageCarousel, InputField, InputFieldSplit, InputTag, InputTagDropdownItem, MessageToast, NestedDropdown, OtpField, PopUpModal, ProgressBar, ProgressCircle, RadioBtn, Slider, TextAreaField, ToggleSwitch, Tooltip, Typography };

package/dist/esm/types.d.ts

@@ -454,4 +454,13 @@ export interface InputTagProps {
     allowDuplicates?: boolean;
     getInputValue?: (value: string) => void;
 }
+export interface CarouselProps {
+    imageList: Array<string>;
+    isNextPrev?: boolean;
+    caroselLeftIcon?: string;
+    caroselRightIcon?: string;
+    timeInterval?: number;
+    carouselIndicator?: boolean;
+    autoPlay?: boolean;
+}
 export {};

package/package.json

@@ -9,7 +9,7 @@
     "frontend",
     "healthplix"
   ],
-  "version": "1.1.3",
+  "version": "1.1.4",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/esm/index.d.ts",