kylefang/firecms
1
0
Fork 0
mirror of https://github.com/zhigang1992/firecms.git synced 2026-06-13 17:25:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

Added custom fields additional props

Browse Source
This commit is contained in:
francesco
2020-05-04 17:45:55 +02:00
parent d73cbdac7a
commit f7619d7715
12 changed files with 48 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
example/src/custom_field/CustomLargeTextField.tsx
View File

@@ -8,14 +8,20 @@ import {
import React, { ReactElement } from "react";
import { CMSFieldProps } from "firecms";
interface CustomLargeTextFieldProps extends CMSFieldProps<string> {
rows: number
}
export default function CustomLargeTextField({
property,
field,
rows,
form: { isSubmitting, errors, touched, setFieldValue },
...props
}: CMSFieldProps<string>)
}: 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({
<InputLabel>{property.title || field.name}</InputLabel>
<Input
multiline
rows={4}
rows={rows}
defaultValue={value}
onChange={(evt) => setFieldValue(
field.name,

5
example/src/index.tsx
View File

@@ -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
},

2
package.json
View File

@@ -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",

5
src/form/fields/DateTimeField.tsx
View File

@@ -10,7 +10,8 @@ type DateTimeFieldProps = CMSFieldProps<firebase.firestore.Timestamp> ;
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 (
<DateTimePicker
fullWidth
@@ -31,6 +33,7 @@ export default function DateTimeField({
field.name,
dateValue
)}
{...props}
/>
);
}

3
src/form/fields/MapField.tsx
View File

@@ -18,7 +18,8 @@ export default function MapField<S extends EntitySchema>({
form: { isSubmitting, errors, touched, setFieldValue },
property,
includeDescription,
createFormField
createFormField,
...props
}: MapFieldProps<S>) {
const classes = formStyles();

11
src/form/fields/Select.tsx
View File

@@ -17,7 +17,8 @@ export default function Select<T extends EnumType>({
field,
form: { isSubmitting, errors, touched, setFieldValue },
property,
includeDescription
includeDescription,
...props
}: SelectProps<T>) {
const enumValues = property.enumValues as EnumValues<T>;
@@ -34,6 +35,7 @@ export default function Select<T extends EnumType>({
>
<InputLabel
id={`${field.name}-label`}>{property.title || field.name}</InputLabel>
<MuiSelect labelId={`${field.name}-label`}
value={!!value ? value : ""}
onChange={(evt: any) => {
@@ -42,15 +44,20 @@ export default function Select<T extends EnumType>({
field.name,
newValue ? newValue : null
);
}}>
}}
{...props}>
{Object.entries(enumValues).map(([key, value]) => (
<MenuItem key={`select-${key}`}
value={key}>{value as string}</MenuItem>
))}
</MuiSelect>
{includeDescription && property.description &&
<FormHelperText>{property.description}</FormHelperText>}
<FormHelperText>{fieldError}</FormHelperText>
</FormControl>
);
}

2
src/form/fields/StorageUploadField.tsx
View File

@@ -27,7 +27,7 @@ export default function StorageUploadField({
field,
form: { errors, touched, setFieldValue },
property,
includeDescription
includeDescription,
}: StorageUploadFieldProps) {
const fieldError = getIn(errors, field.name);

4
src/form/fields/SwitchField.tsx
View File

@@ -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={
<Switch
{...props}
type={"checkbox"}
onChange={(evt) => {
setFieldValue(

4
src/form/fields/TextField.tsx
View File

@@ -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({
<Input
type={property.dataType === "number" ? "number" : undefined}
defaultValue={value}
{...props}
onChange={(evt) => setFieldValue(
field.name,
evt.target.value

3
src/form/fields/form_props.tsx
View File

@@ -5,7 +5,8 @@ import { FieldProps } from "formik/dist/Field";
export interface CMSFieldProps<T> extends FieldProps<T> {
property: Property<T>,
includeDescription: boolean,
createFormField: (name: string, property: Property, includeDescription: boolean) => ReactElement
createFormField: (name: string, property: Property, includeDescription: boolean) => ReactElement,
additionalProps: any
}

6
src/form/index.tsx
View File

@@ -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 (
<div>{`Currently the field ${property.dataType} is not supported`}</div>
@@ -78,7 +78,8 @@ export function createFormField(name: string,
function buildField<T, P extends Property<T>>(name: string,
property: P,
includeDescription: boolean,
component: React.ComponentType<CMSFieldProps<T>>) {
component: React.ComponentType<CMSFieldProps<T>>,
customFieldProps?: any) {
return <Field
required={property.validation?.required}
name={`${name}`}
@@ -86,6 +87,7 @@ function buildField<T, P extends Property<T>>(name: string,
{(fieldProps: FieldProps<T>) =>
React.createElement(component, {
...fieldProps,
...customFieldProps,
includeDescription,
property,
createFormField

8
src/models.ts
View File

@@ -164,7 +164,13 @@ export interface BaseProperty<T> {
/**
* If you need to render a custom field.
*/
customField?: React.ComponentType<CMSFieldProps<T>>;
customField?: React.ComponentType<any & CMSFieldProps<T>>;
/**
* Additional props that are passed to the default field generated by
* FireCMS or to the customField
*/
customFieldProps?: any;
}
export type EnumType = number | string ;