chore(web): Slider fixes (#795)

reearth · Nov 8, 2023 · 801396d · 801396d
1 parent 6d53607
commit 801396d
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 5 deletions.
diff --git a/web/src/beta/components/fields/SliderField/index.stories.tsx b/web/src/beta/components/fields/SliderField/index.stories.tsx
@@ -17,7 +17,12 @@ type Story = StoryObj<typeof SliderField>;
 export const Default: Story = (args: Props) => {
   const [_, updateArgs] = useArgs();
 
-  const handleChange = useCallback((value: number) => updateArgs({ value: value }), [updateArgs]);
+  const handleChange = useCallback(
+    (value: number) => {
+      updateArgs({ value: value });
+    },
+    [updateArgs],
+  );
 
   return (
     <Wrapper>
@@ -50,8 +55,7 @@ const Wrapper = styled.div`
   display: flex;
   flex-direction: column;
   gap: 10%;
-  margin-left: 2rem;
-  margin-top: 2rem;
+  margin: 2rem;
   height: 300px;
 `;
 

diff --git a/web/src/beta/components/fields/SliderField/index.tsx b/web/src/beta/components/fields/SliderField/index.tsx
@@ -1,3 +1,5 @@
+import { useCallback, useEffect, useState } from "react";
+
 import Property from "@reearth/beta/components/fields";
 import Slider, { Props as SliderProps } from "@reearth/beta/components/Slider";
 
@@ -6,10 +8,23 @@ export type Props = {
   description?: string;
 } & SliderProps;
 
-const SliderField: React.FC<Props> = ({ name, description, ...args }: Props) => {
+const SliderField: React.FC<Props> = ({ name, description, value, onChange, ...args }: Props) => {
+  const [internalState, setInternalState] = useState(value);
+
+  const handleChange = useCallback(
+    (value: number) => {
+      setInternalState(value);
+    },
+    [setInternalState],
+  );
+
+  useEffect(() => {
+    setInternalState(value);
+  }, [value]);
+
   return (
     <Property name={name} description={description}>
-      <Slider {...args} />
+      <Slider value={internalState} onChange={handleChange} onAfterChange={onChange} {...args} />
     </Property>
   );
 };