From 8eed6c4d1a19a1b4066f9fd5f45cbcaadae04450 Mon Sep 17 00:00:00 2001
From: b-gran <bill@billgranfield.com>
Date: Sat, 26 Oct 2019 21:30:40 +0100
Subject: [PATCH 1/2] Add support for render functions in cells

---
 src/Editor.js           | 33 ++++++++++++++++++++-------------
 src/examples/example.js |  8 +++++++-
 2 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/src/Editor.js b/src/Editor.js
index 148172e..1875bb3 100644
--- a/src/Editor.js
+++ b/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>
     );
   }
diff --git a/src/examples/example.js b/src/examples/example.js
index 8c94e61..b8b91fb 100644
--- a/src/examples/example.js
+++ b/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(),
 

From 5aa63980f3aaaea58f305387078e988c1f8998be Mon Sep 17 00:00:00 2001
From: b-gran <bill@billgranfield.com>
Date: Sat, 26 Oct 2019 22:17:09 +0100
Subject: [PATCH 2/2] Update types with render function

---
 index.d.ts | 21 +++++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/index.d.ts b/index.d.ts
index 7c7a637..53b4947 100644
--- a/index.d.ts
+++ b/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>