Allow SlidingPane component to use any CSS size unit

demos/desktop-chat-app/frontend/src/components/SlidingPane/index.jsx

@@ -1,19 +1,22 @@
 import React, { useState, useCallback, useRef, useEffect } from 'react'
 import styled from 'styled-components'
+import { parser as cssMath } from 'css-math'
 
 const Container = styled.div`
     position: relative;
-    width: ${props => props.width}px;
-    height: ${props => props.height}px;
+    width: ${props => props.width};
+    height: ${props => props.height ? props.height : 'unset'};
+    // min-height: ${props => props.minHeight ? props.minHeight : 'unset'};
+    // max-height: ${props => props.maxHeight ? props.maxHeight : 'unset'};
     transition: all 0.4s cubic-bezier(0.86, 0.16, 0.16, 0.78);
     overflow: hidden;
 `
 
 const PaneWrapper = styled.div`
     position: absolute;
     top: 0;
-    left: ${props => props.left}px;
-    width: ${props => props.width}px;
+    left: ${props => props.left};
+    width: ${props => props.width};
     // transition: left 0.2s ease-in-out;
     transition: left 0.4s cubic-bezier(0.86, 0.16, 0.16, 0.78);
     display: flex;
@@ -37,10 +40,10 @@ export const PaneContent = styled.div`
 
 function SlidingPane({ panes, activePane, className }) {
     let pane = panes[activePane]
-    let totalWidth = panes.reduce((total, p) => total + p.width, 0)
-    let left = -panes.slice(0, activePane).reduce((total, p) => total + p.width, 0)
+    let totalWidth = panes.reduce((total, p) => cssMath(`${total} + ${p.width}`), '0px')
+    let left = panes.slice(0, activePane).reduce((total, p) => cssMath(`${total} - ${p.width}`), '0px')
     return (
-        <Container width={pane.width} height={pane.height} className={className}>
+        <Container width={pane.width} height={pane.height} minHeight={pane.minHeight} maxHeight={pane.maxHeight} className={className}>
             <PaneWrapper activePane={activePane} left={left} width={totalWidth}>
                 {panes.map(p => React.cloneElement(p.content, { style: { width: p.width, height: p.height } }))}
             </PaneWrapper>