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 = ((x: unknown) => boolean) & { _isSchemaType: true, _type: string, } & TOptions type SchemaTypeFactory = (options?: TOptions) => BaseSchemaType -type StringSchemaTypeFactory = SchemaTypeFactory -type StringSchemaType = BaseSchemaType +type StringSchemaTypeFactory = SchemaTypeFactory +type StringSchemaType = BaseSchemaType -type BooleanSchemaTypeFactory = SchemaTypeFactory -type BooleanSchemaType = BaseSchemaType +type BooleanSchemaTypeFactory = SchemaTypeFactory +type BooleanSchemaType = BaseSchemaType -type NumberSchemaTypeFactory = SchemaTypeFactory -type NumberSchemaType = BaseSchemaType +type NumberSchemaTypeFactory = SchemaTypeFactory +type NumberSchemaType = BaseSchemaType type FunctionSchemaTypeFactory = SchemaTypeFactory type FunctionSchemaType = BaseSchemaType 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) + : this.props.onChange(evt.target.value)}/> + return ( - this.props.onChange(evt.target.value)}/> + {cellContent} ); } @@ -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) + : + return ( - + { cellContent } ); } 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) =>