Gregory

Galera estou com esse componente utilizando o antd no react import { PessoaStatusEnum, TipoCadastroEnum } from "@/backend/api"; import { FModalMethods } from "@/components/FModal"; import { columnsPessoaStatus } from "@/pages/Cadastros/Pessoas/columns"; import { PessoaStatus } from "@/services/pessoa"; import { dayjsPtBr } from "@/utils/dayjsPtBr"; import { required } from "@/utils/validations"; import { Button, Col, Form, Input, Row, Typography } from "antd"; import { useForm } from "antd/es/form/Form"; import { FormInstance } from "antd/lib"; import { Dayjs } from "dayjs"; import { useEffect, useRef, useState } from "react"; import { v4 as uuid } from "uuid"; import { FDatePicker } from "../FDatePicker"; import DefaultFormFields from "../FFormFields/DefaultFormFields"; import StatusDropdown from "../FStausDropDown"; import FTable from "../FTable"; import { SelectEnum } from "../SelectEnum"; const { Title } = Typography; interface StatusHistoryProps { form: FormInstance; value?: PessoaStatusEnum | null; onChange?: (value: PessoaStatus[]) => void; tipoCadastroInitialValue: keyof typeof TipoCadastroEnum; } export const StatusHistory = ({ form, value, onChange, tipoCadastroInitialValue }: StatusHistoryProps) => { const refFormShow = useRef<null | FModalMethods>(null); const [formModalStatus] = useForm(); const [currentModal, setCurrentModal] = useState(""); const openModal = (type: string) => { setCurrentModal(type); refFormShow.current?.open(); }; const onCancel = () => { formModalStatus.resetFields(); refFormShow.current?.close(); setCurrentModal(""); }; useEffect(() => { if (refFormShow.current) { if (currentModal === "pessoasStatus") { refFormShow.current.open(); } else { refFormShow.current.close(); } } }, [currentModal]); const pessoaStatusFormData = { dataInicio: form.getFieldValue(["pessoasStatus", 0, "dataInicio"]), status: form.getFieldValue(["pessoasStatus", 0, "status"]), observacao: form.getFieldValue(["pessoasStatus", 0, "observacao"]), tipoCadastro: form.getFieldValue(["pessoasStatus", 0, "tipoCadastro"]), }; const handleDropdownClick = (e: React.MouseEvent<HTMLElement>) => { e.stopPropagation(); }; const getCurrentStatus = () => { const statuses = form.getFieldValue(["pessoasStatus"]); const currentStatus = statuses.reduce((acc: PessoaStatus | null, item: PessoaStatus) => { const { dataInicio } = item; if (!dataInicio) return null; const data = dayjsPtBr(dataInicio); const dataMenorQueHoje = data.unix() <= dayjsPtBr().unix(); const dataMaiorQueDataInicioNoAcumulador = data.unix() > ((acc?.dataInicio as Dayjs)?.unix?.() || dayjsPtBr(0).unix()); return dataMenorQueHoje && dataMaiorQueDataInicioNoAcumulador ? item : acc; }, null); return currentStatus as PessoaStatus; }; return ( <StatusDropdown selectedStatus={getCurrentStatus()?.status} placement="bottomLeft" autoAdjustOverflow={true}> <Row justify="space-between" style={{ padding: 8 }}> {currentModal !== "pessoasStatus" ? ( <> <Title level={5}>Histórico de Status</Title> <Button style={{ marginLeft: 20 }} type="primary" onClick={(e) => { handleDropdownClick(e); openModal("pessoasStatus"); }} size="small" > + Adicionar </Button> </> ) : ( <> <Title level={5}>Novo Status</Title> <div> <Row gutter={8} justify="end"> <Col> <Button type="primary" size="small" onClick={async () => { await formModalStatus.validateFields(); const item = formModalStatus.getFieldsValue(); const currentItems: PessoaStatus[] = form.getFieldValue(["pessoasStatus"]) || []; let newFormItemValue: PessoaStatus[]; if (!item.id) { item.id = "_" + uuid(); newFormItemValue = [item, ...currentItems]; } else { const editingIndex = currentItems.findIndex((tableItem) => tableItem.id === item.id); currentItems[editingIndex] = item; newFormItemValue = currentItems; } formModalStatus.resetFields(); setCurrentModal(""); refFormShow.current?.close(); onChange?.(newFormItemValue); }} > Salvar </Button> </Col> <Col> <Button size="small" type="default" onClick={onCancel}> Cancelar </Button> </Col> </Row> </div> </> )} </Row> {currentModal !== "pessoasStatus" ? ( <Form.Item name={["pessoasStatus"]} valuePropName="dataSource" style={{ marginBottom: 0 }}> <FTable<PessoaStatus> resizable columns={columnsPessoaStatus} actions={null} pagination={false} /> </Form.Item> ) : ( <Form form={formModalStatus} layout="vertical" initialValues={pessoaStatusFormData} style={{ padding: "10px" }}> <DefaultFormFields /> <Form.Item name="tipoCadastro" initialValue={tipoCadastroInitialValue} hidden> <Input /> </Form.Item> <Row gutter={24}> <Col span={12}> <Form.Item label="Status" name="status" validateTrigger={["onChange", "onBlur"]} rules={[required]} initialValue={PessoaStatusEnum.Ativo} > <SelectEnum OptionsEnum={PessoaStatusEnum} /> </Form.Item> </Col> <Col span={12}> <Form.Item rules={[required]} label="Data de Ínicio" name="dataInicio" validateTrigger={["onChange", "onBlur"]} > <FDatePicker /> </Form.Item> </Col> </Row> <Row gutter={24}> <Col span={24}> <Form.Item label="Observação" name="observacao" validateTrigger={["onChange", "onBlur"]} rules={[{ whitespace: true }]} > <Input maxLength={14} size="small" /> </Form.Item> </Col> </Row> </Form> )} </StatusDropdown> ); }; // Em outro arquivo <Form.Item label="Status" name={["pessoasStatus"]} validateTrigger={["onChange", "onBlur"]} rules={[{ required: true, message: "Por favor, selecione o tipo de cadastro." }]} > <StatusHistory tipoCadastroInitialValue={tipoCadastroInitialValue} form={form} /> </Form.Item> o que posso fazer , tem uma imagem abaixo de como esta a tela hoje