vitalif
/
react-toolbox
1
0
Fork 0
Code Issues Pull Requests Releases 12 Wiki Activity

relaxing propTypes of Input & Autocomplete

old
masakij 2016-12-12 15:14:06 +09:00
parent b6ff3a836c
commit ce3fbfc913
7 changed files with 16 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/autocomplete/Autocomplete.js
View File

@ -20,9 +20,9 @@ const factory = (Chip, Input) => {
className: PropTypes.string,
direction: PropTypes.oneOf(['auto', 'up', 'down']),
disabled: PropTypes.bool,
error: PropTypes.string,
error: PropTypes.node,
keepFocusOnChange: PropTypes.bool,
label: PropTypes.string,
label: PropTypes.node,
multiple: PropTypes.bool,
onBlur: PropTypes.func,
onChange: PropTypes.func,

4
components/autocomplete/index.d.ts vendored
View File

@ -58,11 +58,11 @@ interface AutocompleteProps extends ReactToolbox.Props {
* Sets the error string for the internal input element.
* @default false
*/
error?: string;
error?: React.ReactNode;
/**
* The text string to use for the floating label element.
*/
label?: string;
label?: React.ReactNode;
/**
* If true, component can hold multiple values.
*/

4
components/autocomplete/readme.md
View File

@ -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.|
| `direction` | `String` | `auto` | Determines the opening direction. It can be `auto`, `top` or `down`. |
| `disabled` | `Bool` | `false` | If true, component will be disabled. |
| `error` | `String` | | Sets the error string for the internal input element. |
| `label` | `String` | | The text string to use for the floating label element. |
| `error` | `Node` | | Sets the error string for the internal input element. |
| `label` | `Node` | | The text string to use for the floating label element. |
| `multiple` | `Bool` | `true` | If true, component can hold multiple values. |
| `onBlur` | `Function` | | Callback function that is fired when component is blurred. |
| `onChange` | `Function` | | Callback function that is fired when the components's value changes. |

6
components/input/Input.js
View File

@ -10,14 +10,14 @@ const factory = (FontIcon) => {
children: React.PropTypes.any,
className: React.PropTypes.string,
disabled: React.PropTypes.bool,
error: React.PropTypes.string,
error: React.PropTypes.node,
floating: React.PropTypes.bool,
hint: React.PropTypes.string,
hint: React.PropTypes.node,
icon: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.element
]),
label: React.PropTypes.string,
label: React.PropTypes.node,
maxLength: React.PropTypes.number,
multiline: React.PropTypes.bool,
name: React.PropTypes.string,

6
components/input/index.d.ts vendored
View File

@ -65,7 +65,7 @@ interface InputProps extends ReactToolbox.Props {
/**
* Give an error node to display under the field.
*/
error?: string;
error?: React.ReactNode;
/**
* Indicates if the label is floating in the input field or not.
* @default true
@ -74,7 +74,7 @@ interface InputProps extends ReactToolbox.Props {
/**
* The text string to use for hint text element.
*/
hint?: string;
hint?: React.ReactNode;
/**
* 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.
*/
label?: string;
label?: React.ReactNode;
/**
* Specifies the maximum number of characters allowed in the component
*/

6
components/input/readme.md
View File

@ -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.|
| `disabled` | `Boolean` | `false` | If true, component will be disabled.|
| `error` | `String` | | Give an error node to display under the field.|
| `error` | `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.|
| `hint` | `String` | `''` | The text string to use for hint text element.|
| `hint` | `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.|
| `label` | `String` | | The text string to use for the floating label element.|
| `label` | `Node` | | The text string to use for the floating label element.|
| `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.|
| `rows` | `Number` | | The number of rows the multiline input field has.|

1
docs/app/components/layout/main/modules/examples/input_example_1.txt
View File

@ -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='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' label='error' error={<span>Error!! <a href="#!" onClick={e => { e.preventDefault(); console.log('some help'); }}>?</a></span>} />
</section>
);
}