openecomp-ui/src/sdc-app/Test.jsx

   1 import React from 'react';
   2 import Tabs from 'react-bootstrap/lib/Tabs.js';
   3 import Tab from 'react-bootstrap/lib/Tab.js';
   4 import Button from 'react-bootstrap/lib/Button.js';
   5 import ButtonGroup from 'react-bootstrap/lib/ButtonGroup.js';
   6 import DropdownButton from 'react-bootstrap/lib/DropdownButton.js';
   7 import MenuItem from 'react-bootstrap/lib/MenuItem.js';
   8
   9 import Modal from 'nfvo-components/modal/Modal.jsx';
  10 import ValidationForm from 'nfvo-components/input/validation/ValidationForm.jsx';
  11 import ValidationInput from 'nfvo-components/input/validation/ValidationInput.jsx';
  12 import ToggleInput from 'nfvo-components/input/ToggleInput.jsx';
  13
  14 export default class Test extends React.Component {
  15
  16         render() {
  17                 return (
  18                         <div>
  19                                 <Tabs defaultActiveKey={2}>
  20                                         <Tab eventKey={1} title='Tab 1'>Tab 1 content</Tab>
  21                                         <Tab eventKey={2} title='Tab 2'>Tab 2 content</Tab>
  22                                         <Tab eventKey={3} title='Tab 3' disabled>Tab 3 content</Tab>
  23                                 </Tabs>
  24                                 <div style={{marginTop: 20, marginBottom: 20}}></div>
  25                                 <Button>Default</Button>
  26                                 <span style={{marginLeft: 20}}></span>
  27                                 <Button bsStyle='primary'>Primary</Button>
  28                                 <span style={{marginLeft: 20}}></span>
  29                                 <Button bsStyle='success'>Success</Button>
  30                                 <span style={{marginLeft: 20}}></span>
  31                                 <Button bsStyle='info'>Info</Button>
  32                                 <span style={{marginLeft: 20}}></span>
  33                                 <Button bsStyle='warning'>Warning</Button>
  34                                 <span style={{marginLeft: 20}}></span>
  35                                 <Button bsStyle='danger'>Danger</Button>
  36                                 <span style={{marginLeft: 20}}></span>
  37                                 <Button bsStyle='link'>Link</Button>
  38                                 <div style={{marginTop: 20, marginBottom: 20}}></div>
  39                                 <ButtonGroup>
  40                                         <Button>Left</Button>
  41                                         <Button>Middle</Button>
  42                                         <Button>Right</Button>
  43                                 </ButtonGroup>
  44                                 <div style={{marginTop: 20, marginBottom: 20}}></div>
  45                                 <DropdownButton title='title' id='dropdown-basic'>
  46                                         <MenuItem eventKey='1'>Action</MenuItem>
  47                                         <MenuItem eventKey='2'>Another action</MenuItem>
  48                                         <MenuItem eventKey='3' active>Active Item</MenuItem>
  49                                         <MenuItem divider/>
  50                                         <MenuItem eventKey='4'>Separated link</MenuItem>
  51                                 </DropdownButton>
  52
  53                                 <div style={{marginTop: 20, marginBottom: 20}}></div>
  54                                 <Modal show={false}>
  55                                         <Modal.Header closeButton>
  56                                                 <Modal.Title>Modal title</Modal.Title>
  57                                         </Modal.Header>
  58
  59                                         <Modal.Body>
  60                                                 One fine body...
  61                                         </Modal.Body>
  62
  63                                         <Modal.Footer>
  64                                                 <Button>Close</Button>
  65                                                 <Button bsStyle='primary'>Save changes</Button>
  66                                         </Modal.Footer>
  67
  68                                 </Modal>
  69
  70                                 <div style={{marginTop: 20, marginBottom: 20}}></div>
  71
  72                                 <ValidationForm>
  73                                         <ValidationInput
  74                                                 type='text'
  75                                                 label='Required'
  76                                                 placeholder='Enter text'
  77                                                 validations={{required: true}}/>
  78                                         <ValidationInput
  79                                                 type='text'
  80                                                 label='Text'
  81                                                 placeholder='Enter text'
  82                                                 validations={{required: true, minLength:5}}/>
  83                                         <ValidationInput
  84                                                 type='email'
  85                                                 label='Email Address'
  86                                                 placeholder='Enter email'
  87                                                 validations={{required: true, email: true}}/>
  88                                         <ValidationInput type='password' label='Password'/>
  89                                         <ValidationInput type='file' label='File' help='[Optional] Block level help text'/>
  90                                         <ValidationInput type='checkbox' label='Checkbox2' name='ziv'/>
  91                                         <ValidationInput type='radio' label='Radio' name='zzz'/>
  92                                         <ValidationInput type='select' label='Select' placeholder='select'>
  93                                                 <option value='select'>select</option>
  94                                                 <option value='other'>...</option>
  95                                         </ValidationInput>
  96                                         <ValidationInput type='select' label='Multiple Select' multiple>
  97                                                 <option value='select'>select (multiple)</option>
  98                                                 <option value='other'>...</option>
  99                                         </ValidationInput>
 100                                         <ValidationInput type='textarea' label='Text Area' placeholder='textarea'/>
 101                                         <ToggleInput value={true}/>
 102                                         <ToggleInput />
 103                                         <ToggleInput label='ziv' value={true}/>
 104                                         <ToggleInput label='ziv'/>
 105                                 </ValidationForm>
 106                         </div>
 107                 );
 108         }
 109
 110         doSomething(a) {
 111                 if (a) {
 112                         this.doSomething2();
 113                 }
 114                 else {
 115                         return 1;
 116                 }
 117         }
 118
 119         doSomething2() {
 120                 return 2;
 121         }
 122 }