krp-react-form-component/dist/components/FormComponents/MainForm/MainCommonForm.js

KRP React Component for Form Preview Component

"use strict";

require("core-js/modules/es.weak-map.js");
require("core-js/modules/web.dom-collections.iterator.js");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _AppContext = require("../../../context/AppContext");
var _SelectionContext = require("../../../context/SelectionContext");
var _ConfirmationPage = _interopRequireDefault(require("./ConfirmationPage/ConfirmationPage"));
var _CommonFormPage = _interopRequireDefault(require("./CommonFormPage/CommonFormPage"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _antd = require("antd");
var _Constants = require("../../../constants/Constants");
var _actions = require("../../../utils/actions");
var _default_bg = _interopRequireDefault(require("../../../images/default_bg.png"));
require("./MainCommonForm.scss");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const MainCommonForm = () => {
  var _formDetailData$form_3, _formDetailData$form_4, _formDetailData$form_5, _formDetailData$form_6;
  const {
    formStep
  } = (0, _react.useContext)(_SelectionContext.SelectionContext);
  const {
    mode,
    formDetailData,
    locale
  } = (0, _react.useContext)(_AppContext.AppContext);
  (0, _react.useEffect)(() => {
    document.querySelector(".box-body").scroll({
      top: 0,
      behavior: "auto"
    });
  }, [formStep]);
  const renderPage = () => {
    let page;
    switch (formStep) {
      case "confirmationPage":
        page = /*#__PURE__*/_react.default.createElement(_ConfirmationPage.default, null);
        break;
      case "commonFormPage":
        page = /*#__PURE__*/_react.default.createElement(_CommonFormPage.default, {
          formBackgroundStyle: formBackgroundStyle
        });
        break;
      default:
        break;
    }
    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, page);
  };
  const formBackgroundStyle = function formBackgroundStyle(formBackground) {
    let isParent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
    let backgroundAlign = arguments.length > 2 ? arguments[2] : undefined;
    let formAlign = arguments.length > 3 ? arguments[3] : undefined;
    let formWidth = "unset";
    if (formAlign === 'center' && mode === 'browser_desktop') {
      formWidth = "944px";
    }
    if (formBackground === "none") {
      return {
        backgroundColor: "unset",
        width: formWidth
      };
    } else if (formBackground === "overlay") {
      if (isParent) {
        var _formDetailData$form_;
        return {
          backgroundColor: "".concat((_formDetailData$form_ = formDetailData.form_styles) === null || _formDetailData$form_ === void 0 ? void 0 : _formDetailData$form_.form_background_color, "CC"),
          width: formWidth
        };
      } else {
        return {
          backgroundColor: "unset",
          width: formWidth
        };
      }
    } else if (formBackground === "solid") {
      var _formDetailData$form_2;
      return {
        backgroundColor: (_formDetailData$form_2 = formDetailData.form_styles) === null || _formDetailData$form_2 === void 0 ? void 0 : _formDetailData$form_2.form_background_color,
        width: formWidth
      };
    }
  };
  const isShowButtonContainer = () => {
    if (formStep !== "confirmationPage") {
      return true;
    } else {
      return false;
    }
  };
  const {
    form_styles
  } = formDetailData;
  const formStylesEdit = _actions.ACTIONS.convertUnderscoreToCamel(form_styles);
  const {
    registerButtonColor,
    labelRegisterButtonTh = "ลงทะเบียน",
    labelRegisterButtonEn = "Register"
  } = formStylesEdit;
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "MainCommonForm " + mode + " " + formStep
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-body",
    style: formBackgroundStyle((_formDetailData$form_3 = formDetailData.form_styles) === null || _formDetailData$form_3 === void 0 ? void 0 : _formDetailData$form_3.form_background, true, formDetailData === null || formDetailData === void 0 || (_formDetailData$form_4 = formDetailData.form_styles) === null || _formDetailData$form_4 === void 0 ? void 0 : _formDetailData$form_4.background_image_alignment, formDetailData === null || formDetailData === void 0 || (_formDetailData$form_5 = formDetailData.form_styles) === null || _formDetailData$form_5 === void 0 ? void 0 : _formDetailData$form_5.form_vertical_alignment)
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "body-content ".concat(formStep === "confirmationPage" ? "for-confirmation-page" : ""),
    style: formDetailData.form_styles ? formStep === "confirmationPage" ? mode === "mobile" ? {
      backgroundImage: "url(".concat(_default_bg.default, ")"),
      backgroundRepeat: "no-repeat",
      backgroundSize: "100% 100%"
    } : {} : mode === 'browser_desktop' ? {} : {
      backgroundColor: (_formDetailData$form_6 = formDetailData.form_styles) === null || _formDetailData$form_6 === void 0 ? void 0 : _formDetailData$form_6.background_color
    } : {}
  }, renderPage()), isShowButtonContainer() && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
    className: "form-button-container"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "form-button-wrap"
  }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
    className: "form-main-button",
    type: "primary",
    htmlType: "submit",
    form: "formRegisterPreview",
    style: mode === "browser_mobile" || mode === "browser_desktop" ? {
      backgroundColor: registerButtonColor,
      borderColor: registerButtonColor
    } : null
  }, locale === _Constants.CONSTANTS.EN ? labelRegisterButtonEn : labelRegisterButtonTh))), mode === "mobile" && /*#__PURE__*/_react.default.createElement("div", {
    className: "mobile-overlay-margin"
  }))));
};
MainCommonForm.propTypes = {
  formDetailData: _propTypes.default.object
};
var _default = exports.default = MainCommonForm;