-
Notifications
You must be signed in to change notification settings - Fork 2
/
AccuDrawWidget.tsx
55 lines (45 loc) · 1.75 KB
/
AccuDrawWidget.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
50
51
52
53
54
55
/*---------------------------------------------------------------------------------------------
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
/** @packageDocumentation
* @module AccuDraw
*/
import * as React from "react";
import { Orientation, useResizeObserver } from "@itwin/core-react";
import { AccuDrawFieldContainer } from "./AccuDrawFieldContainer";
import type { ConfigurableCreateInfo } from "../configurableui/ConfigurableUiControl";
import { WidgetControl } from "../widgets/WidgetControl";
import { UiFramework } from "../UiFramework";
/** AccuDraw Widget Control
* @beta
*/
export class AccuDrawWidgetControl extends WidgetControl {
public static id = "AccuDrawWidget";
public static get label(): string {
return UiFramework.translate("accuDraw.dialogTitle");
}
constructor(info: ConfigurableCreateInfo, options: any) {
super(info, options);
this.reactNode = <AccuDrawWidget />;
}
}
/** AccuDraw Widget displays [[AccuDrawFieldContainer]] for AccuDraw Ui
* @beta
*/
export function AccuDrawWidget() {
const [orientation, setOrientation] = React.useState(Orientation.Vertical);
const breakpoint = 400;
// istanbul ignore next - currently unable to replicate resizing in unit test
const handleResize = React.useCallback((w: number, _h: number) => {
setOrientation(
w <= breakpoint ? Orientation.Vertical : Orientation.Horizontal
);
}, []);
const ref = useResizeObserver<HTMLDivElement>(handleResize);
return (
<div ref={ref}>
<AccuDrawFieldContainer orientation={orientation} />
</div>
);
}