From 239929297bd8964b61ed71be63351821a3390af7 Mon Sep 17 00:00:00 2001 From: Ken Date: Wed, 20 Mar 2024 13:10:08 +0100 Subject: [PATCH 1/4] :recycle: Bruker controllableState i ExpansionCard --- .../src/expansion-card/ExpansionCard.tsx | 29 ++++++++++--------- 1 file changed, 15 insertions(+), 14 deletions(-) diff --git a/@navikt/core/react/src/expansion-card/ExpansionCard.tsx b/@navikt/core/react/src/expansion-card/ExpansionCard.tsx index 7416bfe46ca..64b1dc66527 100644 --- a/@navikt/core/react/src/expansion-card/ExpansionCard.tsx +++ b/@navikt/core/react/src/expansion-card/ExpansionCard.tsx @@ -1,5 +1,6 @@ import cl from "clsx"; -import React, { forwardRef, useRef, useState } from "react"; +import React, { forwardRef, useRef } from "react"; +import { useControllableState } from "../util/hooks"; import { OverridableComponent } from "../util/types"; import ExpansionCardContent, { ExpansionCardContentProps, @@ -116,24 +117,24 @@ export const ExpansionCard = forwardRef( }, ref, ) => { - const [_open, _setOpen] = useState(defaultOpen); - const shouldFade = useRef(!(Boolean(open) || defaultOpen)); - const handleOpen = () => { - if (open === undefined) { - const newOpen = !_open; - _setOpen(newOpen); - onToggle?.(newOpen); - } else { - onToggle?.(!open); - } - shouldFade.current = true; - }; + const [_open, _setOpen] = useControllableState({ + value: open, + onChange: (newValue) => { + onToggle?.(newValue); + shouldFade.current = true; + }, + defaultValue: defaultOpen, + }); return ( _setOpen((x) => !x), + size, + }} >
Date: Wed, 20 Mar 2024 13:18:20 +0100 Subject: [PATCH 2/4] :bug: Fikset tilfelle der checked switch var visuelt unchecked --- @navikt/core/react/src/form/switch/Switch.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/@navikt/core/react/src/form/switch/Switch.tsx b/@navikt/core/react/src/form/switch/Switch.tsx index f8d6fb660e0..f65a002c624 100644 --- a/@navikt/core/react/src/form/switch/Switch.tsx +++ b/@navikt/core/react/src/form/switch/Switch.tsx @@ -85,7 +85,7 @@ export const Switch = forwardRef( ...rest } = props; - const [checked, setChecked] = useState( + const [_checked, setChecked] = useState( defaultChecked ?? checkedProp ?? false, ); @@ -93,6 +93,8 @@ export const Switch = forwardRef( checkedProp !== undefined && setChecked(checkedProp); }, [checkedProp]); + const checked = checkedProp ?? _checked; + return (
( if (readOnly) { return; } + /* if (checkedProp && !props.onChange) return; */ setChecked(e.target.checked); props.onChange && props.onChange(e); }} From 004a28bfa634360f257859fdfafbdf845702d2b4 Mon Sep 17 00:00:00 2001 From: Ken Date: Wed, 20 Mar 2024 13:18:53 +0100 Subject: [PATCH 3/4] :memo: Changeset --- .changeset/curvy-ducks-battle.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/curvy-ducks-battle.md diff --git a/.changeset/curvy-ducks-battle.md b/.changeset/curvy-ducks-battle.md new file mode 100644 index 00000000000..d6fb4e16fc5 --- /dev/null +++ b/.changeset/curvy-ducks-battle.md @@ -0,0 +1,5 @@ +--- +"@navikt/ds-react": patch +--- + +Switch: Fikset edgecase der checked Switch var visuelt unchecked From e6cb3c4dd05f64c4fa70cf7b73030fe18bbd8e2e Mon Sep 17 00:00:00 2001 From: Ken Date: Wed, 20 Mar 2024 13:20:46 +0100 Subject: [PATCH 4/4] :fire: Fjernet utkommentert kode --- @navikt/core/react/src/form/switch/Switch.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/@navikt/core/react/src/form/switch/Switch.tsx b/@navikt/core/react/src/form/switch/Switch.tsx index f65a002c624..9a738eefeae 100644 --- a/@navikt/core/react/src/form/switch/Switch.tsx +++ b/@navikt/core/react/src/form/switch/Switch.tsx @@ -121,7 +121,6 @@ export const Switch = forwardRef( if (readOnly) { return; } - /* if (checkedProp && !props.onChange) return; */ setChecked(e.target.checked); props.onChange && props.onChange(e); }}