{"version":3,"sources":["../src/components/gui/components/XGUIToggleOptionField.tsx"],"names":["React","Divider","Stack","ToggleButton","ToggleButtonGroup","Typography","compareProps","prevProps","nextProps","XGUIToggleOptionField","field","currentValue","onChange","options","id","bp","useBreakpoint","value","_e","newValue","opt","XGUIToggleOptionField_default"],"mappings":"sEAAA,UAAYA,MAAW,QAOvB,OACE,WAAAC,EACA,SAAAC,EACA,gBAAAC,EACA,qBAAAC,EACA,cAAAC,MACK,gBAGP,IAAMC,EAAe,CAACC,EAAgBC,IAE7BD,EAAU,eAAiBC,EAAU,aASxCC,EAAoE,OACxE,CAAC,CAAE,MAAAC,EAAO,aAAAC,EAAc,SAAAC,EAAU,QAAAC,EAAU,CAAC,CAAE,IAAM,CACnD,IAAMC,EAAK,cAAcJ,EAAM,OACzBK,EAAKC,EAAc,EAEnBC,EAAaN,GAAgBD,EAAM,aAEzC,OACE,gCACE,gBAACR,EAAA,CACC,UAAU,mBACV,UAAU,MACV,eAAe,gBACf,WAAW,SACX,GAAI,GAEJ,gBAACG,EAAA,CAAW,UAAU,QAAQ,QAASS,EAAI,MAAM,OAC9CJ,EAAM,KACT,EACA,gBAACN,EAAA,CACC,GAAI,CAAE,GAAI,CAAE,EACZ,UAAS,GACT,MAAOa,EACP,SAAU,CAACC,EAAIC,IAAa,CACtBF,IAAUE,GAAYA,IAAa,MACrCP,EAASO,EAAUT,EAAM,KAAMK,CAAE,CAErC,EACA,aAAY,UAAYL,EAAM,MAC9B,KAAK,QACL,UAAS,GACT,MAAM,WAELG,EAAQ,IAAKO,GAEV,gBAACjB,EAAA,CAAa,MAAOiB,EAAI,MAAO,IAAKA,EAAI,MAAM,SAAS,GACrDA,EAAI,MAAQA,EAAI,OAASA,EAAI,KAChC,CAIH,CACH,CACF,EACA,gBAACnB,EAAA,CAAQ,GAAI,CAAE,YAAa,wBAAyB,GAAI,CAAE,EAAG,CAChE,CAEJ,EACAK,CACF,EAEOe,EAAQZ","sourcesContent":["import * as React from \"react\";\nimport {\n  IXGUIFieldBase,\n  TOnChange,\n  TXGUISelectOptionItem,\n} from \"../../../utils/interfaces/gui/fields.interfaces\";\n\nimport {\n  Divider,\n  Stack,\n  ToggleButton,\n  ToggleButtonGroup,\n  Typography,\n} from \"@mui/material\";\nimport { useBreakpoint } from \"../../../hooks/useBreakpoint\";\n\nconst compareProps = (prevProps: any, nextProps: any) => {\n  // return isEqual(prevProps, nextProps);\n  return prevProps.currentValue === nextProps.currentValue;\n};\n\ninterface XGUIToggleOptionFieldProps extends IXGUIFieldBase {\n  onChange: TOnChange<string>;\n  currentValue: string;\n  options: TXGUISelectOptionItem[];\n}\n\nconst XGUIToggleOptionField: React.FC<XGUIToggleOptionFieldProps> = React.memo(\n  ({ field, currentValue, onChange, options = [] }) => {\n    const id = `XGUI-FIELD-${field.name}`;\n    const bp = useBreakpoint();\n\n    const value: any = currentValue ?? field.defaultValue;\n\n    return (\n      <>\n        <Stack\n          className=\"XGUIToggleOption\"\n          direction=\"row\"\n          justifyContent=\"space-between\"\n          alignItems=\"center\"\n          mb={1}\n        >\n          <Typography component=\"label\" htmlFor={id} width=\"40%\">\n            {field.label}\n          </Typography>\n          <ToggleButtonGroup\n            sx={{ ml: 1 }}\n            exclusive\n            value={value}\n            onChange={(_e, newValue) => {\n              if (value !== newValue && newValue !== null) {\n                onChange(newValue, field.name, bp);\n              }\n            }}\n            aria-label={\"toggle \" + field.label}\n            size=\"small\"\n            fullWidth\n            color=\"primary\"\n          >\n            {options.map((opt) => {\n              const el = (\n                <ToggleButton value={opt.value} key={opt.value.toString()}>\n                  {opt.icon ?? opt.label ?? opt.value}\n                </ToggleButton>\n              );\n\n              return el;\n            })}\n          </ToggleButtonGroup>\n        </Stack>\n        <Divider sx={{ borderColor: \"rgba(255,255,255,0.1)\", mb: 1 }} />\n      </>\n    );\n  },\n  compareProps\n);\n\nexport default XGUIToggleOptionField;\n"]}