102 lines
2 KiB
JavaScript
102 lines
2 KiB
JavaScript
import { makeStyles } from '@mui/styles'
|
|
import classnames from 'classnames'
|
|
import React from 'react'
|
|
|
|
import typographyStyles from 'src/components/typography/styles'
|
|
import {
|
|
primaryColor,
|
|
spring2,
|
|
spring3,
|
|
disabledColor
|
|
} from 'src/styling/variables'
|
|
|
|
const { label1 } = typographyStyles
|
|
|
|
const styles = {
|
|
wrapper: {
|
|
height: 26,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
position: 'relative',
|
|
overflow: 'hidden'
|
|
},
|
|
button: {
|
|
outline: 'none',
|
|
extend: label1,
|
|
border: 'none',
|
|
cursor: 'pointer',
|
|
backgroundColor: 'transparent',
|
|
color: primaryColor,
|
|
zIndex: 2
|
|
},
|
|
lowerBound: {
|
|
left: '50%'
|
|
},
|
|
upperBound: {
|
|
right: '50%'
|
|
},
|
|
selected: {
|
|
width: 26,
|
|
height: 26,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
backgroundColor: spring2,
|
|
borderRadius: '50%',
|
|
position: 'absolute',
|
|
zIndex: 1
|
|
},
|
|
between: {
|
|
position: 'absolute',
|
|
width: '100%',
|
|
height: '100%',
|
|
zIndex: 0,
|
|
backgroundColor: spring3
|
|
},
|
|
disabled: {
|
|
color: disabledColor,
|
|
cursor: 'default'
|
|
}
|
|
}
|
|
|
|
const useStyles = makeStyles(styles)
|
|
|
|
const Tile = ({
|
|
isLowerBound,
|
|
isUpperBound,
|
|
isBetween,
|
|
isDisabled,
|
|
children,
|
|
...props
|
|
}) => {
|
|
const classes = useStyles()
|
|
const selected = isLowerBound || isUpperBound
|
|
|
|
const rangeClasses = {
|
|
[classes.between]: isBetween && !(isLowerBound && isUpperBound),
|
|
[classes.lowerBound]: isLowerBound && !isUpperBound,
|
|
[classes.upperBound]: isUpperBound && !isLowerBound
|
|
}
|
|
|
|
const buttonWrapperClasses = {
|
|
[classes.wrapper]: true,
|
|
[classes.selected]: selected
|
|
}
|
|
|
|
const buttonClasses = {
|
|
[classes.button]: true,
|
|
[classes.disabled]: isDisabled
|
|
}
|
|
|
|
return (
|
|
<div className={classes.wrapper}>
|
|
<div className={classnames(rangeClasses)} />
|
|
<div className={classnames(buttonWrapperClasses)}>
|
|
<button className={classnames(buttonClasses)}>{children}</button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Tile
|