From e6d32d8905ae6ebf0bef8b21bcdfe71b4c2b83df Mon Sep 17 00:00:00 2001 From: Quentin Deroubaix Date: Wed, 20 Dec 2023 14:51:31 +0100 Subject: [PATCH] fix: types for react --- .../samples/accordion/CustomHeaders.route.tsx | 2 +- .../samples/accordion/TogglePanels.route.tsx | 4 +- .../src/app/samples/alert/Config.route.tsx | 2 +- react/headless/src/config.tsx | 20 +++--- .../src/components/accordion/accordion.tsx | 71 ++++++++++--------- react/lib/src/components/alert/alert.tsx | 9 ++- 6 files changed, 56 insertions(+), 52 deletions(-) diff --git a/react/demo/src/app/samples/accordion/CustomHeaders.route.tsx b/react/demo/src/app/samples/accordion/CustomHeaders.route.tsx index b2a7b9756f..b6fe59bd47 100644 --- a/react/demo/src/app/samples/accordion/CustomHeaders.route.tsx +++ b/react/demo/src/app/samples/accordion/CustomHeaders.route.tsx @@ -6,7 +6,7 @@ import '@agnos-ui/common/samples/accordion/custom.scss'; import BODY from '@agnos-ui/common/samples/accordion/body.txt?raw'; const AccordionDemo = () => { - const refAccordion = useRef(); + const refAccordion = useRef(null); const [thirdItemDisabled, setThirdItemDisabled] = useState(false); const Collapse = (props: {slotContext: AccordionItemContext}) => { diff --git a/react/demo/src/app/samples/accordion/TogglePanels.route.tsx b/react/demo/src/app/samples/accordion/TogglePanels.route.tsx index 0b2b5bf5b0..27d73a0014 100644 --- a/react/demo/src/app/samples/accordion/TogglePanels.route.tsx +++ b/react/demo/src/app/samples/accordion/TogglePanels.route.tsx @@ -4,8 +4,8 @@ import {useRef} from 'react'; import BODY from '@agnos-ui/common/samples/accordion/body.txt?raw'; const AccordionDemo = () => { - const refAccordion = useRef(); - const refSecondPanel = useRef(); + const refAccordion = useRef(null); + const refSecondPanel = useRef(null); return ( <> diff --git a/react/demo/src/app/samples/alert/Config.route.tsx b/react/demo/src/app/samples/alert/Config.route.tsx index 16d59f4c2d..ee2f7caf36 100644 --- a/react/demo/src/app/samples/alert/Config.route.tsx +++ b/react/demo/src/app/samples/alert/Config.route.tsx @@ -14,7 +14,7 @@ export enum AlertStatus { } const DefaultDemo = () => { - const alertRef = useRef(); + const alertRef = useRef(null); const [animationOnInit, setAnimationOnInit] = useState(true); const [animation, setanimation] = useState(true); diff --git a/react/headless/src/config.tsx b/react/headless/src/config.tsx index e2f4bd2c37..95cec03d7a 100644 --- a/react/headless/src/config.tsx +++ b/react/headless/src/config.tsx @@ -1,5 +1,5 @@ import type {Widget, WidgetFactory, WidgetProps, WidgetState} from '@agnos-ui/core/types'; -import {createWidgetsConfig, type Partial2Levels, type WidgetsConfigStore} from '@agnos-ui/core/config'; +import {createWidgetsConfig, type WidgetsConfigStore, type WidgetsConfig as CoreWidgetsConfig, type Partial2Levels} from '@agnos-ui/core/config'; import {computed} from '@amadeus-it-group/tansu'; import type {ReactNode} from 'react'; import {createContext, useContext, useEffect, useMemo} from 'react'; @@ -10,7 +10,11 @@ import {usePropsAsStore} from './utils/stores'; export * from '@agnos-ui/core/config'; export type WidgetsConfig = { - [WidgetName in keyof import('@agnos-ui/core/config').WidgetsConfig]: AdaptPropsSlots; + [WidgetName in keyof CoreWidgetsConfig]: AdaptPropsSlots; +}; +type DefaultConfigInput = Partial2Levels & { + adaptParentConfig?: (config: Partial2Levels) => Partial2Levels; + children?: ReactNode | undefined; }; export const widgetsConfigFactory = ( @@ -62,14 +66,7 @@ export const widgetsConfigFactory = * ``` */ - const WidgetsDefaultConfig = ({ - children, - adaptParentConfig, - ...props - }: Partial2Levels & { - adaptParentConfig?: (config: Partial2Levels) => Partial2Levels; - children?: ReactNode | undefined; - }) => { + const WidgetsDefaultConfig = ({children, adaptParentConfig, ...props}: DefaultConfigInput) => { const config$ = useContext(widgetsConfigContext); let storeRecreated = false; @@ -97,5 +94,4 @@ export const widgetsConfigFactory = { const defaultConfig: Partial = { slotItemStructure: DefaultSlotStructure, }; -export const AccordionItem = forwardRef(function AccordionItem(props: PropsWithChildren>, ref) { - const {registerItem} = useContext(AccordionDIContext); - const [state, widget] = useWidgetWithConfig(registerItem as WidgetFactory, props, null, { - ...defaultConfig, - }); - const slotContext: AccordionItemContext = { - state, - widget: widget, - }; - const refSetAccordionItem = useDirective(widget.directives.accordionItemDirective); - useImperativeHandle(ref, () => widget.api, []); - useEffect(() => { - widget.api.initDone(); - }, []); - return ( -
- -
- ); -}); - -export const Accordion = forwardRef(function Accordion(props: PropsWithChildren>, ref) { - const [state, widget] = useWidgetWithConfig(createAccordion, props, 'accordion'); - useImperativeHandle(ref, () => widget.api, []); - const refSetAccordion = useDirective(widget.directives.accordionDirective); - return ( - -
- {props.children} +export const AccordionItem: ForwardRefExoticComponent> & RefAttributes> = forwardRef( + function AccordionItem(props: PropsWithChildren>, ref: ForwardedRef) { + const {registerItem} = useContext(AccordionDIContext); + const [state, widget] = useWidgetWithConfig(registerItem as WidgetFactory, props, null, { + ...defaultConfig, + }); + const slotContext: AccordionItemContext = { + state, + widget: widget, + }; + const refSetAccordionItem = useDirective(widget.directives.accordionItemDirective); + useImperativeHandle(ref, () => widget.api, []); + useEffect(() => { + widget.api.initDone(); + }, []); + return ( +
+
- - ); -}); + ); + }, +); + +export const Accordion: ForwardRefExoticComponent> & RefAttributes> = forwardRef( + function Accordion(props: PropsWithChildren>, ref: ForwardedRef) { + const [state, widget] = useWidgetWithConfig(createAccordion, props, 'accordion'); + useImperativeHandle(ref, () => widget.api, []); + const refSetAccordion = useDirective(widget.directives.accordionDirective); + return ( + +
+ {props.children} +
+ + ); + }, +); diff --git a/react/lib/src/components/alert/alert.tsx b/react/lib/src/components/alert/alert.tsx index 9cca7ff42e..95c6847695 100644 --- a/react/lib/src/components/alert/alert.tsx +++ b/react/lib/src/components/alert/alert.tsx @@ -1,9 +1,9 @@ -import type {AlertContext, AlertProps} from '@agnos-ui/react-headless/components/alert'; +import type {AlertApi, AlertContext, AlertProps} from '@agnos-ui/react-headless/components/alert'; import {createAlert} from '@agnos-ui/react-headless/components/alert'; import {Slot} from '@agnos-ui/react-headless/slot'; import {useWidgetWithConfig} from '@agnos-ui/react-headless/config'; import {useDirective} from '@agnos-ui/react-headless/utils/directive'; -import type {PropsWithChildren} from 'react'; +import type {PropsWithChildren, ForwardedRef, ForwardRefExoticComponent, RefAttributes} from 'react'; import {forwardRef, useImperativeHandle} from 'react'; export * from '@agnos-ui/react-headless/components/alert'; @@ -23,7 +23,10 @@ const defaultConfig: Partial = { slotStructure: DefaultSlotStructure, }; -export const Alert = forwardRef(function Alert(props: PropsWithChildren>, ref) { +export const Alert: ForwardRefExoticComponent> & RefAttributes> = forwardRef(function Alert( + props: PropsWithChildren>, + ref: ForwardedRef, +) { const [state, widget] = useWidgetWithConfig(createAlert, props, 'alert', {...defaultConfig, slotDefault: props.children}); const refTransition = useDirective(widget.directives.transitionDirective); useImperativeHandle(ref, () => widget.api, []);