ublo-lib 1.2.4 → 1.3.0

package/es/esf/components/period-picker/warning.js

@@ -0,0 +1,59 @@
+import * as React from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { useUbloContext } from "ublo/with-ublo";
+import Button from "dt-design-system/es/button";
+import * as Icons from "dt-design-system/es/icons";
+import * as Messages from "./messages";
+import * as Motions from "./services/motions";
+import css from "./warning.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+const Warning = ({
+  warn,
+  setWarn,
+  selectWeek,
+  chosenWeek
+}) => {
+  const {
+    lang
+  } = useUbloContext();
+
+  const cancel = () => {
+    setWarn(false);
+  };
+
+  const confirm = () => {
+    selectWeek(chosenWeek, true);
+  };
+
+  return _jsx(AnimatePresence, {
+    mode: "wait",
+    children: warn && _jsxs(motion.div, {
+      className: css.warn,
+      initial: "hidden",
+      animate: "visible",
+      exit: "hidden",
+      variants: Motions.fading,
+      children: [_jsxs("div", {
+        className: css.text,
+        children: [_jsx(Icons.AlertCircle, {
+          className: css.icon
+        }), Messages.get(lang, "warn")]
+      }), _jsxs("div", {
+        className: css.buttons,
+        children: [_jsx(Button, {
+          className: css.cancelButton,
+          onClick: cancel,
+          children: Messages.get(lang, "cancel")
+        }), _jsx(Button, {
+          className: css.button,
+          onClick: confirm,
+          children: Messages.get(lang, "ok")
+        })]
+      })]
+    })
+  });
+};
+
+export default Warning;

package/es/esf/components/period-picker/warning.module.css

