Anexos do compositor
O Painel do Compositor que carrega anexos: uma faixa de peças de 56px acima do prompt, a miniatura para imagens e o ícone do documento do plugin com o nome do arquivo para tudo o resto, cada um com o seu descarte no canto. Os arquivos em fila pousam um após o outro, o anel de sotaque desenhando no sentido horário ao redor do azulejo da forma como o bloco Arquivo Enviar traça sua zona de queda, enquanto uma porcentagem de 9px conta no canto, então em 100 a porcentagem desfoca e o descarte aparece no mesmo local.
Instalação
Modo escuro pronto - este componente segue tokens semânticos BoardUI automaticamente. Configurar a mudança de tema.
Usando um pacote de UI compartilhado ou aliases de importação personalizados? Configure seus caminhos de instalação antes de executar o CLI. Exemplos de copy-paste usam as importações padrão.
Enviar a fila
ComposerWithAttachments possui a fila. attachments com progress: 0 espera a sua vez, depois sobe, desenha o seu anel e conta no canto; os arquivos sem um valor de progresso mostram como desembarcou imediatamente. O upload é simulado de modo que o bloco permanece a nível da infra- estrutura: afina- o com uploadDuration e uploadGap, e ouvir com onUploadComplete e onAllUploaded. Adicione arquivos sempre que quiser; eles se juntam ao final da fila.
const [files, setFiles] = useState<ComposerAttachment[]>([]);
function attach(picked: File[]) { setFiles((prev) => [ ...prev, ...picked.map((file) => ({ id: crypto.randomUUID(), name: file.name, kind: kindOf(file), progress: 0, // queued: lands after the ones before it })), ]);}
<ComposerWithAttachments attachments={files} onAttachmentsChange={setFiles} // dismissals come back through here uploadDuration={1100} // one simulated upload, ms uploadGap={240} // pause before the next ring starts, ms onUploadComplete={(file) => console.log("landed", file.name)} onAllUploaded={() => console.log("all landed")}/>Tipos de peças
Seis tipos. image enche a telha com a sua src e recebe um descarte branco fosco; o documento, planilha, apresentação, código e tipos de vídeo carregam os ícones do plugin 24px que o menu adicionar já envia, com o nome do arquivo em 9px por baixo, truncado para o azulejo. ComposerAttachmentStrip e o único ComposerAttachmentTile são exportados para superfícies fora do compositor.
{/* Six tile kinds: images show the thumbnail, the rest carry the plugin document icons */}<ComposerAttachmentStrip attachments={[ { id: "1", name: "cat.jpg", kind: "image", src: "/uploads/cat.jpg" }, { id: "2", name: "payroll.docx", kind: "document" }, { id: "3", name: "timetable.xlsx", kind: "spreadsheet" }, { id: "4", name: "launch.key", kind: "presentation" }, { id: "5", name: "types.tsx", kind: "code" }, { id: "6", name: "birthday.mp4", kind: "video" }, ]} onRemove={(id) => remove(id)}/>
{/* Or one tile at a time */}<ComposerAttachmentTile attachment={file} onRemove={() => remove(file.id)} />Traga o seu próprio uploader
O anel é apenas um número. Pular a fila e a mão ComposerPanel o próprio anexo, mapeando o progresso real da transferência de cada arquivo para progress: o anel segue-o, e limpar o valor marca o arquivo desembarcado.
{/* Real uploads: feed the ring from your own progress events on the core panel */}<ComposerPanel attachments={files.map((file) => ({ ...file, progress: uploads[file.id], // 0–100 draws the ring, undefined means landed }))} onRemoveAttachment={(id) => cancel(id)}/>