feat(my-joy-beta): initial animations

packages/my-joy-beta/src/containers/create-instance/animatedWrapper.js

@@ -6,40 +6,55 @@ import ReactDOM from 'react-dom';
 
 const ANIMATION_TIME = 200;
 
-const Height = keyframes`
-  0% {
-    transform: scaleY(0);
-  }
-  100% {
-    transform: scaleY(1);
-  }
-`;
+function slideDown(el, timing) {
+  const { style } = el;
+  const INITIAL = 'initial';
+  const HIDDEN = 'hidden';
+  timing = timing || `${ANIMATION_TIME}ms ease`;
 
-const Animate = styled.div`
-  ${is('active')`
-    transform-origin: top;
-    animation: ${Height} ${ANIMATION_TIME}ms cubic-bezier(0.215, 0.610, 0.355, 1.000);
-    animation-fill-mode: both;
-  `};
-`;
+  // 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;
 
-const findPos = obj => {
-  let curtop = 0;
-  if (obj.offsetParent) {
-    do {
-      curtop += obj.offsetTop;
-    } while ((obj = obj.offsetParent));
-    return [curtop];
-  }
-};
+  // 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 (
-        <Animate active={this.props.match.params.step === this.props.step}>
+        <div
+          ref={w => {
+            this.wrapper = w;
+          }}>
           <WrappedComponent {...this.props} />
-        </Animate>
+        </div>
       );
     }
   };

packages/my-joy-beta/src/containers/create-instance/networks.js

@@ -31,6 +31,7 @@ export const Networks = ({
   step
 }) => (
   <Fragment>
+  {console.log(selected)}
     <Title id={step} onClick={!expanded && !proceeded && handleEdit} icon={<NetworkIcon />}>
       Networks
     </Title>
@@ -80,55 +81,14 @@ export const Networks = ({
     ) : null}
     <Margin bottom={4}>
       {expanded ? (
-        <Description>
-          Instances are automatically connected to a private fabric network, which is the best
-          choice for internal communication within your application. Data center networks are the
-          best choice for exposing your application to the public internet (if the data center
-          network is a public network).{' '}
-          <a target="__blank" href="https://docs.joyent.com/public-cloud/network/sdn">
-            Read more
-          </a>
-        </Description>
+        <Button type="button" disabled={!selected.length} onClick={handleNext}>
+          Next
+        </Button>
+      ) : proceeded ? (
+        <Button type="button" onClick={handleEdit} secondary>
+          Edit
+        </Button>
       ) : null}
-      {proceeded && !expanded ? (
-        <H3>
-          {selected.length} network{selected.length === 1 ? '' : 's'} added
-        </H3>
-      ) : null}
-      {loading && expanded ? <StatusLoader /> : null}
-      {!loading ? (
-        <ReduxForm form={FORM_NAME} destroyOnUnmount={false} forceUnregisterOnUnmount={true}>
-          {props => (
-            <form>
-              {networks.map(
-                ({ id, selected, infoExpanded, ...network }) =>
-                  !expanded && !selected ? null : (
-                    <Network
-                      key={id}
-                      id={id}
-                      selected={selected}
-                      infoExpanded={infoExpanded}
-                      small={!expanded && selected}
-                      onInfoClick={() => setInfoExpanded(id, !infoExpanded)}
-                      {...network}
-                    />
-                  )
-              )}
-            </form>
-          )}
-        </ReduxForm>
-      ) : null}
-      <Margin bottom={4}>
-        {expanded ? (
-          <Button type="button" disabled={!selected.length} onClick={handleNext}>
-            Next
-          </Button>
-        ) : proceeded ? (
-          <Button type="button" onClick={handleEdit} secondary>
-            Edit
-          </Button>
-        ) : null}
-      </Margin>
     </Margin>
   </Fragment>
 );