From 491f5d4b066330d1918df639cd2d50b8e3a0d37a Mon Sep 17 00:00:00 2001 From: serkandurusoy Date: Sun, 5 Jun 2016 14:11:25 +0300 Subject: [PATCH 1/3] Added html5 input types to text field --- .gitignore | 1 + README.md | 10 ++++- lerna.json | 2 +- packages/uniforms-bootstrap3/package.json | 4 +- .../src/components/fields/TextField.js | 2 +- packages/uniforms-bootstrap4/package.json | 4 +- .../src/components/fields/TextField.js | 2 +- packages/uniforms-semantic/package.json | 4 +- .../src/components/fields/TextField.js | 44 +++++++++++-------- packages/uniforms-unstyled/package.json | 4 +- .../src/components/fields/TextField.js | 44 +++++++++++-------- packages/uniforms/package.json | 2 +- .../uniforms/src/helpers/checkInputType.js | 27 ++++++++++++ packages/uniforms/src/index.js | 1 + 14 files changed, 102 insertions(+), 49 deletions(-) create mode 100644 packages/uniforms/src/helpers/checkInputType.js diff --git a/.gitignore b/.gitignore index 68ab6cd3d..7af4d0912 100644 --- a/.gitignore +++ b/.gitignore @@ -4,3 +4,4 @@ npm-debug.log packages/*/coverage packages/*/lib packages/*/node_modules +.idea diff --git a/README.md b/README.md index 8ef1419bb..6d472d26e 100644 --- a/README.md +++ b/README.md @@ -166,7 +166,7 @@ const ExplicitAutoForm = () => | `RadioField` | Radio checkbox. | `allowedValues` | | `SelectField` | Select. | `allowedValues` | | `SubmitField` | Submit button. | *none* | -| `TextField` | Text input. | `type: String` | +| `TextField` | Text input. `type` can be overriden by valid HTML input types | `type: String` | **Note:** You can pass `component` prop to `AutoField` to bypass field guessing algorithm. @@ -261,6 +261,14 @@ const PersonSchema = new SimpleSchema({ | `type` | `func` | Field type. | | `value` | `any` | Field value. | +Default value of `text` is provided to text inputs but it can be overriden + +```js + // html password field + // html5 color picker + // html5 phone input +``` + Every prop can be overriden, but `label`, `placeholder` and `disabled` have special semantics: ```js diff --git a/lerna.json b/lerna.json index 187eac2f2..b30055aad 100644 --- a/lerna.json +++ b/lerna.json @@ -1,4 +1,4 @@ { "lerna": "2.0.0-beta.15", - "version": "1.0.0-rc.12" + "version": "1.0.0-rc.13" } diff --git a/packages/uniforms-bootstrap3/package.json b/packages/uniforms-bootstrap3/package.json index 7d7aba9b4..0ba495b8c 100644 --- a/packages/uniforms-bootstrap3/package.json +++ b/packages/uniforms-bootstrap3/package.json @@ -1,6 +1,6 @@ { "name": "uniforms-bootstrap3", - "version": "1.0.0-rc.12", + "version": "1.0.0-rc.13", "main": "lib/index.js", "jsnext:main": "src/index.js", "description": "Bootstrap3 UI components for uniforms.", @@ -45,7 +45,7 @@ }, "peerDependencies": { "react": "^15.1.0", - "uniforms": "^1.0.0-rc.12" + "uniforms": "^1.0.0-rc.13" }, "babel": { "presets": [ diff --git a/packages/uniforms-bootstrap3/src/components/fields/TextField.js b/packages/uniforms-bootstrap3/src/components/fields/TextField.js index c52e05d8f..d0a6a98bc 100644 --- a/packages/uniforms-bootstrap3/src/components/fields/TextField.js +++ b/packages/uniforms-bootstrap3/src/components/fields/TextField.js @@ -12,7 +12,7 @@ const Text = props => name={props.name} onChange={event => props.onChange(event.target.value)} placeholder={props.placeholder} - type="text" + type={props.type || 'text'} value={props.value} /> diff --git a/packages/uniforms-bootstrap4/package.json b/packages/uniforms-bootstrap4/package.json index 067e9f763..d8599d38d 100644 --- a/packages/uniforms-bootstrap4/package.json +++ b/packages/uniforms-bootstrap4/package.json @@ -1,6 +1,6 @@ { "name": "uniforms-bootstrap4", - "version": "1.0.0-rc.12", + "version": "1.0.0-rc.13", "main": "lib/index.js", "jsnext:main": "src/index.js", "description": "Bootstrap4 UI components for uniforms.", @@ -45,7 +45,7 @@ }, "peerDependencies": { "react": "^15.1.0", - "uniforms": "^1.0.0-rc.12" + "uniforms": "^1.0.0-rc.13" }, "babel": { "presets": [ diff --git a/packages/uniforms-bootstrap4/src/components/fields/TextField.js b/packages/uniforms-bootstrap4/src/components/fields/TextField.js index 9233ad01e..a7b80e093 100644 --- a/packages/uniforms-bootstrap4/src/components/fields/TextField.js +++ b/packages/uniforms-bootstrap4/src/components/fields/TextField.js @@ -12,7 +12,7 @@ const Text = props => name={props.name} onChange={event => props.onChange(event.target.value)} placeholder={props.placeholder} - type="text" + type={props.type || 'text'} value={props.value} /> diff --git a/packages/uniforms-semantic/package.json b/packages/uniforms-semantic/package.json index 56998fda4..ae71ceaea 100644 --- a/packages/uniforms-semantic/package.json +++ b/packages/uniforms-semantic/package.json @@ -1,6 +1,6 @@ { "name": "uniforms-semantic", - "version": "1.0.0-rc.12", + "version": "1.0.0-rc.13", "main": "lib/index.js", "jsnext:main": "src/index.js", "description": "Semantic UI components for uniforms.", @@ -45,7 +45,7 @@ }, "peerDependencies": { "react": "^15.1.0", - "uniforms": "^1.0.0-rc.12" + "uniforms": "^1.0.0-rc.13" }, "babel": { "presets": [ diff --git a/packages/uniforms-semantic/src/components/fields/TextField.js b/packages/uniforms-semantic/src/components/fields/TextField.js index 4903304fc..3f11f4a78 100644 --- a/packages/uniforms-semantic/src/components/fields/TextField.js +++ b/packages/uniforms-semantic/src/components/fields/TextField.js @@ -1,8 +1,9 @@ import React from 'react'; import classnames from 'classnames'; -import {connectField} from 'uniforms'; +import {connectField, checkInputType} from 'uniforms'; const Text = ({ + type="text", className, disabled, error, @@ -13,23 +14,30 @@ const Text = ({ required, value, ...props -}) => -
- {label && ( - - )} +}) => { - onChange(event.target.value)} - placeholder={placeholder} - type="text" - value={value} - /> -
-; + if (!checkInputType(type)) { + throw new Error(`Unrecognised type attribute: ${type}`) + } + + return ( +
+ {label && ( + + )} + + onChange(event.target.value)} + placeholder={placeholder} + type={type} + value={value} + /> +
+ ); +} export default connectField(Text); diff --git a/packages/uniforms-unstyled/package.json b/packages/uniforms-unstyled/package.json index d2a90f707..aa0f08b66 100644 --- a/packages/uniforms-unstyled/package.json +++ b/packages/uniforms-unstyled/package.json @@ -1,6 +1,6 @@ { "name": "uniforms-unstyled", - "version": "1.0.0-rc.12", + "version": "1.0.0-rc.13", "main": "lib/index.js", "jsnext:main": "src/index.js", "description": "Unstyled components for uniforms.", @@ -45,7 +45,7 @@ }, "peerDependencies": { "react": "^15.1.0", - "uniforms": "^1.0.0-rc.12" + "uniforms": "^1.0.0-rc.13" }, "babel": { "presets": [ diff --git a/packages/uniforms-unstyled/src/components/fields/TextField.js b/packages/uniforms-unstyled/src/components/fields/TextField.js index ca52d4e5d..661d0526a 100644 --- a/packages/uniforms-unstyled/src/components/fields/TextField.js +++ b/packages/uniforms-unstyled/src/components/fields/TextField.js @@ -1,7 +1,8 @@ import React from 'react'; -import {connectField} from 'uniforms'; +import {connectField, checkInputType} from 'uniforms'; const Text = ({ + type="text", disabled, label, name, @@ -9,23 +10,30 @@ const Text = ({ placeholder, value, ...props -}) => -
- {label && ( - - )} +}) => { - onChange(event.target.value)} - placeholder={placeholder} - type="text" - value={value} - /> -
-; + if (!checkInputType(type)) { + throw new Error(`Unrecognised type attribute: ${type}`) + } + + return ( +
+ {label && ( + + )} + + onChange(event.target.value)} + placeholder={placeholder} + type={type} + value={value} + /> +
+ ); +} export default connectField(Text); diff --git a/packages/uniforms/package.json b/packages/uniforms/package.json index 9cc634da4..cadfe69da 100644 --- a/packages/uniforms/package.json +++ b/packages/uniforms/package.json @@ -1,6 +1,6 @@ { "name": "uniforms", - "version": "1.0.0-rc.12", + "version": "1.0.0-rc.13", "main": "lib/index.js", "jsnext:main": "src/index.js", "description": "Core package of uniforms.", diff --git a/packages/uniforms/src/helpers/checkInputType.js b/packages/uniforms/src/helpers/checkInputType.js new file mode 100644 index 000000000..3aaf5ad94 --- /dev/null +++ b/packages/uniforms/src/helpers/checkInputType.js @@ -0,0 +1,27 @@ +export default function checkInputType (typeName) { + const allowedTypes = [ + 'text', + 'checkbox', + 'color', + 'date', + 'datetime', + 'datetime-local', + 'email', + 'file', + 'hidden', + 'image', + 'month', + 'number', + 'pasword', + 'radio', + 'range', + 'reset', + 'search', + 'tel', + 'time', + 'url', + 'week', + ]; + + return typeof typeName === 'string' && typeName.length > 0 && allowedTypes.indexOf(typeName) < 0; +} diff --git a/packages/uniforms/src/index.js b/packages/uniforms/src/index.js index 8048569d0..68a20c97c 100644 --- a/packages/uniforms/src/index.js +++ b/packages/uniforms/src/index.js @@ -5,6 +5,7 @@ export {default as createSchemaBridge} from './bridges'; export {default as changedKeys} from './helpers/changedKeys'; export {default as connectField} from './helpers/connectField'; export {default as joinName} from './helpers/joinName'; +export {default as checkInputType} from './helpers/checkInputType'; export {default as BaseField} from './components/fields/BaseField'; From 06e128d6fb4d03aa8090aa696e51371cb5b419f5 Mon Sep 17 00:00:00 2001 From: serkandurusoy Date: Sun, 5 Jun 2016 15:05:03 +0300 Subject: [PATCH 2/3] Added html5 input types to text field --- lerna.json | 2 +- packages/uniforms-bootstrap3/package.json | 4 +- packages/uniforms-bootstrap4/package.json | 4 +- packages/uniforms-semantic/package.json | 4 +- .../src/components/fields/TextField.js | 40 +++++++----------- packages/uniforms-unstyled/package.json | 4 +- .../src/components/fields/TextField.js | 41 ++++++++----------- packages/uniforms/package.json | 2 +- .../uniforms/src/helpers/checkInputType.js | 27 ------------ packages/uniforms/src/index.js | 1 - 10 files changed, 41 insertions(+), 88 deletions(-) delete mode 100644 packages/uniforms/src/helpers/checkInputType.js diff --git a/lerna.json b/lerna.json index b30055aad..187eac2f2 100644 --- a/lerna.json +++ b/lerna.json @@ -1,4 +1,4 @@ { "lerna": "2.0.0-beta.15", - "version": "1.0.0-rc.13" + "version": "1.0.0-rc.12" } diff --git a/packages/uniforms-bootstrap3/package.json b/packages/uniforms-bootstrap3/package.json index 0ba495b8c..7d7aba9b4 100644 --- a/packages/uniforms-bootstrap3/package.json +++ b/packages/uniforms-bootstrap3/package.json @@ -1,6 +1,6 @@ { "name": "uniforms-bootstrap3", - "version": "1.0.0-rc.13", + "version": "1.0.0-rc.12", "main": "lib/index.js", "jsnext:main": "src/index.js", "description": "Bootstrap3 UI components for uniforms.", @@ -45,7 +45,7 @@ }, "peerDependencies": { "react": "^15.1.0", - "uniforms": "^1.0.0-rc.13" + "uniforms": "^1.0.0-rc.12" }, "babel": { "presets": [ diff --git a/packages/uniforms-bootstrap4/package.json b/packages/uniforms-bootstrap4/package.json index d8599d38d..067e9f763 100644 --- a/packages/uniforms-bootstrap4/package.json +++ b/packages/uniforms-bootstrap4/package.json @@ -1,6 +1,6 @@ { "name": "uniforms-bootstrap4", - "version": "1.0.0-rc.13", + "version": "1.0.0-rc.12", "main": "lib/index.js", "jsnext:main": "src/index.js", "description": "Bootstrap4 UI components for uniforms.", @@ -45,7 +45,7 @@ }, "peerDependencies": { "react": "^15.1.0", - "uniforms": "^1.0.0-rc.13" + "uniforms": "^1.0.0-rc.12" }, "babel": { "presets": [ diff --git a/packages/uniforms-semantic/package.json b/packages/uniforms-semantic/package.json index ae71ceaea..56998fda4 100644 --- a/packages/uniforms-semantic/package.json +++ b/packages/uniforms-semantic/package.json @@ -1,6 +1,6 @@ { "name": "uniforms-semantic", - "version": "1.0.0-rc.13", + "version": "1.0.0-rc.12", "main": "lib/index.js", "jsnext:main": "src/index.js", "description": "Semantic UI components for uniforms.", @@ -45,7 +45,7 @@ }, "peerDependencies": { "react": "^15.1.0", - "uniforms": "^1.0.0-rc.13" + "uniforms": "^1.0.0-rc.12" }, "babel": { "presets": [ diff --git a/packages/uniforms-semantic/src/components/fields/TextField.js b/packages/uniforms-semantic/src/components/fields/TextField.js index 3f11f4a78..dd3dbc853 100644 --- a/packages/uniforms-semantic/src/components/fields/TextField.js +++ b/packages/uniforms-semantic/src/components/fields/TextField.js @@ -1,6 +1,5 @@ import React from 'react'; import classnames from 'classnames'; -import {connectField, checkInputType} from 'uniforms'; const Text = ({ type="text", @@ -14,30 +13,21 @@ const Text = ({ required, value, ...props -}) => { +}) =>
+ {label && ( + + )} - if (!checkInputType(type)) { - throw new Error(`Unrecognised type attribute: ${type}`) - } - - return ( -
- {label && ( - - )} - - onChange(event.target.value)} - placeholder={placeholder} - type={type} - value={value} - /> -
- ); -} + onChange(event.target.value)} + placeholder={placeholder} + type={type} + value={value} + /> +
export default connectField(Text); diff --git a/packages/uniforms-unstyled/package.json b/packages/uniforms-unstyled/package.json index aa0f08b66..d2a90f707 100644 --- a/packages/uniforms-unstyled/package.json +++ b/packages/uniforms-unstyled/package.json @@ -1,6 +1,6 @@ { "name": "uniforms-unstyled", - "version": "1.0.0-rc.13", + "version": "1.0.0-rc.12", "main": "lib/index.js", "jsnext:main": "src/index.js", "description": "Unstyled components for uniforms.", @@ -45,7 +45,7 @@ }, "peerDependencies": { "react": "^15.1.0", - "uniforms": "^1.0.0-rc.13" + "uniforms": "^1.0.0-rc.12" }, "babel": { "presets": [ diff --git a/packages/uniforms-unstyled/src/components/fields/TextField.js b/packages/uniforms-unstyled/src/components/fields/TextField.js index 661d0526a..e516c0a47 100644 --- a/packages/uniforms-unstyled/src/components/fields/TextField.js +++ b/packages/uniforms-unstyled/src/components/fields/TextField.js @@ -1,5 +1,4 @@ import React from 'react'; -import {connectField, checkInputType} from 'uniforms'; const Text = ({ type="text", @@ -10,30 +9,22 @@ const Text = ({ placeholder, value, ...props -}) => { +}) =>
+ {label && ( + + )} - if (!checkInputType(type)) { - throw new Error(`Unrecognised type attribute: ${type}`) - } - - return ( -
- {label && ( - - )} - - onChange(event.target.value)} - placeholder={placeholder} - type={type} - value={value} - /> -
- ); -} + onChange(event.target.value)} + placeholder={placeholder} + type={type} + value={value} + /> +
+; export default connectField(Text); diff --git a/packages/uniforms/package.json b/packages/uniforms/package.json index cadfe69da..9cc634da4 100644 --- a/packages/uniforms/package.json +++ b/packages/uniforms/package.json @@ -1,6 +1,6 @@ { "name": "uniforms", - "version": "1.0.0-rc.13", + "version": "1.0.0-rc.12", "main": "lib/index.js", "jsnext:main": "src/index.js", "description": "Core package of uniforms.", diff --git a/packages/uniforms/src/helpers/checkInputType.js b/packages/uniforms/src/helpers/checkInputType.js deleted file mode 100644 index 3aaf5ad94..000000000 --- a/packages/uniforms/src/helpers/checkInputType.js +++ /dev/null @@ -1,27 +0,0 @@ -export default function checkInputType (typeName) { - const allowedTypes = [ - 'text', - 'checkbox', - 'color', - 'date', - 'datetime', - 'datetime-local', - 'email', - 'file', - 'hidden', - 'image', - 'month', - 'number', - 'pasword', - 'radio', - 'range', - 'reset', - 'search', - 'tel', - 'time', - 'url', - 'week', - ]; - - return typeof typeName === 'string' && typeName.length > 0 && allowedTypes.indexOf(typeName) < 0; -} diff --git a/packages/uniforms/src/index.js b/packages/uniforms/src/index.js index 68a20c97c..8048569d0 100644 --- a/packages/uniforms/src/index.js +++ b/packages/uniforms/src/index.js @@ -5,7 +5,6 @@ export {default as createSchemaBridge} from './bridges'; export {default as changedKeys} from './helpers/changedKeys'; export {default as connectField} from './helpers/connectField'; export {default as joinName} from './helpers/joinName'; -export {default as checkInputType} from './helpers/checkInputType'; export {default as BaseField} from './components/fields/BaseField'; From 146b79f29d4121124d78c623aad53769924429cd Mon Sep 17 00:00:00 2001 From: serkandurusoy Date: Sun, 5 Jun 2016 15:09:58 +0300 Subject: [PATCH 3/3] fix regression from removing unused import --- packages/uniforms-semantic/src/components/fields/TextField.js | 1 + packages/uniforms-unstyled/src/components/fields/TextField.js | 1 + 2 files changed, 2 insertions(+) diff --git a/packages/uniforms-semantic/src/components/fields/TextField.js b/packages/uniforms-semantic/src/components/fields/TextField.js index dd3dbc853..551280444 100644 --- a/packages/uniforms-semantic/src/components/fields/TextField.js +++ b/packages/uniforms-semantic/src/components/fields/TextField.js @@ -1,5 +1,6 @@ import React from 'react'; import classnames from 'classnames'; +import {connectField} from 'uniforms'; const Text = ({ type="text", diff --git a/packages/uniforms-unstyled/src/components/fields/TextField.js b/packages/uniforms-unstyled/src/components/fields/TextField.js index e516c0a47..2d78aaee1 100644 --- a/packages/uniforms-unstyled/src/components/fields/TextField.js +++ b/packages/uniforms-unstyled/src/components/fields/TextField.js @@ -1,4 +1,5 @@ import React from 'react'; +import {connectField} from 'uniforms'; const Text = ({ type="text",