Vistas previas personalizadas

Cada propiedad que defina en el CMS tiene un componente de vista previa asociado de forma predeterminada. En algunos casos, es posible que desee crear un componente de vista previa personalizado.

Al igual que puede personalizar cómo se representa el campo de su propiedad, puede cambiar cómo se muestra la vista previa de una propiedad en la colección y otras vistas de solo lectura.

Puede construir su vista previa como un componente de React que tome PropertyPreviewProps como props (propiedades).

PropertyPreviewProps tiene dos tipos genéricos: el primero es el tipo de la propiedad, como string o boolean, y el segundo (opcional) es el tipo para cualquier prop personalizado que le gustaría pasar a la vista previa, tal como se hace al definir campos personalizados.

Ejemplo

Ejemplo de una vista previa personalizada para una propiedad boolean (booleana):

import React from "react";
import { PropertyPreviewProps } from "@firecms/core";
import { CheckBoxIcon, CheckBoxOutlineBlankIcon } from "@firecms/ui";

export default function CustomBooleanPreview({
                                                    value, property, size
                                                }: PropertyPreviewProps<boolean>
)
{
    return (
        value ? <CheckBoxIcon/> : <CheckBoxOutlineBlankIcon/>
    );
}

…y cómo se usa:

export const blogCollection = buildCollection({
    name: "Entrada de blog",
    properties: {
        // ...
        reviewed: {
            name: "Revisado",
            dataType: "boolean",
            Preview: CustomBooleanPreview
        },
    }
});