From fa6a6af1029229b06f081d8b66f0db293bdc59ec Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Wed, 20 Nov 2019 11:46:55 +0100 Subject: [PATCH] add support for unitless number --- docs/pages/api/collapse.md | 2 +- .../components/transitions/SimpleCollapse.js | 2 +- .../components/transitions/SimpleCollapse.tsx | 2 +- .../material-ui/src/Collapse/Collapse.d.ts | 2 +- packages/material-ui/src/Collapse/Collapse.js | 26 +++---------------- 5 files changed, 8 insertions(+), 26 deletions(-) diff --git a/docs/pages/api/collapse.md b/docs/pages/api/collapse.md index 3ccd8fd20b5fb9..87a983dde7e51c 100644 --- a/docs/pages/api/collapse.md +++ b/docs/pages/api/collapse.md @@ -28,7 +28,7 @@ It uses [react-transition-group](https://github.com/reactjs/react-transition-gro |:-----|:-----|:--------|:------------| | children | node | | The content node to be collapsed. | | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| collapsedHeight | string | '0px' | The height of the container when collapsed. | +| collapsedHeight | string
| number | '0px' | The height of the container when collapsed. | | component | elementType | 'div' | The component used for the root node. Either a string to use a DOM element or a component. | | in | bool | | If `true`, the component will transition in. | | timeout | number
| { enter?: number, exit?: number }
| 'auto' | duration.standard | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object.
Set to 'auto' to automatically calculate transition time based on height. | diff --git a/docs/src/pages/components/transitions/SimpleCollapse.js b/docs/src/pages/components/transitions/SimpleCollapse.js index 0e3c737309d6f2..aef64f14308cd6 100644 --- a/docs/src/pages/components/transitions/SimpleCollapse.js +++ b/docs/src/pages/components/transitions/SimpleCollapse.js @@ -48,7 +48,7 @@ export default function SimpleCollapse() { - + diff --git a/docs/src/pages/components/transitions/SimpleCollapse.tsx b/docs/src/pages/components/transitions/SimpleCollapse.tsx index 65fae8be87727a..4ffffe215e22a0 100644 --- a/docs/src/pages/components/transitions/SimpleCollapse.tsx +++ b/docs/src/pages/components/transitions/SimpleCollapse.tsx @@ -50,7 +50,7 @@ export default function SimpleCollapse() { - + diff --git a/packages/material-ui/src/Collapse/Collapse.d.ts b/packages/material-ui/src/Collapse/Collapse.d.ts index e47396102cab90..cedab407a13ce6 100644 --- a/packages/material-ui/src/Collapse/Collapse.d.ts +++ b/packages/material-ui/src/Collapse/Collapse.d.ts @@ -5,7 +5,7 @@ import { TransitionProps } from '../transitions/transition'; export interface CollapseProps extends StandardProps { children?: React.ReactNode; - collapsedHeight?: string; + collapsedHeight?: string | number; component?: React.ElementType; theme?: Theme; timeout?: TransitionProps['timeout'] | 'auto'; diff --git a/packages/material-ui/src/Collapse/Collapse.js b/packages/material-ui/src/Collapse/Collapse.js index 38966ef4bb5216..49b93b2b4288e1 100644 --- a/packages/material-ui/src/Collapse/Collapse.js +++ b/packages/material-ui/src/Collapse/Collapse.js @@ -44,7 +44,7 @@ const Collapse = React.forwardRef(function Collapse(props, ref) { children, classes, className, - collapsedHeight = '0px', + collapsedHeight: collapsedHeightProp = '0px', component: Component = 'div', in: inProp, onEnter, @@ -60,6 +60,8 @@ const Collapse = React.forwardRef(function Collapse(props, ref) { const timer = React.useRef(); const wrapperRef = React.useRef(null); const autoTransitionDuration = React.useRef(); + const collapsedHeight = + typeof collapsedHeightProp === 'number' ? `${collapsedHeightProp}px` : collapsedHeightProp; React.useEffect(() => { return () => { @@ -69,16 +71,6 @@ const Collapse = React.forwardRef(function Collapse(props, ref) { const handleEnter = (node, isAppearing) => { node.style.height = collapsedHeight; - if (process.env.NODE_ENV !== 'production') { - if (node.style.height !== collapsedHeight) { - console.error( - [ - 'Material-UI: the `collapsedHeight` prop is invalid.', - `You have provided ${collapsedHeight} but it requires units, e.g. '0px'.`, - ].join('\n'), - ); - } - } if (onEnter) { onEnter(node, isAppearing); @@ -148,16 +140,6 @@ const Collapse = React.forwardRef(function Collapse(props, ref) { } node.style.height = collapsedHeight; - if (process.env.NODE_ENV !== 'production') { - if (node.style.height !== collapsedHeight) { - console.error( - [ - 'Material-UI: the `collapsedHeight` prop is invalid.', - `You have provided ${collapsedHeight} but it requires units, e.g. '0px'.`, - ].join('\n'), - ); - } - } if (onExiting) { onExiting(node); @@ -225,7 +207,7 @@ Collapse.propTypes = { /** * The height of the container when collapsed. */ - collapsedHeight: PropTypes.string, + collapsedHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), /** * The component used for the root node. * Either a string to use a DOM element or a component.