@itwin/components-react 3.0.0-dev.143 → 3.0.0-dev.147
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/cjs/components-react/selectable-content/SelectableContent.d.ts.map +1 -1
- package/lib/cjs/components-react/selectable-content/SelectableContent.js +11 -8
- package/lib/cjs/components-react/selectable-content/SelectableContent.js.map +1 -1
- package/lib/cjs/components-react/selectable-content/SelectableContent.scss +2 -1
- package/lib/esm/components-react/selectable-content/SelectableContent.d.ts.map +1 -1
- package/lib/esm/components-react/selectable-content/SelectableContent.js +11 -8
- package/lib/esm/components-react/selectable-content/SelectableContent.js.map +1 -1
- package/lib/esm/components-react/selectable-content/SelectableContent.scss +2 -1
- package/package.json +11 -13
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectableContent.d.ts","sourceRoot":"","sources":["../../../../src/components-react/selectable-content/SelectableContent.tsx"],"names":[],"mappings":"AAKA;;GAEG;AAEH,OAAO,0BAA0B,CAAC;AAClC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"SelectableContent.d.ts","sourceRoot":"","sources":["../../../../src/components-react/selectable-content/SelectableContent.tsx"],"names":[],"mappings":"AAKA;;GAEG;AAEH,OAAO,0BAA0B,CAAC;AAClC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B;;;;GAIG;AACH,MAAM,WAAW,2BAA2B;IAC1C,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;CAC/B;AAED;;;GAGG;AACH,MAAM,WAAW,gCAAgC;IAC/C,iBAAiB,EAAE,MAAM,CAAC;IAC1B,0BAA0B,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,QAAQ,EAAE,2BAA2B,EAAE,CAAC;IACxC,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED;;;;;GAKG;AACH,wBAAgB,2BAA2B,CAAC,KAAK,EAAE,gCAAgC,eAgClF;AAED;;;GAGG;AACH,MAAM,WAAW,sBAAsB;IACrC,wBAAwB,EAAE,MAAM,CAAC;IACjC,QAAQ,EAAE,2BAA2B,EAAE,CAAC;IACxC,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,eAU9D"}
|
|
@@ -30,7 +30,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
30
30
|
exports.SelectableContent = exports.ControlledSelectableContent = void 0;
|
|
31
31
|
require("./SelectableContent.scss");
|
|
32
32
|
const React = __importStar(require("react"));
|
|
33
|
-
const
|
|
33
|
+
const itwinui_react_1 = require("@itwin/itwinui-react");
|
|
34
34
|
/**
|
|
35
35
|
* A fully-controlled component that accepts a list of child components with ids and labels and
|
|
36
36
|
* renders a select box at the top, allowing to choose which of the provided child components
|
|
@@ -40,16 +40,19 @@ const core_react_1 = require("@itwin/core-react");
|
|
|
40
40
|
function ControlledSelectableContent(props) {
|
|
41
41
|
var _a;
|
|
42
42
|
const { onSelectedContentIdChanged } = props;
|
|
43
|
-
const onContentIdSelected = React.useCallback((
|
|
44
|
-
onSelectedContentIdChanged &&
|
|
43
|
+
const onContentIdSelected = React.useCallback((newValue) => {
|
|
44
|
+
onSelectedContentIdChanged && onSelectedContentIdChanged(newValue);
|
|
45
45
|
}, [onSelectedContentIdChanged]);
|
|
46
46
|
const selectedContent = (_a = props.children.find((contentDef) => contentDef.id === props.selectedContentId)) !== null && _a !== void 0 ? _a : props.children[0];
|
|
47
|
+
const options = React.useMemo(() => {
|
|
48
|
+
return props.children.map((componentDef) => ({
|
|
49
|
+
label: componentDef.label,
|
|
50
|
+
value: componentDef.id,
|
|
51
|
+
}));
|
|
52
|
+
}, [props.children]);
|
|
47
53
|
return (React.createElement("div", { className: "components-selectable-content" },
|
|
48
|
-
React.createElement("div", { className: "components-selectable-content-header" },
|
|
49
|
-
React.createElement(
|
|
50
|
-
label: componentDef.label,
|
|
51
|
-
value: componentDef.id,
|
|
52
|
-
})) })),
|
|
54
|
+
React.createElement("div", { className: "components-selectable-content-header" }, options.length > 0 &&
|
|
55
|
+
React.createElement(itwinui_react_1.Select, { onChange: onContentIdSelected, size: "small", className: "components-selectable-content-selector", "aria-label": props.selectAriaLabel, value: selectedContent.id, options: options })),
|
|
53
56
|
React.createElement("div", { className: "components-selectable-content-wrapper" }, selectedContent === null || selectedContent === void 0 ? void 0 : selectedContent.render())));
|
|
54
57
|
}
|
|
55
58
|
exports.ControlledSelectableContent = ControlledSelectableContent;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectableContent.js","sourceRoot":"","sources":["../../../../src/components-react/selectable-content/SelectableContent.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F,4CAA4C;AAC5C;;GAEG;;;;;;;;;;;;;;;;;;;;;;AAEH,oCAAkC;AAClC,6CAA+B;
|
|
1
|
+
{"version":3,"file":"SelectableContent.js","sourceRoot":"","sources":["../../../../src/components-react/selectable-content/SelectableContent.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F,4CAA4C;AAC5C;;GAEG;;;;;;;;;;;;;;;;;;;;;;AAEH,oCAAkC;AAClC,6CAA+B;AAC/B,wDAA4D;AAwB5D;;;;;GAKG;AACH,SAAgB,2BAA2B,CAAC,KAAuC;;IACjF,MAAM,EAAE,0BAA0B,EAAE,GAAG,KAAK,CAAC;IAE7C,MAAM,mBAAmB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,QAAgB,EAAQ,EAAE;QACvE,0BAA0B,IAAI,0BAA0B,CAAC,QAAQ,CAAC,CAAC;IACrE,CAAC,EAAE,CAAC,0BAA0B,CAAC,CAAC,CAAC;IAEjC,MAAM,eAAe,GAAG,MAAA,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,UAAU,CAAC,EAAE,KAAK,KAAK,CAAC,iBAAiB,CAAC,mCAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IAC5H,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACjC,OAAO,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC;YAC3C,KAAK,EAAE,YAAY,CAAC,KAAK;YACzB,KAAK,EAAE,YAAY,CAAC,EAAE;SACvB,CAAC,CAA2B,CAAC;IAChC,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;IAErB,OAAO,CACL,6BAAK,SAAS,EAAC,+BAA+B;QAC5C,6BAAK,SAAS,EAAC,sCAAsC,IAClD,OAAO,CAAC,MAAM,GAAG,CAAC;YACjB,oBAAC,sBAAM,IAAC,QAAQ,EAAE,mBAAmB,EAAE,IAAI,EAAC,OAAO,EACjD,SAAS,EAAC,wCAAwC,gBACtC,KAAK,CAAC,eAAe,EACjC,KAAK,EAAE,eAAe,CAAC,EAAE,EACzB,OAAO,EAAE,OAAO,GAChB,CAEA;QACN,6BAAK,SAAS,EAAC,uCAAuC,IACnD,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,MAAM,EAAE,CACtB,CACF,CACP,CAAC;AACJ,CAAC;AAhCD,kEAgCC;AAYD;;;;;GAKG;AACH,SAAgB,iBAAiB,CAAC,KAA6B;IAC7D,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,wBAAwB,CAAC,CAAC;IACjG,MAAM,0BAA0B,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,EAAU,EAAE,EAAE;QAClE,oBAAoB,CAAC,EAAE,CAAC,CAAC;IAC3B,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,OAAO,CACL,oBAAC,2BAA2B,IAAC,iBAAiB,EAAE,iBAAiB,EAAE,0BAA0B,EAAE,0BAA0B,EAAE,eAAe,EAAE,KAAK,CAAC,eAAe,IAC9J,KAAK,CAAC,QAAQ,CACa,CAC/B,CAAC;AACJ,CAAC;AAVD,8CAUC","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/* eslint-disable deprecation/deprecation */\r\n/** @packageDocumentation\r\n * @module SelectableContent\r\n */\r\n\r\nimport \"./SelectableContent.scss\";\r\nimport * as React from \"react\";\r\nimport { Select, SelectOption } from \"@itwin/itwinui-react\";\r\n\r\n/**\r\n * A definition for content displayed in [[ControlledSelectableContent]] and\r\n * [[SelectableContent]] components.\r\n * @public\r\n */\r\nexport interface SelectableContentDefinition {\r\n id: string;\r\n label: string;\r\n render: () => React.ReactNode;\r\n}\r\n\r\n/**\r\n * [[ControlledSelectableContent]] component properties\r\n * @public\r\n */\r\nexport interface ControlledSelectableContentProps {\r\n selectedContentId: string;\r\n onSelectedContentIdChanged?: (contentId: string) => void;\r\n children: SelectableContentDefinition[];\r\n selectAriaLabel?: string;\r\n}\r\n\r\n/**\r\n * A fully-controlled component that accepts a list of child components with ids and labels and\r\n * renders a select box at the top, allowing to choose which of the provided child components\r\n * should be rendered at the bottom.\r\n * @public\r\n */\r\nexport function ControlledSelectableContent(props: ControlledSelectableContentProps) {\r\n const { onSelectedContentIdChanged } = props;\r\n\r\n const onContentIdSelected = React.useCallback((newValue: string): void => {\r\n onSelectedContentIdChanged && onSelectedContentIdChanged(newValue);\r\n }, [onSelectedContentIdChanged]);\r\n\r\n const selectedContent = props.children.find((contentDef) => contentDef.id === props.selectedContentId) ?? props.children[0];\r\n const options = React.useMemo(() => {\r\n return props.children.map((componentDef) => ({\r\n label: componentDef.label,\r\n value: componentDef.id,\r\n })) as SelectOption<string>[];\r\n }, [props.children]);\r\n\r\n return (\r\n <div className=\"components-selectable-content\">\r\n <div className=\"components-selectable-content-header\">\r\n {options.length > 0 &&\r\n <Select onChange={onContentIdSelected} size=\"small\"\r\n className=\"components-selectable-content-selector\"\r\n aria-label={props.selectAriaLabel}\r\n value={selectedContent.id}\r\n options={options}\r\n />\r\n }\r\n </div>\r\n <div className=\"components-selectable-content-wrapper\">\r\n {selectedContent?.render()}\r\n </div>\r\n </div>\r\n );\r\n}\r\n\r\n/**\r\n * [[SelectableContent]] component properties\r\n * @public\r\n */\r\nexport interface SelectableContentProps {\r\n defaultSelectedContentId: string;\r\n children: SelectableContentDefinition[];\r\n selectAriaLabel?: string;\r\n}\r\n\r\n/**\r\n * An uncontrolled component that accepts a list of child components with ids and labels and\r\n * renders a select box at the top, allowing to choose which of the provided child components\r\n * should be rendered at the bottom.\r\n * @public\r\n */\r\nexport function SelectableContent(props: SelectableContentProps) {\r\n const [selectedContentId, setSelectedContentId] = React.useState(props.defaultSelectedContentId);\r\n const onSelectedContentIdChanged = React.useCallback((id: string) => {\r\n setSelectedContentId(id);\r\n }, []);\r\n return (\r\n <ControlledSelectableContent selectedContentId={selectedContentId} onSelectedContentIdChanged={onSelectedContentIdChanged} selectAriaLabel={props.selectAriaLabel}>\r\n {props.children}\r\n </ControlledSelectableContent>\r\n );\r\n}\r\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectableContent.d.ts","sourceRoot":"","sources":["../../../../src/components-react/selectable-content/SelectableContent.tsx"],"names":[],"mappings":"AAKA;;GAEG;AAEH,OAAO,0BAA0B,CAAC;AAClC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"SelectableContent.d.ts","sourceRoot":"","sources":["../../../../src/components-react/selectable-content/SelectableContent.tsx"],"names":[],"mappings":"AAKA;;GAEG;AAEH,OAAO,0BAA0B,CAAC;AAClC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B;;;;GAIG;AACH,MAAM,WAAW,2BAA2B;IAC1C,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;CAC/B;AAED;;;GAGG;AACH,MAAM,WAAW,gCAAgC;IAC/C,iBAAiB,EAAE,MAAM,CAAC;IAC1B,0BAA0B,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,QAAQ,EAAE,2BAA2B,EAAE,CAAC;IACxC,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED;;;;;GAKG;AACH,wBAAgB,2BAA2B,CAAC,KAAK,EAAE,gCAAgC,eAgClF;AAED;;;GAGG;AACH,MAAM,WAAW,sBAAsB;IACrC,wBAAwB,EAAE,MAAM,CAAC;IACjC,QAAQ,EAAE,2BAA2B,EAAE,CAAC;IACxC,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,eAU9D"}
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
*/
|
|
9
9
|
import "./SelectableContent.scss";
|
|
10
10
|
import * as React from "react";
|
|
11
|
-
import {
|
|
11
|
+
import { Select } from "@itwin/itwinui-react";
|
|
12
12
|
/**
|
|
13
13
|
* A fully-controlled component that accepts a list of child components with ids and labels and
|
|
14
14
|
* renders a select box at the top, allowing to choose which of the provided child components
|
|
@@ -18,16 +18,19 @@ import { ThemedSelect } from "@itwin/core-react";
|
|
|
18
18
|
export function ControlledSelectableContent(props) {
|
|
19
19
|
var _a;
|
|
20
20
|
const { onSelectedContentIdChanged } = props;
|
|
21
|
-
const onContentIdSelected = React.useCallback((
|
|
22
|
-
onSelectedContentIdChanged &&
|
|
21
|
+
const onContentIdSelected = React.useCallback((newValue) => {
|
|
22
|
+
onSelectedContentIdChanged && onSelectedContentIdChanged(newValue);
|
|
23
23
|
}, [onSelectedContentIdChanged]);
|
|
24
24
|
const selectedContent = (_a = props.children.find((contentDef) => contentDef.id === props.selectedContentId)) !== null && _a !== void 0 ? _a : props.children[0];
|
|
25
|
+
const options = React.useMemo(() => {
|
|
26
|
+
return props.children.map((componentDef) => ({
|
|
27
|
+
label: componentDef.label,
|
|
28
|
+
value: componentDef.id,
|
|
29
|
+
}));
|
|
30
|
+
}, [props.children]);
|
|
25
31
|
return (React.createElement("div", { className: "components-selectable-content" },
|
|
26
|
-
React.createElement("div", { className: "components-selectable-content-header" },
|
|
27
|
-
React.createElement(
|
|
28
|
-
label: componentDef.label,
|
|
29
|
-
value: componentDef.id,
|
|
30
|
-
})) })),
|
|
32
|
+
React.createElement("div", { className: "components-selectable-content-header" }, options.length > 0 &&
|
|
33
|
+
React.createElement(Select, { onChange: onContentIdSelected, size: "small", className: "components-selectable-content-selector", "aria-label": props.selectAriaLabel, value: selectedContent.id, options: options })),
|
|
31
34
|
React.createElement("div", { className: "components-selectable-content-wrapper" }, selectedContent === null || selectedContent === void 0 ? void 0 : selectedContent.render())));
|
|
32
35
|
}
|
|
33
36
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectableContent.js","sourceRoot":"","sources":["../../../../src/components-react/selectable-content/SelectableContent.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F,4CAA4C;AAC5C;;GAEG;AAEH,OAAO,0BAA0B,CAAC;AAClC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"SelectableContent.js","sourceRoot":"","sources":["../../../../src/components-react/selectable-content/SelectableContent.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F,4CAA4C;AAC5C;;GAEG;AAEH,OAAO,0BAA0B,CAAC;AAClC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAgB,MAAM,sBAAsB,CAAC;AAwB5D;;;;;GAKG;AACH,MAAM,UAAU,2BAA2B,CAAC,KAAuC;;IACjF,MAAM,EAAE,0BAA0B,EAAE,GAAG,KAAK,CAAC;IAE7C,MAAM,mBAAmB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,QAAgB,EAAQ,EAAE;QACvE,0BAA0B,IAAI,0BAA0B,CAAC,QAAQ,CAAC,CAAC;IACrE,CAAC,EAAE,CAAC,0BAA0B,CAAC,CAAC,CAAC;IAEjC,MAAM,eAAe,GAAG,MAAA,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,UAAU,CAAC,EAAE,KAAK,KAAK,CAAC,iBAAiB,CAAC,mCAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IAC5H,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACjC,OAAO,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC;YAC3C,KAAK,EAAE,YAAY,CAAC,KAAK;YACzB,KAAK,EAAE,YAAY,CAAC,EAAE;SACvB,CAAC,CAA2B,CAAC;IAChC,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;IAErB,OAAO,CACL,6BAAK,SAAS,EAAC,+BAA+B;QAC5C,6BAAK,SAAS,EAAC,sCAAsC,IAClD,OAAO,CAAC,MAAM,GAAG,CAAC;YACjB,oBAAC,MAAM,IAAC,QAAQ,EAAE,mBAAmB,EAAE,IAAI,EAAC,OAAO,EACjD,SAAS,EAAC,wCAAwC,gBACtC,KAAK,CAAC,eAAe,EACjC,KAAK,EAAE,eAAe,CAAC,EAAE,EACzB,OAAO,EAAE,OAAO,GAChB,CAEA;QACN,6BAAK,SAAS,EAAC,uCAAuC,IACnD,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,MAAM,EAAE,CACtB,CACF,CACP,CAAC;AACJ,CAAC;AAYD;;;;;GAKG;AACH,MAAM,UAAU,iBAAiB,CAAC,KAA6B;IAC7D,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,wBAAwB,CAAC,CAAC;IACjG,MAAM,0BAA0B,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,EAAU,EAAE,EAAE;QAClE,oBAAoB,CAAC,EAAE,CAAC,CAAC;IAC3B,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,OAAO,CACL,oBAAC,2BAA2B,IAAC,iBAAiB,EAAE,iBAAiB,EAAE,0BAA0B,EAAE,0BAA0B,EAAE,eAAe,EAAE,KAAK,CAAC,eAAe,IAC9J,KAAK,CAAC,QAAQ,CACa,CAC/B,CAAC;AACJ,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/* eslint-disable deprecation/deprecation */\r\n/** @packageDocumentation\r\n * @module SelectableContent\r\n */\r\n\r\nimport \"./SelectableContent.scss\";\r\nimport * as React from \"react\";\r\nimport { Select, SelectOption } from \"@itwin/itwinui-react\";\r\n\r\n/**\r\n * A definition for content displayed in [[ControlledSelectableContent]] and\r\n * [[SelectableContent]] components.\r\n * @public\r\n */\r\nexport interface SelectableContentDefinition {\r\n id: string;\r\n label: string;\r\n render: () => React.ReactNode;\r\n}\r\n\r\n/**\r\n * [[ControlledSelectableContent]] component properties\r\n * @public\r\n */\r\nexport interface ControlledSelectableContentProps {\r\n selectedContentId: string;\r\n onSelectedContentIdChanged?: (contentId: string) => void;\r\n children: SelectableContentDefinition[];\r\n selectAriaLabel?: string;\r\n}\r\n\r\n/**\r\n * A fully-controlled component that accepts a list of child components with ids and labels and\r\n * renders a select box at the top, allowing to choose which of the provided child components\r\n * should be rendered at the bottom.\r\n * @public\r\n */\r\nexport function ControlledSelectableContent(props: ControlledSelectableContentProps) {\r\n const { onSelectedContentIdChanged } = props;\r\n\r\n const onContentIdSelected = React.useCallback((newValue: string): void => {\r\n onSelectedContentIdChanged && onSelectedContentIdChanged(newValue);\r\n }, [onSelectedContentIdChanged]);\r\n\r\n const selectedContent = props.children.find((contentDef) => contentDef.id === props.selectedContentId) ?? props.children[0];\r\n const options = React.useMemo(() => {\r\n return props.children.map((componentDef) => ({\r\n label: componentDef.label,\r\n value: componentDef.id,\r\n })) as SelectOption<string>[];\r\n }, [props.children]);\r\n\r\n return (\r\n <div className=\"components-selectable-content\">\r\n <div className=\"components-selectable-content-header\">\r\n {options.length > 0 &&\r\n <Select onChange={onContentIdSelected} size=\"small\"\r\n className=\"components-selectable-content-selector\"\r\n aria-label={props.selectAriaLabel}\r\n value={selectedContent.id}\r\n options={options}\r\n />\r\n }\r\n </div>\r\n <div className=\"components-selectable-content-wrapper\">\r\n {selectedContent?.render()}\r\n </div>\r\n </div>\r\n );\r\n}\r\n\r\n/**\r\n * [[SelectableContent]] component properties\r\n * @public\r\n */\r\nexport interface SelectableContentProps {\r\n defaultSelectedContentId: string;\r\n children: SelectableContentDefinition[];\r\n selectAriaLabel?: string;\r\n}\r\n\r\n/**\r\n * An uncontrolled component that accepts a list of child components with ids and labels and\r\n * renders a select box at the top, allowing to choose which of the provided child components\r\n * should be rendered at the bottom.\r\n * @public\r\n */\r\nexport function SelectableContent(props: SelectableContentProps) {\r\n const [selectedContentId, setSelectedContentId] = React.useState(props.defaultSelectedContentId);\r\n const onSelectedContentIdChanged = React.useCallback((id: string) => {\r\n setSelectedContentId(id);\r\n }, []);\r\n return (\r\n <ControlledSelectableContent selectedContentId={selectedContentId} onSelectedContentIdChanged={onSelectedContentIdChanged} selectAriaLabel={props.selectAriaLabel}>\r\n {props.children}\r\n </ControlledSelectableContent>\r\n );\r\n}\r\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@itwin/components-react",
|
|
3
|
-
"version": "3.0.0-dev.
|
|
3
|
+
"version": "3.0.0-dev.147",
|
|
4
4
|
"description": "iTwin.js UI complex components",
|
|
5
5
|
"main": "lib/cjs/components-react.js",
|
|
6
6
|
"module": "lib/esm/components-react.js",
|
|
@@ -21,9 +21,9 @@
|
|
|
21
21
|
"url": "http://www.bentley.com"
|
|
22
22
|
},
|
|
23
23
|
"peerDependencies": {
|
|
24
|
-
"@itwin/appui-abstract": "^3.0.0-dev.
|
|
25
|
-
"@itwin/core-bentley": "^3.0.0-dev.
|
|
26
|
-
"@itwin/core-react": "^3.0.0-dev.
|
|
24
|
+
"@itwin/appui-abstract": "^3.0.0-dev.147",
|
|
25
|
+
"@itwin/core-bentley": "^3.0.0-dev.147",
|
|
26
|
+
"@itwin/core-react": "^3.0.0-dev.147",
|
|
27
27
|
"react": "^17.0.0",
|
|
28
28
|
"react-dom": "^17.0.0"
|
|
29
29
|
},
|
|
@@ -32,13 +32,13 @@
|
|
|
32
32
|
"NOTE: All tools used by scripts in this package must be listed as devDependencies"
|
|
33
33
|
],
|
|
34
34
|
"devDependencies": {
|
|
35
|
-
"@itwin/appui-abstract": "3.0.0-dev.
|
|
36
|
-
"@itwin/build-tools": "3.0.0-dev.
|
|
37
|
-
"@itwin/core-bentley": "3.0.0-dev.
|
|
38
|
-
"@itwin/core-common": "3.0.0-dev.
|
|
39
|
-
"@itwin/core-i18n": "3.0.0-dev.
|
|
40
|
-
"@itwin/core-react": "3.0.0-dev.
|
|
41
|
-
"@itwin/eslint-plugin": "3.0.0-dev.
|
|
35
|
+
"@itwin/appui-abstract": "3.0.0-dev.147",
|
|
36
|
+
"@itwin/build-tools": "3.0.0-dev.147",
|
|
37
|
+
"@itwin/core-bentley": "3.0.0-dev.147",
|
|
38
|
+
"@itwin/core-common": "3.0.0-dev.147",
|
|
39
|
+
"@itwin/core-i18n": "3.0.0-dev.147",
|
|
40
|
+
"@itwin/core-react": "3.0.0-dev.147",
|
|
41
|
+
"@itwin/eslint-plugin": "3.0.0-dev.147",
|
|
42
42
|
"@testing-library/react": "^12.0.0",
|
|
43
43
|
"@testing-library/react-hooks": "^7.0.2",
|
|
44
44
|
"@testing-library/user-event": "^13.2.1",
|
|
@@ -57,7 +57,6 @@
|
|
|
57
57
|
"@types/react-dom": "^17.0.0",
|
|
58
58
|
"@types/react-highlight-words": "^0.16.1",
|
|
59
59
|
"@types/react-select": "3.0.26",
|
|
60
|
-
"@types/react-virtualized": "^9.21.11",
|
|
61
60
|
"@types/react-window": "^1.8.2",
|
|
62
61
|
"@types/sinon": "^9.0.0",
|
|
63
62
|
"@types/sinon-chai": "^3.2.0",
|
|
@@ -112,7 +111,6 @@
|
|
|
112
111
|
"react-dnd-html5-backend": "^11.1.3",
|
|
113
112
|
"react-highlight-words": "^0.17.0",
|
|
114
113
|
"react-select": "3.2.0",
|
|
115
|
-
"react-virtualized": "^9.21.11",
|
|
116
114
|
"react-window": "^1.8.2",
|
|
117
115
|
"rxjs": "^6.6.2",
|
|
118
116
|
"shortid": "~2.2.15",
|