Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 2802 Rev 3719
Línea 1... Línea 1...
1 
import React, { useEffect } from 'react'
 1 
import React, { useEffect } from 'react';
2 
import { useSelector } from 'react-redux'
 2 
import { useSelector } from 'react-redux';
3 
import { useForm } from 'react-hook-form'
 3 
import { useForm } from 'react-hook-form';
4 
 
 4 
 
5 
import Modal from 'components/UI/modal/Modal'
 5 
import Modal from '@components/UI/modal/Modal';
6 
import UbicationInput from 'components/UI/inputs/UbicationInput'
 6 
import UbicationInput from '@components/UI/inputs/UbicationInput';
7 
import FormErrorFeedback from 'components/UI/form/FormErrorFeedback'
 7 
import FormErrorFeedback from '@components/UI/form/FormErrorFeedback';
8 
 
 8 
 
9 
const LocationModal = ({
 9 
const LocationModal = ({ show = false, onConfirm = () => {}, onClose = () => {} }) => {
10 
  show = false,
 - 
 
11 
  onConfirm = () => {},
 - 
 
12 
  onClose = () => {}
 - 
 
13 
}) => {
 - 
 
14 
  const labels = useSelector(({ intl }) => intl.labels)
 10 
  const labels = useSelector(({ intl }) => intl.labels);
15 
 
 11 
 
16 
  const {
 12 
  const {
17 
    register,
 13 
    register,
18 
    handleSubmit,
 14 
    handleSubmit,
19 
    setValue,
 15 
    setValue,
20 
    clearErrors,
 16 
    clearErrors,
21 
    watch,
 17 
    watch,
22 
    reset,
 18 
    reset,
23 
    formState: { errors }
 19 
    formState: { errors }
24 
  } = useForm()
 20 
  } = useForm();
25 
 
 21 
 
26 
  const toggleModal = () => {
 22 
  const toggleModal = () => {
27 
    reset()
 23 
    reset();
28 
    onClose()
 24 
    onClose();
29 
  }
 25 
  };
30 
 
 26 
 
31 
  const addressHandler = (address) => {
 27 
  const addressHandler = (address) => {
32 
    Object.entries(address).forEach(([key, value]) => {
 28 
    Object.entries(address).forEach(([key, value]) => {
33 
      if (value) {
 29 
      if (value) {
34 
        register(key)
 30 
        register(key);
35 
        clearErrors(key)
 31 
        clearErrors(key);
36 
        setValue(key, value)
 32 
        setValue(key, value);
37 
      }
 33 
      }
38 
    })
 34 
    });
39 
  }
 35 
  };
40 
 
 36 
 
41 
  const onSubmit = handleSubmit((data) => onConfirm(data))
 37 
  const onSubmit = handleSubmit((data) => onConfirm(data));
42 
 
 38 
 
43 
  useEffect(() => {
 39 
  useEffect(() => {
44 
    register('formatted_address', {
 40 
    register('formatted_address', {
45 
      required: 'por favor seleccione una ubicación correcta'
 41 
      required: 'por favor seleccione una ubicación correcta'
46 
    })
 42 
    });
47 
  }, [])
 43 
  }, []);
48 
 
 44 
 
49 
  return (
 45 
  return (
50 
    <Modal
 - 
 
51 
      title={labels.location}
 46 
    <Modal title={labels.location} show={show} onClose={toggleModal} onAccept={onSubmit}>
52 
      show={show}
 - 
 
53 
      onClose={toggleModal}
 - 
 
54 
      onAccept={onSubmit}
 - 
 
55 
    >
 - 
 
56 
      <UbicationInput
 - 
 
57 
        onGetAddress={addressHandler}
 - 
 
58 
        settedQuery={watch('formatted_address')}
 47 
      <UbicationInput onGetAddress={addressHandler} settedQuery={watch('formatted_address')} />
59 
      />
 - 
 
60 
      {errors.formatted_address && (
 48 
      {errors.formatted_address && (
61 
        <FormErrorFeedback>
 - 
 
62 
          {errors.formatted_address.message}
 49 
        <FormErrorFeedback>{errors.formatted_address.message}</FormErrorFeedback>
63 
        </FormErrorFeedback>
 - 
 
64 
      )}
 50 
      )}
65 
    </Modal>
 51 
    </Modal>
66 
  )
 52 
  );
67 
}
 53 
};
68 
 
 54 
 
69 
export default LocationModal
 55 
export default LocationModal;