{"version":3,"sources":["../src/components/elements/XForm.tsx"],"names":["React","Button","Stack","InputLabel","TextField","InputBase","useSetRecoilState","isEqual","compareProps","prevProps","nextProps","X_FORM_GROUP","XForm","config","breakpoint","useBreakpoint","env","useXoraiaValue","xElement","useXElement","setSelectedElement","USE_SELECTED_INDEX","value","valueAtBreakPoint","getValueOnBreakpoint","devProps","e","clickHandler","type","width","height","padding","margin","border","borderRadius","bgColor","gap","btnText","btnHeight","btnMargin","btnBgColor","btnBorder","btnRadius","btnHoverBgColor","btnHoverBorder","btnHoverTextColor","btnTextColor","btnTextFontSize","btnTextFontWeight","btnWidth","inputProps","group","generateSide","generateBorder","generateRadius","item","FormInput","XForm_default","name","label","placeholder","required","shrinkLabel","inputDesign","inputBgColor","inputBorder","inputRadius","inputFocusBgColor","inputFocusBorder","inputTextColor","inputTextFontSize","inputTextFontWeight","inputHeight","labelColor","labelFontSize","labelFontWeight","labelWidth","labelTextAlign","labelVerticalAlign","id","isMat","variant","field","inputLabel"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { Button, Stack, InputLabel, TextField, InputBase } from \"@mui/material\";\n\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 IXFormProps,\n TXFormMode,\n XFormProps,\n} from \"../../utils/interfaces/Elements/XForm.interfaces\";\nimport { IFormInput } from \"../../utils/interfaces/Elements/XForm.interfaces\";\nimport { generateBorder } from \"../../lib/generateBorder\";\nimport { generateRadius } from \"../../lib/generateRadius\";\n\nconst compareProps = (prevProps: any, nextProps: any) => {\n return isEqual(prevProps, nextProps);\n};\n\ninterface IXFormItem {\n required?: boolean;\n type: \"email\" | \"text\" | \"textarea\" | \"phone\" | \"password\" | \"checkbox\";\n placeholder?: string;\n label: string;\n name:\n | \"fullname\"\n | \"email\"\n | \"message\"\n | \"address\"\n | \"phone\"\n | \"password\"\n | \"confirm\"\n | \"terms\";\n}\n\ntype TXFormGroup = { [key in TXFormMode]?: IXFormItem[] };\n\nconst X_FORM_GROUP: TXFormGroup = {\n \"contact-us\": [\n {\n type: \"text\",\n label: \"Nom Complet\",\n placeholder: \"Entrez Votre Nom Complet\",\n name: \"fullname\",\n required: true,\n },\n {\n type: \"email\",\n label: \"Addresse Email\",\n placeholder: \"Entrez Votre Addresse Email\",\n name: \"email\",\n required: true,\n },\n {\n type: \"textarea\",\n label: \"Message\",\n placeholder: \"Entrez Votre Message\",\n name: \"message\",\n required: true,\n },\n ],\n newsletter: [\n {\n type: \"email\",\n label: \"Addresse Email\",\n placeholder: \"Entrez Votre Addresse Email\",\n name: \"email\",\n required: true,\n },\n ],\n};\n\nconst XForm: React.FC = 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>(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(\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 type = \"contact-us\",\n\n // buttonProps = {},\n // separator = '/',\n // showHomeIcons = false,\n // showHomeLabel = true,\n // textProps = {},\n width,\n height,\n padding,\n margin,\n border,\n borderRadius,\n bgColor,\n gap = \"15px\",\n btnText = \"SOUMETTRE\",\n btnHeight,\n btnMargin,\n btnBgColor,\n btnBorder,\n btnRadius,\n btnHoverBgColor,\n btnHoverBorder,\n btnHoverTextColor,\n btnTextColor,\n btnTextFontSize,\n btnTextFontWeight,\n btnWidth,\n ...inputProps\n // TODO IMPLEMENT BORDER RADIUS\n } = valueAtBreakPoint;\n\n if (!X_FORM_GROUP[type]) {\n return null;\n }\n\n const group = X_FORM_GROUP[type] || [];\n\n return (\n \n {group.map((item) => (\n \n ))}\n \n {btnText}\n \n \n );\n },\n compareProps\n);\n\n// const generateFormItem = (item: IXFormItem) => {\n// if (!item) return null;\n\n// let element: React.ReactNode;\n\n// switch (item.type) {\n// case \"text\":\n// case \"email\":\n// case \"password\":\n// element = (\n// \n// );\n// break;\n// case \"textarea\":\n// element = (\n// \n// );\n// break;\n// default:\n// return null;\n// }\n\n// return element;\n// };\n\nexport default XForm;\n\ninterface FormInputProps extends IFormInput {\n name: string;\n label?: string;\n placeholder?: string;\n required?: boolean;\n type?: \"email\" | \"text\" | \"textarea\" | \"phone\" | \"password\" | \"checkbox\";\n}\n\nconst FormInput: React.FC = ({\n name,\n label,\n placeholder,\n required,\n shrinkLabel,\n inputDesign = \"material-standard\",\n type = \"text\",\n inputBgColor = \"#FFFFFF\",\n inputBorder,\n inputRadius,\n inputFocusBgColor,\n inputFocusBorder,\n inputTextColor = \"#000000\",\n inputTextFontSize,\n inputTextFontWeight,\n inputHeight = \"40px\",\n labelColor = \"#000000\",\n labelFontSize,\n labelFontWeight,\n labelWidth,\n labelTextAlign = \"left\",\n labelVerticalAlign = \"flex-start\",\n}) => {\n const id = \"FF_\" + name;\n const isMat = inputDesign.includes(\"material\");\n const variant = isMat ? inputDesign.replace(\"material-\", \"\") : \"standard\";\n\n const defaultBorder = !isMat\n ? inputBorder ?? { color: \"#000000\", style: \"solid\", width: \"1px\" }\n : undefined;\n\n const textareaProps =\n type === \"textarea\"\n ? { type: \"text\", multiline: true, maxRows: 7, minRows: 4 }\n : {};\n\n const inputProps = {\n id,\n name,\n placeholder,\n required,\n type,\n fullWidth: true,\n ...textareaProps,\n sx: {\n bgcolor: inputBgColor,\n border: generateBorder(defaultBorder),\n borderRadius: generateRadius(inputRadius),\n color: inputTextColor,\n fontSize: inputTextFontSize,\n fontWeight: inputTextFontWeight,\n height: type !== \"textarea\" ? inputHeight : \"auto\",\n minHeight: 30,\n\n \"&:focus\": {\n bgcolor: inputFocusBgColor,\n border: generateBorder(inputFocusBorder),\n },\n\n \"& input\": { px: isMat ? 0 : 1.5, py: 0 },\n\n \"& textarea\": { px: isMat ? 0 : 1.5, py: 0, resize: \"vertical\" },\n },\n };\n\n let field = (\n \n );\n\n if (!isMat) {\n field = ;\n }\n\n const inputLabel =\n inputDesign !== \"no-label\" && !isMat ? (\n \n {label ?? name}\n \n ) : null;\n\n if (inputDesign === \"block\") {\n return (\n \n {inputLabel}\n {field}\n \n );\n }\n\n if (inputDesign === \"inline\") {\n return (\n \n {inputLabel}\n {field}\n \n );\n }\n\n return field;\n};\n"]}