@steroidsjs/core 3.0.0-beta.84 → 3.0.0-beta.86

package/ui/content/CalendarSystem/hooks/useWeekCalendar.d.ts

@@ -0,0 +1,15 @@
+import DateControlEnum from '../enums/DateControlType';
+declare const useWeekCalendar: (currentMonthDate: Date) => {
+    currentWeek: {
+        dayNumber: number;
+        date: Date;
+        outOfRange?: boolean;
+        isToday?: boolean;
+        formattedDisplay?: string;
+    }[];
+    weekControls: {
+        [key: string]: () => void | DateControlEnum;
+    };
+    forceUpdateWeekOnMonthChange: (newMonthDate: Date) => void;
+};
+export default useWeekCalendar;

package/ui/content/CalendarSystem/hooks/useWeekCalendar.js

@@ -0,0 +1,86 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var react_1 = __importDefault(require("react"));
+var calendar_1 = require("../../../../utils/calendar");
+var DateControlType_1 = __importDefault(require("../enums/DateControlType"));
+var useCalendarControls_1 = require("./useCalendarControls");
+var utils_1 = require("../utils/utils");
+var WEEK_DAY_FORMAT = 'dd, D MMM';
+var ONE_DAY = 1;
+var getFormattedWeekFromDate = function (fromDate) {
+    if (fromDate === void 0) { fromDate = null; }
+    var currentWeek = (0, utils_1.getWeekDaysFromDate)(fromDate || new Date());
+    return currentWeek.map(function (dayOfWeek) {
+        var copyOfDayWeek = __assign({}, dayOfWeek);
+        copyOfDayWeek.formattedDisplay = (0, calendar_1.convertDate)(dayOfWeek.date, null, WEEK_DAY_FORMAT);
+        // eslint-disable-next-line no-unused-expressions
+        (0, utils_1.isDateIsToday)(copyOfDayWeek.date) ? copyOfDayWeek.isToday = true : copyOfDayWeek.isToday = false;
+        return copyOfDayWeek;
+    });
+};
+var useWeekCalendar = function (currentMonthDate) {
+    var _a;
+    var _b = react_1["default"].useState(getFormattedWeekFromDate()), currentWeek = _b[0], setCurrentWeek = _b[1];
+    var forceUpdateWeekOnMonthChange = react_1["default"].useCallback(function (newMonthDate) {
+        setCurrentWeek(getFormattedWeekFromDate(newMonthDate));
+    }, []);
+    var changeMonthAfterWeekChanged = react_1["default"].useCallback(function (formattedWeek) {
+        var firstDayOfWeek = formattedWeek[0].date;
+        var currentMonthNumber = currentMonthDate.getMonth();
+        var isWeekOutOfMonth = formattedWeek.every(function (dayOfWeek) { return dayOfWeek.date.getMonth() !== currentMonthNumber; });
+        if (!isWeekOutOfMonth) {
+            return;
+        }
+        if (currentMonthNumber - firstDayOfWeek.getMonth() === 1) {
+            var lastDayOfWeekInNewMonth = formattedWeek[formattedWeek.length - 1].date;
+            var prevMonthControl = (0, useCalendarControls_1.getSourceCalendarControl)(DateControlType_1["default"].PREV_ONE);
+            prevMonthControl.click();
+            forceUpdateWeekOnMonthChange(lastDayOfWeekInNewMonth);
+        }
+        else {
+            var firstDayOfWeekInNewMonth = formattedWeek[0].date;
+            var nextMonthControl = (0, useCalendarControls_1.getSourceCalendarControl)(DateControlType_1["default"].NEXT_ONE);
+            nextMonthControl.click();
+            forceUpdateWeekOnMonthChange(firstDayOfWeekInNewMonth);
+        }
+    }, [currentMonthDate, forceUpdateWeekOnMonthChange]);
+    var setNextWeek = react_1["default"].useCallback(function () {
+        var lastDayOfWeek = currentWeek[currentWeek.length - 1].date;
+        lastDayOfWeek.setDate(lastDayOfWeek.getDate() + ONE_DAY);
+        var formattedNextWeek = getFormattedWeekFromDate(lastDayOfWeek);
+        setCurrentWeek(formattedNextWeek);
+        changeMonthAfterWeekChanged(formattedNextWeek);
+    }, [currentWeek, changeMonthAfterWeekChanged]);
+    var setPrevWeek = react_1["default"].useCallback(function () {
+        var firstDayOfWeek = currentWeek[0].date;
+        firstDayOfWeek.setDate(firstDayOfWeek.getDate() - ONE_DAY);
+        var formattedPrevWeek = getFormattedWeekFromDate(firstDayOfWeek);
+        setCurrentWeek(formattedPrevWeek);
+        changeMonthAfterWeekChanged(formattedPrevWeek);
+    }, [currentWeek, changeMonthAfterWeekChanged]);
+    return {
+        currentWeek: currentWeek,
+        weekControls: (_a = {},
+            _a[DateControlType_1["default"].NEXT_DOUBLE] = DateControlType_1["default"].NEXT_ONE,
+            _a[DateControlType_1["default"].NEXT_ONE] = setNextWeek,
+            _a[DateControlType_1["default"].PREV_ONE] = setPrevWeek,
+            _a[DateControlType_1["default"].PREV_DOUBLE] = DateControlType_1["default"].PREV_ONE,
+            _a),
+        forceUpdateWeekOnMonthChange: forceUpdateWeekOnMonthChange
+    };
+};
+exports["default"] = useWeekCalendar;

