fix readonly mode for operator io

voxel51 · Jun 26, 2023 · 0259ef9 · 0259ef9
1 parent 2ecd2f1
commit 0259ef9
Show file tree

Hide file tree

Showing 10 changed files with 42 additions and 17 deletions.
diff --git a/app/packages/core/src/plugins/OperatorIO/utils/index.ts b/app/packages/core/src/plugins/OperatorIO/utils/index.ts
@@ -88,54 +88,64 @@ function getComponentByView(property) {
   }
 }
 
-function getSchema(property, options?) {
+function getSchema(property, options = {}) {
   const { defaultValue, required } = property;
   const typeName = getTypeName(property);
   const type = operatorTypeToJSONSchemaType[typeName];
+  const readOnly =
+    typeof options.readOnly === "boolean" ? options.readOnly : options.isOutput;
   const schema = {
     type,
-    view: { readOnly: options?.isOutput, ...getViewSchema(property) },
+    view: { readOnly, ...getViewSchema(property) },
     default: defaultValue,
     required,
   };
   const component = getComponent(property, options);
   schema.view.component = component;
 
+  const computedOptions = { ...options, readOnly: schema.view.readOnly };
+
   if (typeName === "Object") {
-    schema.properties = getPropertiesSchema(property, options);
+    schema.properties = getPropertiesSchema(property, computedOptions);
   }
 
   if (typeName === "List") {
-    schema.items = getSchema({ type: property.type.elementType }, options);
+    schema.items = getSchema(
+      { type: property.type.elementType },
+      computedOptions
+    );
     schema.minItems = property.type.minItems;
     schema.maxItems = property.type.maxItems;
     if (schema?.view?.items) {
       schema.view.items.component = getComponent(
         { type: property.type.elementType, view: schema?.view?.items },
-        options
+        computedOptions
       );
     }
   }
 
   if (typeName === "OneOf") {
     schema.types = property.type.types.map((type) =>
-      getSchema({ type }, options)
+      getSchema({ type }, computedOptions)
     );
   }
 
   // todo: use "prefixItems","minItems","maxItems", "items: false" for proper
   //  json schema validation support
   if (typeName === "Tuple") {
     schema.items = property.type.items.map((type) =>
-      getSchema({ type }, options)
+      getSchema({ type }, computedOptions)
     );
   }
 
   if (typeName === "Map") {
-    schema.additionalProperties = getSchema({
-      type: property.type.valueType,
-      view: property?.view?.value,
-    });
+    schema.additionalProperties = getSchema(
+      {
+        type: property.type.valueType,
+        view: property?.view?.value,
+      },
+      computedOptions
+    );
   }
 
   return schema;
@@ -153,6 +163,12 @@ function getViewSchema(property) {
     view = { ...view, choices };
   }
   view = { ...(view?.options || {}), ...view };
+  if (
+    typeof view.read_only === "boolean" &&
+    typeof view.readOnly !== "boolean"
+  ) {
+    view.readOnly = view.read_only;
+  }
   return view;
 }
 

diff --git a/app/packages/core/src/plugins/SchemaIO/components/AutocompleteView.tsx b/app/packages/core/src/plugins/SchemaIO/components/AutocompleteView.tsx
@@ -7,13 +7,14 @@ import { getComponentProps } from "../utils";
 export default function AutocompleteView(props) {
   const { onChange, path, schema, data } = props;
   const { view = {} } = schema;
-  const { choices = [] } = view;
+  const { choices = [], readOnly } = view;
 
   const multiple = schema.type === "array";
 
   return (
     <FieldWrapper {...props}>
       <Autocomplete
+        disabled={readOnly}
         autoHighlight
         clearOnBlur={multiple}
         defaultValue={getDefaultValue(data ?? schema?.default, choices)}

diff --git a/app/packages/core/src/plugins/SchemaIO/components/CheckboxView.tsx b/app/packages/core/src/plugins/SchemaIO/components/CheckboxView.tsx
@@ -11,6 +11,7 @@ export default function CheckboxView(props) {
     <FormControlLabel
       control={
         <Checkbox
+          disabled={schema.view?.readOnly}
           autoFocus={autoFocus(props)}
           defaultChecked={data === true || schema.default === true}
           onChange={(e, value) => onChange(path, value)}

diff --git a/app/packages/core/src/plugins/SchemaIO/components/CodeView.tsx b/app/packages/core/src/plugins/SchemaIO/components/CodeView.tsx
@@ -9,7 +9,7 @@ export default function CodeView(props) {
   const { mode } = useColorScheme();
   const { onChange, path, schema, data } = props;
   const { default: defaultValue, view = {} } = schema;
-  const { language, read_only: readOnly } = view;
+  const { language, readOnly } = view;
   const src = data ?? defaultValue;
   let height = view.height ?? 250;
   if (view.height === "auto") {

diff --git a/app/packages/core/src/plugins/SchemaIO/components/ColorView.tsx b/app/packages/core/src/plugins/SchemaIO/components/ColorView.tsx
@@ -9,7 +9,7 @@ import { getComponentProps } from "../utils";
 export default function ColorView(props) {
   const { onChange, path, schema, data } = props;
   const { view = {} } = schema;
-  const { compact, variant } = view;
+  const { compact, variant, readOnly } = view;
   const [open, setOpen] = useState(false);
   const [color, setColor] = useState(data ?? defaultColor);
   const [anchor, setAnchor] = React.useState<null | HTMLElement>(null);
@@ -32,6 +32,7 @@ export default function ColorView(props) {
       >
         <Box
           onClick={(e) => {
+            if (readOnly) return;
             setAnchor(e.currentTarget);
             setOpen(!open);
           }}
@@ -52,6 +53,7 @@ export default function ColorView(props) {
             onChange={(e) => {
               setColor({ hex: e.target.value });
             }}
+            disabled={readOnly}
             {...getComponentProps(props, "field")}
           />
         )}

diff --git a/app/packages/core/src/plugins/SchemaIO/components/DropdownView.tsx b/app/packages/core/src/plugins/SchemaIO/components/DropdownView.tsx
@@ -6,7 +6,7 @@ import { getComponentProps } from "../utils";
 
 export default function DropdownView(props) {
   const { onChange, schema, path, data } = props;
-  const { view = {}, type } = schema;
+  const { view = {}, type, placeholder = "", readOnly } = schema;
   const { choices } = view;
 
   const multiple = type === "array";
@@ -19,14 +19,15 @@ export default function DropdownView(props) {
   return (
     <FieldWrapper {...props}>
       <Select
+        disabled={readOnly}
         autoFocus={autoFocus(props)}
         defaultValue={data ?? schema.default ?? (multiple ? [] : "")}
         size="small"
         fullWidth
         displayEmpty
         renderValue={(value) => {
           if (value?.length === 0) {
-            return view?.placeholder || "";
+            return placeholder;
           }
           if (multiple) {
             return value.map((item) => choiceLabels[item] || item).join(", ");

diff --git a/app/packages/core/src/plugins/SchemaIO/components/RadioView.tsx b/app/packages/core/src/plugins/SchemaIO/components/RadioView.tsx
@@ -12,7 +12,7 @@ import { autoFocus, getComponentProps } from "../utils";
 export default function RadioView(props: RadioGroupProps) {
   const { schema, onChange, path, data } = props;
   const { view = {} } = schema;
-  const { choices, label, description, orientation } = view;
+  const { choices, label, description, orientation, readOnly } = view;
   return (
     <FormControl {...getComponentProps(props, "container")}>
       {(label || description) && (
@@ -38,6 +38,7 @@ export default function RadioView(props: RadioGroupProps) {
             value={value}
             control={
               <Radio
+                disabled={readOnly}
                 autoFocus={autoFocus(props)}
                 {...getComponentProps(props, "radio")}
               />

diff --git a/app/packages/core/src/plugins/SchemaIO/components/SliderView.tsx b/app/packages/core/src/plugins/SchemaIO/components/SliderView.tsx
@@ -17,6 +17,7 @@ export default function SliderView(props) {
   return (
     <FieldWrapper {...props}>
       <Slider
+        disabled={schema.view?.readOnly}
         valueLabelDisplay="auto"
         value={data ?? schema.default}
         onChange={(e, value) => {

diff --git a/app/packages/core/src/plugins/SchemaIO/components/SwitchView.tsx b/app/packages/core/src/plugins/SchemaIO/components/SwitchView.tsx
@@ -10,6 +10,7 @@ export default function SwitchView(props) {
     <FormControlLabel
       control={
         <Switch
+          disabled={schema.view?.readOnly}
           autoFocus={autoFocus(props)}
           defaultChecked={data === true || schema.default === true}
           {...getComponentProps(props, "switch")}

diff --git a/app/packages/core/src/plugins/SchemaIO/components/TextFieldView.tsx b/app/packages/core/src/plugins/SchemaIO/components/TextFieldView.tsx
@@ -11,6 +11,7 @@ export default function TextFieldView(props) {
   return (
     <FieldWrapper {...props}>
       <TextField
+        disabled={view.readOnly}
         autoFocus={autoFocus(props)}
         defaultValue={data ?? schema.default}
         size="small"