From 898c673a7c8d5237b7e8eaa35f064e9be934c9ea Mon Sep 17 00:00:00 2001 From: David Pavlenko Date: Wed, 26 Jan 2022 21:31:21 -0800 Subject: [PATCH 1/7] added the calendar to the a new pr --- src/Constants.ts | 5 + src/Inputs/Datepicker/Datebox.tsx | 170 ++++++++++++------- src/Inputs/Datepicker/Datepicker.stories.tsx | 28 ++- src/Inputs/Datepicker/index.tsx | 85 +++++----- 4 files changed, 185 insertions(+), 103 deletions(-) diff --git a/src/Constants.ts b/src/Constants.ts index 53c5f43aa..02c3471b3 100644 --- a/src/Constants.ts +++ b/src/Constants.ts @@ -1,5 +1,10 @@ import { useGlobals } from '@storybook/addons'; +export const COMPONENTS_TITLE = 'Components'; + +export const createStoryTitle = (componentName: string): string => + `${COMPONENTS_TITLE}/${componentName}`; + export const getCaptionForLocale = (children?: string): string => { const [{ locale }] = useGlobals(); if (children && locale === 'none') { diff --git a/src/Inputs/Datepicker/Datebox.tsx b/src/Inputs/Datepicker/Datebox.tsx index d1e6fbefd..3fdfeb44d 100644 --- a/src/Inputs/Datepicker/Datebox.tsx +++ b/src/Inputs/Datepicker/Datebox.tsx @@ -14,6 +14,12 @@ import { Button } from '../Button/Button'; const SIZE = 40; +export enum PriceStatus{ + Good, + Okay, + Surge +} + const displayDate = (date: Date = new Date()): string => `${MONTHS[date.getMonth()]}, ${date.getFullYear()}`; @@ -26,6 +32,7 @@ const buildCalendar = ( date: Date, value: Date, selectDate: React.MouseEventHandler, + selectedDays: IDataObject[], ): React.ReactElement[] => { const start = new Date(date); start.setDate(1); @@ -36,15 +43,31 @@ const buildCalendar = ( let exit = false; while (!exit) { row.push( - - {start.getDate()} - , + + {start.getDate()} +
+ {selectedDays[0]!=null + ? selectedDays.map( + (function (day) { + if (sameDate(start,day.date)) { + return {day.price}; + } + else { + return null; + } + })) + : null + } + + , ); start.setDate(start.getDate() + 1); if (start.getDay() === 0) { @@ -63,6 +86,13 @@ const buildCalendar = ( return items; }; +export interface IDataObject{ + date:Date, + price: string; + priceStatus: number; +} + + export interface DateboxProps extends React.HTMLAttributes { changePage: (change?: number) => React.MouseEventHandler; selectedDate?: Date; @@ -70,16 +100,18 @@ export interface DateboxProps extends React.HTMLAttributes { animate: boolean; value: Date | undefined; clearDate?: Function; + selectedDays: IDataObject[]; } export const Datebox: React.FC = ({ - changePage, - clearDate = (): void => undefined, - selectedDate, - selectDate, - animate, - value, -}): React.ReactElement => ( + changePage, + clearDate = (): void => undefined, + selectedDate, + selectDate, + animate, + value, + selectedDays, + }): React.ReactElement => ( @@ -108,89 +142,109 @@ export const Datebox: React.FC = ({ const DateBox = styled.div<{ animate: boolean; }>` - ${position('absolute', 'auto', '100%', 'auto', 'auto')} - margin: 0 auto auto 0; - padding: 15px 10px 10px; - box-sizing: border-box; - background-color: white; - text-align: center; - font-size: 0.9rem; - z-index: 90; - - // Theme Stuff - ${({ theme }): string => ` + ${position('absolute', 'auto', '100%', 'auto', 'auto')} + margin: 0 auto auto 0; + padding: 15px 10px 10px; + box-sizing: border-box; + background-color: white; + text-align: center; + font-size: 0.9rem; + z-index: 90; + + // Theme Stuff + ${({ theme }): string => ` ${transition(['transform', 'opacity'])} border-radius: ${theme.dimensions.radius}; font-family: ${theme.font.family}; box-shadow: ${theme.depth[1]}; `} - ${({ animate }): string => - !animate - ? ` + ${({ animate }): string => + !animate + ? ` transform: translateY(-20px); opacity: 0; ` - : ''} + : ''} `; const DateControls = styled.div` - ${flex('center')} - padding-bottom: 8px; + ${flex('center')} + padding-bottom: 8px; `; + const DateDisplay = styled.span` - font-weight: bold; - font-size: 1.05rem; - margin: auto; + font-weight: bold; + font-size: 1.05rem; + margin: auto; `; const WeekDays = styled.ul` - ${flex()} - padding: 0; - margin: 0; - list-style-type: none; + ${flex()} + padding: 0; + margin: 0; + list-style-type: none; `; const WeekDay = styled.li` - font-weight: bold; - padding: 5px 0; - width: ${SIZE}px; + font-weight: bold; + padding: 5px 0; + width: ${SIZE}px; `; const Calendar = styled.ul` - ${flex('column')} - list-style-type: none; - flex-wrap: wrap; - padding: 0; - margin: 0; + ${flex('column')} + list-style-type: none; + flex-wrap: wrap; + padding: 0; + margin: 0; `; const CalendarWeek = styled.li` - ${flex()} + ${flex()} `; const CalendarDay = styled.span<{ + data: string; +}>` + +`; + +const DayWrapper = styled.div<{ faded: boolean; selected: boolean; - data: string; }>` ${transition(['background-color', 'color'])} - ${flex('center')} - width: ${SIZE - 4}px; - height: ${SIZE - 4}px; + width: ${SIZE - 3}px; + height: ${SIZE - 3}px; margin: 2px; - border-radius: 50%; - + border-radius: 35%; + /* + ${flex('center')} + */ ${({ faded }): string => (faded ? 'opacity: 0.3;' : '')} ${({ selected, theme }): string => - styledCondition( - selected, - ` - background-color: ${theme.colors.primary}; + styledCondition( + selected, + ` + background-color: ${theme.colors.occupancyStatusColors.Occupied}; cursor: pointer; color: white; `, - clickable('#ffffff', 0.05), - )} + clickable('#ffffff', 0.05), + )} +`; + +const Price = styled.div<{ + priceColor: PriceStatus; +}>` + font-size: 12px; + ${({ priceColor }): string => (priceColor == PriceStatus.Good ? 'color: #026c45;' : '')} + ${({ priceColor }): string => (priceColor == PriceStatus.Okay ? 'color: #FFD700;' : '')} + ${({ priceColor }): string => (priceColor == PriceStatus.Surge ? 'color: #ff0000;' : '')} + `; + + + diff --git a/src/Inputs/Datepicker/Datepicker.stories.tsx b/src/Inputs/Datepicker/Datepicker.stories.tsx index 490c598d8..2407e8129 100644 --- a/src/Inputs/Datepicker/Datepicker.stories.tsx +++ b/src/Inputs/Datepicker/Datepicker.stories.tsx @@ -1,18 +1,38 @@ import React from 'react'; import { Meta, Story } from '@storybook/react'; import { Datepicker, DatepickerProps } from '../../index'; - +import { createStoryTitle } from '../../Constants'; export default { - title: 'Components/Atoms/Datepicker', + title: createStoryTitle('Datepicker'), component: Datepicker, argTypes: { onChange: { action: `you picked: ` } }, - args: { + args:{ disabled: false, label: 'label', placeholder: 'Placeholder', description: 'Description', - }, + selectedDays: + + [ + { + date: new Date(2022,0,19), + price: "$25", + priceStatus:1 + }, + { + date: new Date(2022,0,18), + price: "$45", + priceStatus:0 + }, + { + date: new Date(2022,0,17), + price: "$70", + priceStatus: 2 + } + + ], + } } as Meta; export const Basic: Story = (args) => ; diff --git a/src/Inputs/Datepicker/index.tsx b/src/Inputs/Datepicker/index.tsx index 5870af8c2..5c428d9a5 100644 --- a/src/Inputs/Datepicker/index.tsx +++ b/src/Inputs/Datepicker/index.tsx @@ -14,7 +14,7 @@ import { LabelLayout as LL, LabelLayoutProps, } from '../../Fragments'; -import { Datebox } from './Datebox'; +import {Datebox,IDataObject} from './Datebox'; const printDate = (date?: Date): string => { if (date) { @@ -33,16 +33,18 @@ export interface DatepickerProps extends LabelLayoutProps { onClear?: Function; value?: Date; initialShow?: boolean; + selectedDays: IDataObject[]; } export const Datepicker: React.FC = ({ - value, - onChange = (): void => undefined, - onClear = (): void => undefined, - placeholder = 'MM-DD-YYYY', - initialShow, - ...props -}): React.ReactElement => { + value, + onChange = (): void => undefined, + onClear = (): void => undefined, + placeholder = 'MM-DD-YYYY', + initialShow, + selectedDays, + ...props + }): React.ReactElement => { const theme = useTheme(); const [selectedDate, setDate] = useState(value); const ref = useRef(null); @@ -77,10 +79,9 @@ export const Datepicker: React.FC = ({ setText(printDate(value)); }, [value]); - const handleText = useCallback( - (el): void => setText(el.target.value), - [text], - ); + const handleText = useCallback((el): void => setText(el.target.value), [ + text, + ]); const selectDate = useCallback((el): void => { const val = new Date(el.target.getAttribute('data')); @@ -96,14 +97,15 @@ export const Datepicker: React.FC = ({ }, []); const changePage = useCallback( - (change = 1): React.MouseEventHandler => - (): void => { - setDate((d): Date => { + (change = 1): React.MouseEventHandler => (): void => { + setDate( + (d): Date => { const curr: Date = new Date(d || new Date()); curr.setMonth(curr.getMonth() + change); return curr; - }); - }, + }, + ); + }, [], ); const clearDate = (): void => { @@ -116,25 +118,25 @@ export const Datepicker: React.FC = ({ (el): void => { const d = new Date(el.target.value); switch (el.key) { - case 'Tab': - setShow(false); - break; - case 'Enter': - el.target = { - ...el.target, - name: props.name, - value: d, - }; - - if (d.toDateString() === value?.toDateString()) { - setShow((v): boolean => !v); - } else if (!Number.isNaN(d.getTime())) { - setText(printDate(d)); - onChange(el); - } - break; - default: - break; + case 'Tab': + setShow(false); + break; + case 'Enter': + el.target = { + ...el.target, + name: props.name, + value: d, + }; + + if (d.toDateString() === value?.toDateString()) { + setShow((v): boolean => !v); + } else if (!Number.isNaN(d.getTime())) { + setText(printDate(d)); + onChange(el); + } + break; + default: + break; } }, [value], @@ -161,6 +163,7 @@ export const Datepicker: React.FC = ({ animate={animate} value={value} clearDate={clearDate} + selectedDays={selectedDays} /> )} @@ -168,17 +171,17 @@ export const Datepicker: React.FC = ({ }; const LabelLayout = styled(LL)<{ ref: React.RefObject }>` - position: relative; + position: relative; `; const Icon = styled(CalendarAlt)` - ${position('absolute', 'auto 20px auto auto')} - width: 10px; + ${position('absolute', 'auto 20px auto auto')} + width: 10px; `; const Wrapper = styled.div` - ${flex('column')} - position: relative; + ${flex('column')} + position: relative; `; export default Datepicker; From 84de3b223884b89479d50ada4b702841db9f5d6a Mon Sep 17 00:00:00 2001 From: David Pavlenko Date: Thu, 27 Jan 2022 20:24:15 -0800 Subject: [PATCH 2/7] changed variable names --- src/Inputs/Datepicker/Datebox.tsx | 6 +++--- src/Inputs/Datepicker/Datepicker.stories.tsx | 2 +- src/Inputs/Datepicker/index.tsx | 6 +++--- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/Inputs/Datepicker/Datebox.tsx b/src/Inputs/Datepicker/Datebox.tsx index 3fdfeb44d..958778c27 100644 --- a/src/Inputs/Datepicker/Datebox.tsx +++ b/src/Inputs/Datepicker/Datebox.tsx @@ -100,7 +100,7 @@ export interface DateboxProps extends React.HTMLAttributes { animate: boolean; value: Date | undefined; clearDate?: Function; - selectedDays: IDataObject[]; + adjustedPriceDays: IDataObject[]; } export const Datebox: React.FC = ({ @@ -110,7 +110,7 @@ export const Datebox: React.FC = ({ selectDate, animate, value, - selectedDays, + adjustedPriceDays, }): React.ReactElement => ( @@ -131,7 +131,7 @@ export const Datebox: React.FC = ({ selectedDate || new Date(), value || new Date(), selectDate, - selectedDays, + adjustedPriceDays, )} diff --git a/src/Inputs/Datepicker/Datepicker.stories.tsx b/src/Inputs/Datepicker/Datepicker.stories.tsx index 2407e8129..be115688f 100644 --- a/src/Inputs/Datepicker/Datepicker.stories.tsx +++ b/src/Inputs/Datepicker/Datepicker.stories.tsx @@ -12,7 +12,7 @@ export default { label: 'label', placeholder: 'Placeholder', description: 'Description', - selectedDays: + adjustedPriceDays: [ { diff --git a/src/Inputs/Datepicker/index.tsx b/src/Inputs/Datepicker/index.tsx index 5c428d9a5..3daaa790f 100644 --- a/src/Inputs/Datepicker/index.tsx +++ b/src/Inputs/Datepicker/index.tsx @@ -33,7 +33,7 @@ export interface DatepickerProps extends LabelLayoutProps { onClear?: Function; value?: Date; initialShow?: boolean; - selectedDays: IDataObject[]; + adjustedPriceDays: IDataObject[]; } export const Datepicker: React.FC = ({ @@ -42,7 +42,7 @@ export const Datepicker: React.FC = ({ onClear = (): void => undefined, placeholder = 'MM-DD-YYYY', initialShow, - selectedDays, + adjustedPriceDays, ...props }): React.ReactElement => { const theme = useTheme(); @@ -163,7 +163,7 @@ export const Datepicker: React.FC = ({ animate={animate} value={value} clearDate={clearDate} - selectedDays={selectedDays} + adjustedPriceDays={adjustedPriceDays} /> )} From db0d66f4098faa009fb21a895d44d9aa82b28b65 Mon Sep 17 00:00:00 2001 From: David Pavlenko Date: Thu, 27 Jan 2022 20:48:09 -0800 Subject: [PATCH 3/7] fixed type error in Datepicker props --- src/Inputs/Datepicker/Datebox.tsx | 4 ++-- src/Inputs/Datepicker/index.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/Inputs/Datepicker/Datebox.tsx b/src/Inputs/Datepicker/Datebox.tsx index 958778c27..d55770397 100644 --- a/src/Inputs/Datepicker/Datebox.tsx +++ b/src/Inputs/Datepicker/Datebox.tsx @@ -110,7 +110,7 @@ export const Datebox: React.FC = ({ selectDate, animate, value, - adjustedPriceDays, + adjustedPriceDays , }): React.ReactElement => ( @@ -131,7 +131,7 @@ export const Datebox: React.FC = ({ selectedDate || new Date(), value || new Date(), selectDate, - adjustedPriceDays, + adjustedPriceDays , )} diff --git a/src/Inputs/Datepicker/index.tsx b/src/Inputs/Datepicker/index.tsx index 3daaa790f..b2eec575a 100644 --- a/src/Inputs/Datepicker/index.tsx +++ b/src/Inputs/Datepicker/index.tsx @@ -33,7 +33,7 @@ export interface DatepickerProps extends LabelLayoutProps { onClear?: Function; value?: Date; initialShow?: boolean; - adjustedPriceDays: IDataObject[]; + adjustedPriceDays?: IDataObject[]; } export const Datepicker: React.FC = ({ From cacba509f03bf042281f24af219fef525f0a8fab Mon Sep 17 00:00:00 2001 From: David Pavlenko Date: Thu, 27 Jan 2022 22:31:39 -0800 Subject: [PATCH 4/7] added default value to start date --- src/Inputs/Datepicker/Datebox.tsx | 152 +++++++++---------- src/Inputs/Datepicker/Datepicker.stories.tsx | 41 +++-- src/Inputs/Datepicker/index.tsx | 86 ++++++----- 3 files changed, 137 insertions(+), 142 deletions(-) diff --git a/src/Inputs/Datepicker/Datebox.tsx b/src/Inputs/Datepicker/Datebox.tsx index d55770397..f1687436b 100644 --- a/src/Inputs/Datepicker/Datebox.tsx +++ b/src/Inputs/Datepicker/Datebox.tsx @@ -14,10 +14,10 @@ import { Button } from '../Button/Button'; const SIZE = 40; -export enum PriceStatus{ +export enum PriceStatus { Good, Okay, - Surge + Surge, } const displayDate = (date: Date = new Date()): string => @@ -53,19 +53,21 @@ const buildCalendar = ( data={start.toISOString()} > {start.getDate()} -
- {selectedDays[0]!=null - ? selectedDays.map( - (function (day) { - if (sameDate(start,day.date)) { - return {day.price}; - } - else { - return null; - } - })) - : null - } +
+ {selectedDays[0] != null + ? selectedDays.map((day) => { + if (sameDate(start, day.date)) { + return ( + day.date !== new Date(0, 0, 0) && ( + + {day.price} + + ) + ); + } + return null; + }) + : null} , ); @@ -86,13 +88,12 @@ const buildCalendar = ( return items; }; -export interface IDataObject{ - date:Date, +export interface IDataObject { + date: Date; price: string; priceStatus: number; } - export interface DateboxProps extends React.HTMLAttributes { changePage: (change?: number) => React.MouseEventHandler; selectedDate?: Date; @@ -104,14 +105,14 @@ export interface DateboxProps extends React.HTMLAttributes { } export const Datebox: React.FC = ({ - changePage, - clearDate = (): void => undefined, - selectedDate, - selectDate, - animate, - value, - adjustedPriceDays , - }): React.ReactElement => ( + changePage, + clearDate = (): void => undefined, + selectedDate, + selectDate, + animate, + value, + adjustedPriceDays, +}): React.ReactElement => ( @@ -142,74 +142,71 @@ export const Datebox: React.FC = ({ const DateBox = styled.div<{ animate: boolean; }>` - ${position('absolute', 'auto', '100%', 'auto', 'auto')} - margin: 0 auto auto 0; - padding: 15px 10px 10px; - box-sizing: border-box; - background-color: white; - text-align: center; - font-size: 0.9rem; - z-index: 90; - - // Theme Stuff - ${({ theme }): string => ` + ${position('absolute', 'auto', '100%', 'auto', 'auto')} + margin: 0 auto auto 0; + padding: 15px 10px 10px; + box-sizing: border-box; + background-color: white; + text-align: center; + font-size: 0.9rem; + z-index: 90; + + // Theme Stuff + ${({ theme }): string => ` ${transition(['transform', 'opacity'])} border-radius: ${theme.dimensions.radius}; font-family: ${theme.font.family}; box-shadow: ${theme.depth[1]}; `} - ${({ animate }): string => - !animate - ? ` + ${({ animate }): string => + !animate + ? ` transform: translateY(-20px); opacity: 0; ` - : ''} + : ''} `; const DateControls = styled.div` - ${flex('center')} - padding-bottom: 8px; + ${flex('center')} + padding-bottom: 8px; `; - const DateDisplay = styled.span` - font-weight: bold; - font-size: 1.05rem; - margin: auto; + font-weight: bold; + font-size: 1.05rem; + margin: auto; `; const WeekDays = styled.ul` - ${flex()} - padding: 0; - margin: 0; - list-style-type: none; + ${flex()} + padding: 0; + margin: 0; + list-style-type: none; `; const WeekDay = styled.li` - font-weight: bold; - padding: 5px 0; - width: ${SIZE}px; + font-weight: bold; + padding: 5px 0; + width: ${SIZE}px; `; const Calendar = styled.ul` - ${flex('column')} - list-style-type: none; - flex-wrap: wrap; - padding: 0; - margin: 0; + ${flex('column')} + list-style-type: none; + flex-wrap: wrap; + padding: 0; + margin: 0; `; const CalendarWeek = styled.li` - ${flex()} + ${flex()} `; const CalendarDay = styled.span<{ data: string; -}>` - -`; +}>``; const DayWrapper = styled.div<{ faded: boolean; @@ -225,26 +222,25 @@ const DayWrapper = styled.div<{ */ ${({ faded }): string => (faded ? 'opacity: 0.3;' : '')} ${({ selected, theme }): string => - styledCondition( - selected, - ` + styledCondition( + selected, + ` background-color: ${theme.colors.occupancyStatusColors.Occupied}; cursor: pointer; color: white; `, - clickable('#ffffff', 0.05), - )} + clickable('#ffffff', 0.05), + )} `; const Price = styled.div<{ priceColor: PriceStatus; }>` - font-size: 12px; - ${({ priceColor }): string => (priceColor == PriceStatus.Good ? 'color: #026c45;' : '')} - ${({ priceColor }): string => (priceColor == PriceStatus.Okay ? 'color: #FFD700;' : '')} - ${({ priceColor }): string => (priceColor == PriceStatus.Surge ? 'color: #ff0000;' : '')} - + font-size: 12px; + ${({ priceColor }): string => + priceColor === PriceStatus.Good ? 'color: #026c45;' : ''} + ${({ priceColor }): string => + priceColor === PriceStatus.Okay ? 'color: #FFD700;' : ''} + ${({ priceColor }): string => + priceColor === PriceStatus.Surge ? 'color: #ff0000;' : ''} `; - - - diff --git a/src/Inputs/Datepicker/Datepicker.stories.tsx b/src/Inputs/Datepicker/Datepicker.stories.tsx index be115688f..d69ba299e 100644 --- a/src/Inputs/Datepicker/Datepicker.stories.tsx +++ b/src/Inputs/Datepicker/Datepicker.stories.tsx @@ -7,32 +7,29 @@ export default { title: createStoryTitle('Datepicker'), component: Datepicker, argTypes: { onChange: { action: `you picked: ` } }, - args:{ + args: { disabled: false, label: 'label', placeholder: 'Placeholder', description: 'Description', - adjustedPriceDays: - - [ - { - date: new Date(2022,0,19), - price: "$25", - priceStatus:1 - }, - { - date: new Date(2022,0,18), - price: "$45", - priceStatus:0 - }, - { - date: new Date(2022,0,17), - price: "$70", - priceStatus: 2 - } - - ], - } + adjustedPriceDays: [ + { + date: new Date(2022, 0, 19), + price: '$25', + priceStatus: 1, + }, + { + date: new Date(2022, 0, 18), + price: '$45', + priceStatus: 0, + }, + { + date: new Date(2022, 0, 17), + price: '$70', + priceStatus: 2, + }, + ], + }, } as Meta; export const Basic: Story = (args) => ; diff --git a/src/Inputs/Datepicker/index.tsx b/src/Inputs/Datepicker/index.tsx index b2eec575a..18868b629 100644 --- a/src/Inputs/Datepicker/index.tsx +++ b/src/Inputs/Datepicker/index.tsx @@ -14,7 +14,7 @@ import { LabelLayout as LL, LabelLayoutProps, } from '../../Fragments'; -import {Datebox,IDataObject} from './Datebox'; +import { Datebox, IDataObject } from './Datebox'; const printDate = (date?: Date): string => { if (date) { @@ -37,14 +37,16 @@ export interface DatepickerProps extends LabelLayoutProps { } export const Datepicker: React.FC = ({ - value, - onChange = (): void => undefined, - onClear = (): void => undefined, - placeholder = 'MM-DD-YYYY', - initialShow, - adjustedPriceDays, - ...props - }): React.ReactElement => { + value, + onChange = (): void => undefined, + onClear = (): void => undefined, + placeholder = 'MM-DD-YYYY', + initialShow, + adjustedPriceDays = [ + { date: new Date(0, 0, 0), price: '0', priceStatus: 0 }, + ], + ...props +}): React.ReactElement => { const theme = useTheme(); const [selectedDate, setDate] = useState(value); const ref = useRef(null); @@ -79,9 +81,10 @@ export const Datepicker: React.FC = ({ setText(printDate(value)); }, [value]); - const handleText = useCallback((el): void => setText(el.target.value), [ - text, - ]); + const handleText = useCallback( + (el): void => setText(el.target.value), + [text], + ); const selectDate = useCallback((el): void => { const val = new Date(el.target.getAttribute('data')); @@ -97,15 +100,14 @@ export const Datepicker: React.FC = ({ }, []); const changePage = useCallback( - (change = 1): React.MouseEventHandler => (): void => { - setDate( - (d): Date => { + (change = 1): React.MouseEventHandler => + (): void => { + setDate((d): Date => { const curr: Date = new Date(d || new Date()); curr.setMonth(curr.getMonth() + change); return curr; - }, - ); - }, + }); + }, [], ); const clearDate = (): void => { @@ -118,25 +120,25 @@ export const Datepicker: React.FC = ({ (el): void => { const d = new Date(el.target.value); switch (el.key) { - case 'Tab': - setShow(false); - break; - case 'Enter': - el.target = { - ...el.target, - name: props.name, - value: d, - }; - - if (d.toDateString() === value?.toDateString()) { - setShow((v): boolean => !v); - } else if (!Number.isNaN(d.getTime())) { - setText(printDate(d)); - onChange(el); - } - break; - default: - break; + case 'Tab': + setShow(false); + break; + case 'Enter': + el.target = { + ...el.target, + name: props.name, + value: d, + }; + + if (d.toDateString() === value?.toDateString()) { + setShow((v): boolean => !v); + } else if (!Number.isNaN(d.getTime())) { + setText(printDate(d)); + onChange(el); + } + break; + default: + break; } }, [value], @@ -171,17 +173,17 @@ export const Datepicker: React.FC = ({ }; const LabelLayout = styled(LL)<{ ref: React.RefObject }>` - position: relative; + position: relative; `; const Icon = styled(CalendarAlt)` - ${position('absolute', 'auto 20px auto auto')} - width: 10px; + ${position('absolute', 'auto 20px auto auto')} + width: 10px; `; const Wrapper = styled.div` - ${flex('column')} - position: relative; + ${flex('column')} + position: relative; `; export default Datepicker; From 5db966d745405bfe9509ac2b27f9285442e88624 Mon Sep 17 00:00:00 2001 From: David Pavlenko Date: Fri, 28 Jan 2022 09:05:24 -0800 Subject: [PATCH 5/7] simplified the price color --- src/Inputs/Datepicker/Datebox.tsx | 6 ++---- src/Inputs/Datepicker/Datepicker.stories.tsx | 3 +-- 2 files changed, 3 insertions(+), 6 deletions(-) diff --git a/src/Inputs/Datepicker/Datebox.tsx b/src/Inputs/Datepicker/Datebox.tsx index f1687436b..868a2c78d 100644 --- a/src/Inputs/Datepicker/Datebox.tsx +++ b/src/Inputs/Datepicker/Datebox.tsx @@ -238,9 +238,7 @@ const Price = styled.div<{ }>` font-size: 12px; ${({ priceColor }): string => - priceColor === PriceStatus.Good ? 'color: #026c45;' : ''} - ${({ priceColor }): string => - priceColor === PriceStatus.Okay ? 'color: #FFD700;' : ''} - ${({ priceColor }): string => + priceColor === PriceStatus.Good ? 'color: #026c45;' : '' || + priceColor === PriceStatus.Okay ? 'color: #FFD700;' : '' || priceColor === PriceStatus.Surge ? 'color: #ff0000;' : ''} `; diff --git a/src/Inputs/Datepicker/Datepicker.stories.tsx b/src/Inputs/Datepicker/Datepicker.stories.tsx index d69ba299e..e94988c26 100644 --- a/src/Inputs/Datepicker/Datepicker.stories.tsx +++ b/src/Inputs/Datepicker/Datepicker.stories.tsx @@ -1,10 +1,9 @@ import React from 'react'; import { Meta, Story } from '@storybook/react'; import { Datepicker, DatepickerProps } from '../../index'; -import { createStoryTitle } from '../../Constants'; export default { - title: createStoryTitle('Datepicker'), + title: "Components/Atoms/Datepicker", component: Datepicker, argTypes: { onChange: { action: `you picked: ` } }, args: { From b308fd640f17a09c699baec0e9c84e50e4834cf7 Mon Sep 17 00:00:00 2001 From: David Pavlenko Date: Fri, 28 Jan 2022 09:20:58 -0800 Subject: [PATCH 6/7] fixed ternary error --- src/Inputs/Datepicker/Datebox.tsx | 6 +++--- src/Inputs/Datepicker/Datepicker.stories.tsx | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/Inputs/Datepicker/Datebox.tsx b/src/Inputs/Datepicker/Datebox.tsx index 868a2c78d..5a21a9f12 100644 --- a/src/Inputs/Datepicker/Datebox.tsx +++ b/src/Inputs/Datepicker/Datebox.tsx @@ -238,7 +238,7 @@ const Price = styled.div<{ }>` font-size: 12px; ${({ priceColor }): string => - priceColor === PriceStatus.Good ? 'color: #026c45;' : '' || - priceColor === PriceStatus.Okay ? 'color: #FFD700;' : '' || - priceColor === PriceStatus.Surge ? 'color: #ff0000;' : ''} + (priceColor === PriceStatus.Good ? 'color: #026c45;' : '') || + (priceColor === PriceStatus.Okay ? 'color: #FFD700;' : '') || + (priceColor === PriceStatus.Surge ? 'color: #ff0000;' : '')} `; diff --git a/src/Inputs/Datepicker/Datepicker.stories.tsx b/src/Inputs/Datepicker/Datepicker.stories.tsx index e94988c26..8d974abe5 100644 --- a/src/Inputs/Datepicker/Datepicker.stories.tsx +++ b/src/Inputs/Datepicker/Datepicker.stories.tsx @@ -3,7 +3,7 @@ import { Meta, Story } from '@storybook/react'; import { Datepicker, DatepickerProps } from '../../index'; export default { - title: "Components/Atoms/Datepicker", + title: 'Components/Atoms/Datepicker', component: Datepicker, argTypes: { onChange: { action: `you picked: ` } }, args: { From 2df53641ca4d8cfe8733107809f60ddb33aaa21d Mon Sep 17 00:00:00 2001 From: David Pavlenko Date: Tue, 1 Feb 2022 13:17:41 -0800 Subject: [PATCH 7/7] removed component title --- src/Constants.ts | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/Constants.ts b/src/Constants.ts index 02c3471b3..53c5f43aa 100644 --- a/src/Constants.ts +++ b/src/Constants.ts @@ -1,10 +1,5 @@ import { useGlobals } from '@storybook/addons'; -export const COMPONENTS_TITLE = 'Components'; - -export const createStoryTitle = (componentName: string): string => - `${COMPONENTS_TITLE}/${componentName}`; - export const getCaptionForLocale = (children?: string): string => { const [{ locale }] = useGlobals(); if (children && locale === 'none') {