trepur_components 0.2.73 → 0.2.74

package/dist/components/CarouselV2/index.css

@@ -0,0 +1,3 @@
+.arrow {
+  -webkit-transform: translateY(-50%);
+}

package/dist/components/CarouselV2/index.js

@@ -0,0 +1,177 @@
+"use strict";
+
+require("core-js/modules/es.object.assign.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+var _react = _interopRequireWildcard(require("react"));
+
+require("keen-slider/keen-slider.min.css");
+
+var _react2 = require("keen-slider/react");
+
+require("./index.css");
+
+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 _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+//https://keen-slider.io/docs#usage-in-react
+const CarouselV2 = _ref => {
+  let {
+    id,
+    classes,
+    breakpoints,
+    defaultAnimation,
+    disabled,
+    drag,
+    dragSpeed,
+    initial,
+    loop,
+    mode,
+    range,
+    renderMode,
+    rtl,
+    rubberband,
+    selector,
+    slides,
+    vertical,
+    animationStarted,
+    animationStopped,
+    animationEnded,
+    created,
+    destroyed,
+    detailsChanged,
+    dragged,
+    dragStarted,
+    dragChecked,
+    dragEnded,
+    beforeOptionsChanged,
+    optionsChanged,
+    slideChanged,
+    updated,
+    slidesToShow,
+    spacing,
+    number,
+    origin,
+    showDots,
+    showArrows,
+    arrowColours,
+    disabledArrowColour,
+    dotColours,
+    activeDotColour
+  } = _ref;
+  const classList = "".concat(classes);
+  const dotClasses = "w-4 h-4 cursor-pointer focus:bg-".concat(activeDotColour, " rounded-full mx-1 ");
+  const [currentSlide, setCurrentSlide] = (0, _react.useState)(0);
+  const [loaded, setLoaded] = (0, _react.useState)(false);
+  const [sliderRef, instanceRef] = (0, _react2.useKeenSlider)({
+    initial: initial,
+    breakpoints: breakpoints,
+    defaultAnimation: defaultAnimation,
+    disabled: disabled,
+    drag: drag,
+    dragSpeed: dragSpeed,
+    initial: initial,
+    loop: loop,
+    mode: mode,
+    range: range,
+    renderMode: renderMode,
+    rtl: rtl,
+    rubberband: rubberband,
+    // selector: selector,
+    vertical: vertical,
+
+    slideChanged(slider) {
+      setCurrentSlide(slider.track.details.rel);
+    },
+
+    created() {
+      setLoaded(true);
+    },
+
+    animationStarted: animationStarted,
+    animationStopped: animationStopped,
+    animationEnded: animationEnded,
+    // created: created,
+    destroyed: destroyed,
+    detailsChanged: detailsChanged,
+    dragged: dragged,
+    dragStarted: dragStarted,
+    dragChecked: dragChecked,
+    dragEnded: dragEnded,
+    beforeOptionsChanged: beforeOptionsChanged,
+    optionsChanged: optionsChanged,
+    // slideChanged: slideChanged,
+    updated: updated,
+    slides: {
+      perView: slidesToShow,
+      spacing: spacing,
+      origin: origin,
+      number: number
+    }
+  });
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", _extends({}, id && {
+    id: id
+  }, {
+    className: "relative navigation-wrapper ".concat(classList)
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    ref: sliderRef,
+    className: "keen-slider"
+  }, slides && slides), showArrows && loaded && instanceRef.current && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Arrow, {
+    left: true,
+    onClick: e => {
+      var _instanceRef$current;
+
+      return e.stopPropagation() || ((_instanceRef$current = instanceRef.current) === null || _instanceRef$current === void 0 ? void 0 : _instanceRef$current.prev());
+    },
+    disabled: currentSlide === 0,
+    arrowColours: arrowColours,
+    disabledArrowColour: disabledArrowColour
+  }), /*#__PURE__*/_react.default.createElement(Arrow, {
+    onClick: e => {
+      var _instanceRef$current2;
+
+      return e.stopPropagation() || ((_instanceRef$current2 = instanceRef.current) === null || _instanceRef$current2 === void 0 ? void 0 : _instanceRef$current2.next());
+    },
+    disabled: currentSlide === instanceRef.current.track.details.slides.length - 1,
+    arrowColours: arrowColours,
+    disabledArrowColour: disabledArrowColour
+  }))), showDots && loaded && instanceRef.current && /*#__PURE__*/_react.default.createElement("div", {
+    className: "flex py-4 justify-center"
+  }, [...Array(instanceRef.current.track.details.slides.length).keys()].map(idx => {
+    return /*#__PURE__*/_react.default.createElement("button", {
+      key: idx,
+      onClick: () => {
+        var _instanceRef$current3;
+
+        (_instanceRef$current3 = instanceRef.current) === null || _instanceRef$current3 === void 0 ? void 0 : _instanceRef$current3.moveToIdx(idx);
+      },
+      className: dotClasses + (currentSlide === idx ? " active bg-".concat(activeDotColour) : " bg-".concat(dotColours))
+    });
+  })));
+};
+
+function Arrow(props) {
+  const disabeld = props.disabled ? " arrow--disabled fill-".concat(props.disabledArrowColour) : "";
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    onClick: props.onClick,
+    className: "arrow w-12 translate-y-2/4 h-12 absolute cursor-pointer fill-".concat(props.arrowColours, " top-1/2 ").concat(props.left ? "arrow--left left-1.5" : "arrow--right left-auto right-1.5", " ").concat(disabeld),
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24"
+  }, props.left && /*#__PURE__*/_react.default.createElement("path", {
+    d: "M16.67 0l2.83 2.829-9.339 9.175 9.339 9.167-2.83 2.829-12.17-11.996z"
+  }), !props.left && /*#__PURE__*/_react.default.createElement("path", {
+    d: "M5 3l3.057-3 11.943 12-11.943 12-3.057-3 9-9z"
+  }));
+}
+
+var _default = CarouselV2;
+exports.default = _default;

package/dist/index.js

@@ -57,6 +57,12 @@ Object.defineProperty(exports, "Carousel", {
     return _Carousel.default;
   }
 });
+Object.defineProperty(exports, "CarouselV2", {
+  enumerable: true,
+  get: function get() {
+    return _CarouselV.default;
+  }
+});
 Object.defineProperty(exports, "ChevronCard", {
   enumerable: true,
   get: function get() {
@@ -238,6 +244,8 @@ var _CardWithTopImage = _interopRequireDefault(require("./components/CardWithTop
 
 var _Carousel = _interopRequireDefault(require("./components/Carousel"));
 
+var _CarouselV = _interopRequireDefault(require("./components/CarouselV2"));
+
 var _ChevronCard = _interopRequireDefault(require("./components/ChevronCard"));
 
 var _Collapsible = _interopRequireDefault(require("./components/Collapsible"));

package/package.json

@@ -2,7 +2,7 @@
   "name": "trepur_components",
   "description": "component lib",
   "author": "trepur_ttenneb",
-  "version": "0.2.73",
+  "version": "0.2.74",
   "private": false,
   "keywords": [
     "react",
@@ -21,6 +21,7 @@
     "@testing-library/react": "^12.1.3",
     "@testing-library/user-event": "^13.5.0",
     "classnames": "^2.3.1",
+    "keen-slider": "^6.7.0",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-scripts": "5.0.0",