tabexseriescomponents 0.2.1228 → 0.2.1229

package/dist/index.cjs.js

@@ -27766,6 +27766,32 @@ var MarqueeHeader = function MarqueeHeader(props) {
       }
     }
   }, [templateproperties_context]);
+  var _useState7 = React.useState(0),
+    _useState8 = _slicedToArray__default["default"](_useState7, 2),
+    currentIndex = _useState8[0],
+    setCurrentIndex = _useState8[1];
+  var next = function next() {
+    setCurrentIndex(function (prev) {
+      return (prev + 1) % textarray.length;
+    });
+  };
+  var prev = function prev() {
+    setCurrentIndex(function (prev) {
+      return prev === 0 ? textarray.length - 1 : prev - 1;
+    });
+  };
+  React.useEffect(function () {
+    if (!(textarray !== null && textarray !== void 0 && textarray.length)) return;
+    var interval = setInterval(function () {
+      setCurrentIndex(function (prev) {
+        return (prev + 1) % textarray.length;
+      });
+    }, 4000); // change every 3s
+
+    return function () {
+      return clearInterval(interval);
+    };
+  }, [textarray]);
   var header_cssstyles = {
     textSlider: glamor.css({
       fontSize: templateproperties_context.textsliderfontsize + 'px',
@@ -27779,12 +27805,27 @@ var MarqueeHeader = function MarqueeHeader(props) {
       background: templateproperties_context.textsliderbgcolor,
       paddingTop: templateproperties_context.sliderpaddingvertical + 'px',
       paddingBottom: templateproperties_context.sliderpaddingvertical + 'px',
-      // paddingLeft: templateproperties_context.sliderpaddinghorizontal + 'px',
-      // paddingRight: templateproperties_context.sliderpaddinghorizontal + 'px',
-      paddingLeft: '200px',
-      paddingRight: '200px'
+      paddingLeft: templateproperties_context.sliderpaddinghorizontal + 'px',
+      paddingRight: templateproperties_context.sliderpaddinghorizontal + 'px'
     }
-  }, templateproperties_context.textslidertype == 'Slider' &&
+  }, templateproperties_context.textslidertype == 'Fading Text Carousel' && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "text-slider"
+  }, /*#__PURE__*/React__default["default"].createElement("button", {
+    onClick: prev,
+    className: "arrow left allcentered"
+  }, /*#__PURE__*/React__default["default"].createElement(BsChevronLeft.BsChevronLeft, {
+    size: 19
+  })), textarray.map(function (item, index) {
+    return /*#__PURE__*/React__default["default"].createElement("p", {
+      key: index,
+      className: "slide ".concat(index === currentIndex ? 'active' : '') + ' m-0 ' + header_cssstyles.textSlider
+    }, langdetect == 'en' ? item.textEnglish : item.textArabic);
+  }), /*#__PURE__*/React__default["default"].createElement("button", {
+    onClick: next,
+    className: "arrow right allcentered"
+  }, /*#__PURE__*/React__default["default"].createElement(BsChevronRight.BsChevronRight, {
+    size: 19
+  }))), templateproperties_context.textslidertype == 'Slider' &&
   /*#__PURE__*/
   // <marquee width="100%" direction="left" scrollamount="3" behavior="scroll" class="marquee">
   React__default["default"].createElement("div", {

package/dist/index.esm.js

@@ -27715,6 +27715,32 @@ var MarqueeHeader = function MarqueeHeader(props) {
       }
     }
   }, [templateproperties_context]);
