feat: add color props

propsから背景色とバーの色を動的に変えられるようにする
imaimai17468 · Aug 21, 2023 · 142029f · 142029f
1 parent 8080680
commit 142029f
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 18 deletions.
diff --git a/src/components/AudioVisualizer/AudioVisualizer.module.css b/src/components/AudioVisualizer/AudioVisualizer.module.css
@@ -6,17 +6,9 @@
 .story-container {
   width: 500px;
   height: 100px;
-  background-color: #fff;
-  padding: 5px;
-  border: 1px solid #ccc;
-  border-radius: 5px;
 }
 
 .story-container-full {
   width: 100%;
   height: 100px;
-  background-color: #fff;
-  padding: 5px;
-  border: 1px solid #ccc;
-  border-radius: 5px;
 }
diff --git a/src/components/AudioVisualizer/AudioVisualizer.stories.tsx b/src/components/AudioVisualizer/AudioVisualizer.stories.tsx
@@ -7,25 +7,35 @@ const meta: Meta<typeof AudioVisualizer> = {
   title: 'common/AudioVisualizer',
   component: AudioVisualizer,
   tags: ['autodocs'],
-  argTypes: {},
+  argTypes: {
+    bgColor: {
+      control: 'color',
+    },
+    barColor: {
+      control: 'color',
+    },
+  }
 }
 export default meta
 type Story = StoryObj<typeof AudioVisualizer>
 
 export const Default: Story = {
-  args: {},
-  render: () => (
+  args: {
+    bgColor: '#fff',
+    barColor: '#000'
+  },
+  render: ({bgColor, barColor}) => (
     <div className={styles['story-container-full']}>
-      <AudioVisualizer />
+      <AudioVisualizer bgColor={bgColor} barColor={barColor} />
     </div>
   ),
 }
 
 export const FixedWidth: Story = {
   args: {},
-  render: () => (
+  render: ({ bgColor, barColor }) => (
     <div className={styles['story-container']}>
-      <AudioVisualizer />
+      <AudioVisualizer bgColor={bgColor} barColor={barColor} />
     </div>
   ),
 }
diff --git a/src/components/AudioVisualizer/AudioVisualizer.tsx b/src/components/AudioVisualizer/AudioVisualizer.tsx
@@ -1,7 +1,11 @@
 import React, { useEffect, useRef } from 'react'
 import styles from './AudioVisualizer.module.css'
+import { AudioVisualizerProps } from './AudioVisualizer.types'
 
-const AudioVisualizer = () => {
+const AudioVisualizer: React.FC<AudioVisualizerProps> = ({
+  bgColor = '#fff',
+  barColor = '#000'
+}) => {
   const containerRef = useRef<HTMLDivElement>(null)
   const canvasRef = useRef<HTMLCanvasElement>(null)
 
@@ -33,7 +37,7 @@ const AudioVisualizer = () => {
         draw(analyser)
       })
       .catch((err) => console.log('The following error occurred: ' + err))
-  }, [])
+  }, [bgColor, barColor])
 
   const draw = (analyser: AnalyserNode) => {
     if (canvasRef.current) {
@@ -46,7 +50,8 @@ const AudioVisualizer = () => {
         const width = canvas.width
         const height = canvas.height
 
-        ctx.clearRect(0, 0, width, height)
+        ctx.fillStyle = bgColor
+        ctx.fillRect(0, 0, width, height)
 
         const barWidth = width / frequencyData.length
         let barHeight
@@ -55,7 +60,7 @@ const AudioVisualizer = () => {
         for (let i = 0; i < frequencyData.length; i++) {
           barHeight = (frequencyData[i] / 255) * height
 
-          ctx.fillStyle = '#233E71'
+          ctx.fillStyle = barColor
           ctx.fillRect(x, height - barHeight, barWidth, barHeight)
 
           x += barWidth

diff --git a/src/components/AudioVisualizer/AudioVisualizer.types.ts b/src/components/AudioVisualizer/AudioVisualizer.types.ts
@@ -0,0 +1,4 @@
+export type AudioVisualizerProps = {
+  bgColor?: string;
+  barColor?: string;
+}