@daouypkgs/react-slick 0.0.256

package/dist/react-slick.esm.js

@@ -0,0 +1,623 @@
+import { useDaouyCanvasContext } from '@daouy/host';
+import registerComponent from '@daouy/host/registerComponent';
+import React, { forwardRef, useRef, useEffect, useState } from 'react';
+import Slider from 'react-slick';
+
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (-1 !== e.indexOf(n)) continue;
+    t[n] = r[n];
+  }
+  return t;
+}
+
+var _excluded = ["initialSlide", "arrowColor", "className", "sliderScopeClassName", "autoplay"];
+var sliderHelpers = {
+  states: {
+    currentSlide: {
+      onChangeArgsToValue: function onChangeArgsToValue(_, newIndex) {
+        return newIndex;
+      },
+      onMutate: function onMutate(stateValue, $ref) {
+        $ref.slickGoTo(stateValue);
+      }
+    }
+  }
+};
+function useDebounce(value, delay) {
+  var _useState = useState(value),
+    debouncedValue = _useState[0],
+    setDebouncedValue = _useState[1];
+  useEffect(function () {
+    var timer = setTimeout(function () {
+      return setDebouncedValue(value);
+    }, delay || 500);
+    return function () {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+  return debouncedValue;
+}
+var SliderWrapper = /*#__PURE__*/forwardRef(function SliderWrapper_(props, userRef) {
+  var initialSlide = props.initialSlide,
+    arrowColor = props.arrowColor,
+    className = props.className,
+    sliderScopeClassName = props.sliderScopeClassName,
+    autoplay = props.autoplay,
+    rest = _objectWithoutPropertiesLoose(props, _excluded);
+  // "data-daouy-canvas-envs" prop only exists in studio canvas
+  var inCanvas = !!useDaouyCanvasContext();
+  var slider = useRef(null);
+  var debouncedInitialSlide = useDebounce(initialSlide);
+  useEffect(function () {
+    if (debouncedInitialSlide !== undefined) {
+      var _slider$current;
+      (_slider$current = slider.current) == null || _slider$current.slickGoTo(debouncedInitialSlide);
+    }
+  }, [debouncedInitialSlide, inCanvas]);
+  React.useImperativeHandle(userRef, function () {
+    return {
+      slickGoTo: function slickGoTo(index, dontAnimate) {
+        if (slider.current) {
+          var slickGoTo = slider.current.slickGoTo;
+          slickGoTo(index, dontAnimate);
+        }
+      },
+      slickNext: function slickNext() {
+        if (slider.current) {
+          var slickNext = slider.current.slickNext;
+          slickNext();
+        }
+      },
+      slickPause: function slickPause() {
+        if (slider.current) {
+          var slickPause = slider.current.slickPause;
+          slickPause();
+        }
+      },
+      slickPlay: function slickPlay() {
+        if (slider.current) {
+          var slickPlay = slider.current.slickPlay;
+          slickPlay();
+        }
+      },
+      slickPrev: function slickPrev() {
+        if (slider.current) {
+          var slickPrev = slider.current.slickPrev;
+          slickPrev();
+        }
+      }
+    };
+  }, []);
+  var css = "\n    ." + sliderScopeClassName + " .slick-arrow:before {\n      color: " + (arrowColor != null ? arrowColor : "black") + ";\n    }\n    ." + sliderScopeClassName + " .slick-slide img:only-child,\n    ." + sliderScopeClassName + " .slick-slide .__wab_img-wrapper:only-child {\n      " + "\n      " + "\n      display: inline-block;\n      vertical-align: top;\n    }\n  ";
+  return React.createElement(React.Fragment, null, React.createElement(Slider, Object.assign({
+    className: className + " " + sliderScopeClassName,
+    ref: slider,
+    // We don't want to turn on autoplay while editing in canvas, because this
+    // leads to a state update for current slide, which ends up re-rendering
+    // the entire artboard.
+    autoplay: autoplay && !inCanvas ? autoplay : undefined
+  }, rest)), React.createElement("style", {
+    dangerouslySetInnerHTML: {
+      __html: css
+    }
+  }));
+});
+function registerSlider(loader) {
+  function getSlideInfo(_ref) {
+    var _ref$rows = _ref.rows,
+      rows = _ref$rows === void 0 ? 1 : _ref$rows,
+      _ref$slidesPerRow = _ref.slidesPerRow,
+      slidesPerRow = _ref$slidesPerRow === void 0 ? 1 : _ref$slidesPerRow,
+      _ref$initialSlide = _ref.initialSlide,
+      initialSlide = _ref$initialSlide === void 0 ? 0 : _ref$initialSlide,
+      children = _ref.children;
+    var slidesCnt = Array.isArray(children) ? children.length : 1;
+    var slidesPerDot = rows * slidesPerRow;
+    var dotCount = Math.ceil(slidesCnt / slidesPerDot);
+    var currentDotIndex = initialSlide >= dotCount ? dotCount - 1 : initialSlide;
+    return {
+      currentDotIndex: currentDotIndex,
+      slidesPerDot: slidesPerDot,
+      dotCount: dotCount,
+      totalSlides: slidesCnt
+    };
+  }
+  function CurrentSlideDropdown(_ref2) {
+    var componentProps = _ref2.componentProps,
+      studioOps = _ref2.studioOps;
+    var _getSlideInfo = getSlideInfo(componentProps),
+      dotCount = _getSlideInfo.dotCount,
+      currentDotIndex = _getSlideInfo.currentDotIndex;
+    var options = Array.from({
+      length: dotCount
+    }, function (_, i) {
+      return i;
+    }).map(function (i) {
+      return React.createElement("option", {
+        key: i,
+        value: i.toString()
+      }, "Slide ", i);
+    });
+    var handleChange = function handleChange(e) {
+      studioOps.updateStates({
+        currentSlide: Number(e.target.value)
+      });
+    };
+    return React.createElement("div", {
+      style: {
+        width: "100%",
+        display: "flex",
+        flexDirection: "row",
+        gap: "10px",
+        justifyContent: "space-between"
+      }
+    }, React.createElement("div", null, "Current slide:"), React.createElement("select", {
+      defaultValue: currentDotIndex.toString(),
+      style: {
+        width: "100%"
+      },
+      onChange: handleChange,
+      value: currentDotIndex.toString()
+    }, options));
+  }
+  function NavigateSlides(_ref3) {
+    var componentProps = _ref3.componentProps,
+      studioOps = _ref3.studioOps;
+    var _getSlideInfo2 = getSlideInfo(componentProps),
+      dotCount = _getSlideInfo2.dotCount,
+      currentDotIndex = _getSlideInfo2.currentDotIndex;
+    var btnStyles = {
+      width: "100%",
+      backgroundColor: "#f3f3f2",
+      borderRadius: 6
+    };
+    return React.createElement("div", {
+      style: {
+        width: "100%",
+        display: "flex",
+        flexDirection: "row",
+        gap: "10px",
+        justifyContent: "space-between"
+      }
+    }, React.createElement("button", {
+      style: btnStyles,
+      onClick: function onClick() {
+        var prevSlide = currentDotIndex === 0 ? dotCount - 1 : (currentDotIndex - 1) % dotCount;
+        studioOps.updateStates({
+          currentSlide: prevSlide
+        });
+      }
+    }, "Prev slide"), React.createElement("button", {
+      style: btnStyles,
+      onClick: function onClick() {
+        var nextSlide = (currentDotIndex + 1) % dotCount;
+        studioOps.updateStates({
+          currentSlide: nextSlide
+        });
+      }
+    }, "Next slide"));
+  }
+  function OutlineMessage() {
+    return React.createElement("div", null, "* To re-arrange slides, use the Outline panel");
+  }
+  var sliderMeta = {
+    name: "hostless-slider",
+    displayName: "Slider Carousel",
+    importName: "SliderWrapper",
+    importPath: "@daouypkgs/react-slick",
+    description: "[See tutorial video](https://www.youtube.com/watch?v=GMgXLbNHX8c)",
+    actions: [{
+      type: "custom-action",
+      control: CurrentSlideDropdown
+    }, {
+      type: "custom-action",
+      control: NavigateSlides
+    }, {
+      type: "button-action",
+      label: "Append new slide",
+      onClick: function onClick(_ref4) {
+        var componentProps = _ref4.componentProps,
+          studioOps = _ref4.studioOps;
+        var _getSlideInfo3 = getSlideInfo(componentProps),
+          dotCount = _getSlideInfo3.dotCount,
+          slidesPerDot = _getSlideInfo3.slidesPerDot,
+          totalSlides = _getSlideInfo3.totalSlides;
+        var currentSlide = totalSlides % slidesPerDot ? dotCount - 1 : dotCount;
+        studioOps.appendToSlot({
+          type: "img",
+          src: "",
+          styles: {
+            maxWidth: "100%"
+          }
+        }, "children");
+        studioOps.updateStates({
+          currentSlide: currentSlide
+        });
+      }
+    }, {
+      type: "button-action",
+      label: "Delete current slide",
+      hidden: function hidden(ps) {
+        var _ps$children;
+        return ((_ps$children = ps.children) == null || (_ps$children = _ps$children.type) == null ? void 0 : _ps$children.name) === "CanvasSlotPlaceholder";
+      },
+      onClick: function onClick(_ref5) {
+        var componentProps = _ref5.componentProps,
+          studioOps = _ref5.studioOps;
+        var _getSlideInfo4 = getSlideInfo(componentProps),
+          currentDotIndex = _getSlideInfo4.currentDotIndex,
+          dotCount = _getSlideInfo4.dotCount,
+          slidesPerDot = _getSlideInfo4.slidesPerDot,
+          totalSlides = _getSlideInfo4.totalSlides;
+        studioOps.removeFromSlotAt(currentDotIndex * slidesPerDot, "children");
+        var newPos = currentDotIndex;
+        if (dotCount === 1) {
+          // not the only dot
+          newPos = 0;
+        } else if (currentDotIndex !== dotCount - 1) {
+          // not the last dot
+          if (slidesPerDot === 1) {
+            newPos = currentDotIndex - 1;
+          } else {
+            newPos = currentDotIndex;
+          }
+        } else {
+          // the last dot
+          newPos = totalSlides % slidesPerDot === 1 ? currentDotIndex - 1 : currentDotIndex;
+        }
+        studioOps.updateStates({
+          currentSlide: newPos
+        });
+      }
+    }, {
+      type: "custom-action",
+      control: OutlineMessage
+    }],
+    refActions: {
+      slickGoTo: {
+        displayName: "Jump to slide",
+        argTypes: [{
+          name: "index",
+          displayName: "Slide index",
+          type: "number"
+        }, {
+          name: "dontAnimate",
+          displayName: "Animate?",
+          type: "boolean"
+        }]
+      },
+      slickNext: {
+        displayName: "Go to Next slide",
+        argTypes: []
+      },
+      slickPause: {
+        displayName: "Pause",
+        argTypes: []
+      },
+      slickPlay: {
+        displayName: "Play",
+        argTypes: []
+      },
+      slickPrev: {
+        displayName: "Go to Previous slide",
+        argTypes: []
+      }
+    },
+    props: {
+      children: {
+        type: "slot",
+        defaultValue: [0, 1, 2].map(function (i) {
+          return {
+            type: "vbox",
+            children: {
+              type: "img",
+              src: "https://static1.quocuy.cloud/components/react-slick/slide" + (i + 1) + ".png",
+              styles: {
+                maxWidth: "100%"
+              }
+            }
+          };
+        })
+      },
+      accessibility: {
+        advanced: true,
+        displayName: "Accessibility",
+        type: "boolean",
+        description: "Enables tabbing and arrow key navigation",
+        defaultValueHint: true
+      },
+      adaptiveHeight: {
+        advanced: true,
+        displayName: "Adaptive Height",
+        type: "boolean",
+        description: "Adjust the slide's height automatically",
+        defaultValueHint: false
+      },
+      arrows: {
+        displayName: "Arrows",
+        type: "boolean",
+        description: "Show next/prev arrows",
+        defaultValueHint: true
+      },
+      sliderScopeClassName: {
+        type: "styleScopeClass",
+        scopeName: "slider"
+      },
+      arrowColor: {
+        type: "color",
+        description: "Color of next/prev arrow buttons",
+        defaultValueHint: "#000000",
+        hidden: function hidden(ps) {
+          return ps.arrows === undefined ? false : !ps.arrows;
+        }
+      },
+      autoplay: {
+        displayName: "Auto Play",
+        type: "boolean",
+        description: "Automatically start scrolling; does not take effect while in the editor, but you can see it in live preview.",
+        defaultValueHint: false
+      },
+      autoplaySpeed: {
+        displayName: "Auto Play Speed",
+        type: "number",
+        description: "Delay between each auto scroll, in milliseconds",
+        defaultValueHint: 3000,
+        hidden: function hidden(props) {
+          return !props.autoplay;
+        }
+      },
+      centerMode: {
+        displayName: "Center Mode",
+        type: "boolean",
+        description: "Enables centered view with partial prev/next slides. Use with odd numbered slidesToShow counts",
+        defaultValueHint: false
+      },
+      centerPadding: {
+        displayName: "Center Padding",
+        type: "string",
+        description: "Side padding when in center mode (px or %)",
+        defaultValueHint: "50px",
+        hidden: function hidden(props) {
+          return !props.centerMode;
+        }
+      },
+      dots: {
+        displayName: "Dots",
+        type: "boolean",
+        description: "Show dots for each slide",
+        defaultValueHint: false
+      },
+      draggable: {
+        advanced: true,
+        displayName: "Draggable",
+        type: "boolean",
+        description: "Enables mouse dragging on desktop",
+        defaultValueHint: true
+      },
+      cssEase: {
+        advanced: true,
+        displayName: "Easing",
+        type: "string",
+        description: "Easing method for transition",
+        defaultValueHint: "linear"
+      },
+      /** Deprecated, this was apparently never working:
+       * https://github.com/akiran/react-slick/issues/363 */
+      easing: {
+        hidden: function hidden() {
+          return true;
+        },
+        advanced: true,
+        displayName: "Easing",
+        type: "string",
+        description: "Easing method for transition",
+        defaultValueHint: "linear"
+      },
+      fade: {
+        advanced: true,
+        displayName: "Fade",
+        type: "boolean",
+        description: "Cross-fade between slides",
+        defaultValueHint: false
+      },
+      focusOnSelect: {
+        advanced: true,
+        displayName: "Focus On Select",
+        type: "boolean",
+        description: "Go to slide on click",
+        defaultValueHint: false
+      },
+      infinite: {
+        displayName: "Infinite",
+        type: "boolean",
+        description: "Infinitely wrap around contents",
+        defaultValueHint: true
+      },
+      initialSlide: {
+        displayName: "Initial Slide",
+        type: "number",
+        description: "Index of the first visible slide (first is 0), accounting for multiple slides per view if applicable.",
+        defaultValueHint: 0,
+        defaultValue: 0
+      },
+      lazyLoad: {
+        advanced: true,
+        displayName: "Lazy Load",
+        type: "choice",
+        options: ["ondemand", "progressive"],
+        description: "Load images or render components on demand or progressively"
+      },
+      pauseOnDotsHover: {
+        displayName: "Pause On Dots Hover",
+        type: "boolean",
+        description: "Prevents autoplay while hovering on dots",
+        defaultValueHint: false
+      },
+      pauseOnFocus: {
+        displayName: "Pause On Focus",
+        type: "boolean",
+        description: "Prevents autoplay while focused on slides",
+        defaultValueHint: false
+      },
+      pauseOnHover: {
+        displayName: "Pause On Hover",
+        type: "boolean",
+        description: "Prevents autoplay while hovering on track",
+        defaultValueHint: true
+      },
+      rows: {
+        displayName: "Rows",
+        type: "number",
+        description: "Number of rows per slide (enables grid mode)",
+        defaultValueHint: 1
+      },
+      rtl: {
+        advanced: true,
+        displayName: "Reverse",
+        type: "boolean",
+        description: "Reverses the slide order",
+        defaultValueHint: false
+      },
+      // Looks like the `slide` prop is not being used to set the container tag:
+      // https://github.com/akiran/react-slick/issues/1318
+      // https://github.com/akiran/react-slick/pull/1885
+      // https://stackoverflow.com/questions/51492535/wrap-react-slick-li-slides-inside-ul
+      //
+      // slide: {
+      //   displayName: "Slide Tag",
+      //   type: "string",
+      //   description: 'Slide container element type',
+      //   defaultValueHint: "div",
+      // },
+      slidesPerRow: {
+        displayName: "Slides Per Row",
+        type: "number",
+        description: "Number of slides to display in grid mode, this is useful with rows option",
+        defaultValueHint: 1
+      },
+      slidesToScroll: {
+        advanced: true,
+        displayName: "Slides To Scroll",
+        type: "number",
+        description: "Number of slides to scroll at once",
+        defaultValueHint: 1
+      },
+      slidesToShow: {
+        advanced: true,
+        displayName: "Slides To Show",
+        type: "number",
+        description: "Number of slides to show in one frame",
+        defaultValueHint: 1
+      },
+      speed: {
+        advanced: true,
+        displayName: "Speed",
+        type: "number",
+        description: "Transition speed in milliseconds",
+        defaultValueHint: 500
+      },
+      swipe: {
+        advanced: true,
+        displayName: "Swipe",
+        type: "boolean",
+        description: "Enable swiping to change slides",
+        defaultValueHint: true
+      },
+      swipeToSlide: {
+        advanced: true,
+        displayName: "Swipe To Slide",
+        type: "boolean",
+        description: "Enable drag/swipe irrespective of 'slidesToScroll'",
+        defaultValueHint: false
+      },
+      touchMove: {
+        advanced: true,
+        displayName: "Touch Move",
+        type: "boolean",
+        description: "Enable slide moving on touch",
+        defaultValueHint: true
+      },
+      touchThreshold: {
+        advanced: true,
+        displayName: "Touch Threshold",
+        type: "number",
+        description: "Swipe distance threshold in pixels",
+        defaultValueHint: 5
+      },
+      useCSS: {
+        advanced: true,
+        displayName: "Use CSS",
+        type: "boolean",
+        description: "Enable/Disable CSS Transitions",
+        defaultValueHint: true
+      },
+      useTransform: {
+        advanced: true,
+        displayName: "Use Transform",
+        type: "boolean",
+        description: "Enable/Disable CSS Transforms",
+        defaultValueHint: true
+      },
+      variableWidth: {
+        advanced: true,
+        displayName: "Variable Width",
+        type: "boolean",
+        description: "Variable width slides",
+        defaultValueHint: false
+      },
+      vertical: {
+        advanced: true,
+        displayName: "Vertical",
+        type: "boolean",
+        description: "Vertical slide mode",
+        defaultValueHint: false
+      },
+      beforeChange: {
+        type: "eventHandler",
+        advanced: true,
+        argTypes: [{
+          name: "currentSlide",
+          type: "number"
+        }]
+      }
+    },
+    states: {
+      currentSlide: _extends({
+        type: "writable",
+        valueProp: "initialSlide",
+        onChangeProp: "beforeChange",
+        variableType: "number"
+      }, sliderHelpers.states.currentSlide)
+    },
+    componentHelpers: {
+      helpers: sliderHelpers,
+      importName: "sliderHelpers",
+      importPath: "@daouypkgs/react-slick"
+    },
+    defaultStyles: {
+      width: "stretch",
+      maxWidth: "100%",
+      flexDirection: "column"
+    }
+  };
+  if (loader) {
+    loader.registerComponent(SliderWrapper, sliderMeta);
+  } else {
+    registerComponent(SliderWrapper, sliderMeta);
+  }
+}
+
+export { SliderWrapper, registerSlider, sliderHelpers };
+//# sourceMappingURL=react-slick.esm.js.map