{"version":3,"sources":["../src/components/elements/XImage.tsx"],"names":["React","useSetRecoilState","isEqual","compareProps","prevProps","nextProps","XImage","config","breakpoint","useBreakpoint","env","imageComponent","useXoraiaValue","xElement","useXElement","setSelectedElement","USE_SELECTED_INDEX","value","valueAtBreakPoint","getValueOnBreakpoint","devProps","e","clickHandler","XImage_default"],"mappings":"oNAAA,UAAYA,MAAW,QAKvB,OAAS,qBAAAC,MAAyB,SAKlC,OAAS,WAAAC,MAAe,SAMxB,IAAMC,EAAe,CAACC,EAAgBC,IAC7BH,EAAQE,EAAWC,CAAS,EAG/BC,EAAsC,OAC1C,CAAC,CAAE,OAAAC,EAAS,CAAC,CAAoB,IAAM,CAErC,IAAMC,EAAaC,EAAc,EAE3B,CAAE,IAAAC,EAAK,eAAAC,CAAe,EAAIC,EAAe,EAGzC,CAAE,SAAAC,CAAS,EAAIC,EAAwCP,EAAO,KAAK,EAGnEQ,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,EAEA,OAAKI,EAEEA,EACLO,EACAR,GAAO,MACPU,EACAb,EAAO,KACT,EAP4B,IAQ9B,EACAJ,CACF,EAEOoB,EAAQjB","sourcesContent":["import * as React from \"react\";\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 {\n  IXImageProps,\n  XImageProps,\n} from \"../../utils/interfaces/Elements/XImage.interfaces\";\n\nconst compareProps = (prevProps: any, nextProps: any) => {\n  return isEqual(prevProps, nextProps);\n};\n\nconst XImage: React.FC<XImageProps> = React.memo(\n  ({ config = {} as XElementConfig }) => {\n    // WE TRACK THE BREAK POINTS CHANGES\n    const breakpoint = useBreakpoint();\n\n    const { env, imageComponent } = useXoraiaValue();\n\n    // WE ARE GETTING THE CURRENT ELEMENT FROM THE ATOM FAMILY\n    const { xElement } = useXElement<TUseXElement<IXImageProps>>(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<IXImageProps>(\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    if (!imageComponent) return null;\n\n    return imageComponent(\n      valueAtBreakPoint,\n      env ?? \"dev\",\n      devProps,\n      config.index\n    );\n  },\n  compareProps\n);\n\nexport default XImage;\n"]}