diff --git a/src/Containers/CollapsibleHeading/DateFilterSelect.tsx b/src/Containers/CollapsibleHeading/DateFilterSelect.tsx index ff26a16d..b086b28a 100644 --- a/src/Containers/CollapsibleHeading/DateFilterSelect.tsx +++ b/src/Containers/CollapsibleHeading/DateFilterSelect.tsx @@ -1,18 +1,15 @@ -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'; const FIRST_SELECT_OPTION = 0; diff --git a/src/Containers/DiningReservation/DiningReservation.tsx b/src/Containers/DiningReservation/DiningReservation.tsx index fc280c56..eca4fbfe 100644 --- a/src/Containers/DiningReservation/DiningReservation.tsx +++ b/src/Containers/DiningReservation/DiningReservation.tsx @@ -1,7 +1,7 @@ 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'; export interface DiningReservationProps { modalState: [boolean, React.Dispatch>]; @@ -20,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" /> - + `${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=0, + priceStatus= PriceStatus.Good, + }): 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..4a8f3ec9 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; diff --git a/src/Inputs/ExcelOptions/ExcelOptions.tsx b/src/Inputs/ExcelOptions/ExcelOptions.tsx index 416c453b..6b4a30fa 100644 --- a/src/Inputs/ExcelOptions/ExcelOptions.tsx +++ b/src/Inputs/ExcelOptions/ExcelOptions.tsx @@ -1,19 +1,14 @@ -import React, { useEffect, useState } from 'react'; +import React, {useEffect, useState} from 'react'; import styled from 'styled-components'; -import { - DragDropContext, - Draggable, - Droppable, - DropResult, -} from 'react-beautiful-dnd'; -import { MainInterface, ResponsiveInterface } from '@Utils/BaseStyles'; -import { ImplicitPropsInterface } from '@Utils/Hooks'; -import { Heading, Paragraph } from '@Text'; -import { Tag } from '@Containers/Tag/Tag'; -import { Mixins } from '@Utils'; -import { Select } from '../Select/Select'; -import { Datepicker } from '../Datepicker'; -import { Button } from '../Button/Button'; +import {DragDropContext, Draggable, Droppable, DropResult,} from 'react-beautiful-dnd'; +import {MainInterface, ResponsiveInterface} from '@Utils/BaseStyles'; +import {ImplicitPropsInterface} from '@Utils/Hooks'; +import {Heading, Paragraph} from '@Text'; +import {Tag} from '@Containers/Tag/Tag'; +import {Mixins} from '@Utils'; +import {Select} from '../Select/Select'; +import {Datepicker} from '../Datepicker'; +import {Button} from '../Button/Button'; export interface ExcelOptionsProps extends MainInterface,