Merge pull request #266 from dabapps/collapse-fixes-0.9.x

Collapse fixes 0.9.x
dabapps · Aug 10, 2018 · 3065d79 · 3065d79
2 parents 217e4fb + 4bfa654
commit 3065d79
Show file tree

Hide file tree

Showing 6 changed files with 208 additions and 56 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@dabapps/roe",
-  "version": "0.9.18",
+  "version": "0.9.19",
   "description": "A Collection of React Components for Project Development",
   "main": "dist/js/index.js",
   "types": "dist/js/index.d.ts",

diff --git a/src/ts/components/misc/collapse.examples.md b/src/ts/components/misc/collapse.examples.md
@@ -1,5 +1,7 @@
 #### Examples
 
+With lots of content:
+
 ```js
 class CollapseExample extends React.Component {
   constructor (props) {
@@ -45,3 +47,100 @@ class CollapseExample extends React.Component {
 
 <CollapseExample />
 ```
+
+With small content:
+
+```js
+class CollapseExample extends React.Component {
+  constructor (props) {
+    super(props);
+
+    this.state = {
+      open: false
+    };
+
+    this.onClickToggleCollapse = this.onClickToggleCollapse.bind(this);
+  }
+
+  onClickToggleCollapse () {
+    const { open } = this.state;
+
+    this.setState({
+      open: !open
+    });
+  }
+
+  render () {
+    const { open } = this.state;
+
+    return (
+      <div>
+        <Collapse
+          open={open}
+          maxCollapsedHeight={100}
+          fadeOut
+          fadeColor="#FFF"
+          fadeHeight={50}
+          animationDuration={200}
+        >
+          <DabIpsum count={1} />
+        </Collapse>
+        <Button className="primary margin-top-base" onClick={this.onClickToggleCollapse}>
+          {open ? 'Collapse' : 'Expand'}
+        </Button>
+      </div>
+    );
+  }
+}
+
+<CollapseExample />
+```
+
+With minimum height:
+
+```js
+class CollapseExample extends React.Component {
+  constructor (props) {
+    super(props);
+
+    this.state = {
+      open: false
+    };
+
+    this.onClickToggleCollapse = this.onClickToggleCollapse.bind(this);
+  }
+
+  onClickToggleCollapse () {
+    const { open } = this.state;
+
+    this.setState({
+      open: !open
+    });
+  }
+
+  render () {
+    const { open } = this.state;
+
+    return (
+      <div>
+        <Collapse
+          open={open}
+          maxCollapsedHeight={200}
+          minHeight={100}
+          fadeOut
+          fadeColor="#FFF"
+          fadeHeight={50}
+          animationDuration={200}
+        >
+          <DabIpsum count={1} />
+        </Collapse>
+        <Button className="primary margin-top-base" onClick={this.onClickToggleCollapse}>
+          {open ? 'Collapse' : 'Expand'}
+        </Button>
+      </div>
+    );
+  }
+}
+
+<CollapseExample />
+```
diff --git a/src/ts/components/misc/collapse.tsx b/src/ts/components/misc/collapse.tsx
@@ -27,7 +27,12 @@ export interface CollapseProps
    * Maximum height when collapsed
    * @default 0
    */
-  maxCollapsedHeight?: number;
+  maxCollapsedHeight?: number | string;
+  /**
+   * Minimum height
+   * @default auto
+   */
+  minHeight?: number | string;
   /**
    * Whether to fade out the content
    * @default false
@@ -52,7 +57,7 @@ export interface CollapseProps
 
 export interface CollapseState {
   // tslint:disable-line:no-unused-variable
-  height: number;
+  height: number | string;
   opened: boolean;
   opening: boolean;
 }
@@ -134,6 +139,7 @@ export class Collapse extends PureComponent<CollapseProps, CollapseState> {
       transparentColor = DEFAULT_TRANSPARENT_COLOR,
       open,
       maxCollapsedHeight,
+      minHeight = 'auto',
       animationDuration = DEFAULT_DURATION,
       component: Component = 'div',
       ...remainingProps
@@ -142,10 +148,11 @@ export class Collapse extends PureComponent<CollapseProps, CollapseState> {
     const { opening, opened, height } = this.state;
 
     const collapseStyle = {
-      height: opened ? 'auto' : height,
+      minHeight,
+      maxHeight: opened ? 'auto' : height,
       position: 'relative' as 'relative',
       overflow: 'hidden' as 'hidden',
-      transition: `ease-in-out ${animationDuration}ms height`,
+      transition: `ease-in-out ${animationDuration}ms max-height`,
     };
 
     const fadeStyle = {