colibri-ui 0.8.1 → 0.8.3

package/Calendar/components/Presets/index.js

@@ -0,0 +1,68 @@
+'use strict';
+
+var React = require('react');
+var classNames = require('classnames/bind');
+var index = require('../../../Button/index.js');
+var styles = require('./index.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+var clx = classNames__default.default.bind(styles__default.default);
+exports.PRESETS = void 0;
+(function (PRESETS) {
+  PRESETS["TODAY"] = "today";
+  PRESETS["TOMORROW"] = "tomorrow";
+  PRESETS["WEEKENDS"] = "weekends";
+  PRESETS["CURWEEK"] = "currWeek";
+  PRESETS["NEXTWEEK"] = "nextWeek";
+})(exports.PRESETS || (exports.PRESETS = {}));
+var Presets = function Presets(_a) {
+  var presets = _a.presets,
+    onPresetSelect = _a.onPresetSelect;
+  return /*#__PURE__*/React__namespace.createElement("div", {
+    "data-testid": "presets"
+  }, /*#__PURE__*/React__namespace.createElement("div", {
+    className: clx(styles__default.default["native-scroll-inner"])
+  }, /*#__PURE__*/React__namespace.createElement("div", {
+    className: clx(styles__default.default.inner)
+  }, presets.map(function (preset) {
+    var rest = [];
+    for (var _i = 1; _i < arguments.length; _i++) {
+      rest[_i - 1] = arguments[_i];
+    }
+    return /*#__PURE__*/React__namespace.createElement("div", {
+      className: clx(styles__default.default.item),
+      key: "preset=".concat(rest[0])
+    }, /*#__PURE__*/React__namespace.createElement(index.default, {
+      variant: "outline",
+      onClick: function onClick() {
+        return onPresetSelect(preset);
+      },
+      size: "m"
+    }, preset.name));
+  }))));
+};
+
+exports.Presets = Presets;

package/{src/components/Calendar/components/Presets/index.module.scss → Calendar/components/Presets/index.module.css}

@@ -14,18 +14,15 @@
 .item {
   flex-grow: 1;
   padding: 0 4px;
-
-  & > button {
-    display: block;
-    padding: 0 8px;
-    width: 100%;
-  }
-
-  &:first-child {
-    padding-left: 16px;
-  }
-
-  &:last-child {
-    padding-right: 16px;
-  }
 }
+.item > button {
+  display: block;
+  padding: 0 8px;
+  width: 100%;
+}
+.item:first-child {
+  padding-left: 16px;
+}
+.item:last-child {
+  padding-right: 16px;
+}

package/Calendar/index.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { CalendarProps } from "./index.props";
+declare const Calendar: React.FC<CalendarProps>;
+export default Calendar;

package/Calendar/index.js

@@ -0,0 +1,222 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var classNames = require('classnames/bind');
+var index$1 = require('../libs/requestIdleCallback/index.js');
+var index = require('../helpers/date/index.js');
+require('../Icons/index.js');
+var Month = require('./components/Month/Month.js');
+var getStartMonth = require('./utils/getStartMonth.js');
+var index$2 = require('./components/Presets/index.js');
+var getNumberOfMonthsBetweenDates = require('./utils/getNumberOfMonthsBetweenDates.js');
+var index$3 = require('./components/ContinueButton/index.js');
+var styles = require('./index.module.css');
+var ArrowNext = require('../Icons/ArrowNext.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+var clx = classNames__default.default.bind(styles__default.default);
+var idleCallbackOptions = {
+  timeout: 1000
+};
+var Calendar = function Calendar(_a) {
+  var today = _a.today,
+    initialSelectedDate = _a.selectedDate,
+    initialSelectedPeriod = _a.selectedPeriod,
+    activeDates = _a.activeDates,
+    datePresets = _a.datePresets,
+    availableDates = _a.availableDates,
+    canSelectRange = _a.canSelectRange,
+    onChange = _a.onChange,
+    onCancel = _a.onCancel,
+    _b = _a.minWidth,
+    minWidth = _b === void 0 ? 360 : _b,
+    _c = _a.withContinueButton,
+    withContinueButton = _c === void 0 ? false : _c,
+    className = _a.className,
+    _d = _a.titleSize,
+    titleSize = _d === void 0 ? "h3" : _d;
+  var $root = React.useRef(null);
+  var startMonth = getStartMonth.getStartMonth({
+    today: today,
+    activeDates: activeDates
+  });
+  var _e = React.useState(initialSelectedDate),
+    selectedDate = _e[0],
+    setSelectedDate = _e[1];
+  var _f = React.useState(initialSelectedPeriod),
+    selectedPeriod = _f[0],
+    setSelectedPeriod = _f[1];
+  var _g = React.useState(function () {
+      if (initialSelectedDate) {
+        return getNumberOfMonthsBetweenDates.getNumberOfMonthsBetweenDates(startMonth, initialSelectedDate);
+      } else if (activeDates && activeDates.length) {
+        return getNumberOfMonthsBetweenDates.getNumberOfMonthsBetweenDates(startMonth, activeDates.sort()[0]);
+      }
+      return 0;
+    }),
+    currentMonthOffset = _g[0],
+    setCurrentMonthOffset = _g[1];
+  var _h = React.useState(0),
+    contentWidth = _h[0],
+    setContentWidth = _h[1];
+  var _j = React.useState(true),
+    isRangeCompleted = _j[0],
+    setIsRangeCompleted = _j[1];
+  React.useEffect(function () {
+    var _a;
+    setContentWidth(((_a = $root.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0);
+  }, []);
+  var showPrevMonth = function showPrevMonth(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    setCurrentMonthOffset(function (prev) {
+      return prev - 1;
+    });
+  };
+  var showNextMonth = function showNextMonth(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    setCurrentMonthOffset(function (prev) {
+      return prev + 1;
+    });
+  };
+  var selectDate = React.useCallback(function (date, period, rangeCompleted) {
+    setSelectedDate(date);
+    setSelectedPeriod(period);
+    setIsRangeCompleted(rangeCompleted);
+    setCurrentMonthOffset(getNumberOfMonthsBetweenDates.getNumberOfMonthsBetweenDates(startMonth, date));
+  }, [startMonth]);
+  var handleDayClick = React.useCallback(function (date) {
+    if (canSelectRange && selectedDate && !isRangeCompleted) {
+      var _a = [date, selectedDate].sort(),
+        startDate_1 = _a[0],
+        endDate = _a[1];
+      var period_1 = index.getDaysDiff(new Date(startDate_1), new Date(endDate)) + 1;
+      if (onChange) {
+        onChange({
+          date: date,
+          period: period_1
+        });
+      }
+      index$1.requestIdleCallback(function () {
+        return selectDate(startDate_1, period_1, true);
+      }, idleCallbackOptions);
+    } else {
+      if (onChange) {
+        onChange({
+          date: date,
+          period: 1
+        });
+      }
+      index$1.requestIdleCallback(function () {
+        return selectDate(date, 1, false);
+      }, idleCallbackOptions);
+    }
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [canSelectRange, selectedDate, isRangeCompleted, selectDate]);
+  var handlePresetSelect = React.useCallback(function (preset) {
+    index$1.requestIdleCallback(function () {
+      return selectDate(preset.date, preset.period, true);
+    }, idleCallbackOptions);
+  }, [selectDate]);
+  var commitSelectedDates = React.useCallback(function () {
+    if (selectedDate && selectedPeriod) {
+      if (onCancel) {
+        onCancel();
+      }
+      if (onChange) {
+        onChange({
+          date: selectedDate,
+          period: selectedPeriod
+        });
+      }
+    }
+  }, [selectedDate, selectedPeriod, onChange, onCancel]);
+  var cancelCalendar = React.useCallback(function () {
+    if (onCancel) {
+      onCancel();
+    }
+  }, [onCancel]);
+  var getMonthStartDate = React.useCallback(function (shiftIndex) {
+    var startDate = new Date(startMonth);
+    startDate.setMonth(startDate.getMonth() + shiftIndex);
+    return startDate;
+  }, [startMonth]);
+  var commonAttrs = {
+    selectedDate: selectedDate,
+    selectedPeriod: selectedPeriod,
+    activeDates: activeDates,
+    availableDates: availableDates,
+    isRangeCompleted: isRangeCompleted,
+    onDayClick: handleDayClick
+  };
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clx(styles__default.default.root, className),
+    style: {
+      minWidth: "".concat(minWidth, "px")
+    },
+    "data-testid": "calendar",
+    ref: $root
+  }, /*#__PURE__*/React__default.default.createElement("div", null, contentWidth ? (/*#__PURE__*/React__default.default.createElement("div", {
+    "data-component": "Months",
+    className: clx(styles__default.default.months),
+    style: {
+      transform: "translate3D(".concat(-1 * currentMonthOffset * contentWidth, "px, 0, 0)")
+    }
+  }, [currentMonthOffset - 1, currentMonthOffset, currentMonthOffset + 1].filter(function (index) {
+    return index >= 0;
+  }).map(function (index) {
+    var attrs = tslib.__assign(tslib.__assign({}, commonAttrs), {
+      today: today,
+      startDate: getMonthStartDate(index),
+      offsetLeft: index * contentWidth
+    });
+    return /*#__PURE__*/React__default.default.createElement(Month.Month, tslib.__assign({}, attrs, {
+      titleSize: titleSize,
+      key: "month-".concat(index)
+    }));
+  }))) : (/*#__PURE__*/React__default.default.createElement(Month.Month, tslib.__assign({
+    titleSize: titleSize,
+    today: today,
+    startDate: getMonthStartDate(currentMonthOffset),
+    offsetLeft: 0
+  }, commonAttrs))), /*#__PURE__*/React__default.default.createElement("button", {
+    className: clx(styles__default.default["month-control"], styles__default.default["month-control-prev"]),
+    onClick: showPrevMonth,
+    disabled: currentMonthOffset <= 0,
+    type: "button",
+    role: "button",
+    "aria-label": "Prev"
+  }, /*#__PURE__*/React__default.default.createElement(ArrowNext.default, {
+    className: clx(styles__default.default["month-control-prev-arrow"])
+  })), /*#__PURE__*/React__default.default.createElement("button", {
+    className: clx(styles__default.default["month-control"], styles__default.default["month-control-next"]),
+    onClick: showNextMonth,
+    disabled: currentMonthOffset >= 11,
+    type: "button",
+    role: "button",
+    "aria-label": "Next"
+  }, /*#__PURE__*/React__default.default.createElement(ArrowNext.default, {
+    className: clx(styles__default.default["month-control-next-arrow"])
+  }))), datePresets && (/*#__PURE__*/React__default.default.createElement(index$2.Presets, {
+    presets: datePresets,
+    onPresetSelect: handlePresetSelect
+  })), withContinueButton && (/*#__PURE__*/React__default.default.createElement(index$3.ContinueButton, {
+    isChanged: selectedDate !== initialSelectedDate || selectedPeriod !== initialSelectedPeriod,
+    selectedDate: selectedDate,
+    selectedPeriod: selectedPeriod,
+    onContinue: commitSelectedDates,
+    onCancel: cancelCalendar
+  })));
+};
+
+exports.default = Calendar;

package/{src/components/Calendar/index.module.scss → Calendar/index.module.css}

@@ -34,73 +34,59 @@
   position: absolute;
   top: 0;
   width: 80px;
-
-  &[disabled] {
-    cursor: default;
-  }
-
-  &[disabled] .month-control-prev-arrow {
-    opacity: 0.3;
-  }
-
-  &[disabled] .month-control-next-arrow {
-    opacity: 0.3;
-  }
+}
+.month-control[disabled] {
+  cursor: default;
+}
+.month-control[disabled] .month-control-prev-arrow {
+  opacity: 0.3;
+}
+.month-control[disabled] .month-control-next-arrow {
+  opacity: 0.3;
 }
 
 .month-control-prev {
   border-left-width: 16px;
   left: 0;
   text-align: left;
-
-  &::before {
-    background: linear-gradient(
-      to right,
-      rgb(255 255 255 / 100%) 0%,
-      rgb(255 255 255 / 0%) 100%
-    );
-    border: 0 solid #fff;
-    border-left-width: 26px;
-    content: "";
-    display: block;
-    height: 100%;
-    left: 0;
-    position: absolute;
-    top: 0;
-    width: 40px;
-  }
+}
+.month-control-prev::before {
+  background: linear-gradient(to right, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%);
+  border: 0 solid #fff;
+  border-left-width: 26px;
+  content: "";
+  display: block;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 40px;
 }
 
 .month-control-next {
   border-right-width: 16px;
   right: 0;
   text-align: right;
-
-  &::before {
-    background: linear-gradient(
-      to left,
-      rgb(255 255 255 / 100%) 0%,
-      rgb(255 255 255 / 0%) 100%
-    );
-    border: 0 solid #fff;
-    border-right-width: 26px;
-    content: "";
-    display: block;
-    height: 100%;
-    position: absolute;
-    right: 0;
-    top: 0;
-    width: 40px;
-  }
+}
+.month-control-next::before {
+  background: linear-gradient(to left, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%);
+  border: 0 solid #fff;
+  border-right-width: 26px;
+  content: "";
+  display: block;
+  height: 100%;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 40px;
 }
 
 .months {
   min-height: 300px;
   position: relative;
   transition: transform 0.3s ease;
-
-  & > div {
-    position: absolute;
-    top: 0;
-  }
 }
+.months > div {
+  position: absolute;
+  top: 0;
+}

package/Calendar/index.props.d.ts

@@ -0,0 +1,21 @@
+import type { Preset } from "./components/Presets";
+export type CalendarPayload = {
+    date: string;
+    period: number;
+};
+export type CalendarTitleSize = "xs" | "s" | "m" | "l" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+export type CalendarProps = {
+    today: string;
+    selectedDate?: string;
+    selectedPeriod?: number;
+    canSelectRange?: boolean;
+    activeDates?: string[];
+    datePresets?: Preset[];
+    availableDates?: string[];
+    onChange?: (payload: CalendarPayload) => void;
+    onCancel?: () => void;
+    withContinueButton?: boolean;
+    className?: string;
+    minWidth?: number;
+    titleSize?: CalendarTitleSize;
+};

package/Calendar/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../esm/Calendar/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/Calendar/utils/getMonthWeeks.d.ts

@@ -0,0 +1,20 @@
+type Day = {
+    day: number;
+    isDummy?: boolean;
+    isActive?: boolean;
+    isSelected?: boolean;
+    isStartOfSelection?: boolean;
+    isEndOfSelection?: boolean;
+    isInSelectedRange?: boolean;
+};
+type Week = Day[];
+type Options = {
+    today: string;
+    startDate: Date;
+    activeDays?: string[];
+    selectedDate?: string;
+    selectedPeriod?: number;
+    availableDates?: string[];
+};
+export declare function getMonthWeeks(options: Options): Week[];
+export {};

package/Calendar/utils/getMonthWeeks.js

@@ -0,0 +1,81 @@
+'use strict';
+
+var leadingZeros = require('../../libs/numbers/leadingZeros.js');
+
+var dummyDay = {
+  day: 0,
+  isDummy: true
+};
+function getDateDayInWeek(date) {
+  var day = date.getDay() - 1;
+  return day >= 0 ? day : 6;
+}
+function doubleDigits(v) {
+  return leadingZeros.leadingZeros(v, 2);
+}
+function formatToComparable(date) {
+  return new Date([date.getFullYear(), doubleDigits(date.getMonth() + 1), doubleDigits(date.getDate())].join("-")).getTime();
+}
+function checkIfDateIsAvailable(date, options) {
+  var availableDates = options.availableDates,
+    today = options.today;
+  var todayCompatible = formatToComparable(new Date(today));
+  var availableDatesComparable = availableDates && availableDates.length > 0 && availableDates.map(function (_date) {
+    return formatToComparable(new Date(_date));
+  });
+  var isAvailableDate = availableDatesComparable ? availableDatesComparable.includes(date) : true;
+  return date >= todayCompatible && isAvailableDate;
+}
+function getSelectedDates(options) {
+  var period = options.selectedPeriod ? options.selectedPeriod - 1 : 0;
+  var dateFrom = options.selectedDate ? new Date(options.selectedDate) : undefined;
+  var dateTo = dateFrom ? new Date(dateFrom.getTime() + 24 * 60 * 60 * 1000 * period) : undefined;
+  return {
+    selectedDateFrom: dateFrom ? formatToComparable(dateFrom) : undefined,
+    selectedDateTo: dateTo ? formatToComparable(dateTo) : undefined
+  };
+}
+function getMonthWeeks(options) {
+  var _a = getSelectedDates(options),
+    selectedDateFrom = _a.selectedDateFrom,
+    selectedDateTo = _a.selectedDateTo;
+  var currMonth = options.startDate.getMonth();
+  var weeks = [[]];
+  var currWeek = weeks[weeks.length - 1];
+  var currDate = new Date(options.startDate);
+  {
+    // Prepending wirst week with dummy days
+    var dayInWeek = getDateDayInWeek(currDate);
+    while (dayInWeek) {
+      weeks[0].push(dummyDay);
+      dayInWeek -= 1;
+    }
+  }
+  while (currDate.getMonth() === currMonth) {
+    var currCompareDate = formatToComparable(currDate);
+    var isStartOfSelection = currCompareDate === selectedDateFrom;
+    var isEndOfSelection = currCompareDate === selectedDateTo;
+    currWeek.push({
+      day: currDate.getDate(),
+      isActive: checkIfDateIsAvailable(currCompareDate, options),
+      isSelected: isStartOfSelection || isEndOfSelection,
+      isStartOfSelection: isStartOfSelection,
+      isEndOfSelection: isEndOfSelection,
+      isInSelectedRange: !!selectedDateFrom && !!selectedDateTo && currCompareDate > selectedDateFrom && currCompareDate < selectedDateTo
+    });
+    if (currWeek.length === 7) {
+      currWeek = [];
+      weeks.push(currWeek);
+    }
+    currDate.setDate(currDate.getDate() + 1);
+  }
+  {
+    var lastWeek = weeks[weeks.length - 1];
+    while (lastWeek.length < 7) {
+      lastWeek.push(dummyDay);
+    }
+  }
+  return weeks;
+}
+
+exports.getMonthWeeks = getMonthWeeks;

package/Calendar/utils/getNumberOfMonthsBetweenDates.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Returns number of months between dates
+ */
+export declare function getNumberOfMonthsBetweenDates(startDate: string, activeDate: string): number;

package/Calendar/utils/getNumberOfMonthsBetweenDates.js

@@ -0,0 +1,21 @@
+'use strict';
+
+/**
+ * Returns number of months between dates
+ */
+function normalizeDate(date) {
+  return date.split("-").slice(0, 2).join("-");
+}
+function getNumberOfMonthsBetweenDates(startDate, activeDate) {
+  var start = new Date(normalizeDate(startDate));
+  var active = new Date(normalizeDate(activeDate));
+  var offset = active > start ? 1 : -1;
+  var count = 0;
+  while (start.getFullYear() !== active.getFullYear() || start.getMonth() !== active.getMonth()) {
+    count += offset;
+    start.setMonth(start.getMonth() + offset);
+  }
+  return count;
+}
+
+exports.getNumberOfMonthsBetweenDates = getNumberOfMonthsBetweenDates;

package/Calendar/utils/getPresets.d.ts

@@ -0,0 +1,10 @@
+export type DatePreset = {
+    name: string;
+    date: string;
+    period: number;
+};
+export declare function getPresets(presets: string[]): ({
+    name: string;
+    date: string;
+    period: number;
+} | undefined)[] | undefined;

package/Calendar/utils/getStartMonth.d.ts

@@ -0,0 +1,6 @@
+type Options = {
+    today?: string;
+    activeDates?: string[];
+};
+export declare function getStartMonth({ today, activeDates, }: Options): string;
+export {};

package/Calendar/utils/getStartMonth.js

@@ -0,0 +1,15 @@
+'use strict';
+
+var leadingZeros = require('../../libs/numbers/leadingZeros.js');
+
+function getStartMonth(_a) {
+  var _b = _a.today,
+    today = _b === void 0 ? "" : _b,
+    _c = _a.activeDates,
+    activeDates = _c === void 0 ? [""] : _c;
+  var sortedDates = [].concat(activeDates, today).filter(Boolean).sort();
+  var date = new Date(sortedDates[0]);
+  return [date.getFullYear(), leadingZeros.leadingZeros(date.getMonth() + 1, 2)].join("-");
+}
+
+exports.getStartMonth = getStartMonth;