@sap-ux/ui-components
Version:
SAP UI Components Library
73 lines • 2.87 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.UIDatePicker = void 0;
const react_1 = __importDefault(require("react"));
const UIInput_1 = require("../UIInput");
const UIIcon_1 = require("../UIIcon");
const Icons_1 = require("../Icons");
require("./UIDatePicker.scss");
/**
* UIDatePicker component.
*
* @exports
* @class {UIDatePicker}
* @extends {React.Component<UIDatePickerProps>}
*/
class UIDatePicker extends react_1.default.Component {
/**
* Initializes component properties.
*
* @param {UIDatePickerProps} props
*/
constructor(props) {
super(props);
this.state = {
value: ''
};
this.dateRegex = /^\d{4}-\d{2}-\d{2}$/;
this.dateTimeRegex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}$/;
this.state.value = props.defaultValue ?? '';
this.onInputChange = this.onInputChange.bind(this);
this.onPickerChange = this.onPickerChange.bind(this);
}
/**
* On input change event.
*
* @param {React.FormEvent<HTMLInputElement | HTMLTextAreaElement>} e
* @param {string} newValue
*/
onInputChange(e, newValue = '') {
newValue = newValue.trim();
this.props.onChange?.(e, newValue);
this.setState({ value: newValue });
}
/**
* On Date picker change.
*
* @param {React.FormEvent<HTMLInputElement | HTMLTextAreaElement>} e
*/
onPickerChange(e) {
let newValue = e.target.value;
if (!this.props.dateOnly && !this.dateTimeRegex.test(newValue)) {
newValue = `${e.target.value}:00`;
}
this.props.onChange?.(e, newValue);
this.setState({ value: newValue });
}
/**
* @returns {JSX.Element}
*/
render() {
const isFormat = this.dateRegex.test(this.state.value) || this.dateTimeRegex.test(this.state.value);
return (react_1.default.createElement("div", { className: "ui-DatePicker", onKeyDown: this.props.onKeyDown, onClick: this.props.onClick },
react_1.default.createElement(UIInput_1.UITextInput, { componentRef: this.props.componentRef, errorMessage: this.props.errorMessage, value: this.state.value, onChange: this.onInputChange }),
react_1.default.createElement("div", { className: "ui-DatePicker-toggle" },
react_1.default.createElement(UIIcon_1.UIIcon, { iconName: Icons_1.UiIcons.Calendar }),
react_1.default.createElement("input", { type: this.props.dateOnly ? 'date' : 'datetime-local', step: "1", value: isFormat ? this.state.value : '', onChange: this.onPickerChange }))));
}
}
exports.UIDatePicker = UIDatePicker;
//# sourceMappingURL=UIDatePicker.js.map