From 08ca5ec8a4d46782b5fdb98745ba53640235b8eb Mon Sep 17 00:00:00 2001 From: Erik Rasmussen Date: Sat, 25 Sep 2021 11:50:25 +0200 Subject: [PATCH 1/8] Upgraded deps --- .eslintrc | 3 +- package.json | 86 ++++++++++++++++++++++++++-------------------------- 2 files changed, 45 insertions(+), 44 deletions(-) diff --git a/.eslintrc b/.eslintrc index b76c7847..7939e29a 100755 --- a/.eslintrc +++ b/.eslintrc @@ -4,6 +4,7 @@ "rules": { "jsx-a11y/href-no-hash": 0, "react-hooks/rules-of-hooks": "error", - "react-hooks/exhaustive-deps": "warn" + "react-hooks/exhaustive-deps": "warn", + "import/no-anonymous-default-export": 0 } } diff --git a/package.json b/package.json index c4e1abf1..873f60e6 100644 --- a/package.json +++ b/package.json @@ -29,67 +29,67 @@ }, "homepage": "https://github.com/final-form/react-final-form#readme", "devDependencies": { - "@babel/core": "^7.12.3", - "@babel/plugin-proposal-class-properties": "^7.12.1", - "@babel/plugin-proposal-decorators": "^7.12.1", - "@babel/plugin-proposal-export-namespace-from": "^7.12.1", - "@babel/plugin-proposal-function-sent": "^7.12.1", - "@babel/plugin-proposal-json-strings": "^7.12.1", - "@babel/plugin-proposal-numeric-separator": "^7.12.1", - "@babel/plugin-proposal-throw-expressions": "^7.12.1", + "@babel/core": "^7.15.5", + "@babel/plugin-proposal-class-properties": "^7.14.5", + "@babel/plugin-proposal-decorators": "^7.15.4", + "@babel/plugin-proposal-export-namespace-from": "^7.14.5", + "@babel/plugin-proposal-function-sent": "^7.14.5", + "@babel/plugin-proposal-json-strings": "^7.14.5", + "@babel/plugin-proposal-numeric-separator": "^7.14.5", + "@babel/plugin-proposal-throw-expressions": "^7.14.5", "@babel/plugin-syntax-dynamic-import": "^7.8.3", "@babel/plugin-syntax-import-meta": "^7.10.4", - "@babel/plugin-transform-flow-strip-types": "^7.12.1", - "@babel/plugin-transform-react-jsx-source": "^7.12.13", - "@babel/plugin-transform-runtime": "^7.12.1", - "@babel/preset-env": "^7.12.1", - "@babel/preset-flow": "^7.12.1", - "@babel/preset-react": "^7.12.1", - "@testing-library/jest-dom": "^5.11.4", - "@testing-library/react": "^11.1.0", - "@types/react": "^16.9.53", - "@typescript-eslint/eslint-plugin": "^4.5.0", - "@typescript-eslint/parser": "^4.5.0", + "@babel/plugin-transform-flow-strip-types": "^7.14.5", + "@babel/plugin-transform-react-jsx-source": "^7.14.5", + "@babel/plugin-transform-runtime": "^7.15.0", + "@babel/preset-env": "^7.15.6", + "@babel/preset-flow": "^7.14.5", + "@babel/preset-react": "^7.14.5", + "@testing-library/jest-dom": "^5.14.1", + "@testing-library/react": "^12.1.0", + "@types/react": "^17.0.24", + "@typescript-eslint/eslint-plugin": "^4.31.2", + "@typescript-eslint/parser": "^4.31.2", "babel-core": "^7.0.0-bridge.0", "babel-eslint": "^10.1.0", - "babel-jest": "^26.6.0", - "bundlesize": "^0.18.0", - "doctoc": "^1.4.0", - "dtslint": "^4.0.4", - "eslint": "^7.11.0", - "eslint-config-react-app": "^5.2.1", + "babel-jest": "^27.2.1", + "bundlesize": "^0.18.1", + "doctoc": "^2.0.1", + "dtslint": "^4.1.6", + "eslint": "^7.32.0", + "eslint-config-react-app": "^6.0.0", "eslint-plugin-babel": "^5.3.1", - "eslint-plugin-flowtype": "^5.2.0", - "eslint-plugin-import": "^2.22.1", - "eslint-plugin-jsx-a11y": "^6.3.1", - "eslint-plugin-react": "^7.21.5", + "eslint-plugin-flowtype": "^6.1.0", + "eslint-plugin-import": "^2.24.2", + "eslint-plugin-jsx-a11y": "^6.4.1", + "eslint-plugin-react": "^7.26.0", "eslint-plugin-react-hooks": "^4.2.0", "fast-deep-equal": "^3.1.3", - "final-form": "^4.20.1", - "flow-bin": "^0.136.0", + "final-form": "^4.20.2", + "flow-bin": "^0.160.2", "glow": "^1.2.2", "husky": "^4.3.0", - "jest": "^26.6.0", - "jest-mock-console": "^1.0.1", - "lint-staged": "^10.4.2", + "jest": "^27.2.1", + "jest-mock-console": "^1.1.0", + "lint-staged": "^11.1.2", "nps": "^5.10.0", "nps-utils": "^1.7.0", "opencollective": "^1.0.3", - "prettier": "^2.1.2", - "prettier-eslint-cli": "^5.0.0", - "react": "^17.0.0", - "react-dom": "^17.0.0", - "rollup": "^2.32.1", + "prettier": "^2.4.1", + "prettier-eslint-cli": "^5.0.1", + "react": "^17.0.2", + "react-dom": "^17.0.2", + "rollup": "^2.57.0", "rollup-plugin-babel": "^4.4.0", "rollup-plugin-commonjs": "^10.1.0", "rollup-plugin-json": "^4.0.0", "rollup-plugin-node-resolve": "^5.2.0", "rollup-plugin-replace": "^2.2.0", "rollup-plugin-uglify": "^6.0.4", - "tar": "^6.0.5", - "ts-essentials": "^7.0.1", + "tar": "^6.1.11", + "ts-essentials": "^8.1.0", "tslint": "^6.1.3", - "typescript": "^4.0.3" + "typescript": "^4.4.3" }, "peerDependencies": { "final-form": "^4.20.0", @@ -130,6 +130,6 @@ "url": "https://opencollective.com/final-form" }, "dependencies": { - "@babel/runtime": "^7.12.1" + "@babel/runtime": "^7.15.4" } } From c2f5a182cf1fb5dc71e5fa92b8537a3efa434ea1 Mon Sep 17 00:00:00 2001 From: Erik Rasmussen Date: Sat, 25 Sep 2021 11:52:54 +0200 Subject: [PATCH 2/8] Upgraded react in examples --- examples/async-field-level-validation/package.json | 6 +++--- examples/async-redux-submission/package.json | 6 +++--- examples/async-typeahead-redux/package.json | 6 +++--- examples/auto-save-field-blur/package.json | 6 +++--- examples/auto-save-selective-debounce/package.json | 6 +++--- examples/auto-save-with-debounce/package.json | 6 +++--- examples/calculated-fields/package.json | 6 +++--- examples/chakra/package.json | 4 ++-- examples/conditional-fields/package.json | 6 +++--- examples/credit-card/package.json | 6 +++--- examples/custom-validation-engine/package.json | 6 +++--- examples/debounced-record-level-validation/package.json | 6 +++--- examples/declarative-form-rules/package.json | 6 +++--- examples/downshift-typeahead/package.json | 6 +++--- examples/external-submit/package.json | 6 +++--- examples/field-arrays/package.json | 6 +++--- examples/field-warnings/package.json | 6 +++--- examples/focus-first-error/package.json | 6 +++--- examples/format-on-blur/package.json | 6 +++--- examples/format-string-by-pattern/package.json | 6 +++--- .../hybrid-sync-async-record-level-validation/package.json | 6 +++--- .../independent-error-component-render-props/package.json | 6 +++--- .../independent-error-component-with-hooks/package.json | 6 +++--- examples/listening-for-external-changes/package.json | 6 +++--- examples/loading-initializing-values/package.json | 6 +++--- examples/loading-saving-reinitializing/package.json | 6 +++--- examples/parse-format/package.json | 6 +++--- examples/redux/package.json | 6 +++--- examples/reusable-field-groups/package.json | 6 +++--- examples/styling-with-smooth-ui/package.json | 6 +++--- examples/third-party-components/package.json | 6 +++--- 31 files changed, 92 insertions(+), 92 deletions(-) diff --git a/examples/async-field-level-validation/package.json b/examples/async-field-level-validation/package.json index d42c59c5..33349807 100644 --- a/examples/async-field-level-validation/package.json +++ b/examples/async-field-level-validation/package.json @@ -12,9 +12,9 @@ "main": "index.js", "dependencies": { "final-form": "4.16.1", - "react": "16.8.6", - "react-dom": "16.8.6", + "react": "17.0.2", + "react-dom": "17.0.2", "react-final-form": "6.3.0", "styled-components": "4.2.0" } -} \ No newline at end of file +} diff --git a/examples/async-redux-submission/package.json b/examples/async-redux-submission/package.json index 3791a97a..f816abdd 100644 --- a/examples/async-redux-submission/package.json +++ b/examples/async-redux-submission/package.json @@ -13,8 +13,8 @@ "main": "src/index.js", "dependencies": { "final-form": "4.12.0", - "react": "16.8.6", - "react-dom": "16.8.6", + "react": "17.0.2", + "react-dom": "17.0.2", "react-final-form": "5.0.1", "react-redux": "7.0.3", "react-redux-promise-listener": "1.0.0", @@ -30,4 +30,4 @@ "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" } -} \ No newline at end of file +} diff --git a/examples/async-typeahead-redux/package.json b/examples/async-typeahead-redux/package.json index af0755c6..b2fc1d48 100644 --- a/examples/async-typeahead-redux/package.json +++ b/examples/async-typeahead-redux/package.json @@ -9,13 +9,13 @@ "final-form": "4.18.5", "final-form-set-field-data": "1.0.2", "ramda": "0.25.0", - "react": "16.9.0", + "react": "17.0.2", "react-bootstrap-typeahead": "3.1.4", - "react-dom": "16.9.0", + "react-dom": "17.0.2", "react-final-form": "6.3.0", "react-redux": "7.1.0", "redux": "4.0.4", "redux-thunk": "2.3.0", "styled-components": "2.4.0" } -} \ No newline at end of file +} diff --git a/examples/auto-save-field-blur/package.json b/examples/auto-save-field-blur/package.json index 391f4668..4ae3471b 100644 --- a/examples/auto-save-field-blur/package.json +++ b/examples/auto-save-field-blur/package.json @@ -8,9 +8,9 @@ "final-form": "4.12.0", "final-form-set-field-data": "1.0.2", "object-diff": "0.0.4", - "react": "16.8.6", - "react-dom": "16.8.6", + "react": "17.0.2", + "react-dom": "17.0.2", "react-final-form": "5.0.1", "styled-components": "4.2.0" } -} \ No newline at end of file +} diff --git a/examples/auto-save-selective-debounce/package.json b/examples/auto-save-selective-debounce/package.json index cb32429b..416810e5 100644 --- a/examples/auto-save-selective-debounce/package.json +++ b/examples/auto-save-selective-debounce/package.json @@ -7,9 +7,9 @@ "dependencies": { "final-form": "4.12.0", "object-diff": "0.0.4", - "react": "16.8.6", - "react-dom": "16.8.6", + "react": "17.0.2", + "react-dom": "17.0.2", "react-final-form": "5.0.1", "styled-components": "4.2.0" } -} \ No newline at end of file +} diff --git a/examples/auto-save-with-debounce/package.json b/examples/auto-save-with-debounce/package.json index ff6b38a2..3358038e 100644 --- a/examples/auto-save-with-debounce/package.json +++ b/examples/auto-save-with-debounce/package.json @@ -13,9 +13,9 @@ "dependencies": { "final-form": "4.12.0", "object-diff": "0.0.4", - "react": "16.8.6", - "react-dom": "16.8.6", + "react": "17.0.2", + "react-dom": "17.0.2", "react-final-form": "5.0.1", "styled-components": "4.2.0" } -} \ No newline at end of file +} diff --git a/examples/calculated-fields/package.json b/examples/calculated-fields/package.json index 81196f07..6bfd7caa 100644 --- a/examples/calculated-fields/package.json +++ b/examples/calculated-fields/package.json @@ -8,9 +8,9 @@ "dependencies": { "final-form": "4.12.0", "final-form-calculate": "1.3.1", - "react": "16.8.6", - "react-dom": "16.8.6", + "react": "17.0.2", + "react-dom": "17.0.2", "react-final-form": "5.0.1", "styled-components": "4.2.0" } -} \ No newline at end of file +} diff --git a/examples/chakra/package.json b/examples/chakra/package.json index 57156329..09b0d19a 100644 --- a/examples/chakra/package.json +++ b/examples/chakra/package.json @@ -16,8 +16,8 @@ "@emotion/styled": "^10.0.17", "emotion-theming": "^10.0.17", "final-form": "4.18.6", - "react": "16.12.0", - "react-dom": "16.12.0", + "react": "17.0.2", + "react-dom": "17.0.2", "react-final-form": "latest", "react-scripts": "3.2.0" }, diff --git a/examples/conditional-fields/package.json b/examples/conditional-fields/package.json index 406f44ab..d13b371a 100644 --- a/examples/conditional-fields/package.json +++ b/examples/conditional-fields/package.json @@ -7,8 +7,8 @@ "main": "src/index.js", "dependencies": { "final-form": "4.12.0", - "react": "16.8.6", - "react-dom": "16.8.6", + "react": "17.0.2", + "react-dom": "17.0.2", "react-final-form": "5.0.1", "react-scripts": "3.0.1", "styled-components": "4.2.0" @@ -20,4 +20,4 @@ "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" } -} \ No newline at end of file +} diff --git a/examples/credit-card/package.json b/examples/credit-card/package.json index 441024b4..5e611713 100644 --- a/examples/credit-card/package.json +++ b/examples/credit-card/package.json @@ -13,9 +13,9 @@ "main": "src/index.js", "dependencies": { "final-form": "4.12.0", - "react": "16.8.6", + "react": "17.0.2", "react-credit-cards": "0.7.0", - "react-dom": "16.8.6", + "react-dom": "17.0.2", "react-final-form": "5.0.1", "react-scripts": "3.0.1", "styled-components": "4.2.0" @@ -27,4 +27,4 @@ "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" } -} \ No newline at end of file +} diff --git a/examples/custom-validation-engine/package.json b/examples/custom-validation-engine/package.json index ae3b6898..f4c04b4a 100644 --- a/examples/custom-validation-engine/package.json +++ b/examples/custom-validation-engine/package.json @@ -7,10 +7,10 @@ "dependencies": { "final-form": "4.12.0", "final-form-set-field-data": "1.0.2", - "react": "16.8.6", - "react-dom": "16.8.6", + "react": "17.0.2", + "react-dom": "17.0.2", "react-final-form": "5.0.1", "react-fontawesome": "1.6.1", "styled-components": "4.2.0" } -} \ No newline at end of file +} diff --git a/examples/debounced-record-level-validation/package.json b/examples/debounced-record-level-validation/package.json index ace6b53d..4603f089 100644 --- a/examples/debounced-record-level-validation/package.json +++ b/examples/debounced-record-level-validation/package.json @@ -6,8 +6,8 @@ "main": "src/index.js", "dependencies": { "final-form": "4.12.0", - "react": "16.8.6", - "react-dom": "16.8.6", + "react": "17.0.2", + "react-dom": "17.0.2", "react-final-form": "5.0.1", "react-scripts": "2.0.3", "styled-components": "4.2.0" @@ -25,4 +25,4 @@ "not ie <= 11", "not op_mini all" ] -} \ No newline at end of file +} diff --git a/examples/declarative-form-rules/package.json b/examples/declarative-form-rules/package.json index 120ec310..60a9b17b 100644 --- a/examples/declarative-form-rules/package.json +++ b/examples/declarative-form-rules/package.json @@ -13,8 +13,8 @@ "main": "src/index.js", "dependencies": { "final-form": "4.12.0", - "react": "16.8.6", - "react-dom": "16.8.6", + "react": "17.0.2", + "react-dom": "17.0.2", "react-final-form": "5.0.1", "react-final-form-listeners": "1.0.2", "react-scripts": "3.0.1", @@ -27,4 +27,4 @@ "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" } -} \ No newline at end of file +} diff --git a/examples/downshift-typeahead/package.json b/examples/downshift-typeahead/package.json index b0596c5a..7fc70bfc 100644 --- a/examples/downshift-typeahead/package.json +++ b/examples/downshift-typeahead/package.json @@ -15,8 +15,8 @@ "downshift": "1.28.0", "final-form": "4.12.0", "match-sorter": "3.0.0", - "react": "16.8.6", - "react-dom": "16.8.6", + "react": "17.0.2", + "react-dom": "17.0.2", "react-final-form": "5.0.1", "react-scripts": "3.0.1", "styled-components": "4.2.0" @@ -28,4 +28,4 @@ "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" } -} \ No newline at end of file +} diff --git a/examples/external-submit/package.json b/examples/external-submit/package.json index 2efa334b..463c7f66 100644 --- a/examples/external-submit/package.json +++ b/examples/external-submit/package.json @@ -12,9 +12,9 @@ "main": "index.js", "dependencies": { "final-form": "4.12.0", - "react": "16.8.6", - "react-dom": "16.8.6", + "react": "17.0.2", + "react-dom": "17.0.2", "react-final-form": "5.0.1", "styled-components": "4.2.0" } -} \ No newline at end of file +} diff --git a/examples/field-arrays/package.json b/examples/field-arrays/package.json index f714e770..f3114c6a 100644 --- a/examples/field-arrays/package.json +++ b/examples/field-arrays/package.json @@ -7,10 +7,10 @@ "dependencies": { "final-form": "4.12.0", "final-form-arrays": "1.1.2", - "react": "16.8.6", - "react-dom": "16.8.6", + "react": "17.0.2", + "react-dom": "17.0.2", "react-final-form": "4.1.0", "react-final-form-arrays": "2.0.3", "styled-components": "4.2.0" } -} \ No newline at end of file +} diff --git a/examples/field-warnings/package.json b/examples/field-warnings/package.json index 6967fd01..b15673fd 100644 --- a/examples/field-warnings/package.json +++ b/examples/field-warnings/package.json @@ -8,9 +8,9 @@ "dependencies": { "styled-components": "2.2.4", "react-final-form": "1.2.0", - "react-dom": "16.0.0", - "react": "16.0.0", + "react-dom": "17.0.2", + "react": "17.0.2", "final-form-set-field-data": "1.0.0", "final-form": "1.3.1" } -} \ No newline at end of file +} diff --git a/examples/focus-first-error/package.json b/examples/focus-first-error/package.json index 3187a4fa..06748335 100644 --- a/examples/focus-first-error/package.json +++ b/examples/focus-first-error/package.json @@ -8,8 +8,8 @@ "dependencies": { "final-form": "4.12.0", "final-form-focus": "1.1.2", - "react": "16.8.6", - "react-dom": "16.8.6", + "react": "17.0.2", + "react-dom": "17.0.2", "react-final-form": "5.0.1", "react-scripts": "3.0.1", "styled-components": "4.2.0" @@ -21,4 +21,4 @@ "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" } -} \ No newline at end of file +} diff --git a/examples/format-on-blur/package.json b/examples/format-on-blur/package.json index 19875403..6c4ec408 100644 --- a/examples/format-on-blur/package.json +++ b/examples/format-on-blur/package.json @@ -13,8 +13,8 @@ "dependencies": { "final-form": "4.12.0", "numeral": "2.0.6", - "react": "16.8.6", - "react-dom": "16.8.6", + "react": "17.0.2", + "react-dom": "17.0.2", "react-final-form": "5.0.1", "react-scripts": "3.0.1", "styled-components": "4.2.0" @@ -26,4 +26,4 @@ "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" } -} \ No newline at end of file +} diff --git a/examples/format-string-by-pattern/package.json b/examples/format-string-by-pattern/package.json index f3bf437e..edf88836 100644 --- a/examples/format-string-by-pattern/package.json +++ b/examples/format-string-by-pattern/package.json @@ -7,9 +7,9 @@ "dependencies": { "final-form": "latest", "format-string-by-pattern": "1.1.1", - "react": "16.8.6", - "react-dom": "16.8.6", + "react": "17.0.2", + "react-dom": "17.0.2", "react-final-form": "latest", "styled-components": "latest" } -} \ No newline at end of file +} diff --git a/examples/hybrid-sync-async-record-level-validation/package.json b/examples/hybrid-sync-async-record-level-validation/package.json index ecbc8105..d4e4d61d 100644 --- a/examples/hybrid-sync-async-record-level-validation/package.json +++ b/examples/hybrid-sync-async-record-level-validation/package.json @@ -12,9 +12,9 @@ "main": "index.js", "dependencies": { "final-form": "latest", - "react": "16.8.6", - "react-dom": "16.8.6", + "react": "17.0.2", + "react-dom": "17.0.2", "react-final-form": "latest", "styled-components": "4.2.0" } -} \ No newline at end of file +} diff --git a/examples/independent-error-component-render-props/package.json b/examples/independent-error-component-render-props/package.json index 581e7556..1767a6b5 100644 --- a/examples/independent-error-component-render-props/package.json +++ b/examples/independent-error-component-render-props/package.json @@ -6,9 +6,9 @@ "main": "index.js", "dependencies": { "final-form": "4.13.1", - "react": "16.8.6", - "react-dom": "16.8.6", + "react": "17.0.2", + "react-dom": "17.0.2", "react-final-form": "6.0.1", "styled-components": "4.2.1" } -} \ No newline at end of file +} diff --git a/examples/independent-error-component-with-hooks/package.json b/examples/independent-error-component-with-hooks/package.json index b6ac2eb1..d9e8b4da 100644 --- a/examples/independent-error-component-with-hooks/package.json +++ b/examples/independent-error-component-with-hooks/package.json @@ -6,9 +6,9 @@ "main": "index.js", "dependencies": { "final-form": "4.13.1", - "react": "16.8.6", - "react-dom": "16.8.6", + "react": "17.0.2", + "react-dom": "17.0.2", "react-final-form": "6.0.1", "styled-components": "4.2.1" } -} \ No newline at end of file +} diff --git a/examples/listening-for-external-changes/package.json b/examples/listening-for-external-changes/package.json index ccd8e3a7..1dc75a88 100644 --- a/examples/listening-for-external-changes/package.json +++ b/examples/listening-for-external-changes/package.json @@ -14,8 +14,8 @@ "dependencies": { "final-form": "4.12.0", "final-form-calculate": "1.3.1", - "react": "16.8.6", - "react-dom": "16.8.6", + "react": "17.0.2", + "react-dom": "17.0.2", "react-final-form": "5.0.1", "react-scripts": "3.0.1", "styled-components": "4.2.0" @@ -27,4 +27,4 @@ "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" } -} \ No newline at end of file +} diff --git a/examples/loading-initializing-values/package.json b/examples/loading-initializing-values/package.json index 901a11d7..98c563ed 100644 --- a/examples/loading-initializing-values/package.json +++ b/examples/loading-initializing-values/package.json @@ -6,9 +6,9 @@ "main": "index.js", "dependencies": { "final-form": "4.12.0", - "react": "16.8.6", - "react-dom": "16.8.6", + "react": "17.0.2", + "react-dom": "17.0.2", "react-final-form": "5.0.1", "styled-components": "4.2.0" } -} \ No newline at end of file +} diff --git a/examples/loading-saving-reinitializing/package.json b/examples/loading-saving-reinitializing/package.json index 4ff65ddf..65ec1320 100644 --- a/examples/loading-saving-reinitializing/package.json +++ b/examples/loading-saving-reinitializing/package.json @@ -12,10 +12,10 @@ "main": "index.js", "dependencies": { "final-form": "4.12.0", - "react": "16.8.6", - "react-dom": "16.8.6", + "react": "17.0.2", + "react-dom": "17.0.2", "react-final-form": "5.0.1", "react-fontawesome": "1.6.1", "styled-components": "4.2.0" } -} \ No newline at end of file +} diff --git a/examples/parse-format/package.json b/examples/parse-format/package.json index 685f0410..e340241d 100644 --- a/examples/parse-format/package.json +++ b/examples/parse-format/package.json @@ -12,9 +12,9 @@ "main": "index.js", "dependencies": { "final-form": "latest", - "react": "16.8.6", - "react-dom": "16.8.6", + "react": "17.0.2", + "react-dom": "17.0.2", "react-final-form": "latest", "styled-components": "latest" } -} \ No newline at end of file +} diff --git a/examples/redux/package.json b/examples/redux/package.json index e711b406..a914eafa 100644 --- a/examples/redux/package.json +++ b/examples/redux/package.json @@ -13,8 +13,8 @@ "main": "src/index.js", "dependencies": { "final-form": "4.12.0", - "react": "16.8.6", - "react-dom": "16.8.6", + "react": "17.0.2", + "react-dom": "17.0.2", "react-final-form": "5.0.1", "react-redux": "7.0.3", "react-scripts": "3.0.1", @@ -28,4 +28,4 @@ "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" } -} \ No newline at end of file +} diff --git a/examples/reusable-field-groups/package.json b/examples/reusable-field-groups/package.json index d747c85b..1236cdf1 100644 --- a/examples/reusable-field-groups/package.json +++ b/examples/reusable-field-groups/package.json @@ -6,9 +6,9 @@ "main": "index.js", "dependencies": { "final-form": "4.12.0", - "react": "16.8.6", - "react-dom": "16.8.6", + "react": "17.0.2", + "react-dom": "17.0.2", "react-final-form": "5.0.1", "styled-components": "4.2.0" } -} \ No newline at end of file +} diff --git a/examples/styling-with-smooth-ui/package.json b/examples/styling-with-smooth-ui/package.json index d0702baa..1d2bb3a6 100644 --- a/examples/styling-with-smooth-ui/package.json +++ b/examples/styling-with-smooth-ui/package.json @@ -12,8 +12,8 @@ "main": "src/index.js", "dependencies": { "final-form": "4.12.0", - "react": "16.8.6", - "react-dom": "16.8.6", + "react": "17.0.2", + "react-dom": "17.0.2", "react-final-form": "5.0.1", "react-scripts": "3.0.1", "smooth-ui": "4.3.2", @@ -26,4 +26,4 @@ "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" } -} \ No newline at end of file +} diff --git a/examples/third-party-components/package.json b/examples/third-party-components/package.json index 6d1fc879..19339d91 100644 --- a/examples/third-party-components/package.json +++ b/examples/third-party-components/package.json @@ -13,11 +13,11 @@ "dependencies": { "final-form": "4.12.0", "material-ui": "0.20.2", - "react": "16.8.6", + "react": "17.0.2", "react-addons-shallow-compare": "15.6.2", - "react-dom": "16.8.6", + "react-dom": "17.0.2", "react-final-form": "5.0.1", "react-select": "2.4.3", "styled-components": "4.2.0" } -} \ No newline at end of file +} From 36d053c131a097c942defcfd2acd4c25306b2a4e Mon Sep 17 00:00:00 2001 From: Erik Rasmussen Date: Sat, 25 Sep 2021 11:55:35 +0200 Subject: [PATCH 3/8] Upgraded FF and RFF in examples --- examples/async-field-level-validation/package.json | 4 ++-- examples/async-redux-submission/package.json | 4 ++-- examples/async-typeahead-redux/package.json | 4 ++-- examples/auto-save-field-blur/package.json | 4 ++-- examples/auto-save-selective-debounce/package.json | 4 ++-- examples/auto-save-with-debounce/package.json | 4 ++-- examples/calculated-fields/package.json | 4 ++-- examples/chakra/package.json | 4 ++-- examples/conditional-fields/package.json | 4 ++-- examples/credit-card/package.json | 4 ++-- examples/custom-validation-engine/package.json | 4 ++-- .../debounced-record-level-validation/package.json | 4 ++-- examples/declarative-form-rules/package.json | 4 ++-- examples/downshift-typeahead/package.json | 4 ++-- examples/external-submit/package.json | 4 ++-- examples/field-arrays/package.json | 4 ++-- examples/field-level-validation/package.json | 4 ++-- examples/field-warnings/package.json | 4 ++-- examples/fields-component/package.json | 4 ++-- examples/focus-first-error/package.json | 4 ++-- examples/format-on-blur/package.json | 4 ++-- examples/format-string-by-pattern/package.json | 4 ++-- .../package.json | 4 ++-- .../package.json | 4 ++-- .../package.json | 4 ++-- examples/listening-for-external-changes/package.json | 4 ++-- examples/loading-initializing-values/package.json | 4 ++-- examples/loading-saving-reinitializing/package.json | 4 ++-- examples/material-ui/package.json | 8 +++++--- examples/parse-format/package.json | 4 ++-- examples/prefixed-fields/package.json | 6 +++--- examples/record-level-validation/package.json | 4 ++-- examples/redux/package.json | 4 ++-- examples/reusable-field-groups/package.json | 4 ++-- examples/simple/package.json | 4 ++-- examples/styling-with-smooth-ui/package.json | 4 ++-- examples/submission-errors/package.json | 4 ++-- examples/subscriptions/package.json | 4 ++-- examples/third-party-components/package.json | 4 ++-- examples/wizard/package.json | 11 ++++++++--- package.json | 4 ++-- 41 files changed, 92 insertions(+), 85 deletions(-) diff --git a/examples/async-field-level-validation/package.json b/examples/async-field-level-validation/package.json index 33349807..80517548 100644 --- a/examples/async-field-level-validation/package.json +++ b/examples/async-field-level-validation/package.json @@ -11,10 +11,10 @@ ], "main": "index.js", "dependencies": { - "final-form": "4.16.1", + "final-form": "4.20.2", "react": "17.0.2", "react-dom": "17.0.2", - "react-final-form": "6.3.0", + "react-final-form": "6.5.3", "styled-components": "4.2.0" } } diff --git a/examples/async-redux-submission/package.json b/examples/async-redux-submission/package.json index f816abdd..7d9aac2d 100644 --- a/examples/async-redux-submission/package.json +++ b/examples/async-redux-submission/package.json @@ -12,10 +12,10 @@ "homepage": "https://codesandbox.io/s/new", "main": "src/index.js", "dependencies": { - "final-form": "4.12.0", + "final-form": "4.20.2", "react": "17.0.2", "react-dom": "17.0.2", - "react-final-form": "5.0.1", + "react-final-form": "6.5.3", "react-redux": "7.0.3", "react-redux-promise-listener": "1.0.0", "react-scripts": "3.0.1", diff --git a/examples/async-typeahead-redux/package.json b/examples/async-typeahead-redux/package.json index b2fc1d48..63ba49ae 100644 --- a/examples/async-typeahead-redux/package.json +++ b/examples/async-typeahead-redux/package.json @@ -6,13 +6,13 @@ "main": "index.js", "dependencies": { "arrify": "2.0.1", - "final-form": "4.18.5", + "final-form": "4.20.2", "final-form-set-field-data": "1.0.2", "ramda": "0.25.0", "react": "17.0.2", "react-bootstrap-typeahead": "3.1.4", "react-dom": "17.0.2", - "react-final-form": "6.3.0", + "react-final-form": "6.5.3", "react-redux": "7.1.0", "redux": "4.0.4", "redux-thunk": "2.3.0", diff --git a/examples/auto-save-field-blur/package.json b/examples/auto-save-field-blur/package.json index 4ae3471b..3b15de72 100644 --- a/examples/auto-save-field-blur/package.json +++ b/examples/auto-save-field-blur/package.json @@ -5,12 +5,12 @@ "keywords": [], "main": "index.js", "dependencies": { - "final-form": "4.12.0", + "final-form": "4.20.2", "final-form-set-field-data": "1.0.2", "object-diff": "0.0.4", "react": "17.0.2", "react-dom": "17.0.2", - "react-final-form": "5.0.1", + "react-final-form": "6.5.3", "styled-components": "4.2.0" } } diff --git a/examples/auto-save-selective-debounce/package.json b/examples/auto-save-selective-debounce/package.json index 416810e5..5fdf0364 100644 --- a/examples/auto-save-selective-debounce/package.json +++ b/examples/auto-save-selective-debounce/package.json @@ -5,11 +5,11 @@ "keywords": [], "main": "index.js", "dependencies": { - "final-form": "4.12.0", + "final-form": "4.20.2", "object-diff": "0.0.4", "react": "17.0.2", "react-dom": "17.0.2", - "react-final-form": "5.0.1", + "react-final-form": "6.5.3", "styled-components": "4.2.0" } } diff --git a/examples/auto-save-with-debounce/package.json b/examples/auto-save-with-debounce/package.json index 3358038e..6b2b96dc 100644 --- a/examples/auto-save-with-debounce/package.json +++ b/examples/auto-save-with-debounce/package.json @@ -11,11 +11,11 @@ ], "main": "index.js", "dependencies": { - "final-form": "4.12.0", + "final-form": "4.20.2", "object-diff": "0.0.4", "react": "17.0.2", "react-dom": "17.0.2", - "react-final-form": "5.0.1", + "react-final-form": "6.5.3", "styled-components": "4.2.0" } } diff --git a/examples/calculated-fields/package.json b/examples/calculated-fields/package.json index 6bfd7caa..3137f693 100644 --- a/examples/calculated-fields/package.json +++ b/examples/calculated-fields/package.json @@ -6,11 +6,11 @@ "homepage": "https://codesandbox.io/s/oq52p6v96y", "main": "index.js", "dependencies": { - "final-form": "4.12.0", + "final-form": "4.20.2", "final-form-calculate": "1.3.1", "react": "17.0.2", "react-dom": "17.0.2", - "react-final-form": "5.0.1", + "react-final-form": "6.5.3", "styled-components": "4.2.0" } } diff --git a/examples/chakra/package.json b/examples/chakra/package.json index 09b0d19a..e2b9708c 100644 --- a/examples/chakra/package.json +++ b/examples/chakra/package.json @@ -15,10 +15,10 @@ "@emotion/core": "^10.0.17", "@emotion/styled": "^10.0.17", "emotion-theming": "^10.0.17", - "final-form": "4.18.6", + "final-form": "4.20.2", "react": "17.0.2", "react-dom": "17.0.2", - "react-final-form": "latest", + "react-final-form": "6.5.3", "react-scripts": "3.2.0" }, "scripts": { diff --git a/examples/conditional-fields/package.json b/examples/conditional-fields/package.json index d13b371a..0e5c6895 100644 --- a/examples/conditional-fields/package.json +++ b/examples/conditional-fields/package.json @@ -6,10 +6,10 @@ "homepage": "https://codesandbox.io/s/new", "main": "src/index.js", "dependencies": { - "final-form": "4.12.0", + "final-form": "4.20.2", "react": "17.0.2", "react-dom": "17.0.2", - "react-final-form": "5.0.1", + "react-final-form": "6.5.3", "react-scripts": "3.0.1", "styled-components": "4.2.0" }, diff --git a/examples/credit-card/package.json b/examples/credit-card/package.json index 5e611713..d12ddd33 100644 --- a/examples/credit-card/package.json +++ b/examples/credit-card/package.json @@ -12,11 +12,11 @@ "homepage": "https://codesandbox.io/s/new", "main": "src/index.js", "dependencies": { - "final-form": "4.12.0", + "final-form": "4.20.2", "react": "17.0.2", "react-credit-cards": "0.7.0", "react-dom": "17.0.2", - "react-final-form": "5.0.1", + "react-final-form": "6.5.3", "react-scripts": "3.0.1", "styled-components": "4.2.0" }, diff --git a/examples/custom-validation-engine/package.json b/examples/custom-validation-engine/package.json index f4c04b4a..49480589 100644 --- a/examples/custom-validation-engine/package.json +++ b/examples/custom-validation-engine/package.json @@ -5,11 +5,11 @@ "keywords": [], "main": "index.js", "dependencies": { - "final-form": "4.12.0", + "final-form": "4.20.2", "final-form-set-field-data": "1.0.2", "react": "17.0.2", "react-dom": "17.0.2", - "react-final-form": "5.0.1", + "react-final-form": "6.5.3", "react-fontawesome": "1.6.1", "styled-components": "4.2.0" } diff --git a/examples/debounced-record-level-validation/package.json b/examples/debounced-record-level-validation/package.json index 4603f089..5f8186ba 100644 --- a/examples/debounced-record-level-validation/package.json +++ b/examples/debounced-record-level-validation/package.json @@ -5,10 +5,10 @@ "keywords": [], "main": "src/index.js", "dependencies": { - "final-form": "4.12.0", + "final-form": "4.20.2", "react": "17.0.2", "react-dom": "17.0.2", - "react-final-form": "5.0.1", + "react-final-form": "6.5.3", "react-scripts": "2.0.3", "styled-components": "4.2.0" }, diff --git a/examples/declarative-form-rules/package.json b/examples/declarative-form-rules/package.json index 60a9b17b..0affb2b3 100644 --- a/examples/declarative-form-rules/package.json +++ b/examples/declarative-form-rules/package.json @@ -12,10 +12,10 @@ "homepage": "https://codesandbox.io/s/new", "main": "src/index.js", "dependencies": { - "final-form": "4.12.0", + "final-form": "4.20.2", "react": "17.0.2", "react-dom": "17.0.2", - "react-final-form": "5.0.1", + "react-final-form": "6.5.3", "react-final-form-listeners": "1.0.2", "react-scripts": "3.0.1", "styled-components": "4.2.0" diff --git a/examples/downshift-typeahead/package.json b/examples/downshift-typeahead/package.json index 7fc70bfc..ce89fc5f 100644 --- a/examples/downshift-typeahead/package.json +++ b/examples/downshift-typeahead/package.json @@ -13,11 +13,11 @@ "main": "src/index.js", "dependencies": { "downshift": "1.28.0", - "final-form": "4.12.0", + "final-form": "4.20.2", "match-sorter": "3.0.0", "react": "17.0.2", "react-dom": "17.0.2", - "react-final-form": "5.0.1", + "react-final-form": "6.5.3", "react-scripts": "3.0.1", "styled-components": "4.2.0" }, diff --git a/examples/external-submit/package.json b/examples/external-submit/package.json index 463c7f66..f31c35ad 100644 --- a/examples/external-submit/package.json +++ b/examples/external-submit/package.json @@ -11,10 +11,10 @@ ], "main": "index.js", "dependencies": { - "final-form": "4.12.0", + "final-form": "4.20.2", "react": "17.0.2", "react-dom": "17.0.2", - "react-final-form": "5.0.1", + "react-final-form": "6.5.3", "styled-components": "4.2.0" } } diff --git a/examples/field-arrays/package.json b/examples/field-arrays/package.json index f3114c6a..8c0de9c9 100644 --- a/examples/field-arrays/package.json +++ b/examples/field-arrays/package.json @@ -5,11 +5,11 @@ "keywords": [], "main": "index.js", "dependencies": { - "final-form": "4.12.0", + "final-form": "4.20.2", "final-form-arrays": "1.1.2", "react": "17.0.2", "react-dom": "17.0.2", - "react-final-form": "4.1.0", + "react-final-form": "6.5.3", "react-final-form-arrays": "2.0.3", "styled-components": "4.2.0" } diff --git a/examples/field-level-validation/package.json b/examples/field-level-validation/package.json index 5c7ed26b..13c27b58 100644 --- a/examples/field-level-validation/package.json +++ b/examples/field-level-validation/package.json @@ -12,9 +12,9 @@ "main": "index.js", "dependencies": { "styled-components": "latest", - "react-final-form": "latest", + "react-final-form": "6.5.3", "react": "latest", "react-dom": "latest", - "final-form": "latest" + "final-form": "4.20.2" } } diff --git a/examples/field-warnings/package.json b/examples/field-warnings/package.json index b15673fd..286204df 100644 --- a/examples/field-warnings/package.json +++ b/examples/field-warnings/package.json @@ -7,10 +7,10 @@ "main": "index.js", "dependencies": { "styled-components": "2.2.4", - "react-final-form": "1.2.0", + "react-final-form": "6.5.3", "react-dom": "17.0.2", "react": "17.0.2", "final-form-set-field-data": "1.0.0", - "final-form": "1.3.1" + "final-form": "4.20.2" } } diff --git a/examples/fields-component/package.json b/examples/fields-component/package.json index 9cb2fd3e..9b3e8589 100644 --- a/examples/fields-component/package.json +++ b/examples/fields-component/package.json @@ -8,9 +8,9 @@ "dependencies": { "styled-components": "latest", "react-fontawesome": "latest", - "react-final-form": "latest", + "react-final-form": "6.5.3", "react-dom": "latest", "react": "latest", - "final-form": "latest" + "final-form": "4.20.2" } } diff --git a/examples/focus-first-error/package.json b/examples/focus-first-error/package.json index 06748335..53bb9072 100644 --- a/examples/focus-first-error/package.json +++ b/examples/focus-first-error/package.json @@ -6,11 +6,11 @@ "homepage": "https://codesandbox.io/s/new", "main": "src/index.js", "dependencies": { - "final-form": "4.12.0", + "final-form": "4.20.2", "final-form-focus": "1.1.2", "react": "17.0.2", "react-dom": "17.0.2", - "react-final-form": "5.0.1", + "react-final-form": "6.5.3", "react-scripts": "3.0.1", "styled-components": "4.2.0" }, diff --git a/examples/format-on-blur/package.json b/examples/format-on-blur/package.json index 6c4ec408..dc3e17ad 100644 --- a/examples/format-on-blur/package.json +++ b/examples/format-on-blur/package.json @@ -11,11 +11,11 @@ ], "main": "src/index.js", "dependencies": { - "final-form": "4.12.0", + "final-form": "4.20.2", "numeral": "2.0.6", "react": "17.0.2", "react-dom": "17.0.2", - "react-final-form": "5.0.1", + "react-final-form": "6.5.3", "react-scripts": "3.0.1", "styled-components": "4.2.0" }, diff --git a/examples/format-string-by-pattern/package.json b/examples/format-string-by-pattern/package.json index edf88836..dbf36dd4 100644 --- a/examples/format-string-by-pattern/package.json +++ b/examples/format-string-by-pattern/package.json @@ -5,11 +5,11 @@ "keywords": [], "main": "index.js", "dependencies": { - "final-form": "latest", + "final-form": "4.20.2", "format-string-by-pattern": "1.1.1", "react": "17.0.2", "react-dom": "17.0.2", - "react-final-form": "latest", + "react-final-form": "6.5.3", "styled-components": "latest" } } diff --git a/examples/hybrid-sync-async-record-level-validation/package.json b/examples/hybrid-sync-async-record-level-validation/package.json index d4e4d61d..439c31d5 100644 --- a/examples/hybrid-sync-async-record-level-validation/package.json +++ b/examples/hybrid-sync-async-record-level-validation/package.json @@ -11,10 +11,10 @@ ], "main": "index.js", "dependencies": { - "final-form": "latest", + "final-form": "4.20.2", "react": "17.0.2", "react-dom": "17.0.2", - "react-final-form": "latest", + "react-final-form": "6.5.3", "styled-components": "4.2.0" } } diff --git a/examples/independent-error-component-render-props/package.json b/examples/independent-error-component-render-props/package.json index 1767a6b5..4dc2c0db 100644 --- a/examples/independent-error-component-render-props/package.json +++ b/examples/independent-error-component-render-props/package.json @@ -5,10 +5,10 @@ "keywords": [], "main": "index.js", "dependencies": { - "final-form": "4.13.1", + "final-form": "4.20.2", "react": "17.0.2", "react-dom": "17.0.2", - "react-final-form": "6.0.1", + "react-final-form": "6.5.3", "styled-components": "4.2.1" } } diff --git a/examples/independent-error-component-with-hooks/package.json b/examples/independent-error-component-with-hooks/package.json index d9e8b4da..3989d545 100644 --- a/examples/independent-error-component-with-hooks/package.json +++ b/examples/independent-error-component-with-hooks/package.json @@ -5,10 +5,10 @@ "keywords": [], "main": "index.js", "dependencies": { - "final-form": "4.13.1", + "final-form": "4.20.2", "react": "17.0.2", "react-dom": "17.0.2", - "react-final-form": "6.0.1", + "react-final-form": "6.5.3", "styled-components": "4.2.1" } } diff --git a/examples/listening-for-external-changes/package.json b/examples/listening-for-external-changes/package.json index 1dc75a88..efad68ad 100644 --- a/examples/listening-for-external-changes/package.json +++ b/examples/listening-for-external-changes/package.json @@ -12,11 +12,11 @@ "homepage": "https://codesandbox.io/s/new", "main": "src/index.js", "dependencies": { - "final-form": "4.12.0", + "final-form": "4.20.2", "final-form-calculate": "1.3.1", "react": "17.0.2", "react-dom": "17.0.2", - "react-final-form": "5.0.1", + "react-final-form": "6.5.3", "react-scripts": "3.0.1", "styled-components": "4.2.0" }, diff --git a/examples/loading-initializing-values/package.json b/examples/loading-initializing-values/package.json index 98c563ed..7c35737f 100644 --- a/examples/loading-initializing-values/package.json +++ b/examples/loading-initializing-values/package.json @@ -5,10 +5,10 @@ "keywords": [], "main": "index.js", "dependencies": { - "final-form": "4.12.0", + "final-form": "4.20.2", "react": "17.0.2", "react-dom": "17.0.2", - "react-final-form": "5.0.1", + "react-final-form": "6.5.3", "styled-components": "4.2.0" } } diff --git a/examples/loading-saving-reinitializing/package.json b/examples/loading-saving-reinitializing/package.json index 65ec1320..3deeb6fb 100644 --- a/examples/loading-saving-reinitializing/package.json +++ b/examples/loading-saving-reinitializing/package.json @@ -11,10 +11,10 @@ ], "main": "index.js", "dependencies": { - "final-form": "4.12.0", + "final-form": "4.20.2", "react": "17.0.2", "react-dom": "17.0.2", - "react-final-form": "5.0.1", + "react-final-form": "6.5.3", "react-fontawesome": "1.6.1", "styled-components": "4.2.0" } diff --git a/examples/material-ui/package.json b/examples/material-ui/package.json index b47a8d12..9851ef2f 100644 --- a/examples/material-ui/package.json +++ b/examples/material-ui/package.json @@ -2,7 +2,9 @@ "name": "react-final-form-material-ui-example", "version": "1.0.0", "description": "Demonstrates how to use Material-UI form controls.", - "keywords": ["material-ui"], + "keywords": [ + "material-ui" + ], "homepage": "https://codesandbox.io/s/new", "main": "src/index.js", "dependencies": { @@ -11,11 +13,11 @@ "@material-ui/lab": "latest", "@material-ui/pickers": "latest", "date-fns": "next", - "final-form": "latest", + "final-form": "4.20.2", "mui-rff": "latest", "react": "latest", "react-dom": "latest", - "react-final-form": "latest", + "react-final-form": "6.5.3", "react-scripts": "latest", "tslib": "latest" }, diff --git a/examples/parse-format/package.json b/examples/parse-format/package.json index e340241d..21d68520 100644 --- a/examples/parse-format/package.json +++ b/examples/parse-format/package.json @@ -11,10 +11,10 @@ ], "main": "index.js", "dependencies": { - "final-form": "latest", + "final-form": "4.20.2", "react": "17.0.2", "react-dom": "17.0.2", - "react-final-form": "latest", + "react-final-form": "6.5.3", "styled-components": "latest" } } diff --git a/examples/prefixed-fields/package.json b/examples/prefixed-fields/package.json index 6e135eab..663b9715 100644 --- a/examples/prefixed-fields/package.json +++ b/examples/prefixed-fields/package.json @@ -8,9 +8,9 @@ "dependencies": { "styled-components": "latest", "react-fontawesome": "latest", - "react-final-form": "latest", + "react-final-form": "6.5.3", "react-dom": "latest", "react": "latest", - "final-form": "latest" + "final-form": "4.20.2" } -} \ No newline at end of file +} diff --git a/examples/record-level-validation/package.json b/examples/record-level-validation/package.json index a12b89de..54fab590 100644 --- a/examples/record-level-validation/package.json +++ b/examples/record-level-validation/package.json @@ -12,9 +12,9 @@ "main": "index.js", "dependencies": { "styled-components": "latest", - "react-final-form": "latest", + "react-final-form": "6.5.3", "react": "latest", "react-dom": "latest", - "final-form": "latest" + "final-form": "4.20.2" } } diff --git a/examples/redux/package.json b/examples/redux/package.json index a914eafa..047a16e9 100644 --- a/examples/redux/package.json +++ b/examples/redux/package.json @@ -12,10 +12,10 @@ "homepage": "https://codesandbox.io/s/new", "main": "src/index.js", "dependencies": { - "final-form": "4.12.0", + "final-form": "4.20.2", "react": "17.0.2", "react-dom": "17.0.2", - "react-final-form": "5.0.1", + "react-final-form": "6.5.3", "react-redux": "7.0.3", "react-scripts": "3.0.1", "redux": "4.0.1", diff --git a/examples/reusable-field-groups/package.json b/examples/reusable-field-groups/package.json index 1236cdf1..b88b7e18 100644 --- a/examples/reusable-field-groups/package.json +++ b/examples/reusable-field-groups/package.json @@ -5,10 +5,10 @@ "keywords": [], "main": "index.js", "dependencies": { - "final-form": "4.12.0", + "final-form": "4.20.2", "react": "17.0.2", "react-dom": "17.0.2", - "react-final-form": "5.0.1", + "react-final-form": "6.5.3", "styled-components": "4.2.0" } } diff --git a/examples/simple/package.json b/examples/simple/package.json index e3c0b3e9..4d9699b3 100644 --- a/examples/simple/package.json +++ b/examples/simple/package.json @@ -12,10 +12,10 @@ "main": "index.js", "dependencies": { "styled-components": "latest", - "react-final-form": "latest", + "react-final-form": "6.5.3", "react": "latest", "react-dom": "latest", - "final-form": "latest", + "final-form": "4.20.2", "prop-types": "latest" } } diff --git a/examples/styling-with-smooth-ui/package.json b/examples/styling-with-smooth-ui/package.json index 1d2bb3a6..6bb3042d 100644 --- a/examples/styling-with-smooth-ui/package.json +++ b/examples/styling-with-smooth-ui/package.json @@ -11,10 +11,10 @@ ], "main": "src/index.js", "dependencies": { - "final-form": "4.12.0", + "final-form": "4.20.2", "react": "17.0.2", "react-dom": "17.0.2", - "react-final-form": "5.0.1", + "react-final-form": "6.5.3", "react-scripts": "3.0.1", "smooth-ui": "4.3.2", "styled-components": "3.4.10" diff --git a/examples/submission-errors/package.json b/examples/submission-errors/package.json index 78423610..bea07a74 100644 --- a/examples/submission-errors/package.json +++ b/examples/submission-errors/package.json @@ -12,9 +12,9 @@ "main": "index.js", "dependencies": { "styled-components": "latest", - "react-final-form": "latest", + "react-final-form": "6.5.3", "react": "latest", "react-dom": "latest", - "final-form": "latest" + "final-form": "4.20.2" } } diff --git a/examples/subscriptions/package.json b/examples/subscriptions/package.json index 8173001e..bec54dd8 100644 --- a/examples/subscriptions/package.json +++ b/examples/subscriptions/package.json @@ -12,9 +12,9 @@ "main": "index.js", "dependencies": { "styled-components": "latest", - "react-final-form": "latest", + "react-final-form": "6.5.3", "react": "latest", "react-dom": "latest", - "final-form": "latest" + "final-form": "4.20.2" } } diff --git a/examples/third-party-components/package.json b/examples/third-party-components/package.json index 19339d91..85829306 100644 --- a/examples/third-party-components/package.json +++ b/examples/third-party-components/package.json @@ -11,12 +11,12 @@ ], "main": "index.js", "dependencies": { - "final-form": "4.12.0", + "final-form": "4.20.2", "material-ui": "0.20.2", "react": "17.0.2", "react-addons-shallow-compare": "15.6.2", "react-dom": "17.0.2", - "react-final-form": "5.0.1", + "react-final-form": "6.5.3", "react-select": "2.4.3", "styled-components": "4.2.0" } diff --git a/examples/wizard/package.json b/examples/wizard/package.json index 9e68a5dc..ae7f52f6 100644 --- a/examples/wizard/package.json +++ b/examples/wizard/package.json @@ -13,16 +13,21 @@ "dependencies": { "prop-types": "latest", "styled-components": "latest", - "react-final-form": "latest", + "react-final-form": "6.5.3", "react": "latest", "react-dom": "latest", "react-scripts": "3.0.1", - "final-form": "latest", + "final-form": "4.20.2", "prop-types": "latest" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build" }, - "browserslist": [">0.2%", "not dead", "not ie <= 11", "not op_mini all"] + "browserslist": [ + ">0.2%", + "not dead", + "not ie <= 11", + "not op_mini all" + ] } diff --git a/package.json b/package.json index 873f60e6..fd2db392 100644 --- a/package.json +++ b/package.json @@ -65,7 +65,7 @@ "eslint-plugin-react": "^7.26.0", "eslint-plugin-react-hooks": "^4.2.0", "fast-deep-equal": "^3.1.3", - "final-form": "^4.20.2", + "final-form": "4.20.2", "flow-bin": "^0.160.2", "glow": "^1.2.2", "husky": "^4.3.0", @@ -92,7 +92,7 @@ "typescript": "^4.4.3" }, "peerDependencies": { - "final-form": "^4.20.0", + "final-form": "4.20.2", "react": "^16.8.0 || ^17.0.0" }, "lint-staged": { From 809e8c9a9aeb5959b79242d738e8428f7532d6c4 Mon Sep 17 00:00:00 2001 From: Erik Rasmussen Date: Sat, 25 Sep 2021 12:30:19 +0200 Subject: [PATCH 4/8] Prettier --- .babelrc.js | 46 +- .github/ci.yml | 49 + .prettierignore | 3 + .prettierrc | 17 +- .../async-field-level-validation/Styles.js | 4 +- .../async-field-level-validation/index.js | 73 +- examples/async-redux-submission/Styles.js | 20 +- .../asyncSubmissionMiddleware.js | 49 +- examples/async-redux-submission/index.js | 48 +- .../registrationDuck.js | 20 +- examples/async-redux-submission/store.js | 41 +- .../GithubUserTypeahead.jsx | 10 +- examples/async-typeahead-redux/Styles.js | 22 +- examples/async-typeahead-redux/actions.js | 10 +- examples/async-typeahead-redux/index.js | 36 +- examples/async-typeahead-redux/store.js | 8 +- examples/async-typeahead-redux/useKeyword.js | 6 +- examples/auto-save-field-blur/AutoSave.js | 42 +- examples/auto-save-field-blur/Styles.js | 22 +- examples/auto-save-field-blur/index.js | 62 +- .../auto-save-selective-debounce/AutoSave.js | 20 +- .../auto-save-selective-debounce/Styles.js | 22 +- .../auto-save-selective-debounce/index.js | 58 +- examples/auto-save-with-debounce/AutoSave.js | 38 +- examples/auto-save-with-debounce/Styles.js | 22 +- examples/auto-save-with-debounce/index.js | 54 +- examples/calculated-fields/Styles.js | 22 +- examples/calculated-fields/index.js | 48 +- examples/chakra/index.js | 92 +- examples/chakra/validate.js | 28 +- examples/conditional-fields/Styles.js | 20 +- examples/conditional-fields/index.js | 62 +- examples/credit-card/Card.js | 40 +- examples/credit-card/Styles.js | 20 +- examples/credit-card/cardUtils.js | 54 +- examples/credit-card/index.js | 46 +- examples/credit-card/sandbox.config.json | 2 +- .../OnBlurValidation.js | 56 +- examples/custom-validation-engine/Styles.js | 22 +- examples/custom-validation-engine/index.js | 56 +- .../ErrorWithDelay.js | 39 +- .../Styles.js | 18 +- .../index.js | 56 +- examples/declarative-form-rules/Styles.js | 20 +- examples/declarative-form-rules/index.js | 44 +- .../downshift-typeahead/DownshiftInput.js | 91 +- examples/downshift-typeahead/Styles.js | 20 +- examples/downshift-typeahead/fruit.js | 24 +- examples/downshift-typeahead/index.js | 50 +- examples/external-submit/Styles.js | 22 +- examples/external-submit/index.js | 54 +- examples/field-arrays/Styles.js | 20 +- examples/field-arrays/index.js | 42 +- examples/field-level-validation/Styles.js | 18 +- examples/field-level-validation/index.js | 39 +- examples/field-warnings/Styles.js | 22 +- examples/field-warnings/index.js | 38 +- examples/field-warnings/warning-engine.js | 4 +- examples/fields-component/index.js | 40 +- examples/focus-first-error/Styles.js | 20 +- examples/focus-first-error/index.js | 46 +- examples/focus-first-error/validate.js | 18 +- examples/format-on-blur/Styles.js | 20 +- examples/format-on-blur/index.js | 36 +- examples/format-string-by-pattern/Styles.js | 22 +- examples/format-string-by-pattern/index.js | 42 +- .../Styles.js | 4 +- .../index.js | 54 +- .../Styles.js | 22 +- .../index.js | 42 +- .../Styles.js | 22 +- .../index.js | 48 +- .../BooleanDecay.js | 36 +- .../ExternalModificationDetector.js | 33 +- .../listening-for-external-changes/Styles.js | 20 +- .../listening-for-external-changes/index.js | 44 +- .../loading-initializing-values/Styles.js | 22 +- examples/loading-initializing-values/index.js | 44 +- .../LoadSaveReinitializeForm.js | 60 +- .../loading-saving-reinitializing/Styles.js | 20 +- .../loading-saving-reinitializing/index.js | 94 +- examples/material-ui/index.js | 6 +- examples/parse-format/Styles.js | 22 +- examples/parse-format/index.js | 44 +- examples/prefixed-fields/index.js | 36 +- examples/record-level-validation/Styles.js | 18 +- examples/record-level-validation/index.js | 36 +- examples/redux/FormStateFromRedux.js | 12 +- examples/redux/FormStateToRedux.js | 14 +- examples/redux/Styles.js | 20 +- examples/redux/finalFormDuck.js | 15 +- examples/redux/index.js | 78 +- examples/redux/store.js | 18 +- examples/reusable-field-groups/Styles.js | 22 +- examples/reusable-field-groups/index.js | 26 +- examples/simple/Styles.js | 18 +- examples/simple/index.js | 38 +- .../components/CheckboxInput.tsx | 2 +- .../components/MultiCheckboxInput.tsx | 2 +- .../index.tsx | 48 +- examples/styling-with-smooth-ui/index.js | 95 +- examples/submission-errors/Styles.js | 18 +- examples/submission-errors/index.js | 46 +- examples/subscriptions/RenderCount.js | 12 +- examples/subscriptions/Styles.js | 18 +- examples/subscriptions/index.js | 35 +- examples/third-party-components/Styles.js | 16 +- examples/third-party-components/index.js | 50 +- examples/third-party-components/states.js | 126 +- examples/wizard/Styles.js | 22 +- examples/wizard/Wizard.js | 64 +- examples/wizard/index.js | 66 +- package-scripts.js | 110 +- rollup.config.js | 90 +- src/Field.js | 34 +- src/Field.test.js | 1108 ++++++++--------- src/FormSpy.js | 41 +- src/FormSpy.test.js | 480 +++---- src/ReactFinalForm.js | 178 +-- src/ReactFinalForm.test.js | 1008 +++++++-------- src/context.js | 6 +- src/getValue.js | 48 +- src/getValue.test.js | 442 +++---- src/getters.js | 102 +- src/index.js | 18 +- src/index.js.flow | 36 +- src/isReactNative.js | 6 +- src/isSyntheticEvent.js | 4 +- src/renderComponent.js | 26 +- src/renderComponent.test.js | 104 +- src/shallowEqual.js | 24 +- src/shallowEqual.test.js | 88 +- src/testUtils.js | 20 +- src/types.js.flow | 77 +- src/useConstant.js | 8 +- src/useConstantCallback.js | 10 +- src/useConstantCallback.test.js | 172 +-- src/useField.js | 180 +-- src/useField.test.js | 588 ++++----- src/useForm.js | 18 +- src/useForm.test.js | 100 +- src/useFormState.js | 58 +- src/useFormState.test.js | 58 +- src/useLatest.js | 10 +- src/useWhenValueChanges.js | 12 +- typescript/Field.test.tsx | 4 +- typescript/FormSpy.test.tsx | 4 +- typescript/ReactFinalForm.test.tsx | 22 +- typescript/index.d.ts | 94 +- typescript/useFormState.test.tsx | 4 +- 150 files changed, 4667 insertions(+), 4568 deletions(-) create mode 100644 .github/ci.yml create mode 100644 .prettierignore diff --git a/.babelrc.js b/.babelrc.js index 9a36788b..688a14dd 100644 --- a/.babelrc.js +++ b/.babelrc.js @@ -1,35 +1,35 @@ -const { NODE_ENV } = process.env -const test = NODE_ENV === 'test' -const loose = true +const { NODE_ENV } = process.env; +const test = NODE_ENV === "test"; +const loose = true; module.exports = { presets: [ [ - '@babel/preset-env', + "@babel/preset-env", { loose, - ...(test ? { targets: { node: '8' } } : {}) - } + ...(test ? { targets: { node: "8" } } : {}), + }, ], - '@babel/preset-react', - '@babel/preset-flow' + "@babel/preset-react", + "@babel/preset-flow", ], plugins: [ - '@babel/plugin-transform-flow-strip-types', - '@babel/plugin-syntax-dynamic-import', - '@babel/plugin-syntax-import-meta', - ['@babel/plugin-proposal-class-properties', { loose }], - '@babel/plugin-proposal-json-strings', + "@babel/plugin-transform-flow-strip-types", + "@babel/plugin-syntax-dynamic-import", + "@babel/plugin-syntax-import-meta", + ["@babel/plugin-proposal-class-properties", { loose }], + "@babel/plugin-proposal-json-strings", [ - '@babel/plugin-proposal-decorators', + "@babel/plugin-proposal-decorators", { - legacy: true - } + legacy: true, + }, ], - '@babel/plugin-proposal-function-sent', - '@babel/plugin-proposal-export-namespace-from', - '@babel/plugin-proposal-numeric-separator', - '@babel/plugin-proposal-throw-expressions', - test && '@babel/plugin-transform-react-jsx-source' - ].filter(Boolean) -} + "@babel/plugin-proposal-function-sent", + "@babel/plugin-proposal-export-namespace-from", + "@babel/plugin-proposal-numeric-separator", + "@babel/plugin-proposal-throw-expressions", + test && "@babel/plugin-transform-react-jsx-source", + ].filter(Boolean), +}; diff --git a/.github/ci.yml b/.github/ci.yml new file mode 100644 index 00000000..d93f882f --- /dev/null +++ b/.github/ci.yml @@ -0,0 +1,49 @@ +name: CI + +on: [push] + +jobs: + lint: + name: Prettier Check + runs-on: ubuntu-latest + + steps: + - uses: actions/checkout@v2 + - name: Use Node.js ${{ matrix.node_version }} + uses: actions/setup-node@v2 + with: + node-version: "14" + - name: Prepare env + run: yarn install --ignore-scripts --frozen-lockfile + - name: Run linter + run: yarn start lint + + prettier: + name: Prettier Check + runs-on: ubuntu-latest + + steps: + - uses: actions/checkout@v2 + - name: Use Node.js ${{ matrix.node_version }} + uses: actions/setup-node@v2 + with: + node-version: "14" + - name: Prepare env + run: yarn install --ignore-scripts --frozen-lockfile + - name: Run prettier + run: yarn start prettier + + test: + name: Unit Tests + runs-on: ubuntu-latest + + steps: + - uses: actions/checkout@v2 + - name: Use Node.js ${{ matrix.node_version }} + uses: actions/setup-node@v2 + with: + node-version: "14" + - name: Prepare env + run: yarn install --ignore-scripts --frozen-lockfile + - name: Run unit tests + run: yarn start test diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 00000000..5de02b14 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,3 @@ +coverage +dist +node_modules \ No newline at end of file diff --git a/.prettierrc b/.prettierrc index 4bc38160..bf357fbb 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,18 +1,3 @@ { - "semi": false, - "singleQuote": true, - "trailingComma": "none", - "arrowParens": "avoid", - "overrides": [ - { - "files": [".prettierrc"], - "options": { "parser": "json" } - }, - { - "files": ["*.ts*"], - "options": { - "semi": true - } - } - ] + "trailingComma": "all" } diff --git a/examples/async-field-level-validation/Styles.js b/examples/async-field-level-validation/Styles.js index a4edc9af..b8accf84 100644 --- a/examples/async-field-level-validation/Styles.js +++ b/examples/async-field-level-validation/Styles.js @@ -27,7 +27,9 @@ const btn = (light, dark) => css` } `; -const btnDefault = css`${btn("#ffffff", "#d5d5d5")} color: #555;`; +const btnDefault = css` + ${btn("#ffffff", "#d5d5d5")} color: #555; +`; const btnPrimary = btn("#4f93ce", "#285f8f"); diff --git a/examples/async-field-level-validation/index.js b/examples/async-field-level-validation/index.js index d9940823..fda6a04a 100644 --- a/examples/async-field-level-validation/index.js +++ b/examples/async-field-level-validation/index.js @@ -1,53 +1,58 @@ -import React from 'react' -import { render } from 'react-dom' -import Styles from './Styles' -import Spinner from './Spinner' -import { Form, Field } from 'react-final-form' +import React from "react"; +import { render } from "react-dom"; +import Styles from "./Styles"; +import Spinner from "./Spinner"; +import { Form, Field } from "react-final-form"; -const sleep = ms => new Promise(resolve => setTimeout(resolve, ms)) +const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms)); -const onSubmit = async values => { - await sleep(300) - window.alert(JSON.stringify(values, undefined, 2)) -} +const onSubmit = async (values) => { + await sleep(300); + window.alert(JSON.stringify(values, undefined, 2)); +}; -const required = value => (value ? undefined : 'Required') -const mustBeNumber = value => (isNaN(value) ? 'Must be a number' : undefined) -const minValue = min => value => - isNaN(value) || value >= min ? undefined : `Should be greater than ${min}` -const composeValidators = (...validators) => value => - validators.reduce((error, validator) => error || validator(value), undefined) +const required = (value) => (value ? undefined : "Required"); +const mustBeNumber = (value) => (isNaN(value) ? "Must be a number" : undefined); +const minValue = (min) => (value) => + isNaN(value) || value >= min ? undefined : `Should be greater than ${min}`; +const composeValidators = + (...validators) => + (value) => + validators.reduce( + (error, validator) => error || validator(value), + undefined, + ); -const simpleMemoize = fn => { - let lastArg - let lastResult - return arg => { +const simpleMemoize = (fn) => { + let lastArg; + let lastResult; + return (arg) => { if (arg !== lastArg) { - lastArg = arg - lastResult = fn(arg) + lastArg = arg; + lastResult = fn(arg); } - return lastResult - } -} + return lastResult; + }; +}; -const usernameAvailable = simpleMemoize(async value => { +const usernameAvailable = simpleMemoize(async (value) => { if (!value) { - return 'Required' + return "Required"; } - await sleep(400) + await sleep(400); if ( - ~['john', 'paul', 'george', 'ringo'].indexOf(value && value.toLowerCase()) + ~["john", "paul", "george", "ringo"].indexOf(value && value.toLowerCase()) ) { - return 'Username taken!' + return "Username taken!"; } -}) +}); const App = () => (

🏁 - {' '} + {" "} React Final Form Example

Asynchronous Field-Level Validation

@@ -107,6 +112,6 @@ const App = () => ( )} /> -) +); -render(, document.getElementById('root')) +render(, document.getElementById("root")); diff --git a/examples/async-redux-submission/Styles.js b/examples/async-redux-submission/Styles.js index 12d16329..75deb222 100644 --- a/examples/async-redux-submission/Styles.js +++ b/examples/async-redux-submission/Styles.js @@ -1,4 +1,4 @@ -import styled, { css } from 'styled-components' +import styled, { css } from "styled-components"; const btn = (light, dark) => css` white-space: nowrap; @@ -25,14 +25,14 @@ const btn = (light, dark) => css` opacity: 0.6; cursor: not-allowed; } -` +`; const btnDefault = css` - ${btn('#ffffff', '#d5d5d5')} color: #555; -` + ${btn("#ffffff", "#d5d5d5")} color: #555; +`; -const btnPrimary = btn('#4f93ce', '#285f8f') -const btnDanger = btn('#e27c79', '#c9302c') +const btnPrimary = btn("#4f93ce", "#285f8f"); +const btnDanger = btn("#e27c79", "#c9302c"); export default styled.div` font-family: sans-serif; @@ -116,7 +116,7 @@ export default styled.div` background: #eee; } } - & > input[type='checkbox'] { + & > input[type="checkbox"] { margin-top: 7px; } & > div { @@ -196,10 +196,10 @@ export default styled.div` } button { margin: 0 10px; - &[type='submit'] { + &[type="submit"] { ${btnPrimary}; } - &[type='button'] { + &[type="button"] { ${btnDefault}; } } @@ -210,4 +210,4 @@ export default styled.div` padding: 3px 5px; } } -` +`; diff --git a/examples/async-redux-submission/asyncSubmissionMiddleware.js b/examples/async-redux-submission/asyncSubmissionMiddleware.js index b1d54d15..f1158550 100644 --- a/examples/async-redux-submission/asyncSubmissionMiddleware.js +++ b/examples/async-redux-submission/asyncSubmissionMiddleware.js @@ -1,30 +1,31 @@ -import { REGISTER, REGISTER_SUCCESS } from './registrationDuck' +import { REGISTER, REGISTER_SUCCESS } from "./registrationDuck"; -const sleep = ms => new Promise(resolve => setTimeout(resolve, ms)) +const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms)); -const submit = async values => { - await sleep(200) - if (values.firstName === 'John') { - throw Error({ firstName: "No John's Allowed!" }) +const submit = async (values) => { + await sleep(200); + if (values.firstName === "John") { + throw Error({ firstName: "No John's Allowed!" }); } - window.alert(JSON.stringify(values, 0, 2)) -} + window.alert(JSON.stringify(values, 0, 2)); +}; /** This is to mimic the behavior of one of the various Redux async middlewares */ -const asyncSubmissionMiddleware = store => (next: Next) => ( - action: Action -): State => { - if (action && action.type === REGISTER) { - submit(action.payload).then( - () => store.dispatch({ type: REGISTER_SUCCESS }), - errors => { - // NOTE!! We are passing REGISTER_SUCCESS here because 🏁 Final Form expects - // submit errors to come back in a *resolved* promise. - store.dispatch({ type: REGISTER_SUCCESS, payload: errors }) - } - ) - } - return next(action) -} +const asyncSubmissionMiddleware = + (store) => + (next: Next) => + (action: Action): State => { + if (action && action.type === REGISTER) { + submit(action.payload).then( + () => store.dispatch({ type: REGISTER_SUCCESS }), + (errors) => { + // NOTE!! We are passing REGISTER_SUCCESS here because 🏁 Final Form expects + // submit errors to come back in a *resolved* promise. + store.dispatch({ type: REGISTER_SUCCESS, payload: errors }); + }, + ); + } + return next(action); + }; -export default asyncSubmissionMiddleware +export default asyncSubmissionMiddleware; diff --git a/examples/async-redux-submission/index.js b/examples/async-redux-submission/index.js index e08ee288..afd2f57f 100644 --- a/examples/async-redux-submission/index.js +++ b/examples/async-redux-submission/index.js @@ -1,15 +1,15 @@ -import React from 'react' -import { render } from 'react-dom' -import { Provider } from 'react-redux' -import Styles from './Styles' -import { Form, Field } from 'react-final-form' -import store, { promiseListener } from './store' +import React from "react"; +import { render } from "react-dom"; +import { Provider } from "react-redux"; +import Styles from "./Styles"; +import { Form, Field } from "react-final-form"; +import store, { promiseListener } from "./store"; import { REGISTER, REGISTER_SUCCESS, - REGISTER_FAILURE -} from './registrationDuck' -import MakeAsyncFunction from 'react-redux-promise-listener' + REGISTER_FAILURE, +} from "./registrationDuck"; +import MakeAsyncFunction from "react-redux-promise-listener"; const SubmitError = ({ name }) => ( ( submitError && !dirtySinceLastSubmit ? {submitError} : null } -) +); const App = () => ( @@ -28,7 +28,7 @@ const App = () => (

