Skip to content

Commit

Permalink
Update DrawerExample
Browse files Browse the repository at this point in the history
  • Loading branch information
@ggdouglas
ggdouglas committed Feb 3, 2025
1 parent 5d092cd commit af2d672
Showing 1 changed file with 125 additions and 146 deletions.
271 changes: 125 additions & 146 deletions packages/docs-app/src/examples/core-examples/drawerExample.tsx
View file
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 },
];

0 comments on commit af2d672

Please sign in to comment.