@jetbrains/ring-ui-built 7.0.106 → 7.0.108

package/components/date-picker/month-slider.js

@@ -1,62 +1,144 @@
-import { PureComponent } from 'react';
+import { c } from 'react-compiler-runtime';
+import { useState } from 'react';
 import classNames from 'classnames';
 import { addYears } from 'date-fns/addYears';
-import { startOfDay } from 'date-fns/startOfDay';
-import { subYears } from 'date-fns/subYears';
-import linearFunction from '../global/linear-function.js';
-import units, { yearScrollSpeed } from './consts.js';
+import { startOfYear } from 'date-fns';
+import units from './consts.js';
+import scheduleRAF from '../global/schedule-raf.js';
 import { s as styles } from '../_helpers/date-picker.js';
-import { jsx } from 'react/jsx-runtime';
+import { jsx, Fragment } from 'react/jsx-runtime';
 import 'date-fns/add';
+import '../global/sniffer.js';
+import 'sniffr';
 
-const COVERYEARS = 3;
-class MonthSlider extends PureComponent {
-  state = {
-    dragging: false
-  };
-  componentDidUpdate(prevProps, prevState) {
-    if (this.state.dragging && !prevState.dragging) {
-      window.addEventListener('mousemove', this.onMouseMove);
-      window.addEventListener('mouseup', this.onMouseUp);
-    } else if (!this.state.dragging && prevState.dragging) {
-      window.removeEventListener('mousemove', this.onMouseMove);
-      window.removeEventListener('mouseup', this.onMouseUp);
+const scheduleScroll = scheduleRAF();
+function MonthSlider(t0) {
+  const $ = c(21);
+  if ($[0] !== "ebbd4a21f88e38a284a06e4f0c7cea8f6e0df6c98e2e21ebc395ef8031346aae") {
+    for (let $i = 0; $i < 21; $i += 1) {
+      $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
+    $[0] = "ebbd4a21f88e38a284a06e4f0c7cea8f6e0df6c98e2e21ebc395ef8031346aae";
   }
-  onMouseDown = () => {
-    this.setState({
-      dragging: true
-    });
-  };
-  onMouseUp = () => {
-    this.setState({
-      dragging: false
-    });
-  };
-  onMouseMove = e => {
-    this.props.onScroll(linearFunction(0, Number(this.props.scrollDate), yearScrollSpeed).y(e.movementY));
-  };
-  render() {
-    let year = subYears(startOfDay(this.props.scrollDate), 1);
-    const years = [year];
-    for (let i = 0; i <= COVERYEARS; i++) {
-      year = addYears(year, 1);
-      years.push(year);
-    }
-    const classes = classNames(styles.monthSlider, {
-      [styles.dragging]: this.state.dragging
-    });
-    return /*#__PURE__*/jsx("div", {
-      children: years.map(date => /*#__PURE__*/jsx("button", {
+  const {
+    scrollDate,
+    setScrollDate
+  } = t0;
+  const [dragStart, setDragStart] = useState(null);
+  let t1;
+  if ($[1] !== scrollDate.date) {
+    t1 = e => {
+      const pointerId = e.pointerId;
+      setDragStart({
+        y: e.pageY,
+        scrollDate: Number(scrollDate.date),
+        pointerId
+      });
+      e.currentTarget.setPointerCapture(pointerId);
+    };
+    $[1] = scrollDate.date;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  const onPointerDown = t1;
+  let t2;
+  if ($[3] !== dragStart || $[4] !== setScrollDate) {
+    t2 = e_0 => {
+      scheduleScroll(() => {
+        if (!dragStart) {
+          return;
+        }
+        const {
+          y: startY,
+          scrollDate: startDate
+        } = dragStart;
+        const yearFraction = (e_0.pageY - startY) / units.calHeight;
+        const startDatePlusOneYear = Number(addYears(new Date(startDate), 1));
+        const newScrollDate = startDate + yearFraction * (startDatePlusOneYear - startDate);
+        setScrollDate({
+          date: newScrollDate,
+          source: "other"
+        });
+      });
+    };
+    $[3] = dragStart;
+    $[4] = setScrollDate;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  const onPointerMove = t2;
+  let t3;
+  if ($[6] !== dragStart) {
+    t3 = e_1 => {
+      if (!dragStart) {
+        return;
+      }
+      const {
+        pointerId: pointerId_0
+      } = dragStart;
+      setDragStart(null);
+      e_1.currentTarget.releasePointerCapture?.(pointerId_0);
+    };
+    $[6] = dragStart;
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  const onPointerUp = t3;
+  let t4;
+  let yearStart;
+  if ($[8] !== scrollDate.date) {
+    yearStart = startOfYear(scrollDate.date);
+    t4 = addYears(yearStart, 1);
+    $[8] = scrollDate.date;
+    $[9] = t4;
+    $[10] = yearStart;
+  } else {
+    t4 = $[9];
+    yearStart = $[10];
+  }
+  const yearEnd = t4;
+  const yearFraction_0 = (Number(scrollDate.date) - Number(yearStart)) / (Number(yearEnd) - Number(yearStart));
+  const t5 = yearFraction_0 - 1;
+  const t6 = yearFraction_0 + 1;
+  let t7;
+  if ($[11] !== t5 || $[12] !== t6 || $[13] !== yearFraction_0) {
+    t7 = [t5, yearFraction_0, t6];
+    $[11] = t5;
+    $[12] = t6;
+    $[13] = yearFraction_0;
+    $[14] = t7;
+  } else {
+    t7 = $[14];
+  }
+  const offsets = t7;
+  let t8;
+  if ($[15] !== dragStart || $[16] !== offsets || $[17] !== onPointerDown || $[18] !== onPointerMove || $[19] !== onPointerUp) {
+    t8 = /*#__PURE__*/jsx(Fragment, {
+      children: offsets.map(offset => /*#__PURE__*/jsx("button", {
         type: "button",
-        className: classes,
+        className: classNames(styles.monthSlider, dragStart && styles.dragging),
         style: {
-          top: Math.floor(this.props.pxToDate.x(Number(date)) - units.cellSize)
+          top: offset * units.calHeight - units.cellSize
         },
-        onMouseDown: this.onMouseDown
-      }, +date))
+        onPointerDown: onPointerDown,
+        onPointerMove: onPointerMove,
+        onPointerUp: onPointerUp,
+        onPointerCancel: onPointerUp
+      }, Math.floor(offset)))
     });
+    $[15] = dragStart;
+    $[16] = offsets;
+    $[17] = onPointerDown;
+    $[18] = onPointerMove;
+    $[19] = onPointerUp;
+    $[20] = t8;
+  } else {
+    t8 = $[20];
   }
+  return t8;
 }
 
 export { MonthSlider as default };

package/components/date-picker/month.d.ts

@@ -1,5 +1,9 @@
+import { type Locale } from 'date-fns';
 import { type MonthsProps } from './consts';
+import { type IntersectionObserverHandle } from './use-intersection-observer';
 export interface MonthProps extends MonthsProps {
     month: Date;
+    intersectionObserverHandle: IntersectionObserverHandle | null;
 }
 export default function Month(props: MonthProps): import("react").JSX.Element;
+export declare function getMonthHeight(monthStart: Date | number, locale: Locale | undefined): number;

package/components/date-picker/month.js

@@ -1,15 +1,16 @@
 import { c } from 'react-compiler-runtime';
-import { addDays } from 'date-fns/addDays';
-import { endOfMonth } from 'date-fns/endOfMonth';
 import { format } from 'date-fns/format';
 import { getDay } from 'date-fns/getDay';
-import { setDay } from 'date-fns/setDay';
+import { getDaysInMonth, setDate } from 'date-fns';
+import { useRef, createElement } from 'react';
 import Day from './day.js';
-import { shiftWeekArray, getWeekStartsOn, weekdays, FIFTH_DAY, WEEK } from './consts.js';
+import units, { getWeekStartsOn, WEEK } from './consts.js';
+import { useVisibility } from './use-intersection-observer.js';
 import { s as styles } from '../_helpers/date-picker.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { createElement } from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import 'core-js/modules/es.array.includes.js';
 import 'classnames';
+import 'date-fns/addDays';
 import 'date-fns/getDate';
 import 'date-fns/isAfter';
 import 'date-fns/isBefore';
@@ -17,97 +18,101 @@ import 'date-fns/isSameDay';
 import 'date-fns/isToday';
 import 'date-fns/startOfDay';
 import 'date-fns/add';
+import '../global/sniffer.js';
+import 'sniffr';
 
 function Month(props) {
-  const $ = c(20);
-  if ($[0] !== "14b913afec6a0e367382e049e14b38f0432cb1747486488d23fa5601f7987406") {
-    for (let $i = 0; $i < 20; $i += 1) {
+  const $ = c(13);
+  if ($[0] !== "2f6fe4553edaada7486df2c003273bf4ae27149a404d6c91c9c721f7d6c02b8b") {
+    for (let $i = 0; $i < 13; $i += 1) {
       $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
-    $[0] = "14b913afec6a0e367382e049e14b38f0432cb1747486488d23fa5601f7987406";
+    $[0] = "2f6fe4553edaada7486df2c003273bf4ae27149a404d6c91c9c721f7d6c02b8b";
   }
-  const start = props.month;
-  const end = endOfMonth(start);
   const {
-    locale
+    month,
+    locale,
+    intersectionObserverHandle
   } = props;
-  const weekday = getDay(start);
+  const containerRef = useRef(null);
+  const visible = useVisibility(intersectionObserverHandle, containerRef);
   let t0;
-  if ($[1] !== props.locale) {
-    t0 = shiftWeekArray(Object.values(weekdays), getWeekStartsOn(props.locale));
-    $[1] = props.locale;
-    $[2] = t0;
+  if ($[1] !== locale || $[2] !== month || $[3] !== visible) {
+    t0 = visible ? {} : {
+      height: getMonthHeight(month, locale)
+    };
+    $[1] = locale;
+    $[2] = month;
+    $[3] = visible;
+    $[4] = t0;
   } else {
-    t0 = $[2];
-  }
-  const weekDays = t0;
-  const fifthDayOfWeek = weekDays[FIFTH_DAY];
-  let days;
-  if ($[3] !== end || $[4] !== fifthDayOfWeek || $[5] !== start || $[6] !== weekday) {
-    let day = setDay(start, weekday >= fifthDayOfWeek ? fifthDayOfWeek : fifthDayOfWeek - WEEK);
-    days = [];
-    while (day < end) {
-      days.push(day);
-      day = addDays(day, 1);
-    }
-    $[3] = end;
-    $[4] = fifthDayOfWeek;
-    $[5] = start;
-    $[6] = weekday;
-    $[7] = days;
-  } else {
-    days = $[7];
+    t0 = $[4];
   }
   let t1;
-  if ($[8] !== locale || $[9] !== props.month) {
-    t1 = format(props.month, "LLLL", {
-      locale
+  if ($[5] !== locale || $[6] !== month || $[7] !== props || $[8] !== visible) {
+    t1 = visible && /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsx("span", {
+        className: styles.monthTitle,
+        children: format(month, "LLLL", {
+          locale
+        })
+      }), Array.from({
+        length: getPaddingCellsNum(month, locale)
+      }, (_, i) => /*#__PURE__*/createElement(Day, {
+        ...props,
+        day: new Date(0),
+        empty: true,
+        key: `e_${i}`
+      })), Array.from({
+        length: getDaysInMonth(month)
+      }, (__0, i_0) => /*#__PURE__*/createElement(Day, {
+        ...props,
+        day: setDate(month, i_0 + 1),
+        empty: false,
+        key: i_0
+      }))]
     });
-    $[8] = locale;
-    $[9] = props.month;
-    $[10] = t1;
+    $[5] = locale;
+    $[6] = month;
+    $[7] = props;
+    $[8] = visible;
+    $[9] = t1;
   } else {
-    t1 = $[10];
+    t1 = $[9];
   }
   let t2;
-  if ($[11] !== t1) {
-    t2 = /*#__PURE__*/jsx("span", {
-      className: styles.monthTitle,
+  if ($[10] !== t0 || $[11] !== t1) {
+    t2 = /*#__PURE__*/jsx("div", {
+      className: styles.month,
+      ref: containerRef,
+      style: t0,
       children: t1
     });
+    $[10] = t0;
     $[11] = t1;
     $[12] = t2;
   } else {
     t2 = $[12];
   }
-  let t3;
-  if ($[13] !== days || $[14] !== props || $[15] !== start) {
-    t3 = days.map(date => /*#__PURE__*/createElement(Day, {
-      ...props,
-      day: date,
-      empty: date < start,
-      key: +date
-    }));
-    $[13] = days;
-    $[14] = props;
-    $[15] = start;
-    $[16] = t3;
-  } else {
-    t3 = $[16];
-  }
-  let t4;
-  if ($[17] !== t2 || $[18] !== t3) {
-    t4 = /*#__PURE__*/jsxs("div", {
-      className: styles.month,
-      children: [t2, t3]
-    });
-    $[17] = t2;
-    $[18] = t3;
-    $[19] = t4;
-  } else {
-    t4 = $[19];
-  }
-  return t4;
+  return t2;
+}
+const cellsPerMonthName = 4;
+/**
+ * Between the month name and the first month day
+ */
+function getPaddingCellsNum(monthStart, locale) {
+  const monthStartWeekdaySundayBased = getDay(monthStart);
+  const weekStartDay = getWeekStartsOn(locale);
+  const monthStartWeekday = (monthStartWeekdaySundayBased - weekStartDay + WEEK) % WEEK;
+  if (monthStartWeekday >= cellsPerMonthName) return monthStartWeekday - cellsPerMonthName;
+  const upperPadding = WEEK - cellsPerMonthName;
+  const lowerPadding = monthStartWeekday;
+  return upperPadding + lowerPadding;
+}
+function getMonthHeight(monthStart, locale) {
+  const totalCells = cellsPerMonthName + getPaddingCellsNum(monthStart, locale) + getDaysInMonth(new Date(monthStart));
+  const monthLines = Math.ceil(totalCells / WEEK);
+  return monthLines * units.cellSize;
 }
 
-export { Month as default };
+export { Month as default, getMonthHeight };