krp-react-form-component
Version:
KRP React Component for Form Preview Component
121 lines (120 loc) • 6.33 kB
JavaScript
"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 _antd = require("antd");
var _back = _interopRequireDefault(require("../../../images/back.png"));
var _kbank_logo = _interopRequireDefault(require("../../../images/kbank_logo.svg"));
var _AppContext = require("../../../context/AppContext");
var _SelectionContext = require("../../../context/SelectionContext");
var _Constants = require("../../../constants/Constants");
require("./FormHeader.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 {
Option
} = _antd.Select;
const FormHeader = () => {
const {
mode,
locale,
resolveLocale,
setLocale,
appOnBackStep,
formDetailData,
appOnChangePreviewLang
} = (0, _react.useContext)(_AppContext.AppContext);
const {
formStep
} = (0, _react.useContext)(_SelectionContext.SelectionContext);
const handleChangeLang = changeLang => {
setLocale(changeLang);
appOnChangePreviewLang(changeLang);
};
const handleHeaderTitle = () => {
switch (formStep) {
case 'selectOfferPage':
return resolveLocale('FORM_DETAIL_PREVIEW_POPUP_MOBILE_TITLE_OFFER_PAGE');
case 'factsheetPage':
return resolveLocale('FORM_DETAIL_PREVIEW_POPUP_MOBILE_TITLE_FACTSHEET_PAGE');
case 'selectRewardPage':
return resolveLocale('FORM_DETAIL_PREVIEW_POPUP_MOBILE_TITLE_REWARD_PAGE');
case 'confirmationPage':
if (locale === 'en') {
var _formDetailData$form_;
return ((_formDetailData$form_ = formDetailData.form_confirmation) === null || _formDetailData$form_ === void 0 ? void 0 : _formDetailData$form_.title_en) || resolveLocale('FORM_DETAIL_PREVIEW_POPUP_MOBILE_TITLE_CONFIRMATION_PAGE');
} else {
var _formDetailData$form_2;
return ((_formDetailData$form_2 = formDetailData.form_confirmation) === null || _formDetailData$form_2 === void 0 ? void 0 : _formDetailData$form_2.title_th) || resolveLocale('FORM_DETAIL_PREVIEW_POPUP_MOBILE_TITLE_CONFIRMATION_PAGE');
}
default:
return resolveLocale('FORM_DETAIL_PREVIEW_POPUP_MOBILE_TITLE');
}
};
switch (mode) {
case "mobile":
return /*#__PURE__*/_react.default.createElement("div", {
className: "FormHeader mobile"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "mobile-navigation-wrap"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "mobile-navigation".concat(formStep === "confirmationPage" ? " no-curve" : "")
}, formStep !== "confirmationPage" && /*#__PURE__*/_react.default.createElement("div", {
className: "mobile-nav-left"
}, /*#__PURE__*/_react.default.createElement("img", {
onClick: () => appOnBackStep(formStep),
className: "mobile-nav-back",
alt: "back",
src: _back.default
})), /*#__PURE__*/_react.default.createElement("div", {
className: "mobile-nav-title"
}, handleHeaderTitle()))));
case "browser_mobile":
return /*#__PURE__*/_react.default.createElement("div", {
className: "FormHeader browser_mobile"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "box-header"
}, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("img", {
className: "browser_mobile logo",
src: _kbank_logo.default,
alt: "kbanklogo"
})), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_antd.Select, {
className: "browser_mobile select-lang",
defaultValue: locale,
bordered: false,
onChange: value => handleChangeLang(value)
}, /*#__PURE__*/_react.default.createElement(Option, {
value: _Constants.CONSTANTS.TH
}, resolveLocale("FORM_DETAIL_PREVIEW_POPUP_BOX_TH_LANG")), /*#__PURE__*/_react.default.createElement(Option, {
value: _Constants.CONSTANTS.EN
}, resolveLocale("FORM_DETAIL_PREVIEW_POPUP_BOX_EN_LANG"))))));
case "browser_desktop":
return /*#__PURE__*/_react.default.createElement("div", {
className: "FormHeader browser_desktop"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "box-header"
}, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("img", {
className: "browser_desktop logo",
src: _kbank_logo.default,
alt: "kbanklogo"
})), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_antd.Button, {
className: "browser_desktop btn-lang" + (locale === _Constants.CONSTANTS.TH ? " active" : ""),
type: "text",
onClick: () => handleChangeLang(_Constants.CONSTANTS.TH)
}, resolveLocale("FORM_DETAIL_PREVIEW_POPUP_BOX_TH_LANG")), /*#__PURE__*/_react.default.createElement(_antd.Divider, {
type: "vertical"
}), /*#__PURE__*/_react.default.createElement(_antd.Button, {
className: "browser_desktop btn-lang" + (locale === _Constants.CONSTANTS.EN ? " active" : ""),
type: "text",
onClick: () => handleChangeLang(_Constants.CONSTANTS.EN)
}, resolveLocale("FORM_DETAIL_PREVIEW_POPUP_BOX_EN_LANG")))));
default:
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
}
};
FormHeader.propTypes = {};
var _default = exports.default = FormHeader;