package/ui/content/CalendarSystem/index.d.ts

@@ -0,0 +1,2 @@
+import CalendarSystem from './CalendarSystem';
+export default CalendarSystem;

package/ui/content/CalendarSystem/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var CalendarSystem_1 = __importDefault(require("./CalendarSystem"));
+exports["default"] = CalendarSystem_1["default"];

package/ui/content/CalendarSystem/utils/utils.d.ts

@@ -0,0 +1,3 @@
+import { IDay } from '../CalendarSystem';
+export declare const getWeekDaysFromDate: (date: Date) => IDay[];
+export declare const isDateIsToday: (date: Date) => boolean;

package/ui/content/CalendarSystem/utils/utils.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.isDateIsToday = exports.getWeekDaysFromDate = void 0;
+/* eslint-disable no-plusplus */
+var dayjs_1 = __importDefault(require("dayjs"));
+var SIX_DAYS_DIFF = 6;
+var MAX_DAYS_DIFF_IN_WEEK = 7;
+var getWeekDaysFromDate = function (date) {
+    var weekDays = [];
+    var firstDayOfWeek = new Date(date);
+    var currentDay = date.getDay();
+    var diff = currentDay === 0 ? SIX_DAYS_DIFF : currentDay - 1; // Разница между текущим днем и понедельником
+    firstDayOfWeek.setDate(firstDayOfWeek.getDate() - diff); // Устанавливаем первый день недели (понедельник)
+    for (var i = 0; i < MAX_DAYS_DIFF_IN_WEEK; i++) {
+        var currentDate = new Date(firstDayOfWeek);
+        currentDate.setDate(currentDate.getDate() + i);
+        weekDays.push({
+            dayNumber: currentDate.getDate(),
+            date: new Date(currentDate)
+        });
+    }
+    return weekDays;
+};
+exports.getWeekDaysFromDate = getWeekDaysFromDate;
+var isDateIsToday = function (date) { return (0, dayjs_1["default"])(date).isToday(); };
+exports.isDateIsToday = isDateIsToday;

package/ui/content/Icon/Icon.d.ts

@@ -22,7 +22,7 @@
  *
  * Компонент, представляющий иконку. Иконки могут быть импортированы при старте приложения.
  */
