Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 5 Rev 2775
Línea 1... Línea 1...
1
import React, { useRef } from 'react'
1
import React from 'react'
-
 
2
 
2
import useOutsideClick from '../../hooks/useOutsideClick'
3
import { useOutsideClick } from '@hooks'
Línea 3... Línea 4...
3
 
4
 
4
const ConfirmBox = ({ show, onClose, onAccept }) => {
-
 
5
  const confirmationBoxRef = useRef()
5
const ConfirmBox = ({ show, onClose, onAccept }) => {
Línea 6... Línea 6...
6
  useOutsideClick(confirmationBoxRef, () => onClose())
6
  const [ref] = useOutsideClick(() => onClose())
7
 
7
 
8
  return (
8
  return (
9
    <div
9
    <div
10
      className="popover confirmation fade bs-popover-top show"
10
      className='popover confirmation fade bs-popover-top show'
11
      id="confirmation937427"
11
      id='confirmation937427'
12
      style={{
12
      style={{
13
        position: 'absolute',
13
        position: 'absolute',
14
        top: '-2.5rem',
14
        top: '-2.5rem',
15
        left: '50%',
15
        left: '50%',
16
        transform: 'translate(-50%, -100%)',
16
        transform: 'translate(-50%, -100%)',
17
        width: '120px',
17
        width: '120px',
18
        display: show ? 'block' : 'none',
18
        display: show ? 'block' : 'none'
19
      }}
19
      }}
20
      ref={confirmationBoxRef}
20
      ref={ref}
21
    >
21
    >
22
      <div className="arrow" style={{ left: '46px' }}></div>
22
      <div className='arrow' style={{ left: '46px' }}></div>
23
      <p className="popover-header">¿Está seguro?</p>
23
      <p className='popover-header'>¿Está seguro?</p>
24
      <div className="popover-body">
24
      <div className='popover-body'>
25
        <p className="confirmation-content" style={{ display: 'none' }}></p>
25
        <p className='confirmation-content' style={{ display: 'none' }}></p>
26
        <div className="confirmation-buttons text-center">
26
        <div className='confirmation-buttons text-center'>
27
          <div className="btn-group">
27
          <div className='btn-group'>
28
            <button
28
            <button
29
              type="button"
29
              type='button'
30
              className="h-100 d-flex align-items-center btn btn-sm btn-primary"
30
              className='h-100 d-flex align-items-center btn btn-sm btn-primary'
31
              onClick={() => {
31
              onClick={() => {
32
                onAccept()
32
                onAccept()
33
                onClose()
33
                onClose()
34
              }}
34
              }}
35
            >
35
            >
36
              Si
36
              Si
37
            </button>
37
            </button>
38
            <button
38
            <button
39
              type="button"
39
              type='button'
40
              className="h-100 d-flex align-items-center btn btn-sm btn-secondary"
40
              className='h-100 d-flex align-items-center btn btn-sm btn-secondary'
41
              onClick={() => {
41
              onClick={() => {
42
                onClose()
42
                onClose()
43
              }}
43
              }}