lucid-ui
Version:
A UI component library from Xandr.
243 lines • 11.3 kB
TypeScript
import React from 'react';
import PropTypes from 'prop-types';
import { StandardProps, Overwrite } from '../../util/component-types';
import * as reducers from './VerticalListMenu.reducers';
import { ICollapsibleProps } from '../Collapsible/Collapsible';
export interface IVerticalListMenuPropsRaw extends StandardProps {
/** Indicates which of the \`VerticalListMenu.Item\` children are currently
selected. You can also put the \`isSelected\` prop directly on the
\`VerticalListMenu.Item\`s if you wish. */
selectedIndices: number[];
/** Indicates which of the \`VerticalListMenu.Item\` children are currently
expanded. You can also put the \`isExpanded\` prop directly on the
\`VerticalListMenu.Item\`s if you wish. */
expandedIndices: number[];
/** Callback fired when the user selects a \`VerticalListMenu.Item\`.*/
onSelect: (index: number, { event, props, }: {
event: React.MouseEvent;
props: IVerticalListMenuItemProps;
}) => void;
/** Callback fired when the user expands or collapses an expandable
\`VerticalListMenu.Item\`. */
onToggle: (index: number, { event, props, }: {
event: React.MouseEvent;
props: IVerticalListMenuItemProps;
}) => void;
}
export declare type IVerticalListMenuProps = Overwrite<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, IVerticalListMenuPropsRaw>;
interface IVerticalListMenuItemPropsRaw extends StandardProps {
/**
* Show or hide the expand button. Should be \`true\` if you want to nest menus.
*/
hasExpander?: boolean;
/**
* Determines the visibility of nested menus.
*/
isExpanded?: boolean;
/**
* If \`true\` then a small bar on the left side of the item will be
* shown indicating this item is selected.
*/
isSelected?: boolean;
/**
* Determines the visibility of the small bar on the left when the user
* hovers over the item. This should indicate to the user that an item
* is clickable.
*/
isActionable?: boolean;
/** Called when the user clicks the main body of the item. */
onSelect?: (index: number, { event, props, }: {
event: React.MouseEvent;
props: IVerticalListMenuItemProps;
}) => void;
/** Called when the user clicks the expand button. */
onToggle?: (index: number, { event, props, }: {
event: React.MouseEvent;
props: IVerticalListMenuItemProps;
}) => void;
/** Props that are passed through to the underlying Collapsible component
if the item has children. */
Collapsible?: Partial<ICollapsibleProps>;
}
export declare type IVerticalListMenuItemProps = Overwrite<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, IVerticalListMenuItemPropsRaw>;
export interface IVerticalListMenuState {
selectedIndices?: number[];
expandedIndices?: number[];
}
declare class VerticalListMenu extends React.Component<IVerticalListMenuProps, IVerticalListMenuState> {
static displayName: string;
static Item: {
(_props: IVerticalListMenuItemProps): null;
peek: {
description: string;
};
displayName: string;
propTypes: {
/**
Show or hide the expand button. Should be \`true\` if you want to
nest menus.
*/
hasExpander: PropTypes.Requireable<boolean>;
/**
Determines the visibility of nested menus.
*/
isExpanded: PropTypes.Requireable<boolean>;
/**
If \`true\` then a small bar on the left side of the item will be
shown indicating this item is selected.
*/
isSelected: PropTypes.Requireable<boolean>;
/**
Determines the visibility of the small bar on the left when the user
hovers over the item. This should indicate to the user that an item
is clickable.
*/
isActionable: PropTypes.Requireable<boolean>;
/**
Called when the user clicks the main body of the item. Signature:
\`(index, { event, props}) => {}\`
*/
onSelect: PropTypes.Requireable<(...args: any[]) => any>;
/**
Called when the user clicks the expand button. Signature:
\`(index, { event, props}) => {}\`
*/
onToggle: PropTypes.Requireable<(...args: any[]) => any>;
/**
Props that are passed through to the underlying Collapsible component
if the item has children.
*/
Collapsible: PropTypes.Requireable<PropTypes.InferProps<{
children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
className: PropTypes.Requireable<string>;
isExpanded: PropTypes.Requireable<boolean>;
isAnimated: PropTypes.Requireable<boolean>;
isMountControlled: PropTypes.Requireable<boolean>;
mountControlThreshold: PropTypes.Requireable<number>;
onRest: PropTypes.Requireable<(...args: any[]) => any>;
rootType: PropTypes.Requireable<any>;
}>>;
};
};
static peek: {
description: string;
categories: string[];
madeFrom: string[];
};
static reducers: typeof reducers;
static definition: {
statics: {
Item: {
(_props: IVerticalListMenuItemProps): null;
peek: {
description: string;
};
displayName: string;
propTypes: {
/**
Show or hide the expand button. Should be \`true\` if you want to
nest menus.
*/
hasExpander: PropTypes.Requireable<boolean>;
/**
Determines the visibility of nested menus.
*/
isExpanded: PropTypes.Requireable<boolean>;
/**
If \`true\` then a small bar on the left side of the item will be
shown indicating this item is selected.
*/
isSelected: PropTypes.Requireable<boolean>;
/**
Determines the visibility of the small bar on the left when the user
hovers over the item. This should indicate to the user that an item
is clickable.
*/
isActionable: PropTypes.Requireable<boolean>;
/**
Called when the user clicks the main body of the item. Signature:
\`(index, { event, props}) => {}\`
*/
onSelect: PropTypes.Requireable<(...args: any[]) => any>;
/**
Called when the user clicks the expand button. Signature:
\`(index, { event, props}) => {}\`
*/
onToggle: PropTypes.Requireable<(...args: any[]) => any>;
/**
Props that are passed through to the underlying Collapsible component
if the item has children.
*/
Collapsible: PropTypes.Requireable<PropTypes.InferProps<{
children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
className: PropTypes.Requireable<string>;
isExpanded: PropTypes.Requireable<boolean>;
isAnimated: PropTypes.Requireable<boolean>;
isMountControlled: PropTypes.Requireable<boolean>;
mountControlThreshold: PropTypes.Requireable<number>;
onRest: PropTypes.Requireable<(...args: any[]) => any>;
rootType: PropTypes.Requireable<any>;
}>>;
};
};
reducers: typeof reducers;
peek: {
description: string;
categories: string[];
madeFrom: string[];
};
};
};
static propTypes: {
/**
Regular \`children\` aren't really used in this component, but if you do
add them they will be placed at the end of the component. You should be
using \`VerticalListMenu.Item\`s instead of regular children.
*/
children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
/**
Appended to the component-specific class names set on the root element.
*/
className: PropTypes.Requireable<string>;
/**
Passed through to the root element.
*/
style: PropTypes.Requireable<object>;
/**
Indicates which of the \`VerticalListMenu.Item\` children are currently
selected. You can also put the \`isSelected\` prop directly on the
\`VerticalListMenu.Item\`s if you wish.
*/
selectedIndices: PropTypes.Requireable<(number | null | undefined)[]>;
/**
Indicates which of the \`VerticalListMenu.Item\` children are currently
expanded. You can also put the \`isExpanded\` prop directly on the
\`VerticalListMenu.Item\`s if you wish.
*/
expandedIndices: PropTypes.Requireable<(number | null | undefined)[]>;
/**
Callback fired when the user selects a \`VerticalListMenu.Item\`.
Signature: \`(index, { event, props }) => {}\`
*/
onSelect: PropTypes.Requireable<(...args: any[]) => any>;
/**
Callback fired when the user expands or collapses an expandable
\`VerticalListMenu.Item\`. Signature:
\`(index, { event, props }) => {}\`
*/
onToggle: PropTypes.Requireable<(...args: any[]) => any>;
};
static defaultProps: {
onSelect: (...args: any[]) => void;
onToggle: (...args: any[]) => void;
expandedIndices: never[];
selectedIndices: never[];
};
render(): JSX.Element;
handleToggle: (index: number, itemChildProp: IVerticalListMenuItemProps, event: React.MouseEvent) => void;
handleClickItem: (index: number, itemChildProp: IVerticalListMenuItemProps, event: React.MouseEvent) => void;
}
declare const _default: typeof VerticalListMenu & import("../../util/state-management").IHybridComponent<IVerticalListMenuProps, IVerticalListMenuState>;
export default _default;
export { VerticalListMenu as VerticalListMenuDumb };
//# sourceMappingURL=VerticalListMenu.d.ts.map