Recact

by HYEONGJINKIM

HTML

<script type="text/javascript" src="http://underscorejs.org/underscore-min.js"></script>

CSS

.box {
    width: 50px;
    height: 50px;
    background-color: black;
    cursor: pointer;
    -webkit-transition: opacity 0.4s;
    -moz-transition: opacity 0.4s;
    transition: opacity 0.4s;
    float: left;
}

.selected {
    opacity: 0.85;
}

.selected:hover {
    opacity: 1;
}

.unselected {
    opacity: 0.5;
}

.unselected:hover {
    opacity: 0.65;
}

JavaScript

var MainV = React.createClass({
    
    
    
    getDefaultProps: function(){
        return {
            rows: null
        }
    },
    
    
    
    getInitialState: function(){
        return {
            
        }
    },
    
    
    
    __onItemRendererSelect: function(data){
        // alert(data.color)
    },
    
    
    
    render: function(){
        var _this = this;
        return React.DOM.div({
            className: 'root'
        },
            _.map(this.props.rows, function(row){
                return new ItemRendererV({
                    data: row,
                    onSelect: _this.__onItemRendererSelect
                });
            })
        )
    }
    
    
    
})





var ItemRendererV = React.createClass({
    
    
    
    getDefaultProps: function(){
        return {
            data: {
                color: null,
                value: null
            },
            onSelect: null
        }
    },
    
    
    
    getInitialState: function(){
        return {
            selected: false
        }
    },
    
    
    
    __onClick: function(){
        this.setState({selected: !this.state.selected}, function(){
            if(this.state.selected && this.props.onSelect){
                this.props.onSelect(this.props.data);
            }
        })
    },
    
    
    
    render: function(){
        return React.DOM.div({
            className: 'box ' + (this.state.selected ? 'selected' : 'unselected'),
            onClick: this.__onClick,
            style: {
                backgroundColor: this.props.data.value
            }
        }, this.props.data.color)
    }
    
    
    
})



// Colors from: http://flatuicolors.com
var getData = function getData(items){
    if(!items || items < 1){items = 10}
    var colors = [];
    while(items--){
        colors.push(getRandomColor())
    }
    return colors;
}
var colors = [
        {
            color: "Peter River",
            value: "#3498db"
        },
    ...