adjust WidgetsProps/WidgetsBinding/StoreActions typings #163 #164

ui-schema · Dec 30, 2021 · 2d4f42b · 2d4f42b
1 parent 1019f4d
commit 2d4f42b
Show file tree

Hide file tree

Showing 40 changed files with 200 additions and 205 deletions.
diff --git a/packages/demo/src/material-ui/material-ui-code.tsx b/packages/demo/src/material-ui/material-ui-code.tsx
@@ -24,7 +24,7 @@ import themeDark from 'codemirror/theme/duotone-dark.css'
 import themeLight from 'codemirror/theme/duotone-light.css'
 import useTheme from '@material-ui/core/styles/useTheme'
 import { CodeSelectable } from '@ui-schema/material-code/CodeSelectable/CodeSelectable'
-import { UIMetaProvider, WidgetProps, WidgetsBindingFactory, WithScalarValue } from '@ui-schema/ui-schema'
+import { UIMetaProvider, WidgetsBindingFactory } from '@ui-schema/ui-schema'
 /*import themeMaterial from 'codemirror/theme/gruvbox-dark.css';
 import themeDark from 'codemirror/theme/xq-dark.css';
 import themeLight from 'codemirror/theme/xq-light.css';*/
@@ -36,11 +36,7 @@ const useStyle = (styles) => {
         return () => styles.unuse()
     }, [styles])
 }
