Proyectos de Subversion LeadersLinked - SPA

Rev

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