-export interface IIconProps extends IUiComponent {
+export interface IIconProps extends Omit<IUiComponent, 'className' | 'style'>, Partial<HTMLElement> {
     /**
      * Имя иконки (латиницей). Импорт иконок происходит на старте приложения.
      * @example create

package/ui/content/index.d.ts

@@ -10,4 +10,5 @@ import Menu from './Menu';
 import CopyToClipboard from './CopyToClipboard';
 import Chart from './Chart';
 import Slider from './Slider';
-export { Avatar, AvatarGroup, Accordion, AccordionItem, Alert, Card, DropDown, Badge, Detail, DetailItem, Icon, Menu, CopyToClipboard, Chart, Slider, };
+import CalendarSystem from './CalendarSystem';
+export { Avatar, AvatarGroup, Accordion, AccordionItem, Alert, Card, DropDown, Badge, Detail, DetailItem, Icon, Menu, CopyToClipboard, Chart, Slider, CalendarSystem, };

package/ui/content/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
-exports.Slider = exports.Chart = exports.CopyToClipboard = exports.Menu = exports.Icon = exports.DetailItem = exports.Detail = exports.Badge = exports.DropDown = exports.Card = exports.Alert = exports.AccordionItem = exports.Accordion = exports.AvatarGroup = exports.Avatar = void 0;
+exports.CalendarSystem = exports.Slider = exports.Chart = exports.CopyToClipboard = exports.Menu = exports.Icon = exports.DetailItem = exports.Detail = exports.Badge = exports.DropDown = exports.Card = exports.Alert = exports.AccordionItem = exports.Accordion = exports.AvatarGroup = exports.Avatar = void 0;
 var Avatar_1 = require("./Avatar");
 exports.Avatar = Avatar_1.Avatar;
 exports.AvatarGroup = Avatar_1.AvatarGroup;
@@ -31,3 +31,5 @@ var Chart_1 = __importDefault(require("./Chart"));
 exports.Chart = Chart_1["default"];
 var Slider_1 = __importDefault(require("./Slider"));
 exports.Slider = Slider_1["default"];
+var CalendarSystem_1 = __importDefault(require("./CalendarSystem"));
+exports.CalendarSystem = CalendarSystem_1["default"];

package/ui/form/CheckboxField/CheckboxField.d.ts

@@ -16,6 +16,10 @@ export interface ICheckboxFieldProps extends IFieldWrapperInputProps, IUiCompone
      * @example true
      */
     checked?: boolean;
+    /**
+    * Пользовательский цвет для чекбокса
+    */
+    color?: string;
     [key: string]: any;
 }
 export interface ICheckboxFieldViewProps extends ICheckboxFieldProps, IFieldWrapperOutputProps {

package/ui/form/CheckboxListField/CheckboxListField.d.ts

@@ -1,14 +1,17 @@
 import * as React from 'react';
 import { IFieldWrapperInputProps, IFieldWrapperOutputProps } from '../../../ui/form/Field/fieldWrapper';
-import { IDataProviderConfig } from '../../../hooks/useDataProvider';
+import { DataProviderItem, IDataProviderConfig } from '../../../hooks/useDataProvider';
 import { IDataSelectConfig } from '../../../hooks/useDataSelect';
 import { ICheckboxFieldViewProps } from '../CheckboxField/CheckboxField';
+type CheckboxFieldListItem = DataProviderItem & {
+    color?: string;
+};
 /**
  * CheckboxListField
  *
  * Список с чекбоксами. Используется в формах для выбора нескольких значений.
  */
-export interface ICheckboxListFieldProps extends IFieldWrapperInputProps, IDataProviderConfig, Omit<IDataSelectConfig, 'items'>, IUiComponent {
+export interface ICheckboxListFieldProps extends IFieldWrapperInputProps, Omit<IDataProviderConfig, 'items'>, Omit<IDataSelectConfig, 'items'>, IUiComponent {
     /**
      * Свойства для элемента input
      * @example {onKeyDown: ...}
@@ -18,6 +21,11 @@ export interface ICheckboxListFieldProps extends IFieldWrapperInputProps, IDataP
      * Ориентация списка
      */
     orientation?: Orientation;
+    /**
+     * Коллекция элементов
+     * @example [{id: 1, label: 'Krasnoyarsk', color: 'red'}, {id: 2, label: 'Moscow', color: 'purple'}]
+     */
+    items: CheckboxFieldListItem[];
     [key: string]: any;
 }
 export interface ICheckboxListFieldViewProps extends IFieldWrapperOutputProps {
@@ -32,6 +40,7 @@ export interface ICheckboxListFieldViewProps extends IFieldWrapperOutputProps {
         label?: string;
         isSelected: boolean;
         isHovered: boolean;
+        color?: string;
     }[];
     selectedIds: (PrimaryKey | any)[];
     onItemSelect: (id: PrimaryKey | any) => void;

package/ui/form/CheckboxListField/CheckboxListField.js

@@ -64,7 +64,10 @@ function CheckboxListField(props) {
     // Sync with form
     (0, react_1.useEffect)(function () {
         props.input.onChange.call(null, selectedIds);
-    }, [props.input.onChange, selectedIds]);
+        if (props.onChange) {
+            props.onChange(selectedIds);
+        }
+    }, [props, props.input.onChange, selectedIds]);
     var onReset = (0, react_1.useCallback)(function () {
         setSelectedIds([]);
     }, [setSelectedIds]);

package/ui/list/TreeTable/TreeTable.d.ts

@@ -32,4 +32,8 @@ export interface ITreeTableProps extends Omit<IGridProps, 'items'> {
     items?: ITreeTableItem[];
 }
 export declare const addTreeColumnFieldsToFirstColumn: (columns: IGridColumn[]) => IGridColumn[];
+/**
+ * TreeTable
+ * Компонент для представления данных коллекции в виде иерархической структуры.
+ */
 export default function TreeTable(props: ITreeTableProps): JSX.Element;

package/ui/list/TreeTable/TreeTable.js

@@ -62,6 +62,10 @@ var addTreeColumnFieldsToFirstColumn = function (columns) {
     return newColumns;
 };
 exports.addTreeColumnFieldsToFirstColumn = addTreeColumnFieldsToFirstColumn;
+/**
+ * TreeTable
+ * Компонент для представления данных коллекции в виде иерархической структуры.
+ */
 function TreeTable(props) {
     var columns = (0, react_1.useMemo)(function () { return (0, exports.addTreeColumnFieldsToFirstColumn)(props.columns); }, [props.columns]);
     return (React.createElement(Grid_1["default"], __assign({}, props, { columns: columns, items: props.items, itemsIndexing: false, hasTreeItems: true })));