refactor(instances): better disabled/isValid handling
This commit is contained in:
parent
d591d93547
commit
429ad17262
|
@ -74,7 +74,6 @@ const PopoverDivider = styled(BasePopoverDivider)`
|
||||||
width: 100%;
|
width: 100%;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
|
||||||
export const Image = ({
|
export const Image = ({
|
||||||
name,
|
name,
|
||||||
id,
|
id,
|
||||||
|
|
|
@ -11,7 +11,6 @@ import { set } from 'react-redux-values';
|
||||||
import Fuse from 'fuse.js';
|
import Fuse from 'fuse.js';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
H3,
|
|
||||||
ViewContainer,
|
ViewContainer,
|
||||||
Divider,
|
Divider,
|
||||||
StatusLoader,
|
StatusLoader,
|
||||||
|
|
|
@ -35,7 +35,7 @@ const names = {
|
||||||
name: 'IC_NAME',
|
name: 'IC_NAME',
|
||||||
image: 'IC_IMAGE',
|
image: 'IC_IMAGE',
|
||||||
package: 'IC_PACKAGE',
|
package: 'IC_PACKAGE',
|
||||||
network: 'IC_NETWORK',
|
networks: 'IC_NETWORKS',
|
||||||
tags: 'IC_TAGS',
|
tags: 'IC_TAGS',
|
||||||
metadata: 'IC_METADATA',
|
metadata: 'IC_METADATA',
|
||||||
userScript: 'IC_USERSCRIPT',
|
userScript: 'IC_USERSCRIPT',
|
||||||
|
@ -69,9 +69,9 @@ class CreateInstance extends Component {
|
||||||
isFormValid = () => {
|
isFormValid = () => {
|
||||||
const { steps } = this.props;
|
const { steps } = this.props;
|
||||||
|
|
||||||
return Object.keys(this.isValids).filter(
|
return Object.keys(this.isValids).every(name =>
|
||||||
name => !this.isValids[name](steps[name] || {})
|
this.isValids[name](steps[name] || {})
|
||||||
).length;
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
isStepValid = step => {
|
isStepValid = step => {
|
||||||
|
@ -95,7 +95,7 @@ class CreateInstance extends Component {
|
||||||
name,
|
name,
|
||||||
image,
|
image,
|
||||||
package: packageResult,
|
package: packageResult,
|
||||||
network,
|
networks,
|
||||||
tags,
|
tags,
|
||||||
metadata,
|
metadata,
|
||||||
userScript,
|
userScript,
|
||||||
|
@ -136,7 +136,7 @@ class CreateInstance extends Component {
|
||||||
<Package
|
<Package
|
||||||
ref={this.setIsValid('package')}
|
ref={this.setIsValid('package')}
|
||||||
expanded={step === 'package'}
|
expanded={step === 'package'}
|
||||||
next="network"
|
next="networks"
|
||||||
saved={steps.package}
|
saved={steps.package}
|
||||||
onDefocus={handleDefocus('package')}
|
onDefocus={handleDefocus('package')}
|
||||||
preview={packageResult}
|
preview={packageResult}
|
||||||
|
@ -144,12 +144,12 @@ class CreateInstance extends Component {
|
||||||
</Margin>
|
</Margin>
|
||||||
<Margin bottom="5">
|
<Margin bottom="5">
|
||||||
<Network
|
<Network
|
||||||
ref={this.setIsValid('network')}
|
ref={this.setIsValid('networks')}
|
||||||
expanded={step === 'network'}
|
expanded={step === 'networks'}
|
||||||
next="tags"
|
next="tags"
|
||||||
saved={steps.network}
|
saved={steps.network}
|
||||||
onDefocus={handleDefocus('network')}
|
onDefocus={handleDefocus('networks')}
|
||||||
preview={network}
|
preview={networks}
|
||||||
/>
|
/>
|
||||||
</Margin>
|
</Margin>
|
||||||
<Margin bottom="5">
|
<Margin bottom="5">
|
||||||
|
@ -223,7 +223,11 @@ class CreateInstance extends Component {
|
||||||
<ReduxForm form={IC_F} onSubmit={handleSubmit}>
|
<ReduxForm form={IC_F} onSubmit={handleSubmit}>
|
||||||
{({ handleSubmit, submitting }) => (
|
{({ handleSubmit, submitting }) => (
|
||||||
<form onSubmit={handleSubmit}>
|
<form onSubmit={handleSubmit}>
|
||||||
<Button disabled={disabled} loading={submitting}>
|
{console.log({ isFormValid: this.isFormValid() })}
|
||||||
|
<Button
|
||||||
|
disabled={disabled || !this.isFormValid()}
|
||||||
|
loading={submitting}
|
||||||
|
>
|
||||||
Deploy
|
Deploy
|
||||||
</Button>
|
</Button>
|
||||||
</form>
|
</form>
|
||||||
|
@ -243,7 +247,7 @@ export default compose(
|
||||||
name: values[names.name],
|
name: values[names.name],
|
||||||
image: values[names.image],
|
image: values[names.image],
|
||||||
package: values[names.package],
|
package: values[names.package],
|
||||||
network: values[names.network],
|
networks: values[names.networks],
|
||||||
tags: values[names.tags],
|
tags: values[names.tags],
|
||||||
metadata: values[names.metadata],
|
metadata: values[names.metadata],
|
||||||
userScript: values[names.userScript],
|
userScript: values[names.userScript],
|
||||||
|
@ -255,17 +259,20 @@ export default compose(
|
||||||
const error = get(form, `${IC_F}.error`, null);
|
const error = get(form, `${IC_F}.error`, null);
|
||||||
|
|
||||||
// Maybe re-use saved to only write the rule once
|
// Maybe re-use saved to only write the rule once
|
||||||
const disabled = Boolean(
|
const disabled = !(
|
||||||
!this.isFormValid &&
|
!error &&
|
||||||
steps.name &&
|
steps.name &&
|
||||||
steps.image &&
|
steps.name.name &&
|
||||||
steps.image.id &&
|
steps.image &&
|
||||||
steps.package &&
|
steps.image.id &&
|
||||||
steps.network
|
steps.package &&
|
||||||
|
steps.package.id &&
|
||||||
|
steps.networks &&
|
||||||
|
Array.isArray(steps.networks)
|
||||||
);
|
);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
disabled: !disabled,
|
disabled,
|
||||||
forms: Object.keys(form), // improve this
|
forms: Object.keys(form), // improve this
|
||||||
error,
|
error,
|
||||||
steps
|
steps
|
||||||
|
|
12
package.json
12
package.json
|
@ -47,17 +47,15 @@
|
||||||
"resolutions": {
|
"resolutions": {
|
||||||
"axios": "0.16.2",
|
"axios": "0.16.2",
|
||||||
"follow-redirects": "1.4.1",
|
"follow-redirects": "1.4.1",
|
||||||
"node-fetch": "2.1.1",
|
"node-fetch": "2.1.2",
|
||||||
"core-js": "2.5.4",
|
"core-js": "2.5.4",
|
||||||
"regenerator-runtime": "0.11.1",
|
"regenerator-runtime": "0.11.1",
|
||||||
"pify": "3.0.0",
|
"lodash": "4.17.10",
|
||||||
"has-flag": "2.0.0",
|
|
||||||
"parse-json": "4.0.0",
|
"parse-json": "4.0.0",
|
||||||
"whatwg-fetch": "2.0.4",
|
|
||||||
"react": "16.3.1",
|
|
||||||
"breeze-nexttick": "0.2.1",
|
|
||||||
"isarray": "1.0.0",
|
"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"]
|
"workspaces": ["packages/*", "consoles/*", "bundle"]
|
||||||
}
|
}
|
||||||
|
|
58
yarn.lock
58
yarn.lock
|
@ -5285,10 +5285,18 @@ has-ansi@^2.0.0:
|
||||||
dependencies:
|
dependencies:
|
||||||
ansi-regex "^2.0.0"
|
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"
|
version "2.0.0"
|
||||||
resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-2.0.0.tgz#e8207af1cc7b30d446cc70b734b5e8be18f88d51"
|
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:
|
has-unicode@^2.0.0:
|
||||||
version "2.0.1"
|
version "2.0.1"
|
||||||
resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"
|
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"
|
version "4.3.0"
|
||||||
resolved "https://registry.yarnpkg.com/lodash.values/-/lodash.values-4.3.0.tgz#a3a6c2b0ebecc5c2cba1c17e6e620fe81b53d347"
|
resolved "https://registry.yarnpkg.com/lodash.values/-/lodash.values-4.3.0.tgz#a3a6c2b0ebecc5c2cba1c17e6e620fe81b53d347"
|
||||||
|
|
||||||
lodash@4.17.5:
|
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.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:
|
|
||||||
version "4.17.10"
|
version "4.17.10"
|
||||||
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.10.tgz#1b7793cf7259ea38fb3661d4d38b3260af8ae4e7"
|
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:
|
log-symbols@^2.2.0:
|
||||||
version "2.2.0"
|
version "2.2.0"
|
||||||
resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-2.2.0.tgz#5740e1c5d6f0dfda4ad9323b5332107ef6b4c40a"
|
resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-2.2.0.tgz#5740e1c5d6f0dfda4ad9323b5332107ef6b4c40a"
|
||||||
|
@ -7588,9 +7588,9 @@ node-dir@^0.1.10:
|
||||||
dependencies:
|
dependencies:
|
||||||
minimatch "^3.0.2"
|
minimatch "^3.0.2"
|
||||||
|
|
||||||
node-fetch@1.6.3, node-fetch@2.1.1, node-fetch@2.1.2, node-fetch@^1.0.1:
|
node-fetch@1.6.3, node-fetch@2.1.2, node-fetch@^1.0.1:
|
||||||
version "2.1.1"
|
version "2.1.2"
|
||||||
resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.1.1.tgz#369ca70b82f50c86496104a6c776d274f4e4a2d4"
|
resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.1.2.tgz#ab884e8e7e57e38a944753cec706f788d1768bb5"
|
||||||
|
|
||||||
node-forge@0.7.5:
|
node-forge@0.7.5:
|
||||||
version "0.7.5"
|
version "0.7.5"
|
||||||
|
@ -8149,7 +8149,11 @@ pez@4.x.x:
|
||||||
hoek "5.x.x"
|
hoek "5.x.x"
|
||||||
nigel "3.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"
|
version "3.0.0"
|
||||||
resolved "https://registry.yarnpkg.com/pify/-/pify-3.0.0.tgz#e5a4acd2c101fdf3d9a4d07f0dbc4db49dd28176"
|
resolved "https://registry.yarnpkg.com/pify/-/pify-3.0.0.tgz#e5a4acd2c101fdf3d9a4d07f0dbc4db49dd28176"
|
||||||
|
|
||||||
|
@ -10449,11 +10453,7 @@ styled-flex-component@^2.2.2:
|
||||||
dependencies:
|
dependencies:
|
||||||
styled-is "1.1.2"
|
styled-is "1.1.2"
|
||||||
|
|
||||||
styled-is@1.1.2:
|
styled-is@1.1.2, styled-is@1.1.3, 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:
|
|
||||||
version "1.1.3"
|
version "1.1.3"
|
||||||
resolved "https://registry.yarnpkg.com/styled-is/-/styled-is-1.1.3.tgz#09df6cb5aff33c91080cdb3bf4f687eac96b5839"
|
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"
|
version "1.0.1"
|
||||||
resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
|
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"
|
version "3.0.1"
|
||||||
resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.0.1.tgz#6544bba2dfda8c1cf17e629a3a305e2bb1fee6c1"
|
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:
|
v8flags@^2.1.1:
|
||||||
version "2.1.1"
|
version "2.1.1"
|
||||||
resolved "https://registry.yarnpkg.com/v8flags/-/v8flags-2.1.1.tgz#aab1a1fa30d45f88dd321148875ac02c0b55e5b4"
|
resolved "https://registry.yarnpkg.com/v8flags/-/v8flags-2.1.1.tgz#aab1a1fa30d45f88dd321148875ac02c0b55e5b4"
|
||||||
|
@ -11531,7 +11543,11 @@ whatwg-encoding@^1.0.1:
|
||||||
dependencies:
|
dependencies:
|
||||||
iconv-lite "0.4.19"
|
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"
|
version "2.0.4"
|
||||||
resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.4.tgz#dde6a5df315f9d39991aa17621853d720b85566f"
|
resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.4.tgz#dde6a5df315f9d39991aa17621853d720b85566f"
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue