fix: render() arrow function replace to named function

pixiv · Jan 26, 2024 · b70d0cc · b70d0cc
1 parent e0d83b1
commit b70d0cc
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 16 deletions.
diff --git a/packages/react/src/components/Button/__snapshots__/index.story.storyshot b/packages/react/src/components/Button/__snapshots__/index.story.storyshot
@@ -1344,7 +1344,6 @@ exports[`Storyshots Button Nihongo 1`] = `
   <button
     className="c0 c1"
     disabled={false}
-    onClick={[Function]}
   >
     日本語だよ
   </button>

diff --git a/packages/react/src/components/Button/index.story.tsx b/packages/react/src/components/Button/index.story.tsx
@@ -1,4 +1,3 @@
-import { action } from '@storybook/addon-actions'
 import { useRef } from 'react'
 import { ClickableElement } from '../Clickable'
 import Button, { ButtonProps } from '.'
@@ -75,24 +74,21 @@ export const Link: StoryObj<typeof Button> = {
 }
 
 export const Nihongo: StoryObj<typeof Button> = {
-  render: (args) => (
-    <Button {...args} onClick={action('click')}>
-      日本語だよ
+  render: (args) => <Button {...args}>日本語だよ</Button>,
+}
+
+const FocusRender = (args: ButtonProps) => {
+  const ref = useRef<ClickableElement>(null)
+  const focus = () => ref.current?.focus()
+  return (
+    <Button {...args} onMouseOver={focus} ref={ref}>
+      Mouse over to focus
     </Button>
-  ),
+  )
 }
 
 export const Focus: StoryObj<typeof Button> = {
-  render: (args: ButtonProps) => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const ref = useRef<ClickableElement>(null)
-    const focus = () => ref.current?.focus()
-    return (
-      <Button {...args} onMouseOver={focus} ref={ref}>
-        Mouse over to focus
-      </Button>
-    )
-  },
+  render: FocusRender,
 }
 
 export const LayoutExample: StoryObj<typeof Button> = {