# Style Buttons: A Parallel State Demo

SketchSystems.spec

# Style Buttons: A Parallel State Demo
# 2018 August 06
# By Ryan Lucas (Twitter: @ryanlucas)

Font Style Selector&
  Bold
    Bold Off
      bold clicked -> Bold On
    Bold On
      bold clicked -> Bold Off
  Italic
    Italic Off
      italic clicked -> Italic On
    Italic On
      italic clicked -> Italic Off
  Underline
    Underline Off
      underline clicked -> Underline On
    Underline On
      underline clicked -> Underline Off

SketchSystems_prototype.js

function render(model){
  
  class Button extends React.Component {
  
    constructor(props) {
      super(props);
      this.handleClick = this.handleClick.bind(this);
    }
    
    handleClick() {
      model.emit(this.props.action + " clicked");
    }

    render() {
      const activeStates = JSON.stringify(model.active_states.map(s => s.name));
      const toggle = activeStates.toLowerCase().includes(this.props.action + " on");
      
      return <button onClick={this.handleClick} 
                     style={{borderRadius: 4, transition: 'all 1s', background: toggle ? "linear-gradient(to bottom right, #cfe, #5fb)" : "linear-gradient(#fff, #f5f5f5)", border: "none", padding: "8px", margin: "1px", width: "48px", color: "#313131", outline: "none", fontFamily: "Times, Times New Roman, serif", fontWeight: "Bold", boxShadow: toggle ? "inset 0 0 0 1px rgba(0,140,40,.1), 0 0 16px 0 rgba(128,255,200,.4), 0 0 3px 0 rgba(128,255,200,.4)" : "inset 0 0 0 1px rgba(0,0,0,.1)", textDecoration: this.props.action === "underline" ? "underline" : "none", fontStyle: this.props.action === "italic" ? "italic" : "normal", fontSize: "18px" }}>
                     {this.props.name}
             </button>
    }
  }
  
return <div style={{backgroundColor: '#000', display: "flex", width: "100%", height: "100%", alignItems: "center", justifyContent: "center"}}>
         <Button name="B" action="bold" />
         <Button name="I" action="italic" />
         <Button name="U" action="underline" />
        </div>
}