🏁 - {' '} + {" "} React Final Form

Async Redux Submission

@@ -36,27 +36,27 @@ const App = () => ( Read Docs

- Demonstrates how to use an async Redux side-effects library, like{' '} - redux-saga to manage form submissions using{' '} + Demonstrates how to use an async Redux side-effects library, like{" "} + redux-saga to manage form submissions using{" "} 🏁 - {' '} - React Final Form. Uses{' '} + {" "} + React Final Form. Uses{" "} redux-promise-listener - {' '} - and{' '} + {" "} + and{" "} react-redux-promise-listener - {' '} + {" "} libraries.

Dispatched Redux actions can be found in the console.

@@ -69,7 +69,7 @@ const App = () => ( resolve={REGISTER_SUCCESS} reject={REGISTER_FAILURE} > - {onSubmit => ( + {(onSubmit) => (
( @@ -111,19 +111,19 @@ const App = () => ( @@ -148,6 +148,6 @@ const App = () => ( -) +); -render(, document.getElementById('root')) +render(, document.getElementById("root")); diff --git a/examples/async-redux-submission/registrationDuck.js b/examples/async-redux-submission/registrationDuck.js index 3c96a7b7..261169bb 100644 --- a/examples/async-redux-submission/registrationDuck.js +++ b/examples/async-redux-submission/registrationDuck.js @@ -1,11 +1,11 @@ // QUACK! This is a duck. https://github.com/erikras/ducks-modular-redux // Actions -export const REGISTER = 'final-form-examples/registration/REGISTER' +export const REGISTER = "final-form-examples/registration/REGISTER"; export const REGISTER_SUCCESS = - 'final-form-examples/registration/REGISTER_SUCCESS' + "final-form-examples/registration/REGISTER_SUCCESS"; export const REGISTER_FAILURE = - 'final-form-examples/registration/REGISTER_FAILURE' + "final-form-examples/registration/REGISTER_FAILURE"; // Reducer export default function reducer(state = {}, action = {}) { @@ -13,20 +13,20 @@ export default function reducer(state = {}, action = {}) { case REGISTER: return { ...state, - registering: true - } + registering: true, + }; case REGISTER_SUCCESS: return { ...state, - registering: false - } + registering: false, + }; case REGISTER_FAILURE: return { ...state, - registering: false - } + registering: false, + }; default: - return state + return state; } } diff --git a/examples/async-redux-submission/store.js b/examples/async-redux-submission/store.js index 13422689..738cfde6 100644 --- a/examples/async-redux-submission/store.js +++ b/examples/async-redux-submission/store.js @@ -1,23 +1,26 @@ -import { createStore, combineReducers, applyMiddleware, compose } from 'redux' -import createReduxPromiseListener from 'redux-promise-listener' -import registration from './registrationDuck' -import asyncSubmissionMiddleware from './asyncSubmissionMiddleware' +import { createStore, combineReducers, applyMiddleware, compose } from "redux"; +import createReduxPromiseListener from "redux-promise-listener"; +import registration from "./registrationDuck"; +import asyncSubmissionMiddleware from "./asyncSubmissionMiddleware"; -const reduxPromiseListener = createReduxPromiseListener() +const reduxPromiseListener = createReduxPromiseListener(); -const logger = store => (next: Next) => (action: Action): State => { - console.log(action) - return next(action) -} +const logger = + (store) => + (next: Next) => + (action: Action): State => { + console.log(action); + return next(action); + }; const reducer = combineReducers({ - registration -}) + registration, +}); const composeEnhancers = - (typeof window !== 'undefined' && + (typeof window !== "undefined" && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) || - compose + compose; const store = createStore( reducer, @@ -26,11 +29,11 @@ const store = createStore( applyMiddleware( reduxPromiseListener.middleware, asyncSubmissionMiddleware, - logger - ) - ) -) + logger, + ), + ), +); -export const promiseListener = reduxPromiseListener // <---------- IMPORTANT +export const promiseListener = reduxPromiseListener; // <---------- IMPORTANT -export default store +export default store; diff --git a/examples/async-typeahead-redux/GithubUserTypeahead.jsx b/examples/async-typeahead-redux/GithubUserTypeahead.jsx index 33105149..e9e4be59 100644 --- a/examples/async-typeahead-redux/GithubUserTypeahead.jsx +++ b/examples/async-typeahead-redux/GithubUserTypeahead.jsx @@ -18,13 +18,9 @@ const GithubUserTypeahead = ({ name, ...props }) => { const dispatch = useDispatch(); const getOptions = useCallback(pathOr([], [keyword, "value"]), [keyword]); const isLoading = useCallback(pathOr(false, [keyword, "loading"]), [keyword]); - const handleOnSearch = useCallback( - compose( - dispatch, - searchGithubUsers - ), - [dispatch] - ); + const handleOnSearch = useCallback(compose(dispatch, searchGithubUsers), [ + dispatch, + ]); const options = useSelector(getOptions); const loading = useSelector(isLoading); diff --git a/examples/async-typeahead-redux/Styles.js b/examples/async-typeahead-redux/Styles.js index 127e3598..833d8dd0 100644 --- a/examples/async-typeahead-redux/Styles.js +++ b/examples/async-typeahead-redux/Styles.js @@ -1,4 +1,4 @@ -import styled, { css } from 'styled-components' +import styled, { css } from "styled-components"; const btn = (light, dark) => css` white-space: nowrap; @@ -25,14 +25,14 @@ const btn = (light, dark) => css` opacity: 0.6; cursor: not-allowed; } -` +`; const btnDefault = css` - ${btn('#ffffff', '#d5d5d5')} color: #555; -` + ${btn("#ffffff", "#d5d5d5")} color: #555; +`; -const btnPrimary = btn('#4f93ce', '#285f8f') -const btnDanger = btn('#e27c79', '#c9302c') +const btnPrimary = btn("#4f93ce", "#285f8f"); +const btnDanger = btn("#e27c79", "#c9302c"); export default styled.div` font-family: sans-serif; @@ -81,7 +81,7 @@ export default styled.div` text-align: center; display: block; position: absolute; - background: url('https://media.giphy.com/media/130AxGoOaR6t0I/giphy.gif') + background: url("https://media.giphy.com/media/130AxGoOaR6t0I/giphy.gif") center center; background-size: fill; font-size: 2em; @@ -116,7 +116,7 @@ export default styled.div` border: 1px solid #ccc; border-radius: 3px; } - & > input[type='checkbox'] { + & > input[type="checkbox"] { margin-top: 7px; } & > div { @@ -182,11 +182,11 @@ export default styled.div` } button { margin: 0 10px; - &[type='submit'] { + &[type="submit"] { ${btnPrimary}; } - &[type='button'] { + &[type="button"] { ${btnDefault}; } } -` +`; diff --git a/examples/async-typeahead-redux/actions.js b/examples/async-typeahead-redux/actions.js index 78f389e4..bd14b1cf 100644 --- a/examples/async-typeahead-redux/actions.js +++ b/examples/async-typeahead-redux/actions.js @@ -1,18 +1,18 @@ -export const requestGithubUsers = query => ({ +export const requestGithubUsers = (query) => ({ type: "GITHUB_USERS_REQUEST", - query + query, }); export const storeGithubUsers = (query, users) => ({ type: "GITHUB_USERS_RESPONSE", query, - users + users, }); -export const searchGithubUsers = query => dispatch => { +export const searchGithubUsers = (query) => (dispatch) => { dispatch(requestGithubUsers(query)); fetch(`https://api.github.com/search/users?q=${query}`) - .then(res => res.json()) + .then((res) => res.json()) .then(({ items: users }) => dispatch(storeGithubUsers(query, users))); }; diff --git a/examples/async-typeahead-redux/index.js b/examples/async-typeahead-redux/index.js index 91f67580..787a53b0 100644 --- a/examples/async-typeahead-redux/index.js +++ b/examples/async-typeahead-redux/index.js @@ -1,28 +1,28 @@ -import React from 'react' -import { render } from 'react-dom' -import { Provider } from 'react-redux' -import Styles from './Styles' -import { Form } from 'react-final-form' -import setFieldData from 'final-form-set-field-data' +import React from "react"; +import { render } from "react-dom"; +import { Provider } from "react-redux"; +import Styles from "./Styles"; +import { Form } from "react-final-form"; +import setFieldData from "final-form-set-field-data"; -import configureStore from './store' -import GithubUserTypeahead from './GithubUserTypeahead' +import configureStore from "./store"; +import GithubUserTypeahead from "./GithubUserTypeahead"; -const sleep = ms => new Promise(resolve => setTimeout(resolve, ms)) +const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms)); -const onSubmit = async values => { - await sleep(300) - window.alert(JSON.stringify(values, 0, 2)) -} +const onSubmit = async (values) => { + await sleep(300); + window.alert(JSON.stringify(values, 0, 2)); +}; -const store = configureStore() +const store = configureStore(); const App = () => (

🏁 - {' '} + {" "} React Final Form

@@ -52,11 +52,11 @@ const App = () => ( )} /> -) +); render( , - document.getElementById('root') -) + document.getElementById("root"), +); diff --git a/examples/async-typeahead-redux/store.js b/examples/async-typeahead-redux/store.js index 76f0a68c..58fcc8a8 100644 --- a/examples/async-typeahead-redux/store.js +++ b/examples/async-typeahead-redux/store.js @@ -9,16 +9,16 @@ const reducer = (state = initialState, action) => { ...state, [action.query]: { ...state[action.query], - loading: true - } + loading: true, + }, }; case "GITHUB_USERS_RESPONSE": return { ...state, [action.query]: { value: action.users, - loading: false - } + loading: false, + }, }; default: return state; diff --git a/examples/async-typeahead-redux/useKeyword.js b/examples/async-typeahead-redux/useKeyword.js index 5d5c3c27..8cb01a5a 100644 --- a/examples/async-typeahead-redux/useKeyword.js +++ b/examples/async-typeahead-redux/useKeyword.js @@ -1,15 +1,15 @@ import { useForm, useField } from "react-final-form"; import { propOr } from "ramda"; -const useKeyword = name => { +const useKeyword = (name) => { const { - mutators: { setFieldData } + mutators: { setFieldData }, } = useForm(); const { meta } = useField(name, { subscription: { data: true } }); return { keyword: propOr(null, "keyword", meta.data), - updateKeyword: keyword => setFieldData(name, { keyword }) + updateKeyword: (keyword) => setFieldData(name, { keyword }), }; }; diff --git a/examples/auto-save-field-blur/AutoSave.js b/examples/auto-save-field-blur/AutoSave.js index b036e076..2d517ac3 100644 --- a/examples/auto-save-field-blur/AutoSave.js +++ b/examples/auto-save-field-blur/AutoSave.js @@ -1,44 +1,44 @@ -import React from 'react' -import { FormSpy } from 'react-final-form' -import diff from 'object-diff' +import React from "react"; +import { FormSpy } from "react-final-form"; +import diff from "object-diff"; class AutoSave extends React.Component { constructor(props) { - super(props) - this.state = { values: props.values, submitting: false } + super(props); + this.state = { values: props.values, submitting: false }; } componentWillReceiveProps(nextProps) { if (this.props.active && this.props.active !== nextProps.active) { // blur occurred - this.save(this.props.active) + this.save(this.props.active); } } - save = async blurredField => { + save = async (blurredField) => { if (this.promise) { - await this.promise + await this.promise; } - const { values, setFieldData, save } = this.props + const { values, setFieldData, save } = this.props; // This diff step is totally optional - const difference = diff(this.state.values, values) + const difference = diff(this.state.values, values); if (Object.keys(difference).length) { // values have changed - this.setState({ submitting: true, values }) - setFieldData(blurredField, { saving: true }) - this.promise = save(difference) - await this.promise - delete this.promise - this.setState({ submitting: false }) - setFieldData(blurredField, { saving: false }) + this.setState({ submitting: true, values }); + setFieldData(blurredField, { saving: true }); + this.promise = save(difference); + await this.promise; + delete this.promise; + this.setState({ submitting: false }); + setFieldData(blurredField, { saving: false }); } - } + }; render() { // This component doesn't have to render anything, but it can render // submitting state. - return null + return null; } } @@ -48,10 +48,10 @@ class AutoSave extends React.Component { // - Maintain state of when we are submitting // - Render a message when submitting // - Pass in save prop nicely -export default props => ( +export default (props) => ( -) +); diff --git a/examples/auto-save-field-blur/Styles.js b/examples/auto-save-field-blur/Styles.js index 1aa7b27e..a686b959 100644 --- a/examples/auto-save-field-blur/Styles.js +++ b/examples/auto-save-field-blur/Styles.js @@ -1,4 +1,4 @@ -import styled, { css } from 'styled-components' +import styled, { css } from "styled-components"; const btn = (light, dark) => css` white-space: nowrap; @@ -25,14 +25,14 @@ const btn = (light, dark) => css` opacity: 0.6; cursor: not-allowed; } -` +`; const btnDefault = css` - ${btn('#ffffff', '#d5d5d5')} color: #555; -` + ${btn("#ffffff", "#d5d5d5")} color: #555; +`; -const btnPrimary = btn('#4f93ce', '#285f8f') -const btnDanger = btn('#e27c79', '#c9302c') +const btnPrimary = btn("#4f93ce", "#285f8f"); +const btnDanger = btn("#e27c79", "#c9302c"); export default styled.div` font-family: sans-serif; @@ -81,7 +81,7 @@ export default styled.div` text-align: center; display: block; position: absolute; - background: url('https://media.giphy.com/media/130AxGoOaR6t0I/giphy.gif') + background: url("https://media.giphy.com/media/130AxGoOaR6t0I/giphy.gif") center center; background-size: fill; font-size: 2em; @@ -116,7 +116,7 @@ export default styled.div` border: 1px solid #ccc; border-radius: 3px; } - & > input[type='checkbox'] { + & > input[type="checkbox"] { margin-top: 7px; } & > div { @@ -182,11 +182,11 @@ export default styled.div` } button { margin: 0 10px; - &[type='submit'] { + &[type="submit"] { ${btnPrimary}; } - &[type='button'] { + &[type="button"] { ${btnDefault}; } } -` +`; diff --git a/examples/auto-save-field-blur/index.js b/examples/auto-save-field-blur/index.js index 4dc1a874..0044ba8d 100644 --- a/examples/auto-save-field-blur/index.js +++ b/examples/auto-save-field-blur/index.js @@ -1,16 +1,16 @@ -import React from 'react' -import { render } from 'react-dom' -import Styles from './Styles' -import { Form, Field } from 'react-final-form' -import setFieldData from 'final-form-set-field-data' -import AutoSave from './AutoSave' +import React from "react"; +import { render } from "react-dom"; +import Styles from "./Styles"; +import { Form, Field } from "react-final-form"; +import setFieldData from "final-form-set-field-data"; +import AutoSave from "./AutoSave"; -const sleep = ms => new Promise(resolve => setTimeout(resolve, ms)) +const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms)); -const save = async values => { - console.log('Saving', values) - await sleep(1000) -} +const save = async (values) => { + console.log("Saving", values); + await sleep(1000); +}; const SavingIndicator = ({ name }) => ( ( subscription={{ data: true }} render={({ meta: { - data: { saving } - } + data: { saving }, + }, }) => (saving ?
Saving
: null)} /> -) +); const App = () => (

🏁 - {' '} + {" "} React Final Form

Auto-Save on Field Blur

@@ -37,21 +37,21 @@ const App = () => ( Read Docs

- The AutoSave component uses{' '} + The AutoSave component uses{" "} FormSpy - {' '} + {" "} to listen to changes to values and which field is currently active and auto-saves changes when a field is blurred. Look in the console for the save events.

@@ -100,19 +100,19 @@ const App = () => ( @@ -129,31 +129,31 @@ const App = () => ( @@ -168,7 +168,7 @@ const App = () => ( component="input" type="radio" value="larry" - />{' '} + />{" "} Larry @@ -201,6 +201,6 @@ const App = () => ( )} -) +); -render(, document.getElementById('root')) +render(, document.getElementById("root")); diff --git a/examples/auto-save-selective-debounce/AutoSave.js b/examples/auto-save-selective-debounce/AutoSave.js index 594ba79b..fde3ed32 100644 --- a/examples/auto-save-selective-debounce/AutoSave.js +++ b/examples/auto-save-selective-debounce/AutoSave.js @@ -7,14 +7,14 @@ const areObjectsIdentical = (a, b) => class AutoSave extends React.Component { static defaultProps = { - debounced: [] + debounced: [], }; constructor(props) { super(props); this.state = { submitting: false, - ...this.splitValues(props.values) + ...this.splitValues(props.values), }; } @@ -36,13 +36,13 @@ class AutoSave extends React.Component { } } - splitValues = values => { + splitValues = (values) => { const { debounced } = this.props; const debouncedValues = {}; const immediateValues = {}; - Object.keys(values).forEach(key => { + Object.keys(values).forEach((key) => { if (debounced.includes(key)) { debouncedValues[key] = values[key]; } else { @@ -52,7 +52,7 @@ class AutoSave extends React.Component { return { debouncedValues, - immediateValues + immediateValues, }; }; @@ -65,22 +65,22 @@ class AutoSave extends React.Component { const { debouncedValues, immediateValues } = this.splitValues(values); this.setState( - state => ({ + (state) => ({ submitting: true, immediateValues: { ...immediateValues }, - debouncedValues: { ...debouncedValues } + debouncedValues: { ...debouncedValues }, }), async () => { this.promise = save({ ...this.state.immediateValues, - ...this.state.debouncedValues + ...this.state.debouncedValues, }); await this.promise; delete this.promise; this.setState({ submitting: false }); - } + }, ); }; @@ -99,6 +99,6 @@ class AutoSave extends React.Component { // - Maintain state of when we are submitting // - Render a message when submitting // - Pass in debounce and save props nicely -export default props => ( +export default (props) => ( ); diff --git a/examples/auto-save-selective-debounce/Styles.js b/examples/auto-save-selective-debounce/Styles.js index d46ad21e..b7fb0008 100644 --- a/examples/auto-save-selective-debounce/Styles.js +++ b/examples/auto-save-selective-debounce/Styles.js @@ -1,4 +1,4 @@ -import styled, { css } from 'styled-components' +import styled, { css } from "styled-components"; const btn = (light, dark) => css` white-space: nowrap; @@ -25,14 +25,14 @@ const btn = (light, dark) => css` opacity: 0.6; cursor: not-allowed; } -` +`; const btnDefault = css` - ${btn('#ffffff', '#d5d5d5')} color: #555; -` + ${btn("#ffffff", "#d5d5d5")} color: #555; +`; -const btnPrimary = btn('#4f93ce', '#285f8f') -const btnDanger = btn('#e27c79', '#c9302c') +const btnPrimary = btn("#4f93ce", "#285f8f"); +const btnDanger = btn("#e27c79", "#c9302c"); export default styled.div` font-family: sans-serif; @@ -81,7 +81,7 @@ export default styled.div` text-align: center; display: block; position: absolute; - background: url('https://media.giphy.com/media/130AxGoOaR6t0I/giphy.gif') + background: url("https://media.giphy.com/media/130AxGoOaR6t0I/giphy.gif") center center; background-size: fill; font-size: 2em; @@ -116,7 +116,7 @@ export default styled.div` border: 1px solid #ccc; border-radius: 3px; } - & > input[type='checkbox'] { + & > input[type="checkbox"] { margin-top: 7px; } & > div { @@ -176,11 +176,11 @@ export default styled.div` } button { margin: 0 10px; - &[type='submit'] { + &[type="submit"] { ${btnPrimary}; } - &[type='button'] { + &[type="button"] { ${btnDefault}; } } -` +`; diff --git a/examples/auto-save-selective-debounce/index.js b/examples/auto-save-selective-debounce/index.js index 22b1c481..91d22e47 100644 --- a/examples/auto-save-selective-debounce/index.js +++ b/examples/auto-save-selective-debounce/index.js @@ -1,22 +1,22 @@ -import React from 'react' -import { render } from 'react-dom' -import Styles from './Styles' -import { Form, Field } from 'react-final-form' -import AutoSave from './AutoSave' +import React from "react"; +import { render } from "react-dom"; +import Styles from "./Styles"; +import { Form, Field } from "react-final-form"; +import AutoSave from "./AutoSave"; -const sleep = ms => new Promise(resolve => setTimeout(resolve, ms)) +const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms)); -const save = async values => { - console.log('Saving', values) - await sleep(2000) -} +const save = async (values) => { + console.log("Saving", values); + await sleep(2000); +}; const App = () => (

🏁 - {' '} + {" "} React Final Form

@@ -26,22 +26,22 @@ const App = () => ( Read Docs

- The AutoSave component uses{' '} + The AutoSave component uses{" "} FormSpy - {' '} + {" "} to listen to changes to values and auto-save changes. But it only - debounces changes to a specific list of fields given to the{' '} + debounces changes to a specific list of fields given to the{" "} AutoSave component, in this case, all the text inputs. Look in the console for the save events.

{() => ( @@ -52,7 +52,7 @@ const App = () => ( {/* ☝️ ️☝️ ️☝️ ️️️️☝️ ️️*/} @@ -90,19 +90,19 @@ const App = () => ( @@ -117,31 +117,31 @@ const App = () => ( @@ -155,7 +155,7 @@ const App = () => ( component="input" type="radio" value="larry" - />{' '} + />{" "} Larry @@ -186,6 +186,6 @@ const App = () => ( )} -) +); -render(, document.getElementById('root')) +render(, document.getElementById("root")); diff --git a/examples/auto-save-with-debounce/AutoSave.js b/examples/auto-save-with-debounce/AutoSave.js index ed1bc5b2..7763ef63 100644 --- a/examples/auto-save-with-debounce/AutoSave.js +++ b/examples/auto-save-with-debounce/AutoSave.js @@ -1,44 +1,44 @@ -import React from 'react' -import { FormSpy } from 'react-final-form' -import diff from 'object-diff' +import React from "react"; +import { FormSpy } from "react-final-form"; +import diff from "object-diff"; class AutoSave extends React.Component { constructor(props) { - super(props) - this.state = { values: props.values, submitting: false } + super(props); + this.state = { values: props.values, submitting: false }; } componentWillReceiveProps(nextProps) { if (this.timeout) { - clearTimeout(this.timeout) + clearTimeout(this.timeout); } - this.timeout = setTimeout(this.save, this.props.debounce) + this.timeout = setTimeout(this.save, this.props.debounce); } save = async () => { if (this.promise) { - await this.promise + await this.promise; } - const { values, save } = this.props + const { values, save } = this.props; // This diff step is totally optional - const difference = diff(this.state.values, values) + const difference = diff(this.state.values, values); if (Object.keys(difference).length) { // values have changed - this.setState({ submitting: true, values }) - this.promise = save(difference) - await this.promise - delete this.promise - this.setState({ submitting: false }) + this.setState({ submitting: true, values }); + this.promise = save(difference); + await this.promise; + delete this.promise; + this.setState({ submitting: false }); } - } + }; render() { // This component doesn't have to render anything, but it can render // submitting state. return ( this.state.submitting &&
Submitting...
- ) + ); } } @@ -48,6 +48,6 @@ class AutoSave extends React.Component { // - Maintain state of when we are submitting // - Render a message when submitting // - Pass in debounce and save props nicely -export default props => ( +export default (props) => ( -) +); diff --git a/examples/auto-save-with-debounce/Styles.js b/examples/auto-save-with-debounce/Styles.js index d46ad21e..b7fb0008 100644 --- a/examples/auto-save-with-debounce/Styles.js +++ b/examples/auto-save-with-debounce/Styles.js @@ -1,4 +1,4 @@ -import styled, { css } from 'styled-components' +import styled, { css } from "styled-components"; const btn = (light, dark) => css` white-space: nowrap; @@ -25,14 +25,14 @@ const btn = (light, dark) => css` opacity: 0.6; cursor: not-allowed; } -` +`; const btnDefault = css` - ${btn('#ffffff', '#d5d5d5')} color: #555; -` + ${btn("#ffffff", "#d5d5d5")} color: #555; +`; -const btnPrimary = btn('#4f93ce', '#285f8f') -const btnDanger = btn('#e27c79', '#c9302c') +const btnPrimary = btn("#4f93ce", "#285f8f"); +const btnDanger = btn("#e27c79", "#c9302c"); export default styled.div` font-family: sans-serif; @@ -81,7 +81,7 @@ export default styled.div` text-align: center; display: block; position: absolute; - background: url('https://media.giphy.com/media/130AxGoOaR6t0I/giphy.gif') + background: url("https://media.giphy.com/media/130AxGoOaR6t0I/giphy.gif") center center; background-size: fill; font-size: 2em; @@ -116,7 +116,7 @@ export default styled.div` border: 1px solid #ccc; border-radius: 3px; } - & > input[type='checkbox'] { + & > input[type="checkbox"] { margin-top: 7px; } & > div { @@ -176,11 +176,11 @@ export default styled.div` } button { margin: 0 10px; - &[type='submit'] { + &[type="submit"] { ${btnPrimary}; } - &[type='button'] { + &[type="button"] { ${btnDefault}; } } -` +`; diff --git a/examples/auto-save-with-debounce/index.js b/examples/auto-save-with-debounce/index.js index fc6e9332..7c80d1aa 100644 --- a/examples/auto-save-with-debounce/index.js +++ b/examples/auto-save-with-debounce/index.js @@ -1,22 +1,22 @@ -import React from 'react' -import { render } from 'react-dom' -import Styles from './Styles' -import { Form, Field } from 'react-final-form' -import AutoSave from './AutoSave' +import React from "react"; +import { render } from "react-dom"; +import Styles from "./Styles"; +import { Form, Field } from "react-final-form"; +import AutoSave from "./AutoSave"; -const sleep = ms => new Promise(resolve => setTimeout(resolve, ms)) +const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms)); -const save = async values => { - console.log('Saving', values) - await sleep(2000) -} +const save = async (values) => { + console.log("Saving", values); + await sleep(2000); +}; const App = () => (

🏁 - {' '} + {" "} React Final Form

Auto-Save with Debounce

@@ -24,20 +24,20 @@ const App = () => ( Read Docs

- The AutoSave component uses{' '} + The AutoSave component uses{" "} FormSpy - {' '} + {" "} to listen to changes to values and auto-save changes. Look in the console for the save events.

{() => ( @@ -82,19 +82,19 @@ const App = () => ( @@ -109,31 +109,31 @@ const App = () => ( @@ -147,7 +147,7 @@ const App = () => ( component="input" type="radio" value="larry" - />{' '} + />{" "} Larry @@ -178,6 +178,6 @@ const App = () => ( )}
-) +); -render(, document.getElementById('root')) +render(, document.getElementById("root")); diff --git a/examples/calculated-fields/Styles.js b/examples/calculated-fields/Styles.js index 2a2bfadd..3f54fa69 100644 --- a/examples/calculated-fields/Styles.js +++ b/examples/calculated-fields/Styles.js @@ -1,4 +1,4 @@ -import styled, { css } from 'styled-components' +import styled, { css } from "styled-components"; const btn = (light, dark) => css` white-space: nowrap; @@ -25,14 +25,14 @@ const btn = (light, dark) => css` opacity: 0.6; cursor: not-allowed; } -` +`; const btnDefault = css` - ${btn('#ffffff', '#d5d5d5')} color: #555; -` + ${btn("#ffffff", "#d5d5d5")} color: #555; +`; -const btnPrimary = btn('#4f93ce', '#285f8f') -const btnDanger = btn('#e27c79', '#c9302c') +const btnPrimary = btn("#4f93ce", "#285f8f"); +const btnDanger = btn("#e27c79", "#c9302c"); export default styled.div` font-family: sans-serif; @@ -79,7 +79,7 @@ export default styled.div` text-align: center; display: block; position: absolute; - background: url('https://media.giphy.com/media/130AxGoOaR6t0I/giphy.gif') + background: url("https://media.giphy.com/media/130AxGoOaR6t0I/giphy.gif") center center; background-size: fill; font-size: 2em; @@ -114,7 +114,7 @@ export default styled.div` border: 1px solid #ccc; border-radius: 3px; } - & > input[type='checkbox'] { + & > input[type="checkbox"] { margin-top: 7px; } & > div { @@ -144,10 +144,10 @@ export default styled.div` } button { margin: 0 10px; - &[type='submit'] { + &[type="submit"] { ${btnPrimary}; } - &[type='button'] { + &[type="button"] { ${btnDefault}; } } @@ -166,4 +166,4 @@ export default styled.div` padding: 20px; } } -` +`; diff --git a/examples/calculated-fields/index.js b/examples/calculated-fields/index.js index 4e920e66..a7cb1af2 100644 --- a/examples/calculated-fields/index.js +++ b/examples/calculated-fields/index.js @@ -1,32 +1,32 @@ -import React from 'react' -import { render } from 'react-dom' -import Styles from './Styles' -import { Form, Field } from 'react-final-form' -import createDecorator from 'final-form-calculate' +import React from "react"; +import { render } from "react-dom"; +import Styles from "./Styles"; +import { Form, Field } from "react-final-form"; +import createDecorator from "final-form-calculate"; -const sleep = ms => new Promise(resolve => setTimeout(resolve, ms)) +const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms)); -const onSubmit = async values => { - await sleep(300) - window.alert(JSON.stringify(values, 0, 2)) -} +const onSubmit = async (values) => { + await sleep(300); + window.alert(JSON.stringify(values, 0, 2)); +}; const calculator = createDecorator( { - field: 'minimum', // when minimum changes... + field: "minimum", // when minimum changes... updates: { // ...update maximum to the result of this function maximum: (minimumValue, allValues) => - Math.max(minimumValue || 0, allValues.maximum || 0) - } + Math.max(minimumValue || 0, allValues.maximum || 0), + }, }, { - field: 'maximum', // when maximum changes... + field: "maximum", // when maximum changes... updates: { // update minimum to the result of this function minimum: (maximumValue, allValues) => - Math.min(maximumValue || 0, allValues.minimum || 0) - } + Math.min(maximumValue || 0, allValues.minimum || 0), + }, }, { field: /day\[\d\]/, // when a field matching this pattern changes... @@ -35,18 +35,18 @@ const calculator = createDecorator( total: (ignoredValue, allValues) => (allValues.day || []).reduce( (sum, value) => sum + Number(value || 0), - 0 - ) - } - } -) + 0, + ), + }, + }, +); const App = () => (

🏁 - {' '} + {" "} React Final Form Example

Calculated Fields

@@ -159,6 +159,6 @@ const App = () => ( )} /> -) +); -render(, document.getElementById('root')) +render(, document.getElementById("root")); diff --git a/examples/chakra/index.js b/examples/chakra/index.js index 12601ae9..0f9da298 100644 --- a/examples/chakra/index.js +++ b/examples/chakra/index.js @@ -1,6 +1,6 @@ /* eslint-disable jsx-a11y/accessible-emoji */ -import React from 'react' -import { render } from 'react-dom' +import React from "react"; +import { render } from "react-dom"; import { Box, Button, @@ -20,17 +20,17 @@ import { Radio, RadioGroup, Stack, - Textarea -} from '@chakra-ui/core' -import { Form, Field, useField, useForm } from 'react-final-form' -import validate from './validate' + Textarea, +} from "@chakra-ui/core"; +import { Form, Field, useField, useForm } from "react-final-form"; +import validate from "./validate"; -const sleep = ms => new Promise(resolve => setTimeout(resolve, ms)) +const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms)); -const onSubmit = async values => { - await sleep(300) - window.alert(JSON.stringify(values, 0, 2)) -} +const onSubmit = async (values) => { + await sleep(300); + window.alert(JSON.stringify(values, 0, 2)); +}; const App = () => ( @@ -43,7 +43,7 @@ const App = () => ( Chakra Example - Example using React Final Form and{' '} + Example using React Final Form and{" "} Chakra @@ -63,7 +63,7 @@ const App = () => ( errors, submitting, pristine, - values + values, }) => ( ( /> -) +); const AdaptedTextarea = ({ input, meta, ...rest }) => (