krp-react-form-component
Version:
KRP React Component for Form Preview Component
174 lines (173 loc) • 6.45 kB
JavaScript
"use strict";
require("core-js/modules/es.object.assign.js");
require("core-js/modules/es.weak-map.js");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
require("core-js/modules/web.dom-collections.iterator.js");
var _react = _interopRequireWildcard(require("react"));
var _antd = require("antd");
var _th_TH = _interopRequireDefault(require("antd/es/locale-provider/th_TH"));
var _en_US = _interopRequireDefault(require("antd/es/locale-provider/en_US"));
require("./CustomDatePickerMobile.scss");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _AppContext = require("../../../../context/AppContext");
var _Constants = require("../../../../constants/Constants");
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); }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
const CustomDatePickerMobile = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
let {
browserMode,
name,
required,
className,
lang,
placeholder,
format,
disabledDate,
initState,
formProps,
formFieldName,
errorMsg,
handleTitleError
} = _ref;
const {
resolveLocale
} = (0, _react.useContext)(_AppContext.AppContext);
const [value, setValue] = (0, _react.useState)(initState || null);
const [prevValue, setPrevValue] = (0, _react.useState)(null);
const [mode, setMode] = (0, _react.useState)('date');
const [open, setOpen] = (0, _react.useState)(false);
const handleOpenChange = () => {
setValue(value);
setMode(mode);
setPrevValue(value);
setOpen(true);
};
const _onChange = (time, required) => {
if (time === null && required === 'yes') {
formProps.setFields({
[formFieldName]: {
value: null,
errors: [new Error(errorMsg)]
}
});
handleTitleError();
}
setValue(time);
if (mode !== "mobile") {
formProps.setFieldsValue({
[formFieldName]: time
});
}
};
const handleConfirm = required => {
if (value === null && required === 'yes') {
formProps.setFields({
[formFieldName]: {
value: null,
errors: [new Error(errorMsg)]
}
});
} else {
formProps.setFieldsValue({
[formFieldName]: value
});
}
handleTitleError();
setOpen(false);
};
const handleClear = () => {
setValue(prevValue);
setOpen(false);
};
let attr = {};
if (browserMode === "mobile") {
attr = {
initState: initState,
formProps: formProps,
formFieldName: formFieldName,
errorMsg: errorMsg,
handleTitleError: handleTitleError,
inputReadOnly: true,
open: open,
onOpenChange: handleOpenChange,
value: value,
dropdownClassName: "CustomDatePickerPopup",
mode: mode,
renderExtraFooter: () => mode === 'date' ? /*#__PURE__*/_react.default.createElement("div", {
className: "mobile-item-datepicker-extra-footer"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "mobile-item-datepicker-extra-footer-container"
}, /*#__PURE__*/_react.default.createElement(_antd.Button, {
className: "mobile-item-datepicker-extra-footer-btn-left",
icon: "close",
shape: "circle",
onClick: handleClear
}), /*#__PURE__*/_react.default.createElement("div", {
style: {
marginLeft: 5
}
}, resolveLocale('FORM_PREVIEW_TIMEPICKER_FOOTER_CLOSE'))), /*#__PURE__*/_react.default.createElement("div", {
className: "mobile-item-datepicker-extra-footer-container"
}, /*#__PURE__*/_react.default.createElement("div", {
style: {
marginRight: 5
}
}, resolveLocale('FORM_PREVIEW_TIMEPICKER_FOOTER_OK')), /*#__PURE__*/_react.default.createElement(_antd.Button, {
className: "mobile-item-datepicker-extra-footer-btn-right",
icon: "check",
shape: "circle",
onClick: () => {
handleConfirm(required);
}
}))) : null,
showToday: false,
// locale: localeEn,
dateRender: current => {
const style = {
width: '30px',
height: '30px',
lineHeight: '22px',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
borderRadius: '50%'
};
return /*#__PURE__*/_react.default.createElement("div", {
className: "ant-calendar-date",
style: style
}, current.date());
}
};
}
return /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
locale: lang === _Constants.CONSTANTS.TH ? _th_TH.default : _en_US.default
}, /*#__PURE__*/_react.default.createElement(_antd.DatePicker, _extends({
name: name,
className: className,
placeholder: placeholder,
format: format,
disabledDate: disabledDate,
onChange: e => {
_onChange(e, required);
}
}, attr)));
});
CustomDatePickerMobile.propTypes = {
name: _propTypes.default.string,
required: _propTypes.default.string,
className: _propTypes.default.string,
lang: _propTypes.default.string,
placeholder: _propTypes.default.string,
format: _propTypes.default.string,
disabledDate: _propTypes.default.func,
initState: _propTypes.default.object,
formProps: _propTypes.default.object,
formFieldName: _propTypes.default.string,
errorMsg: _propTypes.default.string,
handleTitleError: _propTypes.default.func
};
var _default = exports.default = CustomDatePickerMobile;