{"version":3,"sources":["../src/components/containers/XGrid/index.tsx"],"names":["React","isEqual","XStack","XCarousel","XImage","compareProps","prevProps","nextProps","XGrid","config","breakpoint","useBreakpoint","xElement","useXElement","value","valueAtBreakPoint","getValueOnBreakpoint","core_default","DynamicXElement","XGrid_default","index","hierachy","element","setXElement"],"mappings":"0jBAAA,UAAYA,MAAW,QACvB,OAAS,WAAAC,MAAe,SAaxB,IAAMC,EAAe,OAAK,IAAM,OAAO,wBAAY,EAC7CC,EAAkB,OAAK,IAAM,OAAO,2BAAe,EACnDC,EAAe,OAAK,IAAM,OAAO,wBAAwB,EAEzDC,EAAe,CAACC,EAAgBC,IAC7BN,EAAQK,EAAWC,CAAS,EAG/BC,EAA8B,CAAC,CAAE,OAAAC,EAAS,CAAC,CAAoB,IAAM,CAEzE,IAAMC,EAAaC,EAAc,EAG3B,CAAE,SAAAC,CAAS,EAAIC,EAAuCJ,EAAO,KAAK,EAGxE,GAAI,CAACG,GAAY,OAAO,KAAKA,CAAQ,EAAE,SAAW,EAAG,OAAO,KAG5D,GAAM,CAAE,MAAAE,CAAM,EAAIF,EAGZG,EAAoBC,EACxBF,EACAJ,CACF,EAEA,OACE,gBAACR,EAAA,CAAO,OAAQO,GACd,gBAACQ,EAAA,CACC,MAAOR,EAAO,MACd,MAAOM,EACP,gBAAiBG,EACnB,CACF,CAEJ,EAEOC,EAAc,OAAKX,EAAOH,CAAY,EAEvCa,EAA0C,OAAK,CAAC,CAAE,MAAAE,EAAO,SAAAC,CAAS,IAAM,CAC5E,GAAM,CAAE,SAAUC,EAAS,YAAAC,CAAY,EACrCV,EAA+BO,CAAK,EAEhCR,EAAWU,GAAW,CAAC,EAU7B,OARM,YAAU,IAAM,CACpBC,EAAY,CACV,GAAGX,EAEH,SAAUS,EAAW,IAAMT,EAAS,IACtC,CAAC,CACH,EAAG,CAACQ,CAAK,CAAC,EAEFR,EAAS,KAAM,CACrB,IAAK,SACH,OACE,gBAAO,WAAN,KACC,gBAACV,EAAA,CAAO,OAAQ,CAAE,MAAAkB,CAAM,EAAG,CAC7B,EAGJ,IAAK,YACH,OACE,gBAAO,WAAN,KACC,gBAACjB,EAAA,CAAU,OAAQ,CAAE,MAAAiB,CAAM,EAAG,CAChC,EAGJ,IAAK,SACH,OACE,gBAAO,WAAN,KACC,gBAAChB,EAAA,CAAO,OAAQ,CAAE,MAAAgB,CAAM,EAAG,CAC7B,EAGJ,IAAK,QACH,OAAO,gBAACZ,EAAA,CAAM,OAAQ,CAAE,MAAAY,CAAM,EAAG,EAEnC,QACE,OAAO,IACX,CACF,EAAGf,CAAY","sourcesContent":["import * as React from \"react\";\nimport { isEqual } from \"lodash\";\nimport { getValueOnBreakpoint } from \"../../../lib/getValueOnBreakpoint\";\nimport {\n  IXGridProps,\n  TXGridProps,\n  XGridProps,\n} from \"../../../utils/interfaces/containers/XGrid.interfaces\";\nimport { XElementConfig } from \"../../../utils/interfaces/Elements/XElement.interfaces\";\nimport { useBreakpoint } from \"../../../hooks/useBreakpoint\";\nimport { TUseXElement, useXElement } from \"../../../hooks/useXElement\";\nimport XGridCore from \"./core\";\nimport { TDynamicXElement } from \"../../../utils/types/core/DynamicXElement\";\n\nconst XStack = React.lazy(() => import(\"../XStack\"));\nconst XCarousel = React.lazy(() => import(\"../XCarousel\"));\nconst XImage = React.lazy(() => import(\"../../elements/XImage\"));\n\nconst compareProps = (prevProps: any, nextProps: any) => {\n  return isEqual(prevProps, nextProps);\n};\n\nconst XGrid: React.FC<XGridProps> = ({ config = {} as XElementConfig }) => {\n  // WE TRACK THE BREAK POINTS CHANGES\n  const breakpoint = useBreakpoint();\n\n  // WE ARE GETTING THE CURRENT ELEMENT FROM THE ATOM FAMILY\n  const { xElement } = useXElement<TUseXElement<TXGridProps>>(config.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<IXGridProps>(\n    value as any,\n    breakpoint\n  );\n\n  return (\n    <XStack config={config}>\n      <XGridCore\n        index={config.index}\n        props={valueAtBreakPoint}\n        DynamicXElement={DynamicXElement}\n      />\n    </XStack>\n  );\n};\n\nexport default React.memo(XGrid, compareProps);\n\nconst DynamicXElement: TDynamicXElement = React.memo(({ index, hierachy }) => {\n  const { xElement: element, setXElement } =\n    useXElement<TUseXElement<any>>(index);\n\n  const xElement = element ?? {};\n\n  React.useEffect(() => {\n    setXElement({\n      ...xElement,\n\n      hierachy: hierachy + \"-\" + xElement.name,\n    });\n  }, [index]);\n\n  switch (xElement.name) {\n    case \"XStack\":\n      return (\n        <React.Suspense>\n          <XStack config={{ index }} />\n        </React.Suspense>\n      );\n\n    case \"XCarousel\":\n      return (\n        <React.Suspense>\n          <XCarousel config={{ index }} />\n        </React.Suspense>\n      );\n\n    case \"XImage\":\n      return (\n        <React.Suspense>\n          <XImage config={{ index }} />\n        </React.Suspense>\n      );\n\n    case \"XGrid\":\n      return <XGrid config={{ index }} />;\n\n    default:\n      return null;\n  }\n}, compareProps);\n"]}