@accelint/design-toolkit
Version:
An open-source component library to serve as part of the entire ecosystem of UX for Accelint.
63 lines (60 loc) • 2.62 kB
TypeScript
import { Payload } from '@accelint/bus';
import { UniqueId } from '@accelint/core';
import { RefAttributes, PropsWithChildren, ComponentProps } from 'react';
import { Pressable } from 'react-aria-components';
import { ViewStackEventTypes } from './events.js';
type ViewStackProps = RefAttributes<HTMLDivElement> & PropsWithChildren<{
id: UniqueId;
defaultView?: UniqueId;
onChange?: (view: UniqueId | null) => void;
}>;
type ViewStackViewProps = RefAttributes<HTMLDivElement> & PropsWithChildren<{
id: UniqueId;
}>;
type ViewStackBackEvent = Payload<typeof ViewStackEventTypes.back, {
stack: UniqueId;
}>;
type ViewStackClearEvent = Payload<typeof ViewStackEventTypes.clear, {
stack: UniqueId;
}>;
type ViewStackResetEvent = Payload<typeof ViewStackEventTypes.reset, {
stack: UniqueId;
}>;
type ViewStackPushEvent = Payload<typeof ViewStackEventTypes.push, {
view: UniqueId;
}>;
type ViewStackEvent = ViewStackBackEvent | ViewStackClearEvent | ViewStackResetEvent | ViewStackPushEvent;
type SimpleEvents = 'back' | 'clear' | 'reset' | UniqueId;
type TargetedEvents = `back:${UniqueId}` | `clear:${UniqueId}` | `reset:${UniqueId}`;
type ChainedEvents = (SimpleEvents | TargetedEvents)[];
type ViewStackTriggerProps = {
children: ComponentProps<typeof Pressable>['children'];
/**
* __SimpleEvents__ allow the easiest implementation of events, but come with some restrictions:
* - The literal commands `back | clear | reset` will only work inside of the context of a ViewStack
* - When passing a view's UniqueId the behavior is always to push that id onto it's parent's stack
*
* __TargetedEvents__ allow for external control of a ViewStack, the UniqueId of a Stack is passed to know which stack to affect
*
* __ChainedEvents__ allow a list of events from a single control to enable multiple behaviors
*
* @example
* // Clear a stack and then push a view on:
* ['clear', myViewId]
*
* // Reset multiple stacks:
* [`reset:${stackOneId}`, `reset:${stackTwoId}`]
*
* // Hydrate a stack with multiple views:
* [viewOneId, viewTwoId, viewThreeId]
*/
for: SimpleEvents | TargetedEvents | ChainedEvents;
};
type ViewStackContextValue = {
parent: UniqueId | null;
stack: string[];
view: UniqueId | null;
register: (view: UniqueId) => void;
unregister: (view: UniqueId) => void;
};
export type { ViewStackBackEvent, ViewStackClearEvent, ViewStackContextValue, ViewStackEvent, ViewStackProps, ViewStackPushEvent, ViewStackResetEvent, ViewStackTriggerProps, ViewStackViewProps };