-type CustomWidgetsBinding = WidgetsBindingFactory<{}, MuiWidgetsBindingTypes<{}>, MuiWidgetsBindingCustom<{}> & {
-    Code: React.ComponentType<WidgetProps<{}, CustomWidgetsBinding> & WithScalarValue>
-    CodeSelectable: React.ComponentType<WidgetProps<{}, CustomWidgetsBinding> & WithScalarValue>
-    //[k: string]: React.ComponentType<WidgetProps<{}, CustomWidgetsBinding> & WithScalarValue>
-}>
+type CustomWidgetsBinding = WidgetsBindingFactory<{}, MuiWidgetsBindingTypes<{}>, MuiWidgetsBindingCustom<{}>>
 const customWidgets: CustomWidgetsBinding = {...widgets} as CustomWidgetsBinding
 customWidgets.custom = {
     ...widgets.custom,

diff --git a/packages/demo/src/material-ui/material-ui-custom.tsx b/packages/demo/src/material-ui/material-ui-custom.tsx
@@ -28,12 +28,7 @@ import { ObjectGroup } from '@ui-schema/ui-schema/ObjectGroup'
 import { memo } from '@ui-schema/ui-schema/Utils/memo'
 import { useProgress, PROGRESS_DONE, PROGRESS_ERROR, PROGRESS_START } from '@ui-schema/ui-schema/UIApi'
 
-type CustomWidgetsBinding = WidgetsBindingFactory<{}, MuiWidgetsBindingTypes<{}>, MuiWidgetsBindingCustom<{}> & {
-    Table: React.ComponentType<WidgetProps>
-    TableAdvanced: React.ComponentType<WidgetProps>
-    Stepper: React.ComponentType<WidgetProps>
-    Step: React.ComponentType<WidgetProps>
-}>
+type CustomWidgetsBinding = WidgetsBindingFactory<{}, MuiWidgetsBindingTypes<{}>, MuiWidgetsBindingCustom<{}>>
 const customWidgets: CustomWidgetsBinding = {...widgets} as CustomWidgetsBinding
 const pluginStack = [...customWidgets.pluginStack]
 // the referencing network handler should be at first position
@@ -43,7 +38,7 @@ const pluginStack = [...customWidgets.pluginStack]
 pluginStack.splice(0, 0, ReferencingNetworkHandler)
 customWidgets.pluginStack = pluginStack
 
-const CustomTable: React.ComponentType<WidgetProps> = ({widgets, ...props}) => {
+const CustomTable: React.ComponentType<WidgetProps<MuiWidgetBinding>> = ({widgets, ...props}) => {
     const customWidgets = React.useMemo(() => ({
         ...widgets,
         types: {
@@ -167,7 +162,7 @@ const FileUpload: React.ComponentType<WidgetProps & WithValue> = ({storeKeys, on
 
 const WidgetFileUpload = applyPluginStack(extractValue(FileUpload))
 
-const CountrySelect: React.ComponentType<WidgetProps<{}, MuiWidgetBinding> & WithScalarValue> = ({schema, ...props}) => {
+const CountrySelect: React.ComponentType<WidgetProps<MuiWidgetBinding> & WithScalarValue> = ({schema, ...props}) => {
     const [countries, setCountries] = React.useState<List<string>>(List())
     const [loading, setLoading] = useProgress()
 

diff --git a/packages/demo/src/material-ui/material-ui-dnd-grid.tsx b/packages/demo/src/material-ui/material-ui-dnd-grid.tsx
@@ -7,7 +7,7 @@ import Label from '@material-ui/core/FormLabel'
 import FormControl from '@material-ui/core/FormControl'
 import Select from '@material-ui/core/Select'
 import Dashboard from './dashboard/Dashboard'
-import { MuiWidgetsBindingCustom, MuiWidgetsBindingTypes, widgets } from '@ui-schema/ds-material'
+import { MuiWidgetBinding, MuiWidgetsBindingCustom, MuiWidgetsBindingTypes, widgets } from '@ui-schema/ds-material'
 import { browserT } from '../t'
 import { MuiSchemaDebug } from './component/MuiSchemaDebug'
 import { isInvalid } from '@ui-schema/ui-schema/ValidityReporter/isInvalid'
@@ -27,8 +27,8 @@ import {
     storeUpdater,
     UIMetaProvider,
     UIStoreProvider,
-    UIStoreType,
-    WidgetsBindingFactory,
+    UIStoreType, WidgetProps,
+    WidgetsBindingFactory, WithOnChange,
 } from '@ui-schema/ui-schema'
 import { OrderedMap } from 'immutable'
 import { RichContent, RichContentInline, RichContentPane } from '@ui-schema/material-slate'
@@ -43,7 +43,10 @@ import { DragDropBlockSelector } from '@ui-schema/material-dnd/DragDropBlockSele
 import { DragDropBlockComponentsBinding } from '@ui-schema/material-dnd/DragDropBlock'
 import { DropArea } from '@ui-schema/material-dnd/Widgets/DropArea'
 
-export type CustomWidgetsBinding = WidgetsBindingFactory<DragDropBlockComponentsBinding, MuiWidgetsBindingTypes<{}>, MuiWidgetsBindingCustom<{}>>
+export type CustomWidgetsBinding = WidgetsBindingFactory<DragDropBlockComponentsBinding, MuiWidgetsBindingTypes<{}>, MuiWidgetsBindingCustom<{}> & {
+    DragDropArea: React.ComponentType<WidgetProps<MuiWidgetBinding & DragDropBlockComponentsBinding> & WithOnChange>
+}>
+
 const customWidgets: CustomWidgetsBinding = {
     ...widgets,
     DndBlockSelector: DragDropBlockSelector,

diff --git a/packages/demo/src/material-ui/material-ui-dnd.tsx b/packages/demo/src/material-ui/material-ui-dnd.tsx
@@ -24,7 +24,7 @@ import { DragDropSpec } from '@ui-schema/material-dnd/DragDropSpec'
 import { SortableList } from '@ui-schema/material-dnd/Widgets/SortableList/SortableList'
 
 type CustomWidgetsBinding = WidgetsBindingFactory<{}, MuiWidgetsBindingTypes<{}>, MuiWidgetsBindingCustom<{}> & {
-    SortableList: React.ComponentType<WidgetProps<{}, CustomWidgetsBinding> & WithScalarValue>
+    SortableList: React.ComponentType<WidgetProps<CustomWidgetsBinding> & WithScalarValue>
 }>
 const customWidgets: CustomWidgetsBinding = {...widgets} as CustomWidgetsBinding
 customWidgets.custom = {

diff --git a/packages/demo/src/material-ui/material-ui-split.tsx b/packages/demo/src/material-ui/material-ui-split.tsx
@@ -30,12 +30,7 @@ import { InjectSplitSchemaPlugin, InjectSplitSchemaRootContext } from '@ui-schem
 import { MuiSchemaDebug } from './component/MuiSchemaDebug'
 import { OrderedMap } from 'immutable'
 
-type CustomWidgetsBinding = WidgetsBindingFactory<{}, MuiWidgetsBindingTypes<{}>, MuiWidgetsBindingCustom<{}> & {
-    Table: React.ComponentType<WidgetProps>
-    TableAdvanced: React.ComponentType<WidgetProps>
-    Stepper: React.ComponentType<WidgetProps>
-    Step: React.ComponentType<WidgetProps>
-}>
+type CustomWidgetsBinding = WidgetsBindingFactory<{}, MuiWidgetsBindingTypes<{}>, MuiWidgetsBindingCustom<{}>>
 const customWidgets: CustomWidgetsBinding = {...widgets} as CustomWidgetsBinding
 const pluginStack = [...customWidgets.pluginStack]
 // the referencing network handler should be at first position

diff --git a/packages/docs/src/content/docs/ds-material/InfoRenderer.md b/packages/docs/src/content/docs/ds-material/InfoRenderer.md
@@ -60,7 +60,7 @@ import { WidgetProps, WithScalarValue } from '@ui-schema/ui-schema'
 import { MuiWidgetBinding } from '@ui-schema/ds-material/widgetsBinding'
 import { InfoRenderer } from '@ui-schema/ds-material/Component/InfoRenderer'
 
-export const Widget: React.ComponentType<WidgetProps<{}, MuiWidgetBinding> & WithScalarValue> = (
+export const Widget: React.ComponentType<WidgetProps<MuiWidgetBinding> & WithScalarValue> = (
     {
         widgets, schema, valid, errors, storeKeys,
     }

diff --git a/packages/docs/src/content/docs/widgets.md b/packages/docs/src/content/docs/widgets.md
@@ -244,16 +244,16 @@ import React from "react";
 import { widgets, MuiWidgetBinding, MuiWidgetsBindingTypes, MuiWidgetsBindingCustom } from "@ui-schema/ds-material/widgetsBinding";
 import { WidgetProps, WidgetsBindingFactory, WithScalarValue } from "@ui-schema/ui-schema";
 
-const CustomNumberRenderer = (props: React.ComponentType<WidgetProps<{}, CustomWidgetsBinding> & WithScalarValue>) => /* todo: implement */ null;
-const CustomSelect = (props: React.ComponentType<WidgetProps<{}, CustomWidgetsBinding> & WithScalarValue>) => /* todo: implement */ null;
+const CustomNumberRenderer = (props: React.ComponentType<WidgetProps<CustomWidgetsBinding> & WithScalarValue>) => /* todo: implement */ null;
+const CustomSelect = (props: React.ComponentType<WidgetProps<CustomWidgetsBinding> & WithScalarValue>) => /* todo: implement */ null;
 
 export interface CustomWidgetsType {
     types: {
-        integer: React.ComponentType<WidgetProps<{}, CustomWidgetsBinding> & WithScalarValue>
-        number: React.ComponentType<WidgetProps<{}, CustomWidgetsBinding> & WithScalarValue>
+        integer: React.ComponentType<WidgetProps<CustomWidgetsBinding> & WithScalarValue>
+        number: React.ComponentType<WidgetProps<CustomWidgetsBinding> & WithScalarValue>
     }
     custom: {
-        CustomSelect: React.ComponentType<WidgetProps<{}, CustomWidgetsBinding> & WithScalarValue>
+        CustomSelect: React.ComponentType<WidgetProps<CustomWidgetsBinding> & WithScalarValue>
     }
 }
 

diff --git a/packages/ds-material/package-lock.json b/packages/ds-material/package-lock.json
diff --git a/packages/ds-material/package.json b/packages/ds-material/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@ui-schema/ds-material",
-    "version": "0.3.0-alpha.6",
+    "version": "0.3.0-alpha.7",
     "description": "Material-UI Binding for UI-Schema",
     "homepage": "https://ui-schema.bemit.codes",
     "author": "Michael Becker <michael@bemit.codes>",

diff --git a/packages/ds-material/src/Widgets/Accordions/Accordions.tsx b/packages/ds-material/src/Widgets/Accordions/Accordions.tsx
@@ -15,7 +15,7 @@ export interface AccordionStackBaseProps {
     setOpen: (handler: (ownKey: string) => string) => void
 }
 
-const AccordionStackBase: React.ComponentType<WidgetProps<{}, MuiWidgetBinding> & AccordionStackBaseProps> = (props) => {
+const AccordionStackBase: React.ComponentType<WidgetProps<MuiWidgetBinding> & AccordionStackBaseProps> = (props) => {
     const uid = useUID()
     const {
         storeKeys, schema,
@@ -64,7 +64,7 @@ const AccordionStackBase: React.ComponentType<WidgetProps<{}, MuiWidgetBinding>
 
 export const AccordionStack = memo(AccordionStackBase)
 
-export const AccordionsRendererBase = <W extends WidgetProps<{}, MuiWidgetBinding> = WidgetProps<{}, MuiWidgetBinding>>(
+export const AccordionsRendererBase = <W extends WidgetProps<MuiWidgetBinding> = WidgetProps<MuiWidgetBinding>>(
     {
         schema, storeKeys, level,
         errors, showValidity,

diff --git a/packages/ds-material/src/Widgets/FormGroup/FormGroup.tsx b/packages/ds-material/src/Widgets/FormGroup/FormGroup.tsx
@@ -9,7 +9,7 @@ import { WidgetProps } from '@ui-schema/ui-schema/Widget'
 import { TransTitle } from '@ui-schema/ui-schema/Translate/TransTitle'
 import { MuiWidgetBinding } from '@ui-schema/ds-material/widgetsBinding'
 
-export const FormGroupBase: React.ComponentType<WidgetProps<{}, MuiWidgetBinding> & WithValue> = (props) => {
+export const FormGroupBase: React.ComponentType<WidgetProps<MuiWidgetBinding> & WithValue> = (props) => {
     const {storeKeys, ownKey, widgets} = props
     const {WidgetRenderer} = widgets
     const {spacing} = useTheme()
@@ -41,4 +41,4 @@ export const FormGroupBase: React.ComponentType<WidgetProps<{}, MuiWidgetBinding
     </FormControl>
 }
 
-export const FormGroup: React.ComponentType<WidgetProps<{}, MuiWidgetBinding>> = extractValue(memo(FormGroupBase))
+export const FormGroup: React.ComponentType<WidgetProps<MuiWidgetBinding>> = extractValue(memo(FormGroupBase))
diff --git a/packages/ds-material/src/Widgets/OptionsCheck/OptionsCheck.tsx b/packages/ds-material/src/Widgets/OptionsCheck/OptionsCheck.tsx
@@ -85,7 +85,7 @@ export interface OptionsCheckRendererProps {
     row?: boolean
 }
 
-export const OptionsCheck: React.ComponentType<WidgetProps<{}, MuiWidgetBinding> & OptionsCheckRendererProps> = (
+export const OptionsCheck: React.ComponentType<WidgetProps<MuiWidgetBinding> & OptionsCheckRendererProps> = (
     {
         ownKey, schema, storeKeys, showValidity, valid, required, errors,
         row, widgets,

diff --git a/packages/ds-material/src/Widgets/Select/Select.tsx b/packages/ds-material/src/Widgets/Select/Select.tsx
@@ -10,7 +10,7 @@ import { ValidityHelperText } from '@ui-schema/ds-material/Component/LocaleHelpe
 import { getTranslatableEnum } from '@ui-schema/ui-schema/Translate'
 import { MuiWidgetBinding } from '@ui-schema/ds-material/widgetsBinding'
 
-export const Select: React.ComponentType<WidgetProps<{}, MuiWidgetBinding> & WithScalarValue> = (
+export const Select: React.ComponentType<WidgetProps<MuiWidgetBinding> & WithScalarValue> = (
     {
         storeKeys, ownKey, schema, value, onChange,
         showValidity, valid, required, errors, t,

diff --git a/packages/ds-material/src/Widgets/Select/SelectMulti.tsx b/packages/ds-material/src/Widgets/Select/SelectMulti.tsx
@@ -10,7 +10,7 @@ import { ValidityHelperText } from '@ui-schema/ds-material/Component/LocaleHelpe
 import { sortScalarList } from '@ui-schema/ui-schema/Utils/sortScalarList'
 import { MuiWidgetBinding } from '@ui-schema/ds-material/widgetsBinding'
 
-export const SelectMultiBase: React.ComponentType<WidgetProps<{}, MuiWidgetBinding> & WithValue> = (
+export const SelectMultiBase: React.ComponentType<WidgetProps<MuiWidgetBinding> & WithValue> = (
     {
         storeKeys, ownKey, schema, value, onChange,
         showValidity, valid, required, errors, t,

diff --git a/packages/ds-material/src/Widgets/SelectChips/SelectChips.tsx b/packages/ds-material/src/Widgets/SelectChips/SelectChips.tsx
@@ -8,7 +8,7 @@ import Box from '@material-ui/core/Box'
 import { MuiWidgetBinding } from '@ui-schema/ds-material/widgetsBinding'
 import { List, Map, OrderedMap } from 'immutable'
 
-export const SelectChipsBase: React.ComponentType<WidgetProps<{}, MuiWidgetBinding> & WithValue> = (
+export const SelectChipsBase: React.ComponentType<WidgetProps<MuiWidgetBinding> & WithValue> = (
     {
         storeKeys, ownKey, schema, value, onChange,
         showValidity, errors, required,

diff --git a/packages/ds-material/src/Widgets/TableAdvanced/TableAdvanced.tsx b/packages/ds-material/src/Widgets/TableAdvanced/TableAdvanced.tsx
@@ -1,7 +1,8 @@
 import React from 'react'
 import { extractValue, memo, PluginStack, StoreSchemaType, WidgetProps, WithValue } from '@ui-schema/ui-schema'
+import { MuiWidgetBinding } from '@ui-schema/ds-material/widgetsBinding'
 
-export const TableAdvancedBase: React.ComponentType<WidgetProps & WithValue> = (
+export const TableAdvancedBase: React.ComponentType<WidgetProps<MuiWidgetBinding> & WithValue> = (
     {
         showValidity, schema, level, ...props
     }
@@ -21,4 +22,4 @@ export const TableAdvancedBase: React.ComponentType<WidgetProps & WithValue> = (
     </>
 }
 
-export const TableAdvanced: React.ComponentType<WidgetProps> = extractValue(memo(TableAdvancedBase))
+export const TableAdvanced: React.ComponentType<WidgetProps<MuiWidgetBinding>> = extractValue(memo(TableAdvancedBase))
diff --git a/packages/ds-material/src/Widgets/TextField/TextField.tsx b/packages/ds-material/src/Widgets/TextField/TextField.tsx
@@ -54,7 +54,7 @@ export interface NumberRendererProps extends StringRendererBaseProps {
     steps?: number | 'any'
 }
 
-export const StringRenderer = <P extends WidgetProps<{}, MuiWidgetBinding> = WidgetProps<{}, MuiWidgetBinding>>(
+export const StringRenderer = <P extends WidgetProps<MuiWidgetBinding> = WidgetProps<MuiWidgetBinding>>(
     {
         type,
         multiline,
@@ -160,7 +160,7 @@ export const StringRenderer = <P extends WidgetProps<{}, MuiWidgetBinding> = Wid
     </React.Fragment>
 }
 
-export const TextRenderer = <P extends WidgetProps<{}, MuiWidgetBinding> = WidgetProps<{}, MuiWidgetBinding>>({schema, ...props}: P & WithScalarValue & TextRendererProps): React.ReactElement => {
+export const TextRenderer = <P extends WidgetProps<MuiWidgetBinding> = WidgetProps<MuiWidgetBinding>>({schema, ...props}: P & WithScalarValue & TextRendererProps): React.ReactElement => {
     return <StringRenderer
         {...props}
         schema={schema}
@@ -178,7 +178,7 @@ export const TextRenderer = <P extends WidgetProps<{}, MuiWidgetBinding> = Widge
     />
 }
 
-export const NumberRenderer = <P extends WidgetProps<{}, MuiWidgetBinding> = WidgetProps<{}, MuiWidgetBinding>>(props: P & WithScalarValue & NumberRendererProps): React.ReactElement => {
+export const NumberRenderer = <P extends WidgetProps<MuiWidgetBinding> = WidgetProps<MuiWidgetBinding>>(props: P & WithScalarValue & NumberRendererProps): React.ReactElement => {
     const {schema, inputProps: inputPropsProps = {}, steps = 'any'} = props
     const schemaType = schema.get('type') as string | undefined
     const inputProps = React.useMemo(() => {

diff --git a/packages/ds-material/src/Widgets/TextFieldCell/TextFieldCell.tsx b/packages/ds-material/src/Widgets/TextFieldCell/TextFieldCell.tsx
@@ -29,7 +29,7 @@ export interface StringRendererCellProps {
     labelledBy?: string
 }
 
-export const StringRendererCell: React.ComponentType<WidgetProps<{}, MuiWidgetBinding> & WithScalarValue & StringRendererCellProps> = (
+export const StringRendererCell: React.ComponentType<WidgetProps<MuiWidgetBinding> & WithScalarValue & StringRendererCellProps> = (
     {
         type,
         multiline, rows, rowsMax,
@@ -147,7 +147,7 @@ export const StringRendererCell: React.ComponentType<WidgetProps<{}, MuiWidgetBi
     </>
 }
 
-export const TextRendererCell: React.ComponentType<WidgetProps<{}, MuiWidgetBinding> & WithScalarValue & StringRendererCellProps> = ({schema, ...props}) => {
+export const TextRendererCell: React.ComponentType<WidgetProps<MuiWidgetBinding> & WithScalarValue & StringRendererCellProps> = ({schema, ...props}) => {
     return <StringRendererCell
         {...props}
         schema={schema}
@@ -157,7 +157,7 @@ export const TextRendererCell: React.ComponentType<WidgetProps<{}, MuiWidgetBind
     />
 }
 
-export const NumberRendererCell: React.ComponentType<WidgetProps<{}, MuiWidgetBinding> & WithScalarValue & StringRendererCellProps> = (props) => {
+export const NumberRendererCell: React.ComponentType<WidgetProps<MuiWidgetBinding> & WithScalarValue & StringRendererCellProps> = (props) => {
     return <StringRendererCell
         {...props}
         type={'number'}

diff --git a/packages/ds-material/src/Widgets/TextFieldDebounced/TextFieldDebounced.tsx b/packages/ds-material/src/Widgets/TextFieldDebounced/TextFieldDebounced.tsx
@@ -17,7 +17,7 @@ export interface StringRendererDebouncedProps {
     debounceTime?: number
 }
 
-export const StringRendererDebounced = <P extends WidgetProps<{}, MuiWidgetBinding> = WidgetProps<{}, MuiWidgetBinding>>(
+export const StringRendererDebounced = <P extends WidgetProps<MuiWidgetBinding> = WidgetProps<MuiWidgetBinding>>(
     {
         type,
         multiline,
@@ -158,7 +158,7 @@ export const StringRendererDebounced = <P extends WidgetProps<{}, MuiWidgetBindi
     </React.Fragment>
 }
 
-export const TextRendererDebounced = <P extends WidgetProps<{}, MuiWidgetBinding> = WidgetProps<{}, MuiWidgetBinding>>(
+export const TextRendererDebounced = <P extends WidgetProps<MuiWidgetBinding> = WidgetProps<MuiWidgetBinding>>(
     {
         schema,
         ...props
@@ -181,7 +181,7 @@ export const TextRendererDebounced = <P extends WidgetProps<{}, MuiWidgetBinding
     />
 }
 
-export const NumberRendererDebounced = <P extends WidgetProps<{}, MuiWidgetBinding> = WidgetProps<{}, MuiWidgetBinding>>(props: P & WithScalarValue & Omit<NumberRendererProps, 'onKeyPress' | 'onKeyPressNative'> & StringRendererDebouncedProps): React.ReactElement => {
+export const NumberRendererDebounced = <P extends WidgetProps<MuiWidgetBinding> = WidgetProps<MuiWidgetBinding>>(props: P & WithScalarValue & Omit<NumberRendererProps, 'onKeyPress' | 'onKeyPressNative'> & StringRendererDebouncedProps): React.ReactElement => {
     const {schema, inputProps: inputPropsProps = {}, steps = 'any'} = props
     const schemaType = schema.get('type') as string | undefined
     const inputProps = React.useMemo(() => {