chore: AncherButtonのrelはmemo化の効率がわるいため解除

kufu · Jan 30, 2025 · 248a5e9 · 248a5e9
1 parent 09d8706
commit 248a5e9
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 27 deletions.
diff --git a/packages/smarthr-ui/src/components/Button/AnchorButton.tsx b/packages/smarthr-ui/src/components/Button/AnchorButton.tsx
@@ -49,11 +49,7 @@ const AnchorButton = forwardRef(
     }: PropsWithoutRef<Props<T>> & ElementProps<T>,
     ref: Ref<ElementRef<T>>,
   ): ReactElement => {
-    const styles = useMemo(() => anchorButton({ className }), [className])
-    const actualRel = useMemo(
-      () => (rel === undefined && target === '_blank' ? 'noopener noreferrer' : rel),
-      [rel, target],
-    )
+    const style = useMemo(() => anchorButton({ className }), [className])
 
     const button = (
       <ButtonWrapper
@@ -62,9 +58,9 @@ const AnchorButton = forwardRef(
         square={square}
         wide={wide}
         variant={variant}
-        className={styles}
+        className={style}
         target={target}
-        rel={actualRel}
+        rel={rel === undefined && target === '_blank' ? 'noopener noreferrer' : rel}
         isAnchor
         anchorRef={ref}
         elementAs={elementAs}

diff --git a/packages/smarthr-ui/src/components/Button/Button.tsx b/packages/smarthr-ui/src/components/Button/Button.tsx
@@ -38,7 +38,7 @@ const buttonStyle = tv({
 })
 
 export type Props = {
-  decorators?: DecoratorsType<DECORATOR_DEFAULT_TEXTS>
+  decorators?: DecoratorsType<DecoratorKeyTypes>
 }
 
 const DECORATOR_DEFAULT_TEXTS = {
@@ -110,7 +110,7 @@ export const Button = forwardRef<HTMLButtonElement, BaseProps & ElementProps & P
         prefix={actualPrefix}
         suffix={actualSuffix}
       >
-        <LoadingStatus loading={loading}>{decorated.loading}</LoadingStatus>
+        <LoadingStatus loading={loading} message={decorated.loading} />
         {actualChildren}
       </ButtonWrapper>
     )
@@ -125,13 +125,9 @@ export const Button = forwardRef<HTMLButtonElement, BaseProps & ElementProps & P
 // BottomFixedArea での判定に用いるために displayName を明示的に設定する
 Button.displayName = 'Button'
 
-const LoadingStatus = React.memo<{ loading: boolean; children: string }>(
-  ({ loading, children }) => {
-    const { createPortal } = usePortal()
+const LoadingStatus = React.memo<{ loading: boolean; message: string }>(({ loading, message }) => {
+  const { createPortal } = usePortal()
 
-    // `button` 要素内で live region を使うことはできないので、`role="status"` を持つ要素を外側に配置している。 https://github.com/kufu/smarthr-ui/pull/4558
-    return createPortal(
-      <VisuallyHiddenText role="status">{loading && children}</VisuallyHiddenText>,
-    )
-  },
-)
+  // `button` 要素内で live region を使うことはできないので、`role="status"` を持つ要素を外側に配置している。 https://github.com/kufu/smarthr-ui/pull/4558
+  return createPortal(<VisuallyHiddenText role="status">{loading && message}</VisuallyHiddenText>)
+})
diff --git a/packages/smarthr-ui/src/components/Button/ButtonWrapper.tsx b/packages/smarthr-ui/src/components/Button/ButtonWrapper.tsx
@@ -19,8 +19,8 @@ type BaseProps = PropsWithChildren<{
   $loading?: boolean
   className: string
   elementAs?: ElementType
-  prefix?: React.ReactNode
-  suffix?: React.ReactNode
+  prefix?: ReactNode
+  suffix?: ReactNode
 }>
 
 type ButtonProps = BaseProps & {
@@ -46,12 +46,11 @@ export function ButtonWrapper({
   square,
   wide = false,
   $loading,
-  isAnchor,
   prefix,
   suffix,
   children,
   className,
-  ...props
+  ...rest
 }: Props) {
   const wrapperStyle = useMemo(() => {
     const generate = button({
@@ -62,14 +61,16 @@ export function ButtonWrapper({
       wide,
     })
 
-    const wrapper = isAnchor ? generate.anchor : generate.button
+    const wrapper = rest.isAnchor ? generate.anchor : generate.button
 
     return wrapper({ className })
-  }, [$loading, size, square, variant, wide, className, isAnchor])
+  }, [$loading, size, square, variant, wide, className, rest.isAnchor])
   const innerStyle = useMemo(() => buttonInner({ size }), [size])
 
-  if (isAnchor) {
-    const { anchorRef, elementAs, ...others } = props
+  // HINT: 型の関係でisAnchorをrestから展開してしまうとa要素であることを
+  // 自動型づけできなくなってしまう
+  if (rest.isAnchor) {
+    const { anchorRef, elementAs, isAnchor: _, ...others } = rest
     const Component = elementAs || 'a'
 
     return (
@@ -80,7 +81,7 @@ export function ButtonWrapper({
       </Component>
     )
   } else {
-    const { buttonRef, disabled, onClick, ...others } = props
+    const { buttonRef, disabled, onClick, ...others } = rest
 
     return (
       // eslint-disable-next-line smarthr/best-practice-for-button-element