@@ -0,0 +1,53 @@
+.warn {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  padding: 10px;
+  background-color: var(--ds-grey-000, #ffffff);
+  z-index: 1;
+}
+
+.text {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px;
+  color: var(--ds-grey-700, #171e30);
+  font-size: 17px;
+  font-weight: 700;
+  background-color: var(--ds-grey-100, #f5f5f5);
+  border-radius: var(--ds-radius-200, 10px);
+}
+
+.icon {
+  width: 22px;
+  height: 22px;
+  fill: currentColor;
+}
+
+.buttons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.cancelButton {
+  color: var(--ds-grey-700, #171e30);
+  background-color: var(--ds-grey-000, #ffffff);
+}
+
+.cancelButton:not(:disabled):hover {
+  background-color: var(--ds-grey-100, #f5f5f5);
+}
+
+.button:nth-child(2) {
+  background-color: var(--ds-secondary, var(--ds-blue-400, #4177f6));
+}

package/es/esf/components/period-picker/weeks.js

@@ -0,0 +1,120 @@
+import * as React from "react";
+import classnames from "classnames";
+import { LayoutGroup, motion } from "framer-motion";
+import { useUbloContext } from "ublo/with-ublo";
+import * as Icons from "dt-design-system/es/icons";
+import css from "./weeks.module.css";
+import * as Dates from "./services/dates";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+const Week = ({
+  week,
+  beginWeek,
+  endWeek,
+  selected,
+  select,
+  forceSeasonSwitch,
+  openExtendedPicker,
+  isPopup
+}) => {
+  const {
+    lang
+  } = useUbloContext();
+  const [checkVisible, setCheckVisible] = React.useState(false);
+  const [checkTimeout, setCheckTimeout] = React.useState();
+  const now = new Date();
+  const prevDate = Dates.weekToDate(week - 1, endWeek, forceSeasonSwitch);
+  const currDate = Dates.weekToDate(week, endWeek, forceSeasonSwitch);
+  const nextDate = Dates.weekToDate(week + 1, endWeek, forceSeasonSwitch);
+  const isSelected = selected === week;
+  const isPast = now.getTime() > nextDate.getTime();
+  const isFirst = week === beginWeek;
+  const isLast = week === endWeek;
+  const prevYear = prevDate.getFullYear();
+  const currYear = currDate.getFullYear();
+  const hasYearChanged = prevYear !== currYear;
+  const showYear = isFirst || hasYearChanged;
+  const prevMonth = prevDate.getMonth();
+  const currMonth = currDate.getMonth();
+  const hasMonthChanged = prevMonth !== currMonth;
+  const showMonth = isFirst || hasMonthChanged;
+  const locale = Dates.locales[lang] || Dates.locales.en;
+  const formatedMonth = currDate.toLocaleString(locale, {
+    month: "short"
+  });
+  const weekClasses = classnames(css.item, {
+    [css.itemSelected]: isSelected,
+    [css.itemPast]: isPast
+  });
+
+  const selectWeek = () => {
+    select(week);
+    openExtendedPicker();
+    clearTimeout(checkTimeout);
+    setCheckVisible(true);
+    setCheckTimeout(setTimeout(() => {
+      setCheckVisible(false);
+    }, 1200));
+  };
+
+  const layoutId = isPopup ? "current-popup" : "current";
+  return _jsxs("div", {
+    className: weekClasses,
+    children: [_jsxs("button", {
+      className: css.button,
+      onClick: selectWeek,
+      "aria-label": `${Dates.weekToLongDate(week)} - ${Dates.weekToLongDate(week + 1)}`,
+      disabled: isPast,
+      children: [isSelected && _jsx(motion.div, {
+        layoutId: layoutId,
+        className: css.buttonFiller
+      }), checkVisible && _jsx(Icons.CheckCircle, {
+        className: css.check
+      })]
+    }), _jsxs("div", {
+      className: css.date,
+      children: [_jsx("div", {
+        className: css.dateFrom,
+        children: Dates.formatShort(currDate)
+      }), isLast && _jsx("div", {
+        className: css.dateTo,
+        children: Dates.formatShort(nextDate)
+      })]
+    }), showMonth && _jsxs("span", {
+      className: css.month,
+      children: [formatedMonth, " ", showYear && _jsx("b", {
+        className: css.year,
+        children: currYear
+      })]
+    })]
+  });
+};
+
+const Weeks = React.forwardRef(({
+  weeks,
+  ...props
+}, ref) => {
+  React.useEffect(() => {
+    const bar = ref.current;
+    if (props.selected === undefined || !bar) return;
+    const selectedItem = bar.querySelector(`.${css.itemSelected}`);
+    if (!selectedItem) return;
+    const {
+      clientWidth,
+      offsetLeft
+    } = selectedItem;
+    bar.scrollLeft = offsetLeft - clientWidth * 1.5;
+  }, [props.selected, ref]);
+  return _jsx(LayoutGroup, {
+    children: _jsx("div", {
+      ref: ref,
+      className: css.weeks,
+      children: weeks.map(week => _jsx(Week, {
+        week: week,
+        ...props
+      }, week))
+    })
+  });
+});
+export default Weeks;

package/es/esf/components/period-picker/weeks.module.css

@@ -0,0 +1,194 @@
+.weeks {
+  --gap: 2px;
+  --item-height: 36px;
+  --item-width: 50px;
+
+  position: relative;
+  width: 100%;
+  display: inline-flex;
+  align-items: flex-start;
+  gap: 2px;
+  margin: 0 auto;
+  padding: 0 26px 10px 26px;
+  overflow: auto;
+  scroll-behavior: smooth;
+}
+
+@media (min-width: 1100px) {
+  .weeks {
+    --item-width: 40px;
+    --item-height: 20px;
+
+    padding: 0 26px;
+    overflow: visible;
+  }
+}
+
+.weeks::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: var(--item-height);
+  background-color: var(--ds-grey-100, #f5f5f5);
+  pointer-events: none;
+  touch-action: none;
+  z-index: 0;
+}
+
+.item {
+  --button-bg-color: var(--ds-grey-400, #d2d2d2);
+
+  position: relative;
+  flex: 0 0 var(--item-width);
+  min-width: var(--item-width);
+  display: flex;
+  flex-direction: column;
+}
+
+.itemPast {
+  --button-bg-color: var(--ds-grey-200, #efefef);
+
+  cursor: not-allowed;
+}
+
+.item:first-of-type {
+  margin-left: auto;
+}
+
+.item:last-of-type {
+  margin-right: auto;
+}
+
+.item:first-of-type::before,
+.item:last-of-type::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  width: calc(var(--item-width) * 2);
+  height: var(--item-height);
+  background-color: var(--button-bg-color);
+  z-index: 0;
+  transition: background-color 160ms
+    var(--ds-transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
+}
+
+.item:first-of-type::before {
+  right: calc(100% + var(--gap));
+  border-radius: var(--item-height) 0 0 var(--item-height);
+}
+
+.item:last-of-type::after {
+  left: calc(100% + var(--gap));
+  border-radius: 0 var(--item-height) var(--item-height) 0;
+}
+
+.itemSelected {
+  z-index: 1;
+}
+
+.button {
+  position: relative;
+  width: 100%;
+  height: var(--item-height);
+  background-color: var(--button-bg-color);
+  border-radius: inherit;
+  cursor: pointer;
+  user-select: none;
+  transition: background-color 160ms
+    var(--ds-transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
+}
+
+.button:disabled {
+  cursor: not-allowed;
+}
+
+.button:not(:disabled):hover {
+  background-color: var(--ds-grey-500, #484848);
+}
+
+.buttonFiller {
+  position: relative;
+  width: calc(100% + var(--gap) * 2);
+  height: 100%;
+  margin-left: calc(0px - var(--gap));
+  background-color: var(--ds-secondary, var(--ds-blue-400, #4177f6));
+  pointer-events: none;
+  touch-action: none;
+  z-index: 1;
+}
+
+.buttonFiller::before {
+  --border-width: 8px;
+
+  content: "";
+  position: absolute;
+  width: calc(100% + var(--border-width) * 2);
+  height: 100%;
+  left: calc(0px - var(--border-width));
+  background-color: var(--ds-secondary, var(--ds-blue-400, #4177f6));
+  opacity: 0.5;
+}
+
+.check {
+  --size: 16px;
+  --opacity: 0.75;
+
+  position: absolute;
+  top: calc(50% - calc(var(--size) / 2));
+  left: calc(50% - calc(var(--size) / 2));
+  width: var(--size);
+  height: var(--size);
+  fill: var(--ds-grey-000, #ffffff);
+  z-index: 1;
+  opacity: var(--opacity);
+  animation: week-check-appearance 640ms
+    var(--ds-transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
+}
+
+@keyframes week-check-appearance {
+  0%,
+  50% {
+    opacity: 0;
+    transform: scale(0);
+  }
+  90% {
+    opacity: var(--opacity);
+    transform: scale(1.1);
+  }
+  100% {
+    opacity: var(--opacity);
+    transform: none;
+  }
+}
+
+.date {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  margin-top: 6px;
+  font-size: 13px;
+  text-align: center;
+  color: var(--ds-grey-700, #171e30);
+  pointer-events: none;
+  touch-action: none;
+  user-select: none;
+  transform: translateX(calc(0px - (var(--item-width)) / 5));
+}
+
+.dateFrom,
+.dateTo {
+  width: 0;
+}
+
+.month {
+  width: 0;
+  display: flex;
+  flex-direction: column;
+  margin-top: 6px;
+  font-size: 11px;
+  text-transform: uppercase;
+  transform: translateX(calc(0px - (var(--item-width)) / 5));
+}

package/package.json

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