{"version":3,"sources":["../src/components/containers/XStack/index.tsx"],"names":["React","isEqual","useSetRecoilState","XText","XButton","XRating","XMap","XBreadcrumb","XForm","XIcon","XImage","compareProps","prevProps","nextProps","XStack","config","children","breakpoint","useBreakpoint","xElement","useXElement","setSelectedElement","USE_SELECTED_INDEX","value","valueAtBreakPoint","getValueOnBreakpoint","devProps","e","clickHandler","core_default","DynamicXElement","XStack_default","index","hierachy","element","setXElement"],"mappings":"2SAAA,UAAYA,MAAW,QACvB,OAAS,WAAAC,MAAe,SAKxB,OAAS,qBAAAC,MAAyB,SAUlC,IAAMC,EAAc,OAAK,IAAM,OAAO,uBAAuB,EACvDC,EAAgB,OAAK,IAAM,OAAO,yBAAyB,EAC3DC,EAAgB,OAAK,IAAM,OAAO,yBAAyB,EAC3DC,EAAa,OAAK,IAAM,OAAO,sBAAsB,EACrDC,EAAoB,OAAK,IAAM,OAAO,6BAA6B,EACnEC,EAAc,OAAK,IAAM,OAAO,uBAAuB,EACvDC,EAAc,OAAK,IAAM,OAAO,uBAAuB,EACvDC,EAAe,OAAK,IAAM,OAAO,wBAAwB,EAEzDC,EAAe,CAACC,EAAgBC,IAC7BZ,EAAQW,EAAWC,CAAS,EAG/BC,EAAsC,OAC1C,CAAC,CAAE,OAAAC,EAAS,CAAC,EAAqB,SAAAC,CAAS,IAAM,CAE/C,IAAMC,EAAaC,EAAc,EAG3B,CAAE,SAAAC,CAAS,EAAIC,EAAwCL,EAAO,KAAK,EAGnEM,EAAqBnB,EAAkBoB,CAAkB,EAG/D,IAAK,CAACH,GAAY,OAAO,KAAKA,CAAQ,EAAE,SAAW,IAAM,CAACH,EACxD,OAAO,KAIT,GAAM,CAAE,MAAAO,CAAM,EAAIJ,EAGZK,EAAoBC,EACxBF,EACAN,CACF,EAEMS,EAAW,CACf,GAAIX,EAAO,MACX,QAAUY,GAAWC,EAAaD,EAAGN,EAAoBN,EAAO,KAAK,CACvE,EAEA,OACE,gBAACc,EAAA,CACC,MAAOd,EAAO,MACd,MAAOS,EACP,gBAAiBM,EACjB,SAAUd,EACV,SAAUU,EACZ,CAEJ,EACAf,CACF,EAEOoB,EAAQjB,EAETgB,EAA0C,OAAK,CAAC,CAAE,MAAAE,EAAO,SAAAC,CAAS,IAAM,CAC5E,GAAM,CAAE,SAAUC,EAAS,YAAAC,CAAY,EACrCf,EAA+BY,CAAK,EAEhCb,EAAWe,GAAW,CAAC,EAU7B,OARM,YAAU,IAAM,CACpBC,EAAY,CACV,GAAGhB,EAEH,SAAUc,EAAW,IAAMd,EAAS,IACtC,CAAC,CACH,EAAG,CAACa,CAAK,CAAC,EAEFb,EAAS,KAAM,CACrB,IAAK,QACH,OACE,gBAAO,WAAN,CAAe,SAAU,gBAAC,SAAE,kBAAgB,GAC3C,gBAAChB,EAAA,CAAM,OAAQ,CAAE,MAAA6B,CAAM,EAAG,CAC5B,EAGJ,IAAK,UACH,OACE,gBAAO,WAAN,CAAe,SAAU,gBAAC,SAAE,oBAAkB,GAC7C,gBAAC5B,EAAA,CAAQ,OAAQ,CAAE,MAAA4B,CAAM,EAAG,CAC9B,EAGJ,IAAK,SACH,OACE,gBAAO,WAAN,CAAe,SAAU,gBAAC,SAAE,mBAAiB,GAC5C,gBAACtB,EAAA,CAAO,OAAQ,CAAE,MAAAsB,CAAM,EAAG,CAC7B,EAGJ,IAAK,UACH,OACE,gBAAO,WAAN,CAAe,SAAU,gBAAC,SAAE,oBAAkB,GAC7C,gBAAC3B,EAAA,CAAQ,OAAQ,CAAE,MAAA2B,CAAM,EAAG,CAC9B,EAGJ,IAAK,QACH,OACE,gBAAO,WAAN,CAAe,SAAU,gBAAC,SAAE,kBAAgB,GAC3C,gBAACvB,EAAA,CAAM,OAAQ,CAAE,MAAAuB,CAAM,EAAG,CAC5B,EAGJ,IAAK,OACH,OACE,gBAAO,WAAN,CAAe,SAAU,gBAAC,SAAE,iBAAe,GAC1C,gBAAC1B,EAAA,CAAK,OAAQ,CAAE,MAAA0B,CAAM,EAAG,CAC3B,EAGJ,IAAK,cACH,OACE,gBAAO,WAAN,CAAe,SAAU,gBAAC,SAAE,wBAAsB,GACjD,gBAACzB,EAAA,CAAY,OAAQ,CAAE,MAAAyB,CAAM,EAAG,CAClC,EAGJ,IAAK,QACH,OACE,gBAAO,WAAN,CAAe,SAAU,gBAAC,SAAE,kBAAgB,GAC3C,gBAACxB,EAAA,CAAM,OAAQ,CAAE,MAAAwB,CAAM,EAAG,CAC5B,EAGJ,IAAK,SACH,OAAO,gBAAClB,EAAA,CAAO,OAAQ,CAAE,MAAAkB,CAAM,EAAG,EAEpC,QACE,OAAO,IACX,CACF,EAAGrB,CAAY","sourcesContent":["import * as React from \"react\";\nimport { isEqual } from \"lodash\";\nimport { XElementConfig } from \"../../../utils/interfaces/Elements/XElement.interfaces\";\nimport { useBreakpoint } from \"../../../hooks/useBreakpoint\";\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 {\n  IXStackProps,\n  XStackProps,\n} from \"../../../utils/interfaces/containers/XStack.interfaces\";\nimport XStackCore from \"./core\";\nimport { TDynamicXElement } from \"../../../utils/types/core/DynamicXElement\";\n\nconst XText = React.lazy(() => import(\"../../elements/XText\"));\nconst XButton = React.lazy(() => import(\"../../elements/XButton\"));\nconst XRating = React.lazy(() => import(\"../../elements/XRating\"));\nconst XMap = React.lazy(() => import(\"../../elements/XMap\"));\nconst XBreadcrumb = React.lazy(() => import(\"../../elements/XBreadcrumb\"));\nconst XForm = React.lazy(() => import(\"../../elements/XForm\"));\nconst XIcon = React.lazy(() => import(\"../../elements/XIcon\"));\nconst XImage = React.lazy(() => import(\"../../elements/XImage\"));\n\nconst compareProps = (prevProps: any, nextProps: any) => {\n  return isEqual(prevProps, nextProps);\n};\n\nconst XStack: React.FC<XStackProps> = React.memo(\n  ({ config = {} as XElementConfig, children }) => {\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<IXStackProps>>(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) && !children) {\n      return null;\n    }\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<IXStackProps>(\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    return (\n      <XStackCore\n        index={config.index}\n        props={valueAtBreakPoint}\n        DynamicXElement={DynamicXElement}\n        children={children}\n        devProps={devProps}\n      />\n    );\n  },\n  compareProps\n);\n\nexport default XStack;\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 \"XText\":\n      return (\n        <React.Suspense fallback={<p>loading XText...</p>}>\n          <XText config={{ index }} />\n        </React.Suspense>\n      );\n\n    case \"XButton\":\n      return (\n        <React.Suspense fallback={<p>loading XButton...</p>}>\n          <XButton config={{ index }} />\n        </React.Suspense>\n      );\n\n    case \"XImage\":\n      return (\n        <React.Suspense fallback={<p>loading XImage...</p>}>\n          <XImage config={{ index }} />\n        </React.Suspense>\n      );\n\n    case \"XRating\":\n      return (\n        <React.Suspense fallback={<p>loading XRating...</p>}>\n          <XRating config={{ index }} />\n        </React.Suspense>\n      );\n\n    case \"XIcon\":\n      return (\n        <React.Suspense fallback={<p>loading XIcon...</p>}>\n          <XIcon config={{ index }} />\n        </React.Suspense>\n      );\n\n    case \"XMap\":\n      return (\n        <React.Suspense fallback={<p>loading XMap...</p>}>\n          <XMap config={{ index }} />\n        </React.Suspense>\n      );\n\n    case \"XBreadcrumb\":\n      return (\n        <React.Suspense fallback={<p>loading XBreadcrumb...</p>}>\n          <XBreadcrumb config={{ index }} />\n        </React.Suspense>\n      );\n\n    case \"XForm\":\n      return (\n        <React.Suspense fallback={<p>loading XForm...</p>}>\n          <XForm config={{ index }} />\n        </React.Suspense>\n      );\n\n    case \"XStack\":\n      return <XStack config={{ index }} />;\n\n    default:\n      return null;\n  }\n}, compareProps);\n"]}