{"version":3,"sources":["../src/components/gui/components/XGUIBorderField.tsx"],"names":["React","HexAlphaColorPicker","HexColorInput","Button","Divider","Fab","Menu","MenuItem","Select","Stack","TextField","Typography","compareProps","prevProps","nextProps","XGUIBorderField","field","currentValue","onChange","value","bp","useBreakpoint","setValue","_value","id","Field","BorderStyle","ColorPicker","XGUIBorderField_default","anchorEl","setAnchorEl","width","open","handleClick","event","handleClose","unit","setUnit","_unit","e","_val","UNITS","oldUnit","setOpen","color","old","newColor","HexInput","props","ref"],"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\";\n\nimport { UNITS } from \"../../../utils/constants/gui/units\";\nimport { HexAlphaColorPicker, HexColorInput } from \"react-colorful\";\nimport { TBorder } from \"../../../utils/types/gui/field.types\";\nimport {\n  Button,\n  Divider,\n  Fab,\n  Menu,\n  MenuItem,\n  Select,\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 XGUIBorderFieldProps extends IXGUIFieldBase {\n  onChange: TOnChange<TBorder | undefined>;\n  currentValue: TBorder;\n}\n\n// TODO PLAN TO ADD A SWITCH FOR MULTIPLE BORDER SIDE\nconst XGUIBorderField: React.FC<XGUIBorderFieldProps> = React.memo(\n  ({ field, currentValue, onChange }) => {\n    const value = currentValue ?? field.defaultValue ?? {};\n\n    const bp = useBreakpoint();\n\n    const setValue = (_value: TBorder) => {\n      onChange(_value, field.name, bp);\n    };\n\n    const id = `XGUI-FIELD-${field.name}`;\n\n    const section = (\n      <React.Fragment>\n        <Stack spacing={1} direction=\"row\" mb={1}>\n          <Typography\n            component=\"label\"\n            htmlFor={id}\n            textAlign=\"center\"\n            display=\"flex\"\n            width=\"100%\"\n            flex={1}\n          >\n            {field.label}\n          </Typography>\n        </Stack>\n        <Stack spacing={1} direction=\"row\">\n          <Field field={field} id={id} value={value} setValue={setValue} />\n          <BorderStyle id={id} value={value} setValue={setValue} />\n          <ColorPicker id={id} value={value} setValue={setValue} />\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 XGUIBorderField;\n\ninterface FieldProps {\n  id: string;\n  value: TBorder;\n  setValue: (newValue: TBorder) => void;\n  field: TXGUIField;\n}\n\nconst Field: React.FC<FieldProps> = ({ id, value, field, setValue }) => {\n  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);\n\n  const { width } = value;\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 [unit, setUnit] = React.useState<string>(\n    value && value.width ? value.width.replace(/[0-9]/g, \"\") : \"px\"\n  );\n\n  React.useEffect(() => {\n    if (width) {\n      if (!width.includes(unit)) {\n        const _unit = width.replace(/[0-9]/gi, \"\");\n\n        if (_unit.length > 0) setUnit(_unit);\n      }\n    }\n  }, [width]);\n\n  return (\n    <Stack\n      className=\"XGUIFieldOption\"\n      direction=\"row\"\n      justifyContent=\"space-between\"\n      alignItems=\"center\"\n      flex={1}\n    >\n      <TextField\n        id={id + \"-\" + \"Width\"}\n        fullWidth\n        hiddenLabel\n        size=\"small\"\n        type=\"number\"\n        placeholder=\"Taille\"\n        value={width && parseInt(width.replace(/[^0-9]/gi, \"\") ?? \"0\")}\n        onChange={(e) => {\n          const _val = e.target.value + unit;\n\n          setValue({ ...value, width: _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                            (width ?? \"0\").replace(oldUnit, \"\") + _unit;\n\n                          if (width || _unit === \"auto\") {\n                            setValue({ ...value, width: _value });\n                          }\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\ninterface ColorPickerProps {\n  id: string;\n  value: TBorder;\n  setValue: (newValue: TBorder) => void;\n}\n\nconst ColorPicker: React.FC<ColorPickerProps> = ({ id, value, setValue }) => {\n  const [open, setOpen] = React.useState<boolean>(false);\n\n  const color = value.color ?? \"#000000\";\n\n  return (\n    <Stack\n      className=\"XGUIColorPicker\"\n      direction=\"row\"\n      justifyContent=\"space-between\"\n      alignItems=\"center\"\n      position=\"relative\"\n      flex={1}\n    >\n      <Stack width=\"100%\" direction=\"row\" spacing={1}>\n        <Stack\n          sx={{\n            backgroundImage: 'url(\"/images/transparent.png\")',\n            backgroundPosition: \"center\",\n            backgroundSize: \"cover\",\n            borderRadius: \"50%\",\n            position: \"relative\",\n          }}\n        >\n          <Fab\n            // aria-describedby={`XGUIColorPicker-Popover-${field.name}`}\n            onClick={() => setOpen((old) => !old)}\n            // id={`XGUIColorPicker-Btn-${field.name}`}\n            size=\"small\"\n            color=\"inherit\"\n            sx={{\n              width: 30,\n              height: 30,\n              position: \"relative\",\n            }}\n            style={{ backgroundColor: color }}\n          />\n          {open && (\n            <Stack\n              sx={{\n                bgcolor: \"white\",\n                p: 1,\n                borderRadius: 2,\n                position: \"absolute\",\n                bottom: 40,\n                left: 0,\n                zIndex: 1051,\n                \".react-colorful\": {\n                  width: 160,\n                  height: 160,\n                  \".react-colorful__hue, .react-colorful__alpha\": {\n                    height: 15,\n                  },\n\n                  \".react-colorful__saturation-pointer\": {\n                    borderRadius: 0.5,\n                    width: 20,\n                    height: 20,\n                  },\n\n                  \".react-colorful__hue-pointer, .react-colorful__alpha-pointer\":\n                    {\n                      height: 15,\n                      width: 13,\n                      borderRadius: 0.5,\n                      cursor: \"pointer\",\n                    },\n                },\n              }}\n            >\n              <HexAlphaColorPicker\n                color={color}\n                onChange={(newColor) => {\n                  // onChange(newColor, field.name);\n                  setValue({ ...value, color: newColor });\n                }}\n              />\n            </Stack>\n          )}\n        </Stack>\n\n        <TextField\n          id={id}\n          sx={{ flex: 1 }}\n          hiddenLabel\n          size=\"small\"\n          placeholder=\"Couleur\"\n          value={color}\n          InputProps={{\n            inputComponent: HexInput,\n            inputProps: {\n              placeholder: \"#FFFFFF\",\n              color: color,\n              onChange: (newColor: any) => {\n                // onChange(newColor, field.name);\n                setValue({ ...value, color: newColor });\n              },\n              alpha: true,\n              prefixed: true,\n            },\n          }}\n        />\n      </Stack>\n    </Stack>\n  );\n};\n\nconst HexInput = React.forwardRef((props, ref) => {\n  React.useImperativeHandle(ref, () => ({\n    focus: () => {},\n  }));\n\n  return <HexColorInput {...props} />;\n});\n\ninterface BorderStyleProps {\n  id: string;\n  value: TBorder;\n  setValue: (newValue: TBorder) => void;\n}\n\nconst BorderStyle: React.FC<BorderStyleProps> = ({ id, value, setValue }) => {\n  return (\n    <Stack\n      className=\"XGUISelectOption\"\n      direction=\"row\"\n      justifyContent=\"space-between\"\n      alignItems=\"center\"\n      flex={1}\n    >\n      <Select\n        id={id}\n        fullWidth\n        value={value.style ?? \"solid\"}\n        onChange={(e) => {\n          setValue({ ...value, style: e.target.value as any });\n        }}\n        native\n        size=\"small\"\n        MenuProps={{\n          sx: {\n            \".MuiList-root\": {\n              p: 0,\n\n              \".MuiButtonBase-root\": {\n                fontSize: 10,\n                px: 1,\n                fontWeight: 600,\n                textAlign: \"center\",\n              },\n            },\n          },\n        }}\n      >\n        <option value=\"solid\">Solide</option>\n        <option value=\"dotted\">Pointillet</option>\n        <option value=\"dashed\">Tiret</option>\n      </Select>\n    </Stack>\n  );\n};\n"]}