You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
carbon/components/ThemeSelect.js

65 lines
1.4 KiB
JavaScript

import React from 'react'
import { Hyper, BW, None } from './svg/Themes'
const THEME_IMGS = [None, Hyper, BW]
export default class extends React.Component {
constructor(props) {
super()
this.state = { selected: props.selected || THEME_IMGS[0] }
this.select = this.select.bind(this)
}
select(theme) {
if (this.state.selected !== theme) {
this.props.onChange(theme)
this.setState({ selected: theme })
}
}
renderThemes() {
return THEME_IMGS.map((Img, i) => (
<div className={`theme ${this.state.selected === Img ? "selected" : ""}`}
key={i} onClick={this.select.bind(null, Img)}>
<Img/>
<style jsx>{`
.theme {
margin-right: 8px;
}
.theme:last-of-type {
margin-right: 0px;
}
`}</style>
</div>
))
}
render() {
return (
<div className="window-theme">
<span className="label">Theme</span>
<div className="themes">
{ this.renderThemes() }
</div>
<style jsx>{`
.window-theme {
padding: 8px;
}
.window-theme span {
display: inline-block;
margin-bottom: 8px;
}
.themes {
display: flex;
flex-direction: row;
width: 100%;
}
`}</style>
</div>
)
}
}