import classNames from "classnames" ; import * as React from "react" ; import { Props } from "@blueprintjs/core" ; export interface IExampleProps < T = { } > extends Props { /**
     * Identifier of this example.
     * This will appear as the `data-example-id` attribute on the DOM element.
     */ id : string ; /**
     * Container for arbitary data passed to each example from the parent
     * application. This prop is ignored by the `<Example>` component; it is
     * available for your example implementations to access by providing a `<T>`
     * type to this interface. Pass actual `data` when defining your example map
     * for the `ReactExampleTagRenderer`.
     *
     * A container like this is necessary because unknown props on the
     * `<Example>` component are passed to its underlying DOM element, so adding
     * your own props will result in React "unknown prop" warnings.
     */ data ? : T ; } /**
 * Props supported by the `Example` component.
 * Additional props will be spread to the root `<div>` element.
 */ export interface IDocsExampleProps extends IExampleProps { /**
     * Options for the example, which will typically appear in a narrow column
     * to the right of the example.
     */ options : React . ReactNode ; default showOptionsBelowExample ? : boolean ; /**
     * HTML markup for the example, which will be directly injected into the
     * example container using `dangerouslySetInnerHTML`.
     *
     * This prop is mutually exclusive with and takes priority over `children`.
     */ html ? : string ; default forceUpdate ? : boolean ; } /**
 * Container for an example and its options.
 *
 * ```tsx
 * import { Example, IExampleProps } from "@blueprintjs/docs-theme";
 * // use IExampleProps as your props type,
 * // then spread it to <Example> below
 * export class MyExample extends React.PureComponent<IExampleProps, [your state]> {
 *     public render() {
 *         const options = (
 *             <>
 *                  --- render options here ---
 *             </>
 *         );
 *         return (
 *             <Example options={options} {...this.props}>
 *                 --- render examples here ---
 *             </Example>
 *         );
 *     }
 * ```
 */ export class Example extends React . PureComponent < IDocsExampleProps > { public static defaultProps : Partial < IDocsExampleProps > = { forceUpdate : true , showOptionsBelowExample : false , } ; private hasDelayedInitialRender = false ; public render ( ) { const { children , className , data , forceUpdate , html , id , options , showOptionsBelowExample , ... htmlProps } = this . props ; if ( forceUpdate && ! this . hasDelayedInitialRender ) { return null ; } const classes = classNames ( "docs-example-frame" , showOptionsBelowExample ? "docs-example-frame-column" : "docs-example-frame-row" , className ) ; const example = html == null ? ( < div className = "docs-example" > { children } < /div>) : (<div className="docs-example" dangerouslySetInnerHTML={{ __html: html }}/ > ) ; return ( < div className = { classes } data - example - id = { id } { ... htmlProps } > { example } { options && < div className = "docs-example-options" > { options } < /div>} < /div>); } public componentDidMount ( ) { if ( this . props . forceUpdate ) { requestAnimationFrame ( ( ) => { this . hasDelayedInitialRender = true ; this . forceUpdate ( ) ; } ) ; } } }