Form

When editing email templates, we will use a large number of form components. In order to facilitate customization needs, our form components are shared.

This is the default internally supported form components

export const AttributeField = {
  // Basic Form Field

  WatchField: WatchField,
  SyncChildrenField: SyncChildrenField,
  TextField: TextField,
  NumberField: NumberField,
  PixelField: PixelField,
  SelectField: SelectField,
  ColorPickerField: ColorPickerField,
  SliderField: SliderField,
  SwitchField: SwitchField,
  ButtonGroupField: ButtonGroupField,
  ImageUploaderField: ImageUploaderField,
  EditPanelListField: EditPanelListField,
  EditPanelTabsField: EditPanelTabsField,
  PixelAndPercentField: PixelAndPercentField,

  // Attributes Field
  Heading: Heading,
  Direction: Direction,
  Preheader: Preheader,
  Height: Height,
  Width: Width,
  TextAreaField: TextAreaField,
  Link: Link,
  BackgroundImage: BackgroundImage,
  DisplayOptions: DisplayOptions,
  Columns: Columns,
  BackgroundColor: BackgroundColor,
  DividerLine: DividerLine,
  BackgroundPosition: BackgroundPosition,
  StackOnMobile: StackOnMobile,
  ImageUrl: ImageUrl,
  Border: Border,
  ImageWidth: ImageWidth,
  BorderRadius: BorderRadius,
  FontFamily: FontFamily,
  FontSize: FontSize,
  LetterSpacing: LetterSpacing,
  LineHeight: LineHeight,
  TextAlign: TextAlign,
  VerticalAlign: VerticalAlign,
  Padding: Padding,
  TextAndHeadingStyle: TextAndHeadingStyle,
  FontWeight: FontWeight,
  GlobalLink: GlobalLink,
  Typography: Typography,
  TextAndHeadingList: TextAndHeadingList,
  Buttons: Buttons,
  ButtonContent: ButtonContent,
  ButtonCategory: ButtonCategory,
  WebFonts: WebFonts,
  RichTextField,
  FieldItem: FieldItem,
};

Usage

// update element data content
<AttributeField.TextField
  label={t("Text")}
  path={nodePath}
  name={"data.content"}
/>

// If the modification is not an element, nodePath is not required, path={null}
<AttributeField.TextField
  label={t("Subject")}
  path={null}
  name={"subject"}
/>

When the default form components do not meet your needs, you can customize your form components

import { enhancer } from "easy-email-pro-theme";

import {
  Select as ArcoSelect,
  SelectProps as ArcoSelectProps,
} from "@arco-design/web-react";
import { merge } from "lodash";
import React, { useMemo } from "react";

interface SelectProps extends ArcoSelectProps {
  options: Array<{ value: any; label: React.ReactNode }>;
  onChange?: (val: string) => void;
  value: string;
}

const Select = (props: SelectProps) => {
  const options = useMemo(() => props.options || [], [props.options]);
  return (
    <ArcoSelect {...props} value={props.value} onChange={props.onChange}>
      {options.map((item, index) => (
        <ArcoSelect.Option key={index} value={item.value}>
          {item.label}
        </ArcoSelect.Option>
      ))}
    </ArcoSelect>
  );
};

const SelectField = enhancer(Select);

Example

Detailed custom Panel example is available here