fix(calendar): fixes (#498)

* fix(calendar): selected & disabled style * fix(calendar): limit only years if minDate is not specified * fix(calendar-range): fix story * feat(themes): add calendar-input click theme
core-ds · Feb 8, 2021 · 410630e · 410630e
1 parent c12646d
commit 410630e
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 27 deletions.
diff --git a/packages/calendar-range/src/Component.stories.mdx b/packages/calendar-range/src/Component.stories.mdx
@@ -63,10 +63,11 @@ import { CalendarRange } from '@alfalab/core-components-calendar-range';
 
 <Preview>
     {React.createElement(() => {
-        const [valueFrom, setValueFrom] = React.useState('10.11.2020');
-        const [valueTo, setValueTo] = React.useState('20.11.2020');
-        const minDate = subMonths(startOfDay(new Date()), 2).getTime();
-        const maxDate = addMonths(startOfDay(new Date()), 2).getTime();
+        const defaultDate = '10.11.2020';
+        const [valueFrom, setValueFrom] = React.useState(defaultDate);
+        const [valueTo, setValueTo] = React.useState('');
+        const minDate = subMonths(startOfDay(parseDateString(defaultDate)), 2).getTime();
+        const maxDate = addMonths(startOfDay(parseDateString(defaultDate)), 2).getTime();
         const [fromError, setFromError] = React.useState('');
         const [toError, setToError] = React.useState('');
         const valid = (value) => {
@@ -87,8 +88,8 @@ import { CalendarRange } from '@alfalab/core-components-calendar-range';
         const handleToFocus = () => setToError('');
         return (
             <CalendarRange
-                minDate={subMonths(startOfDay(new Date()), 2).getTime()}
-                maxDate={addMonths(startOfDay(new Date()), 2).getTime()}
+                minDate={minDate}
+                maxDate={maxDate}
                 valueFrom={valueFrom}
                 valueTo={valueTo}
                 onDateFromChange={({ value }) => {

diff --git a/packages/calendar/src/Component.tsx b/packages/calendar/src/Component.tsx
@@ -1,6 +1,6 @@
 import React, { forwardRef, useCallback, useMemo, useState } from 'react';
 import cn from 'classnames';
-import { startOfMonth, subYears } from 'date-fns';
+import { startOfMonth } from 'date-fns';
 import { Header } from './components/header';
 import { DaysTable } from './components/days-table';
 import { MonthsTable } from './components/months-table';
@@ -121,10 +121,9 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarProps>(
             monthTimestamp,
         ]);
 
-        const minDate = useMemo(
-            () => (minDateTimestamp ? new Date(minDateTimestamp) : subYears(defaultMonth, 100)),
-            [minDateTimestamp, defaultMonth],
-        );
+        const minDate = useMemo(() => (minDateTimestamp ? new Date(minDateTimestamp) : undefined), [
+            minDateTimestamp,
+        ]);
 
         const maxDate = useMemo(() => (maxDateTimestamp ? new Date(maxDateTimestamp) : undefined), [
             maxDateTimestamp,

diff --git a/packages/calendar/src/__snapshots__/Component.test.tsx.snap b/packages/calendar/src/__snapshots__/Component.test.tsx.snap
@@ -2057,18 +2057,6 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
               1921
             </span>
           </button>
-          <button
-            aria-selected="false"
-            class="component ghost xs button default button"
-            data-date="-1577923200000"
-            tabindex="-1"
-          >
-            <span
-              class="text stretchText"
-            >
-              1920
-            </span>
-          </button>
         </div>
       </div>
     </div>

diff --git a/packages/calendar/src/components/days-table/index.module.css b/packages/calendar/src/components/days-table/index.module.css
@@ -108,7 +108,8 @@
         border-radius: 0;
     }
 
-    &.selected {
+    &.selected,
+    &.disabled.selected {
         color: var(--calendar-selected-color);
         background: var(--calendar-selected-background);
         cursor: default;

diff --git a/packages/calendar/src/useCalendar.ts b/packages/calendar/src/useCalendar.ts
@@ -1,5 +1,13 @@
 import { KeyboardEvent, MouseEvent, Ref, useCallback, useMemo, useRef, useState } from 'react';
-import { startOfMonth, isSameDay, isSameMonth, isSameYear, setYear, addMonths } from 'date-fns';
+import {
+    startOfMonth,
+    isSameDay,
+    isSameMonth,
+    isSameYear,
+    setYear,
+    addMonths,
+    subYears,
+} from 'date-fns';
 import mergeRefs from 'react-merge-refs';
 import {
     limitDate,
@@ -32,7 +40,7 @@ export type UseCalendarProps = {
     /**
      * Минимальная дата, доступная для выбора
      */
-    minDate: Date;
+    minDate?: Date;
 
     /**
      * Максимальная дата, доступная для выбора
@@ -108,7 +116,10 @@ export function useCalendar({
         activeMonth,
     ]);
 
-    const years = useMemo(() => generateYears(minDate, maxDate || new Date()), [minDate, maxDate]);
+    const years = useMemo(
+        () => generateYears(minDate || subYears(new Date(), 100), maxDate || new Date()),
+        [minDate, maxDate],
+    );
 
     const setMonth = useCallback(
         (newMonth: Date) => {

diff --git a/packages/themes/src/mixins/calendar-input/click.css b/packages/themes/src/mixins/calendar-input/click.css
@@ -0,0 +1,5 @@
+@import '../../../../vars/src/index.css';
+
+@define-mixin calendar-input-click {
+    --calendar-input-calendar-icon: url('https://alfabank.st/icons/glyph_calendar_m.svg');
+}
diff --git a/packages/themes/src/mixins/click.css b/packages/themes/src/mixins/click.css
@@ -11,6 +11,7 @@
 @import './select/click.css';
 @import './confirmation/click.css';
 @import './calendar/click.css';
+@import './calendar-input/click.css';
 @import './toast-plate/click.css';
 
 @define-mixin theme-click {
@@ -30,5 +31,6 @@
     @mixin select-click;
     @mixin confirmation-click;
     @mixin calendar-click;
+    @mixin calendar-input-click;
     @mixin toast-plate-click;
 }