Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3368 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

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