fix!: FloatAreaのresponseMessage属性の型を実装に合わせて調整する (#5299)

kufu · Jan 28, 2025 · 0fd3afa · 0fd3afa
1 parent 849fc30
commit 0fd3afa
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 21 deletions.
diff --git a/packages/smarthr-ui/src/components/FloatArea/FloatArea.tsx b/packages/smarthr-ui/src/components/FloatArea/FloatArea.tsx
@@ -2,7 +2,7 @@ import React, { ComponentPropsWithoutRef, FC, ReactNode, useMemo } from 'react'
 import { tv } from 'tailwind-variants'
 
 import { AbstractSize, CharRelativeSize } from '../../themes/createSpacing'
-import { Gap, ResponseMessageType } from '../../types'
+import { Gap, ResponseMessageTypeWithoutProcessing } from '../../types'
 import { Base } from '../Base'
 import { Cluster } from '../Layout'
 import { ResponseMessage } from '../ResponseMessage'
@@ -54,7 +54,7 @@ type Props = StyleProps & {
   /** tertiary 領域に表示するボタン */
   tertiaryButton?: ReactNode
   /** 操作に対するフィードバックメッセージ */
-  responseMessage?: ResponseMessageType
+  responseMessage?: ResponseMessageTypeWithoutProcessing
 }
 type ElementProps = Omit<ComponentPropsWithoutRef<'div'>, keyof Props>
 
@@ -69,26 +69,16 @@ export const FloatArea: FC<Props & ElementProps> = ({
   className,
   ...rest
 }) => {
-  const styleProps = useMemo(
-    () => ({
-      style: { ...style, zIndex },
-    }),
-    [style, zIndex],
-  )
+  const styleAttr = useMemo(() => ({ ...style, zIndex }), [style, zIndex])
+  const actualClassName = useMemo(() => floatArea({ bottom, className }), [bottom, className])
 
   return (
-    <Base
-      {...styleProps}
-      {...rest}
-      className={floatArea({ bottom, className })}
-      layer={3}
-      padding={1}
-    >
+    <Base {...rest} style={styleAttr} layer={3} padding={1} className={actualClassName}>
       <Cluster gap={1}>
         {tertiaryButton}
         <div className="shr-ms-auto">
           <Cluster gap={1} align="center">
-            {(responseMessage?.status === 'success' || responseMessage?.status === 'error') && (
+            {responseMessage && (
               <ResponseMessage type={responseMessage.status}>
                 {responseMessage.text}
               </ResponseMessage>

diff --git a/packages/smarthr-ui/src/types/ResponseMessage.ts b/packages/smarthr-ui/src/types/ResponseMessage.ts
@@ -1,10 +1,11 @@
 import { ReactNode } from 'react'
 
+export type ResponseMessageTypeWithoutProcessing = {
+  status: 'success' | 'error'
+  text: ReactNode
+}
 export type ResponseMessageType =
-  | {
-      status: 'success' | 'error'
-      text: ReactNode
-    }
+  | ResponseMessageTypeWithoutProcessing
   | {
       status: 'processing'
     }
diff --git a/packages/smarthr-ui/src/types/index.ts b/packages/smarthr-ui/src/types/index.ts
@@ -1,5 +1,5 @@
 export type { Gap, SeparateGap } from './Gap'
 export type { DecoratorsType, DecoratorType } from './Decorator'
-export type { ResponseMessageType } from './ResponseMessage'
+export type { ResponseMessageType, ResponseMessageTypeWithoutProcessing } from './ResponseMessage'
 export type { LocaleMap } from './Locale'
 export type { ElementRef, ElementRefProps } from './ComponentTypes'