All files / src/demo App.js

0% Statements 0/7
100% Branches 0/0
0% Functions 0/4
0% Lines 0/7
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111                                                                                                                                                                                                                             
import React, {Component} from 'react';
import './App.css';
import EasyEdit from "../lib/EasyEdit";
 
class App extends Component {
 
  static onTest(value) {
    alert(value);
  }
 
  static generateOptions() {
    return [
      {label: 'Test One', value: 'testone'},
      {label: 'Test Two', value: 'testtwo'},
      {label: 'Test Three', value: 'testthree'},
      {label: 'Test Four', value: 'testfour'}
    ]
  }
 
  static generateValues() {
    return ['testone', 'testtwo'];
  }
 
  render() {
    return (
        <div className="App">
          <header className="App-header">
            <div>
              <h1>React Easy Edit</h1>
              <h3>Input Field</h3>
              <h4>type "text"</h4>
              <EasyEdit
                  type="text"
                  value="Test Input Field"
                  onSave={App.onTest}
                  name="name-one"
              />
              <EasyEdit
                  type="text"
                  onSave={App.onTest}
                  name="name-two"
              />
              <h4>type "color"</h4>
              <EasyEdit
                  type="color"
                  value="#ff00ff"
                  onSave={App.onTest}
                  name="name-one"
              />
              <h4>type "date"</h4>
              <EasyEdit
                  type="date"
                  onSave={App.onTest}
                  name="name-one"
              />
              <h4>type "number"</h4>
              <EasyEdit
                  type="number"
                  value={1}
                  onSave={App.onTest}
                  name="name-one"
              />
              <EasyEdit
                  type="number"
                  onSave={App.onTest}
                  name="name-two"
              />
              <h4>type "radio"</h4>
              <EasyEdit
                  type="radio"
                  value="testone"
                  onSave={App.onTest}
                  options={App.generateOptions()}
                  name="long"
              />
              <h3>Textarea</h3>
              <EasyEdit
                  type="textarea"
                  value="Test Textarea"
                  onSave={App.onTest}
                  name="name0three"
              />
              <EasyEdit
                  type="textarea"
                  onSave={App.onTest}
                  name="name0three"
              />
              <h3>Select</h3>
              <EasyEdit
                  type="select"
                  options={App.generateOptions()}
                  onSave={App.onTest}
                  name="test"
              />
              <h3>Checkbox</h3>
              <EasyEdit
                  type="checkbox"
                  options={App.generateOptions()}
                  onSave={App.onTest}
                  name="testfour"
                  value={App.generateValues()}
              />
            </div>
          </header>
        </div>
    );
  }
}
 
export default App;