diff --git a/core/store/src/state/context/controls.tsx b/core/store/src/state/context/controls.tsx index 70d55aee6..d6b94c268 100644 --- a/core/store/src/state/context/controls.tsx +++ b/core/store/src/state/context/controls.tsx @@ -21,7 +21,6 @@ export const ControlsContextStoryProvider: FC = ({ children }) => { controls: story ? story.controls : undefined, updateValue: (name: string, newValue: any) => { if (story) { - console.log(newValue); const storyControls = story.controls || {}; updateStory({ ...story, diff --git a/core/store/src/state/context/store.tsx b/core/store/src/state/context/store.tsx index 2947403bd..ac0b167cc 100644 --- a/core/store/src/state/context/store.tsx +++ b/core/store/src/state/context/store.tsx @@ -1,15 +1,8 @@ -import React, { - FC, - createContext, - useState, - useContext, - useEffect, -} from 'react'; -import { Store, PackageInfo, Story } from '@component-controls/core'; +import React, { FC, createContext, useContext } from 'react'; +import { Store, PackageInfo } from '@component-controls/core'; interface StoreContextProps { store: Store; - updateStory: (newValue: Story) => void; } export const StoreContext = createContext({ @@ -19,26 +12,16 @@ export const StoreContext = createContext({ packages: {}, components: {}, }, - updateStory: () => {}, }); export const StoreContextProvider: FC<{ store: Store }> = ({ - store: propsStore, + store, children, }) => { - const [store, setStore] = useState(propsStore); - useEffect(() => { - setStore(propsStore); - }, [propsStore]); return ( - setStore({ - ...store, - stories: { ...store.stories, [newStory.id as string]: newStory }, - }), }} > {children} diff --git a/core/store/src/state/context/story.tsx b/core/store/src/state/context/story.tsx index c9db862c8..e4be0c1ce 100644 --- a/core/store/src/state/context/story.tsx +++ b/core/store/src/state/context/story.tsx @@ -1,4 +1,10 @@ -import React, { FC, createContext, useContext } from 'react'; +import React, { + FC, + createContext, + useContext, + useState, + useEffect, +} from 'react'; import { Story, getStoryPath, @@ -22,12 +28,23 @@ export const StoryContextProvider: FC<{ storyId: string | undefined }> = ({ storyId, children, }) => { - const { store, updateStory } = useContext(StoreContext); + const { store } = useContext(StoreContext); + const [story, setStory] = useState( + storyId ? store.stories[storyId] : undefined, + ); + useEffect(() => { + setStory(storyId ? store.stories[storyId] : undefined); + }, [storyId, store]); return ( updateStory(newValue), + story, + updateStory: newValue => { + if (storyId) { + store.stories = { ...store.stories, [storyId]: newValue }; + setStory(newValue); + } + }, }} > {children} diff --git a/core/store/src/state/recoil/controls.tsx b/core/store/src/state/recoil/controls.tsx index afefb52e3..ecdfee2c6 100644 --- a/core/store/src/state/recoil/controls.tsx +++ b/core/store/src/state/recoil/controls.tsx @@ -1,10 +1,9 @@ -import React, { FC, Fragment } from 'react'; +import React, { FC } from 'react'; import { selector, selectorFamily, useRecoilValue, useRecoilState, - RecoilState, RecoilRoot, } from 'recoil'; import { ComponentControls, ComponentControl } from '@component-controls/core'; @@ -13,7 +12,7 @@ import { currentStoryState } from './story'; import { storeState } from './store'; const currentControlsState = selector({ - key: 'story_prop', + key: 'current_controls', get: ({ get }) => { const story = get(currentStoryState); return story?.controls; @@ -25,22 +24,6 @@ const currentControlsState = selector({ }, }); -export const currentControlsPropState: ControlState = selectorFamily< - ComponentControl | undefined, - string ->({ - key: 'controls_prop', - get: name => ({ get }) => { - const controls = get(currentControlsState); - return controls ? controls[name] : undefined; - }, - set: name => ({ get, set }, newValue) => { - const controls = get(currentControlsState); - const updated: ComponentControls = { ...controls, [name]: newValue as any }; - set(currentControlsState, updated); - }, -}); - const storyControlsState = selectorFamily< ComponentControls | undefined, string @@ -58,13 +41,11 @@ export const useStoryControls = ( export const useControl = ( name: string, - recoilSelector: ControlState, ): [T, (value: any) => void] => { - const [control, setControl] = useRecoilState(recoilSelector(name)); + const [controls, setControls] = useRecoilState(currentControlsState); + const control = controls ? controls[name] : undefined; const setValue = (value: any) => { - if (control) { - setControl({ ...control, value }); - } + setControls({ ...controls, [name]: value }); }; return [control as T, setValue]; }; @@ -72,33 +53,17 @@ export const useControl = ( /** * editors state update interface */ -export type ControlState = ( - propName: string, -) => RecoilState; +export type ControlUpdateFn = (name: string, newValue: any) => void; -export const ControlsState: FC = ({ children }) => { - return {children}; -}; -export const useControlSelector = ( - controls: ComponentControls, - onChange: (name: string, value: any) => void, -): ControlState => { - const selector = selectorFamily({ - key: 'controls_selector', - get: name => () => { - return controls[name]; - }, - set: name => (_, newValue) => { - onChange(name, newValue); - }, - }); - return selector; -}; - -export interface ControlsContextProviderProps { - name: string; +export interface ControlsStateProviderProps { + onChange: ControlUpdateFn; controls?: ComponentControls; } -export const ControlsContextProvider: FC = ({ +export const ControlsStateProvider: FC = ({ + controls, + onChange, children, -}) => {children}; +}) => { + console.log(controls, onChange); + return {children}; +};