Skip to content

Commit

Permalink
feat #314 - Styles WIP
Browse files Browse the repository at this point in the history
  • Loading branch information
@sam-dassana
sam-dassana committed May 25, 2021
1 parent 36bf17e commit 9073faa
Show file tree
Hide file tree
Showing 4 changed files with 185 additions and 62 deletions.
13 changes: 12 additions & 1 deletion src/components/DateRangeInput/DateRangeInput.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import { action } from '@storybook/addon-actions'
import moment from 'moment'
import { SbTheme } from '../../../.storybook/preview'
import { SecondaryBgDecorator } from '../../../.storybook/utils'
import { useTheme } from 'react-jss'
import { DateRangeInput, DateRangeInputProps, DateRangeInputValue } from '.'
import { Meta, Story } from '@storybook/react/types-6-0'
Expand All @@ -9,9 +11,14 @@ export default {
argTypes: {
onChange: { defaultValue: action('onChange') },
popupContainerSelector: { control: { disable: true } },
size: {
defaultValue: 'middle',
options: ['small', 'middle', 'large']
},
value: { control: { disable: true } }
},
component: DateRangeInput,
decorators: [SecondaryBgDecorator],
title: 'DateRangeInput'
} as Meta

Expand Down Expand Up @@ -49,4 +56,8 @@ const Template: Story<DateRangeInputProps> = args => {
}

export const Default = Template.bind({})
Default.args = {}
Default.args = {
// disabledDate: current => {
// return current && current > moment().endOf('day')
// }
}
19 changes: 16 additions & 3 deletions src/components/DateRangeInput/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,12 @@ import cn from 'classnames'
import { createUseStyles } from 'react-jss'
import { DatePicker } from 'antd'
import { getPopupContainerProps } from '../utils'
import { MomentInputObject } from 'moment'
import { SelectSkeleton } from 'components/Select/SingleSelect/SelectSkeleton'
import { SizeType } from 'antd/lib/config-provider/SizeContext'
import { ThemeType } from 'components/assets/styles'
import { formatTime, parseTime } from '../TimeInput/utils'
import { generateDateRangeInputStyles, generateDropdownStyles } from './styles'
import { Moment, MomentInputObject } from 'moment'
import React, { FC } from 'react'

