@jigowatts/jigowatts-ui 1.2.0 → 1.2.1
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.
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../../assets/index5.css');const l=require("react/jsx-runtime"),f=require("@mui/icons-material"),n=require("@mui/material"),A=require("react-hook-form"),B="_placeholder_egyvt_6",_={placeholder:B},x=g=>{const{control:
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../../assets/index5.css');const l=require("react/jsx-runtime"),f=require("@mui/icons-material"),n=require("@mui/material"),A=require("react-hook-form"),B="_placeholder_egyvt_6",_={placeholder:B},x=g=>{const{control:v,name:y,options:a,defaultValue:j,isMulti:t,placeholder:b,emptyValue:i=t?[]:"",onChange:s,onClear:u,inputProps:M}=g,c=r=>Array.isArray(r)&&r.length||!t&&r;return l.jsx(n.Box,{display:"grid",children:l.jsx(A.Controller,{control:v,name:y,defaultValue:j,render:({field:r,fieldState:p})=>{var d;return l.jsxs(n.FormControl,{error:p.invalid,children:[l.jsx(n.Select,{...r,onChange:(e,o)=>{!t&&e.target.value===""?r.onChange(void 0):r.onChange(e),s==null||s(e,o)},multiple:t,size:"small",value:r.value??i,displayEmpty:!0,inputProps:{...M},renderValue:()=>{var o;const e=r.value;if(t&&Array.isArray(e)){if(e.length)return e.map(C=>{var h;return(h=a.find(S=>S.value===C))==null?void 0:h.label}).join(", ")}else if(e&&(typeof e=="string"||typeof e=="number"))return(o=a.find(m=>m.value===e))==null?void 0:o.label;return l.jsx("span",{className:_.placeholder,children:b})},endAdornment:l.jsx(n.IconButton,{sx:{visibility:c(r.value)?"visible":"hidden"},onClick:e=>{r.onChange(t?[]:i===""?void 0:i),u==null||u(e)},children:l.jsx(f.Clear,{})}),sx:{"& .MuiSelect-iconOutlined":{display:c(r.value)?"none":""},"&.Mui-focused .MuiIconButton-root":{color:"primary.main"},"& .MuiSelect-select ":{whiteSpace:"break-spaces !important",paddingRight:"4px !important",fontSize:{xs:"1rem",sm:"0.875rem"},paddingLeft:"9.5px"},paddingRight:"4px !important"},children:a.map(e=>l.jsxs(n.MenuItem,{value:e.value,children:[" ",e.label," "]},e.value))}),l.jsx(n.FormHelperText,{children:(d=p.error)==null?void 0:d.message})]})}})})};exports.SelectBoxController=x;exports.default=x;
|
|
2
2
|
//# sourceMappingURL=index.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs.js","sources":["../../../src/components/SelectBoxController/index.tsx"],"sourcesContent":["import React from \"react\";\nimport { Clear } from \"@mui/icons-material\";\nimport {\n Box,\n FormControl,\n FormHelperText,\n IconButton,\n InputBaseComponentProps,\n MenuItem,\n Select,\n SelectChangeEvent,\n} from \"@mui/material\";\nimport {\n Controller,\n FieldPath,\n FieldValues,\n PathValue,\n type Control,\n} from \"react-hook-form\";\n\nimport styles from \"./index.module.scss\";\n\nexport type SelectBoxOption = {\n readonly label: string;\n readonly value: string | number;\n};\n\ntype Props<T extends FieldValues> = {\n control: Control<T>;\n name: FieldPath<T>;\n options: SelectBoxOption[];\n defaultValue?: PathValue<T, FieldPath<T>>;\n emptyValue?: [] | string | null | undefined;\n isMulti: boolean;\n placeholder?: string;\n onChange?: (\n event: SelectChangeEvent<unknown>,\n child: React.ReactNode,\n ) => void;\n onClear?: React.MouseEventHandler<HTMLButtonElement> | undefined;\n inputProps?: InputBaseComponentProps;\n};\n\nexport const SelectBoxController = <T extends FieldValues>(props: Props<T>) => {\n const {\n control,\n name,\n options,\n defaultValue,\n isMulti,\n placeholder,\n emptyValue = isMulti ? [] : \"\",\n onChange,\n onClear,\n inputProps,\n } = props;\n\n const existValue = (\n value: SelectBoxOption[\"value\"] | SelectBoxOption[] | null,\n ) => {\n return (Array.isArray(value) && value.length) || (!isMulti && value);\n };\n\n return (\n <Box display={\"grid\"}>\n <Controller\n control={control}\n name={name}\n defaultValue={defaultValue}\n render={({ field, fieldState }) => (\n <FormControl error={fieldState.invalid}>\n <Select\n {...field}\n onChange={(event, child) => {\n if (!isMulti && event.target.value === \"\") {\n field.onChange(undefined);\n } else {\n field.onChange(event);\n }\n onChange?.(event, child);\n }}\n multiple={isMulti}\n size=\"small\"\n value={emptyValue}\n displayEmpty\n inputProps={{ ...inputProps }}\n renderValue={() => {\n const value = field.value;\n if (isMulti && Array.isArray(value)) {\n if (value.length) {\n const labels = value.map(\n (val: SelectBoxOption[\"value\"]) =>\n options.find((option) => option.value === val)?.label,\n );\n return labels.join(\", \");\n }\n } else if (\n value &&\n (typeof value === \"string\" || typeof value === \"number\")\n ) {\n return options.find((option) => option.value === value)\n ?.label;\n }\n return (\n <span className={styles.placeholder}>{placeholder}</span>\n );\n }}\n endAdornment={\n <IconButton\n sx={{\n visibility: existValue(field.value) ? \"visible\" : \"hidden\",\n }}\n onClick={(event) => {\n field.onChange(\n isMulti ? [] : emptyValue === \"\" ? undefined : emptyValue,\n );\n onClear?.(event);\n }}\n >\n <Clear />\n </IconButton>\n }\n sx={{\n \"& .MuiSelect-iconOutlined\": {\n display: existValue(field.value) ? \"none\" : \"\",\n },\n \"&.Mui-focused .MuiIconButton-root\": {\n color: \"primary.main\",\n },\n \"& .MuiSelect-select \": {\n whiteSpace: \"break-spaces !important\",\n paddingRight: \"4px !important\",\n fontSize: {\n xs: \"1rem\",\n sm: \"0.875rem\",\n },\n paddingLeft: \"9.5px\",\n },\n paddingRight: \"4px !important\",\n }}\n >\n {options.map((m) => (\n <MenuItem value={m.value} key={m.value}>\n {\" \"}\n {m.label}{\" \"}\n </MenuItem>\n ))}\n </Select>\n <FormHelperText>{fieldState.error?.message}</FormHelperText>\n </FormControl>\n )}\n />\n </Box>\n );\n};\n\nexport default SelectBoxController;\n"],"names":["SelectBoxController","props","control","name","options","defaultValue","isMulti","placeholder","emptyValue","onChange","onClear","inputProps","existValue","value","jsx","Box","Controller","field","fieldState","jsxs","FormControl","Select","event","child","val","_a","option","styles","IconButton","Clear","m","MenuItem","FormHelperText"],"mappings":"qRA2CaA,EAA8CC,GAAoB,CACvE,KAAA,CACJ,QAAAC,EACA,KAAAC,EACA,QAAAC,EACA,aAAAC,EACA,QAAAC,EACA,YAAAC,EACA,WAAAC,EAAaF,EAAU,CAAA,EAAK,GAC5B,SAAAG,EACA,QAAAC,EACA,WAAAC,CAAA,EACEV,EAEEW,EACJC,GAEQ,MAAM,QAAQA,CAAK,GAAKA,EAAM,QAAY,CAACP,GAAWO,EAI9D,OAAAC,EAAAA,IAACC,EAAAA,IAAI,CAAA,QAAS,OACZ,SAAAD,EAAA,IAACE,EAAA,WAAA,CACC,QAAAd,EACA,KAAAC,EACA,aAAAE,EACA,OAAQ,CAAC,CAAE,MAAAY,EAAO,WAAAC,KACfC,OAAAA,OAAAA,EAAAA,KAAAC,EAAA,YAAA,CAAY,MAAOF,EAAW,QAC7B,SAAA,CAAAJ,EAAA,IAACO,EAAA,OAAA,CACE,GAAGJ,EACJ,SAAU,CAACK,EAAOC,IAAU,CACtB,CAACjB,GAAWgB,EAAM,OAAO,QAAU,GACrCL,EAAM,SAAS,MAAS,EAExBA,EAAM,SAASK,CAAK,EAEtBb,GAAA,MAAAA,EAAWa,EAAOC,EACpB,EACA,SAAUjB,EACV,KAAK,QACL,
|
|
1
|
+
{"version":3,"file":"index.cjs.js","sources":["../../../src/components/SelectBoxController/index.tsx"],"sourcesContent":["import React from \"react\";\nimport { Clear } from \"@mui/icons-material\";\nimport {\n Box,\n FormControl,\n FormHelperText,\n IconButton,\n InputBaseComponentProps,\n MenuItem,\n Select,\n SelectChangeEvent,\n} from \"@mui/material\";\nimport {\n Controller,\n FieldPath,\n FieldValues,\n PathValue,\n type Control,\n} from \"react-hook-form\";\n\nimport styles from \"./index.module.scss\";\n\nexport type SelectBoxOption = {\n readonly label: string;\n readonly value: string | number;\n};\n\ntype Props<T extends FieldValues> = {\n control: Control<T>;\n name: FieldPath<T>;\n options: SelectBoxOption[];\n defaultValue?: PathValue<T, FieldPath<T>>;\n emptyValue?: [] | string | null | undefined;\n isMulti: boolean;\n placeholder?: string;\n onChange?: (\n event: SelectChangeEvent<unknown>,\n child: React.ReactNode,\n ) => void;\n onClear?: React.MouseEventHandler<HTMLButtonElement> | undefined;\n inputProps?: InputBaseComponentProps;\n};\n\nexport const SelectBoxController = <T extends FieldValues>(props: Props<T>) => {\n const {\n control,\n name,\n options,\n defaultValue,\n isMulti,\n placeholder,\n emptyValue = isMulti ? [] : \"\",\n onChange,\n onClear,\n inputProps,\n } = props;\n\n const existValue = (\n value: SelectBoxOption[\"value\"] | SelectBoxOption[] | null,\n ) => {\n return (Array.isArray(value) && value.length) || (!isMulti && value);\n };\n\n return (\n <Box display={\"grid\"}>\n <Controller\n control={control}\n name={name}\n defaultValue={defaultValue}\n render={({ field, fieldState }) => (\n <FormControl error={fieldState.invalid}>\n <Select\n {...field}\n onChange={(event, child) => {\n if (!isMulti && event.target.value === \"\") {\n field.onChange(undefined);\n } else {\n field.onChange(event);\n }\n onChange?.(event, child);\n }}\n multiple={isMulti}\n size=\"small\"\n value={field.value ?? emptyValue}\n displayEmpty\n inputProps={{ ...inputProps }}\n renderValue={() => {\n const value = field.value;\n if (isMulti && Array.isArray(value)) {\n if (value.length) {\n const labels = value.map(\n (val: SelectBoxOption[\"value\"]) =>\n options.find((option) => option.value === val)?.label,\n );\n return labels.join(\", \");\n }\n } else if (\n value &&\n (typeof value === \"string\" || typeof value === \"number\")\n ) {\n return options.find((option) => option.value === value)\n ?.label;\n }\n return (\n <span className={styles.placeholder}>{placeholder}</span>\n );\n }}\n endAdornment={\n <IconButton\n sx={{\n visibility: existValue(field.value) ? \"visible\" : \"hidden\",\n }}\n onClick={(event) => {\n field.onChange(\n isMulti ? [] : emptyValue === \"\" ? undefined : emptyValue,\n );\n onClear?.(event);\n }}\n >\n <Clear />\n </IconButton>\n }\n sx={{\n \"& .MuiSelect-iconOutlined\": {\n display: existValue(field.value) ? \"none\" : \"\",\n },\n \"&.Mui-focused .MuiIconButton-root\": {\n color: \"primary.main\",\n },\n \"& .MuiSelect-select \": {\n whiteSpace: \"break-spaces !important\",\n paddingRight: \"4px !important\",\n fontSize: {\n xs: \"1rem\",\n sm: \"0.875rem\",\n },\n paddingLeft: \"9.5px\",\n },\n paddingRight: \"4px !important\",\n }}\n >\n {options.map((m) => (\n <MenuItem value={m.value} key={m.value}>\n {\" \"}\n {m.label}{\" \"}\n </MenuItem>\n ))}\n </Select>\n <FormHelperText>{fieldState.error?.message}</FormHelperText>\n </FormControl>\n )}\n />\n </Box>\n );\n};\n\nexport default SelectBoxController;\n"],"names":["SelectBoxController","props","control","name","options","defaultValue","isMulti","placeholder","emptyValue","onChange","onClear","inputProps","existValue","value","jsx","Box","Controller","field","fieldState","jsxs","FormControl","Select","event","child","val","_a","option","styles","IconButton","Clear","m","MenuItem","FormHelperText"],"mappings":"qRA2CaA,EAA8CC,GAAoB,CACvE,KAAA,CACJ,QAAAC,EACA,KAAAC,EACA,QAAAC,EACA,aAAAC,EACA,QAAAC,EACA,YAAAC,EACA,WAAAC,EAAaF,EAAU,CAAA,EAAK,GAC5B,SAAAG,EACA,QAAAC,EACA,WAAAC,CAAA,EACEV,EAEEW,EACJC,GAEQ,MAAM,QAAQA,CAAK,GAAKA,EAAM,QAAY,CAACP,GAAWO,EAI9D,OAAAC,EAAAA,IAACC,EAAAA,IAAI,CAAA,QAAS,OACZ,SAAAD,EAAA,IAACE,EAAA,WAAA,CACC,QAAAd,EACA,KAAAC,EACA,aAAAE,EACA,OAAQ,CAAC,CAAE,MAAAY,EAAO,WAAAC,KACfC,OAAAA,OAAAA,EAAAA,KAAAC,EAAA,YAAA,CAAY,MAAOF,EAAW,QAC7B,SAAA,CAAAJ,EAAA,IAACO,EAAA,OAAA,CACE,GAAGJ,EACJ,SAAU,CAACK,EAAOC,IAAU,CACtB,CAACjB,GAAWgB,EAAM,OAAO,QAAU,GACrCL,EAAM,SAAS,MAAS,EAExBA,EAAM,SAASK,CAAK,EAEtBb,GAAA,MAAAA,EAAWa,EAAOC,EACpB,EACA,SAAUjB,EACV,KAAK,QACL,MAAOW,EAAM,OAAST,EACtB,aAAY,GACZ,WAAY,CAAE,GAAGG,CAAW,EAC5B,YAAa,IAAM,OACjB,MAAME,EAAQI,EAAM,MACpB,GAAIX,GAAW,MAAM,QAAQO,CAAK,GAChC,GAAIA,EAAM,OAKD,OAJQA,EAAM,IAClBW,UACC,OAAAC,EAAArB,EAAQ,KAAMsB,GAAWA,EAAO,QAAUF,CAAG,IAA7C,YAAAC,EAAgD,MACpD,EACc,KAAK,IAAI,UAGzBZ,IACC,OAAOA,GAAU,UAAY,OAAOA,GAAU,UAE/C,OAAOY,EAAArB,EAAQ,KAAMsB,GAAWA,EAAO,QAAUb,CAAK,IAA/C,YAAAY,EACH,MAEN,OACGX,EAAA,IAAA,OAAA,CAAK,UAAWa,EAAO,YAAc,SAAYpB,EAAA,CAEtD,EACA,aACEO,EAAA,IAACc,EAAA,WAAA,CACC,GAAI,CACF,WAAYhB,EAAWK,EAAM,KAAK,EAAI,UAAY,QACpD,EACA,QAAUK,GAAU,CACZL,EAAA,SACJX,EAAU,CAAK,EAAAE,IAAe,GAAK,OAAYA,CACjD,EACAE,GAAA,MAAAA,EAAUY,EACZ,EAEA,eAACO,EAAAA,MAAM,CAAA,CAAA,CAAA,CACT,EAEF,GAAI,CACF,4BAA6B,CAC3B,QAASjB,EAAWK,EAAM,KAAK,EAAI,OAAS,EAC9C,EACA,oCAAqC,CACnC,MAAO,cACT,EACA,uBAAwB,CACtB,WAAY,0BACZ,aAAc,iBACd,SAAU,CACR,GAAI,OACJ,GAAI,UACN,EACA,YAAa,OACf,EACA,aAAc,gBAChB,EAEC,SAAAb,EAAQ,IAAK0B,UACXC,EAAS,SAAA,CAAA,MAAOD,EAAE,MAChB,SAAA,CAAA,IACAA,EAAE,MAAO,GAAA,CAFmB,EAAAA,EAAE,KAGjC,CACD,CAAA,CACH,EACChB,EAAA,IAAAkB,EAAA,eAAA,CAAgB,UAAWP,EAAAP,EAAA,QAAA,YAAAO,EAAO,OAAQ,CAAA,CAAA,CAC7C,CAAA,EAAA,CAAA,EAGN,CAEJ"}
|
|
@@ -11,11 +11,11 @@ import '../../assets/index5.css';const z = "_placeholder_egyvt_6", F = {
|
|
|
11
11
|
options: t,
|
|
12
12
|
defaultValue: x,
|
|
13
13
|
isMulti: n,
|
|
14
|
-
placeholder:
|
|
14
|
+
placeholder: b,
|
|
15
15
|
emptyValue: a = n ? [] : "",
|
|
16
16
|
onChange: i,
|
|
17
17
|
onClear: s,
|
|
18
|
-
inputProps:
|
|
18
|
+
inputProps: f
|
|
19
19
|
} = g, p = (r) => Array.isArray(r) && r.length || !n && r;
|
|
20
20
|
return /* @__PURE__ */ l(S, { display: "grid", children: /* @__PURE__ */ l(
|
|
21
21
|
k,
|
|
@@ -35,9 +35,9 @@ import '../../assets/index5.css';const z = "_placeholder_egyvt_6", F = {
|
|
|
35
35
|
},
|
|
36
36
|
multiple: n,
|
|
37
37
|
size: "small",
|
|
38
|
-
value: a,
|
|
38
|
+
value: r.value ?? a,
|
|
39
39
|
displayEmpty: !0,
|
|
40
|
-
inputProps: { ...
|
|
40
|
+
inputProps: { ...f },
|
|
41
41
|
renderValue: () => {
|
|
42
42
|
var o;
|
|
43
43
|
const e = r.value;
|
|
@@ -51,7 +51,7 @@ import '../../assets/index5.css';const z = "_placeholder_egyvt_6", F = {
|
|
|
51
51
|
).join(", ");
|
|
52
52
|
} else if (e && (typeof e == "string" || typeof e == "number"))
|
|
53
53
|
return (o = t.find((d) => d.value === e)) == null ? void 0 : o.label;
|
|
54
|
-
return /* @__PURE__ */ l("span", { className: F.placeholder, children:
|
|
54
|
+
return /* @__PURE__ */ l("span", { className: F.placeholder, children: b });
|
|
55
55
|
},
|
|
56
56
|
endAdornment: /* @__PURE__ */ l(
|
|
57
57
|
I,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.es.js","sources":["../../../src/components/SelectBoxController/index.tsx"],"sourcesContent":["import React from \"react\";\nimport { Clear } from \"@mui/icons-material\";\nimport {\n Box,\n FormControl,\n FormHelperText,\n IconButton,\n InputBaseComponentProps,\n MenuItem,\n Select,\n SelectChangeEvent,\n} from \"@mui/material\";\nimport {\n Controller,\n FieldPath,\n FieldValues,\n PathValue,\n type Control,\n} from \"react-hook-form\";\n\nimport styles from \"./index.module.scss\";\n\nexport type SelectBoxOption = {\n readonly label: string;\n readonly value: string | number;\n};\n\ntype Props<T extends FieldValues> = {\n control: Control<T>;\n name: FieldPath<T>;\n options: SelectBoxOption[];\n defaultValue?: PathValue<T, FieldPath<T>>;\n emptyValue?: [] | string | null | undefined;\n isMulti: boolean;\n placeholder?: string;\n onChange?: (\n event: SelectChangeEvent<unknown>,\n child: React.ReactNode,\n ) => void;\n onClear?: React.MouseEventHandler<HTMLButtonElement> | undefined;\n inputProps?: InputBaseComponentProps;\n};\n\nexport const SelectBoxController = <T extends FieldValues>(props: Props<T>) => {\n const {\n control,\n name,\n options,\n defaultValue,\n isMulti,\n placeholder,\n emptyValue = isMulti ? [] : \"\",\n onChange,\n onClear,\n inputProps,\n } = props;\n\n const existValue = (\n value: SelectBoxOption[\"value\"] | SelectBoxOption[] | null,\n ) => {\n return (Array.isArray(value) && value.length) || (!isMulti && value);\n };\n\n return (\n <Box display={\"grid\"}>\n <Controller\n control={control}\n name={name}\n defaultValue={defaultValue}\n render={({ field, fieldState }) => (\n <FormControl error={fieldState.invalid}>\n <Select\n {...field}\n onChange={(event, child) => {\n if (!isMulti && event.target.value === \"\") {\n field.onChange(undefined);\n } else {\n field.onChange(event);\n }\n onChange?.(event, child);\n }}\n multiple={isMulti}\n size=\"small\"\n value={emptyValue}\n displayEmpty\n inputProps={{ ...inputProps }}\n renderValue={() => {\n const value = field.value;\n if (isMulti && Array.isArray(value)) {\n if (value.length) {\n const labels = value.map(\n (val: SelectBoxOption[\"value\"]) =>\n options.find((option) => option.value === val)?.label,\n );\n return labels.join(\", \");\n }\n } else if (\n value &&\n (typeof value === \"string\" || typeof value === \"number\")\n ) {\n return options.find((option) => option.value === value)\n ?.label;\n }\n return (\n <span className={styles.placeholder}>{placeholder}</span>\n );\n }}\n endAdornment={\n <IconButton\n sx={{\n visibility: existValue(field.value) ? \"visible\" : \"hidden\",\n }}\n onClick={(event) => {\n field.onChange(\n isMulti ? [] : emptyValue === \"\" ? undefined : emptyValue,\n );\n onClear?.(event);\n }}\n >\n <Clear />\n </IconButton>\n }\n sx={{\n \"& .MuiSelect-iconOutlined\": {\n display: existValue(field.value) ? \"none\" : \"\",\n },\n \"&.Mui-focused .MuiIconButton-root\": {\n color: \"primary.main\",\n },\n \"& .MuiSelect-select \": {\n whiteSpace: \"break-spaces !important\",\n paddingRight: \"4px !important\",\n fontSize: {\n xs: \"1rem\",\n sm: \"0.875rem\",\n },\n paddingLeft: \"9.5px\",\n },\n paddingRight: \"4px !important\",\n }}\n >\n {options.map((m) => (\n <MenuItem value={m.value} key={m.value}>\n {\" \"}\n {m.label}{\" \"}\n </MenuItem>\n ))}\n </Select>\n <FormHelperText>{fieldState.error?.message}</FormHelperText>\n </FormControl>\n )}\n />\n </Box>\n );\n};\n\nexport default SelectBoxController;\n"],"names":["SelectBoxController","props","control","name","options","defaultValue","isMulti","placeholder","emptyValue","onChange","onClear","inputProps","existValue","value","jsx","Box","Controller","field","fieldState","jsxs","FormControl","Select","event","child","val","_a","option","styles","IconButton","Clear","m","MenuItem","FormHelperText"],"mappings":";;;;;;GA2CaA,IAAsB,CAAwBC,MAAoB;AACvE,QAAA;AAAA,IACJ,SAAAC;AAAA,IACA,MAAAC;AAAA,IACA,SAAAC;AAAA,IACA,cAAAC;AAAA,IACA,SAAAC;AAAA,IACA,aAAAC;AAAA,IACA,YAAAC,IAAaF,IAAU,CAAA,IAAK;AAAA,IAC5B,UAAAG;AAAA,IACA,SAAAC;AAAA,IACA,YAAAC;AAAA,EAAA,IACEV,GAEEW,IAAa,CACjBC,MAEQ,MAAM,QAAQA,CAAK,KAAKA,EAAM,UAAY,CAACP,KAAWO;AAI9D,SAAA,gBAAAC,EAACC,GAAI,EAAA,SAAS,QACZ,UAAA,gBAAAD;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,SAAAd;AAAA,MACA,MAAAC;AAAA,MACA,cAAAE;AAAA,MACA,QAAQ,CAAC,EAAE,OAAAY,GAAO,YAAAC,QACf;;AAAA,+BAAAC,EAAAC,GAAA,EAAY,OAAOF,EAAW,SAC7B,UAAA;AAAA,UAAA,gBAAAJ;AAAA,YAACO;AAAA,YAAA;AAAA,cACE,GAAGJ;AAAA,cACJ,UAAU,CAACK,GAAOC,MAAU;AAC1B,gBAAI,CAACjB,KAAWgB,EAAM,OAAO,UAAU,KACrCL,EAAM,SAAS,MAAS,IAExBA,EAAM,SAASK,CAAK,GAEtBb,KAAA,QAAAA,EAAWa,GAAOC;AAAA,cACpB;AAAA,cACA,UAAUjB;AAAA,cACV,MAAK;AAAA,cACL,
|
|
1
|
+
{"version":3,"file":"index.es.js","sources":["../../../src/components/SelectBoxController/index.tsx"],"sourcesContent":["import React from \"react\";\nimport { Clear } from \"@mui/icons-material\";\nimport {\n Box,\n FormControl,\n FormHelperText,\n IconButton,\n InputBaseComponentProps,\n MenuItem,\n Select,\n SelectChangeEvent,\n} from \"@mui/material\";\nimport {\n Controller,\n FieldPath,\n FieldValues,\n PathValue,\n type Control,\n} from \"react-hook-form\";\n\nimport styles from \"./index.module.scss\";\n\nexport type SelectBoxOption = {\n readonly label: string;\n readonly value: string | number;\n};\n\ntype Props<T extends FieldValues> = {\n control: Control<T>;\n name: FieldPath<T>;\n options: SelectBoxOption[];\n defaultValue?: PathValue<T, FieldPath<T>>;\n emptyValue?: [] | string | null | undefined;\n isMulti: boolean;\n placeholder?: string;\n onChange?: (\n event: SelectChangeEvent<unknown>,\n child: React.ReactNode,\n ) => void;\n onClear?: React.MouseEventHandler<HTMLButtonElement> | undefined;\n inputProps?: InputBaseComponentProps;\n};\n\nexport const SelectBoxController = <T extends FieldValues>(props: Props<T>) => {\n const {\n control,\n name,\n options,\n defaultValue,\n isMulti,\n placeholder,\n emptyValue = isMulti ? [] : \"\",\n onChange,\n onClear,\n inputProps,\n } = props;\n\n const existValue = (\n value: SelectBoxOption[\"value\"] | SelectBoxOption[] | null,\n ) => {\n return (Array.isArray(value) && value.length) || (!isMulti && value);\n };\n\n return (\n <Box display={\"grid\"}>\n <Controller\n control={control}\n name={name}\n defaultValue={defaultValue}\n render={({ field, fieldState }) => (\n <FormControl error={fieldState.invalid}>\n <Select\n {...field}\n onChange={(event, child) => {\n if (!isMulti && event.target.value === \"\") {\n field.onChange(undefined);\n } else {\n field.onChange(event);\n }\n onChange?.(event, child);\n }}\n multiple={isMulti}\n size=\"small\"\n value={field.value ?? emptyValue}\n displayEmpty\n inputProps={{ ...inputProps }}\n renderValue={() => {\n const value = field.value;\n if (isMulti && Array.isArray(value)) {\n if (value.length) {\n const labels = value.map(\n (val: SelectBoxOption[\"value\"]) =>\n options.find((option) => option.value === val)?.label,\n );\n return labels.join(\", \");\n }\n } else if (\n value &&\n (typeof value === \"string\" || typeof value === \"number\")\n ) {\n return options.find((option) => option.value === value)\n ?.label;\n }\n return (\n <span className={styles.placeholder}>{placeholder}</span>\n );\n }}\n endAdornment={\n <IconButton\n sx={{\n visibility: existValue(field.value) ? \"visible\" : \"hidden\",\n }}\n onClick={(event) => {\n field.onChange(\n isMulti ? [] : emptyValue === \"\" ? undefined : emptyValue,\n );\n onClear?.(event);\n }}\n >\n <Clear />\n </IconButton>\n }\n sx={{\n \"& .MuiSelect-iconOutlined\": {\n display: existValue(field.value) ? \"none\" : \"\",\n },\n \"&.Mui-focused .MuiIconButton-root\": {\n color: \"primary.main\",\n },\n \"& .MuiSelect-select \": {\n whiteSpace: \"break-spaces !important\",\n paddingRight: \"4px !important\",\n fontSize: {\n xs: \"1rem\",\n sm: \"0.875rem\",\n },\n paddingLeft: \"9.5px\",\n },\n paddingRight: \"4px !important\",\n }}\n >\n {options.map((m) => (\n <MenuItem value={m.value} key={m.value}>\n {\" \"}\n {m.label}{\" \"}\n </MenuItem>\n ))}\n </Select>\n <FormHelperText>{fieldState.error?.message}</FormHelperText>\n </FormControl>\n )}\n />\n </Box>\n );\n};\n\nexport default SelectBoxController;\n"],"names":["SelectBoxController","props","control","name","options","defaultValue","isMulti","placeholder","emptyValue","onChange","onClear","inputProps","existValue","value","jsx","Box","Controller","field","fieldState","jsxs","FormControl","Select","event","child","val","_a","option","styles","IconButton","Clear","m","MenuItem","FormHelperText"],"mappings":"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"}
|