Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[docs] Update Drawer example #7211

Open
wants to merge 1 commit into
base: develop
Choose a base branch
from
Open

[docs] Update Drawer example #7211

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
271 changes: 125 additions & 146 deletions packages/docs-app/src/examples/core-examples/drawerExample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/*
* Copyright 2018 Palantir Technologies, Inc. All rights reserved.
* Copyright 2025 Palantir Technologies, Inc. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
Expand Down Expand Up @@ -35,155 +35,127 @@ import {
Switch,
} from "@blueprintjs/core";
import { Example, type ExampleProps, handleBooleanChange, handleStringChange } from "@blueprintjs/docs-theme";
import { IconNames } from "@blueprintjs/icons";

import type { BlueprintExampleData } from "../../tags/types";

export interface DrawerExampleState {
autoFocus: boolean;
canEscapeKeyClose: boolean;
canOutsideClickClose: boolean;
enforceFocus: boolean;
hasBackdrop: boolean;
isOpen: boolean;
position?: Position;
size: string;
usePortal: boolean;
}
export class DrawerExample extends React.PureComponent<ExampleProps<BlueprintExampleData>, DrawerExampleState> {
public state: DrawerExampleState = {
autoFocus: true,
canEscapeKeyClose: true,
canOutsideClickClose: true,
enforceFocus: true,
hasBackdrop: true,
isOpen: false,
position: Position.RIGHT,
size: undefined,
usePortal: true,
};

private handleAutoFocusChange = handleBooleanChange(autoFocus => this.setState({ autoFocus }));

private handleBackdropChange = handleBooleanChange(hasBackdrop => this.setState({ hasBackdrop }));

private handleEnforceFocusChange = handleBooleanChange(enforceFocus => this.setState({ enforceFocus }));

private handleEscapeKeyChange = handleBooleanChange(canEscapeKeyClose => this.setState({ canEscapeKeyClose }));

private handleUsePortalChange = handleBooleanChange(usePortal => this.setState({ usePortal }));

private handlePositionChange = (position: string) => this.setState({ position: position as Position });

private handleOutsideClickChange = handleBooleanChange(val => this.setState({ canOutsideClickClose: val }));

private handleSizeChange = handleStringChange(size => this.setState({ size }));

public render() {
const { size, ...drawerProps } = this.state;

return (
<Example options={this.renderOptions()} {...this.props}>
<Button onClick={this.handleOpen}>Show Drawer</Button>
<Drawer
className={this.props.data.themeName}
icon="info-sign"
onClose={this.handleClose}
title="Palantir Foundry"
size={size === "default" ? undefined : size}
{...drawerProps}
>
<div className={Classes.DRAWER_BODY}>
{/* HACKHACK: strange use of unrelated dialog class, should be refactored */}
<div className={Classes.DIALOG_BODY}>
<p>
<strong>
Data integration is the seminal problem of the digital age. For over ten years,
we’ve helped the world’s premier organizations rise to the challenge.
</strong>
</p>
<p>
Palantir Foundry radically reimagines the way enterprises interact with data by
amplifying and extending the power of data integration. With Foundry, anyone can source,
fuse, and transform data into any shape they desire. Business analysts become data
engineers — and leaders in their organization’s data revolution.
</p>
<p>
Foundry’s back end includes a suite of best-in-class data integration capabilities: data
provenance, git-style versioning semantics, granular access controls, branching,
transformation authoring, and more. But these powers are not limited to the back-end IT
shop.
</p>
<p>
In Foundry, tables, applications, reports, presentations, and spreadsheets operate as
data integrations in their own right. Access controls, transformation logic, and data
quality flow from original data source to intermediate analysis to presentation in real
time. Every end product created in Foundry becomes a new data source that other users
can build upon. And the enterprise data foundation goes where the business drives it.
</p>
<p>Start the revolution. Unleash the power of data integration with Palantir Foundry.</p>
<ContextMenu
content={
<Menu>
<MenuItem text="Menu Item 1" />
</Menu>
}
>
<Button onClick={this.handleClose}>
Right Click for a <Code>&lt;ContextMenu /&gt;</Code>
</Button>
</ContextMenu>
</div>
</div>
<div className={Classes.DRAWER_FOOTER}>Footer</div>
</Drawer>
</Example>
);
}

