@itwin/core-react 3.0.0 → 3.0.3
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/CHANGELOG.md +18 -1
- package/lib/cjs/core-react/inputs/Input.js +1 -1
- package/lib/cjs/core-react/inputs/Input.js.map +1 -1
- package/lib/cjs/core-react/inputs/Textarea.js +1 -1
- package/lib/cjs/core-react/inputs/Textarea.js.map +1 -1
- package/lib/cjs/core-react/tree/Node.d.ts +1 -0
- package/lib/cjs/core-react/tree/Node.d.ts.map +1 -1
- package/lib/cjs/core-react/tree/Node.js +18 -3
- package/lib/cjs/core-react/tree/Node.js.map +1 -1
- package/lib/esm/core-react/inputs/Input.js +1 -1
- package/lib/esm/core-react/inputs/Input.js.map +1 -1
- package/lib/esm/core-react/inputs/Textarea.js +1 -1
- package/lib/esm/core-react/inputs/Textarea.js.map +1 -1
- package/lib/esm/core-react/tree/Node.d.ts +1 -0
- package/lib/esm/core-react/tree/Node.d.ts.map +1 -1
- package/lib/esm/core-react/tree/Node.js +18 -3
- package/lib/esm/core-react/tree/Node.js.map +1 -1
- package/package.json +9 -9
package/CHANGELOG.md
CHANGED
|
@@ -1,6 +1,23 @@
|
|
|
1
1
|
# Change Log - @itwin/core-react
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Fri, 25 Mar 2022 15:10:02 GMT and should not be manually modified.
|
|
4
|
+
|
|
5
|
+
## 3.0.3
|
|
6
|
+
Fri, 25 Mar 2022 15:10:02 GMT
|
|
7
|
+
|
|
8
|
+
_Version update only_
|
|
9
|
+
|
|
10
|
+
## 3.0.2
|
|
11
|
+
Thu, 10 Mar 2022 21:18:13 GMT
|
|
12
|
+
|
|
13
|
+
_Version update only_
|
|
14
|
+
|
|
15
|
+
## 3.0.1
|
|
16
|
+
Thu, 24 Feb 2022 15:26:55 GMT
|
|
17
|
+
|
|
18
|
+
### Updates
|
|
19
|
+
|
|
20
|
+
- `TreeNode`: Fix checkbox propagating click events to the parent element, resulting in unexpected TreeNodeProps.onClick invocations.
|
|
4
21
|
|
|
5
22
|
## 3.0.0
|
|
6
23
|
Mon, 24 Jan 2022 14:00:52 GMT
|
|
@@ -16,7 +16,7 @@ const useRefs_1 = require("../utils/hooks/useRefs");
|
|
|
16
16
|
const ForwardRefInput = React.forwardRef(// eslint-disable-line deprecation/deprecation
|
|
17
17
|
function ForwardRefInput(props, ref) {
|
|
18
18
|
const { className, style, setFocus, nativeKeyHandler, ...otherProps } = props; // eslint-disable-line @typescript-eslint/no-unused-vars
|
|
19
|
-
const inputElementRef = React.useRef();
|
|
19
|
+
const inputElementRef = React.useRef(null);
|
|
20
20
|
const refs = (0, useRefs_1.useRefs)(inputElementRef, ref); // combine ref needed for target with the forwardRef needed by the Parent when parent is a Type Editor.
|
|
21
21
|
React.useEffect(() => {
|
|
22
22
|
const currentElement = inputElementRef.current;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../../src/core-react/inputs/Input.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,2CAAoC;AACpC,+BAA+B;AAC/B,wDAA8D;AAC9D,oDAAiD;AAgBjD,0GAA0G;AAC1G,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAAkC,8CAA8C;AACtH,SAAS,eAAe,CAAC,KAAK,EAAE,GAAG;IACjC,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,gBAAgB,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC,CAAC,wDAAwD;IACvI,MAAM,eAAe,GAAG,KAAK,CAAC,MAAM,
|
|
1
|
+
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../../src/core-react/inputs/Input.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,2CAAoC;AACpC,+BAA+B;AAC/B,wDAA8D;AAC9D,oDAAiD;AAgBjD,0GAA0G;AAC1G,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAAkC,8CAA8C;AACtH,SAAS,eAAe,CAAC,KAAK,EAAE,GAAG;IACjC,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,gBAAgB,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC,CAAC,wDAAwD;IACvI,MAAM,eAAe,GAAG,KAAK,CAAC,MAAM,CAAmB,IAAI,CAAC,CAAC;IAC7D,MAAM,IAAI,GAAG,IAAA,iBAAO,EAAC,eAAe,EAAE,GAAG,CAAC,CAAC,CAAE,uGAAuG;IAEpJ,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,cAAc,GAAG,eAAe,CAAC,OAAO,CAAC;QAC/C,MAAM,cAAc,GAAG,gBAAgB,CAAC;QAExC,IAAI,cAAc,IAAI,cAAc,EAAE;YACpC,cAAc,CAAC,gBAAgB,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC;SAC5D;QACD,OAAO,GAAG,EAAE;YACV,IAAI,cAAc,IAAI,cAAc,EAAE;gBACpC,cAAc,CAAC,mBAAmB,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC;aAC/D;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAEvB,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,eAAe,CAAC,OAAO,IAAI,QAAQ;YACrC,eAAe,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;IACpC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAyC,EAAE,EAAE;QAClF,KAAK,CAAC,aAAa,CAAC,MAAM,EAAE,CAAC;IAC/B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,oBAAC,qBAAa,IAAC,GAAG,EAAE,IAAI,EAAE,IAAI,EAAC,MAAM,KAAK,UAAU,EAAE,OAAO,EAAE,WAAW,EACxE,SAAS,EAAE,IAAA,oBAAU,EAAC,qBAAqB,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,GAAI,CAC5E,CAAC;AACJ,CAAC,CACF,CAAC;AAEF;;;GAGG;AACU,QAAA,KAAK,GAA8C,eAAe,CAAC,CAAE,8CAA8C","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 Inputs\r\n */\r\n\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { Input as ITwinUI_Input } from \"@itwin/itwinui-react\";\r\nimport { useRefs } from \"../utils/hooks/useRefs\";\r\nimport { CommonProps } from \"../utils/Props\";\r\n\r\n/** Properties for the [[Input]] component\r\n * @public\r\n * @deprecated Use InputProps in itwinui-react instead\r\n */\r\nexport interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>, CommonProps {\r\n /** Indicates whether to set focus to the input element */\r\n setFocus?: boolean;\r\n /** Native keydown event handler */\r\n nativeKeyHandler?: (e: KeyboardEvent) => void;\r\n /** Provides ability to return reference to HTMLInputElement */\r\n ref?: React.Ref<HTMLInputElement>;\r\n}\r\n\r\n// Defined using following pattern (const Input at bottom) to ensure useful API documentation is extracted\r\nconst ForwardRefInput = React.forwardRef<HTMLInputElement, InputProps>( // eslint-disable-line deprecation/deprecation\r\n function ForwardRefInput(props, ref) {\r\n const { className, style, setFocus, nativeKeyHandler, ...otherProps } = props; // eslint-disable-line @typescript-eslint/no-unused-vars\r\n const inputElementRef = React.useRef<HTMLInputElement>(null);\r\n const refs = useRefs(inputElementRef, ref); // combine ref needed for target with the forwardRef needed by the Parent when parent is a Type Editor.\r\n\r\n React.useEffect(() => {\r\n const currentElement = inputElementRef.current;\r\n const currentHandler = nativeKeyHandler;\r\n\r\n if (currentElement && currentHandler) {\r\n currentElement.addEventListener(\"keydown\", currentHandler);\r\n }\r\n return () => {\r\n if (currentHandler && currentElement) {\r\n currentElement.removeEventListener(\"keydown\", currentHandler);\r\n }\r\n };\r\n }, [nativeKeyHandler]);\r\n\r\n React.useEffect(() => {\r\n if (inputElementRef.current && setFocus)\r\n inputElementRef.current.focus();\r\n }, [setFocus]);\r\n\r\n const handleFocus = React.useCallback((event: React.FocusEvent<HTMLInputElement>) => {\r\n event.currentTarget.select();\r\n }, []);\r\n\r\n return (\r\n <ITwinUI_Input ref={refs} type=\"text\" {...otherProps} onFocus={handleFocus}\r\n className={classnames(\"uicore-inputs-input\", className)} style={style} />\r\n );\r\n }\r\n);\r\n\r\n/** Basic text input, is a wrapper for the `<input type=\"text\">` HTML element.\r\n * @public\r\n * @deprecated Use Input in itwinui-react instead\r\n */\r\nexport const Input: (props: InputProps) => JSX.Element | null = ForwardRefInput; // eslint-disable-line deprecation/deprecation\r\n"]}
|
|
@@ -17,7 +17,7 @@ const ForwardRefTextarea = React.forwardRef(// eslint-disable-line deprecation/d
|
|
|
17
17
|
function ForwardRefTextarea(props, ref) {
|
|
18
18
|
const { className, style, rows, setFocus, ...otherProps } = props; // eslint-disable-line @typescript-eslint/no-unused-vars
|
|
19
19
|
const textRows = undefined !== rows ? rows : 3;
|
|
20
|
-
const textAreaElementRef = React.useRef();
|
|
20
|
+
const textAreaElementRef = React.useRef(null);
|
|
21
21
|
const refs = (0, useRefs_1.useRefs)(textAreaElementRef, ref); // combine ref needed for target with the forwardRef needed by the Parent when parent is a Type Editor.
|
|
22
22
|
React.useEffect(() => {
|
|
23
23
|
if (textAreaElementRef.current && setFocus)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../../../src/core-react/inputs/Textarea.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,2CAAoC;AACpC,+BAA+B;AAC/B,wDAAoE;AACpE,oDAAiD;AAgBjD,0GAA0G;AAC1G,MAAM,kBAAkB,GAAG,KAAK,CAAC,UAAU,CAAyC,8CAA8C;AAChI,SAAS,kBAAkB,CAAC,KAAK,EAAE,GAAG;IACpC,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC,CAAC,wDAAwD;IAC3H,MAAM,QAAQ,GAAG,SAAS,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;IAC/C,MAAM,kBAAkB,GAAG,KAAK,CAAC,MAAM,
|
|
1
|
+
{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../../../src/core-react/inputs/Textarea.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,2CAAoC;AACpC,+BAA+B;AAC/B,wDAAoE;AACpE,oDAAiD;AAgBjD,0GAA0G;AAC1G,MAAM,kBAAkB,GAAG,KAAK,CAAC,UAAU,CAAyC,8CAA8C;AAChI,SAAS,kBAAkB,CAAC,KAAK,EAAE,GAAG;IACpC,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC,CAAC,wDAAwD;IAC3H,MAAM,QAAQ,GAAG,SAAS,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;IAC/C,MAAM,kBAAkB,GAAG,KAAK,CAAC,MAAM,CAAsB,IAAI,CAAC,CAAC;IACnE,MAAM,IAAI,GAAG,IAAA,iBAAO,EAAC,kBAAkB,EAAE,GAAG,CAAC,CAAC,CAAE,uGAAuG;IAEvJ,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,kBAAkB,CAAC,OAAO,IAAI,QAAQ;YACxC,kBAAkB,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;IACvC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAA4C,EAAE,EAAE;QACrF,KAAK,CAAC,aAAa,CAAC,MAAM,EAAE,CAAC;IAC/B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,oBAAC,wBAAgB,OAAK,UAAU,EAC9B,GAAG,EAAE,IAAI,EACT,IAAI,EAAE,QAAQ,EACd,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,IAAA,oBAAU,EAAC,wBAAwB,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,GAAI,CAC/E,CAAC;AACJ,CAAC,CACF,CAAC;AAEF;;;GAGG;AACU,QAAA,QAAQ,GAAiD,kBAAkB,CAAC,CAAG,8CAA8C","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 Inputs\r\n */\r\n\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { Textarea as ITwinUI_Textarea } from \"@itwin/itwinui-react\";\r\nimport { useRefs } from \"../utils/hooks/useRefs\";\r\nimport { CommonProps } from \"../utils/Props\";\r\n\r\n/** Properties for [[Textarea]] component\r\n * @public\r\n * @deprecated Use TextareaProps in itwinui-react instead\r\n */\r\nexport interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement>, CommonProps {\r\n /** Number of textarea rows. Default is 3. */\r\n rows?: number;\r\n /** Indicates whether to set focus to the textarea element */\r\n setFocus?: boolean;\r\n /** Provides ability to return reference to HTMLInputElement */\r\n ref?: React.Ref<HTMLTextAreaElement>;\r\n}\r\n\r\n// Defined using following pattern (const Input at bottom) to ensure useful API documentation is extracted\r\nconst ForwardRefTextarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>( // eslint-disable-line deprecation/deprecation\r\n function ForwardRefTextarea(props, ref) {\r\n const { className, style, rows, setFocus, ...otherProps } = props; // eslint-disable-line @typescript-eslint/no-unused-vars\r\n const textRows = undefined !== rows ? rows : 3;\r\n const textAreaElementRef = React.useRef<HTMLTextAreaElement>(null);\r\n const refs = useRefs(textAreaElementRef, ref); // combine ref needed for target with the forwardRef needed by the Parent when parent is a Type Editor.\r\n\r\n React.useEffect(() => {\r\n if (textAreaElementRef.current && setFocus)\r\n textAreaElementRef.current.focus();\r\n }, [setFocus]);\r\n\r\n const handleFocus = React.useCallback((event: React.FocusEvent<HTMLTextAreaElement>) => {\r\n event.currentTarget.select();\r\n }, []);\r\n\r\n return (\r\n <ITwinUI_Textarea {...otherProps}\r\n ref={refs}\r\n rows={textRows}\r\n onFocus={handleFocus}\r\n className={classnames(\"uicore-inputs-textarea\", className)} style={style} />\r\n );\r\n }\r\n);\r\n\r\n/** Basic textarea component\r\n * @public\r\n * @deprecated Use Textarea in itwinui-react instead\r\n */\r\nexport const Textarea: (props: TextareaProps) => JSX.Element | null = ForwardRefTextarea; // eslint-disable-line deprecation/deprecation\r\n"]}
|
|
@@ -69,6 +69,7 @@ export interface TreeNodeProps extends CommonProps {
|
|
|
69
69
|
* @public
|
|
70
70
|
*/
|
|
71
71
|
export declare class TreeNode extends React.Component<TreeNodeProps> {
|
|
72
|
+
private checkboxWrapperRef;
|
|
72
73
|
constructor(props: TreeNodeProps);
|
|
73
74
|
render(): JSX.Element;
|
|
74
75
|
private createSubComponentTestId;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Node.d.ts","sourceRoot":"","sources":["../../../../src/core-react/tree/Node.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAY,aAAa,EAAkB,MAAM,sBAAsB,CAAC;AAC/E,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAG1C;;GAEG;AACH,oBAAY,uBAAuB,GAAG,IAAI,CAAC,aAAa,EAAE,UAAU,GAAG,SAAS,CAAC,GAAG;IAClF,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CACxC,CAAC;AAEF;;GAEG;AACH,oBAAY,oBAAoB,GAAG,CAAC,KAAK,EAAE,uBAAuB,KAAK,KAAK,CAAC,SAAS,CAAC;AAEvF;;GAEG;AACH,eAAO,MAAM,YAAY,KAAK,CAAC;AAI/B;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,4BAA4B;IAC5B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,aAAa,KAAK,IAAI,CAAC;IAC5C,6CAA6C;IAC7C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kEAAkE;IAClE,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,MAAM,WAAW,aAAc,SAAQ,WAAW;IAChD,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC;IACxB;iBACa;IACb,aAAa,CAAC,EAAE,iBAAiB,CAAC;IAClC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC9C,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC1C,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;IACpC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,4EAA4E;IAC5E,eAAe,CAAC,EAAE;QAChB,6EAA6E;QAC7E,cAAc,CAAC,EAAE,oBAAoB,CAAC;KACvC,CAAC;IACF,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED;;GAEG;AACH,qBAAa,QAAS,SAAQ,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"Node.d.ts","sourceRoot":"","sources":["../../../../src/core-react/tree/Node.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAY,aAAa,EAAkB,MAAM,sBAAsB,CAAC;AAC/E,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAG1C;;GAEG;AACH,oBAAY,uBAAuB,GAAG,IAAI,CAAC,aAAa,EAAE,UAAU,GAAG,SAAS,CAAC,GAAG;IAClF,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CACxC,CAAC;AAEF;;GAEG;AACH,oBAAY,oBAAoB,GAAG,CAAC,KAAK,EAAE,uBAAuB,KAAK,KAAK,CAAC,SAAS,CAAC;AAEvF;;GAEG;AACH,eAAO,MAAM,YAAY,KAAK,CAAC;AAI/B;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,4BAA4B;IAC5B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,aAAa,KAAK,IAAI,CAAC;IAC5C,6CAA6C;IAC7C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kEAAkE;IAClE,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,MAAM,WAAW,aAAc,SAAQ,WAAW;IAChD,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC;IACxB;iBACa;IACb,aAAa,CAAC,EAAE,iBAAiB,CAAC;IAClC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC9C,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC1C,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;IACpC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,4EAA4E;IAC5E,eAAe,CAAC,EAAE;QAChB,6EAA6E;QAC7E,cAAc,CAAC,EAAE,oBAAoB,CAAC;KACvC,CAAC;IACF,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED;;GAEG;AACH,qBAAa,QAAS,SAAQ,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC;IAC1D,OAAO,CAAC,kBAAkB,CAAqC;gBAEnD,KAAK,EAAE,aAAa;IAIhB,MAAM;IA8EtB,OAAO,CAAC,wBAAwB;IAMhC,OAAO,CAAC,iBAAiB,CAGvB;IAEF,OAAO,CAAC,gBAAgB,CAEtB;IAEF,OAAO,CAAC,uBAAuB,CAI7B;IAEF,OAAO,CAAC,QAAQ,CAQd;CACH"}
|
|
@@ -25,6 +25,7 @@ const EXPANSION_TOGGLE_WIDTH = 24;
|
|
|
25
25
|
class TreeNode extends React.Component {
|
|
26
26
|
constructor(props) {
|
|
27
27
|
super(props);
|
|
28
|
+
this.checkboxWrapperRef = React.createRef();
|
|
28
29
|
this._onCheckboxChange = (checked) => {
|
|
29
30
|
if (this.props.checkboxProps && this.props.checkboxProps.onClick && !this.props.checkboxProps.isDisabled)
|
|
30
31
|
this.props.checkboxProps.onClick(checked ? CheckBoxState_1.CheckBoxState.On : CheckBoxState_1.CheckBoxState.Off);
|
|
@@ -38,9 +39,13 @@ class TreeNode extends React.Component {
|
|
|
38
39
|
this.props.onClickExpansionToggle();
|
|
39
40
|
};
|
|
40
41
|
this._onClick = (e) => {
|
|
42
|
+
var _a, _b;
|
|
41
43
|
e.stopPropagation();
|
|
42
|
-
|
|
43
|
-
|
|
44
|
+
// ITwinUI-react has a bug that prevents us from stopping checkbox click event propagation to the parent element
|
|
45
|
+
if (!this.checkboxWrapperRef.current
|
|
46
|
+
|| (e.target instanceof Element && !isDescendant(this.checkboxWrapperRef.current, e.target))) {
|
|
47
|
+
(_b = (_a = this.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
|
|
48
|
+
}
|
|
44
49
|
};
|
|
45
50
|
}
|
|
46
51
|
render() {
|
|
@@ -63,7 +68,8 @@ class TreeNode extends React.Component {
|
|
|
63
68
|
checkbox = this.props.renderOverrides.renderCheckbox(props);
|
|
64
69
|
}
|
|
65
70
|
else {
|
|
66
|
-
checkbox = (React.createElement(
|
|
71
|
+
checkbox = (React.createElement("div", { ref: this.checkboxWrapperRef },
|
|
72
|
+
React.createElement(itwinui_react_1.Checkbox, { ...props, onChange: (e) => this._onCheckboxChange(e.target.checked), "data-testid": this.createSubComponentTestId("checkbox") })));
|
|
67
73
|
}
|
|
68
74
|
}
|
|
69
75
|
const icon = this.props.icon ? (React.createElement("div", { className: "core-tree-node-icon" }, this.props.icon)) : undefined;
|
|
@@ -86,4 +92,13 @@ class TreeNode extends React.Component {
|
|
|
86
92
|
}
|
|
87
93
|
}
|
|
88
94
|
exports.TreeNode = TreeNode;
|
|
95
|
+
function isDescendant(ancestor, descendant) {
|
|
96
|
+
while (descendant.parentElement !== null) {
|
|
97
|
+
if (descendant === ancestor) {
|
|
98
|
+
return true;
|
|
99
|
+
}
|
|
100
|
+
descendant = descendant.parentElement;
|
|
101
|
+
}
|
|
102
|
+
return false;
|
|
103
|
+
}
|
|
89
104
|
//# sourceMappingURL=Node.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Node.js","sourceRoot":"","sources":["../../../../src/core-react/tree/Node.tsx"],"names":[],"mappings":"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","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 Tree\r\n */\r\n\r\nimport \"./Node.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { Checkbox, CheckboxProps, ProgressRadial } from \"@itwin/itwinui-react\";\r\nimport { CheckBoxState } from \"../enums/CheckBoxState\";\r\nimport { CommonProps } from \"../utils/Props\";\r\nimport { Omit } from \"../utils/typeUtils\";\r\nimport { ExpansionToggle } from \"./ExpansionToggle\";\r\n\r\n/** Props for node Checkbox renderer\r\n * @public\r\n */\r\nexport type NodeCheckboxRenderProps = Omit<CheckboxProps, \"onChange\" | \"onClick\"> & {\r\n onChange: (checked: boolean) => void;\r\n onClick: (e: React.MouseEvent) => void;\r\n};\r\n\r\n/** Type for node Checkbox renderer\r\n * @public\r\n */\r\nexport type NodeCheckboxRenderer = (props: NodeCheckboxRenderProps) => React.ReactNode;\r\n\r\n/** Number of pixels the node gets offset per each hierarchy level\r\n * @internal\r\n */\r\nexport const LEVEL_OFFSET = 20;\r\n\r\nconst EXPANSION_TOGGLE_WIDTH = 24;\r\n\r\n/** Properties for Tree Node CheckBox\r\n * @public\r\n */\r\nexport interface NodeCheckboxProps {\r\n /** State of the checkbox */\r\n state?: CheckBoxState;\r\n /** Click event callback */\r\n onClick?: (newState: CheckBoxState) => void;\r\n /** Indicates whether checkbox is disabled */\r\n isDisabled?: boolean;\r\n /** Tooltip to be displayed when mouse is hovered over checkbox */\r\n tooltip?: string;\r\n}\r\n\r\n/** Properties for the [[TreeNode]] React component\r\n * @public\r\n */\r\nexport interface TreeNodeProps extends CommonProps {\r\n label: React.ReactNode;\r\n level: number;\r\n icon?: React.ReactChild;\r\n /** Properties for the checkbox.\r\n * @public */\r\n checkboxProps?: NodeCheckboxProps;\r\n isLeaf?: boolean;\r\n isLoading?: boolean;\r\n isExpanded?: boolean;\r\n isFocused?: boolean;\r\n isSelected?: boolean;\r\n isHoverDisabled?: boolean;\r\n onClick?: (e: React.MouseEvent) => void;\r\n onContextMenu?: (e: React.MouseEvent) => void;\r\n onMouseMove?: (e: React.MouseEvent) => void;\r\n onMouseDown?: (e: React.MouseEvent) => void;\r\n onMouseUp?: (e: React.MouseEvent) => void;\r\n onClickExpansionToggle?: () => void;\r\n children?: React.ReactNode;\r\n\r\n /** Contains render overrides for different pieces of the node component. */\r\n renderOverrides?: {\r\n /** Callback to render a checkbox. Only called when checkbox is displayed. */\r\n renderCheckbox?: NodeCheckboxRenderer;\r\n };\r\n [\"data-testid\"]?: string;\r\n}\r\n\r\n/** Presentation React component for a Tree node\r\n * @public\r\n */\r\nexport class TreeNode extends React.Component<TreeNodeProps> {\r\n constructor(props: TreeNodeProps) {\r\n super(props);\r\n }\r\n\r\n public override render() {\r\n const className = classnames(\r\n \"core-tree-node\",\r\n this.props.isFocused && \"is-focused\",\r\n this.props.isSelected && \"is-selected\",\r\n this.props.isHoverDisabled && \"is-hover-disabled\",\r\n this.props.className);\r\n let offset = this.props.level * LEVEL_OFFSET;\r\n if (!this.props.isLoading && this.props.isLeaf)\r\n offset += EXPANSION_TOGGLE_WIDTH; // Add expansion toggle/loader width if they're not rendered\r\n\r\n let checkbox: React.ReactNode;\r\n if (this.props.checkboxProps) {\r\n const props: NodeCheckboxRenderProps = {\r\n label: \"\",\r\n checked: this.props.checkboxProps.state === CheckBoxState.On,\r\n indeterminate: this.props.checkboxProps.state === CheckBoxState.Partial,\r\n disabled: this.props.checkboxProps.isDisabled,\r\n title: this.props.checkboxProps.tooltip,\r\n onClick: this._onCheckboxClick,\r\n onChange: this._onCheckboxChange,\r\n };\r\n if (this.props.renderOverrides && this.props.renderOverrides.renderCheckbox) {\r\n checkbox = this.props.renderOverrides.renderCheckbox(props);\r\n } else {\r\n checkbox = (\r\n <Checkbox {...props}\r\n onChange={(e: React.ChangeEvent<HTMLInputElement>) => this._onCheckboxChange(e.target.checked)} data-testid={this.createSubComponentTestId(\"checkbox\")}\r\n />\r\n );\r\n }\r\n }\r\n\r\n const icon = this.props.icon ? (<div className=\"core-tree-node-icon\">{this.props.icon}</div>) : undefined;\r\n\r\n const toggle = (this.props.isLoading || this.props.isLeaf) ? undefined : (\r\n <ExpansionToggle\r\n className=\"expansion-toggle\"\r\n data-testid={this.createSubComponentTestId(\"expansion-toggle\")}\r\n onClick={this._onClickExpansionToggle}\r\n isExpanded={this.props.isExpanded}\r\n />\r\n );\r\n\r\n return (\r\n // eslint-disable-next-line jsx-a11y/click-events-have-key-events\r\n <div\r\n className={className}\r\n style={this.props.style}\r\n data-testid={this.props[\"data-testid\"]}\r\n onClick={this._onClick}\r\n onContextMenu={this.props.onContextMenu}\r\n onMouseDown={this.props.onMouseDown}\r\n onMouseUp={this.props.onMouseUp}\r\n onMouseMove={this.props.onMouseMove}\r\n role=\"treeitem\"\r\n tabIndex={-1}\r\n >\r\n <div\r\n className=\"contents\"\r\n style={{ marginLeft: offset }}\r\n data-testid={this.createSubComponentTestId(\"contents\")}\r\n >\r\n {this.props.isLoading && <ProgressRadial size=\"x-small\" indeterminate />}\r\n {toggle}\r\n {checkbox}\r\n {icon}\r\n {this.props.label}\r\n </div>\r\n {this.props.children}\r\n </div>\r\n );\r\n }\r\n\r\n private createSubComponentTestId(subId: string): string | undefined {\r\n if (!this.props[\"data-testid\"])\r\n return undefined;\r\n return `${this.props[\"data-testid\"]}-${subId}`;\r\n }\r\n\r\n private _onCheckboxChange = (checked: boolean) => {\r\n if (this.props.checkboxProps && this.props.checkboxProps.onClick && !this.props.checkboxProps.isDisabled)\r\n this.props.checkboxProps.onClick(checked ? CheckBoxState.On : CheckBoxState.Off);\r\n };\r\n\r\n private _onCheckboxClick = (e: React.MouseEvent) => {\r\n e.stopPropagation();\r\n };\r\n\r\n private _onClickExpansionToggle = (e: React.MouseEvent<HTMLDivElement>) => {\r\n e.stopPropagation();\r\n if (this.props.onClickExpansionToggle)\r\n this.props.onClickExpansionToggle();\r\n };\r\n\r\n private _onClick = (e: React.MouseEvent<HTMLDivElement>) => {\r\n e.stopPropagation();\r\n if (this.props.onClick)\r\n this.props.onClick(e);\r\n };\r\n}\r\n"]}
|
|
1
|
+
{"version":3,"file":"Node.js","sourceRoot":"","sources":["../../../../src/core-react/tree/Node.tsx"],"names":[],"mappings":"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","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 Tree\r\n */\r\n\r\nimport \"./Node.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { Checkbox, CheckboxProps, ProgressRadial } from \"@itwin/itwinui-react\";\r\nimport { CheckBoxState } from \"../enums/CheckBoxState\";\r\nimport { CommonProps } from \"../utils/Props\";\r\nimport { Omit } from \"../utils/typeUtils\";\r\nimport { ExpansionToggle } from \"./ExpansionToggle\";\r\n\r\n/** Props for node Checkbox renderer\r\n * @public\r\n */\r\nexport type NodeCheckboxRenderProps = Omit<CheckboxProps, \"onChange\" | \"onClick\"> & {\r\n onChange: (checked: boolean) => void;\r\n onClick: (e: React.MouseEvent) => void;\r\n};\r\n\r\n/** Type for node Checkbox renderer\r\n * @public\r\n */\r\nexport type NodeCheckboxRenderer = (props: NodeCheckboxRenderProps) => React.ReactNode;\r\n\r\n/** Number of pixels the node gets offset per each hierarchy level\r\n * @internal\r\n */\r\nexport const LEVEL_OFFSET = 20;\r\n\r\nconst EXPANSION_TOGGLE_WIDTH = 24;\r\n\r\n/** Properties for Tree Node CheckBox\r\n * @public\r\n */\r\nexport interface NodeCheckboxProps {\r\n /** State of the checkbox */\r\n state?: CheckBoxState;\r\n /** Click event callback */\r\n onClick?: (newState: CheckBoxState) => void;\r\n /** Indicates whether checkbox is disabled */\r\n isDisabled?: boolean;\r\n /** Tooltip to be displayed when mouse is hovered over checkbox */\r\n tooltip?: string;\r\n}\r\n\r\n/** Properties for the [[TreeNode]] React component\r\n * @public\r\n */\r\nexport interface TreeNodeProps extends CommonProps {\r\n label: React.ReactNode;\r\n level: number;\r\n icon?: React.ReactChild;\r\n /** Properties for the checkbox.\r\n * @public */\r\n checkboxProps?: NodeCheckboxProps;\r\n isLeaf?: boolean;\r\n isLoading?: boolean;\r\n isExpanded?: boolean;\r\n isFocused?: boolean;\r\n isSelected?: boolean;\r\n isHoverDisabled?: boolean;\r\n onClick?: (e: React.MouseEvent) => void;\r\n onContextMenu?: (e: React.MouseEvent) => void;\r\n onMouseMove?: (e: React.MouseEvent) => void;\r\n onMouseDown?: (e: React.MouseEvent) => void;\r\n onMouseUp?: (e: React.MouseEvent) => void;\r\n onClickExpansionToggle?: () => void;\r\n children?: React.ReactNode;\r\n\r\n /** Contains render overrides for different pieces of the node component. */\r\n renderOverrides?: {\r\n /** Callback to render a checkbox. Only called when checkbox is displayed. */\r\n renderCheckbox?: NodeCheckboxRenderer;\r\n };\r\n [\"data-testid\"]?: string;\r\n}\r\n\r\n/** Presentation React component for a Tree node\r\n * @public\r\n */\r\nexport class TreeNode extends React.Component<TreeNodeProps> {\r\n private checkboxWrapperRef = React.createRef<HTMLDivElement>();\r\n\r\n constructor(props: TreeNodeProps) {\r\n super(props);\r\n }\r\n\r\n public override render() {\r\n const className = classnames(\r\n \"core-tree-node\",\r\n this.props.isFocused && \"is-focused\",\r\n this.props.isSelected && \"is-selected\",\r\n this.props.isHoverDisabled && \"is-hover-disabled\",\r\n this.props.className);\r\n let offset = this.props.level * LEVEL_OFFSET;\r\n if (!this.props.isLoading && this.props.isLeaf)\r\n offset += EXPANSION_TOGGLE_WIDTH; // Add expansion toggle/loader width if they're not rendered\r\n\r\n let checkbox: React.ReactNode;\r\n if (this.props.checkboxProps) {\r\n const props: NodeCheckboxRenderProps = {\r\n label: \"\",\r\n checked: this.props.checkboxProps.state === CheckBoxState.On,\r\n indeterminate: this.props.checkboxProps.state === CheckBoxState.Partial,\r\n disabled: this.props.checkboxProps.isDisabled,\r\n title: this.props.checkboxProps.tooltip,\r\n onClick: this._onCheckboxClick,\r\n onChange: this._onCheckboxChange,\r\n };\r\n if (this.props.renderOverrides && this.props.renderOverrides.renderCheckbox) {\r\n checkbox = this.props.renderOverrides.renderCheckbox(props);\r\n } else {\r\n checkbox = (\r\n <div ref={this.checkboxWrapperRef}>\r\n <Checkbox\r\n {...props}\r\n onChange={(e: React.ChangeEvent<HTMLInputElement>) => this._onCheckboxChange(e.target.checked)}\r\n data-testid={this.createSubComponentTestId(\"checkbox\")}\r\n />\r\n </div>\r\n );\r\n }\r\n }\r\n\r\n const icon = this.props.icon ? (<div className=\"core-tree-node-icon\">{this.props.icon}</div>) : undefined;\r\n\r\n const toggle = (this.props.isLoading || this.props.isLeaf) ? undefined : (\r\n <ExpansionToggle\r\n className=\"expansion-toggle\"\r\n data-testid={this.createSubComponentTestId(\"expansion-toggle\")}\r\n onClick={this._onClickExpansionToggle}\r\n isExpanded={this.props.isExpanded}\r\n />\r\n );\r\n\r\n return (\r\n // eslint-disable-next-line jsx-a11y/click-events-have-key-events\r\n <div\r\n className={className}\r\n style={this.props.style}\r\n data-testid={this.props[\"data-testid\"]}\r\n onClick={this._onClick}\r\n onContextMenu={this.props.onContextMenu}\r\n onMouseDown={this.props.onMouseDown}\r\n onMouseUp={this.props.onMouseUp}\r\n onMouseMove={this.props.onMouseMove}\r\n role=\"treeitem\"\r\n tabIndex={-1}\r\n >\r\n <div\r\n className=\"contents\"\r\n style={{ marginLeft: offset }}\r\n data-testid={this.createSubComponentTestId(\"contents\")}\r\n >\r\n {this.props.isLoading && <ProgressRadial size=\"x-small\" indeterminate />}\r\n {toggle}\r\n {checkbox}\r\n {icon}\r\n {this.props.label}\r\n </div>\r\n {this.props.children}\r\n </div>\r\n );\r\n }\r\n\r\n private createSubComponentTestId(subId: string): string | undefined {\r\n if (!this.props[\"data-testid\"])\r\n return undefined;\r\n return `${this.props[\"data-testid\"]}-${subId}`;\r\n }\r\n\r\n private _onCheckboxChange = (checked: boolean) => {\r\n if (this.props.checkboxProps && this.props.checkboxProps.onClick && !this.props.checkboxProps.isDisabled)\r\n this.props.checkboxProps.onClick(checked ? CheckBoxState.On : CheckBoxState.Off);\r\n };\r\n\r\n private _onCheckboxClick = (e: React.MouseEvent) => {\r\n e.stopPropagation();\r\n };\r\n\r\n private _onClickExpansionToggle = (e: React.MouseEvent<HTMLDivElement>) => {\r\n e.stopPropagation();\r\n if (this.props.onClickExpansionToggle)\r\n this.props.onClickExpansionToggle();\r\n };\r\n\r\n private _onClick = (e: React.MouseEvent<HTMLDivElement>) => {\r\n e.stopPropagation();\r\n\r\n // ITwinUI-react has a bug that prevents us from stopping checkbox click event propagation to the parent element\r\n if (!this.checkboxWrapperRef.current\r\n || (e.target instanceof Element && !isDescendant(this.checkboxWrapperRef.current, e.target))) {\r\n this.props.onClick?.(e);\r\n }\r\n };\r\n}\r\n\r\nfunction isDescendant(ancestor: Element, descendant: Element): boolean {\r\n while (descendant.parentElement !== null) {\r\n if (descendant === ancestor) {\r\n return true;\r\n }\r\n\r\n descendant = descendant.parentElement;\r\n }\r\n\r\n return false;\r\n}\r\n"]}
|
|
@@ -13,7 +13,7 @@ import { useRefs } from "../utils/hooks/useRefs";
|
|
|
13
13
|
const ForwardRefInput = React.forwardRef(// eslint-disable-line deprecation/deprecation
|
|
14
14
|
function ForwardRefInput(props, ref) {
|
|
15
15
|
const { className, style, setFocus, nativeKeyHandler, ...otherProps } = props; // eslint-disable-line @typescript-eslint/no-unused-vars
|
|
16
|
-
const inputElementRef = React.useRef();
|
|
16
|
+
const inputElementRef = React.useRef(null);
|
|
17
17
|
const refs = useRefs(inputElementRef, ref); // combine ref needed for target with the forwardRef needed by the Parent when parent is a Type Editor.
|
|
18
18
|
React.useEffect(() => {
|
|
19
19
|
const currentElement = inputElementRef.current;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../../src/core-react/inputs/Input.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,IAAI,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAgBjD,0GAA0G;AAC1G,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAAkC,8CAA8C;AACtH,SAAS,eAAe,CAAC,KAAK,EAAE,GAAG;IACjC,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,gBAAgB,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC,CAAC,wDAAwD;IACvI,MAAM,eAAe,GAAG,KAAK,CAAC,MAAM,
|
|
1
|
+
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../../src/core-react/inputs/Input.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,IAAI,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAgBjD,0GAA0G;AAC1G,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAAkC,8CAA8C;AACtH,SAAS,eAAe,CAAC,KAAK,EAAE,GAAG;IACjC,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,gBAAgB,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC,CAAC,wDAAwD;IACvI,MAAM,eAAe,GAAG,KAAK,CAAC,MAAM,CAAmB,IAAI,CAAC,CAAC;IAC7D,MAAM,IAAI,GAAG,OAAO,CAAC,eAAe,EAAE,GAAG,CAAC,CAAC,CAAE,uGAAuG;IAEpJ,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,cAAc,GAAG,eAAe,CAAC,OAAO,CAAC;QAC/C,MAAM,cAAc,GAAG,gBAAgB,CAAC;QAExC,IAAI,cAAc,IAAI,cAAc,EAAE;YACpC,cAAc,CAAC,gBAAgB,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC;SAC5D;QACD,OAAO,GAAG,EAAE;YACV,IAAI,cAAc,IAAI,cAAc,EAAE;gBACpC,cAAc,CAAC,mBAAmB,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC;aAC/D;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAEvB,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,eAAe,CAAC,OAAO,IAAI,QAAQ;YACrC,eAAe,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;IACpC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAyC,EAAE,EAAE;QAClF,KAAK,CAAC,aAAa,CAAC,MAAM,EAAE,CAAC;IAC/B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,oBAAC,aAAa,IAAC,GAAG,EAAE,IAAI,EAAE,IAAI,EAAC,MAAM,KAAK,UAAU,EAAE,OAAO,EAAE,WAAW,EACxE,SAAS,EAAE,UAAU,CAAC,qBAAqB,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,GAAI,CAC5E,CAAC;AACJ,CAAC,CACF,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,KAAK,GAA8C,eAAe,CAAC,CAAE,8CAA8C","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 Inputs\r\n */\r\n\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { Input as ITwinUI_Input } from \"@itwin/itwinui-react\";\r\nimport { useRefs } from \"../utils/hooks/useRefs\";\r\nimport { CommonProps } from \"../utils/Props\";\r\n\r\n/** Properties for the [[Input]] component\r\n * @public\r\n * @deprecated Use InputProps in itwinui-react instead\r\n */\r\nexport interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>, CommonProps {\r\n /** Indicates whether to set focus to the input element */\r\n setFocus?: boolean;\r\n /** Native keydown event handler */\r\n nativeKeyHandler?: (e: KeyboardEvent) => void;\r\n /** Provides ability to return reference to HTMLInputElement */\r\n ref?: React.Ref<HTMLInputElement>;\r\n}\r\n\r\n// Defined using following pattern (const Input at bottom) to ensure useful API documentation is extracted\r\nconst ForwardRefInput = React.forwardRef<HTMLInputElement, InputProps>( // eslint-disable-line deprecation/deprecation\r\n function ForwardRefInput(props, ref) {\r\n const { className, style, setFocus, nativeKeyHandler, ...otherProps } = props; // eslint-disable-line @typescript-eslint/no-unused-vars\r\n const inputElementRef = React.useRef<HTMLInputElement>(null);\r\n const refs = useRefs(inputElementRef, ref); // combine ref needed for target with the forwardRef needed by the Parent when parent is a Type Editor.\r\n\r\n React.useEffect(() => {\r\n const currentElement = inputElementRef.current;\r\n const currentHandler = nativeKeyHandler;\r\n\r\n if (currentElement && currentHandler) {\r\n currentElement.addEventListener(\"keydown\", currentHandler);\r\n }\r\n return () => {\r\n if (currentHandler && currentElement) {\r\n currentElement.removeEventListener(\"keydown\", currentHandler);\r\n }\r\n };\r\n }, [nativeKeyHandler]);\r\n\r\n React.useEffect(() => {\r\n if (inputElementRef.current && setFocus)\r\n inputElementRef.current.focus();\r\n }, [setFocus]);\r\n\r\n const handleFocus = React.useCallback((event: React.FocusEvent<HTMLInputElement>) => {\r\n event.currentTarget.select();\r\n }, []);\r\n\r\n return (\r\n <ITwinUI_Input ref={refs} type=\"text\" {...otherProps} onFocus={handleFocus}\r\n className={classnames(\"uicore-inputs-input\", className)} style={style} />\r\n );\r\n }\r\n);\r\n\r\n/** Basic text input, is a wrapper for the `<input type=\"text\">` HTML element.\r\n * @public\r\n * @deprecated Use Input in itwinui-react instead\r\n */\r\nexport const Input: (props: InputProps) => JSX.Element | null = ForwardRefInput; // eslint-disable-line deprecation/deprecation\r\n"]}
|
|
@@ -14,7 +14,7 @@ const ForwardRefTextarea = React.forwardRef(// eslint-disable-line deprecation/d
|
|
|
14
14
|
function ForwardRefTextarea(props, ref) {
|
|
15
15
|
const { className, style, rows, setFocus, ...otherProps } = props; // eslint-disable-line @typescript-eslint/no-unused-vars
|
|
16
16
|
const textRows = undefined !== rows ? rows : 3;
|
|
17
|
-
const textAreaElementRef = React.useRef();
|
|
17
|
+
const textAreaElementRef = React.useRef(null);
|
|
18
18
|
const refs = useRefs(textAreaElementRef, ref); // combine ref needed for target with the forwardRef needed by the Parent when parent is a Type Editor.
|
|
19
19
|
React.useEffect(() => {
|
|
20
20
|
if (textAreaElementRef.current && setFocus)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../../../src/core-react/inputs/Textarea.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,IAAI,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACpE,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAgBjD,0GAA0G;AAC1G,MAAM,kBAAkB,GAAG,KAAK,CAAC,UAAU,CAAyC,8CAA8C;AAChI,SAAS,kBAAkB,CAAC,KAAK,EAAE,GAAG;IACpC,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC,CAAC,wDAAwD;IAC3H,MAAM,QAAQ,GAAG,SAAS,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;IAC/C,MAAM,kBAAkB,GAAG,KAAK,CAAC,MAAM,
|
|
1
|
+
{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../../../src/core-react/inputs/Textarea.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,IAAI,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACpE,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAgBjD,0GAA0G;AAC1G,MAAM,kBAAkB,GAAG,KAAK,CAAC,UAAU,CAAyC,8CAA8C;AAChI,SAAS,kBAAkB,CAAC,KAAK,EAAE,GAAG;IACpC,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC,CAAC,wDAAwD;IAC3H,MAAM,QAAQ,GAAG,SAAS,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;IAC/C,MAAM,kBAAkB,GAAG,KAAK,CAAC,MAAM,CAAsB,IAAI,CAAC,CAAC;IACnE,MAAM,IAAI,GAAG,OAAO,CAAC,kBAAkB,EAAE,GAAG,CAAC,CAAC,CAAE,uGAAuG;IAEvJ,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,kBAAkB,CAAC,OAAO,IAAI,QAAQ;YACxC,kBAAkB,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;IACvC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAA4C,EAAE,EAAE;QACrF,KAAK,CAAC,aAAa,CAAC,MAAM,EAAE,CAAC;IAC/B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,oBAAC,gBAAgB,OAAK,UAAU,EAC9B,GAAG,EAAE,IAAI,EACT,IAAI,EAAE,QAAQ,EACd,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,UAAU,CAAC,wBAAwB,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,GAAI,CAC/E,CAAC;AACJ,CAAC,CACF,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAiD,kBAAkB,CAAC,CAAG,8CAA8C","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 Inputs\r\n */\r\n\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { Textarea as ITwinUI_Textarea } from \"@itwin/itwinui-react\";\r\nimport { useRefs } from \"../utils/hooks/useRefs\";\r\nimport { CommonProps } from \"../utils/Props\";\r\n\r\n/** Properties for [[Textarea]] component\r\n * @public\r\n * @deprecated Use TextareaProps in itwinui-react instead\r\n */\r\nexport interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement>, CommonProps {\r\n /** Number of textarea rows. Default is 3. */\r\n rows?: number;\r\n /** Indicates whether to set focus to the textarea element */\r\n setFocus?: boolean;\r\n /** Provides ability to return reference to HTMLInputElement */\r\n ref?: React.Ref<HTMLTextAreaElement>;\r\n}\r\n\r\n// Defined using following pattern (const Input at bottom) to ensure useful API documentation is extracted\r\nconst ForwardRefTextarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>( // eslint-disable-line deprecation/deprecation\r\n function ForwardRefTextarea(props, ref) {\r\n const { className, style, rows, setFocus, ...otherProps } = props; // eslint-disable-line @typescript-eslint/no-unused-vars\r\n const textRows = undefined !== rows ? rows : 3;\r\n const textAreaElementRef = React.useRef<HTMLTextAreaElement>(null);\r\n const refs = useRefs(textAreaElementRef, ref); // combine ref needed for target with the forwardRef needed by the Parent when parent is a Type Editor.\r\n\r\n React.useEffect(() => {\r\n if (textAreaElementRef.current && setFocus)\r\n textAreaElementRef.current.focus();\r\n }, [setFocus]);\r\n\r\n const handleFocus = React.useCallback((event: React.FocusEvent<HTMLTextAreaElement>) => {\r\n event.currentTarget.select();\r\n }, []);\r\n\r\n return (\r\n <ITwinUI_Textarea {...otherProps}\r\n ref={refs}\r\n rows={textRows}\r\n onFocus={handleFocus}\r\n className={classnames(\"uicore-inputs-textarea\", className)} style={style} />\r\n );\r\n }\r\n);\r\n\r\n/** Basic textarea component\r\n * @public\r\n * @deprecated Use Textarea in itwinui-react instead\r\n */\r\nexport const Textarea: (props: TextareaProps) => JSX.Element | null = ForwardRefTextarea; // eslint-disable-line deprecation/deprecation\r\n"]}
|
|
@@ -69,6 +69,7 @@ export interface TreeNodeProps extends CommonProps {
|
|
|
69
69
|
* @public
|
|
70
70
|
*/
|
|
71
71
|
export declare class TreeNode extends React.Component<TreeNodeProps> {
|
|
72
|
+
private checkboxWrapperRef;
|
|
72
73
|
constructor(props: TreeNodeProps);
|
|
73
74
|
render(): JSX.Element;
|
|
74
75
|
private createSubComponentTestId;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Node.d.ts","sourceRoot":"","sources":["../../../../src/core-react/tree/Node.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAY,aAAa,EAAkB,MAAM,sBAAsB,CAAC;AAC/E,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAG1C;;GAEG;AACH,oBAAY,uBAAuB,GAAG,IAAI,CAAC,aAAa,EAAE,UAAU,GAAG,SAAS,CAAC,GAAG;IAClF,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CACxC,CAAC;AAEF;;GAEG;AACH,oBAAY,oBAAoB,GAAG,CAAC,KAAK,EAAE,uBAAuB,KAAK,KAAK,CAAC,SAAS,CAAC;AAEvF;;GAEG;AACH,eAAO,MAAM,YAAY,KAAK,CAAC;AAI/B;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,4BAA4B;IAC5B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,aAAa,KAAK,IAAI,CAAC;IAC5C,6CAA6C;IAC7C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kEAAkE;IAClE,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,MAAM,WAAW,aAAc,SAAQ,WAAW;IAChD,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC;IACxB;iBACa;IACb,aAAa,CAAC,EAAE,iBAAiB,CAAC;IAClC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC9C,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC1C,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;IACpC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,4EAA4E;IAC5E,eAAe,CAAC,EAAE;QAChB,6EAA6E;QAC7E,cAAc,CAAC,EAAE,oBAAoB,CAAC;KACvC,CAAC;IACF,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED;;GAEG;AACH,qBAAa,QAAS,SAAQ,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"Node.d.ts","sourceRoot":"","sources":["../../../../src/core-react/tree/Node.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAY,aAAa,EAAkB,MAAM,sBAAsB,CAAC;AAC/E,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAG1C;;GAEG;AACH,oBAAY,uBAAuB,GAAG,IAAI,CAAC,aAAa,EAAE,UAAU,GAAG,SAAS,CAAC,GAAG;IAClF,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CACxC,CAAC;AAEF;;GAEG;AACH,oBAAY,oBAAoB,GAAG,CAAC,KAAK,EAAE,uBAAuB,KAAK,KAAK,CAAC,SAAS,CAAC;AAEvF;;GAEG;AACH,eAAO,MAAM,YAAY,KAAK,CAAC;AAI/B;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,4BAA4B;IAC5B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,aAAa,KAAK,IAAI,CAAC;IAC5C,6CAA6C;IAC7C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kEAAkE;IAClE,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,MAAM,WAAW,aAAc,SAAQ,WAAW;IAChD,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC;IACxB;iBACa;IACb,aAAa,CAAC,EAAE,iBAAiB,CAAC;IAClC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC9C,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC1C,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;IACpC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,4EAA4E;IAC5E,eAAe,CAAC,EAAE;QAChB,6EAA6E;QAC7E,cAAc,CAAC,EAAE,oBAAoB,CAAC;KACvC,CAAC;IACF,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED;;GAEG;AACH,qBAAa,QAAS,SAAQ,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC;IAC1D,OAAO,CAAC,kBAAkB,CAAqC;gBAEnD,KAAK,EAAE,aAAa;IAIhB,MAAM;IA8EtB,OAAO,CAAC,wBAAwB;IAMhC,OAAO,CAAC,iBAAiB,CAGvB;IAEF,OAAO,CAAC,gBAAgB,CAEtB;IAEF,OAAO,CAAC,uBAAuB,CAI7B;IAEF,OAAO,CAAC,QAAQ,CAQd;CACH"}
|
|
@@ -22,6 +22,7 @@ const EXPANSION_TOGGLE_WIDTH = 24;
|
|
|
22
22
|
export class TreeNode extends React.Component {
|
|
23
23
|
constructor(props) {
|
|
24
24
|
super(props);
|
|
25
|
+
this.checkboxWrapperRef = React.createRef();
|
|
25
26
|
this._onCheckboxChange = (checked) => {
|
|
26
27
|
if (this.props.checkboxProps && this.props.checkboxProps.onClick && !this.props.checkboxProps.isDisabled)
|
|
27
28
|
this.props.checkboxProps.onClick(checked ? CheckBoxState.On : CheckBoxState.Off);
|
|
@@ -35,9 +36,13 @@ export class TreeNode extends React.Component {
|
|
|
35
36
|
this.props.onClickExpansionToggle();
|
|
36
37
|
};
|
|
37
38
|
this._onClick = (e) => {
|
|
39
|
+
var _a, _b;
|
|
38
40
|
e.stopPropagation();
|
|
39
|
-
|
|
40
|
-
|
|
41
|
+
// ITwinUI-react has a bug that prevents us from stopping checkbox click event propagation to the parent element
|
|
42
|
+
if (!this.checkboxWrapperRef.current
|
|
43
|
+
|| (e.target instanceof Element && !isDescendant(this.checkboxWrapperRef.current, e.target))) {
|
|
44
|
+
(_b = (_a = this.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
|
|
45
|
+
}
|
|
41
46
|
};
|
|
42
47
|
}
|
|
43
48
|
render() {
|
|
@@ -60,7 +65,8 @@ export class TreeNode extends React.Component {
|
|
|
60
65
|
checkbox = this.props.renderOverrides.renderCheckbox(props);
|
|
61
66
|
}
|
|
62
67
|
else {
|
|
63
|
-
checkbox = (React.createElement(
|
|
68
|
+
checkbox = (React.createElement("div", { ref: this.checkboxWrapperRef },
|
|
69
|
+
React.createElement(Checkbox, { ...props, onChange: (e) => this._onCheckboxChange(e.target.checked), "data-testid": this.createSubComponentTestId("checkbox") })));
|
|
64
70
|
}
|
|
65
71
|
}
|
|
66
72
|
const icon = this.props.icon ? (React.createElement("div", { className: "core-tree-node-icon" }, this.props.icon)) : undefined;
|
|
@@ -82,4 +88,13 @@ export class TreeNode extends React.Component {
|
|
|
82
88
|
return `${this.props["data-testid"]}-${subId}`;
|
|
83
89
|
}
|
|
84
90
|
}
|
|
91
|
+
function isDescendant(ancestor, descendant) {
|
|
92
|
+
while (descendant.parentElement !== null) {
|
|
93
|
+
if (descendant === ancestor) {
|
|
94
|
+
return true;
|
|
95
|
+
}
|
|
96
|
+
descendant = descendant.parentElement;
|
|
97
|
+
}
|
|
98
|
+
return false;
|
|
99
|
+
}
|
|
85
100
|
//# sourceMappingURL=Node.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Node.js","sourceRoot":"","sources":["../../../../src/core-react/tree/Node.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,aAAa,CAAC;AACrB,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAiB,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAC/E,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAGvD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAepD;;GAEG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,EAAE,CAAC;AAE/B,MAAM,sBAAsB,GAAG,EAAE,CAAC;AAgDlC;;GAEG;AACH,MAAM,OAAO,QAAS,SAAQ,KAAK,CAAC,SAAwB;IAC1D,YAAY,KAAoB;QAC9B,KAAK,CAAC,KAAK,CAAC,CAAC;QAmFP,sBAAiB,GAAG,CAAC,OAAgB,EAAE,EAAE;YAC/C,IAAI,IAAI,CAAC,KAAK,CAAC,aAAa,IAAI,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,UAAU;gBACtG,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;QACrF,CAAC,CAAC;QAEM,qBAAgB,GAAG,CAAC,CAAmB,EAAE,EAAE;YACjD,CAAC,CAAC,eAAe,EAAE,CAAC;QACtB,CAAC,CAAC;QAEM,4BAAuB,GAAG,CAAC,CAAmC,EAAE,EAAE;YACxE,CAAC,CAAC,eAAe,EAAE,CAAC;YACpB,IAAI,IAAI,CAAC,KAAK,CAAC,sBAAsB;gBACnC,IAAI,CAAC,KAAK,CAAC,sBAAsB,EAAE,CAAC;QACxC,CAAC,CAAC;QAEM,aAAQ,GAAG,CAAC,CAAmC,EAAE,EAAE;YACzD,CAAC,CAAC,eAAe,EAAE,CAAC;YACpB,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO;gBACpB,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;QAC1B,CAAC,CAAC;IArGF,CAAC;IAEe,MAAM;QACpB,MAAM,SAAS,GAAG,UAAU,CAC1B,gBAAgB,EAChB,IAAI,CAAC,KAAK,CAAC,SAAS,IAAI,YAAY,EACpC,IAAI,CAAC,KAAK,CAAC,UAAU,IAAI,aAAa,EACtC,IAAI,CAAC,KAAK,CAAC,eAAe,IAAI,mBAAmB,EACjD,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;QACxB,IAAI,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,YAAY,CAAC;QAC7C,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM;YAC5C,MAAM,IAAI,sBAAsB,CAAC,CAAC,4DAA4D;QAEhG,IAAI,QAAyB,CAAC;QAC9B,IAAI,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE;YAC5B,MAAM,KAAK,GAA4B;gBACrC,KAAK,EAAE,EAAE;gBACT,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,KAAK,aAAa,CAAC,EAAE;gBAC5D,aAAa,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,KAAK,aAAa,CAAC,OAAO;gBACvE,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,UAAU;gBAC7C,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,OAAO;gBACvC,OAAO,EAAE,IAAI,CAAC,gBAAgB;gBAC9B,QAAQ,EAAE,IAAI,CAAC,iBAAiB;aACjC,CAAC;YACF,IAAI,IAAI,CAAC,KAAK,CAAC,eAAe,IAAI,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,cAAc,EAAE;gBAC3E,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;aAC7D;iBAAM;gBACL,QAAQ,GAAG,CACT,oBAAC,QAAQ,OAAK,KAAK,EACjB,QAAQ,EAAE,CAAC,CAAsC,EAAE,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,iBAAe,IAAI,CAAC,wBAAwB,CAAC,UAAU,CAAC,GACtJ,CACH,CAAC;aACH;SACF;QAED,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,6BAAK,SAAS,EAAC,qBAAqB,IAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAO,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;QAE1G,MAAM,MAAM,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CACvE,oBAAC,eAAe,IACd,SAAS,EAAC,kBAAkB,iBACf,IAAI,CAAC,wBAAwB,CAAC,kBAAkB,CAAC,EAC9D,OAAO,EAAE,IAAI,CAAC,uBAAuB,EACrC,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,GACjC,CACH,CAAC;QAEF,OAAO;QACL,iEAAiE;QACjE,6BACE,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,iBACV,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,EACtC,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,aAAa,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa,EACvC,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,WAAW,EACnC,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAC/B,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,WAAW,EACnC,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,CAAC,CAAC;YAEZ,6BACE,SAAS,EAAC,UAAU,EACpB,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,iBAChB,IAAI,CAAC,wBAAwB,CAAC,UAAU,CAAC;gBAErD,IAAI,CAAC,KAAK,CAAC,SAAS,IAAI,oBAAC,cAAc,IAAC,IAAI,EAAC,SAAS,EAAC,aAAa,SAAG;gBACvE,MAAM;gBACN,QAAQ;gBACR,IAAI;gBACJ,IAAI,CAAC,KAAK,CAAC,KAAK,CACb;YACL,IAAI,CAAC,KAAK,CAAC,QAAQ,CAChB,CACP,CAAC;IACJ,CAAC;IAEO,wBAAwB,CAAC,KAAa;QAC5C,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC;YAC5B,OAAO,SAAS,CAAC;QACnB,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,IAAI,KAAK,EAAE,CAAC;IACjD,CAAC;CAsBF","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 Tree\r\n */\r\n\r\nimport \"./Node.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { Checkbox, CheckboxProps, ProgressRadial } from \"@itwin/itwinui-react\";\r\nimport { CheckBoxState } from \"../enums/CheckBoxState\";\r\nimport { CommonProps } from \"../utils/Props\";\r\nimport { Omit } from \"../utils/typeUtils\";\r\nimport { ExpansionToggle } from \"./ExpansionToggle\";\r\n\r\n/** Props for node Checkbox renderer\r\n * @public\r\n */\r\nexport type NodeCheckboxRenderProps = Omit<CheckboxProps, \"onChange\" | \"onClick\"> & {\r\n onChange: (checked: boolean) => void;\r\n onClick: (e: React.MouseEvent) => void;\r\n};\r\n\r\n/** Type for node Checkbox renderer\r\n * @public\r\n */\r\nexport type NodeCheckboxRenderer = (props: NodeCheckboxRenderProps) => React.ReactNode;\r\n\r\n/** Number of pixels the node gets offset per each hierarchy level\r\n * @internal\r\n */\r\nexport const LEVEL_OFFSET = 20;\r\n\r\nconst EXPANSION_TOGGLE_WIDTH = 24;\r\n\r\n/** Properties for Tree Node CheckBox\r\n * @public\r\n */\r\nexport interface NodeCheckboxProps {\r\n /** State of the checkbox */\r\n state?: CheckBoxState;\r\n /** Click event callback */\r\n onClick?: (newState: CheckBoxState) => void;\r\n /** Indicates whether checkbox is disabled */\r\n isDisabled?: boolean;\r\n /** Tooltip to be displayed when mouse is hovered over checkbox */\r\n tooltip?: string;\r\n}\r\n\r\n/** Properties for the [[TreeNode]] React component\r\n * @public\r\n */\r\nexport interface TreeNodeProps extends CommonProps {\r\n label: React.ReactNode;\r\n level: number;\r\n icon?: React.ReactChild;\r\n /** Properties for the checkbox.\r\n * @public */\r\n checkboxProps?: NodeCheckboxProps;\r\n isLeaf?: boolean;\r\n isLoading?: boolean;\r\n isExpanded?: boolean;\r\n isFocused?: boolean;\r\n isSelected?: boolean;\r\n isHoverDisabled?: boolean;\r\n onClick?: (e: React.MouseEvent) => void;\r\n onContextMenu?: (e: React.MouseEvent) => void;\r\n onMouseMove?: (e: React.MouseEvent) => void;\r\n onMouseDown?: (e: React.MouseEvent) => void;\r\n onMouseUp?: (e: React.MouseEvent) => void;\r\n onClickExpansionToggle?: () => void;\r\n children?: React.ReactNode;\r\n\r\n /** Contains render overrides for different pieces of the node component. */\r\n renderOverrides?: {\r\n /** Callback to render a checkbox. Only called when checkbox is displayed. */\r\n renderCheckbox?: NodeCheckboxRenderer;\r\n };\r\n [\"data-testid\"]?: string;\r\n}\r\n\r\n/** Presentation React component for a Tree node\r\n * @public\r\n */\r\nexport class TreeNode extends React.Component<TreeNodeProps> {\r\n constructor(props: TreeNodeProps) {\r\n super(props);\r\n }\r\n\r\n public override render() {\r\n const className = classnames(\r\n \"core-tree-node\",\r\n this.props.isFocused && \"is-focused\",\r\n this.props.isSelected && \"is-selected\",\r\n this.props.isHoverDisabled && \"is-hover-disabled\",\r\n this.props.className);\r\n let offset = this.props.level * LEVEL_OFFSET;\r\n if (!this.props.isLoading && this.props.isLeaf)\r\n offset += EXPANSION_TOGGLE_WIDTH; // Add expansion toggle/loader width if they're not rendered\r\n\r\n let checkbox: React.ReactNode;\r\n if (this.props.checkboxProps) {\r\n const props: NodeCheckboxRenderProps = {\r\n label: \"\",\r\n checked: this.props.checkboxProps.state === CheckBoxState.On,\r\n indeterminate: this.props.checkboxProps.state === CheckBoxState.Partial,\r\n disabled: this.props.checkboxProps.isDisabled,\r\n title: this.props.checkboxProps.tooltip,\r\n onClick: this._onCheckboxClick,\r\n onChange: this._onCheckboxChange,\r\n };\r\n if (this.props.renderOverrides && this.props.renderOverrides.renderCheckbox) {\r\n checkbox = this.props.renderOverrides.renderCheckbox(props);\r\n } else {\r\n checkbox = (\r\n <Checkbox {...props}\r\n onChange={(e: React.ChangeEvent<HTMLInputElement>) => this._onCheckboxChange(e.target.checked)} data-testid={this.createSubComponentTestId(\"checkbox\")}\r\n />\r\n );\r\n }\r\n }\r\n\r\n const icon = this.props.icon ? (<div className=\"core-tree-node-icon\">{this.props.icon}</div>) : undefined;\r\n\r\n const toggle = (this.props.isLoading || this.props.isLeaf) ? undefined : (\r\n <ExpansionToggle\r\n className=\"expansion-toggle\"\r\n data-testid={this.createSubComponentTestId(\"expansion-toggle\")}\r\n onClick={this._onClickExpansionToggle}\r\n isExpanded={this.props.isExpanded}\r\n />\r\n );\r\n\r\n return (\r\n // eslint-disable-next-line jsx-a11y/click-events-have-key-events\r\n <div\r\n className={className}\r\n style={this.props.style}\r\n data-testid={this.props[\"data-testid\"]}\r\n onClick={this._onClick}\r\n onContextMenu={this.props.onContextMenu}\r\n onMouseDown={this.props.onMouseDown}\r\n onMouseUp={this.props.onMouseUp}\r\n onMouseMove={this.props.onMouseMove}\r\n role=\"treeitem\"\r\n tabIndex={-1}\r\n >\r\n <div\r\n className=\"contents\"\r\n style={{ marginLeft: offset }}\r\n data-testid={this.createSubComponentTestId(\"contents\")}\r\n >\r\n {this.props.isLoading && <ProgressRadial size=\"x-small\" indeterminate />}\r\n {toggle}\r\n {checkbox}\r\n {icon}\r\n {this.props.label}\r\n </div>\r\n {this.props.children}\r\n </div>\r\n );\r\n }\r\n\r\n private createSubComponentTestId(subId: string): string | undefined {\r\n if (!this.props[\"data-testid\"])\r\n return undefined;\r\n return `${this.props[\"data-testid\"]}-${subId}`;\r\n }\r\n\r\n private _onCheckboxChange = (checked: boolean) => {\r\n if (this.props.checkboxProps && this.props.checkboxProps.onClick && !this.props.checkboxProps.isDisabled)\r\n this.props.checkboxProps.onClick(checked ? CheckBoxState.On : CheckBoxState.Off);\r\n };\r\n\r\n private _onCheckboxClick = (e: React.MouseEvent) => {\r\n e.stopPropagation();\r\n };\r\n\r\n private _onClickExpansionToggle = (e: React.MouseEvent<HTMLDivElement>) => {\r\n e.stopPropagation();\r\n if (this.props.onClickExpansionToggle)\r\n this.props.onClickExpansionToggle();\r\n };\r\n\r\n private _onClick = (e: React.MouseEvent<HTMLDivElement>) => {\r\n e.stopPropagation();\r\n if (this.props.onClick)\r\n this.props.onClick(e);\r\n };\r\n}\r\n"]}
|
|
1
|
+
{"version":3,"file":"Node.js","sourceRoot":"","sources":["../../../../src/core-react/tree/Node.tsx"],"names":[],"mappings":"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","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 Tree\r\n */\r\n\r\nimport \"./Node.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { Checkbox, CheckboxProps, ProgressRadial } from \"@itwin/itwinui-react\";\r\nimport { CheckBoxState } from \"../enums/CheckBoxState\";\r\nimport { CommonProps } from \"../utils/Props\";\r\nimport { Omit } from \"../utils/typeUtils\";\r\nimport { ExpansionToggle } from \"./ExpansionToggle\";\r\n\r\n/** Props for node Checkbox renderer\r\n * @public\r\n */\r\nexport type NodeCheckboxRenderProps = Omit<CheckboxProps, \"onChange\" | \"onClick\"> & {\r\n onChange: (checked: boolean) => void;\r\n onClick: (e: React.MouseEvent) => void;\r\n};\r\n\r\n/** Type for node Checkbox renderer\r\n * @public\r\n */\r\nexport type NodeCheckboxRenderer = (props: NodeCheckboxRenderProps) => React.ReactNode;\r\n\r\n/** Number of pixels the node gets offset per each hierarchy level\r\n * @internal\r\n */\r\nexport const LEVEL_OFFSET = 20;\r\n\r\nconst EXPANSION_TOGGLE_WIDTH = 24;\r\n\r\n/** Properties for Tree Node CheckBox\r\n * @public\r\n */\r\nexport interface NodeCheckboxProps {\r\n /** State of the checkbox */\r\n state?: CheckBoxState;\r\n /** Click event callback */\r\n onClick?: (newState: CheckBoxState) => void;\r\n /** Indicates whether checkbox is disabled */\r\n isDisabled?: boolean;\r\n /** Tooltip to be displayed when mouse is hovered over checkbox */\r\n tooltip?: string;\r\n}\r\n\r\n/** Properties for the [[TreeNode]] React component\r\n * @public\r\n */\r\nexport interface TreeNodeProps extends CommonProps {\r\n label: React.ReactNode;\r\n level: number;\r\n icon?: React.ReactChild;\r\n /** Properties for the checkbox.\r\n * @public */\r\n checkboxProps?: NodeCheckboxProps;\r\n isLeaf?: boolean;\r\n isLoading?: boolean;\r\n isExpanded?: boolean;\r\n isFocused?: boolean;\r\n isSelected?: boolean;\r\n isHoverDisabled?: boolean;\r\n onClick?: (e: React.MouseEvent) => void;\r\n onContextMenu?: (e: React.MouseEvent) => void;\r\n onMouseMove?: (e: React.MouseEvent) => void;\r\n onMouseDown?: (e: React.MouseEvent) => void;\r\n onMouseUp?: (e: React.MouseEvent) => void;\r\n onClickExpansionToggle?: () => void;\r\n children?: React.ReactNode;\r\n\r\n /** Contains render overrides for different pieces of the node component. */\r\n renderOverrides?: {\r\n /** Callback to render a checkbox. Only called when checkbox is displayed. */\r\n renderCheckbox?: NodeCheckboxRenderer;\r\n };\r\n [\"data-testid\"]?: string;\r\n}\r\n\r\n/** Presentation React component for a Tree node\r\n * @public\r\n */\r\nexport class TreeNode extends React.Component<TreeNodeProps> {\r\n private checkboxWrapperRef = React.createRef<HTMLDivElement>();\r\n\r\n constructor(props: TreeNodeProps) {\r\n super(props);\r\n }\r\n\r\n public override render() {\r\n const className = classnames(\r\n \"core-tree-node\",\r\n this.props.isFocused && \"is-focused\",\r\n this.props.isSelected && \"is-selected\",\r\n this.props.isHoverDisabled && \"is-hover-disabled\",\r\n this.props.className);\r\n let offset = this.props.level * LEVEL_OFFSET;\r\n if (!this.props.isLoading && this.props.isLeaf)\r\n offset += EXPANSION_TOGGLE_WIDTH; // Add expansion toggle/loader width if they're not rendered\r\n\r\n let checkbox: React.ReactNode;\r\n if (this.props.checkboxProps) {\r\n const props: NodeCheckboxRenderProps = {\r\n label: \"\",\r\n checked: this.props.checkboxProps.state === CheckBoxState.On,\r\n indeterminate: this.props.checkboxProps.state === CheckBoxState.Partial,\r\n disabled: this.props.checkboxProps.isDisabled,\r\n title: this.props.checkboxProps.tooltip,\r\n onClick: this._onCheckboxClick,\r\n onChange: this._onCheckboxChange,\r\n };\r\n if (this.props.renderOverrides && this.props.renderOverrides.renderCheckbox) {\r\n checkbox = this.props.renderOverrides.renderCheckbox(props);\r\n } else {\r\n checkbox = (\r\n <div ref={this.checkboxWrapperRef}>\r\n <Checkbox\r\n {...props}\r\n onChange={(e: React.ChangeEvent<HTMLInputElement>) => this._onCheckboxChange(e.target.checked)}\r\n data-testid={this.createSubComponentTestId(\"checkbox\")}\r\n />\r\n </div>\r\n );\r\n }\r\n }\r\n\r\n const icon = this.props.icon ? (<div className=\"core-tree-node-icon\">{this.props.icon}</div>) : undefined;\r\n\r\n const toggle = (this.props.isLoading || this.props.isLeaf) ? undefined : (\r\n <ExpansionToggle\r\n className=\"expansion-toggle\"\r\n data-testid={this.createSubComponentTestId(\"expansion-toggle\")}\r\n onClick={this._onClickExpansionToggle}\r\n isExpanded={this.props.isExpanded}\r\n />\r\n );\r\n\r\n return (\r\n // eslint-disable-next-line jsx-a11y/click-events-have-key-events\r\n <div\r\n className={className}\r\n style={this.props.style}\r\n data-testid={this.props[\"data-testid\"]}\r\n onClick={this._onClick}\r\n onContextMenu={this.props.onContextMenu}\r\n onMouseDown={this.props.onMouseDown}\r\n onMouseUp={this.props.onMouseUp}\r\n onMouseMove={this.props.onMouseMove}\r\n role=\"treeitem\"\r\n tabIndex={-1}\r\n >\r\n <div\r\n className=\"contents\"\r\n style={{ marginLeft: offset }}\r\n data-testid={this.createSubComponentTestId(\"contents\")}\r\n >\r\n {this.props.isLoading && <ProgressRadial size=\"x-small\" indeterminate />}\r\n {toggle}\r\n {checkbox}\r\n {icon}\r\n {this.props.label}\r\n </div>\r\n {this.props.children}\r\n </div>\r\n );\r\n }\r\n\r\n private createSubComponentTestId(subId: string): string | undefined {\r\n if (!this.props[\"data-testid\"])\r\n return undefined;\r\n return `${this.props[\"data-testid\"]}-${subId}`;\r\n }\r\n\r\n private _onCheckboxChange = (checked: boolean) => {\r\n if (this.props.checkboxProps && this.props.checkboxProps.onClick && !this.props.checkboxProps.isDisabled)\r\n this.props.checkboxProps.onClick(checked ? CheckBoxState.On : CheckBoxState.Off);\r\n };\r\n\r\n private _onCheckboxClick = (e: React.MouseEvent) => {\r\n e.stopPropagation();\r\n };\r\n\r\n private _onClickExpansionToggle = (e: React.MouseEvent<HTMLDivElement>) => {\r\n e.stopPropagation();\r\n if (this.props.onClickExpansionToggle)\r\n this.props.onClickExpansionToggle();\r\n };\r\n\r\n private _onClick = (e: React.MouseEvent<HTMLDivElement>) => {\r\n e.stopPropagation();\r\n\r\n // ITwinUI-react has a bug that prevents us from stopping checkbox click event propagation to the parent element\r\n if (!this.checkboxWrapperRef.current\r\n || (e.target instanceof Element && !isDescendant(this.checkboxWrapperRef.current, e.target))) {\r\n this.props.onClick?.(e);\r\n }\r\n };\r\n}\r\n\r\nfunction isDescendant(ancestor: Element, descendant: Element): boolean {\r\n while (descendant.parentElement !== null) {\r\n if (descendant === ancestor) {\r\n return true;\r\n }\r\n\r\n descendant = descendant.parentElement;\r\n }\r\n\r\n return false;\r\n}\r\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@itwin/core-react",
|
|
3
|
-
"version": "3.0.
|
|
3
|
+
"version": "3.0.3",
|
|
4
4
|
"description": "iTwin.js UI core components",
|
|
5
5
|
"main": "lib/cjs/core-react.js",
|
|
6
6
|
"module": "lib/esm/core-react.js",
|
|
@@ -23,8 +23,8 @@
|
|
|
23
23
|
"url": "http://www.bentley.com"
|
|
24
24
|
},
|
|
25
25
|
"peerDependencies": {
|
|
26
|
-
"@itwin/appui-abstract": "^3.0.
|
|
27
|
-
"@itwin/core-bentley": "^3.0.
|
|
26
|
+
"@itwin/appui-abstract": "^3.0.3",
|
|
27
|
+
"@itwin/core-bentley": "^3.0.3",
|
|
28
28
|
"react": "^17.0.0",
|
|
29
29
|
"react-dom": "^17.0.0"
|
|
30
30
|
},
|
|
@@ -33,12 +33,12 @@
|
|
|
33
33
|
"NOTE: All tools used by scripts in this package must be listed as devDependencies"
|
|
34
34
|
],
|
|
35
35
|
"devDependencies": {
|
|
36
|
-
"@itwin/appui-abstract": "3.0.
|
|
37
|
-
"@itwin/build-tools": "3.0.
|
|
38
|
-
"@itwin/core-bentley": "3.0.
|
|
39
|
-
"@itwin/core-common": "3.0.
|
|
40
|
-
"@itwin/core-i18n": "3.0.
|
|
41
|
-
"@itwin/eslint-plugin": "3.0.
|
|
36
|
+
"@itwin/appui-abstract": "3.0.3",
|
|
37
|
+
"@itwin/build-tools": "3.0.3",
|
|
38
|
+
"@itwin/core-bentley": "3.0.3",
|
|
39
|
+
"@itwin/core-common": "3.0.3",
|
|
40
|
+
"@itwin/core-i18n": "3.0.3",
|
|
41
|
+
"@itwin/eslint-plugin": "3.0.3",
|
|
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",
|