@preamp/datepicker
Version:
VideoAmp's Component library
111 lines • 11.9 kB
JavaScript
import * as React from 'react';
import { Alert, Calendar } from '@preamp/signal';
import cx from 'classnames';
import { keyboardKeys, Tooltip, TooltipTheme } from '@preamp/core';
import { VADateRangeInputClassNamesMap } from '../../../../constants';
import { CustomDatePickerInput } from '../../../../custom';
import { maskInputString, textInputWidth } from '../../../../utils';
export class DateRangeInputToolTip extends React.PureComponent {
constructor() {
super(...arguments);
this.state = {
cachedDates: {
from: null,
to: null
},
endInput: '',
selectedDates: this.props.selectedDates,
showOverlay: this.props.inline,
startInput: '',
containerRef: null
};
this.startDateRef = React.createRef();
this.endDateRef = React.createRef();
this.onStartChange = (event) => {
const { onStartChange } = this.props;
const { hasError } = this.state;
const text = maskInputString(event.target.value);
onStartChange(event);
if (!hasError && text.length === 10) {
return this.endDateRef.current.focus();
}
};
this.onEndChange = (event) => {
const { onEndChange } = this.props;
onEndChange(event);
};
this.onKeyPress = (event) => {
const { onConfirmDates } = this.props;
const { selectedDates } = this.state;
const keyCode = event.keyCode || event.which;
event.stopPropagation();
if (keyCode === keyboardKeys.Enter &&
selectedDates.from != null &&
selectedDates.to != null) {
onConfirmDates(selectedDates);
}
};
}
componentDidMount() {
const { focusOnMount } = this.props;
if (focusOnMount) {
this.startDateRef.current.focus();
}
if (this.container) {
this.setState({
containerRef: this.container
});
}
}
render() {
const { dataUI, endInput, endInputId, errorMessage, hasError, isFullWidth, isOptional, label, onEndFocus, onStartFocus, placeholder, showOverlay, startInput, startInputId, tooltipId } = this.props;
const isSelected = !!startInput || !!endInput;
return (React.createElement("div", { className: VADateRangeInputClassNamesMap.inputFieldWrapper, ref: (container) => (this.container = container), tabIndex: -1 },
(label || isOptional) && (React.createElement("label", { className: "va-form-label", "data-ui": `${dataUI}_label`, htmlFor: startInputId },
label,
isOptional && (React.createElement("span", { className: "u-label--optional" }, "Optional")))),
React.createElement(Tooltip, { content: errorMessage, dataUI: `${dataUI}_tooltip`, id: tooltipId, isVisible: hasError, placement: "right", referenceClassName: cx('inline-block', {
'w-full': isFullWidth
}), shouldHandleEvents: false, style: { width: 'max-content' }, theme: TooltipTheme.Error, tooltipParent: this.state.containerRef },
React.createElement("div", { className: VADateRangeInputClassNamesMap.inputTextWrapper, onClick: showOverlay, role: "form" },
React.createElement("input", { autoComplete: "off", "data-ui": `${dataUI}_input-start`, id: startInputId, maxLength: 10, onChange: this.onStartChange, onFocus: onStartFocus, onKeyPress: this.onKeyPress, placeholder: placeholder, ref: this.startDateRef, style: {
// disables stylelints related to style object that doesnt follow regular stylelint rules
/* stylelint-disable-next-line */
width: textInputWidth(startInput)
}, type: "text", value: startInput }),
React.createElement("span", { className: cx({
[VADateRangeInputClassNamesMap.rangeDash]: true,
['is-selected']: isSelected
}) }, "\u2013"),
React.createElement("input", { autoComplete: "off", "data-ui": `${dataUI}_input-end`, id: endInputId, maxLength: 10, onChange: this.onEndChange, onFocus: onEndFocus, onKeyPress: this.onKeyPress, placeholder: placeholder, ref: this.endDateRef, style: {
// disables stylelints related to style object that doesnt follow regular stylelint rules
/* stylelint-disable-next-line */
width: textInputWidth(endInput)
}, type: "text", value: endInput }),
React.createElement("div", { className: VADateRangeInputClassNamesMap.inputIcon, "data-ui": `${dataUI}_calendar-icon` }, hasError ? React.createElement(Alert, null) : React.createElement(Calendar, null))))));
}
}
DateRangeInputToolTip.defaultProps = {
className: VADateRangeInputClassNamesMap.inputWrapper,
component: CustomDatePickerInput,
dataUI: 'date-range-input',
endInputId: 'va-daterange-input-end',
focusOnMount: false,
inline: false,
startInput: '',
endInput: '',
onEndChange: () => null,
onStartChange: () => null,
placeholder: 'mm/dd/yyyy',
selectedDates: {
from: null,
to: null
},
startInputId: 'va-daterange-input-start',
tooltipId: `date-range-input_invalid-value`,
errorMessage: 'Date range is invalid',
onConfirmDates: () => null,
onEndFocus: () => null,
onStartFocus: () => null
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRGF0ZVJhbmdlSW5wdXRUb29sVGlwLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vY29tcG9uZW50cy9pbnB1dHMvRGF0ZVJhbmdlSW5wdXQvc3ViQ29tcG9uZW50cy9EYXRlUmFuZ2VJbnB1dFRvb2xUaXAudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sS0FBSyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBRS9CLE9BQU8sRUFBRSxLQUFLLEVBQUUsUUFBUSxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDakQsT0FBTyxFQUFFLE1BQU0sWUFBWSxDQUFDO0FBVzVCLE9BQU8sRUFBRSxZQUFZLEVBQUUsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGNBQWMsQ0FBQztBQUVuRSxPQUFPLEVBQUUsNkJBQTZCLEVBQUUsTUFBTSx1QkFBdUIsQ0FBQztBQUN0RSxPQUFPLEVBQUUscUJBQXFCLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQztBQUUzRCxPQUFPLEVBQUUsZUFBZSxFQUFFLGNBQWMsRUFBRSxNQUFNLG1CQUFtQixDQUFDO0FBK0VwRSxNQUFNLE9BQU8scUJBQXNCLFNBQVEsS0FBSyxDQUFDLGFBR2hEO0lBSEQ7O1FBNkJJLFVBQUssR0FBK0I7WUFDaEMsV0FBVyxFQUFFO2dCQUNULElBQUksRUFBRSxJQUFJO2dCQUNWLEVBQUUsRUFBRSxJQUFJO2FBQ1g7WUFDRCxRQUFRLEVBQUUsRUFBRTtZQUNaLGFBQWEsRUFBRSxJQUFJLENBQUMsS0FBSyxDQUFDLGFBQWE7WUFDdkMsV0FBVyxFQUFFLElBQUksQ0FBQyxLQUFLLENBQUMsTUFBTTtZQUM5QixVQUFVLEVBQUUsRUFBRTtZQUNkLFlBQVksRUFBRSxJQUFJO1NBQ3JCLENBQUM7UUFFTSxpQkFBWSxHQUFzQyxLQUFLLENBQUMsU0FBUyxFQUV0RSxDQUFDO1FBRUksZUFBVSxHQUFzQyxLQUFLLENBQUMsU0FBUyxFQUVwRSxDQUFDO1FBY0osa0JBQWEsR0FBRyxDQUFD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