From ce3fbfc913feffdc4be829f9e8d8757b1bc5d151 Mon Sep 17 00:00:00 2001 From: masakij Date: Mon, 12 Dec 2016 15:14:06 +0900 Subject: [PATCH 1/2] relaxing propTypes of Input & Autocomplete --- components/autocomplete/Autocomplete.js | 4 ++-- components/autocomplete/index.d.ts | 4 ++-- components/autocomplete/readme.md | 4 ++-- components/input/Input.js | 6 +++--- components/input/index.d.ts | 6 +++--- components/input/readme.md | 6 +++--- .../layout/main/modules/examples/input_example_1.txt | 1 + 7 files changed, 16 insertions(+), 15 deletions(-) diff --git a/components/autocomplete/Autocomplete.js b/components/autocomplete/Autocomplete.js index 83da46f6..52639566 100644 --- a/components/autocomplete/Autocomplete.js +++ b/components/autocomplete/Autocomplete.js @@ -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, diff --git a/components/autocomplete/index.d.ts b/components/autocomplete/index.d.ts index db661deb..40d7d2f3 100644 --- a/components/autocomplete/index.d.ts +++ b/components/autocomplete/index.d.ts @@ -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. */ diff --git a/components/autocomplete/readme.md b/components/autocomplete/readme.md index be000a4a..c9bfe31d 100644 --- a/components/autocomplete/readme.md +++ b/components/autocomplete/readme.md @@ -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. | diff --git a/components/input/Input.js b/components/input/Input.js index 8ed50ef2..22924b73 100644 --- a/components/input/Input.js +++ b/components/input/Input.js @@ -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, diff --git a/components/input/index.d.ts b/components/input/index.d.ts index b1db642a..c3d60d16 100644 --- a/components/input/index.d.ts +++ b/components/input/index.d.ts @@ -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 */ diff --git a/components/input/readme.md b/components/input/readme.md index 495a93f6..5c8a1998 100644 --- a/components/input/readme.md +++ b/components/input/readme.md @@ -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.| diff --git a/docs/app/components/layout/main/modules/examples/input_example_1.txt b/docs/app/components/layout/main/modules/examples/input_example_1.txt index 70327ee9..80cdde52 100644 --- a/docs/app/components/layout/main/modules/examples/input_example_1.txt +++ b/docs/app/components/layout/main/modules/examples/input_example_1.txt @@ -15,6 +15,7 @@ class InputTest extends React.Component { + Error!! { e.preventDefault(); console.log('some help'); }}>?} /> ); } From f00687564b58d726a7bf9428c15acb6c7217d8a5 Mon Sep 17 00:00:00 2001 From: masakij Date: Wed, 14 Dec 2016 11:42:24 +0900 Subject: [PATCH 2/2] refactor propTypes more descriptive --- components/autocomplete/Autocomplete.js | 10 ++++++++-- components/autocomplete/index.d.ts | 4 ++-- components/autocomplete/readme.md | 4 ++-- components/input/Input.js | 15 ++++++++++++--- components/input/index.d.ts | 6 +++--- components/input/readme.md | 6 +++--- 6 files changed, 30 insertions(+), 15 deletions(-) diff --git a/components/autocomplete/Autocomplete.js b/components/autocomplete/Autocomplete.js index 52639566..d9b431af 100644 --- a/components/autocomplete/Autocomplete.js +++ b/components/autocomplete/Autocomplete.js @@ -20,9 +20,15 @@ const factory = (Chip, Input) => { className: PropTypes.string, direction: PropTypes.oneOf(['auto', 'up', 'down']), disabled: PropTypes.bool, - error: PropTypes.node, + error: React.PropTypes.oneOfType([ + React.PropTypes.string, + React.PropTypes.node + ]), keepFocusOnChange: PropTypes.bool, - label: PropTypes.node, + label: React.PropTypes.oneOfType([ + React.PropTypes.string, + React.PropTypes.node + ]), multiple: PropTypes.bool, onBlur: PropTypes.func, onChange: PropTypes.func, diff --git a/components/autocomplete/index.d.ts b/components/autocomplete/index.d.ts index 40d7d2f3..904a096c 100644 --- a/components/autocomplete/index.d.ts +++ b/components/autocomplete/index.d.ts @@ -58,11 +58,11 @@ interface AutocompleteProps extends ReactToolbox.Props { * Sets the error string for the internal input element. * @default false */ - error?: React.ReactNode; + error?: string | React.ReactNode; /** * The text string to use for the floating label element. */ - label?: React.ReactNode; + label?: string | React.ReactNode; /** * If true, component can hold multiple values. */ diff --git a/components/autocomplete/readme.md b/components/autocomplete/readme.md index c9bfe31d..2812be86 100644 --- a/components/autocomplete/readme.md +++ b/components/autocomplete/readme.md @@ -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` | `Node` | | Sets the error string for the internal input element. | -| `label` | `Node` | | The text string to use for the floating label element. | +| `error` | `String` or `Node` | | Sets the error string for the internal input 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. | | `onBlur` | `Function` | | Callback function that is fired when component is blurred. | | `onChange` | `Function` | | Callback function that is fired when the components's value changes. | diff --git a/components/input/Input.js b/components/input/Input.js index 22924b73..71d23b69 100644 --- a/components/input/Input.js +++ b/components/input/Input.js @@ -10,14 +10,23 @@ const factory = (FontIcon) => { children: React.PropTypes.any, className: React.PropTypes.string, disabled: React.PropTypes.bool, - error: React.PropTypes.node, + error: React.PropTypes.oneOfType([ + React.PropTypes.string, + React.PropTypes.node + ]), floating: React.PropTypes.bool, - hint: React.PropTypes.node, + hint: React.PropTypes.oneOfType([ + React.PropTypes.string, + React.PropTypes.node + ]), icon: React.PropTypes.oneOfType([ React.PropTypes.string, React.PropTypes.element ]), - label: React.PropTypes.node, + label: React.PropTypes.oneOfType([ + React.PropTypes.string, + React.PropTypes.node + ]), maxLength: React.PropTypes.number, multiline: React.PropTypes.bool, name: React.PropTypes.string, diff --git a/components/input/index.d.ts b/components/input/index.d.ts index c3d60d16..b0c08251 100644 --- a/components/input/index.d.ts +++ b/components/input/index.d.ts @@ -65,7 +65,7 @@ interface InputProps extends ReactToolbox.Props { /** * Give an error node to display under the field. */ - error?: React.ReactNode; + error?: string | 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?: React.ReactNode; + hint?: string | 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?: React.ReactNode; + label?: string | React.ReactNode; /** * Specifies the maximum number of characters allowed in the component */ diff --git a/components/input/readme.md b/components/input/readme.md index 5c8a1998..f05b5446 100644 --- a/components/input/readme.md +++ b/components/input/readme.md @@ -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` | `Node` | | 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.| -| `hint` | `Node` | `''` | 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.| -| `label` | `Node` | | 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.| | `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.|