Props controls: Add optional validator function to Object control

addons/docs/src/frameworks/common/inferControls.ts

@@ -13,7 +13,10 @@ const inferControl = (argType: ArgType): Control => {
     case 'array': {
       const { value } = type;
       if (value?.name && ['object', 'other'].includes(value.name)) {
-        return { type: 'object' };
+        return {
+          type: 'object',
+          validator: (obj: any) => Array.isArray(obj),
+        };
       }
       return { type: 'array' };
     }

lib/components/src/controls/Object.tsx

@@ -11,7 +11,7 @@ const parse = (value: string) => {
 };
 
 export type ObjectProps = ControlProps<ObjectValue> & ObjectConfig;
-export const ObjectControl: FC<ObjectProps> = ({ name, value, onChange }) => {
+export const ObjectControl: FC<ObjectProps> = ({ name, value, onChange, validator }) => {
   const [valid, setValid] = useState(true);
   const [text, setText] = useState(format(value));
 
@@ -19,10 +19,11 @@ export const ObjectControl: FC<ObjectProps> = ({ name, value, onChange }) => {
     (e: ChangeEvent<HTMLTextAreaElement>) => {
       try {
         const newVal = parse(e.target.value);
-        if (!deepEqual(value, newVal)) {
+        const newValid = !validator || validator(newVal);
+        if (newValid && !deepEqual(value, newVal)) {
           onChange(name, newVal);
         }
-        setValid(true);
+        setValid(newValid);
       } catch (err) {
         setValid(false);
       }

lib/components/src/controls/types.ts

@@ -30,7 +30,9 @@ export interface NumberConfig {
 export type RangeConfig = NumberConfig;
 
 export type ObjectValue = any;
-export interface ObjectConfig {}
+export interface ObjectConfig {
+  validator?: (obj: any) => boolean;
+}
 
 export type OptionsSingleSelection = any;
 export type OptionsMultiSelection = any[];