From 438fff050fc44f91d08e5f718c21a3797d193906 Mon Sep 17 00:00:00 2001 From: AtsushiM Date: Thu, 16 Jan 2025 08:52:56 +0900 Subject: [PATCH 1/6] =?UTF-8?q?chore:=20InformationPanel=E3=81=AE=E5=86=85?= =?UTF-8?q?=E9=83=A8style=E7=94=9F=E6=88=90=E3=82=92memo=E5=8C=96=E3=81=99?= =?UTF-8?q?=E3=82=8B(=E3=82=B3=E3=83=B3=E3=83=9D=E3=83=BC=E3=83=8D?= =?UTF-8?q?=E3=83=B3=E3=83=88=E5=88=87=E3=82=8A=E5=87=BA=E3=81=97=E3=81=AE?= =?UTF-8?q?=E3=81=9F=E3=82=81)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../InformationPanel/InformationPanel.tsx | 31 +++++++++++++------ 1 file changed, 21 insertions(+), 10 deletions(-) diff --git a/packages/smarthr-ui/src/components/InformationPanel/InformationPanel.tsx b/packages/smarthr-ui/src/components/InformationPanel/InformationPanel.tsx index 0cb61b2e46..4dc4e4fc7e 100644 --- a/packages/smarthr-ui/src/components/InformationPanel/InformationPanel.tsx +++ b/packages/smarthr-ui/src/components/InformationPanel/InformationPanel.tsx @@ -130,17 +130,28 @@ export const InformationPanel: FC> = setActive(activeProps) }, [activeProps]) - const { wrapper, header, heading, togglableButton, content } = informationPanel({ - type, - active, - bold, - }) + const { wrapperStyle, headerStyle, headingStyle, togglableButtonStyle, contentStyle } = + useMemo(() => { + const { wrapper, header, heading, togglableButton, content } = informationPanel({ + type, + active, + bold, + }) + + return { + wrapperStyle: wrapper({ className }), + headerStyle: header(), + headingStyle: heading(), + togglableButtonStyle: togglableButton(), + contentStyle: content(), + } + }, [active, bold, type, className]) return ( - - + + {/* eslint-disable-next-line smarthr/a11y-heading-in-sectioning-content */} - + {title} @@ -152,7 +163,7 @@ export const InformationPanel: FC> = onClick={handleClickTrigger} aria-expanded={togglable ? active : undefined} aria-controls={contentId} - className={togglableButton()} + className={togglableButtonStyle} > {active ? decorators?.closeButtonLabel?.(CLOSE_BUTTON_LABEL) || CLOSE_BUTTON_LABEL @@ -160,7 +171,7 @@ export const InformationPanel: FC> = )} -
+
{children}
From d1692c364bec8246dc1f0a4ed608f95e47b32a72 Mon Sep 17 00:00:00 2001 From: AtsushiM Date: Thu, 16 Jan 2025 09:01:21 +0900 Subject: [PATCH 2/6] =?UTF-8?q?chore:=20InformationPanel=E3=81=AE=E5=86=85?= =?UTF-8?q?=E9=83=A8style=E3=82=92active,=20inactive=E3=81=AE=E4=B8=A1?= =?UTF-8?q?=E3=83=91=E3=82=BF=E3=83=BC=E3=83=B3=E3=82=92=E7=94=9F=E6=88=90?= =?UTF-8?q?=E6=B8=88=E3=81=BF=E3=81=AB=E3=81=97=E3=81=A6=E3=81=8A=E3=81=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../InformationPanel/InformationPanel.tsx | 57 ++++++++++++------- 1 file changed, 37 insertions(+), 20 deletions(-) diff --git a/packages/smarthr-ui/src/components/InformationPanel/InformationPanel.tsx b/packages/smarthr-ui/src/components/InformationPanel/InformationPanel.tsx index 4dc4e4fc7e..dea8fe37e8 100644 --- a/packages/smarthr-ui/src/components/InformationPanel/InformationPanel.tsx +++ b/packages/smarthr-ui/src/components/InformationPanel/InformationPanel.tsx @@ -130,28 +130,45 @@ export const InformationPanel: FC> = setActive(activeProps) }, [activeProps]) - const { wrapperStyle, headerStyle, headingStyle, togglableButtonStyle, contentStyle } = - useMemo(() => { - const { wrapper, header, heading, togglableButton, content } = informationPanel({ - type, - active, - bold, - }) + const styles = useMemo(() => { + const withActive = informationPanel({ + type, + active: true, + bold, + }) + const withInactive = informationPanel({ + type, + active: false, + bold, + }) - return { - wrapperStyle: wrapper({ className }), - headerStyle: header(), - headingStyle: heading(), - togglableButtonStyle: togglableButton(), - contentStyle: content(), - } - }, [active, bold, type, className]) + const wrapperProps = { className } + + return { + active: { + wrapper: withActive.wrapper(wrapperProps), + header: withActive.header(), + heading: withActive.heading(), + togglableButton: withActive.togglableButton(), + content: withActive.content(), + }, + inactive: { + wrapper: withInactive.wrapper(wrapperProps), + header: withInactive.header(), + heading: withInactive.heading(), + togglableButton: withInactive.togglableButton(), + content: withInactive.content(), + }, + } + }, [bold, type, className]) + + const currentStyles = styles[active ? 'active' : 'inactive'] return ( - - + + {/* eslint-disable-next-line smarthr/a11y-heading-in-sectioning-content */} - + {title} @@ -163,7 +180,7 @@ export const InformationPanel: FC> = onClick={handleClickTrigger} aria-expanded={togglable ? active : undefined} aria-controls={contentId} - className={togglableButtonStyle} + className={currentStyles.togglableButton} > {active ? decorators?.closeButtonLabel?.(CLOSE_BUTTON_LABEL) || CLOSE_BUTTON_LABEL @@ -171,7 +188,7 @@ export const InformationPanel: FC> = )} -
+
{children}
From a584971b5c482a38860a62be26659aaee1d79f4e Mon Sep 17 00:00:00 2001 From: AtsushiM Date: Thu, 16 Jan 2025 09:17:41 +0900 Subject: [PATCH 3/6] =?UTF-8?q?chore:=20InformationPanel=E5=86=85=E3=81=AE?= =?UTF-8?q?=E9=96=8B=E9=96=89=E3=83=9C=E3=82=BF=E3=83=B3=E3=82=92=E5=88=A5?= =?UTF-8?q?=E3=82=B3=E3=83=B3=E3=83=9D=E3=83=BC=E3=83=8D=E3=83=B3=E3=83=88?= =?UTF-8?q?=E3=81=A8=E3=81=97=E3=81=A6=E5=88=87=E3=82=8A=E5=87=BA=E3=81=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../InformationPanel/InformationPanel.tsx | 64 ++++++++++++------- 1 file changed, 42 insertions(+), 22 deletions(-) diff --git a/packages/smarthr-ui/src/components/InformationPanel/InformationPanel.tsx b/packages/smarthr-ui/src/components/InformationPanel/InformationPanel.tsx index dea8fe37e8..95f3f73dc5 100644 --- a/packages/smarthr-ui/src/components/InformationPanel/InformationPanel.tsx +++ b/packages/smarthr-ui/src/components/InformationPanel/InformationPanel.tsx @@ -12,7 +12,7 @@ import { ResponseMessage } from '../ResponseMessage' import type { DecoratorsType } from '../../types' -type Props = PropsWithChildren<{ +type AbstractProps = PropsWithChildren<{ /** パネルのタイトル */ title: React.ReactNode /** @@ -28,6 +28,8 @@ type Props = PropsWithChildren<{ }> & VariantProps +type Props = AbstractProps & Omit + const OPEN_BUTTON_LABEL = '開く' const CLOSE_BUTTON_LABEL = '閉じる' @@ -101,11 +103,11 @@ export const informationPanel = tv({ ], }) -export const InformationPanel: FC> = ({ +export const InformationPanel: FC = ({ title, titleTag, type = 'info', - togglable = false, + togglable, active: activeProps = true, bold, className, @@ -118,14 +120,6 @@ export const InformationPanel: FC> = const titleId = useId() const contentId = useId() - const handleClickTrigger = useCallback(() => { - if (onClickTrigger) { - onClickTrigger(active) - } else { - setActive(!active) - } - }, [active, onClickTrigger]) - useEffect(() => { setActive(activeProps) }, [activeProps]) @@ -174,18 +168,13 @@ export const InformationPanel: FC> = {togglable && ( - + /> )}
@@ -194,3 +183,34 @@ export const InformationPanel: FC> = ) } + +const TogglableButton: React.FC< + Pick & { + setActive: (flg: boolean) => void + contentId: string + className: string + } +> = ({ active, onClickTrigger, setActive, contentId, className }) => { + const handleClickTrigger = useCallback(() => { + if (onClickTrigger) { + onClickTrigger(active) + } else { + setActive(!active) + } + }, [active, onClickTrigger]) + + return ( + + ) +} From 2e5e2b6738a6e2b493fd7ef271fbce222f959289 Mon Sep 17 00:00:00 2001 From: AtsushiM Date: Thu, 16 Jan 2025 09:23:39 +0900 Subject: [PATCH 4/6] =?UTF-8?q?chore:=20InformationPanel=E5=86=85=E3=81=AE?= =?UTF-8?q?=E9=96=8B=E9=96=89=E3=83=9C=E3=82=BF=E3=83=B3=E5=86=85=E3=81=AE?= =?UTF-8?q?=E3=83=86=E3=82=AD=E3=82=B9=E3=83=88=E3=83=91=E3=82=BF=E3=83=BC?= =?UTF-8?q?=E3=83=B3=E3=82=92memo=E5=8C=96=E3=81=99=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../InformationPanel/InformationPanel.tsx | 30 +++++++++++++++---- 1 file changed, 25 insertions(+), 5 deletions(-) diff --git a/packages/smarthr-ui/src/components/InformationPanel/InformationPanel.tsx b/packages/smarthr-ui/src/components/InformationPanel/InformationPanel.tsx index 95f3f73dc5..6c6602b71b 100644 --- a/packages/smarthr-ui/src/components/InformationPanel/InformationPanel.tsx +++ b/packages/smarthr-ui/src/components/InformationPanel/InformationPanel.tsx @@ -1,6 +1,14 @@ 'use client' -import React, { FC, PropsWithChildren, useCallback, useEffect, useId, useState } from 'react' +import React, { + FC, + PropsWithChildren, + useCallback, + useEffect, + useId, + useMemo, + useState, +} from 'react' import { VariantProps, tv } from 'tailwind-variants' import { Base, BaseElementProps } from '../Base' @@ -197,7 +205,21 @@ const TogglableButton: React.FC< } else { setActive(!active) } - }, [active, onClickTrigger]) + }, [active, onClickTrigger, setActive]) + + const decoratedTexts = useMemo(() => { + if (!decorators) { + return { + active: CLOSE_BUTTON_LABEL, + inactive: OPEN_BUTTON_LABEL, + } + } + + return { + active: decorators.closeButtonLabel?.(CLOSE_BUTTON_LABEL) || CLOSE_BUTTON_LABEL, + inactive: decorators.openButtonLabel?.(OPEN_BUTTON_LABEL) || OPEN_BUTTON_LABEL, + } + }, [decorators]) return ( ) } From 628038c35488a76b3a287c2569e0af66f57fa78c Mon Sep 17 00:00:00 2001 From: AtsushiM Date: Thu, 16 Jan 2025 09:32:58 +0900 Subject: [PATCH 5/6] =?UTF-8?q?chore:=20InformationPanel=E3=81=AEHeading?= =?UTF-8?q?=E3=82=92memo=E5=8C=96=E3=81=99=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../InformationPanel/InformationPanel.tsx | 24 ++++++++++++++----- 1 file changed, 18 insertions(+), 6 deletions(-) diff --git a/packages/smarthr-ui/src/components/InformationPanel/InformationPanel.tsx b/packages/smarthr-ui/src/components/InformationPanel/InformationPanel.tsx index 6c6602b71b..063e950551 100644 --- a/packages/smarthr-ui/src/components/InformationPanel/InformationPanel.tsx +++ b/packages/smarthr-ui/src/components/InformationPanel/InformationPanel.tsx @@ -169,12 +169,9 @@ export const InformationPanel: FC = ({ return ( - {/* eslint-disable-next-line smarthr/a11y-heading-in-sectioning-content */} - - - {title} - - + + {title} + {togglable && ( = ({ ) } +const MemoizedHeading = React.memo< + Pick & { + tag: Props['titleTag'] + id: string + className: string + children: Props['title'] + } +>(({ type, children, ...rect }) => ( + + + {children} + + +)) + const TogglableButton: React.FC< Pick & { setActive: (flg: boolean) => void From e1a7585ca3d48fff066a29534c35616faa38dab8 Mon Sep 17 00:00:00 2001 From: AtsushiM Date: Thu, 16 Jan 2025 09:38:40 +0900 Subject: [PATCH 6/6] =?UTF-8?q?chore:=20InformationPanel=E3=82=92=E3=83=AA?= =?UTF-8?q?=E3=83=95=E3=82=A1=E3=82=AF=E3=82=BF=E3=83=AA=E3=83=B3=E3=82=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/InformationPanel/InformationPanel.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/smarthr-ui/src/components/InformationPanel/InformationPanel.tsx b/packages/smarthr-ui/src/components/InformationPanel/InformationPanel.tsx index 063e950551..6fef943de0 100644 --- a/packages/smarthr-ui/src/components/InformationPanel/InformationPanel.tsx +++ b/packages/smarthr-ui/src/components/InformationPanel/InformationPanel.tsx @@ -169,6 +169,7 @@ export const InformationPanel: FC = ({ return ( + {/* eslint-disable-next-line smarthr/a11y-heading-in-sectioning-content */} {title} @@ -179,6 +180,7 @@ export const InformationPanel: FC = ({ setActive={setActive} contentId={contentId} className={currentStyles.togglableButton} + decorators={decorators} /> )} @@ -205,12 +207,13 @@ const MemoizedHeading = React.memo< )) const TogglableButton: React.FC< - Pick & { + Pick & { + active: boolean setActive: (flg: boolean) => void contentId: string className: string } -> = ({ active, onClickTrigger, setActive, contentId, className }) => { +> = ({ active, onClickTrigger, setActive, contentId, className, decorators }) => { const handleClickTrigger = useCallback(() => { if (onClickTrigger) { onClickTrigger(active)