57 lines
1.6 KiB
JavaScript
57 lines
1.6 KiB
JavaScript
import React, { Component } from "react";
|
|
import { Button, Grid } from "semantic-ui-react";
|
|
|
|
export default class SelectIcons extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
currentIcon: this.props.currentIcon,
|
|
};
|
|
}
|
|
|
|
selectIcon = (e) => {
|
|
let el = e.target.name;
|
|
if (e.target.tagName === "I") {
|
|
el = e.target.parentNode.name;
|
|
}
|
|
this.props.updateIcon(el);
|
|
this.setState({ currentIcon: el });
|
|
};
|
|
|
|
render() {
|
|
const myicons = [
|
|
["home", "coffee", "beer", "glass martini", "film", "video"],
|
|
["music", "headphones", "fax", "phone", "laptop", "bath"],
|
|
["shower", "bed", "child", "warehouse", "car", "bicycle"],
|
|
["motorcycle", "archive", "boxes", "cubes", "chess", "gamepad"],
|
|
["futbol", "table tennis", "server", "tv", "heart", "camera"],
|
|
["trophy", "wrench", "image", "book", "university", "medkit"],
|
|
["paw", "tree", "utensils", "male", "female", "life ring outline"],
|
|
];
|
|
|
|
return (
|
|
<Grid centered relaxed>
|
|
{myicons.map((e, i) => {
|
|
return (
|
|
<Grid.Row key={i}>
|
|
{e.map((e, i) => {
|
|
return (
|
|
<Grid.Column key={i}>
|
|
<Button
|
|
name={e}
|
|
color={e === this.state.currentIcon ? "black" : null}
|
|
icon={e}
|
|
size="small"
|
|
onClick={this.selectIcon}
|
|
/>
|
|
</Grid.Column>
|
|
);
|
|
})}
|
|
</Grid.Row>
|
|
);
|
|
})}
|
|
</Grid>
|
|
);
|
|
}
|
|
}
|