@commercetools-uikit/collapsible-motion
Version:
A component which allows building collapsible elements with an arbitrary height.
48 lines (47 loc) • 1.68 kB
TypeScript
import { ReactNode, CSSProperties, LegacyRef } from 'react';
export type TContainerStyles = {
height?: string | number;
overflow?: string;
visibility?: string;
name?: string;
animation?: string;
} & CSSProperties;
export type TRenderFunctionOptions = {
isOpen: boolean;
containerStyles: TContainerStyles;
toggle: () => void;
registerContentNode: TNodeRefObject;
};
export type TCollapsibleMotionProps = {
/**
* A render function, called with the following named arguments: `isOpen` (boolean), `toggle` (function),
* `containerStyles` (css-in-js object), `registerContentNode` (React reference to be used on the animated container).
* <br/>
* Siganture: `({ isOpen, containerStyles, toggle, registerContentNode }) => React.node`
*/
children: (options: TRenderFunctionOptions) => ReactNode;
/**ReactNode
* Determines the state of the toggle `isOpen`. Setting this prop will make the component **controlled**
*/
isClosed?: boolean;
/**
* A callback function called when the `toggle` function is called. This prop is required when the component is **controlled**.
*/
onToggle?: () => void;
/**
* The minimal height of the container being animated.
*/
minHeight?: number;
/**
*The initial value to the internal toggle state `isOpen`.
*/
isDefaultClosed?: boolean;
};
type TNodeRefObject = {
clientHeight: number;
} & LegacyRef<HTMLDivElement>;
declare const CollapsibleMotion: {
({ ...props }: TCollapsibleMotionProps): import("@emotion/react/jsx-runtime").JSX.Element;
displayName: string;
};
export default CollapsibleMotion;