feat(my-joy-beta): create instance step animations
This commit is contained in:
Sara Vieira
Sérgio Ramos
parent
18701442e1
commit
89bddf5c3f
|
|
@ -65,7 +65,7 @@
|
|||
"yargs": "^10.0.3"
|
||||
},
|
||||
"resolutions": {
|
||||
"styled-components": "3.1.3",
|
||||
"styled-components": "3.1.4",
|
||||
"axios": "0.16.2",
|
||||
"follow-redirects": "1.4.1",
|
||||
"debug": "3.1.0",
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
"dependencies": {
|
||||
"remcalc": "^1.0.10",
|
||||
"rnd-id": "^2.0.2",
|
||||
"styled-components": "^3.1.2"
|
||||
"styled-components": "^3.1.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-cli": "^6.26.0",
|
||||
|
|
|
|||
|
|
@ -55,7 +55,8 @@
|
|||
"redux-actions": "^2.2.1",
|
||||
"redux-form": "^7.2.1",
|
||||
"remcalc": "^1.0.10",
|
||||
"styled-components": "^3.1.2",
|
||||
"scroll-to-element": "^2.0.0",
|
||||
"styled-components": "^3.1.4",
|
||||
"styled-components-spacing": "^2.1.3",
|
||||
"styled-flex-component": "^2.1.0",
|
||||
"title-case": "^2.1.1"
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.2 KiB After Width: | Height: | Size: 9.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 31 KiB After Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 40 KiB After Width: | Height: | Size: 41 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 60 KiB After Width: | Height: | Size: 58 KiB |
|
|
@ -100,6 +100,7 @@ Array [
|
|||
|
||||
<div
|
||||
className=""
|
||||
id={undefined}
|
||||
onClick={undefined}
|
||||
>
|
||||
<div
|
||||
|
|
@ -257,6 +258,7 @@ Array [
|
|||
|
||||
<div
|
||||
className=""
|
||||
id={undefined}
|
||||
onClick={false}
|
||||
>
|
||||
<div
|
||||
|
|
@ -1789,6 +1791,7 @@ Array [
|
|||
|
||||
<div
|
||||
className=""
|
||||
id={undefined}
|
||||
onClick={false}
|
||||
>
|
||||
<div
|
||||
|
|
@ -2259,6 +2262,7 @@ Array [
|
|||
|
||||
<div
|
||||
className=""
|
||||
id={undefined}
|
||||
onClick={undefined}
|
||||
>
|
||||
<div
|
||||
|
|
@ -4614,6 +4618,7 @@ Array [
|
|||
|
||||
<div
|
||||
className=""
|
||||
id={undefined}
|
||||
onClick={false}
|
||||
>
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -100,6 +100,7 @@ Array [
|
|||
|
||||
<div
|
||||
className=""
|
||||
id={undefined}
|
||||
onClick={undefined}
|
||||
>
|
||||
<div
|
||||
|
|
@ -257,6 +258,7 @@ Array [
|
|||
|
||||
<div
|
||||
className=""
|
||||
id={undefined}
|
||||
onClick={undefined}
|
||||
>
|
||||
<div
|
||||
|
|
@ -413,6 +415,7 @@ Array [
|
|||
|
||||
<div
|
||||
className=""
|
||||
id={undefined}
|
||||
onClick={false}
|
||||
>
|
||||
<div
|
||||
|
|
@ -748,11 +751,6 @@ Array [
|
|||
background-color: rgb(59,70,204);
|
||||
border-radius: 0.25rem;
|
||||
border: solid 0.0625rem rgb(45,56,132);
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
color: rgb(216,216,216);
|
||||
background-color: rgb(250,250,250);
|
||||
border-color: rgb(216,216,216);
|
||||
}
|
||||
|
||||
.c1:focus {
|
||||
|
|
@ -781,23 +779,6 @@ Array [
|
|||
pointer-events: none;
|
||||
}
|
||||
|
||||
.c1:focus {
|
||||
background-color: rgb(250,250,250);
|
||||
border-color: rgb(216,216,216);
|
||||
}
|
||||
|
||||
.c1:hover {
|
||||
background-color: rgb(250,250,250);
|
||||
border-color: rgb(250,250,250);
|
||||
}
|
||||
|
||||
.c1:active,
|
||||
.c1:active:hover,
|
||||
.c1:active:focus {
|
||||
background-color: rgb(250,250,250);
|
||||
border-color: rgb(250,250,250);
|
||||
}
|
||||
|
||||
.c0 {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
|
@ -807,7 +788,6 @@ Array [
|
|||
>
|
||||
<button
|
||||
className="c1 c2 c3"
|
||||
disabled={true}
|
||||
href=""
|
||||
onClick={undefined}
|
||||
type="button"
|
||||
|
|
@ -918,6 +898,7 @@ Array [
|
|||
|
||||
<div
|
||||
className=""
|
||||
id={undefined}
|
||||
onClick={undefined}
|
||||
>
|
||||
<div
|
||||
|
|
@ -1075,6 +1056,7 @@ Array [
|
|||
|
||||
<div
|
||||
className=""
|
||||
id={undefined}
|
||||
onClick={false}
|
||||
>
|
||||
<div
|
||||
|
|
@ -1281,23 +1263,23 @@ Array [
|
|||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.c17 {
|
||||
.c16 {
|
||||
color: rgba(73,73,73,1);
|
||||
line-height: 1.5rem;
|
||||
font-size: 0.9375rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.c17 + p,
|
||||
.c17 + small,
|
||||
.c17 + h1,
|
||||
.c17 + h2,
|
||||
.c17 + label,
|
||||
.c17 + h3,
|
||||
.c17 + h4,
|
||||
.c17 + h5,
|
||||
.c17 + div,
|
||||
.c17 + span {
|
||||
.c16 + p,
|
||||
.c16 + small,
|
||||
.c16 + h1,
|
||||
.c16 + h2,
|
||||
.c16 + label,
|
||||
.c16 + h3,
|
||||
.c16 + h4,
|
||||
.c16 + h5,
|
||||
.c16 + div,
|
||||
.c16 + span {
|
||||
padding-bottom: 2.25rem;
|
||||
}
|
||||
|
||||
|
|
@ -1329,7 +1311,7 @@ Array [
|
|||
padding-left: 0.625rem;
|
||||
}
|
||||
|
||||
.c13 {
|
||||
.c12 {
|
||||
color: rgba(73,73,73,1);
|
||||
font-weight: 600;
|
||||
line-height: 1.5rem;
|
||||
|
|
@ -1337,20 +1319,20 @@ Array [
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
.c13 + p,
|
||||
.c13 + small,
|
||||
.c13 + h1,
|
||||
.c13 + h2,
|
||||
.c13 + label,
|
||||
.c13 + h3,
|
||||
.c13 + h4,
|
||||
.c13 + h5,
|
||||
.c13 + div,
|
||||
.c13 + span {
|
||||
.c12 + p,
|
||||
.c12 + small,
|
||||
.c12 + h1,
|
||||
.c12 + h2,
|
||||
.c12 + label,
|
||||
.c12 + h3,
|
||||
.c12 + h4,
|
||||
.c12 + h5,
|
||||
.c12 + div,
|
||||
.c12 + span {
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
.c31 {
|
||||
.c30 {
|
||||
color: rgba(73,73,73,1);
|
||||
font-weight: 600;
|
||||
line-height: 1.5rem;
|
||||
|
|
@ -1360,16 +1342,16 @@ Array [
|
|||
color: rgb(255,255,255);
|
||||
}
|
||||
|
||||
.c31 + p,
|
||||
.c31 + small,
|
||||
.c31 + h1,
|
||||
.c31 + h2,
|
||||
.c31 + label,
|
||||
.c31 + h3,
|
||||
.c31 + h4,
|
||||
.c31 + h5,
|
||||
.c31 + div,
|
||||
.c31 + span {
|
||||
.c30 + p,
|
||||
.c30 + small,
|
||||
.c30 + h1,
|
||||
.c30 + h2,
|
||||
.c30 + label,
|
||||
.c30 + h3,
|
||||
.c30 + h4,
|
||||
.c30 + h5,
|
||||
.c30 + div,
|
||||
.c30 + span {
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
|
|
@ -1547,7 +1529,7 @@ Array [
|
|||
color: inherit;
|
||||
}
|
||||
|
||||
.c14 {
|
||||
.c13 {
|
||||
box-sizing: content-box;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
|
|
@ -1583,15 +1565,15 @@ Array [
|
|||
background-color: transparent;
|
||||
}
|
||||
|
||||
.c14 > [name='card']:not(:last-child) {
|
||||
.c13 > [name='card']:not(:last-child) {
|
||||
margin-bottom: 0.8125rem;
|
||||
}
|
||||
|
||||
.c14 > [name='card']:last-child {
|
||||
.c13 > [name='card']:last-child {
|
||||
margin-bottom: 0.4375rem;
|
||||
}
|
||||
|
||||
.c24 {
|
||||
.c23 {
|
||||
box-sizing: content-box;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
|
|
@ -1619,7 +1601,7 @@ Array [
|
|||
flex: 0 0 2.875rem;
|
||||
}
|
||||
|
||||
.c25 {
|
||||
.c24 {
|
||||
box-sizing: content-box;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
|
|
@ -1657,12 +1639,12 @@ Array [
|
|||
box-shadow: none;
|
||||
}
|
||||
|
||||
.c25 button {
|
||||
.c24 button {
|
||||
margin-bottom: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.c26 {
|
||||
.c25 {
|
||||
box-sizing: content-box;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
|
|
@ -1721,7 +1703,7 @@ Array [
|
|||
color: inherit;
|
||||
}
|
||||
|
||||
.c28 {
|
||||
.c27 {
|
||||
box-sizing: content-box;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
|
|
@ -1759,12 +1741,12 @@ Array [
|
|||
margin: -0.0625rem -0.0625rem 0 -0.0625rem;
|
||||
}
|
||||
|
||||
.c28 button {
|
||||
.c27 button {
|
||||
margin-bottom: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.c29 {
|
||||
.c28 {
|
||||
box-sizing: content-box;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
|
|
@ -1820,7 +1802,7 @@ Array [
|
|||
box-shadow: none;
|
||||
}
|
||||
|
||||
.c30 {
|
||||
.c29 {
|
||||
box-sizing: content-box;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
|
|
@ -1956,7 +1938,7 @@ Array [
|
|||
-webkit-padding-after: 0;
|
||||
}
|
||||
|
||||
.c20 {
|
||||
.c19 {
|
||||
-webkit-order: 0;
|
||||
-ms-flex-order: 0;
|
||||
order: 0;
|
||||
|
|
@ -1972,7 +1954,7 @@ Array [
|
|||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
.c22 {
|
||||
.c21 {
|
||||
margin-right: 0.375rem;
|
||||
}
|
||||
|
||||
|
|
@ -1980,33 +1962,28 @@ Array [
|
|||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.c16 {
|
||||
.c15 {
|
||||
margin-bottom: 1.125rem;
|
||||
}
|
||||
|
||||
.c19 {
|
||||
.c18 {
|
||||
margin-right: 1.5rem;
|
||||
}
|
||||
|
||||
.c23 {
|
||||
.c22 {
|
||||
margin-top: 1.125rem;
|
||||
}
|
||||
|
||||
.c12 {
|
||||
padding-right: 0rem;
|
||||
padding-left: 0rem;
|
||||
}
|
||||
|
||||
.c15 {
|
||||
.c14 {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.c27 {
|
||||
.c26 {
|
||||
padding-right: 1.125rem;
|
||||
padding-left: 1.125rem;
|
||||
}
|
||||
|
||||
.c18 {
|
||||
.c17 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
|
|
@ -2026,7 +2003,7 @@ Array [
|
|||
align-content: stretch;
|
||||
}
|
||||
|
||||
.c21 {
|
||||
.c20 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
|
|
@ -2133,50 +2110,46 @@ Array [
|
|||
disabled={false}
|
||||
name="card-header-meta"
|
||||
>
|
||||
<div
|
||||
<h4
|
||||
className="c12"
|
||||
>
|
||||
<h4
|
||||
className="c13"
|
||||
>
|
||||
name
|
||||
</h4>
|
||||
</div>
|
||||
name
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="c14"
|
||||
className="c13"
|
||||
name="card-outlet"
|
||||
>
|
||||
<div
|
||||
className="c15"
|
||||
className="c14"
|
||||
>
|
||||
<div
|
||||
className="c16"
|
||||
className="c15"
|
||||
>
|
||||
<p
|
||||
className="c17"
|
||||
className="c16"
|
||||
>
|
||||
description
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
className="c18"
|
||||
className="c17"
|
||||
>
|
||||
<div
|
||||
className="c19"
|
||||
className="c18"
|
||||
>
|
||||
<div
|
||||
className="c20"
|
||||
className="c19"
|
||||
>
|
||||
<div
|
||||
className="c21"
|
||||
className="c20"
|
||||
>
|
||||
<div
|
||||
className="c20"
|
||||
className="c19"
|
||||
>
|
||||
<div
|
||||
className="c22"
|
||||
className="c21"
|
||||
>
|
||||
<svg
|
||||
className=""
|
||||
|
|
@ -2199,10 +2172,10 @@ Array [
|
|||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="c20"
|
||||
className="c19"
|
||||
>
|
||||
<p
|
||||
className="c17"
|
||||
className="c16"
|
||||
>
|
||||
Private
|
||||
</p>
|
||||
|
|
@ -2211,19 +2184,19 @@ Array [
|
|||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="c19"
|
||||
className="c18"
|
||||
>
|
||||
<div
|
||||
className="c20"
|
||||
className="c19"
|
||||
>
|
||||
<div
|
||||
className="c21"
|
||||
className="c20"
|
||||
>
|
||||
<div
|
||||
className="c20"
|
||||
className="c19"
|
||||
>
|
||||
<div
|
||||
className="c22"
|
||||
className="c21"
|
||||
>
|
||||
<svg
|
||||
height="16.2"
|
||||
|
|
@ -2239,10 +2212,10 @@ Array [
|
|||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="c20"
|
||||
className="c19"
|
||||
>
|
||||
<p
|
||||
className="c17"
|
||||
className="c16"
|
||||
>
|
||||
Fabric network
|
||||
</p>
|
||||
|
|
@ -2250,165 +2223,31 @@ Array [
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="c19"
|
||||
>
|
||||
<div
|
||||
className="c20"
|
||||
>
|
||||
<div
|
||||
className="c21"
|
||||
>
|
||||
<div
|
||||
className="c20"
|
||||
>
|
||||
<div
|
||||
className="c22"
|
||||
>
|
||||
<svg
|
||||
className=""
|
||||
height="17"
|
||||
innerRef={undefined}
|
||||
style={
|
||||
Object {
|
||||
"transform": "rotate(0deg)",
|
||||
}
|
||||
}
|
||||
version="1.1"
|
||||
viewBox="0 0 17 17"
|
||||
width="17"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlnsXlink="http://www.w3.org/1999/xlink"
|
||||
>
|
||||
<g
|
||||
transform="translate(-1105 974)"
|
||||
>
|
||||
<g>
|
||||
<g>
|
||||
<use
|
||||
fill="rgba(73, 73, 73, 1)"
|
||||
transform="translate(1105 -974)"
|
||||
xlinkHref="#c"
|
||||
/>
|
||||
</g>
|
||||
<g>
|
||||
<use
|
||||
fill="rgba(73, 73, 73, 1)"
|
||||
transform="translate(1111 -974)"
|
||||
xlinkHref="#c"
|
||||
/>
|
||||
</g>
|
||||
<g>
|
||||
<use
|
||||
fill="rgba(73, 73, 73, 1)"
|
||||
transform="translate(1117 -974)"
|
||||
xlinkHref="#c"
|
||||
/>
|
||||
</g>
|
||||
<g>
|
||||
<use
|
||||
fill="rgba(73, 73, 73, 1)"
|
||||
transform="translate(1105 -968)"
|
||||
xlinkHref="#c"
|
||||
/>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<use
|
||||
fill="rgba(73, 73, 73, 1)"
|
||||
transform="translate(1111 -968)"
|
||||
xlinkHref="#d"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<use
|
||||
fill="rgba(73, 73, 73, 1)"
|
||||
transform="translate(1117 -968)"
|
||||
xlinkHref="#d"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<use
|
||||
fill="rgba(73, 73, 73, 1)"
|
||||
transform="translate(1105 -962)"
|
||||
xlinkHref="#d"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<use
|
||||
fill="rgba(73, 73, 73, 1)"
|
||||
transform="translate(1111 -962)"
|
||||
xlinkHref="#d"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<use
|
||||
fill="rgba(73, 73, 73, 1)"
|
||||
transform="translate(1117 -962)"
|
||||
xlinkHref="#d"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<path
|
||||
d="M 2.5 5C 3.88071 5 5 3.88071 5 2.5C 5 1.11929 3.88071 0 2.5 0C 1.11929 0 0 1.11929 0 2.5C 0 3.88071 1.11929 5 2.5 5Z"
|
||||
id="c"
|
||||
/>
|
||||
<path
|
||||
d="M 2.5 1C 3.3 1 4 1.7 4 2.5C 4 3.3 3.3 4 2.5 4C 1.7 4 1 3.3 1 2.5C 1 1.7 1.7 1 2.5 1ZM 2.5 0C 1.1 0 0 1.1 0 2.5C 0 3.9 1.1 5 2.5 5C 3.9 5 5 3.9 5 2.5C 5 1.1 3.9 0 2.5 0Z"
|
||||
id="d"
|
||||
/>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="c20"
|
||||
>
|
||||
<p
|
||||
className="c17"
|
||||
>
|
||||
0 instances
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="c23"
|
||||
className="c22"
|
||||
>
|
||||
<div
|
||||
className="c24"
|
||||
className="c23"
|
||||
disabled={false}
|
||||
name="card"
|
||||
>
|
||||
<div
|
||||
className="c25"
|
||||
className="c24"
|
||||
disabled={false}
|
||||
name="card-header"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<div
|
||||
className="c26"
|
||||
className="c25"
|
||||
disabled={false}
|
||||
name="card-header-meta"
|
||||
>
|
||||
<div
|
||||
className="c27"
|
||||
className="c26"
|
||||
>
|
||||
<p
|
||||
className="c17"
|
||||
className="c16"
|
||||
>
|
||||
Network information
|
||||
</p>
|
||||
|
|
@ -2462,12 +2301,12 @@ Array [
|
|||
name="card"
|
||||
>
|
||||
<div
|
||||
className="c28"
|
||||
className="c27"
|
||||
disabled={false}
|
||||
name="card-header"
|
||||
>
|
||||
<div
|
||||
className="c29"
|
||||
className="c28"
|
||||
disabled={false}
|
||||
name="card-header-box"
|
||||
>
|
||||
|
|
@ -2505,54 +2344,50 @@ Array [
|
|||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="c30"
|
||||
className="c29"
|
||||
disabled={false}
|
||||
name="card-header-meta"
|
||||
>
|
||||
<div
|
||||
className="c12"
|
||||
<h4
|
||||
className="c30"
|
||||
>
|
||||
<h4
|
||||
className="c31"
|
||||
>
|
||||
name2
|
||||
</h4>
|
||||
</div>
|
||||
name2
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="c14"
|
||||
className="c13"
|
||||
name="card-outlet"
|
||||
>
|
||||
<div
|
||||
className="c15"
|
||||
className="c14"
|
||||
>
|
||||
<div
|
||||
className="c16"
|
||||
className="c15"
|
||||
>
|
||||
<p
|
||||
className="c17"
|
||||
className="c16"
|
||||
>
|
||||
description2
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
className="c18"
|
||||
className="c17"
|
||||
>
|
||||
<div
|
||||
className="c19"
|
||||
className="c18"
|
||||
>
|
||||
<div
|
||||
className="c20"
|
||||
className="c19"
|
||||
>
|
||||
<div
|
||||
className="c21"
|
||||
className="c20"
|
||||
>
|
||||
<div
|
||||
className="c20"
|
||||
className="c19"
|
||||
>
|
||||
<div
|
||||
className="c22"
|
||||
className="c21"
|
||||
>
|
||||
<svg
|
||||
className=""
|
||||
|
|
@ -2575,10 +2410,10 @@ Array [
|
|||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="c20"
|
||||
className="c19"
|
||||
>
|
||||
<p
|
||||
className="c17"
|
||||
className="c16"
|
||||
>
|
||||
Private
|
||||
</p>
|
||||
|
|
@ -2587,19 +2422,19 @@ Array [
|
|||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="c19"
|
||||
className="c18"
|
||||
>
|
||||
<div
|
||||
className="c20"
|
||||
className="c19"
|
||||
>
|
||||
<div
|
||||
className="c21"
|
||||
className="c20"
|
||||
>
|
||||
<div
|
||||
className="c20"
|
||||
className="c19"
|
||||
>
|
||||
<div
|
||||
className="c22"
|
||||
className="c21"
|
||||
>
|
||||
<svg
|
||||
height="13"
|
||||
|
|
@ -2615,10 +2450,10 @@ Array [
|
|||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="c20"
|
||||
className="c19"
|
||||
>
|
||||
<p
|
||||
className="c17"
|
||||
className="c16"
|
||||
>
|
||||
Data center network
|
||||
</p>
|
||||
|
|
@ -2709,11 +2544,6 @@ Array [
|
|||
background-color: rgb(59,70,204);
|
||||
border-radius: 0.25rem;
|
||||
border: solid 0.0625rem rgb(45,56,132);
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
color: rgb(216,216,216);
|
||||
background-color: rgb(250,250,250);
|
||||
border-color: rgb(216,216,216);
|
||||
}
|
||||
|
||||
.c1:focus {
|
||||
|
|
@ -2742,23 +2572,6 @@ Array [
|
|||
pointer-events: none;
|
||||
}
|
||||
|
||||
.c1:focus {
|
||||
background-color: rgb(250,250,250);
|
||||
border-color: rgb(216,216,216);
|
||||
}
|
||||
|
||||
.c1:hover {
|
||||
background-color: rgb(250,250,250);
|
||||
border-color: rgb(250,250,250);
|
||||
}
|
||||
|
||||
.c1:active,
|
||||
.c1:active:hover,
|
||||
.c1:active:focus {
|
||||
background-color: rgb(250,250,250);
|
||||
border-color: rgb(250,250,250);
|
||||
}
|
||||
|
||||
.c0 {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
|
@ -2768,7 +2581,6 @@ Array [
|
|||
>
|
||||
<button
|
||||
className="c1 c2 c3"
|
||||
disabled={true}
|
||||
href=""
|
||||
onClick={undefined}
|
||||
type="button"
|
||||
|
|
@ -2879,6 +2691,7 @@ Array [
|
|||
|
||||
<div
|
||||
className=""
|
||||
id={undefined}
|
||||
onClick={false}
|
||||
>
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -100,6 +100,7 @@ Array [
|
|||
|
||||
<div
|
||||
className=""
|
||||
id={undefined}
|
||||
onClick={undefined}
|
||||
>
|
||||
<div
|
||||
|
|
@ -250,6 +251,7 @@ Array [
|
|||
|
||||
<div
|
||||
className=""
|
||||
id={undefined}
|
||||
onClick={false}
|
||||
>
|
||||
<div
|
||||
|
|
@ -1755,6 +1757,7 @@ Array [
|
|||
|
||||
<div
|
||||
className=""
|
||||
id={undefined}
|
||||
onClick={false}
|
||||
>
|
||||
<div
|
||||
|
|
@ -2242,6 +2245,7 @@ Array [
|
|||
|
||||
<div
|
||||
className=""
|
||||
id={undefined}
|
||||
onClick={undefined}
|
||||
>
|
||||
<div
|
||||
|
|
@ -2392,6 +2396,7 @@ Array [
|
|||
|
||||
<div
|
||||
className=""
|
||||
id={undefined}
|
||||
onClick={false}
|
||||
>
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -100,6 +100,7 @@ Array [
|
|||
|
||||
<div
|
||||
className=""
|
||||
id={undefined}
|
||||
onClick={undefined}
|
||||
>
|
||||
<div
|
||||
|
|
@ -1214,6 +1215,7 @@ Array [
|
|||
|
||||
<div
|
||||
className=""
|
||||
id={undefined}
|
||||
onClick={undefined}
|
||||
>
|
||||
<div
|
||||
|
|
@ -2634,6 +2636,7 @@ Array [
|
|||
|
||||
<div
|
||||
className=""
|
||||
id={undefined}
|
||||
onClick={undefined}
|
||||
>
|
||||
<div
|
||||
|
|
@ -3090,6 +3093,7 @@ Array [
|
|||
|
||||
<div
|
||||
className=""
|
||||
id={undefined}
|
||||
onClick={undefined}
|
||||
>
|
||||
<div
|
||||
|
|
@ -4302,6 +4306,7 @@ Array [
|
|||
|
||||
<div
|
||||
className=""
|
||||
id={undefined}
|
||||
onClick={undefined}
|
||||
>
|
||||
<div
|
||||
|
|
@ -5656,6 +5661,7 @@ Array [
|
|||
|
||||
<div
|
||||
className=""
|
||||
id={undefined}
|
||||
onClick={undefined}
|
||||
>
|
||||
<div
|
||||
|
|
@ -7010,6 +7016,7 @@ Array [
|
|||
|
||||
<div
|
||||
className=""
|
||||
id={undefined}
|
||||
onClick={false}
|
||||
>
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -12,8 +12,9 @@ import { AffinityIcon, Button, H3, Divider } from 'joyent-ui-toolkit';
|
|||
|
||||
import Title from '@components/create-instance/title';
|
||||
import { Rule, Header } from '@components/create-instance/affinity';
|
||||
import Description from '@components/description';
|
||||
import KeyValue from '@components/key-value';
|
||||
import Description from '@components/description';
|
||||
import AnimatedWrapper from '@containers/create-instance/animatedWrapper';
|
||||
|
||||
const FORM_NAME_CREATE = 'CREATE-INSTANCE-AFFINITY-ADD';
|
||||
const FORM_NAME_EDIT = i => `CREATE-INSTANCE-AFFINITY-EDIT-${i}`;
|
||||
|
|
@ -43,10 +44,12 @@ export const Affinity = ({
|
|||
handleChangeAddOpen,
|
||||
handleNext,
|
||||
handleEdit,
|
||||
rule
|
||||
rule,
|
||||
step
|
||||
}) => (
|
||||
<Fragment>
|
||||
<Title
|
||||
id={step}
|
||||
onClick={!expanded && !proceeded && handleEdit}
|
||||
icon={<AffinityIcon />}
|
||||
>
|
||||
|
|
@ -149,6 +152,7 @@ export const Affinity = ({
|
|||
);
|
||||
|
||||
export default compose(
|
||||
AnimatedWrapper,
|
||||
connect(({ values, form }, ownProps) => ({
|
||||
proceeded: get(values, 'create-instance-affinity-proceeded', false),
|
||||
addOpen: get(values, 'create-instance-affinity-add-open', false),
|
||||
|
|
|
|||
|
|
@ -0,0 +1,60 @@
|
|||
import React, { Component } from 'react';
|
||||
import scrollToElement from 'scroll-to-element';
|
||||
import ReactDOM from 'react-dom';
|
||||
|
||||
const ANIMATION_TIME = 400;
|
||||
|
||||
function slideDown(el, timing) {
|
||||
const { style } = el;
|
||||
const INITIAL = 'initial';
|
||||
const HIDDEN = 'hidden';
|
||||
timing = timing || `${ANIMATION_TIME}ms ease-out`;
|
||||
|
||||
// Get element height
|
||||
style.transition = INITIAL;
|
||||
style.visibility = HIDDEN;
|
||||
style.maxHeight = INITIAL;
|
||||
const height = el.offsetHeight + 'px';
|
||||
style.removeProperty('visibility');
|
||||
style.maxHeight = '0';
|
||||
style.overflow = HIDDEN;
|
||||
|
||||
// Begin transition
|
||||
style.transition = `max-height ${timing}, opacity ${timing}`;
|
||||
|
||||
requestAnimationFrame(() => {
|
||||
style.maxHeight = height;
|
||||
style.opacity = '1';
|
||||
});
|
||||
|
||||
window.setTimeout(() => {
|
||||
style.removeProperty('overflow');
|
||||
style.removeProperty('max-height');
|
||||
}, 300);
|
||||
}
|
||||
|
||||
const AnimatedWrapper = WrappedComponent =>
|
||||
class AnimatedWrapper extends Component {
|
||||
componentDidUpdate() {
|
||||
const { match, step } = this.props;
|
||||
if (match.params.step === step) {
|
||||
slideDown(this.wrapper);
|
||||
scrollToElement(this.wrapper, {
|
||||
offset: -50
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div
|
||||
ref={w => {
|
||||
this.wrapper = w;
|
||||
}}
|
||||
>
|
||||
<WrappedComponent {...this.props} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
export default AnimatedWrapper;
|
||||
|
|
@ -14,6 +14,7 @@ import Cns, { Footer, AddServiceForm } from '@components/cns';
|
|||
import Tag from '@components/tags';
|
||||
import Title from '@components/create-instance/title';
|
||||
import Description from '@components/description';
|
||||
import AnimatedWrapper from '@containers/create-instance/animatedWrapper';
|
||||
import GetAccount from '@graphql/get-account.gql';
|
||||
|
||||
const CNS_FORM = 'create-instance-cns';
|
||||
|
|
@ -30,10 +31,15 @@ const CNSContainer = ({
|
|||
handleEdit,
|
||||
handleToggleCnsEnabled,
|
||||
handleAddService,
|
||||
handleRemoveService
|
||||
handleRemoveService,
|
||||
step
|
||||
}) => (
|
||||
<Fragment>
|
||||
<Title onClick={!expanded && !proceeded && handleEdit} icon={<CnsIcon />}>
|
||||
<Title
|
||||
id={step}
|
||||
onClick={!expanded && !proceeded && handleEdit}
|
||||
icon={<CnsIcon />}
|
||||
>
|
||||
Container Name Service
|
||||
</Title>
|
||||
{expanded ? (
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ import { StatusLoader, FirewallIcon, H3, Button } from 'joyent-ui-toolkit';
|
|||
import Title from '@components/create-instance/title';
|
||||
import Description from '@components/description';
|
||||
import FirewallForm from '@components/firewall';
|
||||
import AnimatedWrapper from '@containers/create-instance/animatedWrapper';
|
||||
import ListFwRules from '@graphql/list-fw-rules.gql';
|
||||
|
||||
const FORM_NAME = 'CREATE-INSTANCE-FIREWALL';
|
||||
|
|
@ -26,10 +27,12 @@ const Firewall = ({
|
|||
loading = false,
|
||||
enabled = false,
|
||||
handleNext,
|
||||
handleEdit
|
||||
handleEdit,
|
||||
step
|
||||
}) => (
|
||||
<Fragment>
|
||||
<Title
|
||||
id={step}
|
||||
onClick={!expanded && !proceeded && handleEdit}
|
||||
icon={<FirewallIcon />}
|
||||
>
|
||||
|
|
@ -94,6 +97,7 @@ const Firewall = ({
|
|||
);
|
||||
|
||||
export default compose(
|
||||
AnimatedWrapper,
|
||||
connect(
|
||||
({ form, values }, ownProps) => ({
|
||||
...ownProps,
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ import { InstanceTypeIcon, StatusLoader, Button } from 'joyent-ui-toolkit';
|
|||
import Description from '@components/description';
|
||||
import Image, { Preview, ImageType } from '@components/create-instance/image';
|
||||
import Title from '@components/create-instance/title';
|
||||
import AnimatedWrapper from '@containers/create-instance/animatedWrapper';
|
||||
import imageData from '@data/images-map.json';
|
||||
import GetImages from '@graphql/get-images.gql';
|
||||
|
||||
|
|
@ -29,10 +30,12 @@ const ImageContainer = ({
|
|||
handleSelectLatest,
|
||||
loading,
|
||||
images,
|
||||
vms
|
||||
vms,
|
||||
step
|
||||
}) => (
|
||||
<Fragment>
|
||||
<Title
|
||||
id={step}
|
||||
onClick={!expanded && !image.id && handleEdit}
|
||||
icon={<InstanceTypeIcon />}
|
||||
>
|
||||
|
|
@ -103,6 +106,7 @@ const ImageContainer = ({
|
|||
);
|
||||
|
||||
export default compose(
|
||||
AnimatedWrapper,
|
||||
connect(
|
||||
({ form, values }, ownProps) => {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -36,21 +36,42 @@ const CreateInstance = ({ step, disabled, handleSubmit, history, match }) => (
|
|||
<H2>Create Instances</H2>
|
||||
</Margin>
|
||||
<Margin bottom={4}>
|
||||
<Name history={history} match={match} expanded={step === 'name'} />
|
||||
<Name
|
||||
history={history}
|
||||
match={match}
|
||||
step="name"
|
||||
expanded={step === 'name'}
|
||||
/>
|
||||
</Margin>
|
||||
<Margin bottom={4}>
|
||||
<Image history={history} match={match} expanded={step === 'image'} />
|
||||
<Image
|
||||
history={history}
|
||||
match={match}
|
||||
step="image"
|
||||
expanded={step === 'image'}
|
||||
/>
|
||||
</Margin>
|
||||
<Margin bottom={4}>
|
||||
<Package history={history} match={match} expanded={step === 'package'} />
|
||||
<Package
|
||||
history={history}
|
||||
match={match}
|
||||
step="package"
|
||||
expanded={step === 'package'}
|
||||
/>
|
||||
</Margin>
|
||||
<Margin bottom={4}>
|
||||
<Tags history={history} match={match} expanded={step === 'tags'} />
|
||||
<Tags
|
||||
history={history}
|
||||
match={match}
|
||||
step="tags"
|
||||
expanded={step === 'tags'}
|
||||
/>
|
||||
</Margin>
|
||||
<Margin bottom={4}>
|
||||
<Metadata
|
||||
history={history}
|
||||
match={match}
|
||||
step="metadata"
|
||||
expanded={step === 'metadata'}
|
||||
/>
|
||||
</Margin>
|
||||
|
|
@ -58,6 +79,7 @@ const CreateInstance = ({ step, disabled, handleSubmit, history, match }) => (
|
|||
<UserScript
|
||||
history={history}
|
||||
match={match}
|
||||
step="user-script"
|
||||
expanded={step === 'user-script'}
|
||||
/>
|
||||
</Margin>
|
||||
|
|
@ -65,6 +87,7 @@ const CreateInstance = ({ step, disabled, handleSubmit, history, match }) => (
|
|||
<Networks
|
||||
history={history}
|
||||
match={match}
|
||||
step="networks"
|
||||
expanded={step === 'networks'}
|
||||
/>
|
||||
</Margin>
|
||||
|
|
@ -72,16 +95,23 @@ const CreateInstance = ({ step, disabled, handleSubmit, history, match }) => (
|
|||
<Firewall
|
||||
history={history}
|
||||
match={match}
|
||||
step="firewall"
|
||||
expanded={step === 'firewall'}
|
||||
/>
|
||||
</Margin>
|
||||
<Margin bottom={4}>
|
||||
<CNS history={history} match={match} expanded={step === 'cns'} />
|
||||
<CNS
|
||||
history={history}
|
||||
match={match}
|
||||
step="cns"
|
||||
expanded={step === 'cns'}
|
||||
/>
|
||||
</Margin>
|
||||
<Margin bottom={4}>
|
||||
<Affinity
|
||||
history={history}
|
||||
match={match}
|
||||
step="affinity"
|
||||
expanded={step === 'affinity'}
|
||||
/>
|
||||
</Margin>
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ import { MetadataIcon, Button, H3 } from 'joyent-ui-toolkit';
|
|||
import Title from '@components/create-instance/title';
|
||||
import Description from '@components/description';
|
||||
import KeyValue from '@components/key-value';
|
||||
import AnimatedWrapper from '@containers/create-instance/animatedWrapper';
|
||||
|
||||
const FORM_NAME_CREATE = 'CREATE-INSTANCE-METADATA-ADD';
|
||||
const FORM_NAME_EDIT = i => `CREATE-INSTANCE-METADATA-EDIT-${i}`;
|
||||
|
|
@ -28,10 +29,13 @@ export const Metadata = ({
|
|||
handleCancelEdit,
|
||||
handleChangeAddOpen,
|
||||
handleNext,
|
||||
handleEdit
|
||||
handleEdit,
|
||||
id,
|
||||
step
|
||||
}) => (
|
||||
<Fragment>
|
||||
<Title
|
||||
id={step}
|
||||
onClick={!expanded && !proceeded && handleEdit}
|
||||
icon={<MetadataIcon />}
|
||||
>
|
||||
|
|
@ -129,6 +133,7 @@ export const Metadata = ({
|
|||
);
|
||||
|
||||
export default compose(
|
||||
AnimatedWrapper,
|
||||
connect(({ values }, ownProps) => ({
|
||||
proceeded: get(values, 'create-instance-metadata-proceeded', false),
|
||||
addOpen: get(values, 'create-instance-metadata-add-open', false),
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ import { NameIcon, H3, Button } from 'joyent-ui-toolkit';
|
|||
import Name from '@components/create-instance/name';
|
||||
import Description from '@components/description';
|
||||
import Title from '@components/create-instance/title';
|
||||
import AnimatedWrapper from '@containers/create-instance/animatedWrapper';
|
||||
import GetInstance from '@graphql/get-instance-small.gql';
|
||||
import GetRandomName from '@graphql/get-random-name.gql';
|
||||
import { client } from '@state/store';
|
||||
|
|
@ -30,10 +31,15 @@ const NameContainer = ({
|
|||
shouldAsyncValidate,
|
||||
handleNext,
|
||||
handleRandomize,
|
||||
handleEdit
|
||||
handleEdit,
|
||||
step
|
||||
}) => (
|
||||
<Fragment>
|
||||
<Title onClick={!expanded && !name && handleEdit} icon={<NameIcon />}>
|
||||
<Title
|
||||
id={step}
|
||||
onClick={!expanded && !name && handleEdit}
|
||||
icon={<NameIcon />}
|
||||
>
|
||||
Instance name
|
||||
</Title>
|
||||
{expanded ? (
|
||||
|
|
@ -73,6 +79,7 @@ const NameContainer = ({
|
|||
);
|
||||
|
||||
export default compose(
|
||||
AnimatedWrapper,
|
||||
graphql(GetRandomName, {
|
||||
fetchPolicy: 'network-only',
|
||||
props: ({ data }) => ({
|
||||
|
|
|
|||
|
|
@ -10,9 +10,10 @@ import get from 'lodash.get';
|
|||
|
||||
import { NetworkIcon, Button, H3, StatusLoader } from 'joyent-ui-toolkit';
|
||||
|
||||
import Network from '@components/network';
|
||||
import Description from '@components/description';
|
||||
import Title from '@components/create-instance/title';
|
||||
import Network from '@components/create-instance/network';
|
||||
import AnimatedWrapper from '@containers/create-instance/animatedWrapper';
|
||||
import ListNetworks from '@graphql/list-networks.gql';
|
||||
|
||||
const FORM_NAME = 'CREATE-INSTANCE-NETWORKS';
|
||||
|
|
@ -26,10 +27,12 @@ export const Networks = ({
|
|||
setInfoExpanded,
|
||||
setMachinesExpanded,
|
||||
handleNext,
|
||||
handleEdit
|
||||
handleEdit,
|
||||
step
|
||||
}) => (
|
||||
<Fragment>
|
||||
<Title
|
||||
id={step}
|
||||
onClick={!expanded && !proceeded && handleEdit}
|
||||
icon={<NetworkIcon />}
|
||||
>
|
||||
|
|
@ -88,7 +91,7 @@ export const Networks = ({
|
|||
) : null}
|
||||
<Margin bottom={4}>
|
||||
{expanded ? (
|
||||
<Button type="button" disabled={!selected.length} onClick={handleNext}>
|
||||
<Button type="button" onClick={handleNext}>
|
||||
Next
|
||||
</Button>
|
||||
) : proceeded ? (
|
||||
|
|
@ -101,6 +104,7 @@ export const Networks = ({
|
|||
);
|
||||
|
||||
export default compose(
|
||||
AnimatedWrapper,
|
||||
graphql(ListNetworks, {
|
||||
props: ({ data }) => {
|
||||
const { networks = [], loading = false, error = null, refetch } = data;
|
||||
|
|
@ -142,8 +146,22 @@ export default compose(
|
|||
|
||||
return {
|
||||
proceeded: get(values, 'create-instance-networks-proceeded', false),
|
||||
selected: _networks.filter(({ selected }) => selected),
|
||||
networks: _networks
|
||||
networks: networks
|
||||
.map(({ id, name, ...network }) => ({
|
||||
...network,
|
||||
name,
|
||||
selected:
|
||||
empty(id) && name === 'Joyent-SDC-Public'
|
||||
? true
|
||||
: Boolean(selected[id]),
|
||||
infoExpanded: get(
|
||||
values,
|
||||
`create-instance-networks-${id}-expanded`,
|
||||
false
|
||||
),
|
||||
id
|
||||
}))
|
||||
.sort((a, b) => a.name < b.name)
|
||||
};
|
||||
},
|
||||
(dispatch, { history }) => ({
|
||||
|
|
|
|||
|
|
@ -13,7 +13,6 @@ import constantCase from 'constant-case';
|
|||
import { reset } from 'redux-form';
|
||||
|
||||
import { PackageIcon, StatusLoader } from 'joyent-ui-toolkit';
|
||||
|
||||
import {
|
||||
Filters,
|
||||
Packages,
|
||||
|
|
@ -21,6 +20,7 @@ import {
|
|||
Overview
|
||||
} from '@components/create-instance/package';
|
||||
|
||||
import AnimatedWrapper from '@containers/create-instance/animatedWrapper';
|
||||
import Title from '@components/create-instance/title';
|
||||
import Description from '@components/description';
|
||||
import getPackages from '@graphql/get-packages.gql';
|
||||
|
|
@ -40,10 +40,12 @@ const PackageContainer = ({
|
|||
sortOrder,
|
||||
handleSortBy,
|
||||
sortBy,
|
||||
resetFilters
|
||||
resetFilters,
|
||||
step
|
||||
}) => (
|
||||
<Fragment>
|
||||
<Title
|
||||
id={step}
|
||||
onClick={!expanded && !selected.id && handleEdit}
|
||||
icon={<PackageIcon />}
|
||||
>
|
||||
|
|
@ -117,6 +119,7 @@ const PackageContainer = ({
|
|||
);
|
||||
|
||||
export default compose(
|
||||
AnimatedWrapper,
|
||||
graphql(getPackages, {
|
||||
props: ({ data: { loading, packages = [] } }) => ({
|
||||
loading,
|
||||
|
|
|
|||
|
|
@ -10,9 +10,10 @@ import get from 'lodash.get';
|
|||
import { TagsIcon, Button, H3, TagList } from 'joyent-ui-toolkit';
|
||||
|
||||
import Title from '@components/create-instance/title';
|
||||
import Tag from '@components/tags';
|
||||
import KeyValue from '@components/key-value';
|
||||
import Description from '@components/description';
|
||||
import Tag from '@components/tags';
|
||||
import AnimatedWrapper from '@containers/create-instance/animatedWrapper';
|
||||
|
||||
const FORM_NAME_CREATE = 'CREATE-INSTANCE-TAGS-ADD';
|
||||
const FORM_NAME_EDIT = i => `CREATE-INSTANCE-TAGS-EDIT-${i}`;
|
||||
|
|
@ -29,10 +30,15 @@ export const Tags = ({
|
|||
handleCancelEdit,
|
||||
handleChangeAddOpen,
|
||||
handleNext,
|
||||
step,
|
||||
handleEdit
|
||||
}) => (
|
||||
<Fragment>
|
||||
<Title onClick={!expanded && !proceeded && handleEdit} icon={<TagsIcon />}>
|
||||
<Title
|
||||
id={step}
|
||||
onClick={!expanded && !proceeded && handleEdit}
|
||||
icon={<TagsIcon />}
|
||||
>
|
||||
Tags
|
||||
</Title>
|
||||
{expanded ? (
|
||||
|
|
@ -114,6 +120,7 @@ export const Tags = ({
|
|||
);
|
||||
|
||||
export default compose(
|
||||
AnimatedWrapper,
|
||||
connect(({ values }, ownProps) => ({
|
||||
proceeded: get(values, 'create-instance-tags-proceeded', false),
|
||||
addOpen: get(values, 'create-instance-tags-add-open', false),
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ import { ScriptIcon, Button } from 'joyent-ui-toolkit';
|
|||
import KeyValue from '@components/key-value';
|
||||
import Description from '@components/description';
|
||||
import Title from '@components/create-instance/title';
|
||||
import AnimatedWrapper from '@containers/create-instance/animatedWrapper';
|
||||
|
||||
const FORM_NAME = 'create-instance-user-script';
|
||||
|
||||
|
|
@ -26,10 +27,11 @@ export const UserScript = ({
|
|||
handleSubmit,
|
||||
handleRemove,
|
||||
handleNext,
|
||||
handleEdit
|
||||
handleEdit,
|
||||
step
|
||||
}) => (
|
||||
<Fragment>
|
||||
<Title onClick={!proceeded && handleEdit} icon={<ScriptIcon />}>
|
||||
<Title id={step} onClick={!proceeded && handleEdit} icon={<ScriptIcon />}>
|
||||
User Script
|
||||
</Title>
|
||||
{expanded ? (
|
||||
|
|
@ -90,6 +92,7 @@ export const UserScript = ({
|
|||
);
|
||||
|
||||
export default compose(
|
||||
AnimatedWrapper,
|
||||
connect(
|
||||
({ values }, ownProps) => {
|
||||
const script = get(values, 'create-instance-user-script', {
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 30 KiB After Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 42 KiB After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 48 KiB After Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 38 KiB After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.1 KiB After Width: | Height: | Size: 9.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
|
|
@ -3,5 +3,6 @@ module.exports = {
|
|||
'^redux-form$': '<rootDir>/src/mocks/redux-form',
|
||||
'^react-responsive$': '<rootDir>/src/mocks/react-responsive',
|
||||
'^react-router-dom$': '<rootDir>/src/mocks/react-router-dom',
|
||||
'^declarative-redux-form$': '<rootDir>/src/mocks/declarative-redux-form'
|
||||
'^declarative-redux-form$': '<rootDir>/src/mocks/declarative-redux-form',
|
||||
'^scroll-to-element': '<rootDir>/src/mocks/scroll-to-element'
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
export default () => null;
|
||||
|
|
@ -38,7 +38,7 @@
|
|||
"react-styled-flexboxgrid": "^2.1.1",
|
||||
"remcalc": "^1.0.10",
|
||||
"rnd-id": "^2.0.2",
|
||||
"styled-components": "^3.1.2",
|
||||
"styled-components": "^3.1.4",
|
||||
"styled-is": "^1.1.2",
|
||||
"unitcalc": "^1.1.2"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
"react-scripts": "1.0.17",
|
||||
"redux": "^3.7.2",
|
||||
"redux-form": "^7.1.2",
|
||||
"styled-components": "^2.3.0"
|
||||
"styled-components": "^3.1.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-preset-joyent-portal": "^6.0.1",
|
||||
|
|
|
|||
54
yarn.lock
54
yarn.lock
|
|
@ -2565,10 +2565,41 @@ compare-func@^1.3.1:
|
|||
array-ify "^1.0.0"
|
||||
dot-prop "^3.0.0"
|
||||
|
||||
component-clone@0.2.2:
|
||||
version "0.2.2"
|
||||
resolved "https://registry.yarnpkg.com/component-clone/-/component-clone-0.2.2.tgz#c7f5979822880fad8cfb0962ba29186d061ee04f"
|
||||
dependencies:
|
||||
component-type "*"
|
||||
|
||||
component-emitter@1.2.0:
|
||||
version "1.2.0"
|
||||
resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.2.0.tgz#ccd113a86388d06482d03de3fc7df98526ba8efe"
|
||||
|
||||
component-emitter@^1.2.1:
|
||||
version "1.2.1"
|
||||
resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.2.1.tgz#137918d6d78283f7df7a6b7c5a63e140e69425e6"
|
||||
|
||||
component-raf@1.2.0:
|
||||
version "1.2.0"
|
||||
resolved "https://registry.yarnpkg.com/component-raf/-/component-raf-1.2.0.tgz#b2bc72d43f1b014fde7a4b3c447c764bc73ccbaa"
|
||||
|
||||
component-tween@1.2.0:
|
||||
version "1.2.0"
|
||||
resolved "https://registry.yarnpkg.com/component-tween/-/component-tween-1.2.0.tgz#cc39ce5dbab05b52825f41d1947638a0b01b2b8a"
|
||||
dependencies:
|
||||
component-clone "0.2.2"
|
||||
component-emitter "1.2.0"
|
||||
component-type "1.1.0"
|
||||
ease-component "1.0.0"
|
||||
|
||||
component-type@*:
|
||||
version "1.2.1"
|
||||
resolved "https://registry.yarnpkg.com/component-type/-/component-type-1.2.1.tgz#8a47901700238e4fc32269771230226f24b415a9"
|
||||
|
||||
component-type@1.1.0:
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/component-type/-/component-type-1.1.0.tgz#95b666aad53e5c8d1f2be135c45b5d499197c0c5"
|
||||
|
||||
compressible@~2.0.11:
|
||||
version "2.0.12"
|
||||
resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.12.tgz#c59a5c99db76767e9876500e271ef63b3493bd66"
|
||||
|
|
@ -3518,6 +3549,10 @@ duplicate-package-checker-webpack-plugin@^2.1.0:
|
|||
lodash "^4.17.4"
|
||||
semver "^5.4.1"
|
||||
|
||||
ease-component@1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/ease-component/-/ease-component-1.0.0.tgz#b375726db0b5b04595b77440396fec7daa5d77c9"
|
||||
|
||||
ecc-jsbn@~0.1.1:
|
||||
version "0.1.1"
|
||||
resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz#0fc73a9ed5f0d53c38193398523ef7e543777505"
|
||||
|
|
@ -9694,6 +9729,19 @@ schema-utils@^0.4.2:
|
|||
ajv "^5.0.0"
|
||||
ajv-keywords "^2.1.0"
|
||||
|
||||
scroll-to-element@^2.0.0:
|
||||
version "2.0.0"
|
||||
resolved "https://registry.yarnpkg.com/scroll-to-element/-/scroll-to-element-2.0.0.tgz#3467330e3384743b7295ac64b30279990c5ac164"
|
||||
dependencies:
|
||||
scroll-to "0.0.2"
|
||||
|
||||
scroll-to@0.0.2:
|
||||
version "0.0.2"
|
||||
resolved "https://registry.yarnpkg.com/scroll-to/-/scroll-to-0.0.2.tgz#936d398a9133660a2492145c2c0081dfcb0728f3"
|
||||
dependencies:
|
||||
component-raf "1.2.0"
|
||||
component-tween "1.2.0"
|
||||
|
||||
select-hose@^2.0.0:
|
||||
version "2.0.0"
|
||||
resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
|
||||
|
|
@ -10306,9 +10354,9 @@ styled-components-spacing@^2.1.3:
|
|||
react-create-component-from-tag-prop "^1.2.1"
|
||||
styled-components-breakpoint "^1.0.0-preview.3"
|
||||
|
||||
styled-components@2.2.4, styled-components@3.1.3, styled-components@^3.1.2:
|
||||
version "3.1.3"
|
||||
resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-3.1.3.tgz#dae16953fdfc694b7341c43934145c360da0accb"
|
||||
styled-components@2.2.4, styled-components@3.1.4, styled-components@^3.1.4:
|
||||
version "3.1.4"
|
||||
resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-3.1.4.tgz#1bdc1409c9bacafee3510c573d23b73039b0d875"
|
||||
dependencies:
|
||||
buffer "^5.0.3"
|
||||
css-to-react-native "^2.0.3"
|
||||
|
|
|
|||
Loading…
Reference in New Issue