refactor(instances): better disabled/isValid handling

This commit is contained in:
Sérgio Ramos 2018-05-08 17:55:06 +01:00
parent d591d93547
commit 429ad17262
5 changed files with 69 additions and 50 deletions

View File

@ -74,7 +74,6 @@ const PopoverDivider = styled(BasePopoverDivider)`
width: 100%;
`;
export const Image = ({
name,
id,

View File

@ -11,7 +11,6 @@ import { set } from 'react-redux-values';
import Fuse from 'fuse.js';
import {
H3,
ViewContainer,
Divider,
StatusLoader,

View File

@ -35,7 +35,7 @@ const names = {
name: 'IC_NAME',
image: 'IC_IMAGE',
package: 'IC_PACKAGE',
network: 'IC_NETWORK',
networks: 'IC_NETWORKS',
tags: 'IC_TAGS',
metadata: 'IC_METADATA',
userScript: 'IC_USERSCRIPT',
@ -69,9 +69,9 @@ class CreateInstance extends Component {
isFormValid = () => {
const { steps } = this.props;
return Object.keys(this.isValids).filter(
name => !this.isValids[name](steps[name] || {})
).length;
return Object.keys(this.isValids).every(name =>
this.isValids[name](steps[name] || {})
);
};
isStepValid = step => {
@ -95,7 +95,7 @@ class CreateInstance extends Component {
name,
image,
package: packageResult,
network,
networks,
tags,
metadata,
userScript,
@ -136,7 +136,7 @@ class CreateInstance extends Component {
<Package
ref={this.setIsValid('package')}
expanded={step === 'package'}
next="network"
next="networks"
saved={steps.package}
onDefocus={handleDefocus('package')}
preview={packageResult}
@ -144,12 +144,12 @@ class CreateInstance extends Component {
</Margin>
<Margin bottom="5">
<Network
ref={this.setIsValid('network')}
expanded={step === 'network'}
ref={this.setIsValid('networks')}
expanded={step === 'networks'}
next="tags"
saved={steps.network}
onDefocus={handleDefocus('network')}
preview={network}
onDefocus={handleDefocus('networks')}
preview={networks}
/>
</Margin>
<Margin bottom="5">
@ -223,7 +223,11 @@ class CreateInstance extends Component {
<ReduxForm form={IC_F} onSubmit={handleSubmit}>
{({ handleSubmit, submitting }) => (
<form onSubmit={handleSubmit}>
<Button disabled={disabled} loading={submitting}>
{console.log({ isFormValid: this.isFormValid() })}
<Button
disabled={disabled || !this.isFormValid()}
loading={submitting}
>
Deploy
</Button>
</form>
@ -243,7 +247,7 @@ export default compose(
name: values[names.name],
image: values[names.image],
package: values[names.package],
network: values[names.network],
networks: values[names.networks],
tags: values[names.tags],
metadata: values[names.metadata],
userScript: values[names.userScript],
@ -255,17 +259,20 @@ export default compose(
const error = get(form, `${IC_F}.error`, null);
// Maybe re-use saved to only write the rule once
const disabled = Boolean(
!this.isFormValid &&
steps.name &&
steps.image &&
steps.image.id &&
steps.package &&
steps.network
const disabled = !(
!error &&
steps.name &&
steps.name.name &&
steps.image &&
steps.image.id &&
steps.package &&
steps.package.id &&
steps.networks &&
Array.isArray(steps.networks)
);
return {
disabled: !disabled,
disabled,
forms: Object.keys(form), // improve this
error,
steps

View File

@ -47,17 +47,15 @@
"resolutions": {
"axios": "0.16.2",
"follow-redirects": "1.4.1",
"node-fetch": "2.1.1",
"node-fetch": "2.1.2",
"core-js": "2.5.4",
"regenerator-runtime": "0.11.1",
"pify": "3.0.0",
"has-flag": "2.0.0",
"lodash": "4.17.10",
"parse-json": "4.0.0",
"whatwg-fetch": "2.0.4",
"react": "16.3.1",
"breeze-nexttick": "0.2.1",
"isarray": "1.0.0",
"uuid": "3.0.1"
"react": "16.3.1",
"styled-is": "1.1.3",
"breeze-nexttick": "0.2.1"
},
"workspaces": ["packages/*", "consoles/*", "bundle"]
}

View File

@ -5285,10 +5285,18 @@ has-ansi@^2.0.0:
dependencies:
ansi-regex "^2.0.0"
has-flag@2.0.0, has-flag@^1.0.0, has-flag@^2.0.0, has-flag@^3.0.0:
has-flag@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-1.0.0.tgz#9d9e793165ce017a00f00418c43f942a7b1d11fa"
has-flag@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-2.0.0.tgz#e8207af1cc7b30d446cc70b734b5e8be18f88d51"
has-flag@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
has-unicode@^2.0.0:
version "2.0.1"
resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"
@ -7066,18 +7074,10 @@ lodash.values@^4.3.0:
version "4.3.0"
resolved "https://registry.yarnpkg.com/lodash.values/-/lodash.values-4.3.0.tgz#a3a6c2b0ebecc5c2cba1c17e6e620fe81b53d347"
lodash@4.17.5:
version "4.17.5"
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.5.tgz#99a92d65c0272debe8c96b6057bc8fbfa3bed511"
"lodash@>=3.5 <5", lodash@^4.13.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.5.1:
lodash@4.17.10, lodash@4.17.5, "lodash@>=3.5 <5", lodash@^3.3.1, lodash@^4.13.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.5.1:
version "4.17.10"
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.10.tgz#1b7793cf7259ea38fb3661d4d38b3260af8ae4e7"
lodash@^3.3.1:
version "3.10.1"
resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"
log-symbols@^2.2.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-2.2.0.tgz#5740e1c5d6f0dfda4ad9323b5332107ef6b4c40a"
@ -7588,9 +7588,9 @@ node-dir@^0.1.10:
dependencies:
minimatch "^3.0.2"
node-fetch@1.6.3, node-fetch@2.1.1, node-fetch@2.1.2, node-fetch@^1.0.1:
version "2.1.1"
resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.1.1.tgz#369ca70b82f50c86496104a6c776d274f4e4a2d4"
node-fetch@1.6.3, node-fetch@2.1.2, node-fetch@^1.0.1:
version "2.1.2"
resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.1.2.tgz#ab884e8e7e57e38a944753cec706f788d1768bb5"
node-forge@0.7.5:
version "0.7.5"
@ -8149,7 +8149,11 @@ pez@4.x.x:
hoek "5.x.x"
nigel "3.x.x"
pify@3.0.0, pify@^2.0.0, pify@^2.3.0, pify@^3.0.0:
pify@^2.0.0, pify@^2.3.0:
version "2.3.0"
resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
pify@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/pify/-/pify-3.0.0.tgz#e5a4acd2c101fdf3d9a4d07f0dbc4db49dd28176"
@ -10449,11 +10453,7 @@ styled-flex-component@^2.2.2:
dependencies:
styled-is "1.1.2"
styled-is@1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/styled-is/-/styled-is-1.1.2.tgz#f23a43249ba52ac9136c166aac1da30a5711593e"
styled-is@^1.1.2:
styled-is@1.1.2, styled-is@1.1.3, styled-is@^1.1.2:
version "1.1.3"
resolved "https://registry.yarnpkg.com/styled-is/-/styled-is-1.1.3.tgz#09df6cb5aff33c91080cdb3bf4f687eac96b5839"
@ -11191,10 +11191,22 @@ utils-merge@1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
uuid@3.0.0, uuid@3.0.1, uuid@3.0.x, uuid@^2.0.1, uuid@^2.0.2, uuid@^3.0.1, uuid@^3.1.0:
uuid@3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.0.0.tgz#6728fc0459c450d796a99c31837569bdf672d728"
uuid@3.0.x:
version "3.0.1"
resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.0.1.tgz#6544bba2dfda8c1cf17e629a3a305e2bb1fee6c1"
uuid@^2.0.1, uuid@^2.0.2:
version "2.0.3"
resolved "https://registry.yarnpkg.com/uuid/-/uuid-2.0.3.tgz#67e2e863797215530dff318e5bf9dcebfd47b21a"
uuid@^3.0.1, uuid@^3.1.0:
version "3.2.1"
resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.2.1.tgz#12c528bb9d58d0b9265d9a2f6f0fe8be17ff1f14"
v8flags@^2.1.1:
version "2.1.1"
resolved "https://registry.yarnpkg.com/v8flags/-/v8flags-2.1.1.tgz#aab1a1fa30d45f88dd321148875ac02c0b55e5b4"
@ -11531,7 +11543,11 @@ whatwg-encoding@^1.0.1:
dependencies:
iconv-lite "0.4.19"
whatwg-fetch@2.0.3, whatwg-fetch@2.0.4, whatwg-fetch@>=0.10.0:
whatwg-fetch@2.0.3:
version "2.0.3"
resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.3.tgz#9c84ec2dcf68187ff00bc64e1274b442176e1c84"
whatwg-fetch@2.0.4, whatwg-fetch@>=0.10.0:
version "2.0.4"
resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.4.tgz#dde6a5df315f9d39991aa17621853d720b85566f"