mirror of
https://github.com/zoriya/v10.git
synced 2026-08-09 23:58:06 +00:00
44 lines
1.8 KiB
TypeScript
44 lines
1.8 KiB
TypeScript
import { RenderProp } from "./types.js";
|
|
import { StateAttrMap } from "@videojs/core/dom";
|
|
import { CSSProperties, ReactElement, Ref } from "react";
|
|
//#region src/utils/use-render.d.ts
|
|
type IntrinsicTagName = keyof React.JSX.IntrinsicElements;
|
|
interface UseRenderComponentProps<State> {
|
|
className?: string | ((state: State) => string | undefined) | undefined;
|
|
style?: CSSProperties | ((state: State) => CSSProperties | undefined) | undefined;
|
|
render?: RenderProp<State> | undefined;
|
|
}
|
|
interface UseRenderParameters<State, RenderedElementType extends Element> {
|
|
state: State;
|
|
ref?: Ref<RenderedElementType> | Ref<RenderedElementType>[] | undefined;
|
|
props?: object | object[] | undefined;
|
|
stateAttrMap?: StateAttrMap<State> | undefined;
|
|
}
|
|
/**
|
|
* Render a UI component element.
|
|
*
|
|
* Handles:
|
|
* - Default tag rendering
|
|
* - Render prop (element or function)
|
|
* - Props merging (event handlers chained, className concatenated, style merged)
|
|
* - Ref composition
|
|
* - className/style as functions of state
|
|
*
|
|
* @public
|
|
* @example
|
|
* ```tsx
|
|
* return renderElement('button', componentProps, {
|
|
* state,
|
|
* ref: [forwardedRef, buttonRef],
|
|
* props: [{ type: 'button' }, elementProps, getButtonProps],
|
|
* });
|
|
* ```
|
|
*/
|
|
declare function renderElement<State extends object, RenderedElementType extends Element, TagName extends IntrinsicTagName>(element: TagName, componentProps: UseRenderComponentProps<State>, params: UseRenderParameters<State, RenderedElementType>): ReactElement | null;
|
|
declare namespace renderElement {
|
|
type ComponentProps<State> = UseRenderComponentProps<State>;
|
|
type Parameters<State, RenderedElementType extends Element> = UseRenderParameters<State, RenderedElementType>;
|
|
}
|
|
//#endregion
|
|
export { UseRenderComponentProps, UseRenderParameters, renderElement };
|
|
//# sourceMappingURL=use-render.d.ts.map
|