Merge pull request #1042 from masakij/relaxing-proptypes
relaxing propTypes of Input & Autocompleteold
commit
da3291be74
|
@ -20,9 +20,15 @@ const factory = (Chip, Input) => {
|
||||||
className: PropTypes.string,
|
className: PropTypes.string,
|
||||||
direction: PropTypes.oneOf(['auto', 'up', 'down']),
|
direction: PropTypes.oneOf(['auto', 'up', 'down']),
|
||||||
disabled: PropTypes.bool,
|
disabled: PropTypes.bool,
|
||||||
error: PropTypes.string,
|
error: React.PropTypes.oneOfType([
|
||||||
|
React.PropTypes.string,
|
||||||
|
React.PropTypes.node
|
||||||
|
]),
|
||||||
keepFocusOnChange: PropTypes.bool,
|
keepFocusOnChange: PropTypes.bool,
|
||||||
label: PropTypes.string,
|
label: React.PropTypes.oneOfType([
|
||||||
|
React.PropTypes.string,
|
||||||
|
React.PropTypes.node
|
||||||
|
]),
|
||||||
multiple: PropTypes.bool,
|
multiple: PropTypes.bool,
|
||||||
onBlur: PropTypes.func,
|
onBlur: PropTypes.func,
|
||||||
onChange: PropTypes.func,
|
onChange: PropTypes.func,
|
||||||
|
|
|
@ -58,11 +58,11 @@ interface AutocompleteProps extends ReactToolbox.Props {
|
||||||
* Sets the error string for the internal input element.
|
* Sets the error string for the internal input element.
|
||||||
* @default false
|
* @default false
|
||||||
*/
|
*/
|
||||||
error?: string;
|
error?: string | React.ReactNode;
|
||||||
/**
|
/**
|
||||||
* The text string to use for the floating label element.
|
* The text string to use for the floating label element.
|
||||||
*/
|
*/
|
||||||
label?: string;
|
label?: string | React.ReactNode;
|
||||||
/**
|
/**
|
||||||
* If true, component can hold multiple values.
|
* If true, component can hold multiple values.
|
||||||
*/
|
*/
|
||||||
|
|
|
@ -47,8 +47,8 @@ If you want to provide a theme via context, the component key is `RTAutocomplete
|
||||||
| `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 `down`. |
|
| `direction` | `String` | `auto` | Determines the opening direction. It can be `auto`, `top` or `down`. |
|
||||||
| `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` or `Node` | | Sets the error string for the internal input element. |
|
||||||
| `label` | `String` | | The text string to use for the floating label element. |
|
| `label` | `String` or `Node` | | The text string to use for the floating label element. |
|
||||||
| `multiple` | `Bool` | `true` | If true, component can hold multiple values. |
|
| `multiple` | `Bool` | `true` | If true, component can hold multiple values. |
|
||||||
| `onBlur` | `Function` | | Callback function that is fired when component is blurred. |
|
| `onBlur` | `Function` | | Callback function that is fired when component is blurred. |
|
||||||
| `onChange` | `Function` | | Callback function that is fired when the components's value changes. |
|
| `onChange` | `Function` | | Callback function that is fired when the components's value changes. |
|
||||||
|
|
|
@ -10,14 +10,23 @@ const factory = (FontIcon) => {
|
||||||
children: React.PropTypes.any,
|
children: React.PropTypes.any,
|
||||||
className: React.PropTypes.string,
|
className: React.PropTypes.string,
|
||||||
disabled: React.PropTypes.bool,
|
disabled: React.PropTypes.bool,
|
||||||
error: React.PropTypes.string,
|
error: React.PropTypes.oneOfType([
|
||||||
|
React.PropTypes.string,
|
||||||
|
React.PropTypes.node
|
||||||
|
]),
|
||||||
floating: React.PropTypes.bool,
|
floating: React.PropTypes.bool,
|
||||||
hint: React.PropTypes.string,
|
hint: React.PropTypes.oneOfType([
|
||||||
|
React.PropTypes.string,
|
||||||
|
React.PropTypes.node
|
||||||
|
]),
|
||||||
icon: React.PropTypes.oneOfType([
|
icon: React.PropTypes.oneOfType([
|
||||||
React.PropTypes.string,
|
React.PropTypes.string,
|
||||||
React.PropTypes.element
|
React.PropTypes.element
|
||||||
]),
|
]),
|
||||||
label: React.PropTypes.string,
|
label: React.PropTypes.oneOfType([
|
||||||
|
React.PropTypes.string,
|
||||||
|
React.PropTypes.node
|
||||||
|
]),
|
||||||
maxLength: React.PropTypes.number,
|
maxLength: React.PropTypes.number,
|
||||||
multiline: React.PropTypes.bool,
|
multiline: React.PropTypes.bool,
|
||||||
name: React.PropTypes.string,
|
name: React.PropTypes.string,
|
||||||
|
|
|
@ -65,7 +65,7 @@ interface InputProps extends ReactToolbox.Props {
|
||||||
/**
|
/**
|
||||||
* Give an error node to display under the field.
|
* Give an error node to display under the field.
|
||||||
*/
|
*/
|
||||||
error?: string;
|
error?: string | React.ReactNode;
|
||||||
/**
|
/**
|
||||||
* Indicates if the label is floating in the input field or not.
|
* Indicates if the label is floating in the input field or not.
|
||||||
* @default true
|
* @default true
|
||||||
|
@ -74,7 +74,7 @@ interface InputProps extends ReactToolbox.Props {
|
||||||
/**
|
/**
|
||||||
* The text string to use for hint text element.
|
* The text string to use for hint text element.
|
||||||
*/
|
*/
|
||||||
hint?: string;
|
hint?: string | React.ReactNode;
|
||||||
/**
|
/**
|
||||||
* Name of an icon to use as a label for the input.
|
* Name of an icon to use as a label for the input.
|
||||||
*/
|
*/
|
||||||
|
@ -82,7 +82,7 @@ interface InputProps extends ReactToolbox.Props {
|
||||||
/**
|
/**
|
||||||
* The text string to use for the floating label element.
|
* The text string to use for the floating label element.
|
||||||
*/
|
*/
|
||||||
label?: string;
|
label?: string | React.ReactNode;
|
||||||
/**
|
/**
|
||||||
* Specifies the maximum number of characters allowed in the component
|
* Specifies the maximum number of characters allowed in the component
|
||||||
*/
|
*/
|
||||||
|
|
|
@ -35,11 +35,11 @@ If you want to provide a theme via context, the component key is `RTInput`.
|
||||||
|:-----|:-----|:-----|:-----|
|
|:-----|:-----|:-----|:-----|
|
||||||
| `className` | `String` | `''` | Sets a class name to give custom styles.|
|
| `className` | `String` | `''` | Sets a class name to give custom styles.|
|
||||||
| `disabled` | `Boolean` | `false` | If true, component will be disabled.|
|
| `disabled` | `Boolean` | `false` | If true, component will be disabled.|
|
||||||
| `error` | `String` | | Give an error node to display under the field.|
|
| `error` | `String` or `Node` | | Give an error node to display under the field.|
|
||||||
| `floating` | `Boolean` | `true` | Indicates if the label is floating in the input field or not.|
|
| `floating` | `Boolean` | `true` | Indicates if the label is floating in the input field or not.|
|
||||||
| `hint` | `String` | `''` | The text string to use for hint text element.|
|
| `hint` | `String` or `Node` | `''` | The text string to use for hint text element.|
|
||||||
| `icon` | `String` or `Element` | | Name of an icon to use as a label for the input.|
|
| `icon` | `String` or `Element` | | Name of an icon to use as a label for the input.|
|
||||||
| `label` | `String` | | The text string to use for the floating label element.|
|
| `label` | `String` or `Node` | | The text string to use for the floating label element.|
|
||||||
| `maxLength` | `Number` | | Specifies the maximum number of characters allowed in the component.|
|
| `maxLength` | `Number` | | Specifies the maximum number of characters allowed in the component.|
|
||||||
| `multiline` | `Boolean` | `false` | If true, a textarea element will be rendered. The textarea also grows and shrinks according to the number of lines.|
|
| `multiline` | `Boolean` | `false` | If true, a textarea element will be rendered. The textarea also grows and shrinks according to the number of lines.|
|
||||||
| `rows` | `Number` | | The number of rows the multiline input field has.|
|
| `rows` | `Number` | | The number of rows the multiline input field has.|
|
||||||
|
|
|
@ -15,6 +15,7 @@ class InputTest extends React.Component {
|
||||||
<Input type='email' label='Email address' icon='email' value={this.state.email} onChange={this.handleChange.bind(this, 'email')} />
|
<Input type='email' label='Email address' icon='email' value={this.state.email} onChange={this.handleChange.bind(this, 'email')} />
|
||||||
<Input type='tel' label='Phone' name='phone' icon='phone' value={this.state.phone} onChange={this.handleChange.bind(this, 'phone')} />
|
<Input type='tel' label='Phone' name='phone' icon='phone' value={this.state.phone} onChange={this.handleChange.bind(this, 'phone')} />
|
||||||
<Input type='text' value={this.state.hint} label='Required Field' hint='With Hint' required onChange={this.handleChange.bind(this, 'hint')} icon='share' />
|
<Input type='text' value={this.state.hint} label='Required Field' hint='With Hint' required onChange={this.handleChange.bind(this, 'hint')} icon='share' />
|
||||||
|
<Input type='text' label='error' error={<span>Error!! <a href="#!" onClick={e => { e.preventDefault(); console.log('some help'); }}>?</a></span>} />
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue