From f7619d7715ff5c898c2d00a87015618d0d995dc9 Mon Sep 17 00:00:00 2001 From: francesco Date: Mon, 4 May 2020 17:45:55 +0200 Subject: [PATCH] Added custom fields additional props --- example/src/custom_field/CustomLargeTextField.tsx | 10 ++++++++-- example/src/index.tsx | 5 ++++- package.json | 2 +- src/form/fields/DateTimeField.tsx | 5 ++++- src/form/fields/MapField.tsx | 3 ++- src/form/fields/Select.tsx | 11 +++++++++-- src/form/fields/StorageUploadField.tsx | 2 +- src/form/fields/SwitchField.tsx | 4 +++- src/form/fields/TextField.tsx | 4 +++- src/form/fields/form_props.tsx | 3 ++- src/form/index.tsx | 6 ++++-- src/models.ts | 8 +++++++- 12 files changed, 48 insertions(+), 15 deletions(-) diff --git a/example/src/custom_field/CustomLargeTextField.tsx b/example/src/custom_field/CustomLargeTextField.tsx index 6a968b7..dbd2bb4 100644 --- a/example/src/custom_field/CustomLargeTextField.tsx +++ b/example/src/custom_field/CustomLargeTextField.tsx @@ -8,14 +8,20 @@ import { import React, { ReactElement } from "react"; import { CMSFieldProps } from "firecms"; +interface CustomLargeTextFieldProps extends CMSFieldProps { + rows: number +} + export default function CustomLargeTextField({ property, field, + rows, form: { isSubmitting, errors, touched, setFieldValue }, ...props - }: CMSFieldProps) + }: CustomLargeTextFieldProps) : ReactElement { + console.log(props); const fieldError = getIn(errors, field.name); const showError = getIn(touched, field.name) && !!fieldError; @@ -32,7 +38,7 @@ export default function CustomLargeTextField({ {property.title || field.name} setFieldValue( field.name, diff --git a/example/src/index.tsx b/example/src/index.tsx index be0c1c8..615974e 100644 --- a/example/src/index.tsx +++ b/example/src/index.tsx @@ -187,6 +187,9 @@ const blogSchema: EntitySchema = { validation: { required: true }, dataType: "string", customField: CustomLargeTextField, + customFieldProps: { + rows: 5 + }, includeInListView: false }, content: { @@ -194,7 +197,7 @@ const blogSchema: EntitySchema = { validation: { required: true }, dataType: "array", of: { - dataType: "string", + dataType: "string" }, includeInListView: false }, diff --git a/package.json b/package.json index b7b803e..4c418b9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@camberi/firecms", - "version": "0.3.0", + "version": "0.3.1", "description": "Awesome Firestore based CMS", "author": "camberi", "license": "GPL-3.0", diff --git a/src/form/fields/DateTimeField.tsx b/src/form/fields/DateTimeField.tsx index 674efc9..2eb772b 100644 --- a/src/form/fields/DateTimeField.tsx +++ b/src/form/fields/DateTimeField.tsx @@ -10,7 +10,8 @@ type DateTimeFieldProps = CMSFieldProps ; export default function DateTimeField({ field, form: { isSubmitting, errors, touched, setFieldValue }, - property + property, + ...props }: DateTimeFieldProps) { @@ -18,6 +19,7 @@ export default function DateTimeField({ const showError = getIn(touched, field.name) && !!fieldError; const value = field.value; + return ( ); } diff --git a/src/form/fields/MapField.tsx b/src/form/fields/MapField.tsx index e67ffe9..67b6ced 100644 --- a/src/form/fields/MapField.tsx +++ b/src/form/fields/MapField.tsx @@ -18,7 +18,8 @@ export default function MapField({ form: { isSubmitting, errors, touched, setFieldValue }, property, includeDescription, - createFormField + createFormField, + ...props }: MapFieldProps) { const classes = formStyles(); diff --git a/src/form/fields/Select.tsx b/src/form/fields/Select.tsx index b21dc89..872b966 100644 --- a/src/form/fields/Select.tsx +++ b/src/form/fields/Select.tsx @@ -17,7 +17,8 @@ export default function Select({ field, form: { isSubmitting, errors, touched, setFieldValue }, property, - includeDescription + includeDescription, + ...props }: SelectProps) { const enumValues = property.enumValues as EnumValues; @@ -34,6 +35,7 @@ export default function Select({ > {property.title || field.name} + { @@ -42,15 +44,20 @@ export default function Select({ field.name, newValue ? newValue : null ); - }}> + }} + {...props}> + {Object.entries(enumValues).map(([key, value]) => ( {value as string} ))} + {includeDescription && property.description && {property.description}} + {fieldError} + ); } diff --git a/src/form/fields/StorageUploadField.tsx b/src/form/fields/StorageUploadField.tsx index 21f85f3..56fc514 100644 --- a/src/form/fields/StorageUploadField.tsx +++ b/src/form/fields/StorageUploadField.tsx @@ -27,7 +27,7 @@ export default function StorageUploadField({ field, form: { errors, touched, setFieldValue }, property, - includeDescription + includeDescription, }: StorageUploadFieldProps) { const fieldError = getIn(errors, field.name); diff --git a/src/form/fields/SwitchField.tsx b/src/form/fields/SwitchField.tsx index 4dba8af..c4176a8 100644 --- a/src/form/fields/SwitchField.tsx +++ b/src/form/fields/SwitchField.tsx @@ -9,7 +9,8 @@ export default function SwitchField({ field, form: { isSubmitting, setFieldValue }, property, - includeDescription + includeDescription, + ...props }: SwitchFieldProps) { return ( @@ -18,6 +19,7 @@ export default function SwitchField({ checked={field.value} control={ { setFieldValue( diff --git a/src/form/fields/TextField.tsx b/src/form/fields/TextField.tsx index 195b7c1..b5ef3f7 100644 --- a/src/form/fields/TextField.tsx +++ b/src/form/fields/TextField.tsx @@ -18,7 +18,8 @@ export default function TextField({ field, form: { isSubmitting, errors, touched, setFieldValue }, property, - includeDescription + includeDescription, + ...props }: TextFieldProps) { const fieldError = getIn(errors, field.name); const showError = getIn(touched, field.name) && !!fieldError; @@ -41,6 +42,7 @@ export default function TextField({ setFieldValue( field.name, evt.target.value diff --git a/src/form/fields/form_props.tsx b/src/form/fields/form_props.tsx index d988767..cb728c3 100644 --- a/src/form/fields/form_props.tsx +++ b/src/form/fields/form_props.tsx @@ -5,7 +5,8 @@ import { FieldProps } from "formik/dist/Field"; export interface CMSFieldProps extends FieldProps { property: Property, includeDescription: boolean, - createFormField: (name: string, property: Property, includeDescription: boolean) => ReactElement + createFormField: (name: string, property: Property, includeDescription: boolean) => ReactElement, + additionalProps: any } diff --git a/src/form/index.tsx b/src/form/index.tsx index e29b37d..96e906a 100644 --- a/src/form/index.tsx +++ b/src/form/index.tsx @@ -68,7 +68,7 @@ export function createFormField(name: string, } } if (component) - return buildField(name, property, includeDescription, component); + return buildField(name, property, includeDescription, component, property.customFieldProps); return (
{`Currently the field ${property.dataType} is not supported`}
@@ -78,7 +78,8 @@ export function createFormField(name: string, function buildField>(name: string, property: P, includeDescription: boolean, - component: React.ComponentType>) { + component: React.ComponentType>, + customFieldProps?: any) { return >(name: string, {(fieldProps: FieldProps) => React.createElement(component, { ...fieldProps, + ...customFieldProps, includeDescription, property, createFormField diff --git a/src/models.ts b/src/models.ts index da836a7..5f62a90 100644 --- a/src/models.ts +++ b/src/models.ts @@ -164,7 +164,13 @@ export interface BaseProperty { /** * If you need to render a custom field. */ - customField?: React.ComponentType>; + customField?: React.ComponentType>; + + /** + * Additional props that are passed to the default field generated by + * FireCMS or to the customField + */ + customFieldProps?: any; } export type EnumType = number | string ;