analytica-frontend-lib
Version:
Repositório público dos componentes utilizados nas plataformas da Analytica Ensino
1 lines • 4.03 kB
Source Map (JSON)
{"version":3,"sources":["../src/components/ProgressModal/ProgressModal.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport Modal from '../Modal/Modal';\nimport ProgressBar from '../ProgressBar/ProgressBar';\nimport Text from '../Text/Text';\n\nexport interface ProgressModalProps {\n /** Controla se o modal está aberto */\n isOpen: boolean;\n /** Callback ao fechar */\n onClose: () => void;\n /**\n * Mensagem principal exibida abaixo da imagem. Também é usada como\n * accessible name do dialog (renderizada visualmente escondida no `<h2>`\n * do Modal pra leitores de tela).\n */\n message: ReactNode;\n /** URL ou import de imagem ilustrativa (opcional) */\n image?: string;\n /** Alt text da imagem — se não informado usa a `message` quando for string */\n imageAlt?: string;\n /**\n * Accessible name quando `message` é ReactNode. Se omitido, cai em\n * \"Carregando\". Ignorado quando `message` é string.\n */\n accessibleName?: string;\n /**\n * Valor 0-100. Se omitido, mostra indicador indeterminado (pulse sem %).\n * Use quando o backend não reportar progresso real.\n */\n progress?: number;\n /** Tamanho do Modal. Default: 'sm' */\n size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n}\n\n/**\n * Modal de progresso com imagem ilustrativa + mensagem + ProgressBar.\n *\n * Pensado para operações assíncronas longas (upload, OCR, correção por IA, etc).\n * Quando `progress` é omitido, a barra é renderizada em modo indeterminado\n * (`animate-pulse` sem percentual visível).\n *\n * Layout: X no topo direito, imagem centralizada, mensagem abaixo da imagem,\n * progress bar ao final. A mensagem também é injetada como título invisível\n * (`sr-only`) no `<h2>` do Modal pra acessibilidade.\n *\n * @example\n * ```tsx\n * <ProgressModal\n * isOpen={isLoading}\n * onClose={() => setIsLoading(false)}\n * image={myImage}\n * message=\"Analisando sua redação...\"\n * // progress opcional — sem valor, usa indicador indeterminado\n * />\n * ```\n */\nconst ProgressModal = ({\n isOpen,\n onClose,\n message,\n image,\n imageAlt,\n accessibleName,\n progress,\n size = 'sm',\n}: ProgressModalProps) => {\n const isIndeterminate = progress === undefined;\n const resolvedAccessibleName =\n typeof message === 'string' ? message : (accessibleName ?? 'Carregando');\n const resolvedAlt = imageAlt ?? resolvedAccessibleName;\n\n return (\n <Modal\n isOpen={isOpen}\n onClose={onClose}\n title={<span className=\"sr-only\">{resolvedAccessibleName}</span>}\n size={size}\n >\n <div className=\"flex flex-col items-center gap-6 py-2\">\n {image && (\n <img\n src={image}\n alt={resolvedAlt}\n className=\"w-60 h-60 object-contain\"\n />\n )}\n\n <Text size=\"md\" className=\"text-text-950 text-center\">\n {message}\n </Text>\n\n <div className={isIndeterminate ? 'w-full animate-pulse' : 'w-full'}>\n <ProgressBar\n value={progress ?? 60}\n size=\"medium\"\n variant=\"blue\"\n showPercentage={!isIndeterminate}\n />\n </div>\n </div>\n </Modal>\n );\n};\n\nexport default ProgressModal;\n"],"mappings":";;;;;;;;;;;AA2Ea,cAGP,YAHO;AAnBb,IAAM,gBAAgB,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AACT,MAA0B;AACxB,QAAM,kBAAkB,aAAa;AACrC,QAAM,yBACJ,OAAO,YAAY,WAAW,UAAW,kBAAkB;AAC7D,QAAM,cAAc,YAAY;AAEhC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,OAAO,oBAAC,UAAK,WAAU,WAAW,kCAAuB;AAAA,MACzD;AAAA,MAEA,+BAAC,SAAI,WAAU,yCACZ;AAAA,iBACC;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL,KAAK;AAAA,YACL,WAAU;AAAA;AAAA,QACZ;AAAA,QAGF,oBAAC,gBAAK,MAAK,MAAK,WAAU,6BACvB,mBACH;AAAA,QAEA,oBAAC,SAAI,WAAW,kBAAkB,yBAAyB,UACzD;AAAA,UAAC;AAAA;AAAA,YACC,OAAO,YAAY;AAAA,YACnB,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,gBAAgB,CAAC;AAAA;AAAA,QACnB,GACF;AAAA,SACF;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,wBAAQ;","names":[]}