Skip to content

Instantly share code, notes, and snippets.

@jirikolarik
Last active December 1, 2015 19:25
Show Gist options
  • Save jirikolarik/f8229be218cb9e6a72a5 to your computer and use it in GitHub Desktop.
Save jirikolarik/f8229be218cb9e6a72a5 to your computer and use it in GitHub Desktop.
Upwork
Display the source blob
Display the rendered blob
Raw
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
import React, { Component } from 'react';
import styles from './styles.sass';
import icon from './icon.svg';
import iconActive from './icon-active.svg';
import cx from 'classnames';
export default class Picker extends Component {
constructor() {
super();
this.state = {
size: 'XS',
availableSizes: ['XS', 'S', 'M', 'L', 'XL'],
};
}
onClick = (size) => {
this.setState({size: size});
}
renderItem = (size, index) => {
const width = 60 + index * 20;
const active = this.state.size === size;
const className = cx(styles.item, {[styles.active]: active});
const src = active ? iconActive : icon;
return(
<div key={size} onClick={this.onClick.bind(this, size)} className={className}>
<img width={`${width}px`} src={src} />
{size}
</div>
);
}
render() {
return (
<div>
Your size: {this.state.size}
<hr/>
{this.state.availableSizes.map(this.renderItem)}
</div>
);
}
}
.item
margin: 20px
display: inline
.active
color: white
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment