Add prop to autocomplete to place labels below or above input
parent
5e40156304
commit
d41a77cf37
|
@ -11,10 +11,16 @@ const POSITION = {
|
||||||
UP: 'up'
|
UP: 'up'
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const SELECTEDPOSITION = {
|
||||||
|
ABOVE: 'above',
|
||||||
|
BELOW: 'below'
|
||||||
|
};
|
||||||
|
|
||||||
class Autocomplete extends React.Component {
|
class Autocomplete extends React.Component {
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
className: React.PropTypes.string,
|
className: React.PropTypes.string,
|
||||||
direction: React.PropTypes.oneOf(['auto', 'up', 'down']),
|
direction: React.PropTypes.oneOf(['auto', 'up', 'down']),
|
||||||
|
selectedPosition: React.PropTypes.oneOf(['above', 'below']),
|
||||||
disabled: React.PropTypes.bool,
|
disabled: React.PropTypes.bool,
|
||||||
error: React.PropTypes.string,
|
error: React.PropTypes.string,
|
||||||
label: React.PropTypes.string,
|
label: React.PropTypes.string,
|
||||||
|
@ -27,6 +33,7 @@ class Autocomplete extends React.Component {
|
||||||
static defaultProps = {
|
static defaultProps = {
|
||||||
className: '',
|
className: '',
|
||||||
direction: 'auto',
|
direction: 'auto',
|
||||||
|
selectedPosition: 'above',
|
||||||
multiple: true,
|
multiple: true,
|
||||||
source: {}
|
source: {}
|
||||||
};
|
};
|
||||||
|
@ -39,7 +46,7 @@ class Autocomplete extends React.Component {
|
||||||
|
|
||||||
componentWillReceiveProps (nextProps) {
|
componentWillReceiveProps (nextProps) {
|
||||||
if (!this.props.multiple) {
|
if (!this.props.multiple) {
|
||||||
this.setState({query: this.query(nextProps.value)});
|
this.setState({query: nextProps.value});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -187,7 +194,7 @@ class Autocomplete extends React.Component {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div data-react-toolbox='autocomplete' className={className}>
|
<div data-react-toolbox='autocomplete' className={className}>
|
||||||
{this.renderSelected()}
|
{this.props.selectedPosition === 'above' ? this.renderSelected() : null}
|
||||||
<Input
|
<Input
|
||||||
{...other}
|
{...other}
|
||||||
ref='input'
|
ref='input'
|
||||||
|
@ -201,6 +208,7 @@ class Autocomplete extends React.Component {
|
||||||
value={this.state.query}
|
value={this.state.query}
|
||||||
/>
|
/>
|
||||||
{this.renderSuggestions()}
|
{this.renderSuggestions()}
|
||||||
|
{this.props.selectedPosition === 'below' ? this.renderSelected() : null}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -26,6 +26,7 @@ class AutocompleteTest extends React.Component {
|
||||||
return (
|
return (
|
||||||
<Autocomplete
|
<Autocomplete
|
||||||
direction="down"
|
direction="down"
|
||||||
|
selectedPosition="above"
|
||||||
label="Choose countries"
|
label="Choose countries"
|
||||||
onChange={this.handleChange}
|
onChange={this.handleChange}
|
||||||
source={source}
|
source={source}
|
||||||
|
@ -42,6 +43,7 @@ class AutocompleteTest extends React.Component {
|
||||||
|:-----|:-----|:-----|:-----|
|
|:-----|:-----|:-----|:-----|
|
||||||
| `className` | `String` | `''` | Sets a class to style of the Component.|
|
| `className` | `String` | `''` | Sets a class to style of the Component.|
|
||||||
| `direction` | `String` | `auto` | Determines the opening direction. It can be `auto`, `top` or `bottom`. |
|
| `direction` | `String` | `auto` | Determines the opening direction. It can be `auto`, `top` or `bottom`. |
|
||||||
|
| `selectedPosition` | `String` | `above` | Determines if the selected list is shown above or below input. It can be `above` or `below`. |
|
||||||
| `disabled` | `Bool` | `false` | If true, component will be disabled.|
|
| `disabled` | `Bool` | `false` | If true, component will be disabled.|
|
||||||
| `error` | `String` | | Sets the error string for the internal input element.|
|
| `error` | `String` | | Sets the error string for the internal input element.|
|
||||||
| `label` | `String` | | The text string to use for the floating label element.|
|
| `label` | `String` | | The text string to use for the floating label element.|
|
||||||
|
|
|
@ -168,7 +168,7 @@ declare namespace __RT {
|
||||||
*/
|
*/
|
||||||
multiple?: boolean,
|
multiple?: boolean,
|
||||||
/**
|
/**
|
||||||
* Object of key/values or array representing all items suggested.
|
* Object of key/values or array representing all items suggested.
|
||||||
*/
|
*/
|
||||||
source: Object | Array<any>,
|
source: Object | Array<any>,
|
||||||
/**
|
/**
|
||||||
|
@ -177,7 +177,7 @@ declare namespace __RT {
|
||||||
*/
|
*/
|
||||||
type?: string,
|
type?: string,
|
||||||
/**
|
/**
|
||||||
* Value or array of values currently selected component.Current value of the input element.
|
* Value or array of values currently selected component.Current value of the input element.
|
||||||
*/
|
*/
|
||||||
value?: string | Array<any>,
|
value?: string | Array<any>,
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue