{"version":3,"sources":["../src/components/elements/XMap.tsx","../src/lib/getMapSrc.ts"],"names":["React","Stack","useSetRecoilState","isEqual","DEFAULT_MAP_SRC","getMapSrc","str","sections","found","i","section","compareProps","prevProps","nextProps","XMap","config","breakpoint","useBreakpoint","env","useXoraiaValue","xElement","useXElement","setSelectedElement","USE_SELECTED_INDEX","value","valueAtBreakPoint","getValueOnBreakpoint","devProps","e","clickHandler","src","width","height","padding","margin","border","borderRadius","bgColor","map","generateSide","generateBorder","generateRadius","XMap_default"],"mappings":"6SAAA,UAAYA,MAAW,QACvB,OAAS,SAAAC,MAAa,gBAKtB,OAAS,qBAAAC,MAAyB,SAKlC,OAAS,WAAAC,MAAe,SCNxB,IAAMC,EACJ,2QAEWC,EAAY,CAACC,EAAcF,IAAoB,CAC1D,GAAIE,EAAI,WAAW,oCAAoC,EAAG,OAAOA,EAEjE,GAAIA,EAAI,WAAW,SAAS,EAAG,CAC7B,IAAMC,EAAWD,EAAI,MAAM,GAAG,EAC1BE,EAAQ,GACRC,EAAI,EAER,KAAO,CAACD,GAASC,EAAIF,EAAS,QAAQ,CACpC,IAAMG,EAAUH,EAASE,GAEzB,GAAIC,EAAQ,WAAW,MAAM,EAC3B,OAAAF,EAAQ,GAGDE,EAAQ,QAAQ,aAAc,EAAE,EAGzCD,GACF,CACF,CAEA,OAAOL,CACT,EDTA,IAAMO,EAAe,CAACC,EAAgBC,IAC7BV,EAAQS,EAAWC,CAAS,EAG/BC,EAAkC,OACtC,CAAC,CAAE,OAAAC,EAAS,CAAC,CAAoB,IAAM,CAErC,IAAMC,EAAaC,EAAc,EAE3B,CAAE,IAAAC,CAAI,EAAIC,EAAe,EAGzB,CAAE,SAAAC,CAAS,EAAIC,EAAsCN,EAAO,KAAK,EAGjEO,EAAqBpB,EAAkBqB,CAAkB,EAG/D,GAAI,CAACH,GAAY,OAAO,KAAKA,CAAQ,EAAE,SAAW,EAAG,OAAO,KAG5D,GAAM,CAAE,MAAAI,CAAM,EAAIJ,EAGZK,EAAoBC,EACxBF,EACAR,CACF,EAEMW,EAAW,CACf,GAAIZ,EAAO,MACX,QAAUa,GAAWC,EAAaD,EAAGN,EAAoBP,EAAO,KAAK,CACvE,EAEM,CACJ,IAAAe,EACA,MAAAC,EACA,OAAAC,EACA,QAAAC,EACA,OAAAC,EACA,OAAAC,EACA,aAAAC,EACA,QAAAC,CAEF,EAAIZ,EAIEa,EACJ,gBAAC,UACC,IAAKjC,EAAUyB,CAAG,EAClB,MAAM,OACN,OAAO,OACP,MAAO,CACL,QAASS,EAAa,UAAWN,CAAO,EACxC,OAAQM,EAAa,SAAUL,CAAM,EACrC,MAAOH,EAASA,EAAM,SAAS,GAAG,EAAI,OAASA,EAAS,OACxD,OAAQC,EAAUA,EAAO,SAAS,GAAG,EAAI,OAASA,EAAU,OAC5D,OAAQQ,EAAeL,CAAM,GAAK,OAClC,aAAcM,EAAeL,CAAY,EACzC,gBAAiBC,EACjB,cAAenB,IAAQ,MAAQ,OAAS,KAC1C,EACA,QAAQ,OACR,eAAe,6BACf,gBAAe,GACjB,EAGF,OAAIA,IAAQ,OAER,gBAACjB,EAAA,CACC,SAAS,WACR,GAAIiB,IAAQ,OAASS,EACtB,GAAI,CACF,GAAGF,EACH,OAAQ,OACR,MAAOM,EACHA,EAAM,SAAS,GAAG,EAChBA,EACA,cACF,OACJ,OAAQC,EACJA,EAAO,SAAS,GAAG,EACjBA,EACA,cACF,MACN,GAECM,CACH,EAIGA,CACT,EACA3B,CACF,EAEO+B,EAAQ5B","sourcesContent":["import * as React from \"react\";\nimport { Stack } 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\";\n\nimport { generateSide } from \"../../lib/generateSide\";\nimport {\n  IXMapProps,\n  XMapProps,\n} from \"../../utils/interfaces/Elements/XMap.interfaces\";\nimport { getMapSrc } from \"../../lib/getMapSrc\";\nimport { generateBorder } from \"../../lib/generateBorder\";\nimport { generateRadius } from \"../../lib/generateRadius\";\n\nconst compareProps = (prevProps: any, nextProps: any) => {\n  return isEqual(prevProps, nextProps);\n};\n\nconst XMap: React.FC<XMapProps> = React.memo(\n  ({ config = {} as XElementConfig }) => {\n    // WE TRACK THE BREAK POINTS CHANGES\n    const breakpoint = useBreakpoint();\n\n    const { env } = useXoraiaValue();\n\n    // WE ARE GETTING THE CURRENT ELEMENT FROM THE ATOM FAMILY\n    const { xElement } = useXElement<TUseXElement<IXMapProps>>(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<IXMapProps>(\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      src,\n      width,\n      height,\n      padding,\n      margin,\n      border,\n      borderRadius,\n      bgColor,\n      // TODO IMPLEMENT BORDER RADIUS\n    } = valueAtBreakPoint;\n\n    // if (!src && env === \"prod\") return null;\n\n    const map = (\n      <iframe\n        src={getMapSrc(src)}\n        width=\"auto\"\n        height=\"auto\"\n        style={{\n          padding: generateSide(\"padding\", padding) as string,\n          margin: generateSide(\"margin\", margin) as string,\n          width: width ? (width.includes(\"%\") ? \"100%\" : width) : \"auto\",\n          height: height ? (height.includes(\"%\") ? \"100%\" : height) : \"auto\",\n          border: generateBorder(border) ?? \"none\",\n          borderRadius: generateRadius(borderRadius),\n          backgroundColor: bgColor,\n          pointerEvents: env === \"dev\" ? \"none\" : \"all\",\n        }}\n        loading=\"lazy\"\n        referrerPolicy=\"no-referrer-when-downgrade\"\n        allowFullScreen\n      />\n    );\n\n    if (env !== \"prod\") {\n      return (\n        <Stack\n          position=\"relative\"\n          {...(env === \"dev\" && devProps)}\n          sx={{\n            ...valueAtBreakPoint,\n            border: \"none\",\n            width: width\n              ? width.includes(\"%\")\n                ? width\n                : \"max-content\"\n              : \"100%\",\n            height: height\n              ? height.includes(\"%\")\n                ? height\n                : \"max-content\"\n              : \"auto\",\n          }}\n        >\n          {map}\n        </Stack>\n      );\n    }\n\n    return map;\n  },\n  compareProps\n);\n\nexport default XMap;\n","/**\n * Get the google maps embeded URL from a tag or source\n * @param str Ifram with src or https link\n */\n\nconst DEFAULT_MAP_SRC =\n  'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d4529.168578236509!2d-3.9858222626052595!3d5.3929619146450465!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xfc193f6d9ffe851%3A0x8ddaeb28110ca4cc!2sDRO%20SARL!5e0!3m2!1sen!2sci!4v1664125310569!5m2!1sen!2sci'\n\nexport const getMapSrc = (str: string = DEFAULT_MAP_SRC) => {\n  if (str.startsWith('https://www.google.com/maps/embed?')) return str\n\n  if (str.startsWith('<iframe')) {\n    const sections = str.split(' ')\n    let found = false\n    let i = 0\n\n    while (!found && i < sections.length) {\n      const section = sections[i]\n\n      if (section.startsWith('src=')) {\n        found = true\n\n        // RETURNING URL\n        return section.replace(/src=|\"|'/gi, '')\n      }\n\n      i++\n    }\n  }\n\n  return DEFAULT_MAP_SRC\n}\n"]}