0

Olá. Estou atuando em uma task front-end aqui na empresa e preciso criar uma caixa de seleção que permite que o usuário escolha várias opções de períodos (últimos 7 dias, 15 dias, etc). O front utiliza Material UI (MUI) para compor esse tipo de componente.

O problema é que eles precisam de duas informações sendo exibida dentro das opções do menu: um texto principal (exemplo: "Hoje") e um texto auxiliar com essa data/período (No caso do exemplo de hoje, seria "14/12/2022")

Pra ficar mais óbvio o que preciso fazer, a imagem abaixo é do protótipo que me foi enviado.

Imagem de referência

Eu já tentei fazer da seguinte forma:

      <FormControl sx={{ width: "300px" }}>
            <InputLabel id="demo-simple-select-label">Comparar com</InputLabel>
            <Select
              size="small"
              labelId="demo-simple-select-label"
              id="demo-simple-select"
              value={1}
              label="Comparar com"
              onChange={() => {}}
            >
              <MenuItem value={1}>
                <Stack
                  direction="row"
                  justifyContent="space-between"
                  alignItems="center"
                >
                  <Typography sx={{ mr: 1 }}>Hoje</Typography>
                  <Typography variant="subtitle2">
                    {dayjs().format("DD/MM/YYYY")}
                  </Typography>
                </Stack>
              </MenuItem>
              <MenuItem value={20}>placeholder</MenuItem>
              <MenuItem value={30}>placeholder</MenuItem>
            </Select>
     </FormControl>

E tive o seguinte resultado:

Resultado do meu código

Porém, existem dois comportamentos que não estão de acordo com o esperado. Como exibido no protótipo (primeira imagem anexada), ao selecionar uma das opções, a "label" do select precisa exibir apenas o texto auxiliar (que contém a data selecionada, ex: 14/12/2022, ao invés de "Hoje" ou "07/12-2022 - 14/12/2022" ao invés de "Últimos 7 dias").

Além disso, por algum motivo o justifyContent="space-between" aplicado no <MenuItem> não é aplicado dentro das opções, apenas quando a opção é selecionada e exibida no select.

Gostaria de saber se é possível resolver esses dois problemas com o MUI e como posso me aproximar o máximo possível do protótipo utilizando MUI.

1 Resposta 1

0

Para cada item (<MenuItem />) você pode estilizar para ficar com duas linhas:

<MenuItem>
  <Box>
    <Typography variant="h6">Hoje</Typography>
    <Typography>28 nov. 2022</Typography>
  </Box>
</MenuItem>

Para alterar o texto do label, pode utilizar a prop renderValue do <Select />, ficando da seguinte forma:

const menuItems = [
  {
    primaryText: "Hoje",
    secondaryText: "28 nov. 2022"
  },
  {
    primaryText: "Últimos 7 dias",
    secondaryText: "21 nov. a 28 nov. 2022"
  }
];

export default function BasicSelect() {
  const [selected, setSelected] = React.useState("");

  const handleChange = (event: SelectChangeEvent) => {
    setSelected(event.target.value);
  };

  return (
    <Box sx={{ minWidth: 120 }}>
      <FormControl fullWidth>
        <InputLabel>Período principal</InputLabel>

        <Select
          value={selected}
          label="Período principal"
          renderValue={(index) => menuItems[index].secondaryText}
          onChange={handleChange}
        >
          {menuItems.map(({ primaryText, secondaryText }, index) => (
            <MenuItem value={index} key={primaryText}>
              <Box>
                <Typography variant="h6">{primaryText}</Typography>
                <Typography>{secondaryText}</Typography>
              </Box>
            </MenuItem>
          ))}
        </Select>
      </FormControl>
    </Box>
  );
}

Resultado do código

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .