feat(Calendar): added period

packages/react-ui/components/Calendar/Calendar.md

@@ -82,6 +82,79 @@ const isHoliday = (day, isWeekend) => {
 <Calendar isHoliday={isHoliday} value={date} onValueChange={setDate} />;
 ```
 
+В календаре можно задать период
+```jsx harmony
+const [min, setMin] = React.useState('05.08.2023');
+const [max, setMax] = React.useState('30.08.2023');
+const [periodStartDate, setPeriodStartDate] = React.useState('10.08.2023');
+const [periodEndDate, setPeriodEndDate] = React.useState('20.08.2023');
+const [focus, setFocus] = React.useState('periodStartDate');
+
+const getFocusStyle = (type) => focus === type ? { background: '#80A6FF' } : {};
+
+const periodClearing = () => {
+  setFocus('periodStartDate');
+  setPeriodStartDate('');
+  setPeriodEndDate('');
+};
+
+const onValueChange = (date) => {
+  if (focus === 'periodEndDate') {
+    setPeriodEndDate(date);
+    setFocus('periodStartDate');
+  }
+  if (focus === 'periodStartDate') {
+    setPeriodStartDate(date);
+    setFocus('periodEndDate');
+  }
+}
+
+<div style={{ display: 'flex'}}>
+  <Calendar
+    value={periodStartDate || periodEndDate}
+    periodStartDate={periodStartDate}
+    periodEndDate={periodEndDate}
+    minDate={min}
+    maxDate={max}
+    onValueChange={onValueChange}
+  />
+  <div style={{ display: 'flex', flexDirection: 'column'}}> 
+    <label>
+      Свободные дни с: <input type="text" value={min} onChange={(e) => setMin(e.target.value)} />
+    </label>
+    <label>
+      Свободные дни до: <input type="text" value={max} onChange={(e) => setMax(e.target.value)} />
+    </label>
+    <br />
+    <label>
+      Начало периода:
+      <input
+        type="text"
+        style={getFocusStyle('periodStartDate')}
+        onClick={() => setFocus('periodStartDate')}
+        value={periodStartDate}
+        onChange={(e) => {
+          setPeriodStartDate(e.target.value);
+        }}
+      />
+    </label>
+    <label>
+      Окончание периода:
+      <input
+        type="text"
+        onClick={() => setFocus('periodEndDate')}
+        style={getFocusStyle('periodEndDate')}
+        value={periodEndDate}
+        onChange={(e) => setPeriodEndDate(e.target.value)}
+      />
+    </label>
+    <br />
+    <button data-tid="period_clearing" onClick={periodClearing} style={{width: 250}}>
+      Очистить период
+    </button>
+  </div>
+</div>
+```
 
 Календарю можно задать кастомную высоту с помощью переменной темы `calendarWrapperHeight`
 - Базовая высота календаря - `330px`

packages/react-ui/components/Calendar/Calendar.tsx

@@ -21,7 +21,7 @@ import { MonthViewModel } from './MonthViewModel';
 import * as CalendarScrollEvents from './CalendarScrollEvents';
 import { Month } from './Month';
 import { styles } from './Calendar.styles';
-import { CalendarDateShape, create, isGreater, isLess } from './CalendarDateShape';
+import { CalendarDateShape, create, isGreater, isLess, isEqual } from './CalendarDateShape';
 import * as CalendarUtils from './CalendarUtils';
 
 export interface CalendarProps extends CommonProps {
@@ -49,6 +49,18 @@ export interface CalendarProps extends CommonProps {
    * Дата задаётся в формате `dd.mm.yyyy`
    */
   minDate?: string;
+  /**
+   * Задаёт начальную дату периода
+   *
+   * Дата задаётся в формате `dd.mm.yyyy`
+   */
+  periodStartDate?: string;
+  /**
+   * Задаёт конечную дату периода
+   *
+   * Дата задаётся в формате `dd.mm.yyyy`
+   */
+  periodEndDate?: string;
   /**
    * Функция для определения праздничных дней
    * @default (_day, isWeekend) => isWeekend
@@ -74,6 +86,7 @@ export interface CalendarState {
   today: CalendarDateShape;
   scrollDirection: number;
   scrollTarget: number;
+  hoveredDate?: CalendarDateShape;
 }
 
 export const CalendarDataTids = {
@@ -321,6 +334,8 @@ export class Calendar extends React.Component<CalendarProps, CalendarState> {
     const date = this.getDateInNativeFormat(this.props.value);
     const minDate = this.getDateInNativeFormat(this.props.minDate);
     const maxDate = this.getDateInNativeFormat(this.props.maxDate);
+    const periodEndDate = this.getDateInNativeFormat(this.props.periodEndDate);
+    const periodStartDate = this.getDateInNativeFormat(this.props.periodStartDate);
 
     return (
       <Month
@@ -329,11 +344,16 @@ export class Calendar extends React.Component<CalendarProps, CalendarState> {
         month={month}
         maxDate={maxDate}
         minDate={minDate}
+        periodStartDate={periodStartDate}
+        periodEndDate={periodEndDate}
         today={this.state.today}
         value={date}
         onDateClick={this.handleDateChange}
         onMonthYearChange={this.handleMonthYearChange}
         isHoliday={this.isHoliday}
+        hoveredDate={this.state.hoveredDate}
+        onMouseEnterDay={this.handleMouseEnterDay}
+        onMouseLeaveDay={this.handleMouseLeaveDay}
       />
     );
   }
@@ -471,4 +491,16 @@ export class Calendar extends React.Component<CalendarProps, CalendarState> {
       onEnd,
     );
   };
+
+  private handleMouseEnterDay = (hoveredDate: CalendarDateShape) => {
+    if (!isEqual(this.state.hoveredDate, hoveredDate)) {
+      this.setState((prev) => ({ ...prev, hoveredDate }));
+    }
+  };
+
+  private handleMouseLeaveDay = () => {
+    if (this.state.hoveredDate) {
+      this.setState((prev) => ({ ...prev, hoveredDate: undefined }));
+    }
+  };
 }

packages/react-ui/components/Calendar/DayCellView.styles.ts

@@ -12,41 +12,71 @@ export const styles = memoizeStyle({
       ${resetButton()};
 
       background: ${t.calendarCellBg};
-      border: 1px solid transparent;
       display: inline-block;
       font-size: 14px;
       padding: 0;
       text-align: center;
       user-select: none;
       position: relative;
+      cursor: pointer;
 
       width: ${t.calendarCellSize};
       height: ${t.calendarCellSize};
       line-height: ${t.calendarCellLineHeight};
-      border-radius: 50%;
 
-      &:hover {
-        background-color: ${t.calendarCellHoverBgColor};
-        color: ${t.calendarCellHoverColor};
-        cursor: pointer;
-      }
       &:disabled {
         opacity: 0.5;
         pointer-events: none;
       }
+    `;
+  },
+
+  element(t: Theme) {
+    return css`
+      border-radius: 50%;
+      border: 1px solid transparent;
+
       &:active:hover:enabled {
         color: ${t.calendarCellActiveHoverColor};
       }
     `;
   },
 
+  elementHover(t: Theme) {
+    return css`
+      background-color: ${t.calendarCellHoverBgColor};
+      color: ${t.calendarCellHoverColor};
+      cursor: pointer;
+    `;
+  },
+
   selected(t: Theme) {
     return css`
       background-color: ${t.calendarCellSelectedBgColor};
       color: ${t.calendarCellSelectedFontColor};
     `;
   },
 
+  period(t: Theme) {
+    return css`
+      background-color: ${t.calendarCellSelectedBgColor};
+    `;
+  },
+
+  periodStart() {
+    return css`
+      border-top-left-radius: 50%;
+      border-bottom-left-radius: 50%;
+    `;
+  },
+
+  periodEnd() {
+    return css`
+      border-top-right-radius: 50%;
+      border-bottom-right-radius: 50%;
+    `;
+  },
+
   weekend(t: Theme) {
     return css`
       color: ${t.calendarCellWeekendColor};