[Fluent] Add boundproperty, add dropdownpropertyline (#16788)

Co-authored-by: Georgina <[email protected]>

Author: georginahalpern

packages/dev/inspector-v2/src/components/properties/boundPropertyLine.tsx

@@ -0,0 +1,18 @@
+import { useInterceptObservable } from "../../hooks/instrumentationHooks";
+import { useObservableState } from "../../hooks/observableHooks";
+import type { ComponentType } from "react";
+import type { BaseComponentProps } from "shared-ui-components/fluent/hoc/propertyLine";
+
+export type BoundPropertyProps<T, P extends object> = Omit<P, "value" | "onChange"> & {
+    component: ComponentType<P & BaseComponentProps<T>>;
+    target: any;
+    propertyKey: PropertyKey;
+};
+
+export function BoundPropertyLine<T, P extends object>(props: BoundPropertyProps<T, P>) {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    const { target, propertyKey, component: Component, ...rest } = props;
+    const value = useObservableState(() => target[propertyKey], useInterceptObservable("property", target, propertyKey));
+
+    return <Component {...(rest as P)} value={value} onChange={(val: T) => (target[propertyKey] = val)} />;
+}

packages/dev/inspector-v2/src/components/properties/meshOutlineOverlayProperties.tsx

@@ -9,6 +9,7 @@ import { Color3PropertyLine } from "shared-ui-components/fluent/hoc/colorPropert
 import { SwitchPropertyLine } from "shared-ui-components/fluent/hoc/switchPropertyLine";
 import { useInterceptObservable } from "../../hooks/instrumentationHooks";
 import { useObservableState } from "../../hooks/observableHooks";
+import { BoundPropertyLine } from "./boundPropertyLine";
 
 type Color3Keys<T> = { [P in keyof T]: T[P] extends Color3 ? P : never }[keyof T];
 
@@ -25,16 +26,15 @@ export const MeshOutlineOverlayProperties: FunctionComponent<{ mesh: Mesh }> = (
     const { mesh } = props;
 
     // There is no observable for colors, so we use an interceptor to listen for changes.
-    const renderOverlay = useObservableState(() => mesh.renderOverlay, useInterceptObservable("property", mesh, "renderOverlay"));
     const overlayColor = useColor3Property(mesh, "overlayColor");
 
     const renderOutline = useObservableState(() => mesh.renderOutline, useInterceptObservable("property", mesh, "renderOutline"));
     const outlineColor = useColor3Property(mesh, "outlineColor");
 
     return (
         <>
-            <SwitchPropertyLine key="RenderOverlay" label="Render Overlay" value={renderOverlay} onChange={(checked) => (mesh.renderOverlay = checked)} />
-            <Collapse visible={renderOverlay}>
+            <BoundPropertyLine component={SwitchPropertyLine} key="RenderOverlay" label="Render Overlay" target={mesh} propertyKey="renderOverlay" />
+            <Collapse visible={mesh.renderOverlay}>
                 <Color3PropertyLine
                     key="OverlayColor"
                     label="Overlay Color"

packages/dev/sharedUiComponents/src/fluent/hoc/dropdownPropertyLine.tsx

@@ -0,0 +1,18 @@
+import { Dropdown } from "../primitives/dropdown";
+import type { DropdownProps } from "../primitives/dropdown";
+import { PropertyLine } from "./propertyLine";
+import type { PropertyLineProps } from "./propertyLine";
+import type { FunctionComponent } from "react";
+
+/**
+ * Wraps a dropdown in a property line
+ * @param props - PropertyLineProps and DropdownProps
+ * @returns property-line wrapped dropdown
+ */
+export const DropdownPropertyLine: FunctionComponent<PropertyLineProps & DropdownProps> = (props) => {
+    return (
+        <PropertyLine {...props}>
+            <Dropdown {...props} />
+        </PropertyLine>
+    );
+};

packages/dev/sharedUiComponents/src/fluent/primitives/dropdown.tsx

@@ -1,5 +1,6 @@
 import { Dropdown as FluentDropdown, makeStyles, Option } from "@fluentui/react-components";
 import type { FunctionComponent } from "react";
+import type { BaseComponentProps } from "../hoc/propertyLine";
 
 const useDropdownStyles = makeStyles({
     dropdownOption: {
@@ -20,7 +21,9 @@ export type DropdownOption = {
     value: string | number;
 };
 
-type DropdownProps = { options: readonly DropdownOption[]; onSelect: (o: string) => void; defaultValue?: DropdownOption };
+export type DropdownProps = BaseComponentProps<DropdownOption> & {
+    options: readonly DropdownOption[];
+};
 
 /**
  * Renders a fluent UI dropdown with a calback for selection and a required default value
@@ -33,10 +36,10 @@ export const Dropdown: FunctionComponent<DropdownProps> = (props) => {
         <FluentDropdown
             className={classes.dropdownOption}
             onOptionSelect={(evt, data) => {
-                data.optionValue != undefined && props.onSelect(data.optionValue);
+                data.optionValue != undefined && props.onChange(props.options.find((o) => o.value.toString() === data.optionValue) as DropdownOption);
             }}
-            defaultValue={props.defaultValue?.label}
-            defaultSelectedOptions={props.defaultValue && [props.defaultValue.value.toString()]}
+            defaultValue={props.value.label}
+            defaultSelectedOptions={[props.value.value.toString()]}
         >
             {props.options.map((option: DropdownOption) => (
                 <Option className={classes.optionsLine} key={option.label} value={option.value.toString()} disabled={false}>

packages/dev/sharedUiComponents/src/lines/optionsLineComponent.tsx

@@ -6,6 +6,7 @@ import type { IInspectableOptions } from "core/Misc/iInspectable";
 import copyIcon from "../imgs/copy.svg";
 import { PropertyLine } from "../fluent/hoc/propertyLine";
 import { Dropdown } from "../fluent/primitives/dropdown";
+import type { DropdownOption } from "../fluent/primitives/dropdown";
 import { ToolContext } from "../fluent/hoc/fluentToolWrapper";
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -124,10 +125,10 @@ export class OptionsLine extends React.Component<IOptionsLineProps, { value: num
             <PropertyLine label={this.props.label} onCopy={() => this.onCopyClickStr()}>
                 <Dropdown
                     options={this.props.options}
-                    onSelect={(val: string) => {
-                        val !== undefined && this.updateValue(val);
+                    onChange={(val: DropdownOption) => {
+                        val.value !== undefined && this.updateValue(val.value.toString());
                     }}
-                    defaultValue={this.props.options.find((o) => o.value === this.state.value || o.selected)}
+                    value={this.props.options.find((o) => o.value === this.state.value || o.selected) || this.props.options[0]}
                 />
             </PropertyLine>
         );