{"version":3,"sources":["../src/components/gui/components/XGUISizingField.tsx"],"names":["React","Button","Divider","Menu","MenuItem","Stack","TextField","Typography","compareProps","prevProps","nextProps","XGUISizingField","field","currentValue","onChange","anchorEl","setAnchorEl","bp","useBreakpoint","open","handleClick","event","handleClose","value","currentUnit","unit","setUnit","id","setValue","_value","_unit","UNITS","amount","XGUISizingField_default"],"mappings":"+GAAA,UAAYA,MAAW,QAOvB,OACE,UAAAC,EACA,WAAAC,EACA,QAAAC,EACA,YAAAC,EACA,SAAAC,EACA,aAAAC,EACA,cAAAC,MACK,gBAIP,IAAMC,EAAe,CAACC,EAAgBC,IAE7BD,EAAU,eAAiBC,EAAU,aAQxCC,EAAwD,OAC5D,CAAC,CAAE,MAAAC,EAAO,aAAAC,EAAc,SAAAC,CAAS,IAAM,CACrC,QAAQ,IAAI,QAASD,CAAY,EAEjC,GAAM,CAACE,EAAUC,CAAW,EAAU,WAA6B,IAAI,EACjEC,EAAKC,EAAc,EAEnBC,EAAO,QAAQJ,CAAQ,EAEvBK,EAAeC,GAA+C,CAClEL,EAAYK,EAAM,aAAa,CACjC,EAEMC,EAAc,IAAM,CACxBN,EAAY,IAAI,CAClB,EAEMO,EAAQV,GAAgBD,EAAM,aAEhCY,EAAcD,EAASA,EAAM,QAAQ,SAAU,EAAE,EAAc,KAE7D,CAACE,EAAMC,CAAO,EAAU,WAAgBF,CAAW,EAEnDG,EAAK,cAAcf,EAAM,OAEzBgB,EAAYC,GAAmB,CAGnC,GAFA,QAAQ,IAAI,oBAAqBA,CAAM,EAEnCA,EAAQ,CACV,IAAMC,EAAQD,EAAO,QAAQ,UAAW,EAAE,EAE1C,QAAQ,IAAI,mBAAoBC,CAAK,EAErCJ,EAAQK,EAAM,SAASD,CAAK,EAAIA,EAAQ,IAAI,EAE5ChB,EAASe,EAAQjB,EAAM,KAAMK,CAAE,CACjC,CACF,EAEA,OAAM,YAAU,IAAM,CACpB,GAAI,CAACc,EAAM,SAASP,CAAW,GAAKD,EAAO,CACzC,IAAMS,EAAST,EAAM,QAAQ,UAAW,EAAE,EAE1CG,EAAQ,IAAI,EAEZZ,EAASkB,EAAS,KAAMpB,EAAM,KAAMK,CAAE,CACxC,CACF,EAAG,CAACO,CAAW,CAAC,EAGd,gBAAO,WAAN,KACC,gBAACnB,EAAA,CACC,UAAU,kBACV,UAAU,MACV,eAAe,gBACf,WAAW,SACX,GAAI,GAEJ,gBAACE,EAAA,CAAW,UAAU,QAAQ,QAASoB,EAAI,MAAM,OAC9Cf,EAAM,KACT,EACA,gBAACN,EAAA,CACC,GAAIqB,EACJ,GAAI,CAAE,GAAI,CAAE,EACZ,UAAS,GACT,YAAW,GACX,KAAK,QACL,KAAK,SACL,YAAaf,EAAM,aAAeA,EAAM,MACxC,MAAOW,GAAS,SAASA,EAAM,QAAQ,WAAY,EAAE,GAAK,GAAG,EAC7D,SAAW,GAAM,CAEbK,EADEH,IAAS,OACFA,EAEA,EAAE,OAAO,MAAM,QAAQ,WAAY,EAAE,EAAIA,CAFrC,CAIjB,EACA,WAAY,CACV,aACE,gCACE,gBAACxB,EAAA,CACC,GAAI,uBAAuB,OAC3B,gBACEkB,EAAO,wBAAwB,OAAS,OAE1C,gBAAc,OACd,gBAAeA,EAAO,OAAS,OAC/B,QAASC,EACT,MAAM,WAELK,CACH,EACA,gBAACtB,EAAA,CACC,GAAI,wBAAwB,OAC5B,SAAUY,EACV,KAAMI,EACN,QAASG,EACT,cAAe,CACb,kBAAmB,uBAAuB,MAC5C,EACA,GAAI,CACF,gBAAiB,CACf,EAAG,EAEH,sBAAuB,CACrB,SAAU,GACV,GAAI,EACJ,WAAY,IACZ,eAAgB,QAClB,CACF,CACF,GAECS,EAAM,IAAKD,GAER,gBAAC1B,EAAA,CACC,IAAK0B,EACL,QAAS,IAAM,CACT,CAACC,EAAM,SAASD,CAAK,IAEzBJ,EAAQ,IAAM,CACZ,GAAII,IAAU,OACZF,EAASE,CAAK,MACT,CACL,IAAMD,GAAUN,GAAS,KAAK,QAC5B,WACA,EACF,EAEA,QAAQ,IAAI,UAAWO,CAAK,EAE5B,QAAQ,IACN,YACCP,GAAS,KAAK,QAAQ,WAAY,EAAE,CACvC,EAEA,QAAQ,IAAI,gBAAiBM,EAASC,CAAK,EAEvCP,GAAOK,EAASC,EAASC,CAAK,CACpC,CAEA,OAAOA,CACT,CAAC,EACDR,EAAY,EACd,GAECQ,CACH,CAEH,CACH,CACF,CAEJ,EACF,CACF,EACA,gBAAC5B,EAAA,CAAQ,GAAI,CAAE,YAAa,wBAAyB,GAAI,CAAE,EAAG,CAChE,CAEJ,EACAM,CACF,EAEOyB,EAAQtB","sourcesContent":["import * as React from \"react\";\nimport {\n  IXGUIFieldBase,\n  TOnChange,\n} from \"../../../utils/interfaces/gui/fields.interfaces\";\n\nimport { UNITS } from \"../../../utils/constants/gui/units\";\nimport {\n  Button,\n  Divider,\n  Menu,\n  MenuItem,\n  Stack,\n  TextField,\n  Typography,\n} from \"@mui/material\";\nimport { useBreakpoint } from \"../../../hooks/useBreakpoint\";\nimport { TUnit } from \"../../../utils/types/gui/field.types\";\n\nconst compareProps = (prevProps: any, nextProps: any) => {\n  // return isEqual(prevProps, nextProps);\n  return prevProps.currentValue === nextProps.currentValue;\n};\n\ninterface XGUISizingFieldProps extends IXGUIFieldBase {\n  onChange: TOnChange<string>;\n  currentValue: string;\n}\n\nconst XGUISizingField: React.FC<XGUISizingFieldProps> = React.memo(\n  ({ field, currentValue, onChange }) => {\n    console.log(\"CV =>\", currentValue);\n\n    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);\n    const bp = useBreakpoint();\n\n    const open = Boolean(anchorEl);\n\n    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n      setAnchorEl(event.currentTarget);\n    };\n\n    const handleClose = () => {\n      setAnchorEl(null);\n    };\n\n    const value = currentValue ?? field.defaultValue;\n\n    let currentUnit = value ? (value.replace(/[0-9]/g, \"\") as TUnit) : \"px\";\n\n    const [unit, setUnit] = React.useState<TUnit>(currentUnit);\n\n    const id = `XGUI-FIELD-${field.name}`;\n\n    const setValue = (_value: string) => {\n      console.log(\"SETVALUE/VALUE =>\", _value);\n\n      if (_value) {\n        const _unit = _value.replace(/[0-9]/gi, \"\") as TUnit;\n\n        console.log(\"SETVALUE/UNIT =>\", _unit);\n\n        setUnit(UNITS.includes(_unit) ? _unit : \"px\");\n\n        onChange(_value, field.name, bp);\n      }\n    };\n\n    React.useEffect(() => {\n      if (!UNITS.includes(currentUnit) && value) {\n        const amount = value.replace(/[^0-9]/g, \"\");\n\n        setUnit(\"px\");\n\n        onChange(amount + \"px\", field.name, bp);\n      }\n    }, [currentUnit]);\n\n    return (\n      <React.Fragment>\n        <Stack\n          className=\"XGUIFieldOption\"\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          <TextField\n            id={id}\n            sx={{ ml: 1 }}\n            fullWidth\n            hiddenLabel\n            size=\"small\"\n            type=\"number\"\n            placeholder={field.placeholder ?? field.label}\n            value={value && parseInt(value.replace(/[^0-9]/gi, \"\") ?? \"0\")}\n            onChange={(e) => {\n              if (unit === \"auto\") {\n                setValue(unit);\n              } else {\n                setValue(e.target.value.replace(/[^0-9]/gi, \"\") + unit);\n              }\n            }}\n            InputProps={{\n              endAdornment: (\n                <>\n                  <Button\n                    id={`XGUIFieldOption-Btn-${name}`}\n                    aria-controls={\n                      open ? `XGUIFieldOption-Menu-${name}` : undefined\n                    }\n                    aria-haspopup=\"true\"\n                    aria-expanded={open ? \"true\" : undefined}\n                    onClick={handleClick}\n                    color=\"inherit\"\n                  >\n                    {unit}\n                  </Button>\n                  <Menu\n                    id={`XGUIFieldOption-Menu-${name}`}\n                    anchorEl={anchorEl}\n                    open={open}\n                    onClose={handleClose}\n                    MenuListProps={{\n                      \"aria-labelledby\": `XGUIFieldOption-Btn-${name}`,\n                    }}\n                    sx={{\n                      \".MuiList-root\": {\n                        p: 0,\n\n                        \".MuiButtonBase-root\": {\n                          fontSize: 10,\n                          px: 1,\n                          fontWeight: 600,\n                          justifyContent: \"center\",\n                        },\n                      },\n                    }}\n                  >\n                    {UNITS.map((_unit) => {\n                      return (\n                        <MenuItem\n                          key={_unit}\n                          onClick={() => {\n                            if (!UNITS.includes(_unit)) return;\n\n                            setUnit(() => {\n                              if (_unit === \"auto\") {\n                                setValue(_unit);\n                              } else {\n                                const _value = (value ?? \"0\").replace(\n                                  /[^0-9]/gi,\n                                  \"\"\n                                );\n\n                                console.log(\"UNIT =>\", _unit);\n\n                                console.log(\n                                  \"VALUE =>\",\n                                  (value ?? \"0\").replace(/[^0-9]/gi, \"\")\n                                );\n\n                                console.log(\"VALUE+UNIT =>\", _value + _unit);\n\n                                if (value) setValue(_value + _unit);\n                              }\n\n                              return _unit;\n                            });\n                            handleClose();\n                          }}\n                        >\n                          {_unit}\n                        </MenuItem>\n                      );\n                    })}\n                  </Menu>\n                </>\n              ),\n            }}\n          />\n        </Stack>\n        <Divider sx={{ borderColor: \"rgba(255,255,255,0.1)\", mb: 1 }} />\n      </React.Fragment>\n    );\n  },\n  compareProps\n);\n\nexport default XGUISizingField;\n"]}