import classNames from "classnames" ; import * as React from "react" ; import { Utils } from "@blueprintjs/core" ; export const WARNING_BASE_EXAMPLE_DEPRECATED = `[Blueprint] BaseExample is deprecated and will be removed in the next beta. Compose new Example component instead of extending BaseExample.` ; export interface IBaseExampleProps { id : string ; themeName : string ; } deprecated export class BaseExample < S extends { } > extends React . Component < IBaseExampleProps , S > { /** Define this prop to add a className to the example container */ protected className : string | undefined ; private hasDelayedBeforeInitialRender = false ; private hasCompletedInitialRender = false ; public shouldComponentUpdate ( nextProps , nextState ) { return ( ( this . hasDelayedBeforeInitialRender && ! this . hasCompletedInitialRender ) || ! Utils . shallowCompareKeys ( this . props , nextProps ) || ! Utils . shallowCompareKeys ( this . state , nextState ) ) ; } public componentWillMount ( ) { requestAnimationFrame ( ( ) => { this . hasDelayedBeforeInitialRender = true ; this . forceUpdate ( ) ; } ) ; } public componentDidMount ( ) { console . warn ( WARNING_BASE_EXAMPLE_DEPRECATED ) ; } public componentDidUpdate ( _nextProps , _nextState ) { if ( ! this . hasCompletedInitialRender ) { this . hasCompletedInitialRender = true ; } } public render ( ) { if ( ! this . hasDelayedBeforeInitialRender ) { return null ; } return ( < div className = { classNames ( "docs-example-frame" , this . className ) } data - example - id = { this . props . id } > < div className = "docs-example" > { this . renderExample ( ) } < /div> < div className = "docs-example-options" > { this . actuallyRenderOptions ( ) } < /div> < /div>); } /**
     * Render the example element. Return any valid React node.
     */ protected renderExample ( ) { return undefined ; } /**
     * Render the options controls. Return a single element for simple mode, or an array of arrays
     * of elements to generate columns: each array will be its own column. When using array mode,
     * the inner elements will each need the `key` prop.
     */ protected renderOptions ( ) { return [ ] ; } private actuallyRenderOptions ( ) { const options = this . renderOptions ( ) ; if ( Array . isArray ( options ) ) { return options . map ( ( column , i ) => ( < div className = "docs-react-options-column" key = { i } > { column } < /div>)); } else { return options ; } } } /** Event handler that exposes the target element's value as a boolean. */ export function handleBooleanChange ( handler ) { return ( event ) => handler ( ( event . target as HTMLInputElement ) . checked ) ; } /** Event handler that exposes the target element's value as a string. */ export function handleStringChange ( handler ) { return ( event ) => handler ( ( event . target as HTMLInputElement ) . value ) ; } /** Event handler that exposes the target element's value as an inferred generic type. */ export function handleValueChange < T > ( handler ) { return ( event ) => handler ( ( ( event . target as HTMLInputElement ) . value as unknown ) as T ) ; } /** Event handler that exposes the target element's value as a number. */ export function handleNumberChange ( handler ) { return handleStringChange ( value => handler ( + value ) ) ; }