-
Notifications
You must be signed in to change notification settings - Fork 2
/
SelectionScope.tsx
97 lines (88 loc) · 3.49 KB
/
SelectionScope.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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
/*---------------------------------------------------------------------------------------------
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
/** @packageDocumentation
* @module StatusBar
*/
import type { CommonProps } from "@itwin/core-react";
import { Label, Select } from "@itwin/itwinui-react";
import classnames from "classnames";
import * as React from "react";
import type { ConnectedComponent } from "react-redux";
import { connect } from "react-redux";
import { UiFramework } from "../UiFramework";
import { FooterIndicator } from "../layout/footer/Indicator";
import type { PresentationSelectionScope } from "../redux/SessionState";
import "./SelectionScope.scss";
import { useTranslation } from "../hooks/useTranslation";
/** Defines properties supported by the SelectionScopeField Component.
* @public
*/
interface SelectionScopeFieldProps extends CommonProps {
activeSelectionScope: string;
availableSelectionScopes: PresentationSelectionScope[];
}
/**
* Status Field React component. This component is designed to be specified in a status bar definition.
*/
function SelectionScopeFieldComponent(props: SelectionScopeFieldProps) {
const { translate } = useTranslation();
const options = React.useMemo(
() =>
props.availableSelectionScopes.map((scope) => {
return { value: scope.id, label: scope.label };
}),
[props.availableSelectionScopes]
);
const updateSelectValue = (newValue: string) => {
// istanbul ignore else
if (newValue) {
UiFramework.setActiveSelectionScope(newValue);
}
};
return (
<FooterIndicator
className={classnames(
"uifw-statusFields-selectionScope",
props.className
)}
style={props.style}
>
<Label className="uifw-statusFields-selectionScope-label">
{translate("selectionScopeField.label")}:
</Label>
<Select
className="uifw-statusFields-selectionScope-selector"
value={props.activeSelectionScope}
options={options}
onChange={updateSelectValue}
data-testid="components-selectionScope-selector"
title={translate("selectionScopeField.toolTip")}
size="small"
/>
</FooterIndicator>
);
}
/** Function used by Redux to map state data in Redux store to props that are used to render this component. */
function mapStateToProps(state: any) {
const frameworkState = state[UiFramework.frameworkStateKey]; // since app sets up key, don't hard-code name
/* istanbul ignore next */
if (!frameworkState) return undefined;
return {
activeSelectionScope: frameworkState.sessionState.activeSelectionScope,
availableSelectionScopes:
frameworkState.sessionState.availableSelectionScopes,
};
}
/**
* SelectionScopeField React component. This component is designed to be specified in a status bar definition. It will
* display the active selection scope from `UiFramework.getActiveSelectionScope()`, and display the stored list of scopes from
* `UiFramework.getAvailableSelectionScopes()` to allow the user to change the active selection scope, using `UiFramework.setActiveSelectionScope()`.
* This React component is Redux connected.
* @public
*/
export const SelectionScopeField: ConnectedComponent<
typeof SelectionScopeFieldComponent,
CommonProps
> = connect(mapStateToProps)(SelectionScopeFieldComponent);