nntc-ui 0.0.66 → 0.0.67

package/index.css

@@ -829,6 +829,13 @@
   height: 44px;
   background-color: var(--theme-date-range);
 }
+.calendarPopover_monthCellSelectionFirst {
+  left: 50%;
+  width: 50%;
+}
+.calendarPopover_monthCellSelectionLast {
+  width: 50%;
+}
 
 /* src/components/common/ColorPicker/colorPicker.module.css */
 .colorPicker_root {

package/index.d.ts

@@ -66,8 +66,11 @@ declare function Select(props: UiProps<Props$l> & DetailedHTMLProps<InputHTMLAtt
 
 type Variant$6 = 'filled' | 'outlined';
 type Size$9 = 'medium' | 'small';
+type ValueType = 'date' | 'year';
 interface Props$k {
     variant?: Variant$6;
+    isPeriod?: boolean;
+    valueType?: ValueType;
     componentSize?: Size$9;
     fullWidth?: boolean;
     placeholder?: string;

package/index.js

@@ -897,6 +897,8 @@ __export(calendarPopover_exports, {
   default: () => calendarPopover_default,
   month: () => month,
   monthCellSelection: () => monthCellSelection,
+  monthCellSelectionFirst: () => monthCellSelectionFirst,
+  monthCellSelectionLast: () => monthCellSelectionLast,
   navigationArrow: () => navigationArrow,
   navigationContainer: () => navigationContainer,
   navigationTitle: () => navigationTitle,
@@ -919,6 +921,8 @@ var cellSelection = "calendarPopover_cellSelection";
 var cellSelectionFirst = "calendarPopover_cellSelectionFirst";
 var cellSelectionLast = "calendarPopover_cellSelectionLast";
 var monthCellSelection = "calendarPopover_monthCellSelection";
+var monthCellSelectionFirst = "calendarPopover_monthCellSelectionFirst";
+var monthCellSelectionLast = "calendarPopover_monthCellSelectionLast";
 var calendarPopover_default = {
   root: root7,
   buttonsContainer,
@@ -935,14 +939,25 @@ var calendarPopover_default = {
   cellSelection,
   cellSelectionFirst,
   cellSelectionLast,
-  monthCellSelection
+  monthCellSelection,
+  monthCellSelectionFirst,
+  monthCellSelectionLast
 };
 
 // src/components/common/DateTime/ui/CalendarPopover/CalendarPopover.tsx
 import { Fragment as Fragment2, jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
 function CalendarPopover(props) {
-  const { componentSize, initStartDate, initEndDate, changeDates, onClear, classes } = props;
-  const [viewType, setViewType] = useState4("month");
+  const {
+    componentSize,
+    isPeriod = true,
+    valueType = "date",
+    initStartDate,
+    initEndDate,
+    changeDates,
+    onClear,
+    classes
+  } = props;
+  const [viewType, setViewType] = useState4(valueType === "year" ? "yearsRange" : "month");
   const [currentItem, setCurrentItem] = useState4({
     year: dayjs().year(),
     month: dayjs().month()
@@ -951,8 +966,10 @@ function CalendarPopover(props) {
   const [endDate, setEndDate] = useState4(initEndDate ? dayjs(initEndDate).startOf("D").valueOf() : void 0);
   const startDateMonth = useMemo2(() => startDate ? dayjs(startDate).startOf("M").valueOf() : void 0, [startDate]);
   const endDateMonth = useMemo2(() => endDate ? dayjs(endDate).startOf("M").valueOf() : void 0, [endDate]);
+  const startYear = useMemo2(() => startDate ? dayjs(startDate).year() : void 0, [startDate]);
+  const endYear = useMemo2(() => endDate ? dayjs(endDate).year() : void 0, [endDate]);
   const currentDate = useMemo2(
-    () => dayjs(new Date(currentItem.year, currentItem.month, 1)).startOf(viewType === "year" ? "y" : "M"),
+    () => dayjs(new Date(currentItem.year, currentItem.month, 1)).startOf(viewType === "month" ? "M" : "y"),
     [currentItem, viewType]
   );
   const daysInMonth = currentDate.daysInMonth();
@@ -965,13 +982,33 @@ function CalendarPopover(props) {
     if (!startDate && !endDate) {
       onClear?.();
       changeDates();
-    } else if (!!startDate && !!endDate) {
+      return;
+    }
+    if (valueType === "year") {
+      if (!isPeriod && startDate) {
+        changeDates(dayjs(startDate).format("YYYY"));
+        return;
+      }
+      if (isPeriod && startDate && endDate) {
+        changeDates(dayjs(startDate).format("YYYY"), dayjs(endDate).format("YYYY"));
+        return;
+      }
+      return;
+    }
+    if (!isPeriod && startDate) {
+      changeDates(dayjs(startDate).format());
+      return;
+    }
+    if (isPeriod && startDate && endDate) {
       changeDates(dayjs(startDate).format(), dayjs(endDate).format());
     }
-  }, [startDate, endDate]);
+  }, [startDate, endDate, isPeriod, valueType, changeDates, onClear]);
   const changeCurrentItem = useCallback3(
     (count) => () => {
-      const tempDate = dayjs(new Date(currentItem.year, currentItem.month, 1)).add(count, viewType);
+      const baseDate = dayjs(new Date(currentItem.year, currentItem.month, 1));
+      const step = viewType === "yearsRange" ? count * 20 : count;
+      const unit = viewType === "month" ? "month" : "year";
+      const tempDate = baseDate.add(step, unit);
       setCurrentItem({
         month: tempDate.month(),
         year: tempDate.year()
@@ -979,19 +1016,85 @@ function CalendarPopover(props) {
     },
     [viewType, currentItem]
   );
-  const changeViewType = useCallback3(
+  const changeViewType = useCallback3(() => {
+    if (valueType === "year") {
+      return;
+    }
+    if (viewType === "month") {
+      setViewType("year");
+    } else if (viewType === "year") {
+      setViewType("yearsRange");
+    } else {
+      setViewType("month");
+    }
+  }, [viewType, valueType]);
+  const openMonthView = useCallback3(
     (date) => () => {
-      if (viewType === "year" && date) {
-        setCurrentItem({ month: date.month(), year: date.year() });
-        setViewType("month");
+      setCurrentItem({ month: date.month(), year: date.year() });
+      setViewType("month");
+    },
+    []
+  );
+  const setYear = useCallback3(
+    (cellYear) => () => {
+      const cellDate = dayjs(new Date(cellYear, 0, 1)).startOf("y").valueOf();
+      if (!isPeriod) {
+        if (startDate === cellDate) {
+          setStartDate(void 0);
+        } else {
+          setStartDate(cellDate);
+        }
+        setEndDate(void 0);
+        return;
+      }
+      if (startDate && endDate) {
+        if (cellDate === startDate) {
+          setStartDate(void 0);
+        } else if (cellDate === endDate) {
+          setEndDate(void 0);
+        } else {
+          setStartDate(cellDate);
+          setEndDate(void 0);
+        }
+      } else if (startDate) {
+        if (cellDate === startDate) {
+          setStartDate(void 0);
+        } else if (cellDate < startDate) {
+          setEndDate(startDate);
+          setStartDate(cellDate);
+        } else {
+          setEndDate(cellDate);
+        }
+      } else if (endDate) {
+        if (cellDate === endDate) {
+          setEndDate(void 0);
+        } else if (cellDate < endDate) {
+          setStartDate(cellDate);
+        } else {
+          setStartDate(endDate);
+          setEndDate(cellDate);
+        }
       } else {
-        setViewType("year");
+        setStartDate(cellDate);
       }
     },
-    [viewType]
+    [startDate, endDate, isPeriod]
   );
+  const yearsRangeStart = useMemo2(() => {
+    const year = currentDate.year();
+    return Math.floor(year / 20) * 20;
+  }, [currentDate]);
   const setDate = useCallback3(
     (cellDate) => () => {
+      if (!isPeriod) {
+        if (startDate === cellDate) {
+          setStartDate(void 0);
+        } else {
+          setStartDate(cellDate);
+        }
+        setEndDate(void 0);
+        return;
+      }
       if (startDate && endDate) {
         if (cellDate === startDate) {
           setStartDate(void 0);
@@ -1023,7 +1126,7 @@ function CalendarPopover(props) {
         setStartDate(cellDate);
       }
     },
-    [startDate, endDate]
+    [startDate, endDate, isPeriod]
   );
   const reset = useCallback3((e) => {
     setStartDate(void 0);
@@ -1043,7 +1146,7 @@ function CalendarPopover(props) {
   return /* @__PURE__ */ jsxs6("div", { className: classNames2(root7, calendarPopover_exports[componentSize], classes?.root), children: [
     /* @__PURE__ */ jsx13("div", { className: classNames2(buttonsContainer, classes?.buttonsContainer), children: /* @__PURE__ */ jsxs6(ButtonsGroup, { fillEvenly: true, children: [
       /* @__PURE__ */ jsx13(Button, { size: "small", variant: "text", textSecondary: true, tabIndex: -1, onClick: reset, children: "\u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C" }),
-      /* @__PURE__ */ jsx13(Button, { size: "small", variant: "text", textSecondary: true, tabIndex: -1, onClick: today, children: "\u0421\u0435\u0433\u043E\u0434\u043D\u044F" })
+      valueType === "date" && /* @__PURE__ */ jsx13(Button, { size: "small", variant: "text", textSecondary: true, tabIndex: -1, onClick: today, children: "\u0421\u0435\u0433\u043E\u0434\u043D\u044F" })
     ] }) }),
     /* @__PURE__ */ jsxs6("div", { className: classNames2(navigationContainer, classes?.navigationContainer), children: [
       /* @__PURE__ */ jsx13(
@@ -1060,8 +1163,12 @@ function CalendarPopover(props) {
         {
           type: "button",
           className: classNames2(button2, navigationValue, classes?.navigationValue),
-          onClick: changeViewType(),
-          children: /* @__PURE__ */ jsx13(Typography, { variant: "subtitle1", className: classNames2(navigationTitle, classes?.navigationTitle), children: viewType === "year" ? currentDate.format("YYYY") : currentDate.format("MMMM YYYY") })
+          onClick: changeViewType,
+          children: /* @__PURE__ */ jsxs6(Typography, { variant: "subtitle1", className: classNames2(navigationTitle, classes?.navigationTitle), children: [
+            viewType === "month" && currentDate.format("MMMM YYYY"),
+            viewType === "year" && currentDate.format("YYYY"),
+            viewType === "yearsRange" && `${yearsRangeStart} - ${yearsRangeStart + 19}`
+          ] })
         }
       ),
       /* @__PURE__ */ jsx13(
@@ -1074,61 +1181,158 @@ function CalendarPopover(props) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx13("div", { className: classNames2(cellsContainer, classes?.cellsContainer), children: viewType === "year" ? /* @__PURE__ */ jsx13(Fragment2, { children: [...Array(12)].map((__, index) => {
-      const cellDate = currentDate.add(index, "M");
-      const cellDateValue = cellDate.valueOf();
-      return /* @__PURE__ */ jsxs6(
-        "button",
-        {
-          type: "button",
-          className: classNames2(button2, cell, month, classes?.cell, classes?.month),
-          onClick: changeViewType(cellDate),
-          children: [
-            startDateMonth !== void 0 && endDateMonth !== void 0 && cellDateValue >= startDateMonth && cellDateValue <= endDateMonth && /* @__PURE__ */ jsx13("span", { className: classNames2(monthCellSelection, classes?.monthCellSelection) }),
-            /* @__PURE__ */ jsx13(Typography, { variant: "subtitle1", className: classNames2(cellData, classes?.cellData), children: cellDate.format("MMMM") })
-          ]
-        },
-        `cell-${index}`
-      );
-    }) }) : /* @__PURE__ */ jsxs6(Fragment2, { children: [
-      [...Array(emptyCellsCount)].map((__, index) => /* @__PURE__ */ jsx13("div", { className: classNames2(cell, classes?.cell) }, `empty-cell-${index}`)),
-      [...Array(daysInMonth)].map((__, index) => {
-        const cellDate = currentDate.add(index, "d").valueOf();
+    /* @__PURE__ */ jsxs6("div", { className: classNames2(cellsContainer, classes?.cellsContainer), children: [
+      viewType === "yearsRange" && /* @__PURE__ */ jsx13(Fragment2, { children: [...Array(20)].map((__, index) => {
+        const cellYear = yearsRangeStart + index;
+        const handleClick = valueType === "year" ? setYear(cellYear) : () => {
+          setCurrentItem({ month: 0, year: cellYear });
+          setViewType("year");
+        };
+        const showCircle = valueType === "year";
+        const isCircleActive = showCircle && startYear !== void 0 && (cellYear === startYear || cellYear === endYear);
+        let isYearInRange = false;
+        let isFirstInRange = false;
+        let isLastInRange = false;
+        if (startYear !== void 0) {
+          if (!isPeriod) {
+            if (valueType === "date" && cellYear === startYear) {
+              isYearInRange = true;
+            }
+          } else if (endYear !== void 0) {
+            if (startYear === endYear) {
+              if (cellYear === startYear) {
+                isYearInRange = true;
+              }
+            } else if (cellYear >= startYear && cellYear <= endYear) {
+              isYearInRange = true;
+              if (cellYear === startYear) {
+                isFirstInRange = true;
+              } else if (cellYear === endYear) {
+                isLastInRange = true;
+              }
+            }
+          }
+        }
         return /* @__PURE__ */ jsxs6(
           "button",
           {
             type: "button",
             className: classNames2(button2, cell, classes?.cell),
-            onClick: setDate(cellDate),
+            onClick: handleClick,
             children: [
-              (cellDate === startDate || cellDate === endDate) && /* @__PURE__ */ jsx13("span", { className: classNames2(cellCircle, classes?.cellCircle) }),
-              startDate !== void 0 && endDate !== void 0 && cellDate >= startDate && cellDate <= endDate && /* @__PURE__ */ jsx13(
+              isCircleActive && /* @__PURE__ */ jsx13("span", { className: classNames2(cellCircle, classes?.cellCircle) }),
+              isYearInRange && /* @__PURE__ */ jsx13(
                 "span",
                 {
                   className: classNames2(
                     cellSelection,
                     classes?.cellSelection,
-                    cellDate === startDate && cellSelectionFirst,
-                    cellDate === startDate && classes?.cellSelectionFirst,
-                    cellDate === endDate && cellSelectionLast,
-                    cellDate === endDate && classes?.cellSelectionLast
+                    isFirstInRange && cellSelectionFirst,
+                    isFirstInRange && classes?.cellSelectionFirst,
+                    isLastInRange && cellSelectionLast,
+                    isLastInRange && classes?.cellSelectionLast
                   )
                 }
               ),
-              /* @__PURE__ */ jsx13(
-                Typography,
+              /* @__PURE__ */ jsx13(Typography, { variant: "subtitle1", className: classNames2(cellData, classes?.cellData), children: cellYear })
+            ]
+          },
+          `cell-year-${cellYear}`
+        );
+      }) }),
+      viewType === "year" && /* @__PURE__ */ jsx13(Fragment2, { children: [...Array(12)].map((__, index) => {
+        const cellDate = currentDate.add(index, "M");
+        const cellDateValue = cellDate.valueOf();
+        const isMonthSelected = isPeriod ? startDateMonth !== void 0 && endDateMonth !== void 0 && cellDateValue >= startDateMonth && cellDateValue <= endDateMonth : startDateMonth !== void 0 && cellDateValue === startDateMonth;
+        let isMonthInRange = false;
+        let isFirstMonthInRange = false;
+        let isLastMonthInRange = false;
+        if (isPeriod && valueType === "date" && startDateMonth !== void 0 && endDateMonth !== void 0) {
+          if (startDateMonth === endDateMonth) {
+            if (cellDateValue === startDateMonth) {
+              isMonthInRange = true;
+            }
+          } else if (cellDateValue >= startDateMonth && cellDateValue <= endDateMonth) {
+            isMonthInRange = true;
+            if (cellDateValue === startDateMonth) {
+              isFirstMonthInRange = true;
+            } else if (cellDateValue === endDateMonth) {
+              isLastMonthInRange = true;
+            }
+          }
+        } else if (!isPeriod && valueType === "date" && startDateMonth !== void 0) {
+          if (cellDateValue === startDateMonth) {
+            isMonthInRange = true;
+          }
+        } else {
+          isMonthInRange = isMonthSelected;
+        }
+        return /* @__PURE__ */ jsxs6(
+          "button",
+          {
+            type: "button",
+            className: classNames2(button2, cell, month, classes?.cell, classes?.month),
+            onClick: openMonthView(cellDate),
+            children: [
+              isMonthInRange && /* @__PURE__ */ jsx13(
+                "span",
                 {
-                  variant: "subtitle1",
-                  className: classNames2(cellData, classes?.cellData),
-                  children: `${index + 1}`
+                  className: classNames2(
+                    monthCellSelection,
+                    classes?.monthCellSelection,
+                    isFirstMonthInRange && monthCellSelectionFirst,
+                    isFirstMonthInRange && classes?.monthCellSelectionFirst,
+                    isLastMonthInRange && monthCellSelectionLast,
+                    isLastMonthInRange && classes?.monthCellSelectionLast
+                  )
                 }
-              )
+              ),
+              /* @__PURE__ */ jsx13(Typography, { variant: "subtitle1", className: classNames2(cellData, classes?.cellData), children: cellDate.format("MMMM") })
             ]
           },
           `cell-${index}`
         );
-      })
-    ] }) })
+      }) }),
+      viewType === "month" && /* @__PURE__ */ jsxs6(Fragment2, { children: [
+        [...Array(emptyCellsCount)].map((__, index) => /* @__PURE__ */ jsx13("div", { className: classNames2(cell, classes?.cell) }, `empty-cell-${index}`)),
+        [...Array(daysInMonth)].map((__, index) => {
+          const cellDate = currentDate.add(index, "d").valueOf();
+          return /* @__PURE__ */ jsxs6(
+            "button",
+            {
+              type: "button",
+              className: classNames2(button2, cell, classes?.cell),
+              onClick: setDate(cellDate),
+              children: [
+                (cellDate === startDate || cellDate === endDate) && /* @__PURE__ */ jsx13("span", { className: classNames2(cellCircle, classes?.cellCircle) }),
+                startDate !== void 0 && endDate !== void 0 && cellDate >= startDate && cellDate <= endDate && /* @__PURE__ */ jsx13(
+                  "span",
+                  {
+                    className: classNames2(
+                      cellSelection,
+                      classes?.cellSelection,
+                      cellDate === startDate && cellSelectionFirst,
+                      cellDate === startDate && classes?.cellSelectionFirst,
+                      cellDate === endDate && cellSelectionLast,
+                      cellDate === endDate && classes?.cellSelectionLast
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx13(
+                  Typography,
+                  {
+                    variant: "subtitle1",
+                    className: classNames2(cellData, classes?.cellData),
+                    children: `${index + 1}`
+                  }
+                )
+              ]
+            },
+            `cell-${index}`
+          );
+        })
+      ] })
+    ] })
   ] });
 }
 
@@ -1137,6 +1341,8 @@ import { jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
 function DateTime(props) {
   const {
     variant = "filled",
+    isPeriod = false,
+    valueType = "date",
     componentSize = "medium",
     fullWidth: fullWidth2,
     placeholder,
@@ -1148,10 +1354,19 @@ function DateTime(props) {
     ref,
     ...inputProps
   } = props;
-  const [stateValues, setStateValues] = useState5(defaultValues);
+  const [stateValues, setStateValues] = useState5(
+    values !== void 0 ? values : defaultValues
+  );
+  useEffect4(() => {
+    if (values !== void 0) {
+      setStateValues(values);
+    }
+  }, [values]);
   useEffect4(() => {
-    setStateValues(values);
-  }, values);
+    if (values === void 0 && defaultValues !== void 0) {
+      setStateValues(defaultValues);
+    }
+  }, [defaultValues, values]);
   const inputRef = useRef3(null);
   const popoverTargetRef = useRef3(null);
   const inputClickHandler = useCallback4(
@@ -1162,8 +1377,9 @@ function DateTime(props) {
     [popoverTargetRef]
   );
   const changeDates = (newStartDate, newEndDate) => {
-    setStateValues([newStartDate, newEndDate]);
-    onValueChange?.([newStartDate, newEndDate]);
+    const newValues = isPeriod ? [newStartDate, newEndDate] : [newStartDate];
+    setStateValues(newValues);
+    onValueChange?.(newValues);
   };
   return /* @__PURE__ */ jsxs7(
     "div",
@@ -1185,7 +1401,9 @@ function DateTime(props) {
             className: classnames7(input3, classes?.input),
             placeholder,
             ...inputProps,
-            value: !!stateValues?.[0] ? `${dayjs2(stateValues[0]).format("DD.MM.YYYY")}` + (stateValues[1] ? ` - ${dayjs2(stateValues[1]).format("DD.MM.YYYY")}` : "") : "",
+            value: stateValues?.[0] ? isPeriod && stateValues[1] ? `${dayjs2(stateValues[0]).format(valueType === "year" ? "YYYY" : "DD.MM.YYYY")} - ${dayjs2(
+              stateValues[1]
+            ).format(valueType === "year" ? "YYYY" : "DD.MM.YYYY")}` : `${dayjs2(stateValues[0]).format(valueType === "year" ? "YYYY" : "DD.MM.YYYY")}` : "",
             onChange: () => {
             },
             onClick: inputClickHandler
@@ -1203,6 +1421,8 @@ function DateTime(props) {
               {
                 classes,
                 componentSize,
+                isPeriod,
+                valueType,
                 initStartDate: stateValues?.[0],
                 initEndDate: stateValues?.[1],
                 changeDates,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nntc-ui",
-  "version": "0.0.66",
+  "version": "0.0.67",
   "author": "NNTC",
   "description": "React UI-kit for NNTC",
   "type": "module",