envoc-form 2.0.1-8 → 3.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +7 -7
- package/dist/css/envoc-form-styles.css +7 -6
- package/dist/css/envoc-form-styles.css.map +1 -1
- package/es/AddressInput/AddressInput.js +7 -6
- package/es/ConfirmBaseForm/ConfirmBaseForm.js +3 -2
- package/es/ConfirmDeleteForm/ConfirmDeleteForm.js +6 -5
- package/es/DatePickerInput/DatePickerInput.js +8 -3
- package/es/FileInput/DefaultFileList.js +3 -2
- package/es/FileInput/DropzoneFileInput.js +15 -12
- package/es/FileInput/FileInput.js +31 -9
- package/es/Form/Form.js +4 -2
- package/es/Form/FormBasedPreventNavigation.js +4 -7
- package/es/FormGroupWrapper.js +2 -1
- package/es/FormInput/FormInput.js +14 -8
- package/es/FormInputArray/FormInputArray.js +39 -24
- package/es/IconInput.js +2 -1
- package/es/ReactSelectField/ReactSelectField.js +6 -3
- package/es/SubmitFormButton.js +2 -1
- package/es/__Tests__/FormTestBase.js +5 -2
- package/es/normalizers.js +10 -5
- package/es/useStandardFormInput.js +4 -2
- package/es/utils/objectToFormData.js +10 -2
- package/lib/AddressInput/AddressInput.js +14 -8
- package/lib/ConfirmBaseForm/ConfirmBaseForm.js +4 -2
- package/lib/ConfirmDeleteForm/ConfirmDeleteForm.js +6 -4
- package/lib/DatePickerInput/DatePickerInput.js +9 -3
- package/lib/FileInput/DefaultFileList.js +3 -2
- package/lib/FileInput/DropzoneFileInput.js +17 -12
- package/lib/FileInput/FileInput.js +39 -10
- package/lib/Form/Form.js +11 -4
- package/lib/Form/FormBasedPreventNavigation.js +4 -10
- package/lib/FormGroupWrapper.js +3 -1
- package/lib/FormInput/FormInput.js +15 -8
- package/lib/FormInputArray/FormInputArray.js +47 -26
- package/lib/FormSection.js +5 -1
- package/lib/IconInput.js +3 -1
- package/lib/ReactSelectField/ReactSelectField.js +13 -5
- package/lib/ReactSelectField/index.js +6 -2
- package/lib/SubmitFormButton.js +3 -1
- package/lib/__Tests__/FormTestBase.js +6 -2
- package/lib/index.js +7 -3
- package/lib/normalizers.js +10 -5
- package/lib/useStandardFormInput.js +5 -2
- package/lib/utils/objectToFormData.js +10 -2
- package/lib/validators/index.js +5 -1
- package/package.json +99 -92
- package/src/AddressInput/AddesssInput.test.js +23 -23
- package/src/AddressInput/AddressInput.js +73 -73
- package/src/AddressInput/UsStates.js +53 -53
- package/src/AddressInput/__snapshots__/AddesssInput.test.js.snap +207 -207
- package/src/AddressInput/index.js +2 -2
- package/src/BoolInput/BoolInput.js +7 -7
- package/src/BoolInput/BoolInput.test.js +23 -23
- package/src/BoolInput/InlineBoolInput.js +7 -7
- package/src/BoolInput/__snapshots__/BoolInput.test.js.snap +89 -89
- package/src/BoolInput/boolOptions.js +6 -6
- package/src/BoolInput/index.js +4 -4
- package/src/ConfirmBaseForm/ConfirmBaseForm.js +37 -37
- package/src/ConfirmBaseForm/ConfirmBaseForm.test.js +14 -14
- package/src/ConfirmBaseForm/__snapshots__/ConfirmBaseForm.test.js.snap +23 -23
- package/src/ConfirmBaseForm/index.js +1 -1
- package/src/ConfirmDeleteForm/ConfirmDeleteForm.js +39 -39
- package/src/ConfirmDeleteForm/ConfirmDeleteForm.test.js +24 -24
- package/src/ConfirmDeleteForm/__snapshots__/ConfirmDeleteForm.test.js.snap +25 -25
- package/src/ConfirmDeleteForm/index.js +1 -1
- package/src/DatePickerInput/DatePickerInput.js +49 -46
- package/src/DatePickerInput/DatePickerInput.test.js +74 -74
- package/src/DatePickerInput/__snapshots__/DatePickerInput.test.js.snap +134 -134
- package/src/DatePickerInput/date-picker-input.scss +42 -42
- package/src/DatePickerInput/index.js +3 -3
- package/src/ErrorScrollTarget.js +6 -6
- package/src/FileInput/DefaultFileList.js +39 -39
- package/src/FileInput/DropzoneFileInput.js +56 -55
- package/src/FileInput/DropzoneFileInput.test.js +24 -15
- package/src/FileInput/FileInput.js +77 -49
- package/src/FileInput/FileInput.test.js +24 -15
- package/src/FileInput/__snapshots__/DropzoneFileInput.test.js.snap +57 -28
- package/src/FileInput/__snapshots__/FileInput.test.js.snap +58 -22
- package/src/FileInput/file-input.scss +57 -57
- package/src/FileInput/index.js +4 -4
- package/src/Form/FocusError.js +48 -48
- package/src/Form/Form.js +139 -138
- package/src/Form/Form.test.js +23 -23
- package/src/Form/FormBasedPreventNavigation.js +25 -25
- package/src/Form/ServerErrorContext.js +7 -7
- package/src/Form/__snapshots__/Form.test.js.snap +9 -9
- package/src/Form/index.js +3 -3
- package/src/FormGroup.js +30 -30
- package/src/FormGroupWrapper.js +28 -28
- package/src/FormInput/FormInput.js +145 -144
- package/src/FormInput/FormInput.test.js +66 -66
- package/src/FormInput/__snapshots__/FormInput.test.js.snap +323 -316
- package/src/FormInput/form-input.scss +9 -9
- package/src/FormInput/index.js +2 -2
- package/src/FormInputArray/FormInputArray.js +224 -210
- package/src/FormInputArray/FormInputArray.test.js +108 -59
- package/src/FormInputArray/__snapshots__/FormInputArray.test.js.snap +52 -40
- package/src/FormInputArray/form-input-array.scss +13 -8
- package/src/FormInputArray/index.js +2 -2
- package/src/FormSection.js +13 -13
- package/src/IconInput.js +31 -31
- package/src/InlineFormInput/InlineFormInput.js +6 -6
- package/src/InlineFormInput/InlineFormInput.test.js +23 -23
- package/src/InlineFormInput/__snapshots__/InlineFormInput.test.js.snap +26 -26
- package/src/InlineFormInput/index.js +3 -3
- package/src/InlineFormInput/inline-form-input.scss +3 -3
- package/src/MoneyInput/InlineMoneyInput.js +7 -7
- package/src/MoneyInput/MoneyInput.js +7 -7
- package/src/MoneyInput/MoneyInputs.test.js +43 -43
- package/src/MoneyInput/__snapshots__/MoneyInputs.test.js.snap +81 -81
- package/src/MoneyInput/index.js +4 -4
- package/src/MoneyInput/money-input.scss +3 -3
- package/src/MoneyInput/moneyInputProps.js +12 -12
- package/src/NestedFormFieldContext.js +6 -6
- package/src/ReactSelectField/ReactSelectField.js +122 -120
- package/src/ReactSelectField/index.js +6 -6
- package/src/ReactSelectField/react-select-field.scss +5 -5
- package/src/StandardFormActions.js +27 -27
- package/src/SubmitFormButton.js +28 -28
- package/src/__Tests__/FormTestBase.js +14 -11
- package/src/__Tests__/IconInput.test.js +23 -23
- package/src/__Tests__/StandardFormActions.test.js +23 -23
- package/src/__Tests__/SubmitFormButton.test.js +23 -23
- package/src/__Tests__/__snapshots__/IconInput.test.js.snap +38 -38
- package/src/__Tests__/__snapshots__/StandardFormActions.test.js.snap +25 -25
- package/src/__Tests__/__snapshots__/SubmitFormButton.test.js.snap +18 -18
- package/src/__Tests__/index.js +2 -2
- package/src/_variables.scss +11 -11
- package/src/index.js +33 -33
- package/src/normalizers.js +42 -32
- package/src/selectors.js +3 -3
- package/src/styles.scss +7 -7
- package/src/useStandardFormInput.js +118 -118
- package/src/utils/index.js +3 -3
- package/src/utils/objectContainsNonSerializableProperty.js +15 -15
- package/src/utils/objectContainsNonSerializableProperty.test.js +49 -49
- package/src/utils/objectToFormData.js +89 -83
- package/src/utils/objectToFormData.test.js +76 -47
- package/src/utils/typeChecks.js +18 -18
- package/src/validators/index.js +2 -2
- package/src/validators/validators.js +93 -93
- package/src/validators/validators.test.js +79 -79
- package/CHANGELOG.json +0 -95
- package/CHANGELOG.md +0 -58
@@ -19,6 +19,9 @@ var _NestedFormFieldContext = _interopRequireDefault(require("./NestedFormFieldC
|
|
19
19
|
|
20
20
|
var _Form = require("./Form");
|
21
21
|
|
22
|
+
var _excluded = ["id", "name", "disabled", "validate", "normalize"],
|
23
|
+
_excluded2 = ["onChange", "value"];
|
24
|
+
|
22
25
|
// provides a consistent way to deal with all form fields (non array)
|
23
26
|
function useStandardFormInput(_ref) {
|
24
27
|
var providedId = _ref.id,
|
@@ -26,7 +29,7 @@ function useStandardFormInput(_ref) {
|
|
26
29
|
disabled = _ref.disabled,
|
27
30
|
validate = _ref.validate,
|
28
31
|
normalize = _ref.normalize,
|
29
|
-
props = (0, _objectWithoutProperties2["default"])(_ref,
|
32
|
+
props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
|
30
33
|
|
31
34
|
// because the formik errors are evaluated all at the same time we need to keep server errors separate
|
32
35
|
var _useContext = (0, _react.useContext)(_Form.ServerErrorContext),
|
@@ -50,7 +53,7 @@ function useStandardFormInput(_ref) {
|
|
50
53
|
_useField2$ = _useField2[0],
|
51
54
|
formikOnChange = _useField2$.onChange,
|
52
55
|
value = _useField2$.value,
|
53
|
-
formikProps = (0, _objectWithoutProperties2["default"])(_useField2$,
|
56
|
+
formikProps = (0, _objectWithoutProperties2["default"])(_useField2$, _excluded2),
|
54
57
|
meta = _useField2[1];
|
55
58
|
|
56
59
|
var _useFormikContext = (0, _formik.useFormikContext)(),
|
@@ -7,7 +7,8 @@ exports["default"] = void 0;
|
|
7
7
|
|
8
8
|
var _typeChecks = require("./typeChecks");
|
9
9
|
|
10
|
-
//https://github.com/therealparmesh/object-to-formdata/blob/master/src/index.js
|
10
|
+
// Original: https://github.com/therealparmesh/object-to-formdata/blob/master/src/index.js
|
11
|
+
// With Multiple Form File Fix: https://github.com/therealparmesh/object-to-formdata/pull/94/files
|
11
12
|
var serialize = function serialize(obj, cfg, fd, pre) {
|
12
13
|
cfg = cfg || {};
|
13
14
|
cfg.indices = (0, _typeChecks.isUndefined)(cfg.indices) ? false : cfg.indices;
|
@@ -33,7 +34,14 @@ var serialize = function serialize(obj, cfg, fd, pre) {
|
|
33
34
|
} else if ((0, _typeChecks.isArray)(obj)) {
|
34
35
|
if (obj.length) {
|
35
36
|
obj.forEach(function (value, index) {
|
36
|
-
var key
|
37
|
+
var key;
|
38
|
+
|
39
|
+
if (cfg.noFileListBrackets && (0, _typeChecks.isFile)(value)) {
|
40
|
+
key = pre;
|
41
|
+
} else {
|
42
|
+
key = pre + '[' + (cfg.indices ? index : '') + ']';
|
43
|
+
}
|
44
|
+
|
37
45
|
serialize(value, cfg, fd, key);
|
38
46
|
});
|
39
47
|
} else if (cfg.allowEmptyArrays) {
|
package/lib/validators/index.js
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
"use strict";
|
2
2
|
|
3
|
-
var
|
3
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
4
4
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
6
6
|
value: true
|
@@ -9,5 +9,9 @@ exports["default"] = void 0;
|
|
9
9
|
|
10
10
|
var validators = _interopRequireWildcard(require("./validators"));
|
11
11
|
|
12
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
13
|
+
|
14
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
15
|
+
|
12
16
|
var _default = validators;
|
13
17
|
exports["default"] = _default;
|
package/package.json
CHANGED
@@ -1,93 +1,100 @@
|
|
1
1
|
{
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
2
|
+
"name": "envoc-form",
|
3
|
+
"version": "3.0.0",
|
4
|
+
"description": "Envoc form components",
|
5
|
+
"keywords": [
|
6
|
+
"react-component",
|
7
|
+
"react",
|
8
|
+
"forms",
|
9
|
+
"components",
|
10
|
+
"envoc"
|
11
|
+
],
|
12
|
+
"homepage": "",
|
13
|
+
"repository": "",
|
14
|
+
"license": "MIT",
|
15
|
+
"author": "Envoc Developers",
|
16
|
+
"sideEffects": false,
|
17
|
+
"main": "lib/index.js",
|
18
|
+
"module": "es/index.js",
|
19
|
+
"files": [
|
20
|
+
"dist",
|
21
|
+
"src",
|
22
|
+
"lib",
|
23
|
+
"es"
|
24
|
+
],
|
25
|
+
"dependencies": {
|
26
|
+
"axios": "^0.21.1",
|
27
|
+
"classnames": "^2.3.1",
|
28
|
+
"date-fns": "^2.22.1",
|
29
|
+
"envoc-request": "^3.0.0",
|
30
|
+
"lru-cache": "^6.0.0",
|
31
|
+
"prop-types": "^15.7.2",
|
32
|
+
"react-date-picker": "^8.2.0",
|
33
|
+
"react-dropzone": "^11.3.4",
|
34
|
+
"react-router": "^6.2.1",
|
35
|
+
"react-select": "^3.1.1",
|
36
|
+
"react-textarea-autosize": "^8.3.3",
|
37
|
+
"react-toastify": "^7.0.4",
|
38
|
+
"reactstrap": "^8.9.0",
|
39
|
+
"smoothscroll-polyfill": "^0.4.4",
|
40
|
+
"uuid": "^8.3.2",
|
41
|
+
"@fortawesome/react-fontawesome": "~0.1.16",
|
42
|
+
"@fortawesome/free-solid-svg-icons": "~5.15.4",
|
43
|
+
"@fortawesome/fontawesome-svg-core": "~1.2.36"
|
44
|
+
},
|
45
|
+
"devDependencies": {
|
46
|
+
"@babel/cli": "^7.14.5",
|
47
|
+
"@babel/core": "^7.14.6",
|
48
|
+
"@babel/plugin-transform-runtime": "^7.14.5",
|
49
|
+
"@babel/preset-env": "^7.14.7",
|
50
|
+
"@babel/preset-react": "^7.14.5",
|
51
|
+
"@testing-library/jest-dom": "^5.14.1",
|
52
|
+
"@testing-library/react": "^11.2.5",
|
53
|
+
"@testing-library/user-event": "^12.7.1",
|
54
|
+
"babel-loader": "^8.2.2",
|
55
|
+
"bootstrap": "^4.6.0",
|
56
|
+
"clean-webpack-plugin": "^3.0.0",
|
57
|
+
"cross-env": "7.0.3",
|
58
|
+
"css-loader": "^5.0.2",
|
59
|
+
"html-webpack-plugin": "^5.3.2",
|
60
|
+
"identity-obj-proxy": "^3.0.0",
|
61
|
+
"jest-junit": "~12.2.0",
|
62
|
+
"react": "^17.0.1",
|
63
|
+
"react-dom": "^17.0.1",
|
64
|
+
"react-router-dom": "^6.2.1",
|
65
|
+
"react-scripts": "^4.0.3",
|
66
|
+
"rimraf": "~3.0.2",
|
67
|
+
"sass": "^1.35.2",
|
68
|
+
"sass-loader": "^11.0.1",
|
69
|
+
"style-loader": "^2.0.0",
|
70
|
+
"webpack": "^5.45.0",
|
71
|
+
"webpack-cli": "^4.7.2",
|
72
|
+
"webpack-dev-server": "^3.11.2",
|
73
|
+
"typedoc-plugin-markdown": "~3.10.3",
|
74
|
+
"typedoc": "~0.21.4"
|
75
|
+
},
|
76
|
+
"peerDependencies": {
|
77
|
+
"@babel/runtime": "^7.14.6",
|
78
|
+
"formik": "^2.2.9",
|
79
|
+
"react": ">=16.8.0",
|
80
|
+
"react-dom": ">=16.8.0",
|
81
|
+
"react-router-dom": "^6.2.1"
|
82
|
+
},
|
83
|
+
"jest": {
|
84
|
+
"transformIgnorePatterns": [
|
85
|
+
"^.+\\.module\\.(css|sass|scss)$"
|
86
|
+
]
|
87
|
+
},
|
88
|
+
"scripts": {
|
89
|
+
"build": "yarn verify-imports && yarn build:esm && yarn build:cjs && yarn build:css",
|
90
|
+
"rebuild": "rimraf ./{dist,es,lib} && yarn build",
|
91
|
+
"build:esm": "cross-env BABEL_ENV=esm-dir babel src --out-dir es --ignore \"src/**/*.spec.js\",\"src/**/*.test.js\"",
|
92
|
+
"build:css": "sass src/styles.scss dist/css/envoc-form-styles.css",
|
93
|
+
"build:cjs": "babel src --out-dir lib --ignore \"src/**/*.spec.js\",\"src/**/*.test.js\"",
|
94
|
+
"verify-imports": "node ../../scripts/check-for-scss-imports.js envoc-form",
|
95
|
+
"start": "webpack serve --config ./webpack.demo.config.js",
|
96
|
+
"test": "cross-env SKIP_PREFLIGHT_CHECK=true react-scripts test --watchAll=false",
|
97
|
+
"coverage": "yarn test --reporters=jest-junit --coverage --coverageReporters=cobertura"
|
98
|
+
},
|
99
|
+
"readme": "# envoc-form\r\n\r\n[![npm package][npm-badge]][npm]\r\n\r\nBase form package for envoc projects.\r\n\r\n[npm-badge]: https://img.shields.io/npm/v/envoc-form.png?style=flat\r\n[npm]: https://www.npmjs.com/package/envoc-form"
|
100
|
+
}
|
@@ -1,23 +1,23 @@
|
|
1
|
-
import React from 'react';
|
2
|
-
import { render } from '@testing-library/react';
|
3
|
-
import { FormTestBase } from '../__Tests__';
|
4
|
-
import AddressInput from './AddressInput';
|
5
|
-
|
6
|
-
describe('AddressInput', () => {
|
7
|
-
it('renders without crashing', () => {
|
8
|
-
render(
|
9
|
-
<FormTestBase>
|
10
|
-
<AddressInput />
|
11
|
-
</FormTestBase>
|
12
|
-
);
|
13
|
-
});
|
14
|
-
|
15
|
-
it('has matching snapshot', () => {
|
16
|
-
const renderResult = render(
|
17
|
-
<FormTestBase>
|
18
|
-
<AddressInput />
|
19
|
-
</FormTestBase>
|
20
|
-
);
|
21
|
-
expect(renderResult.asFragment()).toMatchSnapshot();
|
22
|
-
});
|
23
|
-
});
|
1
|
+
import React from 'react';
|
2
|
+
import { render } from '@testing-library/react';
|
3
|
+
import { FormTestBase } from '../__Tests__';
|
4
|
+
import AddressInput from './AddressInput';
|
5
|
+
|
6
|
+
describe('AddressInput', () => {
|
7
|
+
it('renders without crashing', () => {
|
8
|
+
render(
|
9
|
+
<FormTestBase>
|
10
|
+
<AddressInput />
|
11
|
+
</FormTestBase>
|
12
|
+
);
|
13
|
+
});
|
14
|
+
|
15
|
+
it('has matching snapshot', () => {
|
16
|
+
const renderResult = render(
|
17
|
+
<FormTestBase>
|
18
|
+
<AddressInput />
|
19
|
+
</FormTestBase>
|
20
|
+
);
|
21
|
+
expect(renderResult.asFragment()).toMatchSnapshot();
|
22
|
+
});
|
23
|
+
});
|
@@ -1,73 +1,73 @@
|
|
1
|
-
import React from 'react';
|
2
|
-
import { Col, Row } from 'reactstrap';
|
3
|
-
import PropTypes from 'prop-types';
|
4
|
-
import FormInput from '../FormInput';
|
5
|
-
import FormSection from '../FormSection';
|
6
|
-
import validators from '../validators';
|
7
|
-
import * as normalizers from '../normalizers';
|
8
|
-
import UsStates from './UsStates';
|
9
|
-
|
10
|
-
export default class AddressInput extends React.Component {
|
11
|
-
render() {
|
12
|
-
const { name, ...props } = this.props;
|
13
|
-
return (
|
14
|
-
<FormSection name={name} {...props}>
|
15
|
-
<FormInput
|
16
|
-
name="address1"
|
17
|
-
placeholder="Address, Line 1"
|
18
|
-
label="Address 1"
|
19
|
-
autoComplete="address-line1"
|
20
|
-
validate={validators.required}
|
21
|
-
/>
|
22
|
-
<FormInput
|
23
|
-
name="address2"
|
24
|
-
placeholder="Address, Line 2"
|
25
|
-
label="Address 2"
|
26
|
-
autoComplete="address-line2"
|
27
|
-
/>
|
28
|
-
<FormInput
|
29
|
-
name="city"
|
30
|
-
placeholder="City"
|
31
|
-
label="City"
|
32
|
-
autoComplete="address-level2"
|
33
|
-
validate={validators.required}
|
34
|
-
/>
|
35
|
-
<Row>
|
36
|
-
<Col xs={8}>
|
37
|
-
<FormInput
|
38
|
-
name="state"
|
39
|
-
placeholder="State"
|
40
|
-
label="State"
|
41
|
-
type="select"
|
42
|
-
options={UsStates}
|
43
|
-
autoComplete="address-level1"
|
44
|
-
validate={validators.required}
|
45
|
-
/>
|
46
|
-
</Col>
|
47
|
-
<Col xs={4}>
|
48
|
-
<FormInput
|
49
|
-
name="zipCode"
|
50
|
-
placeholder="Zip"
|
51
|
-
label="Zip"
|
52
|
-
autoComplete="postal-code"
|
53
|
-
normalize={normalizers.zipCode}
|
54
|
-
validate={[validators.required, validators.zipCode]}
|
55
|
-
/>
|
56
|
-
</Col>
|
57
|
-
</Row>
|
58
|
-
</FormSection>
|
59
|
-
);
|
60
|
-
}
|
61
|
-
}
|
62
|
-
AddressInput.propTypes = {
|
63
|
-
/**
|
64
|
-
* The key that the resulting values should be nested under within the form values.
|
65
|
-
* If name prop were chicken the submitted form values would look like: {chicken: {address1:...}}
|
66
|
-
* this allows us to have two address inputs inside the same form (shipping and billing address)
|
67
|
-
*/
|
68
|
-
name: PropTypes.string,
|
69
|
-
};
|
70
|
-
|
71
|
-
AddressInput.defaultProps = {
|
72
|
-
name: 'address',
|
73
|
-
};
|
1
|
+
import React from 'react';
|
2
|
+
import { Col, Row } from 'reactstrap';
|
3
|
+
import PropTypes from 'prop-types';
|
4
|
+
import FormInput from '../FormInput';
|
5
|
+
import FormSection from '../FormSection';
|
6
|
+
import validators from '../validators';
|
7
|
+
import * as normalizers from '../normalizers';
|
8
|
+
import UsStates from './UsStates';
|
9
|
+
|
10
|
+
export default class AddressInput extends React.Component {
|
11
|
+
render() {
|
12
|
+
const { name, ...props } = this.props;
|
13
|
+
return (
|
14
|
+
<FormSection name={name} {...props}>
|
15
|
+
<FormInput
|
16
|
+
name="address1"
|
17
|
+
placeholder="Address, Line 1"
|
18
|
+
label="Address 1"
|
19
|
+
autoComplete="address-line1"
|
20
|
+
validate={validators.required}
|
21
|
+
/>
|
22
|
+
<FormInput
|
23
|
+
name="address2"
|
24
|
+
placeholder="Address, Line 2"
|
25
|
+
label="Address 2"
|
26
|
+
autoComplete="address-line2"
|
27
|
+
/>
|
28
|
+
<FormInput
|
29
|
+
name="city"
|
30
|
+
placeholder="City"
|
31
|
+
label="City"
|
32
|
+
autoComplete="address-level2"
|
33
|
+
validate={validators.required}
|
34
|
+
/>
|
35
|
+
<Row>
|
36
|
+
<Col xs={8}>
|
37
|
+
<FormInput
|
38
|
+
name="state"
|
39
|
+
placeholder="State"
|
40
|
+
label="State"
|
41
|
+
type="select"
|
42
|
+
options={UsStates}
|
43
|
+
autoComplete="address-level1"
|
44
|
+
validate={validators.required}
|
45
|
+
/>
|
46
|
+
</Col>
|
47
|
+
<Col xs={4}>
|
48
|
+
<FormInput
|
49
|
+
name="zipCode"
|
50
|
+
placeholder="Zip"
|
51
|
+
label="Zip"
|
52
|
+
autoComplete="postal-code"
|
53
|
+
normalize={normalizers.zipCode}
|
54
|
+
validate={[validators.required, validators.zipCode]}
|
55
|
+
/>
|
56
|
+
</Col>
|
57
|
+
</Row>
|
58
|
+
</FormSection>
|
59
|
+
);
|
60
|
+
}
|
61
|
+
}
|
62
|
+
AddressInput.propTypes = {
|
63
|
+
/**
|
64
|
+
* The key that the resulting values should be nested under within the form values.
|
65
|
+
* If name prop were chicken the submitted form values would look like: {chicken: {address1:...}}
|
66
|
+
* this allows us to have two address inputs inside the same form (shipping and billing address)
|
67
|
+
*/
|
68
|
+
name: PropTypes.string,
|
69
|
+
};
|
70
|
+
|
71
|
+
AddressInput.defaultProps = {
|
72
|
+
name: 'address',
|
73
|
+
};
|
@@ -1,53 +1,53 @@
|
|
1
|
-
const states = [
|
2
|
-
{ label: 'Alabama', value: 'AL' },
|
3
|
-
{ label: 'Alaska', value: 'AK' },
|
4
|
-
{ label: 'Arizona', value: 'AZ' },
|
5
|
-
{ label: 'Arkansas', value: 'AR' },
|
6
|
-
{ label: 'California', value: 'CA' },
|
7
|
-
{ label: 'Colorado', value: 'CO' },
|
8
|
-
{ label: 'Connecticut', value: 'CT' },
|
9
|
-
{ label: 'Delaware', value: 'DE' },
|
10
|
-
{ label: 'Florida', value: 'FL' },
|
11
|
-
{ label: 'Georgia', value: 'GA' },
|
12
|
-
{ label: 'Hawaii', value: 'HI' },
|
13
|
-
{ label: 'Idaho', value: 'ID' },
|
14
|
-
{ label: 'Illinois', value: 'IL' },
|
15
|
-
{ label: 'Indiana', value: 'IN' },
|
16
|
-
{ label: 'Iowa', value: 'IA' },
|
17
|
-
{ label: 'Kansas', value: 'KS' },
|
18
|
-
{ label: 'Kentucky', value: 'KY' },
|
19
|
-
{ label: 'Louisiana', value: 'LA' },
|
20
|
-
{ label: 'Maine', value: 'ME' },
|
21
|
-
{ label: 'Maryland', value: 'MD' },
|
22
|
-
{ label: 'Massachusetts', value: 'MA' },
|
23
|
-
{ label: 'Michigan', value: 'MI' },
|
24
|
-
{ label: 'Minnesota', value: 'MN' },
|
25
|
-
{ label: 'Mississippi', value: 'MS' },
|
26
|
-
{ label: 'Missouri', value: 'MO' },
|
27
|
-
{ label: 'Montana', value: 'MT' },
|
28
|
-
{ label: 'Nebraska', value: 'NE' },
|
29
|
-
{ label: 'Nevada', value: 'NV' },
|
30
|
-
{ label: 'New Hampshire', value: 'NH' },
|
31
|
-
{ label: 'New Jersey', value: 'NJ' },
|
32
|
-
{ label: 'New Mexico', value: 'NM' },
|
33
|
-
{ label: 'New York', value: 'NY' },
|
34
|
-
{ label: 'North Carolina', value: 'NC' },
|
35
|
-
{ label: 'North Dakota', value: 'ND' },
|
36
|
-
{ label: 'Ohio', value: 'OH' },
|
37
|
-
{ label: 'Oklahoma', value: 'OK' },
|
38
|
-
{ label: 'Oregon', value: 'OR' },
|
39
|
-
{ label: 'Pennsylvania', value: 'PA' },
|
40
|
-
{ label: 'Rhode Island', value: 'RI' },
|
41
|
-
{ label: 'South Carolina', value: 'SC' },
|
42
|
-
{ label: 'South Dakota', value: 'SD' },
|
43
|
-
{ label: 'Tennessee', value: 'TN' },
|
44
|
-
{ label: 'Texas', value: 'TX' },
|
45
|
-
{ label: 'Utah', value: 'UT' },
|
46
|
-
{ label: 'Vermont', value: 'VT' },
|
47
|
-
{ label: 'Virginia', value: 'VA' },
|
48
|
-
{ label: 'Washington', value: 'WA' },
|
49
|
-
{ label: 'West Virginia', value: 'WV' },
|
50
|
-
{ label: 'Wisconsin', value: 'WI' },
|
51
|
-
{ label: 'Wyoming', value: 'WY' },
|
52
|
-
];
|
53
|
-
export default states;
|
1
|
+
const states = [
|
2
|
+
{ label: 'Alabama', value: 'AL' },
|
3
|
+
{ label: 'Alaska', value: 'AK' },
|
4
|
+
{ label: 'Arizona', value: 'AZ' },
|
5
|
+
{ label: 'Arkansas', value: 'AR' },
|
6
|
+
{ label: 'California', value: 'CA' },
|
7
|
+
{ label: 'Colorado', value: 'CO' },
|
8
|
+
{ label: 'Connecticut', value: 'CT' },
|
9
|
+
{ label: 'Delaware', value: 'DE' },
|
10
|
+
{ label: 'Florida', value: 'FL' },
|
11
|
+
{ label: 'Georgia', value: 'GA' },
|
12
|
+
{ label: 'Hawaii', value: 'HI' },
|
13
|
+
{ label: 'Idaho', value: 'ID' },
|
14
|
+
{ label: 'Illinois', value: 'IL' },
|
15
|
+
{ label: 'Indiana', value: 'IN' },
|
16
|
+
{ label: 'Iowa', value: 'IA' },
|
17
|
+
{ label: 'Kansas', value: 'KS' },
|
18
|
+
{ label: 'Kentucky', value: 'KY' },
|
19
|
+
{ label: 'Louisiana', value: 'LA' },
|
20
|
+
{ label: 'Maine', value: 'ME' },
|
21
|
+
{ label: 'Maryland', value: 'MD' },
|
22
|
+
{ label: 'Massachusetts', value: 'MA' },
|
23
|
+
{ label: 'Michigan', value: 'MI' },
|
24
|
+
{ label: 'Minnesota', value: 'MN' },
|
25
|
+
{ label: 'Mississippi', value: 'MS' },
|
26
|
+
{ label: 'Missouri', value: 'MO' },
|
27
|
+
{ label: 'Montana', value: 'MT' },
|
28
|
+
{ label: 'Nebraska', value: 'NE' },
|
29
|
+
{ label: 'Nevada', value: 'NV' },
|
30
|
+
{ label: 'New Hampshire', value: 'NH' },
|
31
|
+
{ label: 'New Jersey', value: 'NJ' },
|
32
|
+
{ label: 'New Mexico', value: 'NM' },
|
33
|
+
{ label: 'New York', value: 'NY' },
|
34
|
+
{ label: 'North Carolina', value: 'NC' },
|
35
|
+
{ label: 'North Dakota', value: 'ND' },
|
36
|
+
{ label: 'Ohio', value: 'OH' },
|
37
|
+
{ label: 'Oklahoma', value: 'OK' },
|
38
|
+
{ label: 'Oregon', value: 'OR' },
|
39
|
+
{ label: 'Pennsylvania', value: 'PA' },
|
40
|
+
{ label: 'Rhode Island', value: 'RI' },
|
41
|
+
{ label: 'South Carolina', value: 'SC' },
|
42
|
+
{ label: 'South Dakota', value: 'SD' },
|
43
|
+
{ label: 'Tennessee', value: 'TN' },
|
44
|
+
{ label: 'Texas', value: 'TX' },
|
45
|
+
{ label: 'Utah', value: 'UT' },
|
46
|
+
{ label: 'Vermont', value: 'VT' },
|
47
|
+
{ label: 'Virginia', value: 'VA' },
|
48
|
+
{ label: 'Washington', value: 'WA' },
|
49
|
+
{ label: 'West Virginia', value: 'WV' },
|
50
|
+
{ label: 'Wisconsin', value: 'WI' },
|
51
|
+
{ label: 'Wyoming', value: 'WY' },
|
52
|
+
];
|
53
|
+
export default states;
|