index-source.js

import reactPolymer from '../'

import React from 'react'
import {render} from 'react-dom'

import {
  IronAutogrowTextarea,
  PaperToggleButton,
  PaperCheckbox,
  PaperInput,
  PaperTextarea,
  PaperSlider,
  PaperListbox,
  PaperRadioGroup,
  PaperTabs,
  IronSelector
} from '../input'

reactPolymer.registerEvent('color-picker-selected', 'onColorPickerSelected')

function App () {
  const c = new React.Component()
  c.state = {
    text: 'Hello world',
    textarea: 'Hello world\nin 2 lines',
    value: 30,
    checked: false,
    editable: true,
    selected: 'small',
    color: ''
  }

  function textChange (event) {
    console.log('textChange, new value: %s', event.target.value)
    if (c.state.editable) {
      c.setState({text: event.target.value})
    }
  }
  function textareaChange (event) {
    console.log('textareaChange, new value: %s', event.target.value)
    if (c.state.editable) {
      c.setState({textarea: event.target.value})
    }
  }
  function valueChange (event) {
    console.log('valueChange, new value: %s', event.target.value)
    if (c.state.editable) {
      c.setState({value: +event.target.value})
    }
  }
  function checkedChange (event) {
    console.log('checkedChange, new value: %s', event.target.checked)
    if (c.state.editable) {
      c.setState({checked: event.target.checked})
    }
  }
  function selectedChange (event) {
    var selected = event.target.selected || event.target.value
    console.log('selectedChange, new value: %s', selected)
    if (c.state.editable) {
      c.setState({selected: selected})
    }
  }

  function editableChange (event) {
    c.setState({editable: event.target.checked})
  }

  function colorChange (event) {
    c.setState({color: event.target.color})
  }

  c.render = () => (
    <div>
      <h1>react-polymer demo</h1>

      <table>
        <tbody>
          <tr>
            <td />
            <td>Native</td>
            <td>Paper</td>
            <td>Iron</td>
          </tr>
          <tr>
            <td>Text</td>
            <td><input type='text' value={c.state.text} onChange={textChange} /></td>
            <td><PaperInput label='Label' value={c.state.text} onChange={textChange} /></td>
            <td>
              <iron-input>
                <input value={c.state.text} onChange={textChange} />
              </iron-input>
            </td>
          </tr>
          <tr>
            <td>Textarea</td>
            <td><textarea value={c.state.textarea} onChange={textareaChange} /></td>
            <td><PaperTextarea label='Label' value={c.state.textarea} onChange={textareaChange} /></td>
            <td><IronAutogrowTextarea value={c.state.textarea} onChange={textareaChange} /></td>
          </tr>
          <tr>
            <td>Slider</td>
            <td><input type='range' value={c.state.value} onChange={valueChange} /></td>
            <td><PaperSlider value={c.state.value} onChange={valueChange} /></td>
            <td />
          </tr>
          <tr>
            <td rowSpan='2'>Checkbox</td>
            <td rowSpan='2'><input type='checkbox' checked={c.state.checked} onChange={checkedChange} /></td>
            <td><PaperCheckbox checked={c.state.checked} onChange={checkedChange}>Label</PaperCheckbox></td>
            <td rowSpan='2' />
          </tr>
          <tr>
            <td><PaperToggleButton checked={c.state.checked} onChange={checkedChange} /></td>
          </tr>
          <tr>
            <td>Radio</td>
            <td>
              <label><input type='radio' name='size' value='small' checked={c.state.selected === 'small'} onChange={selectedChange} /> Small</label>
              <label><input type='radio' name='size' value='medium' checked={c.state.selected === 'medium'} onChange={selectedChange} /> Medium</label>
              <label><input type='radio' name='size' value='large' checked={c.state.selected === 'large'} onChange={selectedChange} /> Large</label>
            </td>
            <td>
              <PaperRadioGroup selected={c.state.selected} onChange={selectedChange}>
                <paper-radio-button name='small'>Small</paper-radio-button>
                <paper-radio-button name='medium'>Medium</paper-radio-button>
                <paper-radio-button name='large'>Large</paper-radio-button>
              </PaperRadioGroup>
            </td>
            <td />
          </tr>
          <tr>
            <td>Dropdown</td>
            <td>
              <label>
                Size <select value={c.state.selected} onChange={selectedChange}>
                  <option value='small'>Small</option>
                  <option value='medium'>Medium</option>
                  <option value='large'>Large</option>
                </select>
              </label>
            </td>
            <td>
              <paper-dropdown-menu label='Size'>
                <PaperListbox slot='dropdown-content' attr-for-selected='value' selected={c.state.selected} onChange={selectedChange}>
                  <paper-item value='small'>Small</paper-item>
                  <paper-item value='medium'>Medium</paper-item>
                  <paper-item value='large'>Large</paper-item>
                </PaperListbox>
              </paper-dropdown-menu>
            </td>
            <td />
          </tr>
          <tr>
            <td rowSpan='2'>Selector</td>
            <td rowSpan='2' />
            <td>
              <PaperTabs attr-for-selected='value' selected={c.state.selected} onChange={selectedChange}>
                <paper-tab value='small'>Small</paper-tab>
                <paper-tab value='medium'>Medium</paper-tab>
                <paper-tab value='large'>Large</paper-tab>
              </PaperTabs>
            </td>
            <td rowSpan='2'>
              <IronSelector attr-for-selected='name' selected={c.state.selected} onChange={selectedChange}>
                <div name='small'>Small</div>
                <div name='medium'>Medium</div>
                <div name='large'>Large</div>
              </IronSelector>
            </td>
          </tr>
          <tr>
            <td>
              <PaperListbox attr-for-selected='value' selected={c.state.selected} onChange={selectedChange}>
                <paper-item value='small'>Small</paper-item>
                <paper-item value='medium'>Medium</paper-item>
                <paper-item value='large'>Large</paper-item>
              </PaperListbox>
            </td>
          </tr>
        </tbody>
      </table>

      <p><label><input type='checkbox' checked={c.state.editable} onChange={editableChange} /> fields editable</label></p>

      <p>Changing className (should keep styling): <PaperToggleButton className={'c' + Math.floor(Math.random() * 9999) + ' other-class'} /></p>

      <p>Color picker: <paper-swatch-picker onColorPickerSelected={colorChange} />{c.state.color && ` selected: ${c.state.color}`}</p>
    </div>
  )
  return c
}

setTimeout(
  () => render(<App />, document.getElementById('react-main')),
  0
)