From 251117c03e5839eeb9385c4065f45e4a36d499f8 Mon Sep 17 00:00:00 2001 From: David Pavlenko Date: Tue, 30 Nov 2021 20:32:35 -0800 Subject: [PATCH 1/5] added functionality for price in calander and text color for the price --- src/Inputs/Datepicker/Datebox.tsx | 154 ++++++++++++------- src/Inputs/Datepicker/Datepicker.stories.tsx | 2 + src/Inputs/Datepicker/index.tsx | 88 ++++++----- 3 files changed, 147 insertions(+), 97 deletions(-) diff --git a/src/Inputs/Datepicker/Datebox.tsx b/src/Inputs/Datepicker/Datebox.tsx index d1e6fbef..3426a7d4 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,8 @@ const buildCalendar = ( date: Date, value: Date, selectDate: React.MouseEventHandler, + priceStatus: PriceStatus, + price: Number, ): React.ReactElement[] => { const start = new Date(date); start.setDate(1); @@ -36,15 +44,24 @@ const buildCalendar = ( let exit = false; while (!exit) { row.push( - - {start.getDate()} - , + + {start.getDate()} +
+ {'$'+price} + + + , ); start.setDate(start.getDate() + 1); if (start.getDay() === 0) { @@ -70,16 +87,20 @@ export interface DateboxProps extends React.HTMLAttributes { animate: boolean; value: Date | undefined; clearDate?: Function; + price:Number; + priceStatus:PriceStatus; } export const Datebox: React.FC = ({ - changePage, - clearDate = (): void => undefined, - selectedDate, - selectDate, - animate, - value, -}): React.ReactElement => ( + changePage, + clearDate = (): void => undefined, + selectedDate, + selectDate, + animate, + value, + price, + priceStatus, + }): React.ReactElement => ( @@ -108,89 +131,108 @@ 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%; ${({ 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: #ffd800;' : '')} + ${({ priceColor }): string => (priceColor == PriceStatus.Surge ? 'color: #ff0000;' : '')} + `; + + + diff --git a/src/Inputs/Datepicker/Datepicker.stories.tsx b/src/Inputs/Datepicker/Datepicker.stories.tsx index 120ceed3..d6b50917 100644 --- a/src/Inputs/Datepicker/Datepicker.stories.tsx +++ b/src/Inputs/Datepicker/Datepicker.stories.tsx @@ -12,6 +12,8 @@ export default { label: 'label', placeholder: 'Placeholder', description: 'Description', + price: 25, + priceStatus:0, }, } as Meta; diff --git a/src/Inputs/Datepicker/index.tsx b/src/Inputs/Datepicker/index.tsx index 5870af8c..b30481c3 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, PriceStatus} from './Datebox'; const printDate = (date?: Date): string => { if (date) { @@ -33,16 +33,20 @@ export interface DatepickerProps extends LabelLayoutProps { onClear?: Function; value?: Date; initialShow?: boolean; + price:Number; + priceStatus:PriceStatus; } 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, + price, + priceStatus, + ...props + }): React.ReactElement => { const theme = useTheme(); const [selectedDate, setDate] = useState(value); const ref = useRef(null); @@ -77,10 +81,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 +99,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 +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], @@ -161,6 +165,8 @@ export const Datepicker: React.FC = ({ animate={animate} value={value} clearDate={clearDate} + price={price} + priceStatus= {priceStatus} /> )} @@ -168,17 +174,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 93bdf37972530b6f0724f581d3842b949c4620ae Mon Sep 17 00:00:00 2001 From: David Pavlenko Date: Tue, 30 Nov 2021 20:48:16 -0800 Subject: [PATCH 2/5] added default properties for price and price status --- src/Inputs/Datepicker/Datebox.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Inputs/Datepicker/Datebox.tsx b/src/Inputs/Datepicker/Datebox.tsx index 3426a7d4..702d80f3 100644 --- a/src/Inputs/Datepicker/Datebox.tsx +++ b/src/Inputs/Datepicker/Datebox.tsx @@ -98,8 +98,8 @@ export const Datebox: React.FC = ({ selectDate, animate, value, - price, - priceStatus, + price=0, + priceStatus= PriceStatus.Good, }): React.ReactElement => ( From d272179dbc64431db6006a9374fca78ebade3aad Mon Sep 17 00:00:00 2001 From: David Pavlenko Date: Tue, 30 Nov 2021 21:09:09 -0800 Subject: [PATCH 3/5] added default paramaters to files --- .../CollapsibleHeading/DateFilterSelect.tsx | 26 ++++++++--------- .../DiningReservation/DiningReservation.tsx | 7 +++-- src/Inputs/ExcelOptions/ExcelOptions.tsx | 29 +++++++++---------- 3 files changed, 31 insertions(+), 31 deletions(-) diff --git a/src/Containers/CollapsibleHeading/DateFilterSelect.tsx b/src/Containers/CollapsibleHeading/DateFilterSelect.tsx index ff26a16d..8daac9d0 100644 --- a/src/Containers/CollapsibleHeading/DateFilterSelect.tsx +++ b/src/Containers/CollapsibleHeading/DateFilterSelect.tsx @@ -1,18 +1,16 @@ -import React, { useState, useEffect } from 'react'; -import { MainInterface, ResponsiveInterface } from '@Utils/BaseStyles'; -import { useMounted } from '@Utils/Hooks'; -import { Datepicker } from '@Inputs/Datepicker'; -import { Modal as M } from '@Containers/Modal/Modal'; -import { - FilterSelect, - IFilterSelectProps, -} from '@Containers/CollapsibleHeading/FilterSelect'; -import { Input } from '@Inputs/Input/Input'; -import { Close } from '@styled-icons/evaicons-solid/Close'; -import { clickable, flex } from '@Utils/Mixins'; +import React, {useEffect, useState} from 'react'; +import {MainInterface, ResponsiveInterface} from '@Utils/BaseStyles'; +import {useMounted} from '@Utils/Hooks'; +import {Datepicker} from '@Inputs/Datepicker'; +import {Modal as M} from '@Containers/Modal/Modal'; +import {FilterSelect, IFilterSelectProps,} from '@Containers/CollapsibleHeading/FilterSelect'; +import {Input} from '@Inputs/Input/Input'; +import {Close} from '@styled-icons/evaicons-solid/Close'; +import {clickable, flex} from '@Utils/Mixins'; import moment from 'moment'; import styled from 'styled-components'; -import { Heading } from '@Text/Heading'; +import {Heading} from '@Text/Heading'; +import {PriceStatus} from "@Inputs/Datepicker/Datebox"; const FIRST_SELECT_OPTION = 0; @@ -91,6 +89,8 @@ export const DateFilterSelect: React.FC = ({ onChange={onDateChange} onClear={onClearDate} initialShow + price = {0} + priceStatus={PriceStatus.Good} /> diff --git a/src/Containers/DiningReservation/DiningReservation.tsx b/src/Containers/DiningReservation/DiningReservation.tsx index fc280c56..f5d49d75 100644 --- a/src/Containers/DiningReservation/DiningReservation.tsx +++ b/src/Containers/DiningReservation/DiningReservation.tsx @@ -1,7 +1,8 @@ import React from 'react'; import styled from 'styled-components'; -import { Modal } from '../Modal/Modal'; -import { Input, Datepicker, Timepicker, Button } from '../../index'; +import {Modal} from '../Modal/Modal'; +import {Button, Datepicker, Input, Timepicker} from '../../index'; +import {PriceStatus} from "@Inputs/Datepicker/Datebox"; export interface DiningReservationProps { modalState: [boolean, React.Dispatch>]; @@ -20,7 +21,7 @@ export const DiningReservation: React.FC = ({ label="How many people are u booking for?" placeholder="Enter number of people you are booking for" /> - + = ({ }), ); }} + price = {0} + priceStatus={PriceStatus.Good} + /> ), From 1f382b9dd79eddbf6c6e3dc440046bd24468ad2b Mon Sep 17 00:00:00 2001 From: David Pavlenko Date: Tue, 30 Nov 2021 22:36:43 -0800 Subject: [PATCH 4/5] testing optional field --- src/Containers/CollapsibleHeading/DateFilterSelect.tsx | 3 --- src/Containers/DiningReservation/DiningReservation.tsx | 3 +-- src/Inputs/Datepicker/Datebox.tsx | 4 ++-- src/Inputs/Datepicker/index.tsx | 4 ++-- src/Inputs/ExcelOptions/ExcelOptions.tsx | 4 ---- 5 files changed, 5 insertions(+), 13 deletions(-) diff --git a/src/Containers/CollapsibleHeading/DateFilterSelect.tsx b/src/Containers/CollapsibleHeading/DateFilterSelect.tsx index 8daac9d0..b086b28a 100644 --- a/src/Containers/CollapsibleHeading/DateFilterSelect.tsx +++ b/src/Containers/CollapsibleHeading/DateFilterSelect.tsx @@ -10,7 +10,6 @@ import {clickable, flex} from '@Utils/Mixins'; import moment from 'moment'; import styled from 'styled-components'; import {Heading} from '@Text/Heading'; -import {PriceStatus} from "@Inputs/Datepicker/Datebox"; const FIRST_SELECT_OPTION = 0; @@ -89,8 +88,6 @@ export const DateFilterSelect: React.FC = ({ onChange={onDateChange} onClear={onClearDate} initialShow - price = {0} - priceStatus={PriceStatus.Good} /> diff --git a/src/Containers/DiningReservation/DiningReservation.tsx b/src/Containers/DiningReservation/DiningReservation.tsx index f5d49d75..eca4fbfe 100644 --- a/src/Containers/DiningReservation/DiningReservation.tsx +++ b/src/Containers/DiningReservation/DiningReservation.tsx @@ -2,7 +2,6 @@ import React from 'react'; import styled from 'styled-components'; import {Modal} from '../Modal/Modal'; import {Button, Datepicker, Input, Timepicker} from '../../index'; -import {PriceStatus} from "@Inputs/Datepicker/Datebox"; export interface DiningReservationProps { modalState: [boolean, React.Dispatch>]; @@ -21,7 +20,7 @@ export const DiningReservation: React.FC = ({ label="How many people are u booking for?" placeholder="Enter number of people you are booking for" /> - + { animate: boolean; value: Date | undefined; clearDate?: Function; - price:Number; - priceStatus:PriceStatus; + price?:Number; + priceStatus?:PriceStatus; } export const Datebox: React.FC = ({ diff --git a/src/Inputs/Datepicker/index.tsx b/src/Inputs/Datepicker/index.tsx index b30481c3..4a8f3ec9 100644 --- a/src/Inputs/Datepicker/index.tsx +++ b/src/Inputs/Datepicker/index.tsx @@ -33,8 +33,8 @@ export interface DatepickerProps extends LabelLayoutProps { onClear?: Function; value?: Date; initialShow?: boolean; - price:Number; - priceStatus:PriceStatus; + price?:Number; + priceStatus?:PriceStatus; } export const Datepicker: React.FC = ({ diff --git a/src/Inputs/ExcelOptions/ExcelOptions.tsx b/src/Inputs/ExcelOptions/ExcelOptions.tsx index de599cfa..6b4a30fa 100644 --- a/src/Inputs/ExcelOptions/ExcelOptions.tsx +++ b/src/Inputs/ExcelOptions/ExcelOptions.tsx @@ -9,7 +9,6 @@ import {Mixins} from '@Utils'; import {Select} from '../Select/Select'; import {Datepicker} from '../Datepicker'; import {Button} from '../Button/Button'; -import {PriceStatus} from "@Inputs/Datepicker/Datebox"; export interface ExcelOptionsProps extends MainInterface, @@ -237,9 +236,6 @@ export const ExcelOptions: React.FC = ({ }), ); }} - price = {0} - priceStatus={PriceStatus.Good} - /> ), From 45fc3555c36e5976f991b97be4887a92fb125c75 Mon Sep 17 00:00:00 2001 From: David Pavlenko Date: Tue, 30 Nov 2021 22:42:26 -0800 Subject: [PATCH 5/5] testing change for css --- src/Inputs/Datepicker/Datebox.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/Inputs/Datepicker/Datebox.tsx b/src/Inputs/Datepicker/Datebox.tsx index 6ff71694..e046c78b 100644 --- a/src/Inputs/Datepicker/Datebox.tsx +++ b/src/Inputs/Datepicker/Datebox.tsx @@ -228,9 +228,9 @@ const Price = styled.div<{ priceColor: PriceStatus; }>` font-size: 12px; - ${({ priceColor }): string => (priceColor == PriceStatus.Good ? 'color: #026c45;' : '')} - ${({ priceColor }): string => (priceColor == PriceStatus.Okay ? 'color: #ffd800;' : '')} - ${({ priceColor }): string => (priceColor == PriceStatus.Surge ? 'color: #ff0000;' : '')} + ${({ priceColor }): string => (priceColor === PriceStatus.Good ? 'color: #026c45;' : '')} + ${({ priceColor }): string => (priceColor === PriceStatus.Okay ? 'color: #ffd800;' : '')} + ${({ priceColor }): string => (priceColor === PriceStatus.Surge ? 'color: #ff0000;' : '')} `;