mirror of https://github.com/sgoudham/carbon.git
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.
65 lines
1.4 KiB
JavaScript
65 lines
1.4 KiB
JavaScript
8 years ago
|
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>
|
||
|
)
|
||
|
}
|
||
|
}
|