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 
              }}