zmp-react
Version:
Build full featured iOS & Android apps using ZMP & React
315 lines (297 loc) • 10.7 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import React, { useRef, forwardRef, useImperativeHandle, useEffect } from 'react';
import ReactDOMServer from 'react-dom/server';
import { zmp, zmpready } from '../shared/zmp';
import { getComponentId } from '../shared/utils';
import ZMPDateTime from '../../common/date-time';
import Input from './input';
import ListInput from './list-input';
import { htmlDecode } from '../../common/utils';
/* 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__*/forwardRef(function (props, ref) {
var pickerRef = useRef(null);
var dateTimeInstance = 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_" + getComponentId();
var inputPlaceHolder = dateTimePicker ? 'dd/mm/yyyy hh:mm' : 'dd/mm/yyyy';
if (dateFormat) {
inputPlaceHolder = dateFormat;
}
if (placeholder) {
inputPlaceHolder = placeholder;
}
useEffect(function () {
dateTimeInstance.current = new ZMPDateTime({
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();
};
}, []);
useEffect(function () {
zmpready(function () {
var instance = dateTimeInstance.current;
if (instance && !pickerRef.current) {
var initDate = defaultValue || value || new Date();
var cols = instance.columns || [];
pickerRef.current = zmp.picker.create(_extends({}, 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 = ReactDOMServer.renderToStaticMarkup(columns);
var toolbarMarkup = ReactDOMServer.renderToStaticMarkup(toolbar);
var columnsHtml = htmlDecode(columnsMarkup);
var toolbarHtml = 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]);
useImperativeHandle(ref, function () {
return pickerRef.current;
});
var InputEl = listInput ? ListInput : Input;
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.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';
export default DatePicker;