react-ui-component
Version:
some component build with ReactJs
316 lines (310 loc) • 11.7 kB
JSX
import React, { Component } from 'react';
import {DropDown, Item} from './index.js';
const options = [
{name: 'apple', value: 1},
{name: 'banana', value: 2},
{name: 'cat', value: 3, disabled: true},
{name: 'dog', value: 4},
{name: 'egg', value: 5},
];
export default class DropDownDemo extends Component {
constructor(props){
super(props);
this.state = {
value: null,
value1: 5,
value2: '',
value3: [2, 4],
value4: [1, 3],
value5: null,
value6: [],
};
}
displayChange(stat, value){
this.setState({
[String(stat)]: value,
});
}
render() {
return (
<div style={{"minHeight": 2200}}>
<h3>Dropdown</h3>
<ul>
<li>
<h4>Default dropdown</h4>
<p>you selected option value is <span className="gap-word">{this.state.value}</span></p>
<div style={{'width': '280px'}}>
<DropDown
options={options}
labelName='name'
valueName='value'
onChange={this.displayChange.bind(this, 'value')} />
</div>
<pre>
<code>
{`<DropDown
options={options}
labelName='name'
valueName='value'
onChange={displayChange}
/>`}
</code>
</pre>
</li>
<li>
<h4>Disabled dropdown</h4>
<div style={{'width': '280px'}}>
<DropDown
options={options}
labelName='name'
valueName='value'
disabled
onChange={val => val} />
</div>
<pre>
<code>
{`<DropDown
options={options}
labelName='name'
valueName='value'
disabled
onChange={displayChange}
/>`}
</code>
</pre>
</li>
<li>
<h4>Dropdown with default selected</h4>
<p>this will change value of next dropdown</p>
<div style={{'width': '280px'}}>
<DropDown
options={options}
labelName='name'
valueName='value'
onChange={this.displayChange.bind(this, 'value1')} defaultSelected={true}/>
</div>
<pre>
<code>
{`<DropDown
options={options}
labelName='name'
valueName='value'
onChange={displayChange}
defaultSelected
/>`}
</code>
</pre>
</li>
<li>
<h4>Dropdown received value</h4>
<p>will not change previous value</p>
<div style={{'width': '280px'}}>
<DropDown
options={options}
labelName='name'
valueName='value'
value={this.state.value1}
onChange={this.displayChange.bind(this, 'value1')}
/>
</div>
<pre>
<code>
{`
<DropDown
options={options}
labelName='name'
value={value}
onChange={displayChange}
valueName='value'
/>`}
</code>
</pre>
</li>
<li>
<h4>Dropdown with search field</h4>
<p>this will change value of prev dropdown</p>
<div style={{'width': '280px'}}>
<DropDown
options={options}
labelName='name'
onChange={this.displayChange.bind(this, 'value1')}
valueName='value'
searchable
onSearch={text => console.log(text)}
/>
</div>
<pre>
<code>
{`
<DropDown
options={options}
labelName='name'
onChange={displayChange}
valueName='value'
searchable
/>`}
</code>
</pre>
</li>
<li>
<h4>Multiple dropdown</h4>
<p>selected value is <span className="gap-word">{this.state.value2}</span></p>
<div style={{'width': '280px'}}>
<DropDown
options={options}
labelName='name'
valueName='value'
multi
value={this.state.value2}
onChange={this.displayChange.bind(this, 'value2')}/>
</div>
<pre>
<code>
{`
<DropDown
options={options}
labelName='name'
valueName='value'
multi
value={value}
onChange={displayChange}
/>`}
</code>
</pre>
</li>
<li>
<h4>Multiple dropdown</h4>
<p>change previous value</p>
<div style={{'width': '280px'}}>
<DropDown
options={options}
labelName='name'
value={this.state.value3}
valueName='value'
multi
onChange={this.displayChange.bind(this, 'value2')}/>
</div>
<pre>
<code>
{`
<DropDown
options={options}
labelName='name'
value={value}
valueName='value'
multi
onChange={displayChange}
/>`}
</code>
</pre>
</li>
<li>
<h4>Yield children</h4>
<div style={{'width': '280px'}}>
<DropDown
labelName="name"
valueName="value"
value={this.state.value1}
onChange={this.displayChange.bind(this, 'value5')}>
<Item value={1} name="apple">
<p>hate the show, love the animal</p>
<img style={{ "width": "100px"}} src="https://raw.githubusercontent.com/jerryshew/design/master/png/sad-morty.png" alt=""/>
</Item>
<Item value={2} name="banana">
<h2>this is banana</h2>
</Item>
<Item value={3} name="cat">
<h4>this is cat</h4>
</Item>
<Item value={4} name="dog" disabled={true}>
blog site: <a href="http://braavos.me" target="_blank">lacuna</a>
</Item>
<Item value={5} name="egg">
<i style={{'fontStyle': 'italic'}}>egg's gooood</i>
</Item>
</DropDown>
</div>
<pre>
<code>
{`
<DropDown
labelName="name"
valueName="value"
value={value}
onChange={displayChange}>
<Item
value={1}
name="apple">
<p>hate the show, love the animal</p>
<img style={{ "width": "100px"}}
src="https://raw.githubusercontent.com/jerryshew/design/master/png/sad-morty.png"
alt=""
/>
...
</Item>
...
</DropDown>`}
</code>
</pre>
</li>
<li>
<h4>Yield children(multi)</h4>
<div style={{'width': '280px'}}>
<DropDown
multi
labelName="name"
valueName="value"
value={this.state.value4}
onChange={this.displayChange.bind(this, 'value6')}>
<Item value={1} name="apple">
<p>hate the show, love the animal</p>
<img style={{ "width": "100px"}} src="https://raw.githubusercontent.com/jerryshew/design/master/png/sad-morty.png" alt=""/>
</Item>
<Item value={2} name="banana">
<h2>this is banana</h2>
</Item>
<Item value={3} name="cat">
<h4>this is cat</h4>
</Item>
<Item value={4} name="dog" disabled={true}>
blog site: <a href="http://braavos.me" target="_blank">lacuna</a>
</Item>
<Item value={5} name="egg">
<i style={{'fontStyle': 'italic'}}>egg's gooood</i>
</Item>
</DropDown>
</div>
<pre>
<code>
{`
<DropDown
multi
labelName="name"
valueName="value"
value={value}
onChange={displayChange}>
<Item
value={1}
name="apple">
...
</Item>
...
</DropDown>`}
</code>
</pre>
</li>
<li>
<h4>DropDown with position</h4>
<p>top/bottom, default is bottom</p>
<div style={{'width': '280px'}}>
<DropDown
options={options}
position="top"
onChange={value => console.log(value)}/>
</div>
</li>
</ul>
</div>
);
}
}