Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3358 | Rev 3368 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
3358 stevensc 1 
import React, { useEffect } from 'react'
2 
import { Controller, useForm } from 'react-hook-form'
3 
import { Box, Typography } from '@mui/material'
4 
 
5 
import EmojiGroup from '@components/common/emoji-selector'
6 
 
7 
const EMOJI_PICKERS_POSITIONS = [
8 
  { column: { xs: '1 / 3', md: '2 / 3' }, row: 'auto' },
9 
  { column: { xs: '1 / 2', md: '2 / 3' }, row: '3 / 4' },
10 
  { column: { xs: '2 / 3', md: '2 / 3' }, row: '3 / 4' }
11 
]
12 
 
13 
export default function DailyLogForm({ categories, onSubmit, onSelect }) {
14 
  const { control, watch, handleSubmit } = useForm()
15 
  const formValues = watch()
16 
 
17 
  const submitHandler = handleSubmit(async (data) => onSubmit(data))
18 
 
19 
  useEffect(() => {
20 
    const categoriesSelectedValues = Object.values(formValues)
21 
    const areAllCategoriesSelected = categoriesSelectedValues.every(
22 
      (val) => val !== undefined
23 
    )
24 
 
25 
    if (categoriesSelectedValues.length && areAllCategoriesSelected) {
26 
      submitHandler()
27 
    }
28 
  }, [formValues])
29 
 
30 
  return (
31 
    <Box
32 
      component='form'
33 
      sx={{
34 
        display: 'grid',
35 
        gridTemplateColumns: { xs: 'repeat(2,1fr)', md: 'repeat(3,1fr)' },
36 
        gridTemplateRows: 'repeat(3,1fr)',
37 
        columnGap: '1rem',
38 
        placeItems: 'center'
39 
      }}
40 
    >
41 
      {categories?.map(({ uuid, name, emojis }, index) => (
42 
        <Box
43 
          key={uuid}
44 
          sx={{
45 
            gridColumn: EMOJI_PICKERS_POSITIONS[index].column,
46 
            gridRow: EMOJI_PICKERS_POSITIONS[index].row
47 
          }}
48 
        >
49 
          <Typography variant='h2' textAlign='center'>
50 
            {name}
51 
          </Typography>
52 
 
53 
          <Controller
54 
            control={control}
55 
            name={uuid}
56 
            render={({ field: { onChange } }) => (
57 
              <EmojiGroup>
58 
                {emojis?.map(({ code, image }, index) => (
59 
                  <EmojiGroup.Item
60 
                    key={code}
61 
                    image={image}
62 
                    index={index}
63 
                    onClick={(e) => {
64 
                      e.stopPropagation()
65 
                      onSelect(uuid, code)
66 
                      onChange(code)
67 
                    }}
68 
                  />
69 
                ))}
70 
              </EmojiGroup>
71 
            )}
72 
          />
73 
        </Box>
74 
      ))}
75 
 
76 
      <Box
77 
        sx={{
78 
          gridColumn: { xs: '1 / 3', md: '2 / 3' },
79 
          gridRow: '2 / 3'
80 
        }}
81 
      >
82 
        <img
83 
          src='/images/logo-app-02.png'
84 
          alt='habits image'
85 
          width={150}
86 
          height={150}
87 
        />
88 
      </Box>
89 
    </Box>
90 
  )
91 
}