@itwin/components-react 4.0.0-dev.14 → 4.0.0-dev.16
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/common/UseDebouncedAsyncValue.d.ts +1 -0
- package/lib/cjs/components-react/common/UseDebouncedAsyncValue.d.ts.map +1 -1
- package/lib/cjs/components-react/common/UseDebouncedAsyncValue.js +12 -1
- package/lib/cjs/components-react/common/UseDebouncedAsyncValue.js.map +1 -1
- package/lib/cjs/components-react/properties/renderers/label/NonPrimitivePropertyLabelRenderer.d.ts.map +1 -1
- package/lib/cjs/components-react/properties/renderers/label/NonPrimitivePropertyLabelRenderer.js +3 -4
- package/lib/cjs/components-react/properties/renderers/label/NonPrimitivePropertyLabelRenderer.js.map +1 -1
- package/lib/cjs/components-react/properties/renderers/label/PropertyLabelRenderer.scss +8 -8
- package/lib/cjs/components-react/propertygrid/internal/PropertyGridHooks.d.ts +2 -0
- package/lib/cjs/components-react/propertygrid/internal/PropertyGridHooks.d.ts.map +1 -1
- package/lib/cjs/components-react/propertygrid/internal/PropertyGridHooks.js +2 -0
- package/lib/cjs/components-react/propertygrid/internal/PropertyGridHooks.js.map +1 -1
- package/lib/cjs/components-react/toolbar/Toolbar.d.ts +3 -1
- package/lib/cjs/components-react/toolbar/Toolbar.d.ts.map +1 -1
- package/lib/cjs/components-react/toolbar/Toolbar.js +2 -1
- package/lib/cjs/components-react/toolbar/Toolbar.js.map +1 -1
- package/lib/cjs/components-react/toolbar/ToolbarWithOverflow.d.ts +5 -1
- package/lib/cjs/components-react/toolbar/ToolbarWithOverflow.d.ts.map +1 -1
- package/lib/cjs/components-react/toolbar/ToolbarWithOverflow.js +3 -2
- package/lib/cjs/components-react/toolbar/ToolbarWithOverflow.js.map +1 -1
- package/lib/esm/components-react/common/UseDebouncedAsyncValue.d.ts +1 -0
- package/lib/esm/components-react/common/UseDebouncedAsyncValue.d.ts.map +1 -1
- package/lib/esm/components-react/common/UseDebouncedAsyncValue.js +12 -1
- package/lib/esm/components-react/common/UseDebouncedAsyncValue.js.map +1 -1
- package/lib/esm/components-react/properties/renderers/label/NonPrimitivePropertyLabelRenderer.d.ts.map +1 -1
- package/lib/esm/components-react/properties/renderers/label/NonPrimitivePropertyLabelRenderer.js +3 -4
- package/lib/esm/components-react/properties/renderers/label/NonPrimitivePropertyLabelRenderer.js.map +1 -1
- package/lib/esm/components-react/properties/renderers/label/PropertyLabelRenderer.scss +8 -8
- package/lib/esm/components-react/propertygrid/internal/PropertyGridHooks.d.ts +2 -0
- package/lib/esm/components-react/propertygrid/internal/PropertyGridHooks.d.ts.map +1 -1
- package/lib/esm/components-react/propertygrid/internal/PropertyGridHooks.js +2 -0
- package/lib/esm/components-react/propertygrid/internal/PropertyGridHooks.js.map +1 -1
- package/lib/esm/components-react/toolbar/Toolbar.d.ts +3 -1
- package/lib/esm/components-react/toolbar/Toolbar.d.ts.map +1 -1
- package/lib/esm/components-react/toolbar/Toolbar.js +2 -1
- package/lib/esm/components-react/toolbar/Toolbar.js.map +1 -1
- package/lib/esm/components-react/toolbar/ToolbarWithOverflow.d.ts +5 -1
- package/lib/esm/components-react/toolbar/ToolbarWithOverflow.d.ts.map +1 -1
- package/lib/esm/components-react/toolbar/ToolbarWithOverflow.js +3 -2
- package/lib/esm/components-react/toolbar/ToolbarWithOverflow.js.map +1 -1
- package/package.json +3 -3
|
@@ -7,6 +7,7 @@
|
|
|
7
7
|
* The first promise will always be executed.
|
|
8
8
|
* Any promises following the first while it is executing will be scheduled (and unscheduled), leaving only the last promise to be resolved.
|
|
9
9
|
* Once the first promise finishes resolving, the last passed promise starts resolving.
|
|
10
|
+
* @throws if/when `valueToBeResolved` promise is rejected. The error is thrown in the React's render loop, so it can be caught using an error boundary.
|
|
10
11
|
* @beta
|
|
11
12
|
*/
|
|
12
13
|
export declare function useDebouncedAsyncValue<TReturn>(valueToBeResolved: undefined | (() => Promise<TReturn>)): {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UseDebouncedAsyncValue.d.ts","sourceRoot":"","sources":["../../../../src/components-react/common/UseDebouncedAsyncValue.ts"],"names":[],"mappings":"AAIA;;GAEG;AAQH
|
|
1
|
+
{"version":3,"file":"UseDebouncedAsyncValue.d.ts","sourceRoot":"","sources":["../../../../src/components-react/common/UseDebouncedAsyncValue.ts"],"names":[],"mappings":"AAIA;;GAEG;AAQH;;;;;;;;GAQG;AACH,wBAAgB,sBAAsB,CAAC,OAAO,EAAE,iBAAiB,EAAE,SAAS,GAAG,CAAC,MAAM,OAAO,CAAC,OAAO,CAAC,CAAC;;;EA8CtG"}
|
|
@@ -9,9 +9,9 @@
|
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
10
|
exports.useDebouncedAsyncValue = void 0;
|
|
11
11
|
const react_1 = require("react");
|
|
12
|
+
const defer_1 = require("rxjs/internal/observable/defer");
|
|
12
13
|
const publish_1 = require("rxjs/internal/operators/publish");
|
|
13
14
|
const refCount_1 = require("rxjs/internal/operators/refCount");
|
|
14
|
-
const defer_1 = require("rxjs/internal/observable/defer");
|
|
15
15
|
const SubscriptionScheduler_1 = require("./SubscriptionScheduler");
|
|
16
16
|
/**
|
|
17
17
|
* Custom hook for working with promise values.
|
|
@@ -19,12 +19,17 @@ const SubscriptionScheduler_1 = require("./SubscriptionScheduler");
|
|
|
19
19
|
* The first promise will always be executed.
|
|
20
20
|
* Any promises following the first while it is executing will be scheduled (and unscheduled), leaving only the last promise to be resolved.
|
|
21
21
|
* Once the first promise finishes resolving, the last passed promise starts resolving.
|
|
22
|
+
* @throws if/when `valueToBeResolved` promise is rejected. The error is thrown in the React's render loop, so it can be caught using an error boundary.
|
|
22
23
|
* @beta
|
|
23
24
|
*/
|
|
24
25
|
function useDebouncedAsyncValue(valueToBeResolved) {
|
|
25
26
|
const scheduler = (0, react_1.useMemo)(() => new SubscriptionScheduler_1.SubscriptionScheduler(), []); // eslint-disable-line react-hooks/exhaustive-deps
|
|
26
27
|
const [value, setValue] = (0, react_1.useState)();
|
|
27
28
|
const [inProgress, setInProgress] = (0, react_1.useState)(false);
|
|
29
|
+
const [errorState, setErrorState] = (0, react_1.useState)({
|
|
30
|
+
error: undefined,
|
|
31
|
+
hasError: false,
|
|
32
|
+
});
|
|
28
33
|
(0, react_1.useEffect)(() => {
|
|
29
34
|
if (!valueToBeResolved) {
|
|
30
35
|
setValue(undefined);
|
|
@@ -40,9 +45,15 @@ function useDebouncedAsyncValue(valueToBeResolved) {
|
|
|
40
45
|
setValue(data);
|
|
41
46
|
setInProgress(false);
|
|
42
47
|
},
|
|
48
|
+
error: (err) => {
|
|
49
|
+
setErrorState({ error: err, hasError: true });
|
|
50
|
+
setInProgress(false);
|
|
51
|
+
},
|
|
43
52
|
});
|
|
44
53
|
return () => { subscription.unsubscribe(); };
|
|
45
54
|
}, [valueToBeResolved, scheduler]);
|
|
55
|
+
if (errorState.hasError)
|
|
56
|
+
throw errorState.error ?? new Error("Exception in `useDebouncedAsyncValue`");
|
|
46
57
|
return { value, inProgress };
|
|
47
58
|
}
|
|
48
59
|
exports.useDebouncedAsyncValue = useDebouncedAsyncValue;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UseDebouncedAsyncValue.js","sourceRoot":"","sources":["../../../../src/components-react/common/UseDebouncedAsyncValue.ts"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,iCAAqD;AACrD,6DAA0D;AAC1D,+DAA4D;AAC5D,
|
|
1
|
+
{"version":3,"file":"UseDebouncedAsyncValue.js","sourceRoot":"","sources":["../../../../src/components-react/common/UseDebouncedAsyncValue.ts"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,iCAAqD;AACrD,0DAAuD;AACvD,6DAA0D;AAC1D,+DAA4D;AAC5D,mEAAsF;AAEtF;;;;;;;;GAQG;AACH,SAAgB,sBAAsB,CAAU,iBAAuD;IACrG,MAAM,SAAS,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,IAAI,6CAAqB,EAAW,EAAE,EAAE,CAAC,CAAC,CAAC,kDAAkD;IAE7H,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,GAAW,CAAC;IAC9C,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IACpD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAGzC;QACD,KAAK,EAAE,SAAS;QAChB,QAAQ,EAAE,KAAK;KAChB,CAAC,CAAC;IAEH,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,CAAC,iBAAiB,EAAE;YACtB,QAAQ,CAAC,SAAS,CAAC,CAAC;YACpB,aAAa,CAAC,KAAK,CAAC,CAAC;YACrB,OAAO;SACR;QAED,aAAa,CAAC,IAAI,CAAC,CAAC;QACpB,yFAAyF;QACzF,MAAM,YAAY,GAAG,IAAA,aAAK,EAAC,iBAAiB,CAAC;aAC1C,IAAI,CACH,IAAA,iBAAO,GAAE,EACT,IAAA,mBAAQ,GAAE,EACV,IAAA,4CAAoB,EAAC,SAAS,CAAC,CAChC;aACA,SAAS,CAAC;YACT,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE;gBACb,QAAQ,CAAC,IAAI,CAAC,CAAC;gBACf,aAAa,CAAC,KAAK,CAAC,CAAC;YACvB,CAAC;YACD,KAAK,EAAE,CAAC,GAAG,EAAE,EAAE;gBACb,aAAa,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;gBAC9C,aAAa,CAAC,KAAK,CAAC,CAAC;YACvB,CAAC;SACF,CAAC,CAAC;QAEL,OAAO,GAAG,EAAE,GAAG,YAAY,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,CAAC;IAC/C,CAAC,EAAE,CAAC,iBAAiB,EAAE,SAAS,CAAC,CAAC,CAAC;IAEnC,IAAI,UAAU,CAAC,QAAQ;QACrB,MAAM,UAAU,CAAC,KAAK,IAAI,IAAI,KAAK,CAAC,uCAAuC,CAAC,CAAC;IAE/E,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC;AAC/B,CAAC;AA9CD,wDA8CC","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/** @packageDocumentation\r\n * @module Common\r\n */\r\n\r\nimport { useEffect, useMemo, useState } from \"react\";\r\nimport { defer } from \"rxjs/internal/observable/defer\";\r\nimport { publish } from \"rxjs/internal/operators/publish\";\r\nimport { refCount } from \"rxjs/internal/operators/refCount\";\r\nimport { scheduleSubscription, SubscriptionScheduler } from \"./SubscriptionScheduler\";\r\n\r\n/**\r\n * Custom hook for working with promise values.\r\n * Promises are debounced using trailing and leading edge.\r\n * The first promise will always be executed.\r\n * Any promises following the first while it is executing will be scheduled (and unscheduled), leaving only the last promise to be resolved.\r\n * Once the first promise finishes resolving, the last passed promise starts resolving.\r\n * @throws if/when `valueToBeResolved` promise is rejected. The error is thrown in the React's render loop, so it can be caught using an error boundary.\r\n * @beta\r\n */\r\nexport function useDebouncedAsyncValue<TReturn>(valueToBeResolved: undefined | (() => Promise<TReturn>)) {\r\n const scheduler = useMemo(() => new SubscriptionScheduler<TReturn>(), []); // eslint-disable-line react-hooks/exhaustive-deps\r\n\r\n const [value, setValue] = useState<TReturn>();\r\n const [inProgress, setInProgress] = useState(false);\r\n const [errorState, setErrorState] = useState<{\r\n error: Error | undefined;\r\n hasError: boolean;\r\n }>({\r\n error: undefined,\r\n hasError: false,\r\n });\r\n\r\n useEffect(() => {\r\n if (!valueToBeResolved) {\r\n setValue(undefined);\r\n setInProgress(false);\r\n return;\r\n }\r\n\r\n setInProgress(true);\r\n // schedule and subscribe to the observable emitting value from valueToBeResolved promise\r\n const subscription = defer(valueToBeResolved)\r\n .pipe(\r\n publish(),\r\n refCount(),\r\n scheduleSubscription(scheduler),\r\n )\r\n .subscribe({\r\n next: (data) => {\r\n setValue(data);\r\n setInProgress(false);\r\n },\r\n error: (err) => {\r\n setErrorState({ error: err, hasError: true });\r\n setInProgress(false);\r\n },\r\n });\r\n\r\n return () => { subscription.unsubscribe(); };\r\n }, [valueToBeResolved, scheduler]);\r\n\r\n if (errorState.hasError)\r\n throw errorState.error ?? new Error(\"Exception in `useDebouncedAsyncValue`\");\r\n\r\n return { value, inProgress };\r\n}\r\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NonPrimitivePropertyLabelRenderer.d.ts","sourceRoot":"","sources":["../../../../../../src/components-react/properties/renderers/label/NonPrimitivePropertyLabelRenderer.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,8BAA8B,CAAC;AACtC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"NonPrimitivePropertyLabelRenderer.d.ts","sourceRoot":"","sources":["../../../../../../src/components-react/properties/renderers/label/NonPrimitivePropertyLabelRenderer.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,8BAA8B,CAAC;AACtC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,mCAAmC,EAAE,MAAM,kCAAkC,CAAC;AAGvF;;GAEG;AACH,MAAM,WAAW,sCAAuC,SAAQ,mCAAmC;IACjG,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAED;;;;GAIG;AACH,qBAAa,iCAAkC,SAAQ,KAAK,CAAC,aAAa,CAAC,sCAAsC,CAAC;IAChH,OAAO,CAAC,QAAQ,CAKd;IAEc,MAAM;CAevB"}
|
package/lib/cjs/components-react/properties/renderers/label/NonPrimitivePropertyLabelRenderer.js
CHANGED
|
@@ -33,9 +33,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
33
33
|
exports.NonPrimitivePropertyLabelRenderer = void 0;
|
|
34
34
|
require("./PropertyLabelRenderer.scss");
|
|
35
35
|
const React = __importStar(require("react"));
|
|
36
|
-
const PropertyLabelRenderer_1 = require("./PropertyLabelRenderer");
|
|
37
36
|
const itwinui_icons_react_1 = require("@itwin/itwinui-icons-react");
|
|
38
|
-
const
|
|
37
|
+
const PropertyLabelRenderer_1 = require("./PropertyLabelRenderer");
|
|
39
38
|
/**
|
|
40
39
|
* A React component that renders a non-primitive property label.
|
|
41
40
|
* It renders an animated arrow with text which expands when label is clicked.
|
|
@@ -53,8 +52,8 @@ class NonPrimitivePropertyLabelRenderer extends React.PureComponent {
|
|
|
53
52
|
}
|
|
54
53
|
render() {
|
|
55
54
|
return (React.createElement("div", { style: PropertyLabelRenderer_1.PropertyLabelRenderer.getStyle(this.props.offset), className: `components-nonprimitive-property-label-renderer ${this.props.className ? this.props.className : ""}`, onClick: this._onClick, role: "presentation" },
|
|
56
|
-
React.createElement("div", { className: (this.props.isExpanded ? "
|
|
57
|
-
React.createElement(
|
|
55
|
+
React.createElement("div", { className: (this.props.isExpanded ? "components-expanded" : "") },
|
|
56
|
+
React.createElement(itwinui_icons_react_1.SvgChevronRight, null)),
|
|
58
57
|
React.createElement(PropertyLabelRenderer_1.PropertyLabelRenderer, { renderColon: this.props.renderColon }, this.props.children)));
|
|
59
58
|
}
|
|
60
59
|
}
|
package/lib/cjs/components-react/properties/renderers/label/NonPrimitivePropertyLabelRenderer.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NonPrimitivePropertyLabelRenderer.js","sourceRoot":"","sources":["../../../../../../src/components-react/properties/renderers/label/NonPrimitivePropertyLabelRenderer.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,wCAAsC;AACtC,6CAA+B;
|
|
1
|
+
{"version":3,"file":"NonPrimitivePropertyLabelRenderer.js","sourceRoot":"","sources":["../../../../../../src/components-react/properties/renderers/label/NonPrimitivePropertyLabelRenderer.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,wCAAsC;AACtC,6CAA+B;AAC/B,oEAA6D;AAE7D,mEAAgE;AAWhE;;;;GAIG;AACH,MAAa,iCAAkC,SAAQ,KAAK,CAAC,aAAqD;IAAlH;;QACU,aAAQ,GAAG,GAAG,EAAE;YACtB,IAAI,IAAI,CAAC,KAAK,CAAC,UAAU;gBACvB,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;;gBAExB,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;QAC1B,CAAC,CAAC;IAiBJ,CAAC;IAfiB,MAAM;QACpB,OAAO,CACL,6BACE,KAAK,EAAE,6CAAqB,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,EACxD,SAAS,EAAE,mDAAmD,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,EAChH,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,IAAI,EAAC,cAAc;YAEnB,6BAAK,SAAS,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,CAAC;gBAClE,oBAAC,qCAAe,OAAG,CACf;YACN,oBAAC,6CAAqB,IAAC,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,WAAW,IAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAyB,CACrG,CACP,CAAC;IACJ,CAAC;CACF;AAvBD,8EAuBC","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/** @packageDocumentation\r\n * @module Properties\r\n */\r\n\r\nimport \"./PropertyLabelRenderer.scss\";\r\nimport * as React from \"react\";\r\nimport { SvgChevronRight } from \"@itwin/itwinui-icons-react\";\r\nimport { PrimitivePropertyLabelRendererProps } from \"./PrimitivePropertyLabelRenderer\";\r\nimport { PropertyLabelRenderer } from \"./PropertyLabelRenderer\";\r\n\r\n/** Properties for the [[NonPrimitivePropertyLabelRenderer]] React component\r\n * @public\r\n */\r\nexport interface NonPrimitivePropertyLabelRendererProps extends PrimitivePropertyLabelRendererProps {\r\n isExpanded: boolean;\r\n onExpand: () => void;\r\n onCollapse: () => void;\r\n}\r\n\r\n/**\r\n * A React component that renders a non-primitive property label.\r\n * It renders an animated arrow with text which expands when label is clicked.\r\n * @public\r\n */\r\nexport class NonPrimitivePropertyLabelRenderer extends React.PureComponent<NonPrimitivePropertyLabelRendererProps> {\r\n private _onClick = () => {\r\n if (this.props.isExpanded)\r\n this.props.onCollapse();\r\n else\r\n this.props.onExpand();\r\n };\r\n\r\n public override render() {\r\n return (\r\n <div\r\n style={PropertyLabelRenderer.getStyle(this.props.offset)}\r\n className={`components-nonprimitive-property-label-renderer ${this.props.className ? this.props.className : \"\"}`}\r\n onClick={this._onClick}\r\n role=\"presentation\"\r\n >\r\n <div className={(this.props.isExpanded ? \"components-expanded\" : \"\")}>\r\n <SvgChevronRight />\r\n </div>\r\n <PropertyLabelRenderer renderColon={this.props.renderColon}>{this.props.children}</PropertyLabelRenderer>\r\n </div>\r\n );\r\n }\r\n}\r\n"]}
|
|
@@ -64,19 +64,19 @@
|
|
|
64
64
|
|
|
65
65
|
> .components-property-label-renderer {
|
|
66
66
|
flex: 1;
|
|
67
|
+
padding-left: var(--iui-size-2xs);
|
|
67
68
|
}
|
|
68
69
|
|
|
69
70
|
> div {
|
|
70
|
-
width: 22px;
|
|
71
|
-
height: 22px;
|
|
72
|
-
margin-left: -7px;
|
|
73
|
-
margin-right: 2px;
|
|
74
|
-
font-size: 10px;
|
|
75
|
-
display: flex;
|
|
76
|
-
align-items: center;
|
|
77
|
-
justify-content: center;
|
|
78
71
|
@include transition(var(--iui-duration-1), ease-in-out);
|
|
79
72
|
|
|
73
|
+
svg {
|
|
74
|
+
width: var(--iui-size-s);
|
|
75
|
+
height: var(--iui-size-s);
|
|
76
|
+
fill: var(--iui-color-icon);
|
|
77
|
+
display: block;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
80
|
&.components-expanded {
|
|
81
81
|
@include rotate(90deg);
|
|
82
82
|
}
|
|
@@ -7,6 +7,7 @@ import { IPropertyGridModel } from "./PropertyGridModel";
|
|
|
7
7
|
import { IPropertyGridModelSource, PropertyGridModelSource } from "./PropertyGridModelSource";
|
|
8
8
|
/**
|
|
9
9
|
* Custom hook that gets [[PropertyData]] from given [[IPropertyDataProvider]] and subscribes to further data changes.
|
|
10
|
+
* @throws if/when `IPropertyDataProvider.getData()` promise is rejected. The error is thrown in the React's render loop, so it can be caught using an error boundary.
|
|
10
11
|
* @public
|
|
11
12
|
*/
|
|
12
13
|
export declare function usePropertyData(props: {
|
|
@@ -17,6 +18,7 @@ export declare function usePropertyData(props: {
|
|
|
17
18
|
};
|
|
18
19
|
/**
|
|
19
20
|
* Custom hook that creates a [[PropertyGridModelSource]] and subscribes it to data updates from the data provider.
|
|
21
|
+
* @throws if/when `IPropertyDataProvider.getData()` promise is rejected. The error is thrown in the React's render loop, so it can be caught using an error boundary.
|
|
20
22
|
* @public
|
|
21
23
|
*/
|
|
22
24
|
export declare function usePropertyGridModelSource(props: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PropertyGridHooks.d.ts","sourceRoot":"","sources":["../../../../../src/components-react/propertygrid/internal/PropertyGridHooks.ts"],"names":[],"mappings":"AAIA;;GAEG;AAIH,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAEhE,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AACtE,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,EAAE,wBAAwB,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAE9F
|
|
1
|
+
{"version":3,"file":"PropertyGridHooks.d.ts","sourceRoot":"","sources":["../../../../../src/components-react/propertygrid/internal/PropertyGridHooks.ts"],"names":[],"mappings":"AAIA;;GAEG;AAIH,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAEhE,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AACtE,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,EAAE,wBAAwB,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAE9F;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE;IAAE,YAAY,EAAE,qBAAqB,CAAA;CAAE;;;EAa7E;AAED;;;;GAIG;AACH,wBAAgB,0BAA0B,CAAC,KAAK,EAAE;IAAE,YAAY,EAAE,qBAAqB,CAAA;CAAE,2BAcxF;AAED;;;GAGG;AACH,wBAAgB,2BAA2B,CAAC,KAAK,EAAE;IAAE,WAAW,EAAE,wBAAwB,CAAA;CAAE,4BAE3F;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE;IAAE,WAAW,EAAE,wBAAwB,CAAA;CAAE,kCAapF"}
|
|
@@ -15,6 +15,7 @@ const PropertyGridEventHandler_1 = require("./PropertyGridEventHandler");
|
|
|
15
15
|
const PropertyGridModelSource_1 = require("./PropertyGridModelSource");
|
|
16
16
|
/**
|
|
17
17
|
* Custom hook that gets [[PropertyData]] from given [[IPropertyDataProvider]] and subscribes to further data changes.
|
|
18
|
+
* @throws if/when `IPropertyDataProvider.getData()` promise is rejected. The error is thrown in the React's render loop, so it can be caught using an error boundary.
|
|
18
19
|
* @public
|
|
19
20
|
*/
|
|
20
21
|
function usePropertyData(props) {
|
|
@@ -32,6 +33,7 @@ function usePropertyData(props) {
|
|
|
32
33
|
exports.usePropertyData = usePropertyData;
|
|
33
34
|
/**
|
|
34
35
|
* Custom hook that creates a [[PropertyGridModelSource]] and subscribes it to data updates from the data provider.
|
|
36
|
+
* @throws if/when `IPropertyDataProvider.getData()` promise is rejected. The error is thrown in the React's render loop, so it can be caught using an error boundary.
|
|
35
37
|
* @public
|
|
36
38
|
*/
|
|
37
39
|
function usePropertyGridModelSource(props) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PropertyGridHooks.js","sourceRoot":"","sources":["../../../../../src/components-react/propertygrid/internal/PropertyGridHooks.ts"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,iCAA8E;AAC9E,gFAA6E;AAE7E,gFAA6E;AAC7E,yEAAsE;AAEtE,uEAA8F;AAE9F
|
|
1
|
+
{"version":3,"file":"PropertyGridHooks.js","sourceRoot":"","sources":["../../../../../src/components-react/propertygrid/internal/PropertyGridHooks.ts"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,iCAA8E;AAC9E,gFAA6E;AAE7E,gFAA6E;AAC7E,yEAAsE;AAEtE,uEAA8F;AAE9F;;;;GAIG;AACH,SAAgB,eAAe,CAAC,KAA8C;IAC5E,MAAM,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC;IAE/B,MAAM,CAAC,YAAY,EAAE,mBAAmB,CAAC,GAAG,IAAA,kBAAU,EAAC,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;IACvE,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,OAAO,YAAY,CAAC,aAAa,CAAC,WAAW,CAAC,GAAG,EAAE;YACjD,mBAAmB,EAAE,CAAC;QACxB,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,yGAAyG;IACzG,uDAAuD;IACvD,OAAO,IAAA,+CAAsB,EAAC,IAAA,mBAAW,EAAC,KAAK,IAAI,EAAE,CAAC,YAAY,CAAC,OAAO,EAAE,EAAE,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;AAC/G,CAAC;AAbD,0CAaC;AAED;;;;GAIG;AACH,SAAgB,0BAA0B,CAAC,KAA8C;IACvF,MAAM,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC;IACvD,MAAM,EAAE,YAAY,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,CAAC;IAEtC,8DAA8D;IAC9D,uDAAuD;IACvD,MAAM,WAAW,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,IAAI,iDAAuB,CAAC,IAAI,+CAAsB,EAAE,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAE7G,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,YAAY;YACd,WAAW,CAAC,eAAe,CAAC,YAAY,CAAC,CAAC;IAC9C,CAAC,EAAE,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC,CAAC;IAEhC,OAAO,WAAW,CAAC;AACrB,CAAC;AAdD,gEAcC;AAED;;;GAGG;AACH,SAAgB,2BAA2B,CAAC,KAAgD;IAC1F,OAAO,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,IAAI,mDAAwB,CAAC,KAAK,CAAC,WAAW,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC;AAC7F,CAAC;AAFD,kEAEC;AAED;;;GAGG;AACH,SAAgB,oBAAoB,CAAC,KAAgD;IACnF,MAAM,EAAE,WAAW,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,CAAC;IACrC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,GAAsB,CAAC;IAEzD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,YAAY,GAAG,GAAG,EAAE;YACxB,QAAQ,CAAC,WAAW,CAAC,QAAQ,EAAE,CAAC,CAAC;QACnC,CAAC,CAAC;QACF,YAAY,EAAE,CAAC;QACf,OAAO,WAAW,CAAC,cAAc,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;IAC9D,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,OAAO,KAAK,CAAC;AACf,CAAC;AAbD,oDAaC","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/** @packageDocumentation\r\n * @module PropertyGrid\r\n */\r\n\r\nimport { useCallback, useEffect, useMemo, useReducer, useState } from \"react\";\r\nimport { useDebouncedAsyncValue } from \"../../common/UseDebouncedAsyncValue\";\r\nimport { IPropertyDataProvider } from \"../PropertyDataProvider\";\r\nimport { MutableGridItemFactory } from \"./flat-items/MutableGridItemFactory\";\r\nimport { PropertyGridEventHandler } from \"./PropertyGridEventHandler\";\r\nimport { IPropertyGridModel } from \"./PropertyGridModel\";\r\nimport { IPropertyGridModelSource, PropertyGridModelSource } from \"./PropertyGridModelSource\";\r\n\r\n/**\r\n * Custom hook that gets [[PropertyData]] from given [[IPropertyDataProvider]] and subscribes to further data changes.\r\n * @throws if/when `IPropertyDataProvider.getData()` promise is rejected. The error is thrown in the React's render loop, so it can be caught using an error boundary.\r\n * @public\r\n */\r\nexport function usePropertyData(props: { dataProvider: IPropertyDataProvider }) {\r\n const { dataProvider } = props;\r\n\r\n const [forcedUpdate, triggerForcedUpdate] = useReducer(() => ({}), {});\r\n useEffect(() => {\r\n return dataProvider.onDataChanged.addListener(() => {\r\n triggerForcedUpdate();\r\n });\r\n }, [dataProvider]);\r\n\r\n // forcedUpdate is added to dependency list to re-memo getData promise when onDataChanged emits an event.\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n return useDebouncedAsyncValue(useCallback(async () => dataProvider.getData(), [dataProvider, forcedUpdate]));\r\n}\r\n\r\n/**\r\n * Custom hook that creates a [[PropertyGridModelSource]] and subscribes it to data updates from the data provider.\r\n * @throws if/when `IPropertyDataProvider.getData()` promise is rejected. The error is thrown in the React's render loop, so it can be caught using an error boundary.\r\n * @public\r\n */\r\nexport function usePropertyGridModelSource(props: { dataProvider: IPropertyDataProvider }) {\r\n const { value: propertyData } = usePropertyData(props);\r\n const { dataProvider } = { ...props };\r\n\r\n // Model source needs to be recreated if data provider changes\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n const modelSource = useMemo(() => new PropertyGridModelSource(new MutableGridItemFactory()), [dataProvider]);\r\n\r\n useEffect(() => {\r\n if (propertyData)\r\n modelSource.setPropertyData(propertyData);\r\n }, [modelSource, propertyData]);\r\n\r\n return modelSource;\r\n}\r\n\r\n/**\r\n * Custom hook that creates memoized version of [[PropertyGridEventHandler]] that modifies given modelSource\r\n * @public\r\n */\r\nexport function usePropertyGridEventHandler(props: { modelSource: IPropertyGridModelSource }) {\r\n return useMemo(() => new PropertyGridEventHandler(props.modelSource), [props.modelSource]);\r\n}\r\n\r\n/**\r\n * Custom hook that automatically listens and retrieves latest model from model source\r\n * @public\r\n */\r\nexport function usePropertyGridModel(props: { modelSource: IPropertyGridModelSource }) {\r\n const { modelSource } = { ...props };\r\n const [model, setModel] = useState<IPropertyGridModel>();\r\n\r\n useEffect(() => {\r\n const modelChanged = () => {\r\n setModel(modelSource.getModel());\r\n };\r\n modelChanged();\r\n return modelSource.onModelChanged.addListener(modelChanged);\r\n }, [modelSource]);\r\n\r\n return model;\r\n}\r\n"]}
|
|
@@ -9,6 +9,7 @@ import { Direction } from "./utilities/Direction";
|
|
|
9
9
|
import { ToolbarOpacitySetting, ToolbarPanelAlignment } from "./ToolbarWithOverflow";
|
|
10
10
|
/** Properties of [[Toolbar]] component.
|
|
11
11
|
* @public
|
|
12
|
+
* @deprecated in 4.0. Use [ToolbarProps]($appui-react) instead.
|
|
12
13
|
*/
|
|
13
14
|
export interface ToolbarProps extends CommonProps, NoChildrenProps {
|
|
14
15
|
/** Describes to which direction the popup panels are expanded. Defaults to: [[Direction.Bottom]] */
|
|
@@ -26,8 +27,9 @@ export interface ToolbarProps extends CommonProps, NoChildrenProps {
|
|
|
26
27
|
/** Optional function to call on any KeyDown events processed by toolbar */
|
|
27
28
|
onKeyDown?: (e: React.KeyboardEvent) => void;
|
|
28
29
|
}
|
|
29
|
-
/** Component that displays
|
|
30
|
+
/** Component that displays toolbar items.
|
|
30
31
|
* @public
|
|
32
|
+
* @deprecated in 4.0. Use [Toolbar]($appui-react) instead.
|
|
31
33
|
*/
|
|
32
34
|
export declare function Toolbar(props: ToolbarProps): JSX.Element;
|
|
33
35
|
//# sourceMappingURL=Toolbar.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../../../src/components-react/toolbar/Toolbar.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,gBAAgB,CAAC;AAExB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACL,iBAAiB,EAAE,kBAAkB,EACtC,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEjE,OAAO,EAAE,SAAS,EAAmD,MAAM,uBAAuB,CAAC;AACnG,OAAO,EAAiE,qBAAqB,EAAE,qBAAqB,EAAuC,MAAM,uBAAuB,CAAC;AAEzL
|
|
1
|
+
{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../../../src/components-react/toolbar/Toolbar.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,gBAAgB,CAAC;AAExB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACL,iBAAiB,EAAE,kBAAkB,EACtC,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEjE,OAAO,EAAE,SAAS,EAAmD,MAAM,uBAAuB,CAAC;AACnG,OAAO,EAAiE,qBAAqB,EAAE,qBAAqB,EAAuC,MAAM,uBAAuB,CAAC;AAEzL;;;GAGG;AACH,MAAM,WAAW,YAAa,SAAQ,WAAW,EAAE,eAAe;IAChE,oGAAoG;IACpG,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,uGAAuG;IACvG,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,8FAA8F;IAC9F,cAAc,CAAC,EAAE,qBAAqB,CAAC;IACvC,mEAAmE;IACnE,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,oFAAoF;IACpF,qBAAqB,CAAC,EAAE,qBAAqB,CAAC;IAC9C,sDAAsD;IACtD,cAAc,CAAC,EAAE,kBAAkB,CAAC;IACpC,2EAA2E;IAC3E,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;CAC9C;AAWD;;;GAGG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,eAiF1C"}
|
|
@@ -48,8 +48,9 @@ function getItemWrapperClass(child) {
|
|
|
48
48
|
}
|
|
49
49
|
return "";
|
|
50
50
|
}
|
|
51
|
-
/** Component that displays
|
|
51
|
+
/** Component that displays toolbar items.
|
|
52
52
|
* @public
|
|
53
|
+
* @deprecated in 4.0. Use [Toolbar]($appui-react) instead.
|
|
53
54
|
*/
|
|
54
55
|
function Toolbar(props) {
|
|
55
56
|
const expandsTo = props.expandsTo ? props.expandsTo : Direction_1.Direction.Bottom;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toolbar.js","sourceRoot":"","sources":["../../../../src/components-react/toolbar/Toolbar.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,0BAAwB;AACxB,4DAAoC;AACpC,6CAA+B;AAK/B,mCAAuC;AACvC,qDAAmG;AACnG,+DAAyL;
|
|
1
|
+
{"version":3,"file":"Toolbar.js","sourceRoot":"","sources":["../../../../src/components-react/toolbar/Toolbar.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,0BAAwB;AACxB,4DAAoC;AACpC,6CAA+B;AAK/B,mCAAuC;AACvC,qDAAmG;AACnG,+DAAyL;AAuBzL,SAAS,mBAAmB,CAAC,KAAsB;IACjD,uBAAuB;IACvB,IAAI,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE;QAC/B,IAAI,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,iBAAiB;YAC9C,OAAO,0CAA0C,CAAC;KACrD;IACD,OAAO,EAAE,CAAC;AACZ,CAAC;AAED;;;GAGG;AACH,SAAgB,OAAO,CAAC,KAAmB;IACzC,MAAM,SAAS,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,qBAAS,CAAC,MAAM,CAAC;IACvE,MAAM,kBAAkB,GAAG,CAAC,CAAC,KAAK,CAAC,kBAAkB,CAAC;IACtD,MAAM,cAAc,GAAG,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,2CAAqB,CAAC,KAAK,CAAC;IACjG,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IAEhE,MAAM,yBAAyB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,SAAkB,EAAE,EAAE;QACzE,mHAAmH;QACnH,UAAU,CAAC,GAAG,EAAE;YACd,kBAAkB,CAAC,CAAC,IAAI,EAAE,EAAE;gBAC1B,MAAM,SAAS,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC;gBACtD,sCAAsC;gBACtC,iDAAiD;gBACjD,OAAO,SAAS,GAAG,CAAC,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;YAClE,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,cAAc,GAAG,KAAK,CAAC,OAAO,CAAoB,GAAG,EAAE;QAC3D,OAAO,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YACrC,IAAI,iBAAiB,GAAG,KAAK,CAAC;YAC9B,IAAI,KAAK,GAAG,CAAC;gBACX,iBAAiB,GAAG,IAAI,CAAC,aAAa,KAAK,KAAK,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,aAAa,CAAC;YAClF,OAAO,CACL,oBAAC,0CAAoB,IACnB,GAAG,EAAE,IAAI,CAAC,EAAE,EACZ,IAAI,EAAE,IAAI,EACV,iBAAiB,EAAE,CAAC,CAAC,iBAAiB,GACtC,CACH,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IAElB,MAAM,SAAS,GAAG,IAAA,yCAAmB,EAAC,SAAS,CAAC,CAAC;IACjD,MAAM,SAAS,GAAG,IAAA,oBAAU,EAC1B,mCAAmC,EACnC,sCAA0B,CAAC,eAAe,CAAC,SAAS,CAAC,EACrD,KAAK,CAAC,SAAS,CAAC,CAAC;IAEnB,iGAAiG;IACjG,MAAM,gBAAgB,GAAG,IAAA,oBAAU,EACjC,mCAAmC,EACnC,sCAA0B,CAAC,eAAe,CAAC,SAAS,CAAC,CACtD,CAAC;IAEF,OAAO,CACL,oBAAC,yDAAmC,CAAC,QAAQ,IAAC,KAAK,EACjD;YACE,SAAS,EAAE,SAAS,EAAE,iBAAiB,EAAE,qBAAS,CAAC,KAAK,EAAE,cAAc,EAAE,kBAAkB;YAC5F,qBAAqB,EAAE,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,2CAAqB,CAAC,SAAS;YAClH,iBAAiB,EAAE,+BAAmB,CAAC,UAAU;YACjD,cAAc,EAAE,eAAe,EAAE,qBAAqB,EAAE,yBAAyB,EAAE,qBAAqB,EAAE,KAAK;YAC/G,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,0BAA0B,CAAC,GAAG,EAAE,GAAG,CAAC;YAClG,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,EAAuB,EAAE,EAAE,GAAG,CAAC;SAC3G;QAED,oBAAC,wCAAkB,CAAC,QAAQ,IAC1B,KAAK,EAAE;gBACL,WAAW,EAAE,KAAK;gBAClB,SAAS,EAAE,KAAK;gBAChB,QAAQ,EAAE,0BAA0B,CAAC,GAAG,EAAE,GAAG,CAAC;aAC/C,IAEA,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,CAAC;YAC1B,6BACE,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,IAAI,EAAC,cAAc;gBAEnB,oBAAC,oBAAY,IACX,SAAS,EAAC,kBAAkB,EAC5B,SAAS,EAAE,SAAS,IAEnB,cAAc,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,6BAAK,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,gBAAgB,IAAI,mBAAmB,CAAC,KAAK,CAAC,EAAE,IAAG,KAAK,CAAO,CAAC,CACxH,CACX,CAEoB,CACgB,CACjD,CAAC;AACJ,CAAC;AAjFD,0BAiFC","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/** @packageDocumentation\r\n * @module Toolbar\r\n */\r\n\r\nimport \"./Toolbar.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport {\r\n CommonToolbarItem, OnItemExecutedFunc,\r\n} from \"@itwin/appui-abstract\";\r\nimport { CommonProps, NoChildrenProps } from \"@itwin/core-react\";\r\nimport { ToolbarItems } from \"./Items\";\r\nimport { Direction, OrthogonalDirection, OrthogonalDirectionHelpers } from \"./utilities/Direction\";\r\nimport { getToolbarDirection, ToolbarItemComponent, ToolbarItemContext, ToolbarOpacitySetting, ToolbarPanelAlignment, ToolbarWithOverflowDirectionContext } from \"./ToolbarWithOverflow\";\r\n\r\n/** Properties of [[Toolbar]] component.\r\n * @public\r\n * @deprecated in 4.0. Use [ToolbarProps]($appui-react) instead.\r\n */\r\nexport interface ToolbarProps extends CommonProps, NoChildrenProps {\r\n /** Describes to which direction the popup panels are expanded. Defaults to: [[Direction.Bottom]] */\r\n expandsTo?: Direction;\r\n /** Definitions for items of the toolbar. Items are expected to be already sorted by group and item. */\r\n items: CommonToolbarItem[];\r\n /** Describes how expanded panels are aligned. Defaults to: [[ToolbarPanelAlignment.Start]] */\r\n panelAlignment?: ToolbarPanelAlignment;\r\n /** Use Drag Interaction to open popups with nest action buttons */\r\n useDragInteraction?: boolean;\r\n /** Determines whether to use mouse proximity to alter the opacity of the toolbar */\r\n toolbarOpacitySetting?: ToolbarOpacitySetting;\r\n /** Optional function to call on any item execution */\r\n onItemExecuted?: OnItemExecutedFunc;\r\n /** Optional function to call on any KeyDown events processed by toolbar */\r\n onKeyDown?: (e: React.KeyboardEvent) => void;\r\n}\r\n\r\nfunction getItemWrapperClass(child: React.ReactNode) {\r\n // istanbul ignore else\r\n if (React.isValidElement(child)) {\r\n if (child.props && child.props.addGroupSeparator)\r\n return \"components-toolbar-button-add-gap-before\";\r\n }\r\n return \"\";\r\n}\r\n\r\n/** Component that displays toolbar items.\r\n * @public\r\n * @deprecated in 4.0. Use [Toolbar]($appui-react) instead.\r\n */\r\nexport function Toolbar(props: ToolbarProps) { // eslint-disable-line deprecation/deprecation\r\n const expandsTo = props.expandsTo ? props.expandsTo : Direction.Bottom;\r\n const useDragInteraction = !!props.useDragInteraction;\r\n const panelAlignment = props.panelAlignment ? props.panelAlignment : ToolbarPanelAlignment.Start;\r\n const [popupPanelCount, setPopupPanelCount] = React.useState(0);\r\n\r\n const handlePopupPanelOpenClose = React.useCallback((isOpening: boolean) => {\r\n // use setTimeout to avoid warning about setting state in Toolbar from render method of PopupItem/PopupItemWithDrag\r\n setTimeout(() => {\r\n setPopupPanelCount((prev) => {\r\n const nextCount = isOpening ? (prev + 1) : (prev - 1);\r\n // eslint-disable-next-line no-console\r\n // console.log(`new popup count = ${nextCount}`);\r\n return nextCount < 0 ? /* istanbul ignore next */ 0 : nextCount;\r\n });\r\n });\r\n }, []);\r\n\r\n const availableNodes = React.useMemo<React.ReactNode[]>(() => {\r\n return props.items.map((item, index) => {\r\n let addGroupSeparator = false;\r\n if (index > 0)\r\n addGroupSeparator = item.groupPriority !== props.items[index - 1].groupPriority;\r\n return (\r\n <ToolbarItemComponent\r\n key={item.id}\r\n item={item}\r\n addGroupSeparator={!!addGroupSeparator}\r\n />\r\n );\r\n });\r\n }, [props.items]);\r\n\r\n const direction = getToolbarDirection(expandsTo);\r\n const className = classnames(\r\n \"components-toolbar-overflow-sizer\",\r\n OrthogonalDirectionHelpers.getCssClassName(direction),\r\n props.className);\r\n\r\n // needed to construct DOM structure identical to ToolbarWithOverflow so same css can be applied.\r\n const wrapperClassName = classnames(\r\n \"components-toolbar-item-container\",\r\n OrthogonalDirectionHelpers.getCssClassName(direction),\r\n );\r\n\r\n return (\r\n <ToolbarWithOverflowDirectionContext.Provider value={\r\n {\r\n expandsTo, direction, overflowExpandsTo: Direction.Right, panelAlignment, useDragInteraction,\r\n toolbarOpacitySetting: props.toolbarOpacitySetting ? props.toolbarOpacitySetting : ToolbarOpacitySetting.Proximity,\r\n overflowDirection: OrthogonalDirection.Horizontal,\r\n openPopupCount: popupPanelCount, onPopupPanelOpenClose: handlePopupPanelOpenClose, overflowDisplayActive: false,\r\n onItemExecuted: props.onItemExecuted ? props.onItemExecuted : /* istanbul ignore next */ () => { },\r\n onKeyDown: props.onKeyDown ? props.onKeyDown : /* istanbul ignore next */ (_e: React.KeyboardEvent) => { },\r\n }\r\n }>\r\n <ToolbarItemContext.Provider\r\n value={{\r\n hasOverflow: false,\r\n useHeight: false,\r\n onResize: /* istanbul ignore next */ () => { },\r\n }}\r\n >\r\n {(availableNodes.length > 0) &&\r\n <div\r\n className={className}\r\n style={props.style}\r\n onKeyDown={props.onKeyDown}\r\n role=\"presentation\"\r\n >\r\n <ToolbarItems\r\n className=\"components-items\"\r\n direction={direction}\r\n >\r\n {availableNodes.map((child, index) => <div key={index} className={`${wrapperClassName} ${getItemWrapperClass(child)}`}>{child}</div>)}\r\n </ToolbarItems>\r\n </div>\r\n }\r\n </ToolbarItemContext.Provider>\r\n </ToolbarWithOverflowDirectionContext.Provider >\r\n );\r\n}\r\n"]}
|
|
@@ -8,6 +8,7 @@ import { CommonProps, NoChildrenProps } from "@itwin/core-react";
|
|
|
8
8
|
import { Direction, OrthogonalDirection } from "./utilities/Direction";
|
|
9
9
|
/** Describes the data needed to insert a custom `React` button into an ToolbarWithOverflow.
|
|
10
10
|
* @public
|
|
11
|
+
* @deprecated in 4.0. Use [ToolbarCustomItem]($appui-react) instead.
|
|
11
12
|
*/
|
|
12
13
|
export interface CustomToolbarItem extends CustomButtonDefinition {
|
|
13
14
|
/** defines the content to display in popup panel */
|
|
@@ -28,6 +29,7 @@ export declare const ToolbarPopupAutoHideContext: React.Context<boolean>;
|
|
|
28
29
|
export declare function useToolbarPopupAutoHideContext(): boolean;
|
|
29
30
|
/** Describes toolbar item.
|
|
30
31
|
* @public
|
|
32
|
+
* @deprecated in 4.0. Use [ToolbarItem]($appui-react) instead.
|
|
31
33
|
*/
|
|
32
34
|
export type ToolbarItem = ActionButton | GroupButton | CustomToolbarItem;
|
|
33
35
|
/** CustomToolbarItem type guard.
|
|
@@ -36,7 +38,7 @@ export type ToolbarItem = ActionButton | GroupButton | CustomToolbarItem;
|
|
|
36
38
|
export declare function isCustomToolbarItem(item: ToolbarItem): item is CustomToolbarItem;
|
|
37
39
|
/** @internal */
|
|
38
40
|
export declare const getToolbarDirection: (expandsTo: Direction) => OrthogonalDirection;
|
|
39
|
-
/** Available alignment modes of [[
|
|
41
|
+
/** Available alignment modes of [[Toolbar]] panels.
|
|
40
42
|
* @public
|
|
41
43
|
*/
|
|
42
44
|
export declare enum ToolbarPanelAlignment {
|
|
@@ -94,6 +96,7 @@ export declare function ToolbarItemComponent({ item, addGroupSeparator }: {
|
|
|
94
96
|
export declare function useToolbarWithOverflowDirectionContext(): ToolbarOverflowContextProps;
|
|
95
97
|
/** Properties of [[ToolbarWithOverflow]] component.
|
|
96
98
|
* @public
|
|
99
|
+
* @deprecated in 4.0. Use [ToolbarWithOverflowProps]($appui-react) instead.
|
|
97
100
|
*/
|
|
98
101
|
export interface ToolbarWithOverflowProps extends CommonProps, NoChildrenProps {
|
|
99
102
|
/** Describes to which direction the popup panels are expanded. Defaults to: [[Direction.Bottom]] */
|
|
@@ -115,6 +118,7 @@ export interface ToolbarWithOverflowProps extends CommonProps, NoChildrenProps {
|
|
|
115
118
|
}
|
|
116
119
|
/** Component that displays tool settings as a bar across the top of the content view.
|
|
117
120
|
* @public
|
|
121
|
+
* @deprecated in 4.0. Use [ToolbarWithOverflow]($appui-react) instead.
|
|
118
122
|
*/
|
|
119
123
|
export declare function ToolbarWithOverflow(props: ToolbarWithOverflowProps): JSX.Element;
|
|
120
124
|
/** Interface toolbars use to define context for its items.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToolbarWithOverflow.d.ts","sourceRoot":"","sources":["../../../../src/components-react/toolbar/ToolbarWithOverflow.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,gBAAgB,CAAC;AAExB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACL,YAAY,EAAE,iBAAiB,EAAmD,sBAAsB,EACxG,WAAW,EAAE,kBAAkB,EAChC,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAkB,WAAW,EAAoB,eAAe,EAAW,MAAM,mBAAmB,CAAC;AAS5G,OAAO,EAAE,SAAS,EAAoB,mBAAmB,EAA8B,MAAM,uBAAuB,CAAC;AAIrH
|
|
1
|
+
{"version":3,"file":"ToolbarWithOverflow.d.ts","sourceRoot":"","sources":["../../../../src/components-react/toolbar/ToolbarWithOverflow.tsx"],"names":[],"mappings":"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"}
|
|
@@ -68,7 +68,7 @@ exports.useToolbarPopupAutoHideContext = useToolbarPopupAutoHideContext;
|
|
|
68
68
|
* @internal
|
|
69
69
|
*/
|
|
70
70
|
function isCustomToolbarItem(item) {
|
|
71
|
-
return !!item.isCustom && ("panelContentNode" in item);
|
|
71
|
+
return !!item.isCustom && ("panelContentNode" in item); // eslint-disable-line deprecation/deprecation
|
|
72
72
|
}
|
|
73
73
|
exports.isCustomToolbarItem = isCustomToolbarItem;
|
|
74
74
|
/** @internal */
|
|
@@ -77,7 +77,7 @@ const getToolbarDirection = (expandsTo) => {
|
|
|
77
77
|
return Direction_1.OrthogonalDirectionHelpers.inverse(orthogonalDirection);
|
|
78
78
|
};
|
|
79
79
|
exports.getToolbarDirection = getToolbarDirection;
|
|
80
|
-
/** Available alignment modes of [[
|
|
80
|
+
/** Available alignment modes of [[Toolbar]] panels.
|
|
81
81
|
* @public
|
|
82
82
|
*/
|
|
83
83
|
var ToolbarPanelAlignment;
|
|
@@ -204,6 +204,7 @@ function getItemWrapperClass(child) {
|
|
|
204
204
|
}
|
|
205
205
|
/** Component that displays tool settings as a bar across the top of the content view.
|
|
206
206
|
* @public
|
|
207
|
+
* @deprecated in 4.0. Use [ToolbarWithOverflow]($appui-react) instead.
|
|
207
208
|
*/
|
|
208
209
|
function ToolbarWithOverflow(props) {
|
|
209
210
|
const expandsTo = props.expandsTo ? props.expandsTo : Direction_1.Direction.Bottom;
|