const { dark, light } = ThemeType
Expand Down Expand Up @@ -36,25 +38,31 @@ interface TimeProps {

export interface DateRangeInputProps {
classes?: string[]
disabledDate?: (date: Moment) => boolean
displayFormat?: string
onChange?: (value: DateRangeInputValue) => void
/**
* Whether to include time or not. Can either be boolean or an object
*/
includeTime?: boolean | TimeProps
loading?: boolean
/**
* Selector of HTML element inside which to render the dropdown
*/
popupContainerSelector?: string
size?: SizeType
value?: DateRangeInputValue
}

export const DateRangeInput: FC<DateRangeInputProps> = ({
classes = [],
displayFormat = 'YYYY-MM-DD hh:mm A',
disabledDate,
onChange,
includeTime = { displayFormat: 'hh:mm A' },
loading = false,
popupContainerSelector,
size = 'middle',
value
}: DateRangeInputProps) => {
const compClasses = useStyles()
Expand Down Expand Up @@ -88,18 +96,23 @@ export const DateRangeInput: FC<DateRangeInputProps> = ({
}
}

return (
return loading ? (
<SelectSkeleton />
) : (
<AntDRangePicker
allowClear={false}
className={cn(classes)}
disabledDate={disabledDate}
dropdownClassName={compClasses.dropdown}
format={displayFormat}
open // TODO: DELETE prop before commiting
mode={['date', 'date']}
open // TODO: Delete
showTime={
typeof includeTime === 'boolean'
? includeTime
: { format: includeTime.displayFormat }
}
size={size}
{...controlledCmpProps}
{...getPopupContainerProps(popupContainerSelector)}
/>
Expand Down
211 changes: 155 additions & 56 deletions src/components/DateRangeInput/styles.ts
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import { generateTimePanelColumnStyles } from '../TimeInput/utils'
import { generateThemedIconBtnStyles } from '../IconButton/utils'
import { generateTimePanelColumnStyles } from '../TimeInput/utils'
import {
dropdownStyles,
inputPalette,
styleguide,
themedStyles,
themes,
ThemeType
} from 'components/assets/styles'

Expand Down Expand Up @@ -38,68 +39,176 @@ const generateActiveBarStyles = (themeType: ThemeType) => {

const datePanelPalette = {
[dark]: {
hover: { selected: { background: blacks['lighten-80'] } },
range: { background: grays.base, color: blacks.base },
hover: { selected: { background: blacks['lighten-20'] } },
prevNextMonth: blacks['lighten-20'],
range: {
background: dropdownStyles[dark].selected.background,
color: blacks.base
},
selectedDays: {
background: blacks['lighten-50'],
background: blacks['lighten-30'],
color: whites.base,
hover: { background: blacks['lighten-40'] }
}
},
weekHeader: blacks['lighten-60']
},
[light]: {
hover: { selected: { background: blacks['lighten-80'] } },
range: { background: grays.base, color: blacks.base },
prevNextMonth: blacks['lighten-70'],
range: {
background: dropdownStyles[light].selected.background,
color: blacks.base
},
selectedDays: {
background: blacks['lighten-50'],
color: whites.base,
hover: { background: blacks['lighten-40'] }
}
},
weekHeader: blacks.base
}
}

const generateDatePanelHeaderStyles = (themeType: ThemeType) => {
const {
base: { borderColor }
} = themedStyles[themeType]

return {
'& .ant-picker-header': {
color: 'red !important',
'& button': generateThemedIconBtnStyles(themeType)
'& button': generateThemedIconBtnStyles(themeType),
borderBottomColor: borderColor
}
}
}

// #cbe6ff
// &.ant-picker-cell-range-start:not(.ant-picker-cell-range-start-single)::before, &.ant-picker-cell-range-end:not(.ant-picker-cell-range-end-single)::before
const generateDatePanelStyles = (themeType: ThemeType) => {
const {
base: { borderColor, color }
base: { borderColor, color },
disabled
} = themedStyles[themeType]

const { hover, range, selectedDays } = datePanelPalette[themeType]
const {
hover,
prevNextMonth,
range,
selectedDays,
weekHeader
} = datePanelPalette[themeType]

return {
'& .ant-picker-date-panel': {
// ...generateDatePanelHeaderStyles(themeType),
'& .ant-picker-cell-in-range.ant-picker-cell-range-hover-start .ant-picker-cell-inner::after, & .ant-picker-cell-in-range.ant-picker-cell-range-hover-end .ant-picker-cell-inner::after': {
// background: `${range.background} !important`
background: hover.selected.background
// background: 'red !important'
},
'& .ant-picker-cell-in-view': {
'&.ant-picker-cell-in-range.ant-picker-cell-range-hover::before, &.ant-picker-cell-range-start.ant-picker-cell-range-hover::before, &.ant-picker-cell-range-end.ant-picker-cell-range-hover::before, & .ant-picker-cell-range-start:not(.ant-picker-cell-range-start-single).ant-picker-cell-range-hover-start::before, &.ant-picker-cell-range-end:not(.ant-picker-cell-range-end-single).ant-picker-cell-range-hover-end::before, &.ant-picker-cell-in-range.ant-picker-cell-range-hover-start::before, &.ant-picker-cell-in-range.ant-picker-cell-range-hover-end::before': {
// background: `${range.background} !important`
background: hover.selected.background
// background: 'red !important'
},
'&.ant-picker-cell-in-range::before, &.ant-picker-cell-range-start:not(.ant-picker-cell-range-start-single)::before, &.ant-picker-cell-range-end:not(.ant-picker-cell-range-end-single)::before': {
background: range.background
...generateDatePanelHeaderStyles(themeType),
'& .ant-picker-body': {
'& .ant-picker-cell': {
'&.ant-picker-cell-disabled': {
'& .ant-picker-cell-inner': { color: disabled.color },
'&::before': { background: disabled.backgroundColor }
},
'&:hover:not(.ant-picker-cell-in-view) .ant-picker-cell-inner, &:hover:not(.ant-picker-cell-selected):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end):not(.ant-picker-cell-range-hover-start):not(.ant-picker-cell-range-hover-end) .ant-picker-cell-inner': {
background: dropdownStyles[themeType].hover.background
},
color: prevNextMonth
},
'&.ant-picker-cell-selected .ant-picker-cell-inner, &.ant-picker-cell-range-start .ant-picker-cell-inner, &.ant-picker-cell-range-end .ant-picker-cell-inner': {
background: selectedDays.background
'& .ant-picker-cell-in-view': {
'&.ant-picker-cell-disabled': {
'& .ant-picker-cell-inner': { color: disabled.color },
'&::before': {
background: disabled.backgroundColor
}
},
'&.ant-picker-cell-end.ant-picker-cell-range-hover-edge-end.ant-picker-cell-range-hover-edge-end-near-range::after, &.ant-picker-cell-range-hover-edge-end:not(.ant-picker-cell-range-hover-edge-end-near-range)::after, &.ant-picker-cell-range-hover-end::after': {
borderRight: `1px dashed ${selectedDays.background}`
},
'&.ant-picker-cell-range-hover-end': {
'&:not(.ant-picker-cell-in-range):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end)::after, &.ant-picker-cell-range-start.ant-picker-cell-range-end.ant-picker-cell-range-start-near-hover::after, &.ant-picker-cell-range-end-single::after': {
borderBottom: `1px dashed ${selectedDays.background}`,
borderTop: `1px dashed ${selectedDays.background}`
}
},
'&.ant-picker-cell-range-hover-start': {
'&:not(.ant-picker-cell-in-range):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end)::after, &.ant-picker-cell-range-start.ant-picker-cell-range-end.ant-picker-cell-range-end-near-hover::after, &.ant-picker-cell-range-start-single::after': {
borderBottom: `1px dashed ${selectedDays.background}`,
borderTop: `1px dashed ${selectedDays.background}`
}
},
'&.ant-picker-cell-range-hover:not(.ant-picker-cell-in-range)::after': {
borderBottom: `1px dashed ${selectedDays.background}`,
borderTop: `1px dashed ${selectedDays.background}`
},
'&.ant-picker-cell-start.ant-picker-cell-range-hover-edge-start.ant-picker-cell-range-hover-edge-start-near-range::after, &.ant-picker-cell-range-hover-edge-start:not(.ant-picker-cell-range-hover-edge-start-near-range)::after, &.ant-picker-cell-range-hover-start::after': {
borderLeft: `1px dashed ${selectedDays.background}`
},
'&.ant-picker-cell-today .ant-picker-cell-inner::before': {
border: `1px solid ${disabled.color}`,
borderRadius
},
// '&.ant-picker-cell-in-range.ant-picker-cell-range-hover::before, &.ant-picker-cell-range-start.ant-picker-cell-range-hover::before, &.ant-picker-cell-range-end.ant-picker-cell-range-hover::before, & .ant-picker-cell-range-start:not(.ant-picker-cell-range-start-single).ant-picker-cell-range-hover-start::before, &.ant-picker-cell-range-end:not(.ant-picker-cell-range-end-single).ant-picker-cell-range-hover-end::before, &.ant-picker-cell-in-range.ant-picker-cell-range-hover-start::before, &.ant-picker-cell-in-range.ant-picker-cell-range-hover-end::before': {
// background: hover.selected.background
// },
// '&.ant-picker-cell-in-range::before, &.ant-picker-cell-range-start:not(.ant-picker-cell-range-start-single)::before, &.ant-picker-cell-range-end:not(.ant-picker-cell-range-end-single)::before': {
// background: range.background
// },
// '&.ant-picker-cell-selected .ant-picker-cell-inner, &.ant-picker-cell-range-start .ant-picker-cell-inner, &.ant-picker-cell-range-end .ant-picker-cell-inner': {
// background: selectedDays.background
// },
color
},
'& .ant-picker-content': {
'& th': {
color: weekHeader
},
'& tr > .ant-picker-cell-in-view': {
'&.ant-picker-cell-range-hover:first-child::after, &.ant-picker-cell-range-hover-end:first-child::after': {
borderLeft: `1px dashed ${selectedDays.background}`
},
'&.ant-picker-cell-range-hover:last-child::after, &.ant-picker-cell-range-hover-start:last-child::after': {
borderRight: `1px dashed ${selectedDays.background}`
}
}
}
// '& .ant-picker-cell-in-range.ant-picker-cell-range-hover-start .ant-picker-cell-inner::after, & .ant-picker-cell-in-range.ant-picker-cell-range-hover-end .ant-picker-cell-inner::after': {
// background: hover.selected.background
// },
}
}
}
}

const generateTimePanelStyles = (themeType: ThemeType) => {
const {
base: { background }
} = dropdownStyles[themeType]

const {
base: { borderColor, color }
} = themedStyles[themeType]

return {
'& .ant-picker-time-panel': {
'& .ant-picker-content': generateTimePanelColumnStyles(themeType),
'& .ant-picker-header': {
borderBottomColor: borderColor,
color
},
'& .ant-picker-header': {
borderBottomColor: borderColor
}
background,
borderLeftColor: borderColor
}
}
}

const generateCarrotStyles = (themeType: ThemeType) => {
const {
base: { background }
} = dropdownStyles[themeType]

return {
'& .ant-picker-range-arrow': {
'&:after': {
background,
border: `1px solid ${background}`
},
background
}
}
}
Expand All @@ -113,27 +222,21 @@ export const generateDropdownStyles = (themeType: ThemeType) => {
base: { borderColor, color }
} = themedStyles[themeType]
return {
'&.ant-picker-dropdown.ant-picker-dropdown-range > .ant-picker-range-wrapper': {
'& .ant-picker-panel-container': {
'& .ant-picker-panels': {
'& .ant-picker-panel': {
...generateDatePanelStyles(themeType),
'& .ant-picker-time-panel': {
'& .ant-picker-content': generateTimePanelColumnStyles(
themeType
),
'& .ant-picker-header': {
borderBottomColor: borderColor
},
background,
borderLeftColor: borderColor
},
borderBottomColor: borderColor
}
},
background,
boxShadow,
color
'&.ant-picker-dropdown': {
'& .ant-picker-range-wrapper': {
...generateCarrotStyles(themeType),
'& .ant-picker-panel-container': {
'& .ant-picker-panels': {
'& .ant-picker-panel': {
...generateDatePanelStyles(themeType),
...generateTimePanelStyles(themeType),
borderBottomColor: borderColor
}
},
background,
boxShadow,
color
}
}
}
}
Expand Down Expand Up @@ -170,7 +273,3 @@ export const generateDateRangeInputStyles = (themeType: ThemeType) => {
}
}
}

/*
& .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover::before, & .ant-picker-cell-in-view.ant-picker-cell-range-start.ant-picker-cell-range-hover::before, & .ant-picker-cell-in-view.ant-picker-cell-range-end.ant-picker-cell-range-hover::before, & .ant-picker-cell-in-view.ant-picker-cell-range-start:not(.ant-picker-cell-range-start-single).ant-picker-cell-range-hover-start::before, & .ant-picker-cell-in-view.ant-picker-cell-range-end:not(.ant-picker-cell-range-end-single).ant-picker-cell-range-hover-end::before
*/
4 changes: 2 additions & 2 deletions src/components/assets/styles/themes.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -156,10 +156,10 @@ export const dropdownStyles = {
boxShadow: '0px 2px 8px rgba(255, 255, 255, 0.08)'
},
hover: {
background: blacks['lighten-10']
background: blacks.base
},
selected: {
background: blacks.base,
background: blacks['lighten-10'],
color: grays.base
}
},
Expand Down

0 comments on commit 9073faa

Please sign in to comment.