@snack-uikit/calendar - npm Package Compare versions

Comparing version 0.5.1 to 0.6.0

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+# 0.6.0 (2023-12-14)
+
+
+### BREAKING CHANGES
+
+
+* **FF-3729:** replace enum with unions ([910db4a](https://github.com/cloud-ru-tech/snack-uikit/commit/910db4aa8231ccbc58e538e5c5c1f461b1dec275))
+
+
+
+
 ## 0.5.1 (2023-12-06)
@@ -138,3 +149,4 @@
 
-**Note:** Version bump only for package @snack-uikit/calendar
+### Only dependencies have been changed
+* [@snack-uikit/utils@3.2.0](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/-/blob/master/packages/utils/CHANGELOG.md)
 
@@ -141,0 +153,0 @@

dist/components/Calendar/Calendar.d.ts

 import { CSSProperties, RefCallback } from 'react';
 import { WithSupportProps } from '@snack-uikit/utils';
-import { CalendarMode, Size, ViewMode } from '../../constants';
-import { BuildCellPropsFunction, FocusDirection, Range } from '../../types';
+import { CALENDAR_MODE } from '../../constants';
+import { BuildCellPropsFunction, FocusDirection, Range, Size } from '../../types';
 type CommonCalendarProps = {
     /**
      * Размер
-     * @default Calendar.sizes.M
+     * @default m
      */
@@ -19,5 +19,5 @@ size?: Size;
      * <br> `ViewMode`:
-     * <br>  - `Calendar.viewMode.Month` отображение месяца, каждая ячейка - 1 день
-     * <br>  - `Calendar.viewMode.Year` отображение года, каждая ячейка - 1 месяц
-     * <br>  - `Calendar.viewMode.Decade` отображение декады, каждая ячейка - 1 год
+     * <br>  - `month` отображение месяца, каждая ячейка - 1 день
+     * <br>  - `year` отображение года, каждая ячейка - 1 месяц
+     * <br>  - `decade` отображение декады, каждая ячейка - 1 год
      * <br><br> Колбек должен возвращать объект с полями, отвечающими за задизаленность и подкраску ячейки.
@@ -50,4 +50,4 @@ * @type (date: Date, viewMode: ViewMode) => { isDisabled?: boolean; isHoliday?: boolean };
 type DateCalendarProps = CommonCalendarProps & {
-    /** Режим работы календаря: <br> - `Calendar.modes.Date` - режим выбора даты */
-    mode: CalendarMode.Date;
+    /** Режим работы календаря: <br> - `date` - режим выбора даты */
+    mode: typeof CALENDAR_MODE.Date;
     /** Выбранное значение.<br> - в режиме date тип `Date` */
@@ -61,4 +61,4 @@ value?: Date;
 type RangeCalendarProps = CommonCalendarProps & {
-    /** <br> - `Calendar.modes.Date` - режим выбора периода */
-    mode: CalendarMode.Range;
+    /** <br> - `range` - режим выбора периода */
+    mode: typeof CALENDAR_MODE.Range;
     /** <br> - в режиме range тип `Range` (`[Date, Date]`) */
@@ -73,7 +73,2 @@ value?: Range;
 export declare function Calendar(props: CalendarProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace Calendar {
-    var sizes: typeof Size;
-    var modes: typeof CalendarMode;
-    var viewMode: typeof ViewMode;
-}
 export {};

dist/components/Calendar/Calendar.js

@@ -14,3 +14,3 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { useCallback } from 'react';
-import { CalendarMode, Size, ViewMode } from '../../constants';
+import { CALENDAR_MODE } from '../../constants';
 import { CalendarBase } from '../../helperComponents/CalendarBase';
@@ -21,3 +21,3 @@ import { getNormalizedDefaultValue, getNormalizedValue } from './utils';
     const changeValueHandler = useCallback((value) => {
-        if (mode === CalendarMode.Date) {
+        if (mode === CALENDAR_MODE.Date) {
             const [date] = value;
@@ -31,4 +31,1 @@ onChangeValue === null || onChangeValue === void 0 ? void 0 : onChangeValue(date);
 }
-Calendar.sizes = Size;
-Calendar.modes = CalendarMode;
-Calendar.viewMode = ViewMode;

dist/components/Calendar/utils.js

@@ -1,6 +0,6 @@
-import { CalendarMode } from '../../constants';
+import { CALENDAR_MODE } from '../../constants';
 export const getNormalizedValue = ({ value, mode }) => {
     if (!value)
         return value;
-    if (mode === CalendarMode.Date)
+    if (mode === CALENDAR_MODE.Date)
         return [value, value];
@@ -12,5 +12,5 @@ return value;
         return defaultValue;
-    if (mode === CalendarMode.Date)
+    if (mode === CALENDAR_MODE.Date)
         return [defaultValue, defaultValue];
     return defaultValue;
 };

dist/constants.d.ts

@@ -1,22 +0,22 @@
-export declare enum ViewMode {
-    Month = "month",
-    Year = "year",
-    Decade = "decade"
-}
-export declare enum CalendarMode {
-    Date = "date",
-    Range = "range"
-}
-export declare enum InRangePosition {
-    Out = "out",
-    Start = "start",
-    In = "in",
-    End = "end",
-    StartEnd = "start-end"
-}
-export declare enum Size {
-    S = "s",
-    M = "m",
-    L = "l"
-}
+export declare const VIEW_MODE: {
+    readonly Month: "month";
+    readonly Year: "year";
+    readonly Decade: "decade";
+};
+export declare const CALENDAR_MODE: {
+    readonly Date: "date";
+    readonly Range: "range";
+};
+export declare const IN_RANGE_POSITION: {
+    readonly Out: "out";
+    readonly Start: "start";
+    readonly In: "in";
+    readonly End: "end";
+    readonly StartEnd: "start-end";
+};
+export declare const SIZE: {
+    readonly S: "s";
+    readonly M: "m";
+    readonly L: "l";
+};
 export declare const GRID_SIZE: {
@@ -23,0 +23,0 @@ readonly month: {

dist/constants.js

@@ -1,31 +0,27 @@
-export var ViewMode;
-(function (ViewMode) {
-    ViewMode["Month"] = "month";
-    ViewMode["Year"] = "year";
-    ViewMode["Decade"] = "decade";
-})(ViewMode || (ViewMode = {}));
-export var CalendarMode;
-(function (CalendarMode) {
-    CalendarMode["Date"] = "date";
-    CalendarMode["Range"] = "range";
-})(CalendarMode || (CalendarMode = {}));
-export var InRangePosition;
-(function (InRangePosition) {
-    InRangePosition["Out"] = "out";
-    InRangePosition["Start"] = "start";
-    InRangePosition["In"] = "in";
-    InRangePosition["End"] = "end";
-    InRangePosition["StartEnd"] = "start-end";
-})(InRangePosition || (InRangePosition = {}));
-export var Size;
-(function (Size) {
-    Size["S"] = "s";
-    Size["M"] = "m";
-    Size["L"] = "l";
-})(Size || (Size = {}));
+export const VIEW_MODE = {
+    Month: 'month',
+    Year: 'year',
+    Decade: 'decade',
+};
+export const CALENDAR_MODE = {
+    Date: 'date',
+    Range: 'range',
+};
+export const IN_RANGE_POSITION = {
+    Out: 'out',
+    Start: 'start',
+    In: 'in',
+    End: 'end',
+    StartEnd: 'start-end',
+};
+export const SIZE = {
+    S: 's',
+    M: 'm',
+    L: 'l',
+};
 export const GRID_SIZE = {
-    [ViewMode.Month]: { rows: 6, columns: 7 },
-    [ViewMode.Year]: { rows: 4, columns: 3 },
-    [ViewMode.Decade]: { rows: 4, columns: 3 },
+    [VIEW_MODE.Month]: { rows: 6, columns: 7 },
+    [VIEW_MODE.Year]: { rows: 4, columns: 3 },
+    [VIEW_MODE.Decade]: { rows: 4, columns: 3 },
 };
 export const AUTOFOCUS = 'autofocus';

dist/helperComponents/CalendarBase/CalendarBase.d.ts

 import { CSSProperties, RefCallback } from 'react';
 import { WithSupportProps } from '@snack-uikit/utils';
-import { CalendarMode, Size } from '../../constants';
-import { BuildCellPropsFunction, FocusDirection, Range } from '../../types';
+import { BuildCellPropsFunction, CalendarMode, FocusDirection, Range, Size } from '../../types';
 export type CalendarBaseProps = WithSupportProps<{
@@ -6,0 +5,0 @@ mode: CalendarMode;

dist/helperComponents/CalendarBase/CalendarBase.js

@@ -17,3 +17,3 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { extractSupportProps } from '@snack-uikit/utils';
-import { AUTOFOCUS, Size, ViewMode } from '../../constants';
+import { AUTOFOCUS, SIZE, VIEW_MODE } from '../../constants';
 import { getEndOfTheDay, getLocale, getTestIdBuilder, sortDates } from '../../utils';
@@ -27,9 +27,9 @@ import { CalendarBody } from '../CalendarBody';
 const CONTAINER_SIZE_MAP = {
-    [Size.S]: styles.calendarSizeS,
-    [Size.M]: styles.calendarSizeM,
-    [Size.L]: styles.calendarSizeL,
+    [SIZE.S]: styles.calendarSizeS,
+    [SIZE.M]: styles.calendarSizeM,
+    [SIZE.L]: styles.calendarSizeL,
 };
 export function CalendarBase(_a) {
-    var { className, mode, size = Size.M, autofocus, fitToContainer = true, value: valueProp, defaultValue, onChangeValue, today: todayProp = new Date(), showHolidays = false, style, locale: localeProp, onFocusLeave, buildCellProps, 'data-test-id': testId, navigationStartRef } = _a, rest = __rest(_a, ["className", "mode", "size", "autofocus", "fitToContainer", "value", "defaultValue", "onChangeValue", "today", "showHolidays", "style", "locale", "onFocusLeave", "buildCellProps", 'data-test-id', "navigationStartRef"]);
-    const [viewMode, setViewMode] = useState(ViewMode.Month);
+    var { className, mode, size = SIZE.M, autofocus, fitToContainer = true, value: valueProp, defaultValue, onChangeValue, today: todayProp = new Date(), showHolidays = false, style, locale: localeProp, onFocusLeave, buildCellProps, 'data-test-id': testId, navigationStartRef } = _a, rest = __rest(_a, ["className", "mode", "size", "autofocus", "fitToContainer", "value", "defaultValue", "onChangeValue", "today", "showHolidays", "style", "locale", "onFocusLeave", "buildCellProps", 'data-test-id', "navigationStartRef"]);
+    const [viewMode, setViewMode] = useState(VIEW_MODE.Month);
     const [viewShift, setViewShift] = useState(0);
@@ -36,0 +36,0 @@ const [value, setValueState] = useUncontrolledProp(valueProp, defaultValue, onChangeValue);

dist/helperComponents/CalendarBase/hooks.d.ts

@@ -1,2 +0,2 @@
-import { ViewMode } from '../../constants';
+import { ViewMode } from '../../types';
 export declare function useViewDate(referenceDate: Date, viewMode: ViewMode, viewShift: number): Date;

dist/helperComponents/CalendarBase/hooks.js

@@ -1,10 +0,10 @@
-import { ViewMode } from '../../constants';
+import { VIEW_MODE } from '../../constants';
 export function useViewDate(referenceDate, viewMode, viewShift) {
     switch (viewMode) {
-        case ViewMode.Decade:
+        case VIEW_MODE.Decade:
             const decadeFirstYear = Math.floor(referenceDate.getFullYear() / 10) * 10;
             return new Date(decadeFirstYear + viewShift * 10, 1, 1);
-        case ViewMode.Year:
+        case VIEW_MODE.Year:
             return new Date(referenceDate.getFullYear() + viewShift, 1, 1);
-        case ViewMode.Month:
+        case VIEW_MODE.Month:
         default:
@@ -11,0 +11,0 @@ return new Date(referenceDate.getFullYear(), referenceDate.getMonth() + viewShift, 1);

dist/helperComponents/CalendarBody/CalendarBody.js

 import { jsx as _jsx } from "react/jsx-runtime";
 import { useContext } from 'react';
-import { ViewMode } from '../../constants';
+import { VIEW_MODE } from '../../constants';
 import { CalendarContext } from '../CalendarContext';
@@ -11,7 +11,7 @@ import { DecadeView } from '../DecadeView';
     switch (viewMode) {
-        case ViewMode.Decade:
+        case VIEW_MODE.Decade:
             return _jsx(DecadeView, {});
-        case ViewMode.Year:
+        case VIEW_MODE.Year:
             return _jsx(YearView, {});
-        case ViewMode.Month:
+        case VIEW_MODE.Month:
         default:
@@ -18,0 +18,0 @@ return _jsx(MonthView, {});

dist/helperComponents/CalendarContext/CalendarContext.d.ts

 import { MutableRefObject, RefCallback } from 'react';
-import { CalendarMode, Size, ViewMode } from '../../constants';
-import { BuildCellPropsFunction, FocusDirection, Range } from '../../types';
+import { BuildCellPropsFunction, CalendarMode, FocusDirection, Range, Size, ViewMode } from '../../types';
 export type CalendarContextType = {
@@ -5,0 +4,0 @@ size: Size;

dist/helperComponents/CalendarContext/CalendarContext.js

 import { createContext } from 'react';
-import { CalendarMode, Size, ViewMode } from '../../constants';
+import { CALENDAR_MODE, SIZE, VIEW_MODE } from '../../constants';
 import { getLocale } from '../../utils';
@@ -9,8 +9,8 @@ const stub = () => {
     locale: getLocale(),
-    size: Size.M,
+    size: SIZE.M,
     today: new Date(),
     viewDate: new Date(),
     referenceDate: new Date(),
-    mode: CalendarMode.Date,
-    viewMode: ViewMode.Month,
+    mode: CALENDAR_MODE.Date,
+    viewMode: VIEW_MODE.Month,
     viewShift: 0,
@@ -17,0 +17,0 @@ setFocus: stub,

dist/helperComponents/CalendarNavigation/CalendarNavigation.js

 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useContext } from 'react';
 import { ChevronDownSVG, ChevronUpSVG } from '@snack-uikit/icons';
-import { GRID_SIZE, Size, ViewMode } from '../../constants';
+import { GRID_SIZE, SIZE, VIEW_MODE } from '../../constants';
 import { Button } from '../Button';
@@ -13,16 +13,16 @@ import { CalendarContext } from '../CalendarContext';
 const VIEW_MODE_MAP = {
-    [ViewMode.Month]: ViewMode.Year,
-    [ViewMode.Year]: ViewMode.Decade,
-    [ViewMode.Decade]: ViewMode.Decade,
+    [VIEW_MODE.Month]: VIEW_MODE.Year,
+    [VIEW_MODE.Year]: VIEW_MODE.Decade,
+    [VIEW_MODE.Decade]: VIEW_MODE.Decade,
 };
 const ICONS = {
     UP: {
-        [Size.S]: _jsx(ChevronUpSVG, { size: 16 }),
-        [Size.M]: _jsx(ChevronUpSVG, {}),
-        [Size.L]: _jsx(ChevronUpSVG, {}),
+        [SIZE.S]: _jsx(ChevronUpSVG, { size: 16 }),
+        [SIZE.M]: _jsx(ChevronUpSVG, {}),
+        [SIZE.L]: _jsx(ChevronUpSVG, {}),
     },
     DOWN: {
-        [Size.S]: _jsx(ChevronDownSVG, { size: 16 }),
-        [Size.M]: _jsx(ChevronDownSVG, {}),
-        [Size.L]: _jsx(ChevronDownSVG, {}),
+        [SIZE.S]: _jsx(ChevronDownSVG, { size: 16 }),
+        [SIZE.M]: _jsx(ChevronDownSVG, {}),
+        [SIZE.L]: _jsx(ChevronDownSVG, {}),
     },
@@ -33,6 +33,6 @@ };
     const periodName = usePeriodName();
-    const levelButtonDisabled = viewMode === ViewMode.Decade;
+    const levelButtonDisabled = viewMode === VIEW_MODE.Decade;
     const isArrowButtonFocused = focus && [NEXT_PERIOD_BUTTON_FOCUS_NAME, PREV_PERIOD_BUTTON_FOCUS_NAME].includes(focus);
     return (_jsxs("div", Object.assign({ className: styles.wrapper }, { children: [_jsx(Button, { disabled: levelButtonDisabled, onClick: () => {
-                    if (viewMode === ViewMode.Year) {
+                    if (viewMode === VIEW_MODE.Year) {
                         setFocus(PREV_PERIOD_BUTTON_FOCUS_NAME);
@@ -42,8 +42,8 @@ }
                     setViewMode(VIEW_MODE_MAP[viewMode]);
-                }, label: periodName, "data-test-id": getTestId('period-level'), focusName: LEVEL_BUTTON_FOCUS_NAME, tabIndex: isArrowButtonFocused ? -1 : 0, icon: viewMode !== ViewMode.Decade ? ICONS.DOWN[size] : undefined, onRightArrowKeyDown: () => setFocus(PREV_PERIOD_BUTTON_FOCUS_NAME), onDownArrowKeyDown: () => { var _a; return setFocus(stringifyAddress((_a = firstNotDisableCell === null || firstNotDisableCell === void 0 ? void 0 : firstNotDisableCell.current) !== null && _a !== void 0 ? _a : [0, 0])); }, useNavigationStartRef: true }), _jsxs("div", { children: [_jsx(Button, { onClick: () => setViewShift(viewShift - 1), "data-test-id": getTestId('period-prev'), focusName: PREV_PERIOD_BUTTON_FOCUS_NAME, tabIndex: focus === PREV_PERIOD_BUTTON_FOCUS_NAME || (levelButtonDisabled && focus !== NEXT_PERIOD_BUTTON_FOCUS_NAME)
+                }, label: periodName, "data-test-id": getTestId('period-level'), focusName: LEVEL_BUTTON_FOCUS_NAME, tabIndex: isArrowButtonFocused ? -1 : 0, icon: viewMode !== VIEW_MODE.Decade ? ICONS.DOWN[size] : undefined, onRightArrowKeyDown: () => setFocus(PREV_PERIOD_BUTTON_FOCUS_NAME), onDownArrowKeyDown: () => { var _a; return setFocus(stringifyAddress((_a = firstNotDisableCell === null || firstNotDisableCell === void 0 ? void 0 : firstNotDisableCell.current) !== null && _a !== void 0 ? _a : [0, 0])); }, useNavigationStartRef: true }), _jsxs("div", { children: [_jsx(Button, { onClick: () => setViewShift(viewShift - 1), "data-test-id": getTestId('period-prev'), focusName: PREV_PERIOD_BUTTON_FOCUS_NAME, tabIndex: focus === PREV_PERIOD_BUTTON_FOCUS_NAME || (levelButtonDisabled && focus !== NEXT_PERIOD_BUTTON_FOCUS_NAME)
                             ? 0
                             : -1, icon: ICONS.UP[size], onRightArrowKeyDown: () => setFocus(NEXT_PERIOD_BUTTON_FOCUS_NAME), onLeftArrowKeyDown: () => setFocus(LEVEL_BUTTON_FOCUS_NAME), onDownArrowKeyDown: () => {
-                            const rightGap = viewMode === ViewMode.Month ? 2 : 1;
+                            const rightGap = viewMode === VIEW_MODE.Month ? 2 : 1;
                             setFocus(stringifyAddress([0, GRID_SIZE[viewMode].columns - rightGap]));
                         } }), _jsx(Button, { onClick: () => setViewShift(viewShift + 1), "data-test-id": getTestId('period-next'), focusName: NEXT_PERIOD_BUTTON_FOCUS_NAME, tabIndex: focus === NEXT_PERIOD_BUTTON_FOCUS_NAME ? 0 : -1, icon: ICONS.DOWN[size], onLeftArrowKeyDown: () => setFocus(PREV_PERIOD_BUTTON_FOCUS_NAME), onDownArrowKeyDown: () => setFocus(stringifyAddress([0, GRID_SIZE[viewMode].columns - 1])) })] })] })));
 }

dist/helperComponents/CalendarNavigation/hooks.js

 import { useContext } from 'react';
-import { ViewMode } from '../../constants';
+import { VIEW_MODE } from '../../constants';
 import { getMonthName } from '../../utils';
@@ -8,8 +8,8 @@ import { CalendarContext } from '../CalendarContext';
     switch (viewMode) {
-        case ViewMode.Month:
+        case VIEW_MODE.Month:
             const year = viewDate.getFullYear();
             return `${getMonthName(viewDate, locale)} ${year}`;
-        case ViewMode.Year:
+        case VIEW_MODE.Year:
             return viewDate.getFullYear().toString();
-        case ViewMode.Decade:
+        case VIEW_MODE.Decade:
             const decadeStart = viewDate.getFullYear();
@@ -16,0 +16,0 @@ return `${decadeStart}-${decadeStart + 9}`;

dist/helperComponents/CalendarNavigation/utils.d.ts

@@ -1,2 +0,2 @@
-import { ViewMode } from '../../constants';
+import { ViewMode } from '../../types';
 export declare const getShift: (referenceDate: Date, viewDate: Date, currentViewLevel: ViewMode) => number;

dist/helperComponents/CalendarNavigation/utils.js

@@ -1,10 +0,10 @@
-import { ViewMode } from '../../constants';
+import { VIEW_MODE } from '../../constants';
 import { getDecadeShift, getYearShift } from '../../utils';
 export const getShift = (referenceDate, viewDate, currentViewLevel) => {
     switch (currentViewLevel) {
-        case ViewMode.Month:
+        case VIEW_MODE.Month:
             return getYearShift(referenceDate, viewDate);
-        case ViewMode.Year:
+        case VIEW_MODE.Year:
             return getDecadeShift(referenceDate, viewDate);
-        case ViewMode.Decade:
+        case VIEW_MODE.Decade:
         default:
@@ -11,0 +11,0 @@ return 0;

dist/helperComponents/ColumnLabels/ColumnLabels.js

 import { jsx as _jsx } from "react/jsx-runtime";
 import cn from 'classnames';
 import { useContext, useMemo } from 'react';
-import { ViewMode } from '../../constants';
+import { VIEW_MODE } from '../../constants';
 import { CalendarContext } from '../CalendarContext';
@@ -12,3 +12,3 @@ import { ColumnLabel } from '../ColumnLabel';
     const labels = useMemo(() => getWeekLabels(locale), [locale]);
-    if (viewMode === ViewMode.Month) {
+    if (viewMode === VIEW_MODE.Month) {
         return (_jsx("div", Object.assign({ className: cn(styles.row, className), "data-size": size }, { children: labels.map(label => (_jsx(ColumnLabel, { label: label }, label))) })));
@@ -15,0 +15,0 @@ }

dist/helperComponents/DecadeView/DecadeView.js

 import { jsx as _jsx } from "react/jsx-runtime";
 import { useContext } from 'react';
-import { ViewMode } from '../../constants';
+import { VIEW_MODE } from '../../constants';
 import { useGrid } from '../../hooks';
@@ -18,3 +18,3 @@ import { getYearLabel, getYearShift, isTheSameDecade, isTheSameYear } from '../../utils';
             setViewShift(getYearShift(referenceDate, date));
-            setViewMode(ViewMode.Year);
+            setViewMode(VIEW_MODE.Year);
         },
@@ -21,0 +21,0 @@ onPreselect(date) {

dist/helperComponents/DecadeView/utils.js

@@ -1,2 +0,2 @@
-import { GRID_SIZE, ViewMode } from '../../constants';
+import { GRID_SIZE, VIEW_MODE } from '../../constants';
 export const buildDecadeGrid = (date) => {
@@ -6,3 +6,3 @@ const result = [];
     let shift = -1;
-    const { rows, columns } = GRID_SIZE[ViewMode.Decade];
+    const { rows, columns } = GRID_SIZE[VIEW_MODE.Decade];
     for (let i = 0; i < rows; i++) {
@@ -9,0 +9,0 @@ const row = [];

dist/helperComponents/Item/Item.js

 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import cn from 'classnames';
 import { useContext, useLayoutEffect, useRef } from 'react';
-import { AUTOFOCUS, InRangePosition } from '../../constants';
+import { AUTOFOCUS, IN_RANGE_POSITION } from '../../constants';
 import { CalendarContext } from '../CalendarContext';
@@ -35,3 +35,3 @@ import { useKeyboardFocus } from './hooks';
     };
-    const isInRange = inRangePosition !== InRangePosition.Out;
+    const isInRange = inRangePosition !== IN_RANGE_POSITION.Out;
     date.toLocaleString(locale, { weekday: 'short' });
@@ -38,0 +38,0 @@ const handleSelect = (date) => {

dist/helperComponents/MonthView/MonthView.js

 import { jsx as _jsx } from "react/jsx-runtime";
 import { useContext } from 'react';
-import { CalendarMode } from '../../constants';
+import { CALENDAR_MODE } from '../../constants';
 import { useGrid } from '../../hooks';
@@ -17,3 +17,3 @@ import { getDateLabel, isTheSameDate, isTheSameMonth } from '../../utils';
         onSelect(date) {
-            if (mode === CalendarMode.Range) {
+            if (mode === CALENDAR_MODE.Range) {
                 preselectedRange ? completePreselect(date) : startPreselect(date);
@@ -20,0 +20,0 @@ return;

dist/helperComponents/MonthView/utils.js

@@ -1,2 +0,2 @@
-import { GRID_SIZE, ViewMode } from '../../constants';
+import { GRID_SIZE, VIEW_MODE } from '../../constants';
 import { getStartOfWeek } from '../../utils';
@@ -9,3 +9,3 @@ import { WEEK_STARTS_WITH_MONDAY, WEEK_STARTS_WITH_SUNDAY } from './constants';
     let currentDate = new Date(date.getFullYear(), date.getMonth(), 1 - startGap);
-    const { rows } = GRID_SIZE[ViewMode.Month];
+    const { rows } = GRID_SIZE[VIEW_MODE.Month];
     for (let i = 0; i < rows; i++) {
@@ -12,0 +12,0 @@ const week = [];

dist/helperComponents/YearView/utils.js

@@ -1,2 +0,2 @@
-import { GRID_SIZE, ViewMode } from '../../constants';
+import { GRID_SIZE, VIEW_MODE } from '../../constants';
 export const buildYearGrid = (date) => {
@@ -6,3 +6,3 @@ const result = [];
     let month = 0;
-    const { rows, columns } = GRID_SIZE[ViewMode.Year];
+    const { rows, columns } = GRID_SIZE[VIEW_MODE.Year];
     for (let i = 0; i < rows; i++) {
@@ -9,0 +9,0 @@ const row = [];

dist/helperComponents/YearView/YearView.js

 import { jsx as _jsx } from "react/jsx-runtime";
 import { useContext } from 'react';
-import { AUTOFOCUS, ViewMode } from '../../constants';
+import { AUTOFOCUS, VIEW_MODE } from '../../constants';
 import { useGrid } from '../../hooks';
@@ -19,3 +19,3 @@ import { getMonthName, getMonthShift, isTheSameMonth, isTheSameYear } from '../../utils';
             setViewShift(getMonthShift(referenceDate, date));
-            setViewMode(ViewMode.Month);
+            setViewMode(VIEW_MODE.Month);
         },
@@ -22,0 +22,0 @@ onPreselect(date) {

dist/types.d.ts

@@ -1,2 +0,7 @@
-import { InRangePosition, ViewMode } from './constants';
+import { ValueOf } from '@snack-uikit/utils';
+import { CALENDAR_MODE, IN_RANGE_POSITION, SIZE, VIEW_MODE } from './constants';
+export type InRangePosition = ValueOf<typeof IN_RANGE_POSITION>;
+export type ViewMode = ValueOf<typeof VIEW_MODE>;
+export type Size = ValueOf<typeof SIZE>;
+export type CalendarMode = ValueOf<typeof CALENDAR_MODE>;
 export type Range = [Date, Date];
@@ -3,0 +8,0 @@ export type BaseGridItem = {

dist/utils.d.ts

@@ -1,3 +0,2 @@
-import { InRangePosition, ViewMode } from './constants';
-import { Range } from './types';
+import { InRangePosition, Range, ViewMode } from './types';
 export declare const isTheSameDecade: (date1: Date, date2: Date) => boolean;
@@ -4,0 +3,0 @@ export declare const isTheSameYear: (date1: Date, date2: Date) => boolean;

dist/utils.js

 import { getWeekStartByLocale } from 'weekstart';
-import { InRangePosition, ViewMode } from './constants';
+import { IN_RANGE_POSITION, VIEW_MODE } from './constants';
 export const isTheSameDecade = (date1, date2) => Math.floor(date1.getFullYear() / 10) === Math.floor(date2.getFullYear() / 10);
@@ -23,7 +23,7 @@ export const isTheSameYear = (date1, date2) => date1.getFullYear() === date2.getFullYear();
     switch (viewMode) {
-        case ViewMode.Month:
+        case VIEW_MODE.Month:
             return isTheSameDate(date1, date2);
-        case ViewMode.Year:
+        case VIEW_MODE.Year:
             return isTheSameMonth(date1, date2);
-        case ViewMode.Decade:
+        case VIEW_MODE.Decade:
             return isTheSameYear(date1, date2);
@@ -37,3 +37,3 @@ default:
     if (!range) {
-        return InRangePosition.Out;
+        return IN_RANGE_POSITION.Out;
     }
@@ -44,12 +44,12 @@ const [startDate, endDate] = sortDates(range);
     if (isStart && isEnd) {
-        return InRangePosition.StartEnd;
+        return IN_RANGE_POSITION.StartEnd;
     }
     if (isStart) {
-        return InRangePosition.Start;
+        return IN_RANGE_POSITION.Start;
     }
     if (isEnd) {
-        return InRangePosition.End;
+        return IN_RANGE_POSITION.End;
     }
     const [start, end] = range.map(date => date.valueOf()).sort();
-    return date.valueOf() >= start && date.valueOf() <= end ? InRangePosition.In : InRangePosition.Out;
+    return date.valueOf() >= start && date.valueOf() <= end ? IN_RANGE_POSITION.In : IN_RANGE_POSITION.Out;
 };
@@ -56,0 +56,0 @@ export const getEndOfTheDay = (date) => new Date(new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1).valueOf() - 1);

package.json

@@ -7,3 +7,3 @@ {
   "title": "Calendar",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "sideEffects": [
@@ -37,3 +37,3 @@ "*.css",
     "@snack-uikit/icons": "0.19.0",
-    "@snack-uikit/utils": "3.1.0",
+    "@snack-uikit/utils": "3.2.0",
     "classnames": "2.3.2",
@@ -43,3 +43,3 @@ "uncontrollable": "8.0.2",
   },
-  "gitHead": "76a159dde7baccf49dc7b11e1fd7abc31424b42f"
+  "gitHead": "bd39c5e674f3b91b0e2487782a04b15034cf3d8b"
 }

README.md

@@ -14,3 +14,3 @@ # Calendar
 <Calendar
-  mode={Calendar.modes.Date}
+  mode='date'
   onChangeValue={(selectedDate: Date) => {
@@ -22,3 +22,3 @@ // do something
 <Calendar
-  mode={Calendar.modes.Range}
+  mode='range'
   onChangeValue={(selectedRange: [Date, Date]) => {
@@ -36,7 +36,7 @@ // do something
 |------|------|---------------|-------------|
-| mode* | enum CalendarMode: `"date"`, `"range"` | - | Режим работы календаря: <br> - `Calendar.modes.Date` - режим выбора даты <br> - `Calendar.modes.Date` - режим выбора периода |
-| size | enum Size: `"s"`, `"m"`, `"l"` | Calendar.sizes.M | Размер |
+| mode* | "date" \| "range" | - | Режим работы календаря: <br> - `date` - режим выбора даты <br> - `range` - режим выбора периода |
+| size | enum Size: `"s"`, `"m"`, `"l"` | m | Размер |
 | today | `number \| Date` | - | Дата сегодняшнего дня |
 | showHolidays | `boolean` | - | Раскрашивает субботу и воскресенье |
-| buildCellProps | `(date: Date, viewMode: ViewMode) => { isDisabled?: boolean; isHoliday?: boolean };` | - | Колбек установки свойств ячейка календаря. Вызывается на построение каждой ячейки. Принимает два параметра: <br> `Date` - дата ячейки <br> `ViewMode`: <br>  - `Calendar.viewMode.Month` отображение месяца, каждая ячейка - 1 день <br>  - `Calendar.viewMode.Year` отображение года, каждая ячейка - 1 месяц <br>  - `Calendar.viewMode.Decade` отображение декады, каждая ячейка - 1 год <br><br> Колбек должен возвращать объект с полями, отвечающими за задизаленность и подкраску ячейки. |
+| buildCellProps | `(date: Date, viewMode: ViewMode) => { isDisabled?: boolean; isHoliday?: boolean };` | - | Колбек установки свойств ячейка календаря. Вызывается на построение каждой ячейки. Принимает два параметра: <br> `Date` - дата ячейки <br> `ViewMode`: <br>  - `month` отображение месяца, каждая ячейка - 1 день <br>  - `year` отображение года, каждая ячейка - 1 месяц <br>  - `decade` отображение декады, каждая ячейка - 1 год <br><br> Колбек должен возвращать объект с полями, отвечающими за задизаленность и подкраску ячейки. |
 | className | `string` | - | CSS-класс контейнера |
@@ -43,0 +43,0 @@ | fitToContainer | `boolean` | true | Отключает предустановленный размер, заставляя компонент подстраиваться к размеру контейнра: (width: 100%, height: 100%). |

src/components/Calendar/utils.ts

@@ -1,2 +0,2 @@
-import { CalendarMode } from '../../constants';
+import { CALENDAR_MODE } from '../../constants';
 import { Range } from '../../types';
@@ -7,3 +7,3 @@ import { CalendarProps } from './Calendar';
   if (!value) return value;
-  if (mode === CalendarMode.Date) return [value, value];
+  if (mode === CALENDAR_MODE.Date) return [value, value];
   return value;
@@ -14,4 +14,4 @@ };
   if (!defaultValue) return defaultValue;
-  if (mode === CalendarMode.Date) return [defaultValue, defaultValue];
+  if (mode === CALENDAR_MODE.Date) return [defaultValue, defaultValue];
   return defaultValue;
 };

src/constants.ts

@@ -1,32 +0,32 @@
-export enum ViewMode {
-  Month = 'month',
-  Year = 'year',
-  Decade = 'decade',
-}
+export const VIEW_MODE = {
+  Month: 'month',
+  Year: 'year',
+  Decade: 'decade',
+} as const;
 
-export enum CalendarMode {
-  Date = 'date',
-  Range = 'range',
-}
+export const CALENDAR_MODE = {
+  Date: 'date',
+  Range: 'range',
+} as const;
 
-export enum InRangePosition {
-  Out = 'out',
-  Start = 'start',
-  In = 'in',
-  End = 'end',
-  StartEnd = 'start-end',
-}
+export const IN_RANGE_POSITION = {
+  Out: 'out',
+  Start: 'start',
+  In: 'in',
+  End: 'end',
+  StartEnd: 'start-end',
+} as const;
 
-export enum Size {
-  S = 's',
-  M = 'm',
-  L = 'l',
-}
+export const SIZE = {
+  S: 's',
+  M: 'm',
+  L: 'l',
+} as const;
 
 export const GRID_SIZE = {
-  [ViewMode.Month]: { rows: 6, columns: 7 },
-  [ViewMode.Year]: { rows: 4, columns: 3 },
-  [ViewMode.Decade]: { rows: 4, columns: 3 },
+  [VIEW_MODE.Month]: { rows: 6, columns: 7 },
+  [VIEW_MODE.Year]: { rows: 4, columns: 3 },
+  [VIEW_MODE.Decade]: { rows: 4, columns: 3 },
 } as const;
 
 export const AUTOFOCUS = 'autofocus';

src/helperComponents/CalendarBase/hooks.ts

@@ -1,11 +0,12 @@
-import { ViewMode } from '../../constants';
+import { VIEW_MODE } from '../../constants';
+import { ViewMode } from '../../types';
 
 export function useViewDate(referenceDate: Date, viewMode: ViewMode, viewShift: number) {
   switch (viewMode) {
-    case ViewMode.Decade:
+    case VIEW_MODE.Decade:
       const decadeFirstYear = Math.floor(referenceDate.getFullYear() / 10) * 10;
       return new Date(decadeFirstYear + viewShift * 10, 1, 1);
-    case ViewMode.Year:
+    case VIEW_MODE.Year:
       return new Date(referenceDate.getFullYear() + viewShift, 1, 1);
-    case ViewMode.Month:
+    case VIEW_MODE.Month:
     default:
@@ -12,0 +13,0 @@ return new Date(referenceDate.getFullYear(), referenceDate.getMonth() + viewShift, 1);

src/helperComponents/CalendarNavigation/hooks.ts

 import { useContext } from 'react';
 
-import { ViewMode } from '../../constants';
+import { VIEW_MODE } from '../../constants';
 import { getMonthName } from '../../utils';
@@ -11,8 +11,8 @@ import { CalendarContext } from '../CalendarContext';
   switch (viewMode) {
-    case ViewMode.Month:
+    case VIEW_MODE.Month:
       const year = viewDate.getFullYear();
       return `${getMonthName(viewDate, locale)} ${year}`;
-    case ViewMode.Year:
+    case VIEW_MODE.Year:
       return viewDate.getFullYear().toString();
-    case ViewMode.Decade:
+    case VIEW_MODE.Decade:
       const decadeStart = viewDate.getFullYear();
@@ -19,0 +19,0 @@ return `${decadeStart}-${decadeStart + 9}`;

src/helperComponents/CalendarNavigation/utils.ts

@@ -1,2 +0,3 @@
-import { ViewMode } from '../../constants';
+import { VIEW_MODE } from '../../constants';
+import { ViewMode } from '../../types';
 import { getDecadeShift, getYearShift } from '../../utils';
@@ -6,7 +7,7 @@
   switch (currentViewLevel) {
-    case ViewMode.Month:
+    case VIEW_MODE.Month:
       return getYearShift(referenceDate, viewDate);
-    case ViewMode.Year:
+    case VIEW_MODE.Year:
       return getDecadeShift(referenceDate, viewDate);
-    case ViewMode.Decade:
+    case VIEW_MODE.Decade:
     default:
@@ -13,0 +14,0 @@ return 0;

src/helperComponents/DecadeView/utils.ts

@@ -1,2 +0,2 @@
-import { GRID_SIZE, ViewMode } from '../../constants';
+import { GRID_SIZE, VIEW_MODE } from '../../constants';
 import { BaseGrid, BaseGridItem } from '../../types';
@@ -8,3 +8,3 @@
   let shift = -1;
-  const { rows, columns } = GRID_SIZE[ViewMode.Decade];
+  const { rows, columns } = GRID_SIZE[VIEW_MODE.Decade];
 
@@ -11,0 +11,0 @@ for (let i = 0; i < rows; i++) {

src/helperComponents/MonthView/utils.ts

@@ -1,2 +0,2 @@
-import { GRID_SIZE, ViewMode } from '../../constants';
+import { GRID_SIZE, VIEW_MODE } from '../../constants';
 import { BaseGrid, BaseGridItem } from '../../types';
@@ -11,3 +11,3 @@ import { getStartOfWeek } from '../../utils';
   let currentDate = new Date(date.getFullYear(), date.getMonth(), 1 - startGap);
-  const { rows } = GRID_SIZE[ViewMode.Month];
+  const { rows } = GRID_SIZE[VIEW_MODE.Month];
 
@@ -14,0 +14,0 @@ for (let i = 0; i < rows; i++) {

src/helperComponents/YearView/utils.ts

@@ -1,2 +0,2 @@
-import { GRID_SIZE, ViewMode } from '../../constants';
+import { GRID_SIZE, VIEW_MODE } from '../../constants';
 import { BaseGrid, BaseGridItem } from '../../types';
@@ -8,3 +8,3 @@
   let month = 0;
-  const { rows, columns } = GRID_SIZE[ViewMode.Year];
+  const { rows, columns } = GRID_SIZE[VIEW_MODE.Year];
 
@@ -11,0 +11,0 @@ for (let i = 0; i < rows; i++) {

src/types.ts

@@ -1,3 +0,13 @@
-import { InRangePosition, ViewMode } from './constants';
+import { ValueOf } from '@snack-uikit/utils';
 
+import { CALENDAR_MODE, IN_RANGE_POSITION, SIZE, VIEW_MODE } from './constants';
+
+export type InRangePosition = ValueOf<typeof IN_RANGE_POSITION>;
+
+export type ViewMode = ValueOf<typeof VIEW_MODE>;
+
+export type Size = ValueOf<typeof SIZE>;
+
+export type CalendarMode = ValueOf<typeof CALENDAR_MODE>;
+
 export type Range = [Date, Date];
@@ -4,0 +14,0 @@

src/utils.ts

 import { getWeekStartByLocale } from 'weekstart';
 
-import { InRangePosition, ViewMode } from './constants';
-import { Range } from './types';
+import { IN_RANGE_POSITION, VIEW_MODE } from './constants';
+import { InRangePosition, Range, ViewMode } from './types';
 
@@ -41,7 +41,7 @@ export const isTheSameDecade = (date1: Date, date2: Date) =>
   switch (viewMode) {
-    case ViewMode.Month:
+    case VIEW_MODE.Month:
       return isTheSameDate(date1, date2);
-    case ViewMode.Year:
+    case VIEW_MODE.Year:
       return isTheSameMonth(date1, date2);
-    case ViewMode.Decade:
+    case VIEW_MODE.Decade:
       return isTheSameYear(date1, date2);
@@ -57,3 +57,3 @@ default:
   if (!range) {
-    return InRangePosition.Out;
+    return IN_RANGE_POSITION.Out;
   }
@@ -67,11 +67,11 @@
   if (isStart && isEnd) {
-    return InRangePosition.StartEnd;
+    return IN_RANGE_POSITION.StartEnd;
   }
 
   if (isStart) {
-    return InRangePosition.Start;
+    return IN_RANGE_POSITION.Start;
   }
 
   if (isEnd) {
-    return InRangePosition.End;
+    return IN_RANGE_POSITION.End;
   }
@@ -81,3 +81,3 @@
 
-  return date.valueOf() >= start && date.valueOf() <= end ? InRangePosition.In : InRangePosition.Out;
+  return date.valueOf() >= start && date.valueOf() <= end ? IN_RANGE_POSITION.In : IN_RANGE_POSITION.Out;
 };
@@ -84,0 +84,0 @@

No alert changes

Improved metrics

Total package byte prevSize

134241

increased by0.15%

Worsened metrics

Lines of code

2645

decreased by-0.23%

Dependency changes

• + Added@snack-uikit/utils@3.2.0(transitive)

• - Removed@snack-uikit/utils@3.1.0(transitive)

• Updated@snack-uikit/utils@3.2.0