@dxos/react-ui-form 0.8.2-main.36232bc → 0.8.2-main.5885341

package/src/components/Form/RefField.tsx

@@ -0,0 +1,152 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useEffect, useState } from 'react';
+
+import {
+  type AST,
+  Expando,
+  getTypeAnnotation,
+  Ref,
+  ReferenceAnnotationId,
+  type ReferenceAnnotationValue,
+  type TypeAnnotation,
+} from '@dxos/echo-schema';
+import { findAnnotation, type SimpleType } from '@dxos/effect';
+import { DXN } from '@dxos/keys';
+import { refFromDXN } from '@dxos/live-object';
+import { log } from '@dxos/log';
+import { type MaybePromise } from '@dxos/util';
+
+import { SelectInput, TextInput } from './Defaults';
+import { type FormInputStateProps } from './FormContext';
+
+export type QueryRefOptions = (type: TypeAnnotation) => MaybePromise<{ dxn: DXN; label?: string }[]>;
+
+type RefFieldProps = {
+  ast: AST.AST;
+  type: SimpleType;
+  label: string;
+  readonly?: boolean;
+  placeholder?: string;
+  inline?: boolean;
+  onQueryRefOptions?: QueryRefOptions;
+  inputProps: FormInputStateProps;
+};
+
+export const RefField = ({
+  ast,
+  type,
+  label,
+  readonly,
+  placeholder,
+  inline,
+  onQueryRefOptions,
+  inputProps,
+}: RefFieldProps) => {
+  const { getValue, onValueChange, ...restInputProps } = inputProps;
+  const refTypeInfo = findAnnotation<ReferenceAnnotationValue>(ast, ReferenceAnnotationId);
+  const [refOptions, setRefOptions] = useState<Array<{ value: string; label?: string }>>([]);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (!refTypeInfo || !onQueryRefOptions) {
+      return;
+    }
+
+    const fetchOptions = async () => {
+      setLoading(true);
+      try {
+        const options = await onQueryRefOptions(refTypeInfo);
+        setRefOptions(
+          options.map((option) => ({
+            label: option.label,
+            value: option.dxn.toString(),
+          })),
+        );
+      } catch (error) {
+        log.error('Failed to fetch ref options:', error);
+        setRefOptions([]);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    void fetchOptions();
+  }, [refTypeInfo, onQueryRefOptions]);
+
+  if (!refTypeInfo) {
+    return null;
+  }
+
+  // If ref type is expando, fall back to taking a DXN in string format.
+  if (refTypeInfo.typename === getTypeAnnotation(Expando)?.typename || !onQueryRefOptions) {
+    const handleOnValueChange = (_type: any, dxnString: string) => {
+      const dxn = DXN.tryParse(dxnString);
+      if (dxn) {
+        onValueChange?.('object', refFromDXN(dxn));
+      } else if (dxnString === '') {
+        onValueChange?.('object', undefined);
+      } else {
+        onValueChange?.('string', dxnString);
+      }
+    };
+
+    const handleGetValue = () => {
+      const formValue = getValue();
+      if (typeof formValue === 'string') {
+        return formValue;
+      }
+      if (Ref.isRef(formValue)) {
+        return formValue.dxn.toString();
+      }
+
+      return undefined;
+    };
+
+    return (
+      <TextInput
+        type={type}
+        label={label}
+        disabled={readonly}
+        placeholder={placeholder}
+        inputOnly={inline}
+        getValue={handleGetValue as <V>() => V | undefined}
+        onValueChange={handleOnValueChange}
+        {...restInputProps}
+      />
+    );
+  }
+
+  const handleGetValue = () => {
+    const formValue = getValue();
+
+    if (Ref.isRef(formValue)) {
+      return formValue.dxn.toString();
+    }
+
+    return undefined;
+  };
+
+  const handleValueChanged = (_type: any, dxnString: string) => {
+    const dxn = DXN.parse(dxnString);
+    const ref = refFromDXN(dxn);
+
+    onValueChange('object', ref);
+  };
+
+  return (
+    <SelectInput
+      type={type}
+      label={label}
+      disabled={readonly || loading}
+      placeholder={loading ? 'Loading options...' : placeholder}
+      inputOnly={inline}
+      getValue={handleGetValue as <V>() => V | undefined}
+      onValueChange={handleValueChanged}
+      options={refOptions}
+      {...restInputProps}
+    />
+  );
+};

package/src/components/ViewEditor/ViewEditor.tsx

@@ -139,15 +139,16 @@ export const ViewEditor = ({
   );
 
   return (
-    <div role='none' className={mx('flex flex-col w-full divide-y divide-separator', classNames)}>
+    <div role='none' className={mx('grid grid-rows-[1fr_1fr] min-bs-0', classNames)}>
       <Form<ViewMetaType>
         autoSave
         schema={ViewMetaSchema}
         values={viewValues}
         onSave={schema.readonly ? undefined : handleUpdate}
+        classNames='min-bs-0 overflow-y-auto'
       />
 
-      <div>
+      <div role='none' className='border-bs border-separator min-bs-0 overflow-y-auto'>
         {/* TODO(burdon): Clean up common form ux. */}
         <div role='none' className='p-2'>
           <label className={mx(inputTextLabel)}>{t('fields label')}</label>