mirror of https://github.com/sgoudham/carbon.git
Support variable export sizes (#264)
Takahiko Inayama
7 years ago
committed by
Jake Dexheimer
parent
b1ef2d1263
commit
b7adab9bea
@ -0,0 +1,88 @@
|
||||
import React from 'react'
|
||||
import { COLORS } from '../lib/constants'
|
||||
import Checkmark from './svg/Checkmark'
|
||||
import { RESOLUTIONS } from '../lib/constants'
|
||||
|
||||
export default class extends React.Component {
|
||||
constructor(props) {
|
||||
super()
|
||||
this.state = { isVisible: false }
|
||||
this.select = this.select.bind(this)
|
||||
this.toggle = this.toggle.bind(this)
|
||||
}
|
||||
|
||||
select(resolution) {
|
||||
if (this.props.selected !== resolution) {
|
||||
this.props.onChange(resolution)
|
||||
}
|
||||
}
|
||||
|
||||
toggle() {
|
||||
this.setState({ isVisible: !this.state.isVisible })
|
||||
}
|
||||
|
||||
renderResolutions() {
|
||||
return RESOLUTIONS.map((resolution, i) => {
|
||||
return (
|
||||
<div className="list-item" key={i} onClick={this.select.bind(null, resolution.id)}>
|
||||
<span style={{ Resolution: resolution.id }}>{resolution.name}</span>
|
||||
{this.props.selected === resolution.id ? <Checkmark /> : null}
|
||||
<style jsx>{`
|
||||
.list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
padding: 8px 16px;
|
||||
border-bottom: 1px solid ${COLORS.SECONDARY};
|
||||
background: rgba(255, 255, 255, 0.165);
|
||||
}
|
||||
.list-item:first-of-type {
|
||||
border-top: 1px solid ${COLORS.SECONDARY};
|
||||
}
|
||||
.list-item:last-of-type {
|
||||
border-bottom: none;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
render() {
|
||||
const selectedResolution =
|
||||
RESOLUTIONS.filter(resolution => resolution.id === this.props.selected)[0] || {}
|
||||
return (
|
||||
<div className="resolution-select-container">
|
||||
<div
|
||||
onClick={this.toggle}
|
||||
className={`display ${this.state.isVisible ? 'is-visible' : ''}`}
|
||||
>
|
||||
<span className="label">Resolution</span>
|
||||
<span style={{ resolution: selectedResolution.id }}>{selectedResolution.name}</span>
|
||||
</div>
|
||||
<div className="list">{this.renderResolutions()}</div>
|
||||
<style jsx>{`
|
||||
.display {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
padding: 8px;
|
||||
}
|
||||
.list {
|
||||
display: none;
|
||||
margin-top: -1px;
|
||||
max-height: 80px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.is-visible + .list {
|
||||
display: block;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue