-
Notifications
You must be signed in to change notification settings - Fork 2
/
ToolbarWithOverflow.tsx
49 lines (46 loc) · 2.36 KB
/
ToolbarWithOverflow.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
/*---------------------------------------------------------------------------------------------
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
/** @packageDocumentation
* @module Toolbar
*/
import * as React from "react";
import type { OnItemExecutedFunc } from "@itwin/appui-abstract";
import type { CommonProps, NoChildrenProps } from "@itwin/core-react";
import type {
Direction,
ToolbarOpacitySetting,
ToolbarPanelAlignment,
} from "@itwin/components-react";
import type { ToolbarItem } from "./ToolbarItem";
import { Toolbar } from "./Toolbar";
/** Component that displays toolbar items.
* @beta
*/
export interface ToolbarWithOverflowProps extends CommonProps, NoChildrenProps {
/** Describes to which direction the popup panels are expanded, also defines the orientation of the toolbar (Top/Bottom will create an horizontal toolbar, Left/Right will create a vertical toolbar). Defaults to: [[Direction.Bottom]] */
expandsTo?: Direction;
/** Describes to which direction the overflow popup panels are expanded. Defaults to: [[Direction.Right]] */
overflowExpandsTo?: Direction;
/** Definitions for items of the toolbar. Items are expected to be already sorted by group and item. */
items: ToolbarItem[];
/** Describes how expanded panels are aligned. Defaults to: [[ToolbarPanelAlignment.Start]] */
panelAlignment?: ToolbarPanelAlignment;
/** Use Drag Interaction to open popups with nest action buttons */
useDragInteraction?: boolean;
/** Determines whether to use mouse proximity to alter the opacity of the toolbar */
toolbarOpacitySetting?: ToolbarOpacitySetting;
/** Optional function to call on any item execution */
onItemExecuted?: OnItemExecutedFunc;
/** Optional function to call on any KeyDown events processed by toolbar */
onKeyDown?: (e: React.KeyboardEvent) => void;
}
/** Component that displays toolbar items, displaying only the elements that can fit in the available space,
* and put the other items into a single panel.
* @beta
*/
export function ToolbarWithOverflow(props: ToolbarWithOverflowProps) {
const { overflowExpandsTo, ...toolbarProps } = props;
return <Toolbar enableOverflow={{ overflowExpandsTo }} {...toolbarProps} />;
}