add UIConfigContext & Provider into UIStoreProvider #76

ui-schema · Jul 3, 2021 · 815cb5a · 815cb5a
1 parent 0c4d6cb
commit 815cb5a
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 6 deletions.
diff --git a/packages/ui-schema/src/PluginStack/PluginStack.d.ts b/packages/ui-schema/src/PluginStack/PluginStack.d.ts
@@ -26,6 +26,8 @@ export type PluginStackProps<WP extends {} = {}, C extends {} = {}> = AppliedPlu
     // [key: string]: any
 }
 
+// - `WP` = extra supported/required widget props
+// - `C` = custom `meta context` or additional `config context`
 export function PluginStack<WP extends {} = {}, C extends {} = {}, P extends PluginStackProps<WP, C> = PluginStackProps<WP, C>>(
     props: P & WP
 ): React.ReactElement

diff --git a/packages/ui-schema/src/PluginStack/PluginStack.js b/packages/ui-schema/src/PluginStack/PluginStack.js
@@ -3,6 +3,8 @@ import {List} from 'immutable';
 import {memo} from '@ui-schema/ui-schema/Utils/memo';
 import {useUIMeta} from '@ui-schema/ui-schema/UIMeta/UIMetaProvider';
 import {createValidatorErrors} from '@ui-schema/ui-schema/ValidatorErrors';
+import {useUIConfig} from '@ui-schema/ui-schema/UIStore/UIStoreProvider';
+import {useImmutable} from '@ui-schema/ui-schema/Utils/useImmutable';
 
 class PluginStackErrorBoundary extends React.Component {
     state = {
@@ -33,12 +35,15 @@ class PluginStackErrorBoundary extends React.Component {
 // `withUIMeta` and `mema` are not needed for performance optimizing since `0.3.0` at this position
 export const PluginStack = (props) => {
     const {widgets, ...meta} = useUIMeta()
+    const config = useUIConfig()
     const {
         level = 0, parentSchema,
         storeKeys, schema,
         widgets: customWidgets,
     } = props;
-    const activeWidgets = customWidgets ? customWidgets : widgets
+    // central reference integrity of `storeKeys` for all plugins and the receiving widget, otherwise `useImmutable` is needed more times, e.g. 3 times in plugins + 1x time in widget
+    const currentStoreKeys = useImmutable(storeKeys)
+    const activeWidgets = customWidgets || widgets
 
     const isVirtual = Boolean(props.isVirtual || schema?.get('hidden'))
     let required = List([]);
@@ -58,10 +63,12 @@ export const PluginStack = (props) => {
     >
         <NextPluginRenderer
             {...meta}
+            {...config}
             {...props}
             currentPluginIndex={-1}
             widgets={activeWidgets}
             level={level}
+            storeKeys={currentStoreKeys}
             ownKey={storeKeys.get(storeKeys.count() - 1)}
             requiredList={required}
             required={false}

diff --git a/packages/ui-schema/src/UIStore/UIStoreProvider.tsx b/packages/ui-schema/src/UIStore/UIStoreProvider.tsx
@@ -12,15 +12,41 @@ export interface UIStoreContext {
 // @ts-ignore
 const UIStoreContextObj = React.createContext<UIStoreContext>({})
 
-export const UIStoreProvider: React.ComponentType<React.PropsWithChildren<UIStoreContext>> = ({children, ...props}) => {
-    return <UIStoreContextObj.Provider value={props}>
+// @ts-ignore
+const UIConfigContextObj = React.createContext<{}>({})
+
+export const UIConfigProvider: React.ComponentType<React.PropsWithChildren<{}>> = (
+    {children, ...props}
+) => {
+    const value = React.useMemo(() => ({...props}), [...Object.values(props)])
+    return <UIConfigContextObj.Provider value={value}>
         {children}
+    </UIConfigContextObj.Provider>
+}
+
+export function UIStoreProvider<C extends {} = {}>(
+    {
+        children,
+        showValidity, onChange, store,
+        ...props
+    }: React.PropsWithChildren<UIStoreContext & C>
+): React.ReactElement {
+    return <UIStoreContextObj.Provider value={{showValidity, onChange, store}}>
+        <UIConfigProvider {...props}>
+            {children}
+        </UIConfigProvider>
     </UIStoreContextObj.Provider>
 }
+
 export const useUI = (): UIStoreContext => {
     return React.useContext(UIStoreContextObj)
 }
 
+export function useUIConfig<C extends {} = {}>(): C {
+    // @ts-ignore
+    return React.useContext(UIConfigContextObj)
+}
+
 export interface WithValue {
     value: any
     internalValue: any

diff --git a/packages/ui-schema/src/UIStore/scopeUpdaterInternals.ts b/packages/ui-schema/src/UIStore/scopeUpdaterInternals.ts
@@ -1,6 +1,7 @@
 import { storeBuildScopeTree } from '@ui-schema/ui-schema/UIStore/storeBuildScopeTree'
 import { updateStoreScope } from '@ui-schema/ui-schema/UIStore/updateStoreScope'
-import { addNestKey, ScopeOnChangeHandler } from '@ui-schema/ui-schema'
+import { addNestKey } from '@ui-schema/ui-schema/UIStore/UIStore'
+import { ScopeOnChangeHandler } from '@ui-schema/ui-schema/UIStore/storeUpdater'
 
 export const scopeUpdaterInternals: ScopeOnChangeHandler = (store, storeKeys, oldValue, newValue) => {
     if (typeof oldValue === 'undefined') {

diff --git a/packages/ui-schema/src/UIStore/scopeUpdaterValidity.ts b/packages/ui-schema/src/UIStore/scopeUpdaterValidity.ts
@@ -1,4 +1,5 @@
-import { prependKey, ScopeOnChangeHandler } from '@ui-schema/ui-schema/UIStore'
+import { prependKey } from '@ui-schema/ui-schema/UIStore/UIStore'
+import { ScopeOnChangeHandler } from '@ui-schema/ui-schema/UIStore/storeUpdater'
 import { updateStoreScope } from '@ui-schema/ui-schema/UIStore/updateStoreScope'
 import { List } from 'immutable'
 

diff --git a/packages/ui-schema/src/UIStore/storeUpdater.ts b/packages/ui-schema/src/UIStore/storeUpdater.ts
@@ -1,4 +1,10 @@
-import { StoreKeys, prependKey, UIStoreType, addNestKey, UIStoreStateData, UIStoreUpdaterFn, onChangeHandlerGeneric, UIStoreAction, UIStoreUpdaterData } from '@ui-schema/ui-schema/UIStore/UIStore'
+import {
+    StoreKeys, UIStoreType,
+    prependKey, addNestKey,
+    UIStoreStateData,
+    UIStoreUpdaterFn, onChangeHandlerGeneric,
+    UIStoreAction, UIStoreUpdaterData,
+} from '@ui-schema/ui-schema/UIStore/UIStore'
 import { scopeUpdaterValidity } from '@ui-schema/ui-schema/UIStore/scopeUpdaterValidity'
 import { scopeUpdaterInternals } from '@ui-schema/ui-schema/UIStore/scopeUpdaterInternals'
 import { scopeUpdaterValues } from '@ui-schema/ui-schema/UIStore/scopeUpdaterValues'