@zydon/common 2.7.56 → 2.7.57
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -4,6 +4,6 @@ import '@mui/material/FormControlLabel';
|
|
|
4
4
|
import '../../../types/baseField.js';
|
|
5
5
|
import 'react-hook-form';
|
|
6
6
|
|
|
7
|
-
declare const MultiCheckbox: ({ row, name, rules, label, options, spacing, helperText, required, ...other }: MultiCheckboxProps) => react_jsx_runtime.JSX.Element;
|
|
7
|
+
declare const MultiCheckbox: ({ row, name, rules, label, options, spacing, helperText, required, onSelectOption, ...other }: MultiCheckboxProps) => react_jsx_runtime.JSX.Element;
|
|
8
8
|
|
|
9
9
|
export { MultiCheckbox as default };
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import { useFormContext, Controller } from 'react-hook-form';
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
2
|
+
import y from '@mui/material/Checkbox';
|
|
3
|
+
import h from '@mui/material/FormControl';
|
|
4
|
+
import k from '@mui/material/FormControlLabel';
|
|
5
|
+
import M from '@mui/material/FormGroup';
|
|
6
|
+
import L from '@mui/material/FormHelperText';
|
|
7
|
+
import G from '@mui/material/FormLabel';
|
|
8
8
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
9
9
|
|
|
10
|
-
var
|
|
10
|
+
var H=({row:m,name:n,rules:d,label:i,options:s,spacing:a,helperText:f,required:b,onSelectOption:p,...c})=>{let{control:C}=useFormContext(),F=(o,l)=>o.includes(l)?o.filter(r=>r!==l):[...o,l];return jsx(Controller,{name:n,control:C,rules:d,render:({field:{value:o=[],...l},fieldState:{error:r}})=>jsxs(h,{component:"fieldset",children:[i&&jsx(G,{component:"legend",sx:{typography:"body2"},required:b,children:i}),jsx(M,{sx:{...m&&{flexDirection:"row"},"& .MuiFormControlLabel-root":{"&:not(:last-of-type)":{mb:a||0},...m&&{mr:0,"&:not(:last-of-type)":{mr:a||2}}}},children:s.map(e=>jsx(k,{control:jsx(y,{checked:o.includes(e.value),onChange:()=>{let u=F(o,e.value);p&&p(u,o),l.onChange(u);}}),label:e.label,"data-intercom-target":n,...c},e.value))}),(!!r||f)&&jsx(L,{error:!!r,sx:e=>({color:c.disabled?e.palette.grey[500]:void 0}),children:r?r?.message:f})]})})},z=H;
|
|
11
11
|
|
|
12
|
-
export {
|
|
12
|
+
export { z as default };
|
|
13
13
|
//# sourceMappingURL=out.js.map
|
|
14
14
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/form/MultiCheckbox/index.tsx"],"names":["Controller","useFormContext","MuiCheckbox","FormControl","FormControlLabel","FormGroup","FormHelperText","FormLabel","jsx","jsxs","MultiCheckbox","row","name","rules","label","options","spacing","helperText","required","other","control","getSelected","selectedItems","item","value","field","error","option","theme","MultiCheckbox_default"],"mappings":"AAAA,OAAS,cAAAA,EAAY,kBAAAC,MAAsB,kBAC3C,OAAOC,MAAiB,yBACxB,OAAOC,MAAiB,4BACxB,OAAOC,MAAsB,iCAC7B,OAAOC,MAAe,0BACtB,OAAOC,MAAoB,+BAC3B,OAAOC,MAAe,
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/form/MultiCheckbox/index.tsx"],"names":["Controller","useFormContext","MuiCheckbox","FormControl","FormControlLabel","FormGroup","FormHelperText","FormLabel","jsx","jsxs","MultiCheckbox","row","name","rules","label","options","spacing","helperText","required","onSelectOption","other","control","getSelected","selectedItems","item","value","field","error","option","newValue","theme","MultiCheckbox_default"],"mappings":"AAAA,OAAS,cAAAA,EAAY,kBAAAC,MAAsB,kBAC3C,OAAOC,MAAiB,yBACxB,OAAOC,MAAiB,4BACxB,OAAOC,MAAsB,iCAC7B,OAAOC,MAAe,0BACtB,OAAOC,MAAoB,+BAC3B,OAAOC,MAAe,0BA6Bd,OAEI,OAAAC,EAFJ,QAAAC,MAAA,oBAzBR,IAAMC,EAAgB,CAAC,CACrB,IAAAC,EACA,KAAAC,EACA,MAAAC,EACA,MAAAC,EACA,QAAAC,EACA,QAAAC,EACA,WAAAC,EACA,SAAAC,EACA,eAAAC,EACA,GAAGC,CACL,IAA0B,CACxB,GAAM,CAAE,QAAAC,CAAQ,EAAIpB,EAAe,EAE7BqB,EAAc,CAACC,EAAyBC,IAC5CD,EAAc,SAASC,CAAI,EACvBD,EAAc,OAAOE,GAASA,IAAUD,CAAI,EAC5C,CAAC,GAAGD,EAAeC,CAAI,EAE7B,OACEhB,EAACR,EAAA,CACC,KAAMY,EACN,QAASS,EACT,MAAOR,EACP,OAAQ,CAAC,CAAE,MAAO,CAAE,MAAAY,EAAQ,CAAC,EAAG,GAAGC,CAAM,EAAG,WAAY,CAAE,MAAAC,CAAM,CAAE,IAChElB,EAACN,EAAA,CAAY,UAAU,WACpB,UAAAW,GACCN,EAACD,EAAA,CACC,UAAU,SACV,GAAI,CAAE,WAAY,OAAQ,EAC1B,SAAUW,EAET,SAAAJ,EACH,EAGFN,EAACH,EAAA,CACC,GAAI,CACF,GAAIM,GAAO,CACT,cAAe,KACjB,EACA,8BAA+B,CAC7B,uBAAwB,CACtB,GAAIK,GAAW,CACjB,EACA,GAAIL,GAAO,CACT,GAAI,EACJ,uBAAwB,CACtB,GAAIK,GAAW,CACjB,CACF,CACF,CACF,EAEC,SAAAD,EAAQ,IAAIa,GACXpB,EAACJ,EAAA,CAEC,QACEI,EAACN,EAAA,CACC,QAASuB,EAAM,SAASG,EAAO,KAAK,EACpC,SAAU,IAAM,CACd,IAAMC,EAAWP,EAAYG,EAAOG,EAAO,KAAK,EAE5CT,GAAgBA,EAAeU,EAAUJ,CAAK,EAClDC,EAAM,SAASG,CAAQ,CACzB,EACF,EAEF,MAAOD,EAAO,MACd,uBAAsBhB,EACrB,GAAGQ,GAdCQ,EAAO,KAed,CACD,EACH,GAEE,CAAC,CAACD,GAASV,IACXT,EAACF,EAAA,CACC,MAAO,CAAC,CAACqB,EACT,GAAIG,IAAU,CACZ,MAAOV,EAAM,SAAWU,EAAM,QAAQ,KAAK,GAAG,EAAI,MACpD,GAEC,SAAAH,EAAQA,GAAO,QAAUV,EAC5B,GAEJ,EAEJ,CAEJ,EAEOc,EAAQrB","sourcesContent":["import { Controller, useFormContext } from 'react-hook-form';\nimport MuiCheckbox from '@mui/material/Checkbox';\nimport FormControl from '@mui/material/FormControl';\nimport FormControlLabel from '@mui/material/FormControlLabel';\nimport FormGroup from '@mui/material/FormGroup';\nimport FormHelperText from '@mui/material/FormHelperText';\nimport FormLabel from '@mui/material/FormLabel';\n\nimport { MultiCheckboxProps } from 'types/multiCheckboxProps';\n\nconst MultiCheckbox = ({\n row,\n name,\n rules,\n label,\n options,\n spacing,\n helperText,\n required,\n onSelectOption,\n ...other\n}: MultiCheckboxProps) => {\n const { control } = useFormContext();\n\n const getSelected = (selectedItems: string[], item: string) =>\n selectedItems.includes(item)\n ? selectedItems.filter(value => value !== item)\n : [...selectedItems, item];\n\n return (\n <Controller\n name={name}\n control={control}\n rules={rules}\n render={({ field: { value = [], ...field }, fieldState: { error } }) => (\n <FormControl component=\"fieldset\">\n {label && (\n <FormLabel\n component=\"legend\"\n sx={{ typography: 'body2' }}\n required={required}\n >\n {label}\n </FormLabel>\n )}\n\n <FormGroup\n sx={{\n ...(row && {\n flexDirection: 'row',\n }),\n '& .MuiFormControlLabel-root': {\n '&:not(:last-of-type)': {\n mb: spacing || 0,\n },\n ...(row && {\n mr: 0,\n '&:not(:last-of-type)': {\n mr: spacing || 2,\n },\n }),\n },\n }}\n >\n {options.map(option => (\n <FormControlLabel\n key={option.value}\n control={\n <MuiCheckbox\n checked={value.includes(option.value)}\n onChange={() => {\n const newValue = getSelected(value, option.value);\n\n if (onSelectOption) onSelectOption(newValue, value);\n field.onChange(newValue);\n }}\n />\n }\n label={option.label}\n data-intercom-target={name}\n {...other}\n />\n ))}\n </FormGroup>\n\n {(!!error || helperText) && (\n <FormHelperText\n error={!!error}\n sx={theme => ({\n color: other.disabled ? theme.palette.grey[500] : undefined,\n })}\n >\n {error ? error?.message : helperText}\n </FormHelperText>\n )}\n </FormControl>\n )}\n />\n );\n};\n\nexport default MultiCheckbox;\n"]}
|
|
@@ -13,6 +13,8 @@ interface MultiCheckbox extends Omit<FormControlLabelProps, 'control' | 'label'>
|
|
|
13
13
|
spacing?: number;
|
|
14
14
|
helperText?: React.ReactNode;
|
|
15
15
|
}
|
|
16
|
-
type MultiCheckboxProps = BaseField<MultiCheckbox
|
|
16
|
+
type MultiCheckboxProps = BaseField<MultiCheckbox> & {
|
|
17
|
+
onSelectOption?(newValue: string[], oldValue?: string[]): void;
|
|
18
|
+
};
|
|
17
19
|
|
|
18
20
|
export { MultiCheckbox, MultiCheckboxProps };
|