Add support for custom rendering of primitive cells

index.d.ts

@@ -4,18 +4,27 @@ type IsRequiredOption = {
   required?: boolean,
 }
 
+type RenderFunction = (
+  type: SchemaType,
+  value: string | number | boolean,
+  onChange: (value: string | number | boolean) => void
+) => React.ReactNode
+type RenderFunctionOption = {
+  render?: RenderFunction,
+}
+
 type BaseSchemaType<TOptions> = ((x: unknown) => boolean)
   & { _isSchemaType: true, _type: string, } & TOptions
 type SchemaTypeFactory<TOptions> = (options?: TOptions) => BaseSchemaType<TOptions>
 
-type StringSchemaTypeFactory = SchemaTypeFactory<IsRequiredOption>
-type StringSchemaType = BaseSchemaType<IsRequiredOption>
+type StringSchemaTypeFactory = SchemaTypeFactory<IsRequiredOption & RenderFunctionOption>
+type StringSchemaType = BaseSchemaType<IsRequiredOption & RenderFunctionOption>
 
-type BooleanSchemaTypeFactory = SchemaTypeFactory<IsRequiredOption>
-type BooleanSchemaType = BaseSchemaType<IsRequiredOption>
+type BooleanSchemaTypeFactory = SchemaTypeFactory<IsRequiredOption & RenderFunctionOption>
+type BooleanSchemaType = BaseSchemaType<IsRequiredOption & RenderFunctionOption>
 
-type NumberSchemaTypeFactory = SchemaTypeFactory<IsRequiredOption>
-type NumberSchemaType = BaseSchemaType<IsRequiredOption>
+type NumberSchemaTypeFactory = SchemaTypeFactory<IsRequiredOption & RenderFunctionOption>
+type NumberSchemaType = BaseSchemaType<IsRequiredOption & RenderFunctionOption>
 
 type FunctionSchemaTypeFactory = SchemaTypeFactory<IsRequiredOption>
 type FunctionSchemaType = BaseSchemaType<IsRequiredOption>

src/Editor.js

@@ -385,14 +385,17 @@ class StringCell extends React.Component {
       BaseClassnames.EditorInput('--value')
     );
 
+    const cellContent = typeof this.props.type.render === 'function'
+      ? this.props.type.render(this.props.type, this.props.value, this.props.onChange)
+      : <input
+        className={inputClasses}
+        value={this.props.value || ''}
+        required={this.props.type.required}
+        onChange={evt => this.props.onChange(evt.target.value)}/>
+
     return (
       <TableCell className={BaseClassnames.Cell('--value')}>
-        <input
-          className={inputClasses}
-          type='text'
-          value={this.props.value || ''}
-          required={this.props.type.required}
-          onChange={evt => this.props.onChange(evt.target.value)}/>
+        {cellContent}
       </TableCell>
     );
   }
@@ -421,15 +424,19 @@ class BooleanCell extends React.Component {
   };
 
   render () {
+    const cellContent = typeof this.props.type.render === 'function'
+      ? this.props.type.render(this.props.type, this.props.value, this.props.onChange)
+      : <Select
+        native
+        value={String(Boolean(this.props.value))}
+        onChange={evt => this.props.onChange(stringToBoolean(evt.target.value))}>
+        <option value={true}>True</option>
+        <option value={false}>False</option>
+      </Select>
+
     return (
       <TableCell className={BaseClassnames.Cell('--value')}>
-        <Select
-          native
-          value={String(Boolean(this.props.value))}
-          onChange={evt => this.props.onChange(stringToBoolean(evt.target.value))}>
-          <option value={true}>True</option>
-          <option value={false}>False</option>
-        </Select>
+        { cellContent }
       </TableCell>
     );
   }

src/examples/example.js

@@ -17,7 +17,13 @@ const APP_ROOT = document.getElementById('root')
 
 // A deeply nested test schema
 const schema = {
-    foo: Schema.SchemaTypes.string({ required: true }),
+    foo: Schema.SchemaTypes.string({
+      required: true,
+      render: (type, value, onChange) => <textarea
+        value={value || ''}
+        required={type.required}
+        onChange={evt => onChange(evt.target.value)}/>
+    }),
 
     bar: Schema.SchemaTypes.number(),