zmp-react
Version:
Build full featured iOS & Android apps using ZMP & React
338 lines (304 loc) • 12.3 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireWildcard(require("react"));
var _server = _interopRequireDefault(require("react-dom/server"));
var _zmp = require("../shared/zmp");
var _utils = require("../shared/utils");
var _dateTime = _interopRequireDefault(require("../../common/date-time"));
var _input = _interopRequireDefault(require("./input"));
var _listInput = _interopRequireDefault(require("./list-input"));
var _utils2 = require("../../common/utils");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
/* dts-imports
*/
/* dts-props
actionText?: string;
title?: string;
inputId?: string;
name?: string;
onClose?: (...args: any[]) => void;
onClickAction?: (...args: any[]) => void;
locale?: string;
backdrop? : boolean
backdropEl? : string | object
dateFormat?: string;
datePickerColumns?: 'MM-DD-YYYY' | 'DD-MM-YYYY' | 'YYYY-MM-DD';
dateTimePicker?: boolean;
datePicker?: boolean;
startYear?: number;
endYear?: number;
minStep?: number;
listInput?: boolean;
is24Hours?: boolean;
label?: string;
id?: string | number;
className?: string;
style?: React.CSSProperties;
name? : string
value? : Date
defaultValue? : Date
startDate?: Date
endDate?: Date
placeholder? : string
inputId? : string | number
autofocus? : boolean
autosave? : string
disabled? : boolean
readonly? : boolean
required? : boolean
pattern? : string
validate? : boolean | string
validateOnBlur? : boolean
onValidate? : Function
clearButton? : boolean
errorMessage? : string
errorMessageForce? : boolean
info? : string
wrap? : boolean
inputStyle? : React.CSSProperties
onInputNotEmpty? : (event?: any) => void
onInputEmpty? : (event?: any) => void
onInputClear? : (event?: any) => void
onFocus? : (...args: any[]) => void
onBlur? : (...args: any[]) => void
onChange? : (...args: any[]) => void
CHILDREN_PROP
*/
var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
var pickerRef = (0, _react.useRef)(null);
var dateTimeInstance = (0, _react.useRef)(null);
var actionText = props.actionText,
title = props.title,
value = props.value,
defaultValue = props.defaultValue,
onChange = props.onChange,
inputId = props.inputId,
name = props.name,
onClose = props.onClose,
onClickAction = props.onClickAction,
locale = props.locale,
dateFormat = props.dateFormat,
listInput = props.listInput,
dateTimePicker = props.dateTimePicker,
datePicker = props.datePicker,
startYear = props.startYear,
endYear = props.endYear,
minStep = props.minStep,
id = props.id,
className = props.className,
style = props.style,
inputmode = props.inputmode,
placeholder = props.placeholder,
autofocus = props.autofocus,
autosave = props.autosave,
disabled = props.disabled,
required = props.required,
pattern = props.pattern,
validate = props.validate,
validateOnBlur = props.validateOnBlur,
onValidate = props.onValidate,
clearButton = props.clearButton,
errorMessage = props.errorMessage,
errorMessageForce = props.errorMessageForce,
info = props.info,
wrap = props.wrap,
inputStyle = props.inputStyle,
onInputNotEmpty = props.onInputNotEmpty,
onInputEmpty = props.onInputEmpty,
onInputClear = props.onInputClear,
onFocus = props.onFocus,
onBlur = props.onBlur,
is24Hours = props.is24Hours,
label = props.label,
startDate = props.startDate,
endDate = props.endDate,
datePickerColumns = props.datePickerColumns,
_props$backdrop = props.backdrop,
backdrop = _props$backdrop === void 0 ? true : _props$backdrop;
var pickerTitle = '';
var actionButtonText = actionText || 'Done';
if (title) {
pickerTitle = title;
} else if (dateTimePicker) {
pickerTitle = 'Date Time Picker';
} else {
pickerTitle = 'Date Picker';
}
var targetId = inputId || "zmp_picker_" + (0, _utils.getComponentId)();
var inputPlaceHolder = dateTimePicker ? 'dd/mm/yyyy hh:mm' : 'dd/mm/yyyy';
if (dateFormat) {
inputPlaceHolder = dateFormat;
}
if (placeholder) {
inputPlaceHolder = placeholder;
}
(0, _react.useEffect)(function () {
dateTimeInstance.current = new _dateTime.default({
locale: locale,
dateTimePicker: dateTimePicker,
datePicker: datePicker,
dateFormat: dateFormat,
startYear: startYear,
endYear: endYear,
minStep: minStep,
defaultValue: defaultValue,
value: value,
is24Hours: is24Hours,
startDate: startDate,
endDate: endDate,
datePickerColumns: datePickerColumns
});
return function () {
var _pickerRef$current;
return (_pickerRef$current = pickerRef.current) == null ? void 0 : _pickerRef$current.destroy();
};
}, []);
(0, _react.useEffect)(function () {
(0, _zmp.zmpready)(function () {
var instance = dateTimeInstance.current;
if (instance && !pickerRef.current) {
var initDate = defaultValue || value || new Date();
var cols = instance.columns || [];
pickerRef.current = _zmp.zmp.picker.create((0, _extends2.default)({}, props, {
value: undefined,
inputEl: "#" + targetId,
rotateEffect: false,
backdrop: backdrop,
formatValue: function formatValue() {
var date = instance.getValue();
return instance.formatDate(date);
},
render: function render() {
var _this = this;
var columns = this.cols.map(function (col) {
return _this.renderColumn(col);
});
var toolbar = this.params.toolbar && this.renderToolbar();
var columnsMarkup = _server.default.renderToStaticMarkup(columns);
var toolbarMarkup = _server.default.renderToStaticMarkup(toolbar);
var columnsHtml = (0, _utils2.htmlDecode)(columnsMarkup);
var toolbarHtml = (0, _utils2.htmlDecode)(toolbarMarkup);
var classes = this.params.cssClass || '';
var renderEl = "<div class=\"sheet-modal picker picker-sheet " + classes + "\">\n <div class=\"zmp-picker-sheet-header\">\n <a class=\"zmp-picker-close-btn link sheet-close popover-close no-ripple\" ></a>\n " + (pickerTitle ? "<div class=\"zmp-picker-sheet-title\">" + pickerTitle + "</div>" : '') + "\n </div>\n <div class=\"sheet-modal-inner picker-columns\">\n " + columnsHtml + "\n <div class=\"picker-center-highlight\"></div>\n </div>\n " + toolbarHtml + "\n </div>";
return renderEl;
},
renderToolbar: function renderToolbar() {
return '<div class="toolbar">' + '<div class="toolbar-inner">' + '<div class="zmp-toolbar-center">' + ("<a href= \"#\" class=\"zmp-picker-action-button\">" + actionButtonText + "</a>") + '</div>' + '</div>' + '</div>';
},
cols: cols,
on: {
init: function init(picker) {
instance.setInitializing(true);
instance.setDate(initDate);
if (defaultValue || value) {
var values = instance.getPickerValues();
picker.setValue(values);
}
},
open: function open(picker) {
if (!value && !defaultValue) {
var values = instance.getPickerValues();
picker.setValue(values);
}
instance.setInitializing(false);
picker.emit('change', picker, instance.getPickerValues());
picker.$el.find('.zmp-picker-action-button').on('click', function () {
if (typeof onClickAction === 'function') {
onClickAction(picker);
} else {
picker.close();
}
});
},
change: function change(picker, values) {
if (instance.isUpdating || instance.initializing) {
return;
}
instance.setValue(values);
if (typeof onChange === 'function') {
onChange(instance.getValue(), instance.getPickerValues());
}
},
close: function close(picker) {
if (typeof onClose === 'function') {
onClose(picker);
}
}
}
}));
}
});
}, [dateTimeInstance.current]);
(0, _react.useImperativeHandle)(ref, function () {
return pickerRef.current;
});
var InputEl = listInput ? _listInput.default : _input.default;
(0, _react.useEffect)(function () {
if (dateTimeInstance.current && value && pickerRef.current) {
var pickerValues = [];
var colsIdx = dateTimeInstance.current.pickerColumnsIndex || {};
var day = value == null ? void 0 : value.getDate();
var month = value == null ? void 0 : value.getMonth();
var year = value == null ? void 0 : value.getFullYear();
var hour = value.getHours();
var minutes = value.getMinutes();
Object.keys(colsIdx).forEach(function (key) {
if (key === 'DD') {
pickerValues.push(day);
}
if (key === 'MM') {
pickerValues.push(month);
}
if (key === 'YYYY') {
pickerValues.push(year);
}
if (key === 'hh') {
pickerValues.push(hour > 12 && !is24Hours ? hour - 12 : hour);
}
if (key === 'mm') {
pickerValues.push(minutes);
}
});
dateTimeInstance.current.setDate(value);
pickerRef.current.setValue(pickerValues);
}
}, [value]);
return /*#__PURE__*/_react.default.createElement(InputEl, {
inputId: targetId,
readonly: true,
placeholder: inputPlaceHolder,
name: name,
type: "text",
id: id,
className: className,
style: style,
inputmode: inputmode,
autofocus: autofocus,
autosave: autosave,
disabled: disabled,
required: required,
pattern: pattern,
validate: validate,
label: label,
validateOnBlur: validateOnBlur,
onValidate: onValidate,
clearButton: clearButton,
errorMessage: errorMessage,
errorMessageForce: errorMessageForce,
info: info,
wrap: wrap,
inputStyle: inputStyle,
onInputNotEmpty: onInputNotEmpty,
onInputEmpty: onInputEmpty,
onInputClear: onInputClear,
onFocus: onFocus,
onBlur: onBlur
});
});
DatePicker.displayName = 'zmp-input';
var _default = DatePicker;
exports.default = _default;