feat(plasma-new-hope): rename DatePicker folders

salute-developers · Jun 28, 2024 · 664a739 · 664a739
1 parent e901f60
commit 664a739
Show file tree

Hide file tree

Showing 21 changed files with 41 additions and 23 deletions.
diff --git a/packages/plasma-new-hope/src/components/Calendar/CalendarDouble/CalendarDouble.tsx b/packages/plasma-new-hope/src/components/Calendar/CalendarDouble/CalendarDouble.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useMemo, forwardRef, HTMLAttributes } from 'react';
+import React, { useState, useCallback, useMemo, forwardRef, HTMLAttributes, useEffect } from 'react';
 
 import type { Calendar, DateObject } from '../Calendar.types';
 import { getDateFromValue, getNextDate, getPrevDate, isValueUpdate } from '../utils';
@@ -129,6 +129,12 @@ export const calendarDoubleRoot = (Root: RootProps<HTMLDivElement, HTMLAttribute
                 setPrevValue(value);
             }
 
+            useEffect(() => {
+                if (!prevValue) {
+                    setPrevValue(value);
+                }
+            }, [value, prevValue]);
+
             return (
                 <Root ref={outerRootRef} aria-label="Выбор даты" {...rest}>
                     <CalendarHeader

diff --git a/...ages/plasma-new-hope/src/components/Calendar/ui/CalendarDayItem/CalendarDayItem.styles.ts b/...ages/plasma-new-hope/src/components/Calendar/ui/CalendarDayItem/CalendarDayItem.styles.ts
@@ -112,7 +112,7 @@ export const StyledDayRoot = styled.div<DayProps & FocusProps>`
                 outlineSize: '0.063rem',
                 outlineOffset: '-0.1875rem',
                 outlineColor: `var(${tokens.calendarOutlineFocusColor})`,
-                outlineRadius: `calc(var(${tokens.calendarDayItemBorderRadius}) - 0.125rem)`,
+                outlineRadius: `calc(var(${tokens.calendarDayItemBorderRadius}) + 0.125rem)`,
             })};
         }
     }

diff --git a/packages/plasma-new-hope/src/components/Calendar/ui/CalendarMonths/CalendarMonths.styles.ts b/packages/plasma-new-hope/src/components/Calendar/ui/CalendarMonths/CalendarMonths.styles.ts
@@ -60,7 +60,7 @@ export const StyledMonthRoot = styled.div`
             outlineSize: '0.063rem',
             outlineOffset: '-0.1875rem',
             outlineColor: `var(${tokens.calendarOutlineFocusColor})`,
-            outlineRadius: `calc(var(${tokens.calendarMonthItemBorderRadius}) - 0.125rem)`,
+            outlineRadius: `calc(var(${tokens.calendarMonthItemBorderRadius}) + 0.125rem)`,
         })};
     }
 `;
diff --git a/packages/plasma-new-hope/src/components/Calendar/ui/CalendarYears/CalendarYears.styles.ts b/packages/plasma-new-hope/src/components/Calendar/ui/CalendarYears/CalendarYears.styles.ts
@@ -60,7 +60,7 @@ export const StyledYearRoot = styled.div`
             outlineSize: '0.063rem',
             outlineOffset: '-0.1875rem',
             outlineColor: `var(${tokens.calendarOutlineFocusColor})`,
