Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(layout): Update return type of useSlotTargetsFactory() #639

Merged
merged 1 commit into from
Dec 27, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions build/api/layout.api.md
Original file line number Diff line number Diff line change
Expand Up @@ -1052,7 +1052,7 @@ export const SidebarRightSlotTargets: Readonly<Readonly<{
};
}>>;

// @public (undocumented)
// @public @deprecated (undocumented)
type SlotComponentsRecords<K extends string> = Readonly<{
readonly [P in PascalCase<K>]: ComponentType;
}>;
Expand Down Expand Up @@ -1215,7 +1215,7 @@ export function useElementInsets(elementRef: RefObject<HTMLElement>): ContainerI
const useGetLayoutPanelsStateContext: () => GetLayoutPanelsStateContextType;

// @public (undocumented)
function useHasActiveSlotsFactory<T extends SlotComponentsRecords<string>>(SlotTargets: T): (...slots: ReadonlyArray<keyof T & string>) => boolean;
function useHasActiveSlotsFactory<T extends SlotTargetComponentsRecord<string>>(SlotTargets: T): (...slots: ReadonlyArray<keyof T & string>) => boolean;

// @public @deprecated (undocumented)
const useLayoutContainerWidth: typeof useContainerWidth;
Expand All @@ -1239,12 +1239,12 @@ export const useSafeAreaInsetsContext: () => ContainerInsets;
const useSetLayoutPanelsStateContext: () => SetLayoutPanelsStateContextType;

// @public
function useSlotTargetsFactory<R extends SlotComponentsRecords<string>>(SlotTargets: R): <T>(slots: ReadonlyArray<keyof R & string>, override?: T | undefined) => NonNullable<T> | FunctionComponentElement< {
function useSlotTargetsFactory<R extends SlotTargetComponentsRecord<string>>(SlotTargets: R): <T>(slots: ReadonlyArray<keyof R & string>, override?: T | undefined) => NonNullable<T> | FunctionComponentElement< {
children?: ReactNode;
}> | null;

// @public @deprecated
function useTargetsIfActiveFactory<R extends SlotComponentsRecords<string>>(SlotTargets: R): <T>(slots: readonly (keyof R & string)[], override?: T | undefined) => FunctionComponentElement< {
function useTargetsIfActiveFactory<R extends SlotTargetComponentsRecord<string>>(SlotTargets: R): <T>(slots: readonly (keyof R & string)[], override?: T | undefined) => FunctionComponentElement< {
children?: ReactNode;
}> | NonNullable<T> | null;

Expand Down
13 changes: 7 additions & 6 deletions packages/layout/src/slots/contexts.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import { createNonNullableContextFactory, noop } from '@contember/react-utils'
import { deprecate } from '@contember/utilities'
import { ComponentType, ElementType, Fragment, ReactNode, RefObject, createElement, useCallback } from 'react'
import { SlotComponentsRecords } from './types'
import { Fragment, createElement, useCallback } from 'react'
import { createSlotTargetComponent } from './createSlotTargetComponent'
import { SlotTargetComponentsRecord } from './types'

export type SlotsRefMap = Map<string, HTMLElement>
export type RegisterSlotTarget = (id: string, name: string, ref: HTMLElement) => void;
Expand All @@ -10,7 +11,7 @@ export type UnregisterSlotTarget = (id: string, name: string) => void;
export type ActiveSlotPortalsContextType = Set<string>;
export const [ActiveSlotPortalsContext, useActiveSlotPortalsContext] = createNonNullableContextFactory<ActiveSlotPortalsContextType>('ActiveSlotPortalsContext', new Set())

export function useHasActiveSlotsFactory<T extends SlotComponentsRecords<string>>(SlotTargets: T) {
export function useHasActiveSlotsFactory<T extends SlotTargetComponentsRecord<string>>(SlotTargets: T) {
const activeSlotPortals = useActiveSlotPortalsContext()

return useCallback((...slots: ReadonlyArray<keyof T & string>) => {
Expand All @@ -22,7 +23,7 @@ export function useHasActiveSlotsFactory<T extends SlotComponentsRecords<string>
* Creates a function that returns a list of slot targets if any of them are active.
* @param SlotTargets - List of slot targets to create
*/
export function useSlotTargetsFactory<R extends SlotComponentsRecords<string>>(SlotTargets: R) {
export function useSlotTargetsFactory<R extends SlotTargetComponentsRecord<string>>(SlotTargets: R) {
const activeSlotPortals = useActiveSlotPortalsContext()

return useCallback(function createSlotTargets<T>(slots: ReadonlyArray<keyof R & string>, override?: T) {
Expand All @@ -32,7 +33,7 @@ export function useSlotTargetsFactory<R extends SlotComponentsRecords<string>>(S
} else {
return createElement(Fragment, {}, ...slots.map(slot => {
if (slot in SlotTargets) {
const Target = SlotTargets[slot] as ComponentType
const Target = SlotTargets[slot] as ReturnType<typeof createSlotTargetComponent<typeof slot>>

return createElement(Target, {
key: `multi-element:${slot}`,
Expand All @@ -51,7 +52,7 @@ export function useSlotTargetsFactory<R extends SlotComponentsRecords<string>>(S
* Fallback for `useSlotTargetsFactory` for backwards compatibility.
* @deprecated Use `useSlotTargetsFactory` instead
*/
export function useTargetsIfActiveFactory<R extends SlotComponentsRecords<string>>(SlotTargets: R) {
export function useTargetsIfActiveFactory<R extends SlotTargetComponentsRecord<string>>(SlotTargets: R) {
deprecate('1.3.0', true, '`useTargetsIfActiveFactory()`', '`useSlotTargetsFactory()`')
return useSlotTargetsFactory(SlotTargets)
}
Expand Down
3 changes: 2 additions & 1 deletion packages/layout/src/slots/types.ts
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import { ComponentClassNameProps, PascalCase } from '@contember/utilities'
import { CSSProperties, ComponentType, ElementType, ReactNode } from 'react'
import { ComponentType, ElementType, ReactNode } from 'react'
import { createSlotSourceComponent } from './createSlotSourceComponent'
import { createSlotTargetComponent } from './createSlotTargetComponent'

/** @deprecated No alternative since 1.4.0 */
export type SlotComponentsRecords<K extends string> = Readonly<{
readonly [P in PascalCase<K>]: ComponentType
}>
Expand Down
Loading