Exportando Propriedades Padrões em um Bloco

Resumo

  1. Visão Geral
  2. Cenário Atual
  3. Exportando Propriedades Padrão nos Parâmetros da Função
  4. Implementação
  5. Conclusão

Visão Geral

Este documento detalha o comportamento atual dos valores padrão nos componentes dentro do Admin e apresenta um novo recurso que permite aos desenvolvedores especificar propriedades padrão diretamente nos parâmetros da função. Esta melhoria melhora a experiência do usuário garantindo que os valores padrão sejam refletidos corretamente tanto na interface do Admin quanto nos componentes renderizados.

Cenário Atual

Na configuração atual, os valores padrão para props são codificados diretamente no código do componente. Isso leva a uma inconsistência entre a interface do Admin e o componente renderizado:

  1. Admin: Quando um componente tem valores padrão definidos em seu código, o formulário na interface do Admin exibe campos vazios em vez desses valores padrão.
  2. Componente Renderizado: Apesar dos campos de formulário vazios, o componente ainda é renderizado com os valores padrão codificados.
  3. JSON: O arquivo JSON exibido para o desenvolvedor na interface do Admin não inclui esses valores padrão, o que leva a confusão e uma experiência de usuário ruim.

Exemplo

Considere o seguinte cenário: Um componente de rodapé tem props padrão definidas em seu código. Na interface do Admin, os campos de formulário para essas props estão vazios, mas o componente é renderizado com os valores codificados. Essa desconexão torna difícil para os desenvolvedores e gerentes de conteúdo mapear o texto de entrada para os dados da página com precisão.

import { ImageWidget } from "apps/admin/widgets.ts";
import Image from "apps/website/components/Image.tsx";

interface Props {
  href?: string;
  image?: ImageWidget;
  alt?: string;
  width?: number;
  height?: number;
  text?: string;
  list?: {
    listItem: string;
    listItemArray: string[];
  };
}

export default function Footer(
  { image, href, text, alt, height, width, list }: Props,
) {
  const defaultImage =
    "https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/4959/d7aa9290-074f-417c-99c3-5b0587c8c2ee";
  const defaultHref = "https://deco.cx/";
  const defaultText = "Made with";
  const defaultAlt = "Made with deco.cx";
  const defaultHeight = 20;
  const defaultWidth = 50;
  const defaultList = {
    listItem: "1",
    listItemArray: ["1", "2"],
  };

  return (
    <div>
      <div class="bg-white">
        <a
          href={href || defaultHref}
          class="flex flex-row gap-1 items-center justify-center text-xs"
          target="_blank"
        >
          {text && <p>{text || defaultText}</p>}
          {image && (
            <Image
              src={image || defaultImage}
              alt={alt || defaultAlt}
              height={height || defaultHeight}
              width={width || defaultWidth}
            />
          )}
        </a>
      </div>
      {list && <div>{list || defaultList}</div>}
    </div>
  );
}

Exportando Propriedades Padrão nos Parâmetros da Função

Para resolver este problema, o Admin agora suporta a especificação de propriedades padrão diretamente nos parâmetros da função de qualquer bloco. Isso garante que os valores padrão sejam refletidos de forma consistente na interface, no componente renderizado e no arquivo JSON mostrado aos desenvolvedores, proporcionando benefícios como:

  • Consistência: Os valores padrão são visíveis e editáveis na interface do admin, garantindo uma experiência de usuário consistente.
  • Clareza: Os desenvolvedores podem ver os valores padrão reais no arquivo JSON, reduzindo a confusão.
  • Simplicidade: Mais fácil de gerenciar e atualizar os valores padrão diretamente nos parâmetros da função.

Este recurso suporta cenários mais simples, cobrindo tipos de dados básicos e objetos aninhados.

Implementação

Para especificar propriedades padrão em seu componente, inclua-os diretamente no parâmetro da função. Abaixo está um exemplo de como fazer isso:

import { ImageWidget } from "apps/admin/widgets.ts";
import Image from "apps/website/components/Image.tsx";

interface Props {
  href?: string;
  image?: ImageWidget;
  alt?: string;
  width?: number;
  height?: number;
  text?: string;
  list?: {
    listItem: string;
    listItemArray: string[];
  };
}

export default function Footer(
  { image, href, text, alt, height, width, list }: Props = {
    image:
      "https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/4959/d7aa9290-074f-417c-99c3-5b0587c8c2ee",
    href: "https://deco.cx/",
    text: "Made with",
    alt: "Made with deco.cx",
    height: 20,
    width: 50,
    list: {
      listItem: "1",
      listItemArray: ["1", "2"],
    },
  },
) {
  return (
    <div>
      <div class="bg-white">
        <a
          href={href}
          class="flex flex-row gap-1 items-center justify-center text-xs"
          target="_blank"
        >
          {text && <p>{text}</p>}
          {image && (
            <Image
              src={image}
              alt={alt}
              height={height}
              width={width}
            />
          )}
        </a>
      </div>
      {list && <div>{list}</div>}
    </div>
  );
}

Explicação

  1. Valores Padrão de Props: Os valores padrão para image, href, text, alt, height, width e list são especificados diretamente no parâmetro da função.
  2. Interface de Props: A interface Props define a estrutura e os tipos das props.
  3. Lógica do Componente: A lógica do componente usa esses valores padrão, garantindo que sejam aplicados de forma consistente.

Então as propriedades definidas no Admin, o preview, o código e o JSON da section deverá parecer como a imagem a seguir, em vez de aparecer com valores vazios:

Tela atual com props padrões exportadas

Conclusão

Ao especificar propriedades padrão diretamente nos parâmetros da função, este novo recurso melhora a integração entre a interface do admin e a renderização do componente. Essa mudança simplifica o fluxo de trabalho para os desenvolvedores e aprimora a experiência do usuário, garantindo que os valores padrão sejam visíveis e gerenciáveis em todas as partes do Admin.

Was this page helpful?
Can't find what you're looking for? Spot an error in the documentation? Get in touch with us on our Community Forum
Continue reading