Renderização de status ativo por padrão

[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 

[Tiago Neves]

Fala, @Gregory

Veja se ajuda:
 

 const [formModalStatus] = useForm({
    initialValues: {
      tipoCadastro: tipoCadastroInitialValue,
      status: PessoaStatusEnum.Ativo,
      dataInicio: null,
      observacao: "",
    },
  });

É bom definir valores padrão para o useForm