derived-field.tsx

import React from "react";
import { CmsEditorFieldTypePlugin } from "@webiny/app-headless-cms/types";
import { Grid, Cell } from "@webiny/ui/Grid";
import { Typography } from "@webiny/ui/Typography";
import { Select } from "@webiny/ui/Select";
import { Input } from "@webiny/ui/Input";

import { i18n } from "@webiny/app/i18n";
const t = i18n.ns("app-headless-cms/admin/fields");
import { ReactComponent as TextIcon } from "./round-text_fields-24px.svg";

const derivedFieldPlugin: CmsEditorFieldTypePlugin = {
    type: "cms-editor-field-type",
    name: "cms-editor-field-type-derived",
    field: {
        type: "derived",
        label: t`Derived value`,
        description: t`A value which is based on another, existing field`,
        icon: <TextIcon />,
        validators: ["required"],
        allowMultipleValues: false,
        allowPredefinedValues: false,
        allowIndexes: {
            singleValue: true,
            multipleValues: false
        },
        multipleValuesLabel: t``,
        createField() {
            return {
                type: this.type,
                validation: [],
                renderer: {
                    name: ""
                }
            };
        },
        renderSettings({ form: { Bind } }) {
            return (
                <Grid>
                    <Cell span={12}>
                        <Typography use="body1">{t`Choose a source field`}</Typography>
                        <Bind name={"settings.sourceField"}>
                            <Input
                                label={t`Source field`}
                                description={`Name of the field which gets transformed`}
                            />
                        </Bind>
                        <Typography use="body1">{t`How should the field be transformed?`}</Typography>
                        <Bind name={"settings.derivationType"}>
                            <Select>
                                <option value="none">{t`No transformation`}</option>
                                <option value="slugify">{t`Create a slug`}</option>
                            </Select>
                        </Bind>
                    </Cell>
                </Grid>
            );
        }
    }
};

export default derivedFieldPlugin;