-            outlineRadius: `calc(var(${tokens.calendarYearItemBorderRadius}) - 0.125rem)`,
+            outlineRadius: `calc(var(${tokens.calendarYearItemBorderRadius}) + 0.125rem)`,
         })};
     }
 `;
diff --git a/...DatePicker/RangeDate/DatePicker.styles.ts → .../DatePicker/RangeDate/RangeDate.styles.ts b/...DatePicker/RangeDate/DatePicker.styles.ts → .../DatePicker/RangeDate/RangeDate.styles.ts
diff --git a/...nents/DatePicker/RangeDate/DatePicker.tsx → ...onents/DatePicker/RangeDate/RangeDate.tsx b/...nents/DatePicker/RangeDate/DatePicker.tsx → ...onents/DatePicker/RangeDate/RangeDate.tsx
@@ -16,12 +16,12 @@ import { useDatePicker } from '../hooks/useDatePicker';
 import type { RangeInputRefs } from '../../Range/Range.types';
 import { classes } from '../DatePicker.tokens';
 
-import type { DatePickerRangeProps } from './DatePicker.types';
+import type { DatePickerRangeProps } from './RangeDate.types';
 import { base as sizeCSS } from './variations/_size/base';
 import { base as viewCSS } from './variations/_view/base';
 import { base as disabledCSS } from './variations/_disabled/base';
 import { base as readOnlyCSS } from './variations/_readonly/base';
-import { LeftHelper, StyledLabel, StyledRange, base } from './DatePicker.styles';
+import { LeftHelper, StyledLabel, StyledRange, base } from './RangeDate.styles';
 import { RangeDatePopover } from './RangeDatePopover/RangeDatePopover';
 
 export const datePickerRangeRoot = (

diff --git a/.../DatePicker/RangeDate/DatePicker.types.ts → ...s/DatePicker/RangeDate/RangeDate.types.ts b/.../DatePicker/RangeDate/DatePicker.types.ts → ...s/DatePicker/RangeDate/RangeDate.types.ts
@@ -4,7 +4,7 @@ import type { CalendarStateType } from '../../Calendar';
 import type { DisabledDay, EventDay } from '../../Calendar/Calendar.types';
 import type { RangeInnerProps } from '../../Range/Range.types';
 import type { DatePickerdVariationProps } from '../DatePickerBase.types';
-import { DatePickerPopoverProps } from '../SingleDate/DatePicker.types';
+import { DatePickerPopoverProps } from '../SingleDate/SingleDate.types';
 
 export type DatePickerRangePlacement = 'top' | 'bottom';
 

diff --git a/...plasma-new-hope/src/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.tsx b/...plasma-new-hope/src/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { getPlacements } from '../../../../utils';
-import { StyledPopover } from '../DatePicker.styles';
+import { StyledPopover } from '../RangeDate.styles';
 
 import type { RangeDatePopoverProps } from './RangeDatePopover.types';
 import { StyledCalendar, StyledCalendarDouble } from './RangeDatePopover.styles';

diff --git a/...a-new-hope/src/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.types.ts b/...a-new-hope/src/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.types.ts
@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 
-import type { DatePickerCalendarProps, DatePickerPopoverProps } from '../../SingleDate/DatePicker.types';
+import type { DatePickerCalendarProps, DatePickerPopoverProps } from '../../SingleDate/SingleDate.types';
 
 export type RangeDatePopoverProps = DatePickerCalendarProps &
     DatePickerPopoverProps & {

diff --git a/packages/plasma-new-hope/src/components/DatePicker/RangeDate/variations/_readonly/base.ts b/packages/plasma-new-hope/src/components/DatePicker/RangeDate/variations/_readonly/base.ts
@@ -1,7 +1,7 @@
 import { css } from '@linaria/core';
 
 import { tokens } from '../../../DatePicker.tokens';
-import { LeftHelper, StyledLabel } from '../../DatePicker.styles';
+import { LeftHelper, StyledLabel } from '../../RangeDate.styles';
 
 export const base = css`
     &[readonly] {

diff --git a/packages/plasma-new-hope/src/components/DatePicker/RangeDate/variations/_size/base.ts b/packages/plasma-new-hope/src/components/DatePicker/RangeDate/variations/_size/base.ts
@@ -1,7 +1,7 @@
 import { css } from '@linaria/core';
 
 import { tokens } from '../../../DatePicker.tokens';
-import { StyledLabel, LeftHelper } from '../../DatePicker.styles';
+import { StyledLabel, LeftHelper } from '../../RangeDate.styles';
 
 export const base = css`
     width: var(${tokens.width});

diff --git a/packages/plasma-new-hope/src/components/DatePicker/RangeDate/variations/_view/base.ts b/packages/plasma-new-hope/src/components/DatePicker/RangeDate/variations/_view/base.ts
@@ -1,6 +1,6 @@
 import { css } from '@linaria/core';
 
-import { LeftHelper, StyledLabel } from '../../DatePicker.styles';
+import { LeftHelper, StyledLabel } from '../../RangeDate.styles';
 import { tokens } from '../../../DatePicker.tokens';
 
 export const base = css`

diff --git a/...atePicker/SingleDate/DatePicker.styles.ts → ...atePicker/SingleDate/SingleDate.styles.ts b/...atePicker/SingleDate/DatePicker.styles.ts → ...atePicker/SingleDate/SingleDate.styles.ts
diff --git a/...ents/DatePicker/SingleDate/DatePicker.tsx → ...ents/DatePicker/SingleDate/SingleDate.tsx b/...ents/DatePicker/SingleDate/DatePicker.tsx → ...ents/DatePicker/SingleDate/SingleDate.tsx
@@ -7,12 +7,12 @@ import { useDatePicker } from '../hooks/useDatePicker';
 import { classes } from '../DatePicker.tokens';
 import { StyledCalendar } from '../DatePickerBase.styles';
 
-import type { DatePickerProps } from './DatePicker.types';
+import type { DatePickerProps } from './SingleDate.types';
 import { base as sizeCSS } from './variations/_size/base';
 import { base as viewCSS } from './variations/_view/base';
 import { base as disabledCSS } from './variations/_disabled/base';
 import { base as readOnlyCSS } from './variations/_readonly/base';
-import { LeftHelper, StyledInput, StyledLabel, StyledPopover, base } from './DatePicker.styles';
+import { LeftHelper, StyledInput, StyledLabel, StyledPopover, base } from './SingleDate.styles';
 
 export const datePickerRoot = (
     Root: RootProps<HTMLDivElement, Omit<DatePickerProps, 'isOpen' | 'defaultValue' | 'onChangeValue'>>,

diff --git a/...DatePicker/SingleDate/DatePicker.types.ts → ...DatePicker/SingleDate/SingleDate.types.ts b/...DatePicker/SingleDate/DatePicker.types.ts → ...DatePicker/SingleDate/SingleDate.types.ts
diff --git a/packages/plasma-new-hope/src/components/DatePicker/SingleDate/variations/_readonly/base.ts b/packages/plasma-new-hope/src/components/DatePicker/SingleDate/variations/_readonly/base.ts
@@ -1,7 +1,7 @@
 import { css } from '@linaria/core';
 
 import { tokens } from '../../../DatePicker.tokens';
-import { LeftHelper, StyledLabel } from '../../DatePicker.styles';
+import { LeftHelper, StyledLabel } from '../../SingleDate.styles';
 
 export const base = css`
     &[readonly] {

diff --git a/packages/plasma-new-hope/src/components/DatePicker/SingleDate/variations/_size/base.ts b/packages/plasma-new-hope/src/components/DatePicker/SingleDate/variations/_size/base.ts
@@ -1,7 +1,7 @@
 import { css } from '@linaria/core';
 
 import { tokens } from '../../../DatePicker.tokens';
-import { StyledLabel, LeftHelper } from '../../DatePicker.styles';
+import { StyledLabel, LeftHelper } from '../../SingleDate.styles';
 
 export const base = css`
     width: var(${tokens.width});

diff --git a/packages/plasma-new-hope/src/components/DatePicker/SingleDate/variations/_view/base.ts b/packages/plasma-new-hope/src/components/DatePicker/SingleDate/variations/_view/base.ts
@@ -1,6 +1,6 @@
 import { css } from '@linaria/core';
 
-import { LeftHelper, StyledLabel } from '../../DatePicker.styles';
+import { LeftHelper, StyledLabel } from '../../SingleDate.styles';
 import { tokens } from '../../../DatePicker.tokens';
 
 export const base = css`

diff --git a/packages/plasma-new-hope/src/components/DatePicker/index.ts b/packages/plasma-new-hope/src/components/DatePicker/index.ts
@@ -1,7 +1,7 @@
-export { datePickerRoot, datePickerConfig } from './SingleDate/DatePicker';
-export type { DatePickerProps, DatePickerPlacementBasic, DatePickerPlacement } from './SingleDate/DatePicker.types';
+export { datePickerRoot, datePickerConfig } from './SingleDate/SingleDate';
+export type { DatePickerProps, DatePickerPlacementBasic, DatePickerPlacement } from './SingleDate/SingleDate.types';
 
-export { datePickerRangeRoot, datePickerRangeConfig } from './RangeDate/DatePicker';
-export type { DatePickerRangeProps, DatePickerRangePlacement } from './RangeDate/DatePicker.types';
+export { datePickerRangeRoot, datePickerRangeConfig } from './RangeDate/RangeDate';
+export type { DatePickerRangeProps, DatePickerRangePlacement } from './RangeDate/RangeDate.types';
 
 export { classes as datePickerClasses, tokens as datePickerTokens } from './DatePicker.tokens';
diff --git a/...ages/plasma-new-hope/src/examples/plasma_b2c/components/DatePicker/DatePicker.stories.tsx b/...ages/plasma-new-hope/src/examples/plasma_b2c/components/DatePicker/DatePicker.stories.tsx
@@ -155,6 +155,7 @@ const StoryRange = ({
     const rangeRef = useRef<RangeInputRefs>(null);
 
     const [isOpen, setIsOpen] = useState(false);
+    const [firstDate, setFirstDate] = useState<string | Date>('');
 
     const iconSize = size === 'xs' ? 'xs' : 's';
     const showDividerIcon = dividerVariant === 'icon';
@@ -201,7 +202,12 @@ const StoryRange = ({
             onChangeSecondValue={(e, currentValue) => {
                 onChangeSecondValue(e, currentValue);
             }}
-            onCommitSecondDate={() => setIsOpen(false)}
+            onCommitFirstDate={(currentValue) => {
+                setFirstDate(currentValue);
+            }}
+            onCommitSecondDate={(currentValue) => {
+                firstDate && currentValue && setIsOpen(false);
+            }}
             {...dividerIconProps}
             {...rest}
         />

diff --git a/...ages/plasma-new-hope/src/examples/plasma_web/components/DatePicker/DatePicker.stories.tsx b/...ages/plasma-new-hope/src/examples/plasma_web/components/DatePicker/DatePicker.stories.tsx
@@ -155,6 +155,7 @@ const StoryRange = ({
     const rangeRef = useRef<RangeInputRefs>(null);
 
     const [isOpen, setIsOpen] = useState(false);
+    const [firstDate, setFirstDate] = useState<string | Date>('');
 
     const iconSize = size === 'xs' ? 'xs' : 's';
     const showDividerIcon = dividerVariant === 'icon';
@@ -201,7 +202,12 @@ const StoryRange = ({
             onChangeSecondValue={(e, currentValue) => {
                 onChangeSecondValue(e, currentValue);
             }}
-            onCommitSecondDate={() => setIsOpen(false)}
+            onCommitFirstDate={(currentValue) => {
+                setFirstDate(currentValue);
+            }}
+            onCommitSecondDate={(currentValue) => {
+                firstDate && currentValue && setIsOpen(false);
+            }}
             {...dividerIconProps}
             {...rest}
         />