input-boolean/src/input-boolean.js

A boolean-input-type component built with bel and csjs-inject

const bel = require('bel')
const csjs = require('csjs-inject')
const validator = require('solidity-validator')

module.exports = displayBooleanInput

function displayBooleanInput ({ theme: { classes: css, colors }, type, cb, focus }) {
  const boolFalse = bel `<div class="${css.columns} ${css.false}" data-state="" data-type="boolean" value="false" onclick=${toggle}>false</div>`
  const boolTrue = bel `<div class="${css.columns} ${css.true}" data-state="" data-type="boolean" value="true" onclick=${toggle}>true</div>`
  const input = bel`<div class=${css.booleanField} onclick=${(e)=>focus(e)}>
    ${boolFalse}
    ${boolTrue}
  </div>`
  return input

  function toggle (e) {
    let value = e.target.innerHTML
    cb(validator.getMessage('boolean', value), e.target, value)
    if (value === 'true') {
      boolFalse.style.color = colors.booleanFieldColor
      boolFalse.style.backgroundColor = colors.booleanFieldBackgroundColor
      boolFalse.dataset.state = ""
      boolTrue.dataset.state = "active"
      boolTrue.style.color = colors.booleanFieldActiveColor
      boolTrue.style.backgroundColor = colors.booleanFieldTruedBackgroundColor
    } else if (value === 'false') {
      boolTrue.style.color = colors.booleanFieldColor
      boolTrue.style.backgroundColor = colors.booleanFieldBackgroundColor
      boolTrue.dataset.state = ""
      boolFalse.dataset.state = "active"
      boolFalse.style.color = colors.booleanFieldActiveColor
      boolFalse.style.backgroundColor = colors.booleanFieldFalsedBackgroundColor
    }
  }

}