Editing Label Colors

In notebook:
Building Modern Web Apps
Created at:
2016-01-29
Updated:
2016-01-29
Tags:
libraries JavaScript React Ampersand
We could just use the state color.
  // ****     components/label-item.js        ****
import React form 'react'
import ampersandMixin form 'ampersand-react-mixin'

export default React.createClass({
    mixins: [ampersandMixin]
    
    onDeletClick (event) { ... }
    
    onEditClick () { ... },
    
    onCancelClick () { 
        event.preventDefault()
        this.props.label.editing = false
        // ++++ 5. revert the editing
        this.setState(this.getInitialState())
    },
    
    getInitialState () {
        const {name, color} = this.props.label
        
        return {
            name: name,
            color: color
        }
    },
    
    onNameChange (event) {
        this.setState({ 
            name: event.target.value
        })
    },
    
    // ++++ 4. create the handler
    onColorChange (event) {
        this.setState({
            // cuts the first character (the #) - so the # will always stay in the input
            // only saves the value after the #
            color: event.target.value.slice(1) 
        })
    }
    
    render () {
        const {label} = this.props
        // ++++ 1. use the state color
        const {color} = this.state
        const cssColor = '#' + color
        let content
        
        if (label.editing) { 
            content = (
                <form className='label'>
                    ...
                    // ++++ 2. can use the component state color
                    <span style={{backgroundColor: cssColor}} className="..." />
                    <input name='name' type='text' value={this.state.name} onChange={this.onNameChange} />
                    // ++++ 3. add an onchange handler for the color picker
                    <input name='color' onChange={this.onColorChange}  value={cssColor} />
                </form>
            )
        } else {
            content = (
                <div className='label'>
                    ...
                </div>    
            )
        }
        return (<div>{content}</div>)
    }
})