@onerjs/shared-ui-components 8.43.9 → 8.44.2
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/fluent/hoc/propertyLines/entitySelectorPropertyLine.d.ts +10 -6
- package/fluent/hoc/propertyLines/entitySelectorPropertyLine.js +4 -2
- package/fluent/hoc/propertyLines/entitySelectorPropertyLine.js.map +1 -1
- package/fluent/primitives/clusteredLightContainerSelector.d.ts +22 -0
- package/fluent/primitives/clusteredLightContainerSelector.js +17 -0
- package/fluent/primitives/clusteredLightContainerSelector.js.map +1 -0
- package/fluent/primitives/entitySelector.d.ts +1 -1
- package/fluent/primitives/entitySelector.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,19 +1,23 @@
|
|
|
1
|
+
import type { Skeleton } from "@onerjs/core/Bones/skeleton.js";
|
|
2
|
+
import type { ClusteredLightContainer } from "@onerjs/core/Lights/Clustered/clusteredLightContainer.js";
|
|
3
|
+
import type { Material } from "@onerjs/core/Materials/material.js";
|
|
4
|
+
import type { BaseTexture } from "@onerjs/core/Materials/Textures/baseTexture.js";
|
|
1
5
|
import type { Node } from "@onerjs/core/node.js";
|
|
2
6
|
import type { Nullable } from "@onerjs/core/types.js";
|
|
3
|
-
import type {
|
|
4
|
-
import type { NodeSelectorProps } from "../../primitives/nodeSelector.js";
|
|
7
|
+
import type { ClusteredLightContainerSelectorProps } from "../../primitives/clusteredLightContainerSelector.js";
|
|
5
8
|
import type { MaterialSelectorProps } from "../../primitives/materialSelector.js";
|
|
6
|
-
import type {
|
|
9
|
+
import type { NodeSelectorProps } from "../../primitives/nodeSelector.js";
|
|
7
10
|
import type { SkeletonSelectorProps } from "../../primitives/skeletonSelector.js";
|
|
8
|
-
import type {
|
|
9
|
-
import type {
|
|
10
|
-
import type { Skeleton } from "@onerjs/core/Bones/skeleton.js";
|
|
11
|
+
import type { TextureSelectorProps } from "../../primitives/textureSelector.js";
|
|
12
|
+
import type { PropertyLineProps } from "./propertyLine.js";
|
|
11
13
|
type NodeSelectorPropertyLineProps = PropertyLineProps<Nullable<Node>> & NodeSelectorProps;
|
|
12
14
|
type MaterialSelectorPropertyLineProps = PropertyLineProps<Nullable<Material>> & MaterialSelectorProps;
|
|
13
15
|
type TextureSelectorPropertyLineProps = PropertyLineProps<Nullable<BaseTexture>> & TextureSelectorProps;
|
|
14
16
|
type SkeletonSelectorPropertyLineProps = PropertyLineProps<Nullable<Skeleton>> & SkeletonSelectorProps;
|
|
17
|
+
type ClusteredLightContainerSelectorPropertyLineProps = PropertyLineProps<Nullable<ClusteredLightContainer>> & ClusteredLightContainerSelectorProps;
|
|
15
18
|
export declare const NodeSelectorPropertyLine: (props: NodeSelectorPropertyLineProps) => import("react/jsx-runtime").JSX.Element;
|
|
16
19
|
export declare const MaterialSelectorPropertyLine: (props: MaterialSelectorPropertyLineProps) => import("react/jsx-runtime").JSX.Element;
|
|
17
20
|
export declare const TextureSelectorPropertyLine: (props: TextureSelectorPropertyLineProps) => import("react/jsx-runtime").JSX.Element;
|
|
18
21
|
export declare const SkeletonSelectorPropertyLine: (props: SkeletonSelectorPropertyLineProps) => import("react/jsx-runtime").JSX.Element;
|
|
22
|
+
export declare const ClusteredLightContainerSelectorPropertyLine: (props: ClusteredLightContainerSelectorPropertyLineProps) => import("react/jsx-runtime").JSX.Element;
|
|
19
23
|
export {};
|
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { ClusteredLightContainerSelector } from "../../primitives/clusteredLightContainerSelector.js";
|
|
2
3
|
import { MaterialSelector } from "../../primitives/materialSelector.js";
|
|
3
|
-
import { PropertyLine } from "./propertyLine.js";
|
|
4
4
|
import { NodeSelector } from "../../primitives/nodeSelector.js";
|
|
5
|
-
import { TextureSelector } from "../../primitives/textureSelector.js";
|
|
6
5
|
import { SkeletonSelector } from "../../primitives/skeletonSelector.js";
|
|
6
|
+
import { TextureSelector } from "../../primitives/textureSelector.js";
|
|
7
|
+
import { PropertyLine } from "./propertyLine.js";
|
|
7
8
|
export const NodeSelectorPropertyLine = (props) => _jsx(PropertyLine, { ...props, children: _jsx(NodeSelector, { ...props }) });
|
|
8
9
|
export const MaterialSelectorPropertyLine = (props) => _jsx(PropertyLine, { ...props, children: _jsx(MaterialSelector, { ...props }) });
|
|
9
10
|
export const TextureSelectorPropertyLine = (props) => _jsx(PropertyLine, { ...props, children: _jsx(TextureSelector, { ...props }) });
|
|
10
11
|
export const SkeletonSelectorPropertyLine = (props) => _jsx(PropertyLine, { ...props, children: _jsx(SkeletonSelector, { ...props }) });
|
|
12
|
+
export const ClusteredLightContainerSelectorPropertyLine = (props) => (_jsx(PropertyLine, { ...props, children: _jsx(ClusteredLightContainerSelector, { ...props }) }));
|
|
11
13
|
//# sourceMappingURL=entitySelectorPropertyLine.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"entitySelectorPropertyLine.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/fluent/hoc/propertyLines/entitySelectorPropertyLine.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"entitySelectorPropertyLine.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/fluent/hoc/propertyLines/entitySelectorPropertyLine.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,+BAA+B,EAAE,MAAM,kDAAkD,CAAC;AACnG,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AACrE,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAC7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AACrE,OAAO,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AACnE,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAQ9C,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,KAAoC,EAAE,EAAE,CAAC,KAAC,YAAY,OAAK,KAAK,EAAE,QAAQ,EAAE,KAAC,YAAY,OAAK,KAAK,GAAI,GAAI,CAAC;AACrJ,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAAC,KAAwC,EAAE,EAAE,CAAC,KAAC,YAAY,OAAK,KAAK,EAAE,QAAQ,EAAE,KAAC,gBAAgB,OAAK,KAAK,GAAI,GAAI,CAAC;AACjK,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,KAAuC,EAAE,EAAE,CAAC,KAAC,YAAY,OAAK,KAAK,EAAE,QAAQ,EAAE,KAAC,eAAe,OAAK,KAAK,GAAI,GAAI,CAAC;AAC9J,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAAC,KAAwC,EAAE,EAAE,CAAC,KAAC,YAAY,OAAK,KAAK,EAAE,QAAQ,EAAE,KAAC,gBAAgB,OAAK,KAAK,GAAI,GAAI,CAAC;AACjK,MAAM,CAAC,MAAM,2CAA2C,GAAG,CAAC,KAAuD,EAAE,EAAE,CAAC,CACpH,KAAC,YAAY,OAAK,KAAK,EAAE,QAAQ,EAAE,KAAC,+BAA+B,OAAK,KAAK,GAAI,GAAI,CACxF,CAAC","sourcesContent":["import type { Skeleton } from \"core/Bones/skeleton\";\r\nimport type { ClusteredLightContainer } from \"core/Lights/Clustered/clusteredLightContainer\";\r\nimport type { Material } from \"core/Materials/material\";\r\nimport type { BaseTexture } from \"core/Materials/Textures/baseTexture\";\r\nimport type { Node } from \"core/node\";\r\nimport type { Nullable } from \"core/types\";\r\nimport type { ClusteredLightContainerSelectorProps } from \"../../primitives/clusteredLightContainerSelector\";\r\nimport type { MaterialSelectorProps } from \"../../primitives/materialSelector\";\r\nimport type { NodeSelectorProps } from \"../../primitives/nodeSelector\";\r\nimport type { SkeletonSelectorProps } from \"../../primitives/skeletonSelector\";\r\nimport type { TextureSelectorProps } from \"../../primitives/textureSelector\";\r\nimport type { PropertyLineProps } from \"./propertyLine\";\r\n\r\nimport { ClusteredLightContainerSelector } from \"../../primitives/clusteredLightContainerSelector\";\r\nimport { MaterialSelector } from \"../../primitives/materialSelector\";\r\nimport { NodeSelector } from \"../../primitives/nodeSelector\";\r\nimport { SkeletonSelector } from \"../../primitives/skeletonSelector\";\r\nimport { TextureSelector } from \"../../primitives/textureSelector\";\r\nimport { PropertyLine } from \"./propertyLine\";\r\n\r\ntype NodeSelectorPropertyLineProps = PropertyLineProps<Nullable<Node>> & NodeSelectorProps;\r\ntype MaterialSelectorPropertyLineProps = PropertyLineProps<Nullable<Material>> & MaterialSelectorProps;\r\ntype TextureSelectorPropertyLineProps = PropertyLineProps<Nullable<BaseTexture>> & TextureSelectorProps;\r\ntype SkeletonSelectorPropertyLineProps = PropertyLineProps<Nullable<Skeleton>> & SkeletonSelectorProps;\r\ntype ClusteredLightContainerSelectorPropertyLineProps = PropertyLineProps<Nullable<ClusteredLightContainer>> & ClusteredLightContainerSelectorProps;\r\n\r\nexport const NodeSelectorPropertyLine = (props: NodeSelectorPropertyLineProps) => <PropertyLine {...props} children={<NodeSelector {...props} />} />;\r\nexport const MaterialSelectorPropertyLine = (props: MaterialSelectorPropertyLineProps) => <PropertyLine {...props} children={<MaterialSelector {...props} />} />;\r\nexport const TextureSelectorPropertyLine = (props: TextureSelectorPropertyLineProps) => <PropertyLine {...props} children={<TextureSelector {...props} />} />;\r\nexport const SkeletonSelectorPropertyLine = (props: SkeletonSelectorPropertyLineProps) => <PropertyLine {...props} children={<SkeletonSelector {...props} />} />;\r\nexport const ClusteredLightContainerSelectorPropertyLine = (props: ClusteredLightContainerSelectorPropertyLineProps) => (\r\n <PropertyLine {...props} children={<ClusteredLightContainerSelector {...props} />} />\r\n);\r\n"]}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import type { FunctionComponent } from "react";
|
|
2
|
+
import type { Scene } from "@onerjs/core/scene.js";
|
|
3
|
+
import type { Nullable } from "@onerjs/core/types.js";
|
|
4
|
+
import type { PrimitiveProps } from "./primitive.js";
|
|
5
|
+
import type { EntitySelectorProps } from "./entitySelector.js";
|
|
6
|
+
import { ClusteredLightContainer } from "@onerjs/core/Lights/Clustered/clusteredLightContainer.js";
|
|
7
|
+
export type ClusteredLightContainerSelectorProps = PrimitiveProps<Nullable<ClusteredLightContainer>> & {
|
|
8
|
+
/**
|
|
9
|
+
* The scene to get clustered light containers from
|
|
10
|
+
*/
|
|
11
|
+
scene: Scene;
|
|
12
|
+
/**
|
|
13
|
+
* Optional filter function to filter which clustered light containers are shown
|
|
14
|
+
*/
|
|
15
|
+
filter?: (container: ClusteredLightContainer) => boolean;
|
|
16
|
+
} & Omit<EntitySelectorProps<ClusteredLightContainer>, "getEntities" | "getName">;
|
|
17
|
+
/**
|
|
18
|
+
* A primitive component with a ComboBox for selecting from existing scene clustered light containers.
|
|
19
|
+
* @param props ClusteredLightContainerSelectorProps
|
|
20
|
+
* @returns ClusteredLightContainerSelector component
|
|
21
|
+
*/
|
|
22
|
+
export declare const ClusteredLightContainerSelector: FunctionComponent<ClusteredLightContainerSelectorProps>;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useCallback } from "react";
|
|
3
|
+
import { EntitySelector } from "./entitySelector.js";
|
|
4
|
+
import { ClusteredLightContainer } from "@onerjs/core/Lights/Clustered/clusteredLightContainer.js";
|
|
5
|
+
/**
|
|
6
|
+
* A primitive component with a ComboBox for selecting from existing scene clustered light containers.
|
|
7
|
+
* @param props ClusteredLightContainerSelectorProps
|
|
8
|
+
* @returns ClusteredLightContainerSelector component
|
|
9
|
+
*/
|
|
10
|
+
export const ClusteredLightContainerSelector = (props) => {
|
|
11
|
+
ClusteredLightContainerSelector.displayName = "ClusteredLightContainerSelector";
|
|
12
|
+
const { scene, ...rest } = props;
|
|
13
|
+
const getClusteredLightContainers = useCallback(() => scene.lights.filter((light) => light instanceof ClusteredLightContainer), [scene.lights]);
|
|
14
|
+
const getName = useCallback((container) => container.name, []);
|
|
15
|
+
return _jsx(EntitySelector, { ...rest, getEntities: getClusteredLightContainers, getName: getName });
|
|
16
|
+
};
|
|
17
|
+
//# sourceMappingURL=clusteredLightContainerSelector.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"clusteredLightContainerSelector.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/clusteredLightContainerSelector.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACpC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,OAAO,EAAE,uBAAuB,EAAE,iEAAsD;AAaxF;;;;GAIG;AACH,MAAM,CAAC,MAAM,+BAA+B,GAA4D,CAAC,KAAK,EAAE,EAAE;IAC9G,+BAA+B,CAAC,WAAW,GAAG,iCAAiC,CAAC;IAChF,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAEjC,MAAM,2BAA2B,GAAG,WAAW,CAC3C,GAAG,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,KAAK,EAAoC,EAAE,CAAC,KAAK,YAAY,uBAAuB,CAAC,EAChH,CAAC,KAAK,CAAC,MAAM,CAAC,CACjB,CAAC;IACF,MAAM,OAAO,GAAG,WAAW,CAAC,CAAC,SAAkC,EAAE,EAAE,CAAC,SAAS,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;IAExF,OAAO,KAAC,cAAc,OAAK,IAAI,EAAE,WAAW,EAAE,2BAA2B,EAAE,OAAO,EAAE,OAAO,GAAI,CAAC;AACpG,CAAC,CAAC","sourcesContent":["import type { FunctionComponent } from \"react\";\r\nimport type { Scene } from \"core/scene\";\r\nimport type { Nullable } from \"core/types\";\r\nimport type { PrimitiveProps } from \"./primitive\";\r\nimport type { EntitySelectorProps } from \"./entitySelector\";\r\n\r\nimport { useCallback } from \"react\";\r\nimport { EntitySelector } from \"./entitySelector\";\r\n\r\nimport { ClusteredLightContainer } from \"core/Lights/Clustered/clusteredLightContainer\";\r\n\r\nexport type ClusteredLightContainerSelectorProps = PrimitiveProps<Nullable<ClusteredLightContainer>> & {\r\n /**\r\n * The scene to get clustered light containers from\r\n */\r\n scene: Scene;\r\n /**\r\n * Optional filter function to filter which clustered light containers are shown\r\n */\r\n filter?: (container: ClusteredLightContainer) => boolean;\r\n} & Omit<EntitySelectorProps<ClusteredLightContainer>, \"getEntities\" | \"getName\">;\r\n\r\n/**\r\n * A primitive component with a ComboBox for selecting from existing scene clustered light containers.\r\n * @param props ClusteredLightContainerSelectorProps\r\n * @returns ClusteredLightContainerSelector component\r\n */\r\nexport const ClusteredLightContainerSelector: FunctionComponent<ClusteredLightContainerSelectorProps> = (props) => {\r\n ClusteredLightContainerSelector.displayName = \"ClusteredLightContainerSelector\";\r\n const { scene, ...rest } = props;\r\n\r\n const getClusteredLightContainers = useCallback(\r\n () => scene.lights.filter((light): light is ClusteredLightContainer => light instanceof ClusteredLightContainer),\r\n [scene.lights]\r\n );\r\n const getName = useCallback((container: ClusteredLightContainer) => container.name, []);\r\n\r\n return <EntitySelector {...rest} getEntities={getClusteredLightContainers} getName={getName} />;\r\n};\r\n"]}
|
|
@@ -26,7 +26,7 @@ export type EntitySelectorProps<T extends Entity> = (PrimitiveProps<Nullable<T>>
|
|
|
26
26
|
/**
|
|
27
27
|
* Optional default value that enables clearing the current linked entity
|
|
28
28
|
*/
|
|
29
|
-
defaultValue?: T
|
|
29
|
+
defaultValue?: Nullable<T>;
|
|
30
30
|
};
|
|
31
31
|
/**
|
|
32
32
|
* A generic primitive component with a ComboBox for selecting from a list of entities.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"entitySelector.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/entitySelector.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Nullable } from \"core/types\";\r\nimport type { ImmutablePrimitiveProps, PrimitiveProps } from \"./primitive\";\r\n\r\nimport { makeStyles, tokens, Tooltip } from \"@fluentui/react-components\";\r\nimport { LinkDismissRegular, LinkEditRegular } from \"@fluentui/react-icons\";\r\nimport { useEffect, useMemo, useRef, useState } from \"react\";\r\n\r\nimport { Button } from \"./button\";\r\nimport { ComboBox } from \"./comboBox\";\r\nimport { Link } from \"./link\";\r\nimport { useImpulse } from \"../hooks/transientStateHooks\";\r\n\r\ntype Entity = { uniqueId: number };\r\n\r\n/**\r\n * Props for the EntitySelector component\r\n */\r\nexport type EntitySelectorProps<T extends Entity> = (PrimitiveProps<Nullable<T>> | ImmutablePrimitiveProps<Nullable<T>>) & {\r\n /**\r\n * Function to get the list of entities to choose from\r\n */\r\n getEntities: () => T[];\r\n /**\r\n * Function to get the display name from an entity\r\n */\r\n getName: (entity: T) => string;\r\n /**\r\n * Optional filter function to filter which entities are shown\r\n */\r\n filter?: (entity: T) => boolean;\r\n /**\r\n * Callback when the entity link is clicked\r\n */\r\n onLink: (entity: T) => void;\r\n /**\r\n * Optional default value that enables clearing the current linked entity\r\n */\r\n defaultValue?: T
|
|
1
|
+
{"version":3,"file":"entitySelector.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/entitySelector.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Nullable } from \"core/types\";\r\nimport type { ImmutablePrimitiveProps, PrimitiveProps } from \"./primitive\";\r\n\r\nimport { makeStyles, tokens, Tooltip } from \"@fluentui/react-components\";\r\nimport { LinkDismissRegular, LinkEditRegular } from \"@fluentui/react-icons\";\r\nimport { useEffect, useMemo, useRef, useState } from \"react\";\r\n\r\nimport { Button } from \"./button\";\r\nimport { ComboBox } from \"./comboBox\";\r\nimport { Link } from \"./link\";\r\nimport { useImpulse } from \"../hooks/transientStateHooks\";\r\n\r\ntype Entity = { uniqueId: number };\r\n\r\n/**\r\n * Props for the EntitySelector component\r\n */\r\nexport type EntitySelectorProps<T extends Entity> = (PrimitiveProps<Nullable<T>> | ImmutablePrimitiveProps<Nullable<T>>) & {\r\n /**\r\n * Function to get the list of entities to choose from\r\n */\r\n getEntities: () => T[];\r\n /**\r\n * Function to get the display name from an entity\r\n */\r\n getName: (entity: T) => string;\r\n /**\r\n * Optional filter function to filter which entities are shown\r\n */\r\n filter?: (entity: T) => boolean;\r\n /**\r\n * Callback when the entity link is clicked\r\n */\r\n onLink: (entity: T) => void;\r\n /**\r\n * Optional default value that enables clearing the current linked entity\r\n */\r\n defaultValue?: Nullable<T>;\r\n};\r\n\r\nconst useStyles = makeStyles({\r\n linkDiv: {\r\n display: \"flex\",\r\n flexDirection: \"row\",\r\n alignItems: \"center\",\r\n gap: tokens.spacingHorizontalS,\r\n minWidth: 0,\r\n overflow: \"hidden\",\r\n },\r\n link: {\r\n minWidth: 0,\r\n overflow: \"hidden\",\r\n textOverflow: \"ellipsis\",\r\n whiteSpace: \"nowrap\",\r\n },\r\n});\r\n\r\n/**\r\n * A generic primitive component with a ComboBox for selecting from a list of entities.\r\n * Supports entities with duplicate names by using uniqueId for identity.\r\n * @param props ChooseEntityProps\r\n * @returns EntitySelector component\r\n */\r\nexport function EntitySelector<T extends Entity>(props: EntitySelectorProps<T>): JSX.Element {\r\n const { value, onLink, getEntities, getName, filter, defaultValue } = props;\r\n\r\n const onChange = (props as PrimitiveProps<Nullable<T>>).onChange as PrimitiveProps<Nullable<T>>[\"onChange\"] | undefined;\r\n\r\n const classes = useStyles();\r\n\r\n const comboBoxRef = useRef<HTMLInputElement>(null);\r\n\r\n // Build options with uniqueId as key\r\n const options = useMemo(() => {\r\n return getEntities()\r\n .filter((e) => e.uniqueId !== undefined && (!filter || filter(e)))\r\n .map((entity) => ({\r\n label: getName(entity)?.toString() || \"\",\r\n value: entity.uniqueId.toString(),\r\n }))\r\n .sort((a, b) => a.label.localeCompare(b.label));\r\n }, [getEntities, getName, filter]);\r\n\r\n const [isEditing, setIsEditing] = useState(false);\r\n\r\n const [enteringEditMode, pulseEnteringEditMode] = useImpulse<true>();\r\n\r\n useEffect(() => {\r\n if (enteringEditMode) {\r\n comboBoxRef.current?.focus();\r\n }\r\n }, [enteringEditMode]);\r\n\r\n const handleEntitySelect = (key: string) => {\r\n const entity = getEntities().find((e) => e.uniqueId.toString() === key);\r\n onChange?.(entity ?? null);\r\n setIsEditing(false);\r\n };\r\n\r\n // Get current entity key for display\r\n const currentKey = value ? value.uniqueId.toString() : \"\";\r\n\r\n if (value && !isEditing) {\r\n // If there is a value and we are not editing, show the link view\r\n return (\r\n <div className={classes.linkDiv}>\r\n <Tooltip content={getName(value)} relationship=\"label\">\r\n <Link className={classes.link} value={getName(value)} onLink={() => onLink(value)} />\r\n </Tooltip>\r\n {/* Only allow changing the linked entity if an onChange handler is provided */}\r\n {onChange &&\r\n (defaultValue !== undefined ? (\r\n // If the defaultValue is specified, then allow resetting to the default\r\n <Tooltip content=\"Unlink\" relationship=\"label\">\r\n <Button\r\n icon={LinkDismissRegular}\r\n onClick={() => {\r\n pulseEnteringEditMode(true);\r\n onChange(defaultValue);\r\n }}\r\n />\r\n </Tooltip>\r\n ) : (\r\n // Otherwise, just allow editing to a new value\r\n <Tooltip content=\"Edit Link\" relationship=\"label\">\r\n <Button\r\n icon={LinkEditRegular}\r\n onClick={() => {\r\n pulseEnteringEditMode(true);\r\n setIsEditing(true);\r\n }}\r\n />\r\n </Tooltip>\r\n ))}\r\n </div>\r\n );\r\n } else {\r\n // Otherwise, show the ComboBox for selection\r\n return <ComboBox ref={comboBoxRef} defaultOpen={enteringEditMode} label=\"\" options={options} value={currentKey} onChange={handleEntitySelect} />;\r\n }\r\n}\r\nEntitySelector.displayName = \"EntitySelector\";\r\n"]}
|