+  var _useState7 = useState(0),
+    _useState8 = _slicedToArray(_useState7, 2),
+    currentIndex = _useState8[0],
+    setCurrentIndex = _useState8[1];
+  var next = function next() {
+    setCurrentIndex(function (prev) {
+      return (prev + 1) % textarray.length;
+    });
+  };
+  var prev = function prev() {
+    setCurrentIndex(function (prev) {
+      return prev === 0 ? textarray.length - 1 : prev - 1;
+    });
+  };
+  useEffect(function () {
+    if (!(textarray !== null && textarray !== void 0 && textarray.length)) return;
+    var interval = setInterval(function () {
+      setCurrentIndex(function (prev) {
+        return (prev + 1) % textarray.length;
+      });
+    }, 4000); // change every 3s
+
+    return function () {
+      return clearInterval(interval);
+    };
+  }, [textarray]);
   var header_cssstyles = {
     textSlider: css({
       fontSize: templateproperties_context.textsliderfontsize + 'px',
@@ -27728,12 +27754,27 @@ var MarqueeHeader = function MarqueeHeader(props) {
       background: templateproperties_context.textsliderbgcolor,
       paddingTop: templateproperties_context.sliderpaddingvertical + 'px',
       paddingBottom: templateproperties_context.sliderpaddingvertical + 'px',
-      // paddingLeft: templateproperties_context.sliderpaddinghorizontal + 'px',
-      // paddingRight: templateproperties_context.sliderpaddinghorizontal + 'px',
-      paddingLeft: '200px',
-      paddingRight: '200px'
+      paddingLeft: templateproperties_context.sliderpaddinghorizontal + 'px',
+      paddingRight: templateproperties_context.sliderpaddinghorizontal + 'px'
     }
-  }, templateproperties_context.textslidertype == 'Slider' &&
+  }, templateproperties_context.textslidertype == 'Fading Text Carousel' && /*#__PURE__*/React.createElement("div", {
+    className: "text-slider"
+  }, /*#__PURE__*/React.createElement("button", {
+    onClick: prev,
+    className: "arrow left allcentered"
+  }, /*#__PURE__*/React.createElement(BsChevronLeft, {
+    size: 19
+  })), textarray.map(function (item, index) {
+    return /*#__PURE__*/React.createElement("p", {
+      key: index,
+      className: "slide ".concat(index === currentIndex ? 'active' : '') + ' m-0 ' + header_cssstyles.textSlider
+    }, langdetect == 'en' ? item.textEnglish : item.textArabic);
+  }), /*#__PURE__*/React.createElement("button", {
+    onClick: next,
+    className: "arrow right allcentered"
+  }, /*#__PURE__*/React.createElement(BsChevronRight, {
+    size: 19
+  }))), templateproperties_context.textslidertype == 'Slider' &&
   /*#__PURE__*/
   // <marquee width="100%" direction="left" scrollamount="3" behavior="scroll" class="marquee">
   React.createElement("div", {

package/dist/index.umd.js

@@ -27572,6 +27572,32 @@
           }
         }
       }, [templateproperties_context]);
+      var _useState7 = React.useState(0),
+        _useState8 = _slicedToArray__default["default"](_useState7, 2),
+        currentIndex = _useState8[0],
+        setCurrentIndex = _useState8[1];
+      var next = function next() {
+        setCurrentIndex(function (prev) {
+          return (prev + 1) % textarray.length;
+        });
+      };
+      var prev = function prev() {
+        setCurrentIndex(function (prev) {
+          return prev === 0 ? textarray.length - 1 : prev - 1;
+        });
+      };
+      React.useEffect(function () {
+        if (!(textarray !== null && textarray !== void 0 && textarray.length)) return;
+        var interval = setInterval(function () {
+          setCurrentIndex(function (prev) {
+            return (prev + 1) % textarray.length;
+          });
+        }, 4000); // change every 3s
+
+        return function () {
+          return clearInterval(interval);
+        };
+      }, [textarray]);
       var header_cssstyles = {
         textSlider: glamor.css({
           fontSize: templateproperties_context.textsliderfontsize + 'px',
@@ -27585,12 +27611,27 @@
           background: templateproperties_context.textsliderbgcolor,
           paddingTop: templateproperties_context.sliderpaddingvertical + 'px',
           paddingBottom: templateproperties_context.sliderpaddingvertical + 'px',
-          // paddingLeft: templateproperties_context.sliderpaddinghorizontal + 'px',
-          // paddingRight: templateproperties_context.sliderpaddinghorizontal + 'px',
-          paddingLeft: '200px',
-          paddingRight: '200px'
+          paddingLeft: templateproperties_context.sliderpaddinghorizontal + 'px',
+          paddingRight: templateproperties_context.sliderpaddinghorizontal + 'px'
         }
-      }, templateproperties_context.textslidertype == 'Slider' &&
+      }, templateproperties_context.textslidertype == 'Fading Text Carousel' && /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "text-slider"
+      }, /*#__PURE__*/React__default["default"].createElement("button", {
+        onClick: prev,
+        className: "arrow left allcentered"
+      }, /*#__PURE__*/React__default["default"].createElement(BsChevronLeft.BsChevronLeft, {
+        size: 19
+      })), textarray.map(function (item, index) {
+        return /*#__PURE__*/React__default["default"].createElement("p", {
+          key: index,
+          className: "slide ".concat(index === currentIndex ? 'active' : '') + ' m-0 ' + header_cssstyles.textSlider
+        }, langdetect == 'en' ? item.textEnglish : item.textArabic);
+      }), /*#__PURE__*/React__default["default"].createElement("button", {
+        onClick: next,
+        className: "arrow right allcentered"
+      }, /*#__PURE__*/React__default["default"].createElement(BsChevronRight.BsChevronRight, {
+        size: 19
+      }))), templateproperties_context.textslidertype == 'Slider' &&
       /*#__PURE__*/
       // <marquee width="100%" direction="left" scrollamount="3" behavior="scroll" class="marquee">
       React__default["default"].createElement("div", {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "tabexseriescomponents",
-    "version": "0.2.1228",
+    "version": "0.2.1229",
     "type": "module",
     "description": "your description",
     "main": "dist/index.cjs.js",