From 66ea03b54f12554baaed0414b2922e00ab96ad62 Mon Sep 17 00:00:00 2001 From: Peter Hellstrand Date: Tue, 9 Apr 2024 20:57:28 +0200 Subject: [PATCH 1/4] feat(ffe-form-react): use new version Collapse --- packages/ffe-form-react/src/Tooltip.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ffe-form-react/src/Tooltip.js b/packages/ffe-form-react/src/Tooltip.js index f7c89f41ea..a7270e6e7f 100644 --- a/packages/ffe-form-react/src/Tooltip.js +++ b/packages/ffe-form-react/src/Tooltip.js @@ -1,7 +1,7 @@ import React, { useState, useRef } from 'react'; import { bool, func, node, string, number } from 'prop-types'; import classNames from 'classnames'; -import Collapse from '@sb1/ffe-collapse-react'; +import { Collapse } from '@sb1/ffe-collapse-react'; import { v4 as uuid } from 'uuid'; const Tooltip = React.forwardRef( From 79027a3bfdc8e729927506f27b969f66c83f9399 Mon Sep 17 00:00:00 2001 From: Peter Hellstrand Date: Tue, 9 Apr 2024 20:57:43 +0200 Subject: [PATCH 2/4] feat(ffe-accordion-react): use new version Collapse --- packages/ffe-accordion-react/src/AccordionItem.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ffe-accordion-react/src/AccordionItem.js b/packages/ffe-accordion-react/src/AccordionItem.js index 59e512ffc3..da6fabd404 100644 --- a/packages/ffe-accordion-react/src/AccordionItem.js +++ b/packages/ffe-accordion-react/src/AccordionItem.js @@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState } from 'react'; import { bool, func, node, string } from 'prop-types'; import { v4 as uuid } from 'uuid'; import { Icon } from '@sb1/ffe-icons-react'; -import Collapse from '@sb1/ffe-collapse-react'; +import { Collapse } from '@sb1/ffe-collapse-react'; import classNames from 'classnames'; const AccordionItem = ({ From b9c12ac572971f10190e8bb031fc76e45d3405c6 Mon Sep 17 00:00:00 2001 From: Peter Hellstrand Date: Tue, 9 Apr 2024 20:58:40 +0200 Subject: [PATCH 3/4] feat(component-overview): update examples new Collapse --- component-overview/examples/buttons/InlineExpandButton.jsx | 2 +- component-overview/examples/collapse/Collapse-onRest.jsx | 2 +- component-overview/examples/collapse/Collapse.jsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/component-overview/examples/buttons/InlineExpandButton.jsx b/component-overview/examples/buttons/InlineExpandButton.jsx index cadde6c37e..00d3cdd393 100644 --- a/component-overview/examples/buttons/InlineExpandButton.jsx +++ b/component-overview/examples/buttons/InlineExpandButton.jsx @@ -1,6 +1,6 @@ import { useState } from 'react'; import { InlineExpandButton } from '@sb1/ffe-buttons-react'; -import Collapse from '@sb1/ffe-collapse-react'; +import { Collapse } from '@sb1/ffe-collapse-react'; import { Paragraph } from '@sb1/ffe-core-react'; () => { diff --git a/component-overview/examples/collapse/Collapse-onRest.jsx b/component-overview/examples/collapse/Collapse-onRest.jsx index 160cdd48f5..5e7c730670 100644 --- a/component-overview/examples/collapse/Collapse-onRest.jsx +++ b/component-overview/examples/collapse/Collapse-onRest.jsx @@ -1,5 +1,5 @@ import { useState } from 'react'; -import Collapse from '@sb1/ffe-collapse-react'; +import { Collapse } from '@sb1/ffe-collapse-react'; import { ExpandButton } from '@sb1/ffe-buttons-react'; () => { diff --git a/component-overview/examples/collapse/Collapse.jsx b/component-overview/examples/collapse/Collapse.jsx index d4da237a43..4b8f8e2dbb 100644 --- a/component-overview/examples/collapse/Collapse.jsx +++ b/component-overview/examples/collapse/Collapse.jsx @@ -1,5 +1,5 @@ import { useState } from 'react'; -import Collapse from '@sb1/ffe-collapse-react'; +import { Collapse } from '@sb1/ffe-collapse-react'; import { ExpandButton } from '@sb1/ffe-buttons-react'; () => { From 4ab3f170d3aa4b6b79dc0070168b74ba3a16dbb5 Mon Sep 17 00:00:00 2001 From: Peter Hellstrand Date: Tue, 9 Apr 2024 20:58:50 +0200 Subject: [PATCH 4/4] feat(ffe-collapse-react): grid css animations BREAKING CHANGE: markup in component is updated. Changed export from default to named. --- .../ffe-collapse-react/less/collapse.less | 19 ++- packages/ffe-collapse-react/src/Collapse.js | 109 +++++++----------- packages/ffe-collapse-react/src/index.d.ts | 4 +- packages/ffe-collapse-react/src/index.js | 2 +- 4 files changed, 60 insertions(+), 74 deletions(-) diff --git a/packages/ffe-collapse-react/less/collapse.less b/packages/ffe-collapse-react/less/collapse.less index d2b2f33d88..4772406771 100644 --- a/packages/ffe-collapse-react/less/collapse.less +++ b/packages/ffe-collapse-react/less/collapse.less @@ -1,3 +1,18 @@ -.ffe-collapse-transition { - transition: height @ffe-transition-duration @ffe-ease; +.ffe-collapse { + display: grid; + grid-template-rows: 0fr; + transition: grid-template-rows var(--ffe-transition-duration) + var(--ffe-ease); +} + +.ffe-collapse--hidden { + visibility: hidden; +} + +.ffe-collapse--open { + grid-template-rows: 1fr; +} + +.ffe-collapse__inner { + overflow: hidden; } diff --git a/packages/ffe-collapse-react/src/Collapse.js b/packages/ffe-collapse-react/src/Collapse.js index 166fc81e80..9da371c7b7 100644 --- a/packages/ffe-collapse-react/src/Collapse.js +++ b/packages/ffe-collapse-react/src/Collapse.js @@ -1,82 +1,53 @@ -import React, { useRef, useState, useEffect } from 'react'; -import { string, bool, func, object } from 'prop-types'; +import React, { useRef, useEffect, useState } from 'react'; +import { string, bool, func, node } from 'prop-types'; import classNames from 'classnames'; -const Collapse = ({ className, style, isOpen, onRest, ...rest }) => { - const content = useRef(); - const [height, setHeight] = useState(() => (isOpen ? 'auto' : '0')); - const [overflow, setOverflow] = useState(() => - isOpen ? 'visible' : 'hidden', - ); - const [visibility, setVisibility] = useState(() => - isOpen ? 'visible' : 'hidden', - ); +export const Collapse = React.forwardRef( + ({ className, isOpen, onRest, children, ...rest }, ref) => { + const internalRef = useRef(); + const collapse = ref ?? internalRef; + const [isHidden, setIsHidden] = useState(!isOpen); - const setExpanded = () => { - setHeight('auto'); - setOverflow('visible'); - }; - - const setCollapsed = () => { - setVisibility('hidden'); - }; - - useEffect(() => { - if (content.current) { - if (isOpen && height !== 'auto') { - setHeight(`${content.current.scrollHeight}px`); - setVisibility('visible'); - } else if (!isOpen && height !== '0') { - setHeight(`${content.current.scrollHeight}px`); - window.requestAnimationFrame(() => - setTimeout(() => { - setHeight('0'); - setOverflow('hidden'); - }), - ); - } - } - }, [isOpen, height]); - - const onTransitionEnd = e => { - if (e.target === content.current && e.propertyName === 'height') { + useEffect(() => { if (isOpen) { - setExpanded(); - } else { - setCollapsed(); - } - if (onRest) { - onRest(); + setIsHidden(false); } - } - }; - - const mergedStyles = { - ...style, - willChange: 'height', - height, - overflow, - visibility, - }; - - return ( -
- ); -}; + }, [isOpen]); + + return ( +
{ + if ( + e.target === collapse.current && + e.propertyName === 'grid-template-rows' + ) { + if (onRest) { + onRest(); + } + if (!isOpen) { + setIsHidden(true); + } + } + }} + > +
{children}
+
+ ); + }, +); Collapse.displayName = 'Collapse'; Collapse.propTypes = { className: string, - style: object, isOpen: bool, onRest: func, + /** The content to appear when expanded */ + children: node.isRequired, }; - -export default Collapse; diff --git a/packages/ffe-collapse-react/src/index.d.ts b/packages/ffe-collapse-react/src/index.d.ts index 0bb6d88509..808d08a8d5 100644 --- a/packages/ffe-collapse-react/src/index.d.ts +++ b/packages/ffe-collapse-react/src/index.d.ts @@ -1,10 +1,10 @@ import * as React from 'react'; -export interface CollapseProps extends React.HTMLProps { +export interface CollapseProps extends React.ComponentProps<'div'> { isOpen: boolean; onRest?: () => void; } declare class Collapse extends React.Component {} -export default Collapse; +export { Collapse }; diff --git a/packages/ffe-collapse-react/src/index.js b/packages/ffe-collapse-react/src/index.js index 12bcb635c7..f87b98b456 100644 --- a/packages/ffe-collapse-react/src/index.js +++ b/packages/ffe-collapse-react/src/index.js @@ -1 +1 @@ -export { default } from './Collapse'; +export { Collapse } from './Collapse';