krp-react-form-component
Version:
KRP React Component for Form Preview Component
134 lines (133 loc) • 7.87 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _FormHeader = _interopRequireDefault(require("./FormComponents/FormHeader/FormHeader"));
var _FormFooter = _interopRequireDefault(require("./FormComponents/FormFooter/FormFooter"));
var _AppContext = require("../context/AppContext");
var _SelectionContext = require("../context/SelectionContext");
var _Constants = require("../constants/Constants");
var _MainCommonForm = _interopRequireDefault(require("./FormComponents/MainForm/MainCommonForm"));
require("antd/dist/antd.css");
require("./MainForm.scss");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const CommonForm = _ref => {
var _formDetailData$form_8, _formDetailData$form_9, _formDetailData$form_0, _formDetailData$form_1, _formDetailData$form_10;
let {
mode,
isPreviewMode,
locale,
formDetailData,
onToStep,
onBackStep,
onConfirmClick,
step,
campaign,
handleCommonFormSubmit,
handleCommonFormPopup,
customerInfo,
serviceList = {},
onChangePreviewLang,
isServiceNeeded = false,
errorCommonFormFields = [],
onActionLog = () => {},
datePickerComp,
onClickLinkDecoration = () => {}
} = _ref;
const backgroundImageStyle = (alignment, form) => {
if (alignment === "left" && form === 'center') {
var _formDetailData$form_, _formDetailData$form_2;
return {
backgroundColor: formDetailData === null || formDetailData === void 0 || (_formDetailData$form_ = formDetailData.form_styles) === null || _formDetailData$form_ === void 0 ? void 0 : _formDetailData$form_.background_color,
backgroundImage: "url(".concat(formDetailData === null || formDetailData === void 0 || (_formDetailData$form_2 = formDetailData.form_styles) === null || _formDetailData$form_2 === void 0 ? void 0 : _formDetailData$form_2.background_image_desktop, ")"),
backgroundRepeat: "no-repeat",
backgroundSize: "50% 100%",
backgroundPosition: "left"
};
} else if (alignment === "right" && form === "center") {
var _formDetailData$form_3, _formDetailData$form_4;
return {
backgroundColor: formDetailData === null || formDetailData === void 0 || (_formDetailData$form_3 = formDetailData.form_styles) === null || _formDetailData$form_3 === void 0 ? void 0 : _formDetailData$form_3.background_color,
backgroundImage: "url(".concat(formDetailData === null || formDetailData === void 0 || (_formDetailData$form_4 = formDetailData.form_styles) === null || _formDetailData$form_4 === void 0 ? void 0 : _formDetailData$form_4.background_image_desktop, ")"),
backgroundRepeat: "no-repeat",
backgroundSize: "50% 100%",
backgroundPosition: "right"
};
} else if (alignment === "center") {
var _formDetailData$form_5, _formDetailData$form_6;
return {
backgroundColor: formDetailData === null || formDetailData === void 0 || (_formDetailData$form_5 = formDetailData.form_styles) === null || _formDetailData$form_5 === void 0 ? void 0 : _formDetailData$form_5.background_color,
backgroundImage: "url(".concat(formDetailData === null || formDetailData === void 0 || (_formDetailData$form_6 = formDetailData.form_styles) === null || _formDetailData$form_6 === void 0 ? void 0 : _formDetailData$form_6.background_image_desktop, ")"),
backgroundRepeat: "no-repeat",
backgroundSize: "cover",
backgroundPosition: "center"
};
} else {
var _formDetailData$form_7;
return {
backgroundColor: formDetailData === null || formDetailData === void 0 || (_formDetailData$form_7 = formDetailData.form_styles) === null || _formDetailData$form_7 === void 0 ? void 0 : _formDetailData$form_7.background_color
};
}
};
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_AppContext.AppProvider, {
appLocale: locale,
appMode: mode,
appIsPreviewMode: isPreviewMode,
appFormDetailData: formDetailData,
appOnToStep: onToStep,
appOnBackStep: onBackStep,
appOnConfirmClick: onConfirmClick,
appFormType: _Constants.CONSTANTS.COMMON_FORM,
appOnSubmitCommonForm: handleCommonFormSubmit,
appOnPopupCommonForm: handleCommonFormPopup,
appCustomerInfo: customerInfo,
appServiceList: serviceList,
appOnChangePreviewLang: onChangePreviewLang,
appIsServiceNeeded: isServiceNeeded,
appErrorCommonFormFields: errorCommonFormFields,
appOnActionLog: onActionLog,
DatePickerComp: datePickerComp,
appOnClickLinkDecoration: onClickLinkDecoration
}, /*#__PURE__*/_react.default.createElement("div", {
className: "main-container"
}, isPreviewMode && /*#__PURE__*/_react.default.createElement("div", {
className: "main-header"
}, /*#__PURE__*/_react.default.createElement(_SelectionContext.SelectionProvider, {
formStep: step
}, /*#__PURE__*/_react.default.createElement(_FormHeader.default, null))), /*#__PURE__*/_react.default.createElement(_SelectionContext.SelectionProvider, {
formStep: step,
campaign: campaign
}, /*#__PURE__*/_react.default.createElement("div", {
className: "main-content " + mode + (!isPreviewMode ? " no-header-offset" : ""),
style: mode === "browser_desktop" ? (formDetailData === null || formDetailData === void 0 || (_formDetailData$form_8 = formDetailData.form_styles) === null || _formDetailData$form_8 === void 0 ? void 0 : _formDetailData$form_8.background_image_alignment) === "top" ? (formDetailData === null || formDetailData === void 0 || (_formDetailData$form_9 = formDetailData.form_styles) === null || _formDetailData$form_9 === void 0 ? void 0 : _formDetailData$form_9.background_color) === "#FFFFFF" ? {} : {
backgroundColor: formDetailData === null || formDetailData === void 0 || (_formDetailData$form_0 = formDetailData.form_styles) === null || _formDetailData$form_0 === void 0 ? void 0 : _formDetailData$form_0.background_color
} : backgroundImageStyle(formDetailData === null || formDetailData === void 0 || (_formDetailData$form_1 = formDetailData.form_styles) === null || _formDetailData$form_1 === void 0 ? void 0 : _formDetailData$form_1.background_image_alignment, formDetailData === null || formDetailData === void 0 || (_formDetailData$form_10 = formDetailData.form_styles) === null || _formDetailData$form_10 === void 0 ? void 0 : _formDetailData$form_10.form_vertical_alignment) : {}
}, /*#__PURE__*/_react.default.createElement(_MainCommonForm.default, null), isPreviewMode && /*#__PURE__*/_react.default.createElement("div", {
className: "main-footer"
}, /*#__PURE__*/_react.default.createElement(_FormFooter.default, null)))))));
};
CommonForm.propTypes = {
mode: _propTypes.default.oneOf(["mobile", "browser_mobile", "browser_desktop"]),
isPreviewMode: _propTypes.default.bool,
locale: _propTypes.default.string,
formDetailData: _propTypes.default.object,
onToStep: _propTypes.default.func,
onBackStep: _propTypes.default.func,
onConfirmClick: _propTypes.default.func,
step: _propTypes.default.string,
campaign: _propTypes.default.object,
handleCommonFormSubmit: _propTypes.default.func,
handleCommonFormPopup: _propTypes.default.func,
customerInfo: _propTypes.default.object,
serviceList: _propTypes.default.object,
onChangePreviewLang: _propTypes.default.func,
isServiceNeeded: _propTypes.default.bool,
errorCommonFormFields: _propTypes.default.array,
onActionLog: _propTypes.default.func,
datePickerComp: _propTypes.default.elementType,
onClickLinkDecoration: _propTypes.default.func
};
var _default = exports.default = CommonForm;