[docs-app] feat(BreadcrumbsExample): render current as input (#3986)

packages/docs-app/src/examples/core-examples/breadcrumbsExample.tsx

@@ -16,11 +16,23 @@
 
 import * as React from "react";
 
-import { Boundary, Breadcrumbs, Card, H5, IBreadcrumbProps, Label, RadioGroup, Slider } from "@blueprintjs/core";
+import {
+    Boundary,
+    Breadcrumbs,
+    Card,
+    Checkbox,
+    H5,
+    IBreadcrumbProps,
+    InputGroup,
+    Label,
+    RadioGroup,
+    Slider,
+} from "@blueprintjs/core";
 import { Example, handleStringChange, IExampleProps } from "@blueprintjs/docs-theme";
 
 export interface IBreadcrumbsExampleState {
     collapseFrom: Boundary;
+    renderCurrentAsInput: boolean;
     width: number;
 }
 
@@ -41,6 +53,7 @@ const ITEMS: IBreadcrumbProps[] = [
 export class BreadcrumbsExample extends React.PureComponent<IExampleProps, IBreadcrumbsExampleState> {
     public state: IBreadcrumbsExampleState = {
         collapseFrom: Boundary.START,
+        renderCurrentAsInput: false,
         width: 50,
     };
 
@@ -58,6 +71,12 @@ export class BreadcrumbsExample extends React.PureComponent<IExampleProps, IBrea
                     options={COLLAPSE_FROM_RADIOS}
                     selectedValue={this.state.collapseFrom.toString()}
                 />
+                <Checkbox
+                    name="renderCurrent"
+                    label="Render current breadcrumb as input"
+                    onChange={this.handleChangeRenderCurrentAsInput}
+                    checked={this.state.renderCurrentAsInput}
+                />
                 <H5>Example</H5>
                 <Label>Width</Label>
                 <Slider
@@ -71,11 +90,15 @@ export class BreadcrumbsExample extends React.PureComponent<IExampleProps, IBrea
             </>
         );
 
-        const { collapseFrom, width } = this.state;
+        const { collapseFrom, renderCurrentAsInput, width } = this.state;
         return (
             <Example options={options} {...this.props}>
                 <Card elevation={0} style={{ width: `${width}%` }}>
-                    <Breadcrumbs collapseFrom={collapseFrom} items={ITEMS} />
+                    <Breadcrumbs
+                        collapseFrom={collapseFrom}
+                        items={ITEMS}
+                        currentBreadcrumbRenderer={renderCurrentAsInput ? this.renderBreadcrumbInput : undefined}
+                    />
                 </Card>
             </Example>
         );
@@ -86,4 +109,28 @@ export class BreadcrumbsExample extends React.PureComponent<IExampleProps, IBrea
     }
 
     private handleChangeWidth = (width: number) => this.setState({ width });
+    private handleChangeRenderCurrentAsInput = () =>
+        this.setState({ renderCurrentAsInput: !this.state.renderCurrentAsInput });
+
+    private renderBreadcrumbInput = ({ text }: IBreadcrumbProps) => {
+        return <BreadcrumbInput defaultValue={typeof text === "string" ? text : undefined} />;
+    };
+}
+
+/* tslint:disable max-classes-per-file */
+class BreadcrumbInput extends React.PureComponent<IBreadcrumbProps & { defaultValue: string | undefined }> {
+    public state = {
+        text: this.props.defaultValue ?? "",
+    };
+
+    public render() {
+        const { text } = this.state;
+        return <InputGroup placeholder="rename me" value={text} onChange={this.handleChange} />;
+    }
+
+    private handleChange = (event: React.FormEvent<HTMLInputElement>) => {
+        this.setState({
+            text: (event.target as HTMLInputElement).value,
+        });
+    };
 }