lamassu/lamassu-server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: move selected date container up

Browse source 
Allows reuse of the date range picker by making the display of the
selected range independent from the picker.
This commit is contained in:
Luis Félix 2019-11-14 11:36:51 +00:00 • committed by Josh Harvey
parent 769822fce9
commit e97a28a814
2 changed files with 96 additions and 96 deletions
Download patch file Download diff file Expand all files Collapse all files

100
new-lamassu-admin/src/components/LogsDownloaderPopover.js
View file

@ -5,15 +5,72 @@ import { toInteger } from 'lodash/fp'
import moment from 'moment'
import { makeStyles } from '@material-ui/core'
import { ReactComponent as Arrow } from '../styling/icons/arrow/download_logs.svg'
import typographyStyles from '../components/typography/styles'
import { primaryColor } from '../styling/variables'
import { primaryColor, offColor, zircon } from '../styling/variables'
import { Link } from './buttons'
import { RadioGroup } from './inputs'
import Popover from './Popover'
import DateRangePicker from './date-range-picker/DateRangePicker'
const { h4 } = typographyStyles
const { info1, label1, label2, h4 } = typographyStyles
const dateContainerStyles = {
wrapper: {
height: 46,
width: 99
},
container: {
display: 'flex'
},
monthWeekDayContainer: {
display: 'flex',
flexDirection: 'column'
},
label: {
extend: label1,
lineHeight: 1.33,
color: primaryColor
},
bigNumber: {
extend: info1,
lineHeight: 1,
marginRight: 7
},
monthYear: {
extend: label2,
lineHeight: 1.17,
color: primaryColor
},
weekDay: {
extend: label1,
lineHeight: 1.33,
color: offColor
}
}
const dateContainerUseStyles = makeStyles(dateContainerStyles)
const DateContainer = ({ date, children, ...props }) => {
const classes = dateContainerUseStyles()
return (
<div className={classes.wrapper}>
<div className={classes.label}>{children}</div>
{date &&
<>
<div className={classes.container}>
<div className={classes.bigNumber}>{date.format('D')}</div>
<div className={classes.monthWeekDayContainer}>
<span className={classes.monthYear}>{`${date.format('MMM')} ${date.format('YYYY')}`}</span>
<span className={classes.weekDay}>{date.format('dddd')}</span>
</div>
</div>
</>}
</div>
)
}
const styles = {
popoverContent: {
@ -42,6 +99,23 @@ const styles = {
},
download: {
padding: [[10, 15]]
},
dateContainerWrapper: {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
position: 'relative',
backgroundColor: zircon,
padding: [[0, 15]],
minHeight: 70
},
arrowContainer: {
position: 'absolute',
left: 116,
top: 26
},
arrow: {
margin: 'auto'
}
}
@ -99,11 +173,23 @@ const LogsDownloaderPopover = ({ id, open, anchorEl, onClose, logsResponse, ...p
className={classes.radioButtons}
/>
</div>
<DateRangePicker
maxDate={moment()}
handleChange={handleRangeChange}
className={classnames(dateRangePickerClasses)}
/>
<div className={classnames(dateRangePickerClasses)}>
<div className={classes.dateContainerWrapper}>
{range && (
<>
<DateContainer date={range.from}>From</DateContainer>
<div className={classes.arrowContainer}>
<Arrow className={classes.arrow} />
</div>
<DateContainer date={range.to}>To</DateContainer>
</>
)}
</div>
<DateRangePicker
maxDate={moment()}
onRangeChange={handleRangeChange}
/>
</div>
<div className={classes.download}>
<Link
color='primary'

92
new-lamassu-admin/src/components/date-range-picker/DateRangePicker.js
View file

@ -4,101 +4,22 @@ import { makeStyles } from '@material-ui/core/styles'
import Calendar from './Calendar'
import { ReactComponent as Arrow } from '../../styling/icons/arrow/download_logs.svg'
import { primaryColor, offColor, zircon } from '../../styling/variables'
import typographyStyles from '../typography/styles'
const { info1, label1, label2 } = typographyStyles
const dateContainerStyles = {
wrapper: {
height: 46,
width: 99
},
container: {
display: 'flex'
},
monthWeekDayContainer: {
display: 'flex',
flexDirection: 'column'
},
label: {
extend: label1,
lineHeight: 1.33,
color: primaryColor
},
bigNumber: {
extend: info1,
lineHeight: 1,
marginRight: 7
},
monthYear: {
extend: label2,
lineHeight: 1.17,
color: primaryColor
},
weekDay: {
extend: label1,
lineHeight: 1.33,
color: offColor
}
}
const dateContainerUseStyles = makeStyles(dateContainerStyles)
const DateContainer = ({ date, children, ...props }) => {
const classes = dateContainerUseStyles()
return (
<div className={classes.wrapper}>
<div className={classes.label}>{children}</div>
{date &&
<>
<div className={classes.container}>
<div className={classes.bigNumber}>{date.format('D')}</div>
<div className={classes.monthWeekDayContainer}>
<span className={classes.monthYear}>{`${date.format('MMM')} ${date.format('YYYY')}`}</span>
<span className={classes.weekDay}>{date.format('dddd')}</span>
</div>
</div>
</>}
</div>
)
}
const styles = {
wrapper: {
backgroundColor: 'white',
borderRadius: 10
},
dateThingyContainer: {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
position: 'relative',
backgroundColor: zircon,
padding: [[0, 15]],
minHeight: 70
},
arrowContainer: {
position: 'absolute',
left: 116,
top: 26
},
arrow: {
margin: 'auto'
}
}
const useStyles = makeStyles(styles)
const DateRangePicker = ({ minDate, maxDate, className, handleChange, ...props }) => {
const DateRangePicker = ({ minDate, maxDate, className, onRangeChange, ...props }) => {
const [from, setFrom] = useState(null)
const [to, setTo] = useState(null)
useEffect(() => {
handleChange(from, to)
}, [to])
onRangeChange(from, to)
}, [from, to])
const classes = useStyles()
@ -120,13 +41,6 @@ const DateRangePicker = ({ minDate, maxDate, className, handleChange, ...props }
return (
<>
<div className={classnames(classes.wrapper, className)}>
<div className={classes.dateThingyContainer}>
<DateContainer date={from}>From</DateContainer>
<div className={classes.arrowContainer}>
<Arrow className={classes.arrow} />
</div>
<DateContainer date={to}>To</DateContainer>
</div>
<Calendar from={from} to={to} minDate={minDate} maxDate={maxDate} handleSelect={handleSelect} />
</div>
</>