{"version":3,"sources":["../src/components/gui/components/XGUIRadiusField.tsx"],"names":["React","Button","Divider","Menu","MenuItem","Stack","TextField","Typography","compareProps","prevProps","nextProps","XGUIRadiusField","field","currentValue","onChange","value","bp","useBreakpoint","setValue","_value","id","Field","XGUIRadiusField_default","side","anchorEl","setAnchorEl","open","handleClick","event","handleClose","sideValue","unit","setUnit","_unit","SIDES_NAME","e","_val","UNITS","oldUnit"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport {\n  IXGUIFieldBase,\n  TOnChange,\n  TXGUIField,\n} from \"../../../utils/interfaces/gui/fields.interfaces\";\nimport { UNITS } from \"../../../utils/constants/gui/units\";\nimport { SIDES_NAME } from \"../../../utils/constants/gui/sidesName\";\nimport { TRadius } from \"../../../utils/types/gui/field.types\";\nimport {\n  Button,\n  Divider,\n  Menu,\n  MenuItem,\n  Stack,\n  TextField,\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 XGUIRadiusFieldProps extends IXGUIFieldBase {\n  onChange: TOnChange<TRadius | undefined>;\n  currentValue: TRadius;\n}\n\nconst XGUIRadiusField: React.FC<XGUIRadiusFieldProps> = React.memo(\n  ({ field, currentValue, onChange }) => {\n    const value = currentValue ?? field.defaultValue ?? {};\n    const bp = useBreakpoint();\n\n    const setValue = (_value: TRadius) => {\n      onChange(_value, field.name, bp);\n    };\n\n    const id = `XGUI-FIELD-${field.name}`;\n\n    const section = (\n      <React.Fragment>\n        <Typography component=\"label\" htmlFor={id} textAlign=\"center\">\n          {field.label}\n        </Typography>\n        <Stack spacing={1} alignItems=\"center\" mt={1}>\n          <Stack spacing={1} justifyContent=\"space-between\" direction=\"row\">\n            <Field\n              field={field}\n              id={id}\n              side=\"TopLeft\"\n              value={value}\n              setValue={setValue}\n            />{\" \"}\n            <Field\n              field={field}\n              id={id}\n              side=\"TopRight\"\n              value={value}\n              setValue={setValue}\n            />\n          </Stack>\n          <Stack spacing={1} justifyContent=\"space-between\" direction=\"row\">\n            <Field\n              field={field}\n              id={id}\n              side=\"BottomLeft\"\n              value={value}\n              setValue={setValue}\n            />\n            <Field\n              field={field}\n              id={id}\n              side=\"BottomRight\"\n              value={value}\n              setValue={setValue}\n            />\n          </Stack>\n        </Stack>\n        <Divider sx={{ borderColor: \"rgba(255,255,255,0.1)\", my: 1 }} />\n      </React.Fragment>\n    );\n\n    return section;\n  },\n  compareProps\n);\n\nexport default XGUIRadiusField;\n\ninterface FieldProps {\n  id: string;\n  side: \"TopLeft\" | \"TopRight\" | \"BottomRight\" | \"BottomLeft\";\n  value: TRadius;\n  setValue: (newValue: TRadius) => void;\n  field: TXGUIField;\n}\n\nconst Field: React.FC<FieldProps> = ({ id, side, value, field, setValue }) => {\n  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);\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 sideValue = value[side];\n\n  const [unit, setUnit] = React.useState<string>(\n    sideValue ? (sideValue ?? \"\").replace(/[0-9]/g, \"\") : \"px\"\n  );\n\n  React.useEffect(() => {\n    if (sideValue) {\n      if (!sideValue.includes(unit)) {\n        const _unit = sideValue.replace(/[0-9]/gi, \"\");\n\n        if (_unit.length > 0) setUnit(_unit);\n      }\n    }\n  }, [sideValue]);\n\n  return (\n    <Stack\n      // style={{ flex: 1, maxWidth: 120 }}\n      className=\"XGUIFieldOption\"\n      direction=\"row\"\n      justifyContent=\"space-between\"\n      alignItems=\"center\"\n    >\n      <TextField\n        id={id + \"-\" + side}\n        fullWidth\n        hiddenLabel\n        size=\"small\"\n        type=\"number\"\n        placeholder={SIDES_NAME[side]}\n        value={sideValue && parseInt(sideValue.replace(/[^0-9]/gi, \"\") ?? \"0\")}\n        onChange={(e) => {\n          const _val = e.target.value + unit;\n          setValue({ ...value, [side]: _val });\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                {(field.units ?? UNITS).map((_unit) => {\n                  return (\n                    <MenuItem\n                      key={_unit}\n                      onClick={() => {\n                        setUnit((oldUnit) => {\n                          const _value =\n                            (sideValue ?? \"0\").replace(oldUnit, \"\") + _unit;\n\n                          if (sideValue || _unit === \"auto\")\n                            setValue({ ...value, [side]: _value });\n\n                          return _unit;\n                        });\n\n                        handleClose();\n                      }}\n                    >\n                      {_unit}\n                    </MenuItem>\n                  );\n                })}\n              </Menu>\n            </>\n          ),\n        }}\n      />\n    </Stack>\n  );\n};\n\n// const Field: React.FC<FieldProps> = ({ id, side, value, field, setValue }) => {\n//   const sideValue = value[side];\n\n//   const [unit, setUnit] = React.useState<string>(\"px\");\n\n//   React.useEffect(() => {\n//     if (sideValue) {\n//       if (!sideValue.includes(unit)) {\n//         const _unit = sideValue.replace(/[0-9]/gi, \"\");\n\n//         if (_unit.length > 0) setUnit(_unit);\n//       }\n//     }\n//   }, [sideValue]);\n\n//   return (\n//     <XDiv className=\"XGUI-Field-Control\">\n//       <input\n//         id={id + \"-\" + side}\n//         className=\"XGUI-Field-Input With-Addon-Right\"\n//         placeholder={SIDES_NAME[side]}\n//         value={sideValue && parseInt(sideValue.replace(/[^0-9]/gi, \"\") ?? \"0\")}\n//         onChange={(e) => {\n//           const _val = e.target.value + unit;\n//           setValue({ ...value, [side]: _val });\n//         }}\n//         type=\"number\"\n//         style={{ width: \"100%\", paddingRight: 0 }}\n//       />\n//       <select\n//         style={{ width: 65 }}\n//         id={id}\n//         className=\"XGUI-Field-Select Addon-Right\"\n//         value={unit}\n//         onChange={(e) => {\n//           setUnit((oldUnit) => {\n//             const newUnit = e.target.value;\n\n//             const _value = (sideValue ?? \"0\").replace(oldUnit, \"\") + newUnit;\n\n//             if (sideValue || newUnit === \"auto\")\n//               setValue({ ...value, [side]: _value });\n\n//             return newUnit;\n//           });\n//         }}\n//       >\n//         {(field.units ?? UNITS).map((opt) => (\n//           <option key={opt} value={opt}>\n//             {opt}\n//           </option>\n//         ))}\n//       </select>\n//     </XDiv>\n//   );\n// };\n"]}