From 3b004412e8f0fbcc6aa5e1d6170ae286377ebbd7 Mon Sep 17 00:00:00 2001 From: Krivonos Aleksandr Date: Fri, 14 Jun 2024 11:26:21 +0300 Subject: [PATCH] feat(plasma-new-hope): rename DatePicker folders --- .../components/Calendar/CalendarDouble/CalendarDouble.tsx | 8 +++++++- .../Calendar/ui/CalendarDayItem/CalendarDayItem.styles.ts | 2 +- .../Calendar/ui/CalendarMonths/CalendarMonths.styles.ts | 2 +- .../Calendar/ui/CalendarYears/CalendarYears.styles.ts | 2 +- .../{DatePicker.styles.ts => RangeDate.styles.ts} | 0 .../RangeDate/{DatePicker.tsx => RangeDate.tsx} | 4 ++-- .../RangeDate/{DatePicker.types.ts => RangeDate.types.ts} | 2 +- .../RangeDate/RangeDatePopover/RangeDatePopover.tsx | 2 +- .../RangeDate/RangeDatePopover/RangeDatePopover.types.ts | 2 +- .../DatePicker/RangeDate/variations/_readonly/base.ts | 2 +- .../DatePicker/RangeDate/variations/_size/base.ts | 2 +- .../DatePicker/RangeDate/variations/_view/base.ts | 2 +- .../{DatePicker.styles.ts => SingleDate.styles.ts} | 0 .../SingleDate/{DatePicker.tsx => SingleDate.tsx} | 4 ++-- .../{DatePicker.types.ts => SingleDate.types.ts} | 0 .../DatePicker/SingleDate/variations/_readonly/base.ts | 2 +- .../DatePicker/SingleDate/variations/_size/base.ts | 2 +- .../DatePicker/SingleDate/variations/_view/base.ts | 2 +- .../plasma-new-hope/src/components/DatePicker/index.ts | 8 ++++---- .../components/DatePicker/DatePicker.stories.tsx | 8 +++++++- .../components/DatePicker/DatePicker.stories.tsx | 8 +++++++- 21 files changed, 41 insertions(+), 23 deletions(-) rename packages/plasma-new-hope/src/components/DatePicker/RangeDate/{DatePicker.styles.ts => RangeDate.styles.ts} (100%) rename packages/plasma-new-hope/src/components/DatePicker/RangeDate/{DatePicker.tsx => RangeDate.tsx} (98%) rename packages/plasma-new-hope/src/components/DatePicker/RangeDate/{DatePicker.types.ts => RangeDate.types.ts} (97%) rename packages/plasma-new-hope/src/components/DatePicker/SingleDate/{DatePicker.styles.ts => SingleDate.styles.ts} (100%) rename packages/plasma-new-hope/src/components/DatePicker/SingleDate/{DatePicker.tsx => SingleDate.tsx} (98%) rename packages/plasma-new-hope/src/components/DatePicker/SingleDate/{DatePicker.types.ts => SingleDate.types.ts} (100%) diff --git a/packages/plasma-new-hope/src/components/Calendar/CalendarDouble/CalendarDouble.tsx b/packages/plasma-new-hope/src/components/Calendar/CalendarDouble/CalendarDouble.tsx index e17df63a80..dd33622c8e 100644 --- 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 { + if (!prevValue) { + setPrevValue(value); + } + }, [value, prevValue]); + return ( ` 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 index 0e900a58c6..09e406dc8c 100644 --- 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 index 1e6b428ade..bbe1a8b840 100644 --- 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/packages/plasma-new-hope/src/components/DatePicker/RangeDate/DatePicker.styles.ts b/packages/plasma-new-hope/src/components/DatePicker/RangeDate/RangeDate.styles.ts similarity index 100% rename from packages/plasma-new-hope/src/components/DatePicker/RangeDate/DatePicker.styles.ts rename to packages/plasma-new-hope/src/components/DatePicker/RangeDate/RangeDate.styles.ts diff --git a/packages/plasma-new-hope/src/components/DatePicker/RangeDate/DatePicker.tsx b/packages/plasma-new-hope/src/components/DatePicker/RangeDate/RangeDate.tsx similarity index 98% rename from packages/plasma-new-hope/src/components/DatePicker/RangeDate/DatePicker.tsx rename to packages/plasma-new-hope/src/components/DatePicker/RangeDate/RangeDate.tsx index 549745e6c4..cd17b6d637 100644 --- a/packages/plasma-new-hope/src/components/DatePicker/RangeDate/DatePicker.tsx +++ b/packages/plasma-new-hope/src/components/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/packages/plasma-new-hope/src/components/DatePicker/RangeDate/DatePicker.types.ts b/packages/plasma-new-hope/src/components/DatePicker/RangeDate/RangeDate.types.ts similarity index 97% rename from packages/plasma-new-hope/src/components/DatePicker/RangeDate/DatePicker.types.ts rename to packages/plasma-new-hope/src/components/DatePicker/RangeDate/RangeDate.types.ts index 4e3efad95b..198af79080 100644 --- a/packages/plasma-new-hope/src/components/DatePicker/RangeDate/DatePicker.types.ts +++ b/packages/plasma-new-hope/src/components/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/packages/plasma-new-hope/src/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.tsx b/packages/plasma-new-hope/src/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.tsx index bd6267ebd6..8ce42443a3 100644 --- a/packages/plasma-new-hope/src/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.tsx +++ b/packages/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/packages/plasma-new-hope/src/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.types.ts b/packages/plasma-new-hope/src/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.types.ts index 703b787759..c480aabed6 100644 --- a/packages/plasma-new-hope/src/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.types.ts +++ b/packages/plasma-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 index ee479fcfcc..c3e299edfc 100644 --- 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 index 9714cd48c7..fc4598f860 100644 --- 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 index 4f0a74d93b..25513f01f3 100644 --- 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/packages/plasma-new-hope/src/components/DatePicker/SingleDate/DatePicker.styles.ts b/packages/plasma-new-hope/src/components/DatePicker/SingleDate/SingleDate.styles.ts similarity index 100% rename from packages/plasma-new-hope/src/components/DatePicker/SingleDate/DatePicker.styles.ts rename to packages/plasma-new-hope/src/components/DatePicker/SingleDate/SingleDate.styles.ts diff --git a/packages/plasma-new-hope/src/components/DatePicker/SingleDate/DatePicker.tsx b/packages/plasma-new-hope/src/components/DatePicker/SingleDate/SingleDate.tsx similarity index 98% rename from packages/plasma-new-hope/src/components/DatePicker/SingleDate/DatePicker.tsx rename to packages/plasma-new-hope/src/components/DatePicker/SingleDate/SingleDate.tsx index b8cb6a3356..d2cfd7c14a 100644 --- a/packages/plasma-new-hope/src/components/DatePicker/SingleDate/DatePicker.tsx +++ b/packages/plasma-new-hope/src/components/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>, diff --git a/packages/plasma-new-hope/src/components/DatePicker/SingleDate/DatePicker.types.ts b/packages/plasma-new-hope/src/components/DatePicker/SingleDate/SingleDate.types.ts similarity index 100% rename from packages/plasma-new-hope/src/components/DatePicker/SingleDate/DatePicker.types.ts rename to packages/plasma-new-hope/src/components/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 index 809a721890..a19a352a77 100644 --- 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 index 9714cd48c7..b234ef9d44 100644 --- 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 index 4f0a74d93b..ceb8303fbf 100644 --- 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 index 652eb1d10d..4e8fc1d59f 100644 --- 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/packages/plasma-new-hope/src/examples/plasma_b2c/components/DatePicker/DatePicker.stories.tsx b/packages/plasma-new-hope/src/examples/plasma_b2c/components/DatePicker/DatePicker.stories.tsx index 11b3541bf0..225aaed0d9 100644 --- a/packages/plasma-new-hope/src/examples/plasma_b2c/components/DatePicker/DatePicker.stories.tsx +++ b/packages/plasma-new-hope/src/examples/plasma_b2c/components/DatePicker/DatePicker.stories.tsx @@ -155,6 +155,7 @@ const StoryRange = ({ const rangeRef = useRef(null); const [isOpen, setIsOpen] = useState(false); + const [firstDate, setFirstDate] = useState(''); 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/packages/plasma-new-hope/src/examples/plasma_web/components/DatePicker/DatePicker.stories.tsx b/packages/plasma-new-hope/src/examples/plasma_web/components/DatePicker/DatePicker.stories.tsx index e4b1d027d8..0628716e13 100644 --- a/packages/plasma-new-hope/src/examples/plasma_web/components/DatePicker/DatePicker.stories.tsx +++ b/packages/plasma-new-hope/src/examples/plasma_web/components/DatePicker/DatePicker.stories.tsx @@ -155,6 +155,7 @@ const StoryRange = ({ const rangeRef = useRef(null); const [isOpen, setIsOpen] = useState(false); + const [firstDate, setFirstDate] = useState(''); 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} />