{"version":3,"sources":["../src/components/containers/XStack/core.tsx"],"names":["React","Container","Stack","isEqual","compareProps","prevProps","nextProps","XStackCore","props","DynamicXElement","devProps","children","index","_a","_b","_c","_d","_e","_f","_g","_h","env","useXoraiaValue","xElement","useXElementValue","containerMode","direction","gap","backgroundImage","backgroundMode","backgroundAttachment","backgroundPosition","backgroundSize","bgColor","padding","margin","hoverBgColor","hoverBorder","boxShadow","border","borderRadius","sx","bgImg","filled","elements","position","hasChildren","stackProps","generateBorder","generateRadius","generateSide","elementOrPlaceholder","stack","core_default"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { Container, Stack } from \"@mui/material\";\nimport { isEqual } from \"lodash\";\nimport { useXoraiaValue } from \"../../../hooks/useXoraia\";\nimport { TUseXElement, useXElementValue } from \"../../../hooks/useXElement\";\n\nimport { generateSide } from \"../../../lib/generateSide\";\nimport { generateBorder } from \"../../../lib/generateBorder\";\nimport { generateRadius } from \"../../../lib/generateRadius\";\nimport { IXStackProps } from \"../../../utils/interfaces/containers/XStack.interfaces\";\nimport { TCoreXElement } from \"../../../utils/types/core/CoreXelement\";\n\nconst compareProps = (prevProps: any, nextProps: any) => {\n  return isEqual(prevProps, nextProps);\n};\n\nconst XStackCore: TCoreXElement<IXStackProps> = React.memo(\n  ({ props, DynamicXElement, devProps, children, index }) => {\n    const { env } = useXoraiaValue();\n\n    // WE ARE GETTING THE CURRENT ELEMENT FROM THE ATOM FAMILY\n    const xElement = useXElementValue<TUseXElement<IXStackProps>>(index);\n\n    const {\n      containerMode = \"NONE\",\n      direction,\n      gap,\n      backgroundImage,\n      backgroundMode = \"CONTAINED\",\n      backgroundAttachment = \"scroll\",\n      backgroundPosition = \"center\",\n      backgroundSize = \"cover\",\n      bgColor,\n      padding,\n      margin,\n      hoverBgColor,\n      hoverBorder,\n      boxShadow,\n      border,\n      borderRadius,\n      ...sx\n    } = props;\n\n    let bgImg: any = {};\n\n    if (backgroundImage) {\n      bgImg = {\n        backgroundImage: `url(\"${backgroundImage}\")`,\n        backgroundRepeat: \"no-repeat\",\n        backgroundSize,\n        backgroundAttachment,\n        backgroundPosition,\n      };\n    }\n\n    const filled = backgroundMode === \"FILL\";\n\n    const elements =\n      children ??\n      (DynamicXElement\n        ? xElement.elementsIndexes.map((index, position) => (\n            <DynamicXElement\n              key={index}\n              child={null}\n              hierachy={xElement.hierachy}\n              index={index}\n              position={position}\n            />\n          ))\n        : []);\n\n    const hasChildren = children ?? !!(elements as any).length;\n\n    const stackProps: any = {\n      direction,\n      sx: {\n        gridColumn: `span ${parseInt(props.colSpan?.toString() ?? \"1\")}`,\n        gridRow: `span ${parseInt(props.rowSpan?.toString() ?? \"1\")}`,\n        boxShadow: boxShadow,\n        border: generateBorder(border),\n        borderRadius: generateRadius(borderRadius),\n        ...sx,\n        ...(filled\n          ? {}\n          : { bgcolor: !!!hasChildren ? \"rgba(220,220,220, 0.2)\" : bgColor }),\n        ...(!filled && (containerMode === \"NONE\" || !containerMode)\n          ? bgImg\n          : {}),\n        padding: generateSide(\"padding\", padding),\n        margin: generateSide(\"margin\", margin),\n        \"&:hover\": {\n          bgcolor: !filled ? hoverBgColor : undefined,\n          hoverBorder: generateBorder(hoverBorder),\n        },\n      },\n\n      ...{\n        ...(env === \"dev\" && !filled && containerMode === \"NONE\" && devProps),\n      },\n    };\n\n    if (gap) stackProps.spacing = gap;\n\n    const placeholder = (\n      <p\n        style={{\n          height: \"100px\",\n          padding: \"20px\",\n          textAlign: \"center\",\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          margin: 0,\n        }}\n      >\n        Ajouter un element\n      </p>\n    );\n\n    const elementOrPlaceholder = hasChildren ? elements : placeholder;\n\n    let stack = <Stack {...stackProps}>{elementOrPlaceholder}</Stack>;\n\n    if (containerMode === \"CENTER\") {\n      stack = (\n        <Container\n          {...(env === \"dev\" && !filled && devProps)}\n          sx={{\n            gridColumn: `span ${parseInt(props.colSpan?.toString() ?? \"1\")}`,\n            gridRow: `span ${parseInt(props.rowSpan?.toString() ?? \"1\")}`,\n          }}\n        >\n          {backgroundImage && !filled ? (\n            <Stack\n              sx={{\n                ...bgImg,\n                width: sx.width || \"100%\",\n                height: sx.height || \"100%\",\n              }}\n            >\n              <Stack {...stackProps}>{elementOrPlaceholder}</Stack>\n            </Stack>\n          ) : (\n            <Stack {...stackProps}>{elementOrPlaceholder}</Stack>\n          )}\n        </Container>\n      );\n    }\n\n    if (containerMode === \"FILL\") {\n      stack = (\n        <Container\n          {...(env === \"dev\" && !filled && devProps)}\n          maxWidth={false}\n          sx={{\n            gridColumn: `span ${parseInt(props.colSpan?.toString() ?? \"1\")}`,\n            gridRow: `span ${parseInt(props.rowSpan?.toString() ?? \"1\")}`,\n          }}\n        >\n          {backgroundImage && !filled ? (\n            <Stack\n              sx={{\n                ...bgImg,\n                width: sx.width || \"100%\",\n                height: sx.height || \"100%\",\n              }}\n            >\n              <Stack {...stackProps}>{elementOrPlaceholder}</Stack>\n            </Stack>\n          ) : (\n            <Stack {...stackProps}>{elementOrPlaceholder}</Stack>\n          )}\n        </Container>\n      );\n    }\n\n    if (filled) {\n      return (\n        <Stack\n          {...(env === \"dev\" && devProps)}\n          height=\"max-content\"\n          width=\"100%\"\n          sx={{\n            ...bgImg,\n            gridColumn: `span ${parseInt(props.colSpan?.toString() ?? \"1\")}`,\n            gridRow: `span ${parseInt(props.rowSpan?.toString() ?? \"1\")}`,\n          }}\n        >\n          <Stack\n            height=\"100%\"\n            width=\"100%\"\n            bgcolor={bgColor}\n            sx={{\n              \"&:hover\": {\n                bgcolor: hoverBgColor,\n              },\n            }}\n          >\n            {containerMode === \"NONE\" || !containerMode ? (\n              <Stack {...stackProps}>{elementOrPlaceholder}</Stack>\n            ) : (\n              stack\n            )}\n          </Stack>\n        </Stack>\n      );\n    }\n\n    return stack;\n  },\n  compareProps\n);\n\nexport default XStackCore;\n"]}