From 846e180bd5ebef89d10e12531e69978c7cb3278b Mon Sep 17 00:00:00 2001 From: wes337 Date: Sat, 19 Feb 2022 10:50:17 +0200 Subject: [PATCH 1/4] [@mantine/core] Select: only use open/close callback when value changes --- src/mantine-core/src/components/Select/Select.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/mantine-core/src/components/Select/Select.tsx b/src/mantine-core/src/components/Select/Select.tsx index 9f646fefba3..84a4cd8dcf2 100644 --- a/src/mantine-core/src/components/Select/Select.tsx +++ b/src/mantine-core/src/components/Select/Select.tsx @@ -214,6 +214,10 @@ export const Select = forwardRef( const isDeselectable = allowDeselect === undefined ? clearable : allowDeselect; const setDropdownOpened = (opened: boolean) => { + if (dropdownOpened === opened) { + return; + } + _setDropdownOpened(opened); const handler = opened ? onDropdownOpen : onDropdownClose; typeof handler === 'function' && handler(); From 9e8045f8e430043f8540a86ef65eba31b9f7e47d Mon Sep 17 00:00:00 2001 From: Wesley Moses Date: Sat, 19 Feb 2022 11:43:41 +0200 Subject: [PATCH 2/4] [@mantine/core] Select: do not use early return --- src/mantine-core/src/components/Select/Select.tsx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/mantine-core/src/components/Select/Select.tsx b/src/mantine-core/src/components/Select/Select.tsx index 84a4cd8dcf2..29e0b1ca717 100644 --- a/src/mantine-core/src/components/Select/Select.tsx +++ b/src/mantine-core/src/components/Select/Select.tsx @@ -214,13 +214,11 @@ export const Select = forwardRef( const isDeselectable = allowDeselect === undefined ? clearable : allowDeselect; const setDropdownOpened = (opened: boolean) => { - if (dropdownOpened === opened) { - return; + if (dropdownOpened !== opened) { + _setDropdownOpened(opened); + const handler = opened ? onDropdownOpen : onDropdownClose; + typeof handler === 'function' && handler(); } - - _setDropdownOpened(opened); - const handler = opened ? onDropdownOpen : onDropdownClose; - typeof handler === 'function' && handler(); }; const isCreatable = creatable && typeof getCreateLabel === 'function'; From f741331291ec47451a4ecad6b6959cfb9676918d Mon Sep 17 00:00:00 2001 From: wes337 Date: Sun, 7 Aug 2022 11:38:57 +0300 Subject: [PATCH 3/4] [@mantine/core] Spoiler: useElementSize hook to calculate height --- src/mantine-core/src/Spoiler/Spoiler.story.tsx | 18 ++++++++++++++++++ src/mantine-core/src/Spoiler/Spoiler.tsx | 15 ++++++--------- 2 files changed, 24 insertions(+), 9 deletions(-) diff --git a/src/mantine-core/src/Spoiler/Spoiler.story.tsx b/src/mantine-core/src/Spoiler/Spoiler.story.tsx index 989f721e007..267dd6c6879 100644 --- a/src/mantine-core/src/Spoiler/Spoiler.story.tsx +++ b/src/mantine-core/src/Spoiler/Spoiler.story.tsx @@ -1,4 +1,5 @@ import React, { useState } from 'react'; +import { Accordion } from '../Accordion/Accordion'; import { Spoiler } from './Spoiler'; export default { title: 'Spoiler' }; @@ -27,3 +28,20 @@ export function ContentChanges() { ); } + +export function InsideAccordion() { + return ( +
+ + + Expand me + + + Hidden information 2 + + + + +
+ ); +} diff --git a/src/mantine-core/src/Spoiler/Spoiler.tsx b/src/mantine-core/src/Spoiler/Spoiler.tsx index 5179f055552..f30b4ccd238 100644 --- a/src/mantine-core/src/Spoiler/Spoiler.tsx +++ b/src/mantine-core/src/Spoiler/Spoiler.tsx @@ -1,5 +1,6 @@ -import React, { useRef, useState, useEffect, forwardRef } from 'react'; +import React, { useState, useEffect, forwardRef } from 'react'; import { DefaultProps, Selectors, useComponentDefaultProps } from '@mantine/styles'; +import { useElementSize } from '@mantine/hooks'; import { Anchor } from '../Anchor'; import { Box } from '../Box'; import useStyles, { SpoilerStylesParams } from './Spoiler.styles'; @@ -57,24 +58,20 @@ export const Spoiler = forwardRef((props, ref) => const [show, setShowState] = useState(initialState); const [spoiler, setSpoilerState] = useState(initialState); - const [contentHeight, setContentHeight] = useState(null); - const contentRef = useRef(null); + const { ref: contentRef, height } = useElementSize(); const spoilerMoreContent = show ? hideLabel : showLabel; useEffect(() => { - if (contentRef.current) { - setSpoilerState(maxHeight < contentRef.current.offsetHeight); - setContentHeight(contentRef.current.offsetHeight); - } - }, [maxHeight, children]); + setSpoilerState(maxHeight < height); + }, [height, maxHeight, children]); return (
{children}
From e0b9071dbb030b544d68b575659afba1f5ec2ac6 Mon Sep 17 00:00:00 2001 From: wes337 Date: Mon, 8 Aug 2022 11:00:54 +0300 Subject: [PATCH 4/4] [@mantine/core] Spoiler: improve story --- src/mantine-core/src/Spoiler/Spoiler.story.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/mantine-core/src/Spoiler/Spoiler.story.tsx b/src/mantine-core/src/Spoiler/Spoiler.story.tsx index 267dd6c6879..7be5bc54dca 100644 --- a/src/mantine-core/src/Spoiler/Spoiler.story.tsx +++ b/src/mantine-core/src/Spoiler/Spoiler.story.tsx @@ -36,8 +36,14 @@ export function InsideAccordion() { Expand me - - Hidden information 2 + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut quam vitae + lorem viverra ultricies. Integer hendrerit, quam mollis tempus iaculis, tellus est + pellentesque eros, vel molestie risus eros sit amet sem. Fusce pretium ex quis neque + fringilla facilisis. Aenean sed luctus tortor, eget suscipit neque. Pellentesque + consequat neque quis porta luctus. Donec vitae est id velit condimentum mollis id vel + est. Sed eleifend interdum enim, a facilisis ex faucibus nec. Morbi vel est et mauris + congue ullamcorper. Duis eget velit lacinia, consequat neque vel, dignissim massa.