@invisionag/iris-react-accordion - npm Package Compare versions

Comparing version 1.1.9 to 1.2.0

index.js

 // @flow
 import React from 'react';
+import type { Children } from 'react';
 import classnames from 'classnames';
-import type { Children } from 'react';
-import styles from './styles.scss';
+import {
+  animationDuration,
+  StyledAccordion,
+  StyledHeaderButton,
+  StyledInnerAccordion,
+  StyledOuterAccordion,
+} from './styles';
 
@@ -33,2 +39,4 @@ type Jsx = string | React$Element<any> | number | null;
 class Accordion extends React.Component<DefaultProps, Props, State> {
+  ref: HTMLElement;
+
   static defaultProps = {
@@ -62,3 +70,3 @@ startOpen: false,
         })),
-      parseInt(styles.animationduration, 10),
+      parseInt(open ? animationDuration : 0, 10),
     );
@@ -95,3 +103,3 @@ };
     ) : (
-      <button
+      <StyledHeaderButton
         className="iris-accordion__header"
@@ -102,5 +110,24 @@ type="submit"
         {this.renderHeader()}
-      </button>
+      </StyledHeaderButton>
     );
 
+  computeHeight = () => {
+    if (!this.ref) return 0;
+
+    // OPEN
+    if (this.state.open && !this.state.transitioning) {
+      return 'auto';
+    }
+    // OPENING
+    if (this.state.open && this.state.transitioning) {
+      return `${this.ref.clientHeight}px`;
+    }
+    // CLOSING
+    if (!this.state.open && this.state.transitioning) {
+      return `${this.ref.clientHeight}px`;
+    }
+    // CLOSED
+    return 0;
+  };
+
   render() {
@@ -120,15 +147,31 @@ const {
     } = this.props;
+    const newHeight = this.computeHeight();
 
-    const classes = classnames('iris-accordion', className, {
-      'iris-accordion--is-open': this.state.open,
-      'iris-accordion--is-transitioning': this.state.transitioning,
-    });
-
     return (
-      <div className={classes} {...rest}>
+      <StyledAccordion
+        className={classnames('iris-accordion', className)}
+        {...rest}
+      >
         {this.renderAccordionHeader()}
-        <div className="iris-accordion__outer">
-          <div className="iris-accordion__inner">{children}</div>
-        </div>
-      </div>
+        <StyledOuterAccordion
+          className="iris-accordion__outer"
+          transitioning={this.state.transitioning}
+          open={this.state.open}
+          newHeight={newHeight}
+        >
+          <StyledInnerAccordion
+            className="iris-accordion__inner"
+            transitioning={this.state.transitioning}
+            open={this.state.open}
+          >
+            <div
+              ref={ref => {
+                this.ref = ref;
+              }}
+            >
+              {children}
+            </div>
+          </StyledInnerAccordion>
+        </StyledOuterAccordion>
+      </StyledAccordion>
     );
@@ -135,0 +178,0 @@ }

index.test.js

 import React from 'react';
 import { mount } from 'enzyme';
-import toJson from 'enzyme-to-json';
 import Accordion from './';
@@ -9,4 +8,3 @@
     const component = mount(<Accordion heading="my heading">test</Accordion>);
-    const tree = toJson(component);
-    expect(tree).toMatchSnapshot();
+    expect(component).toMatchSnapshot();
   });
@@ -24,3 +22,3 @@
     component
-      .find('.iris-accordion__header')
+      .find('button[type="submit"]')
       .first()
@@ -46,3 +44,3 @@ .simulate('click', {});
       component
-        .find('.iris-accordion__header')
+        .find('button[type="submit"]')
         .first()
@@ -53,3 +51,3 @@ .text(),
     component
-      .find('.iris-accordion__header')
+      .find('button[type="submit"]')
       .first()
@@ -60,3 +58,3 @@ .simulate('click', {});
       component
-        .find('.iris-accordion__header')
+        .find('button[type="submit"]')
         .first()
@@ -63,0 +61,0 @@ .text(),

package.json

 {
   "name": "@invisionag/iris-react-accordion",
-  "version": "1.1.9",
+  "version": "1.2.0",
   "main": "index.js",
@@ -8,7 +8,5 @@ "repository": "[e-mail]:ivx/iris.git",
   "dependencies": {
-    "@invisionag/iris-colors": "^1.7.4",
-    "@invisionag/iris-settings": "^1.7.7",
-    "@invisionag/iris-tools": "^1.6.9",
-    "classnames": "^2.2.5"
+    "classnames": "^2.2.5",
+    "styled-components": "^2.1.2"
   }
 }

No alert changes

Improved metrics

Total package byte prevSize

18085

increased by76.8%

Dependency count

2

decreased by-50%

Lines of code

262

increased by38.62%

Dependency changes

• + Addedstyled-components@^2.1.2

• + Addedasap@2.0.6(transitive)

• + Addedbase64-js@1.5.1(transitive)

• + Addedbuffer@5.7.1(transitive)

• + Addedcamelize@1.0.1(transitive)

• + Addedcore-js@1.2.7(transitive)

• + Addedcss-color-keywords@1.0.0(transitive)

• + Addedcss-to-react-native@2.3.2(transitive)

• + Addedencoding@0.1.13(transitive)

• + Addedfbjs@0.8.18(transitive)

• + Addedhas-flag@1.0.0(transitive)

• + Addedhoist-non-react-statics@1.2.0(transitive)

• + Addediconv-lite@0.6.3(transitive)

• + Addedieee754@1.2.1(transitive)

• + Addedis-plain-object@2.0.4(transitive)

• + Addedis-stream@1.1.0(transitive)

• + Addedisobject@3.0.1(transitive)

• + Addedisomorphic-fetch@2.2.1(transitive)

• + Addedjs-tokens@4.0.0(transitive)

• + Addedloose-envify@1.4.0(transitive)

• + Addednode-fetch@1.7.3(transitive)

• + Addedobject-assign@4.1.1(transitive)

• + Addedpostcss-value-parser@3.3.1(transitive)

• + Addedpromise@7.3.1(transitive)

• + Addedprop-types@15.8.1(transitive)

• + Addedreact@16.14.0(transitive)

• + Addedreact-is@16.13.1(transitive)

• + Addedsafer-buffer@2.1.2(transitive)

• + Addedsetimmediate@1.0.5(transitive)

• + Addedstyled-components@2.4.1(transitive)

• + Addedstylis@3.5.4(transitive)

• + Addedsupports-color@3.2.3(transitive)

• + Addedua-parser-js@0.7.40(transitive)

• + Addedwhatwg-fetch@3.6.20(transitive)

• - Removed@invisionag/iris-colors@^1.7.4

• - Removed@invisionag/iris-settings@^1.7.7

• - Removed@invisionag/iris-tools@^1.6.9

• - Removed@invisionag/iris-colors@1.7.11(transitive)

• - Removed@invisionag/iris-settings@1.7.14(transitive)

• - Removed@invisionag/iris-tools@1.6.18(transitive)