Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev Autor Línea Nro. Línea
2861 stevensc 1 
import React from 'react'
2 
import { Checkbox, FormControlLabel, styled } from '@mui/material'
3 
import { useController } from 'react-hook-form'
4 
 
5 
const BpIcon = styled('span')(({ theme }) => ({
6 
  borderRadius: '20px',
7 
  width: 16,
8 
  height: 16,
9 
  boxShadow:
10 
    theme.palette.mode === 'dark'
11 
      ? '0 0 0 1px rgb(16 22 26 / 40%)'
12 
      : 'inset 0 0 0 1px rgba(16,22,26,.2), inset 0 -1px 0 rgba(16,22,26,.1)',
13 
  backgroundColor: theme.palette.mode === 'dark' ? '#394b59' : '#f5f8fa',
14 
  backgroundImage:
15 
    theme.palette.mode === 'dark'
16 
      ? 'linear-gradient(180deg,hsla(0,0%,100%,.05),hsla(0,0%,100%,0))'
17 
      : 'linear-gradient(180deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,0))',
18 
  '.Mui-focusVisible &': {
19 
    outline: '2px auto rgba(19,124,189,.6)',
20 
    outlineOffset: 2
21 
  },
22 
  'input:hover ~ &': {
23 
    backgroundColor: theme.palette.mode === 'dark' ? '#30404d' : '#ebf1f5'
24 
  },
25 
  'input:disabled ~ &': {
26 
    boxShadow: 'none',
27 
    background:
28 
      theme.palette.mode === 'dark'
29 
        ? 'rgba(57,75,89,.5)'
30 
        : 'rgba(206,217,224,.5)'
31 
  }
32 
}))
33 
 
34 
const BpCheckedIcon = styled(BpIcon)({
35 
  backgroundColor: '#137cbd',
36 
  backgroundImage:
37 
    'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))',
38 
  '&::before': {
39 
    display: 'block',
40 
    width: 16,
41 
    height: 16,
42 
    backgroundImage:
43 
      "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath" +
44 
      " fill-rule='evenodd' clip-rule='evenodd' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 " +
45 
      "1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z' fill='%23fff'/%3E%3C/svg%3E\")",
46 
    content: '""'
47 
  },
48 
  'input:hover ~ &': {
49 
    backgroundColor: '#106ba3'
50 
  }
51 
})
52 
 
53 
const CheckboxInput = ({
54 
  name,
55 
  control,
56 
  label,
57 
  rules,
58 
  defaultValue = false,
59 
  onChange: externalOnChange,
3021 stevensc 60 
  labelStyles,
61 
  checkBoxStyles,
2861 stevensc 62 
  ...props
63 
}) => {
64 
  const {
65 
    field: { value, onChange },
66 
    fieldState: { error }
67 
  } = useController({
68 
    name,
69 
    control,
70 
    defaultValue,
71 
    rules
72 
  })
73 
 
74 
  const handleChange = (event) => {
75 
    onChange(event.target.checked)
76 
    if (externalOnChange) {
77 
      externalOnChange(event)
78 
    }
79 
  }
80 
 
81 
  return (
82 
    <FormControlLabel
83 
      control={
84 
        <Checkbox
85 
          checked={value}
86 
          onChange={handleChange}
87 
          icon={<BpIcon />}
88 
          checkedIcon={<BpCheckedIcon />}
3021 stevensc 89 
          sx={checkBoxStyles}
2861 stevensc 90 
          {...props}
91 
        />
92 
      }
93 
      label={label}
94 
      error={!!error}
3021 stevensc 95 
      sx={labelStyles}
2861 stevensc 96 
    />
97 
  )
98 
}
99 
 
100 
export default CheckboxInput