private renderOptions() {
const { autoFocus, enforceFocus, canEscapeKeyClose, canOutsideClickClose, hasBackdrop, position, usePortal } =
this.state;
return (
<>
<H5>Props</H5>
<FormGroup label="Position">
<SegmentedControl
fill={true}
options={[
{ value: Position.TOP },
{ value: Position.RIGHT },
{ value: Position.BOTTOM },
{ value: Position.LEFT },
]}
onValueChange={this.handlePositionChange}
small={true}
value={position}
/>
</FormGroup>
<FormGroup label="Size">
<HTMLSelect options={SIZES} onChange={this.handleSizeChange} />
</FormGroup>
<Divider />
<Switch checked={autoFocus} label="Auto focus" onChange={this.handleAutoFocusChange} />
<Switch checked={enforceFocus} label="Enforce focus" onChange={this.handleEnforceFocusChange} />
<Switch checked={hasBackdrop} label="Has backdrop" onChange={this.handleBackdropChange} />
<Switch checked={usePortal} onChange={this.handleUsePortalChange}>
Use <Code>Portal</Code>
</Switch>
<Switch
checked={canOutsideClickClose}
label="Click outside to close"
onChange={this.handleOutsideClickChange}
export const DrawerExample: React.FC<ExampleProps<BlueprintExampleData>> = props => {
const [autoFocus, setAutoFocus] = React.useState(true);
const [canEscapeKeyClose, setCanEscapeKeyClose] = React.useState(true);
const [canOutsideClickClose, setCanOutsideClickClose] = React.useState(true);
const [enforceFocus, setEnforceFocus] = React.useState(true);
const [hasBackdrop, setHasBackdrop] = React.useState(true);
const [isOpen, setIsOpen] = React.useState(false);
const [position, setPosition] = React.useState<Position>(Position.RIGHT);
const [size, setSize] = React.useState<string | undefined>(undefined);
const [usePortal, setUsePortal] = React.useState(true);

const handlePositionChange = React.useCallback((value: string) => setPosition(value as Position), []);

const handleOpen = React.useCallback(() => setIsOpen(true), []);

const handleClose = React.useCallback(() => setIsOpen(false), []);

const options = (
<>
<H5>Props</H5>
<FormGroup label="Position">
<SegmentedControl
fill={true}
onValueChange={handlePositionChange}
options={POSITION_OPTIONS}
small={true}
value={position}
/>
<Switch checked={canEscapeKeyClose} label="Escape key to close" onChange={this.handleEscapeKeyChange} />
</>
);
}

private handleOpen = () => this.setState({ isOpen: true });

private handleClose = () => this.setState({ isOpen: false });
}
</FormGroup>
<FormGroup label="Size">
<HTMLSelect options={SIZES} onChange={handleStringChange(setSize)} />
</FormGroup>
<Divider />
<Switch checked={autoFocus} label="Auto focus" onChange={handleBooleanChange(setAutoFocus)} />
<Switch checked={enforceFocus} label="Enforce focus" onChange={handleBooleanChange(setEnforceFocus)} />
<Switch checked={hasBackdrop} label="Has backdrop" onChange={handleBooleanChange(setHasBackdrop)} />
<Switch checked={usePortal} onChange={handleBooleanChange(setUsePortal)}>
Use <Code>Portal</Code>
</Switch>
<Switch
checked={canOutsideClickClose}
label="Click outside to close"
onChange={handleBooleanChange(setCanOutsideClickClose)}
/>
<Switch
checked={canEscapeKeyClose}
label="Escape key to close"
onChange={handleBooleanChange(setCanEscapeKeyClose)}
/>
</>
);

return (
<Example options={options} {...props}>
<Button onClick={handleOpen}>Show Drawer</Button>
<Drawer
autoFocus={autoFocus}
canEscapeKeyClose={canEscapeKeyClose}
canOutsideClickClose={canOutsideClickClose}
className={props.data.themeName}
enforceFocus={enforceFocus}
hasBackdrop={hasBackdrop}
icon={IconNames.INFO_SIGN}
isOpen={isOpen}
onClose={handleClose}
position={position}
size={size === "default" ? undefined : size}
title="Palantir Foundry"
usePortal={usePortal}
>
<div className={Classes.DRAWER_BODY}>
{/* HACKHACK: strange use of unrelated dialog class, should be refactored */}
<div className={Classes.DIALOG_BODY}>
<p>
<strong>
Data integration is the seminal problem of the digital age. For over ten years, we've
helped the world's premier organizations rise to the challenge.
</strong>
</p>
<p>
Palantir Foundry radically reimagines the way enterprises interact with data by amplifying
and extending the power of data integration. With Foundry, anyone can source, fuse, and
transform data into any shape they desire. Business analysts become data engineers — and
leaders in their organization's data revolution.
</p>
<p>
Foundry's back end includes a suite of best-in-class data integration capabilities: data
provenance, git-style versioning semantics, granular access controls, branching,
transformation authoring, and more. But these powers are not limited to the back-end IT
shop.
</p>
<p>
In Foundry, tables, applications, reports, presentations, and spreadsheets operate as data
integrations in their own right. Access controls, transformation logic, and data quality
flow from original data source to intermediate analysis to presentation in real time. Every
end product created in Foundry becomes a new data source that other users can build upon.
And the enterprise data foundation goes where the business drives it.
</p>
<p>Start the revolution. Unleash the power of data integration with Palantir Foundry.</p>
<ContextMenu
content={
<Menu>
<MenuItem text="Menu Item 1" />
</Menu>
}
>
<Button onClick={handleClose}>
Right Click for a <Code>&lt;ContextMenu /&gt;</Code>
</Button>
</ContextMenu>
</div>
</div>
<div className={Classes.DRAWER_FOOTER}>Footer</div>
</Drawer>
</Example>
);
};

const SIZES: Array<string | OptionProps> = [
{ label: "Default", value: "default" },
Expand All @@ -193,3 +165,10 @@ const SIZES: Array<string | OptionProps> = [
"72%",
"560px",
];

const POSITION_OPTIONS = [
{ value: Position.TOP },
{ value: Position.RIGHT },
{ value: Position.BOTTOM },
{ value: Position.LEFT },
];