ublo-lib 1.5.10 → 1.6.0

package/es/common/components/scrolling-carousel/index.js

@@ -0,0 +1,2 @@
+import ScrollingCarousel from "./scrolling-carousel";
+export default ScrollingCarousel;

package/es/common/components/scrolling-carousel/scrolling-carousel.js

@@ -0,0 +1,93 @@
+import * as React from "react";
+import Button from "dt-design-system/es/button";
+import * as Icons from "dt-design-system/es/icons";
+import useWindowSizes from "ublo-lib/es/common/hooks/use-window-sizes";
+import css from "./scrolling-carousel.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const PREV = 0;
+const NEXT = 1;
+
+const ScrollingCarousel = ({
+  children
+}) => {
+  const ref = React.useRef(null);
+  const zoneRef = React.useRef(null);
+  const [overflow, setOverflow] = React.useState(false);
+  const [controls, setControls] = React.useState({
+    prevDisabled: false,
+    nextDisabled: false
+  });
+  const {
+    width
+  } = useWindowSizes();
+
+  const slideTo = direction => () => {
+    const inner = ref.current;
+    const firstSection = zoneRef.current?.querySelector("section:not([data-hidden], [hidden])");
+
+    if (firstSection) {
+      const scrollDistance = firstSection.clientWidth;
+
+      if (direction === PREV) {
+        inner.scrollLeft -= scrollDistance;
+      }
+
+      if (direction === NEXT) {
+        inner.scrollLeft += scrollDistance;
+      }
+    }
+  };
+
+  const refreshControls = React.useCallback(() => {
+    const inner = ref.current;
+    const zone = zoneRef.current;
+
+    if (zone) {
+      setOverflow(inner.clientWidth < zone.clientWidth);
+      setControls({
+        prevDisabled: inner.scrollLeft === 0,
+        nextDisabled: inner.scrollLeft === Math.round(inner.scrollWidth) - Math.round(inner.clientWidth)
+      });
+    }
+  }, []);
+  React.useEffect(() => {
+    refreshControls();
+  }, [refreshControls]);
+  React.useEffect(() => {
+    const inner = ref.current;
+    inner.scrollLeft = 0;
+  }, [width]);
+  return _jsxs("div", {
+    className: css.carousel,
+    children: [overflow && _jsxs("div", {
+      className: css.controls,
+      children: [_jsx(Button, {
+        className: css.control,
+        variant: "link",
+        onClick: slideTo(PREV),
+        disabled: controls.prevDisabled,
+        children: _jsx(Icons.ChevronLeft, {
+          className: css.controlIcon
+        })
+      }), _jsx(Button, {
+        className: css.control,
+        variant: "link",
+        onClick: slideTo(NEXT),
+        disabled: controls.nextDisabled,
+        children: _jsx(Icons.ChevronRight, {
+          className: css.controlIcon
+        })
+      })]
+    }), _jsx("div", {
+      className: css.inner,
+      ref: ref,
+      onScroll: refreshControls,
+      children: React.cloneElement(children, {
+        ref: zoneRef
+      })
+    })]
+  });
+};
+
+export default ScrollingCarousel;

package/es/common/components/scrolling-carousel/scrolling-carousel.module.css

@@ -0,0 +1,49 @@
+.carousel {
+  position: relative;
+}
+
+.controls {
+  position: absolute;
+  bottom: 100%;
+  right: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+button.control {
+  color: var(--ds-primary, var(--ds-blue-500, #004cc2));
+}
+
+svg.controlIcon {
+  --size: 24px;
+}
+
+.inner {
+  display: flex;
+  padding: 20px 0;
+  scroll-snap-type: x proximity;
+  overflow: auto;
+  scroll-behavior: smooth;
+}
+
+@media (min-width: 990px) {
+  .inner {
+    padding: 40px 0;
+    overflow: hidden;
+  }
+}
+
+.inner > :global(.cms) {
+  flex: 0 0 auto;
+}
+
+:global(.cms--editing) .inner {
+  padding: 40px 60px;
+  overflow: auto;
+  scroll-snap-type: none;
+}
+
+.inner > :global(.cms) > :global(section) {
+  scroll-snap-align: start;
+}

package/es/esf/components/loyal-customers/components/field.js

@@ -59,6 +59,9 @@ const renderField = (lang, label, classes, name, field, data, setData) => {
     required,
     className
   } = field;
+  const isOptionArrayValid = Array.isArray(options);
+  const firstKey = !isOptionArrayValid && Object.keys(options)[0];
+  const optionsToDisplay = isOptionArrayValid ? options : options[firstKey];
   const Tag = getTag(type);
   const fieldClasses = classnames(className, {
     [classes]: classes
@@ -82,7 +85,7 @@ const renderField = (lang, label, classes, name, field, data, setData) => {
   const formatedOptions = [{
     label: Messages.get(lang, "select"),
     value: ""
-  }].concat(options.map(option => {
+  }].concat(optionsToDisplay.map(option => {
     return {
       label: option.label?.[lang],
       value: option.value ?? option.label?.[lang]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ublo-lib",
-  "version": "1.5.10",
+  "version": "1.6.0",
   "peerDependencies": {
     "dt-design-system": "^2.1.0",
     "next": "^12.0.0",