{"version":3,"sources":["../src/components/elements/XButton.tsx"],"names":["React","Badge","Button","Icon","useSetRecoilState","isEqual","compareProps","prevProps","nextProps","XButton","config","breakpoint","useBreakpoint","env","Link","useXoraiaValue","xElement","useXElement","setSelectedElement","USE_SELECTED_INDEX","value","valueAtBreakPoint","getValueOnBreakpoint","devProps","e","clickHandler","text","href","hoverColor","color","bgColor","hoverFontSize","hoverTextDecoration","hoverBgColor","hoverBorder","hoverRadius","border","borderRadius","boxShadow","padding","margin","icon","iconPosition","iconClassName","iconColor","iconFontSize","badgeColor","badgeMode","badgeTextColor","sx","_icon","hasBadge","_btn","generateRadius","generateBorder","generateSide","XButton_default"],"mappings":"wSAAA,UAAYA,MAAW,QACvB,OAAS,SAAAC,EAAO,UAAAC,EAAQ,QAAAC,MAAY,gBAKpC,OAAS,qBAAAC,MAAyB,SAKlC,OAAS,WAAAC,MAAe,SASxB,IAAMC,EAAe,CAACC,EAAgBC,IAC7BH,EAAQE,EAAWC,CAAS,EAG/BC,EAAwC,OAC5C,CAAC,CAAE,OAAAC,EAAS,CAAC,CAAoB,IAAM,CAErC,IAAMC,EAAaC,EAAc,EAE3B,CAAE,IAAAC,EAAK,KAAAC,CAAK,EAAIC,EAAe,EAG/B,CAAE,SAAAC,CAAS,EAAIC,EAAyCP,EAAO,KAAK,EAGpEQ,EAAqBd,EAAkBe,CAAkB,EAG/D,GAAI,CAACH,GAAY,OAAO,KAAKA,CAAQ,EAAE,SAAW,EAAG,OAAO,KAG5D,GAAM,CAAE,MAAAI,CAAM,EAAIJ,EAGZK,EAAoBC,EACxBF,EACAT,CACF,EAEMY,EAAW,CACf,GAAIb,EAAO,MACX,QAAUc,GAAWC,EAAaD,EAAGN,EAAoBR,EAAO,KAAK,CACvE,EAEM,CACJ,KAAAgB,EACA,KAAAC,EACA,WAAAC,EACA,MAAAC,EACA,QAAAC,EACA,cAAAC,EACA,oBAAAC,EACA,aAAAC,EACA,YAAAC,EACA,YAAAC,EACA,OAAAC,EACA,aAAAC,EACA,UAAAC,EAAY,OAEZ,QAAAC,EACA,OAAAC,EACA,KAAAC,EACA,aAAAC,EACA,cAAAC,EACA,UAAAC,EACA,aAAAC,EAEA,WAAAC,EACA,UAAAC,EACA,eAAAC,KACGC,CACL,EAAI5B,EAEJ,GAAI,CAACK,GAAQ,CAACe,GAAQ5B,IAAQ,OAAQ,OAAO,KAE7C,IAAMqC,EACJ,gBAAC/C,EAAA,CACC,cAAewC,EACf,GAAI,CACF,MAAOC,EACP,SAAUC,CACZ,GAECJ,CACH,EAGIU,EAAWJ,GAAaA,IAAc,OAExCK,EACF,gBAAClD,EAAA,CACC,cAAeY,EACf,cAAe,CAAC,CAACa,EACjB,KAAMd,IAAQ,OAASc,EAAO,OAC9B,QAAQ,YACR,MAAM,UACN,UAAWD,GAAQe,GAAQC,IAAiB,QAAUQ,EAAQ,KAC9D,QAASxB,GAAQe,GAAQC,IAAiB,QAAUQ,EAAQ,KAC3D,GAAIrC,IAAQ,OAASU,EACtB,QAAUC,GAAM,CACVX,IAAQ,OAAOU,EAAS,QAAQC,CAAC,CAEvC,EACA,GAAI,CACF,GAAGyB,EACH,UAAAX,EACA,aAAce,EAAehB,CAAY,EACzC,OAAQiB,EAAelB,CAAM,EAC7B,QAASN,EACT,OAAQ,UACR,SAAU,OACV,MAAOD,EACP,QAAS0B,EAAa,UAAWhB,CAAO,EACxC,OAAQY,EAAW,EAAII,EAAa,SAAUf,CAAM,EACpD,cAAe,OACf,UAAW,CACT,MAAOZ,GAAcC,EACrB,SAAUE,GAAiBkB,EAAG,SAC9B,eAAgBjB,GAAuBiB,EAAG,eAC1C,QAAShB,GAAgBH,EACzB,OAAQwB,EAAepB,GAAeE,CAAM,EAC5C,aAAciB,EAAelB,GAAeE,CAAY,EACxD,UAAAC,CACF,CACF,GAECZ,GAAQwB,GAAS,YACjBC,GAAYJ,IAAc,QAAU,KACvC,EAGF,OAAII,GAAYJ,IAAc,SAC5BK,EACE,gBAACnD,EAAA,CACC,aAAc,EACd,QAAS8C,IAAc,SAAW,WAAa,MAC/C,MAAM,YACN,GAAI,CACF,QAASD,EACT,MAAOE,EACP,SAAU,cACV,UAAW,cACX,OAAQO,EAAa,SAAUf,CAAM,CACvC,GAECY,CACH,GAIGA,CACT,EACA9C,CACF,EAEOkD,GAAQ/C","sourcesContent":["import * as React from \"react\";\nimport { Badge, Button, Icon } from \"@mui/material\";\nimport { useBreakpoint } from \"../../hooks/useBreakpoint\";\nimport { useXoraiaValue } from \"../../hooks/useXoraia\";\nimport { TUseXElement, useXElement } from \"../../hooks/useXElement\";\nimport { USE_SELECTED_INDEX } from \"../../hooks/useSelectedElement\";\nimport { useSetRecoilState } from \"recoil\";\nimport { getValueOnBreakpoint } from \"../../lib/getValueOnBreakpoint\";\nimport { clickHandler } from \"../../lib/clickHandler\";\nimport { XElementConfig } from \"../../utils/interfaces/Elements/XElement.interfaces\";\n\nimport { isEqual } from \"lodash\";\nimport { generateSide } from \"../../lib/generateSide\";\nimport { generateBorder } from \"../../lib/generateBorder\";\nimport { generateRadius } from \"../../lib/generateRadius\";\nimport {\n  IXButtonProps,\n  XButtonProps,\n} from \"../../utils/interfaces/Elements/XButton.interfaces\";\n\nconst compareProps = (prevProps: any, nextProps: any) => {\n  return isEqual(prevProps, nextProps);\n};\n\nconst XButton: React.FC<XButtonProps> = React.memo(\n  ({ config = {} as XElementConfig }) => {\n    // WE TRACK THE BREAK POINTS CHANGES\n    const breakpoint = useBreakpoint();\n\n    const { env, Link } = useXoraiaValue();\n\n    // WE ARE GETTING THE CURRENT ELEMENT FROM THE ATOM FAMILY\n    const { xElement } = useXElement<TUseXElement<IXButtonProps>>(config.index);\n\n    // GARBING THE INDEX UPDATER FOR GENERAL USAGE\n    const setSelectedElement = useSetRecoilState(USE_SELECTED_INDEX);\n\n    // IF WE DONT HAVE THIS ELEMENT CONFIGS ADDED WE DON'T SHOW IT\n    if (!xElement || Object.keys(xElement).length === 0) return null;\n\n    // WE GET ALL DEVICES PROPS AS VALUE\n    const { value } = xElement;\n\n    // WE NOW USE THE CURRENT BREAKPOINT VALUE ON THIS ELEMENT\n    const valueAtBreakPoint = getValueOnBreakpoint<IXButtonProps>(\n      value as any,\n      breakpoint\n    );\n\n    const devProps = {\n      id: config.index,\n      onClick: (e: any) => clickHandler(e, setSelectedElement, config.index),\n    };\n\n    const {\n      text,\n      href,\n      hoverColor,\n      color,\n      bgColor,\n      hoverFontSize,\n      hoverTextDecoration,\n      hoverBgColor,\n      hoverBorder,\n      hoverRadius,\n      border,\n      borderRadius,\n      boxShadow = \"none\",\n\n      padding,\n      margin,\n      icon,\n      iconPosition,\n      iconClassName,\n      iconColor,\n      iconFontSize,\n      // iconPack,\n      badgeColor,\n      badgeMode,\n      badgeTextColor,\n      ...sx\n    } = valueAtBreakPoint;\n\n    if (!text && !icon && env === \"prod\") return null;\n\n    const _icon = (\n      <Icon\n        baseClassName={iconClassName}\n        sx={{\n          color: iconColor,\n          fontSize: iconFontSize,\n        }}\n      >\n        {icon}\n      </Icon>\n    );\n\n    const hasBadge = badgeMode && badgeMode !== \"none\";\n\n    let _btn = (\n      <Button\n        LinkComponent={Link}\n        disableRipple={!!href}\n        href={env === \"prod\" ? href : undefined}\n        variant=\"contained\"\n        color=\"inherit\"\n        startIcon={text && icon && iconPosition !== \"right\" ? _icon : null}\n        endIcon={text && icon && iconPosition === \"right\" ? _icon : null}\n        {...(env === \"dev\" && devProps)}\n        onClick={(e) => {\n          if (env === \"dev\") devProps.onClick(e);\n          // TODO DO EXTRA CLICK ACTION HERE\n        }}\n        sx={{\n          ...sx,\n          boxShadow,\n          borderRadius: generateRadius(borderRadius),\n          border: generateBorder(border),\n          bgcolor: bgColor,\n          cursor: \"pointer\",\n          minWidth: \"auto\",\n          color: color,\n          padding: generateSide(\"padding\", padding),\n          margin: hasBadge ? 0 : generateSide(\"margin\", margin),\n          textTransform: \"none\",\n          \"&:hover\": {\n            color: hoverColor ?? color,\n            fontSize: hoverFontSize ?? sx.fontSize,\n            textDecoration: hoverTextDecoration ?? sx.textDecoration,\n            bgcolor: hoverBgColor ?? bgColor,\n            border: generateBorder(hoverBorder ?? border),\n            borderRadius: generateRadius(hoverRadius ?? borderRadius),\n            boxShadow,\n          },\n        }}\n      >\n        {text || _icon || \"MY BUTTON\"}\n        {hasBadge && badgeMode === \"text\" && \"(0)\"}\n      </Button>\n    );\n\n    if (hasBadge && badgeMode !== \"text\") {\n      _btn = (\n        <Badge\n          badgeContent={2}\n          variant={badgeMode === \"bubble\" ? \"standard\" : \"dot\"}\n          color=\"secondary\"\n          sx={{\n            bgcolor: badgeColor,\n            color: badgeTextColor,\n            maxWidth: \"max-content\",\n            maxHeight: \"max-content\",\n            margin: generateSide(\"margin\", margin),\n          }}\n        >\n          {_btn}\n        </Badge>\n      );\n    }\n\n    return _btn;\n  },\n  compareProps\n);\n\nexport default XButton;\n"]}