shelving/ui/form/Clickable.d.ts

Toolkit for using data in JavaScript.

import type { MouseEvent, ReactElement, ReactNode } from "react";
import type { Path } from "../../util/path.js";
import type { ImmutableURI, URIString } from "../../util/uri.js";
import type { OptionalChildProps } from "../util/props.js";
/***
 * Handler for a clickable `onClick` event.
 * - Returned value (if defined) is notified to the user using `notifySuccess()`
 * - Thrown value is notified to the user using `notifyError()`
 */
export type ClickableCallback = (event: MouseEvent<HTMLButtonElement>) => ReactNode | void | PromiseLike<ReactNode | void>;
/** Props for a thing that can be clicked, either has a string `href` link or an `onClick` callback handler. */
export interface ClickableProps extends OptionalChildProps {
    /** Whether the clickable is currently disabled. */
    disabled?: boolean | undefined;
    /** If present then render this element as an `<a>` link (takes precidence over `onClick`). */
    href?: ImmutableURI | Path | URIString | undefined;
    /** If present then render this element as a `<button>` */
    onClick?: ClickableCallback | undefined;
    /** Target, e.g. `_blank` */
    target?: string | undefined;
    /** If `href` is present then this is the suggested filename for downloading. */
    download?: string | undefined;
    /** Title shown on hover. */
    title?: string | undefined;
}
export interface StylableClickableProps extends ClickableProps {
    className?: string | undefined;
}
/** Return either a `<button>` or an `<a href="">` based on whether an `onClick` or `href` prop is provided. */
export declare function Clickable(props: StylableClickableProps): ReactElement;
/** Return an `<a href="">` element. */
export declare function LinkClickable({ disabled, href, title, target, download, children, className, }: StylableClickableProps): ReactElement;
/** Return a `<button>` element. */
export declare function ButtonClickable({ disabled, onClick, title, children, className }: StylableClickableProps): ReactElement;