diff --git a/server/pkg/builtin/manifest.yml b/server/pkg/builtin/manifest.yml index 3cdd0eb8a..117e9c916 100644 --- a/server/pkg/builtin/manifest.yml +++ b/server/pkg/builtin/manifest.yml @@ -2310,9 +2310,6 @@ extensions: type: number suffix: px defaultValue: 20 - - id: background - title: background Setting - type: string - id: title title: Title Setting fields: diff --git a/web/src/beta/components/fields/SliderField/index.stories.tsx b/web/src/beta/components/fields/SliderField/index.stories.tsx index 8a497ab5f..249a2cd54 100644 --- 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; 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 ( @@ -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 index 34a56f886..18689c83c 100644 --- 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 = ({ name, description, ...args }: Props) => { +const SliderField: React.FC = ({ name, description, value, onChange, ...args }: Props) => { + const [internalState, setInternalState] = useState(value); + + const handleChange = useCallback( + (value: number) => { + setInternalState(value); + }, + [setInternalState], + ); + + useEffect(() => { + setInternalState(value); + }, [value]); + return ( - + ); };