@geneui/components
Version:
The Gene UI components library designed for BI tools
884 lines (877 loc) • 32.9 kB
JavaScript
import { s as styleInject } from '../style-inject.es-746bb8ed.js';
import { _ as _extends } from '../_rollupPluginBabelHelpers-e8fb2e5c.js';
import React__default, { useMemo, useState, useRef, useCallback, useEffect } from 'react';
import PropTypes from 'prop-types';
import { d as dayjsWithPlugins, a as dayjs } from '../dateValidation-67caec66.js';
import { c as classnames } from '../index-031ff73c.js';
import { g as popoverConfig, i as inputConfig } from '../configs-00612ce0.js';
import { n as noop, s as stopEvent } from '../index-a0e4e333.js';
import useClick from '../hooks/useClick.js';
import useKeyDown from '../hooks/useKeyDown.js';
import useDeviceType from '../hooks/useDeviceType.js';
import { P as PopoverV2 } from '../index-08898b29.js';
import ExtendedInput from '../ExtendedInput/index.js';
import DatePicker from '../DatePicker/index.js';
import { g as getBrowserDateFormat } from '../localization-4ba17032.js';
import '../_commonjsHelpers-24198af3.js';
import 'react-dom';
import '../hooks/useWindowSize.js';
import '../hooks/useDebounce.js';
import '../index-122432cd.js';
import '../hooks/useClickOutside.js';
import '../Scrollbar/index.js';
import '../GeneUIProvider/index.js';
import '../debounce-4419bc2f.js';
import '../useEllipsisDetection-4d997d5d.js';
import '../Icon/index.js';
import '../SuggestionList/index.js';
import '../config-1053d64d.js';
import '../callAfterDelay-7272faca.js';
import '../index-6d7e99cd.js';
import '../tslib.es6-f211516f.js';
import '../guid-8ddf77b3.js';
import '../Button/index.js';
var css_248z = "[data-gene-ui-version=\"2.16.5\"] .mobile-date-ranges-holder{width:100%}[data-gene-ui-version=\"2.16.5\"] .md-range-title{font:600 1.6rem/2.2rem var(--font-family);margin:0 0 1.5rem;padding:0 1rem}[data-gene-ui-version=\"2.16.5\"] .default-cursor{cursor:default!important}[data-gene-ui-version=\"2.16.5\"] .text-cursor{cursor:text}[data-gene-ui-version=\"2.16.5\"] .mobile-date-ranges-picker{grid-column-gap:2rem;grid-row-gap:2rem;display:grid;grid-template-areas:\"m-start-date m-end-date\";grid-template-columns:repeat(2,calc(50% - 1rem));width:100%}[data-gene-ui-version=\"2.16.5\"] .mobile-date-ranges-picker.with-time{grid-template-areas:\"m-start-date m-start-time\" \"m-end-date m-end-time\";grid-template-columns:calc(55% - 1rem) calc(45% - 1rem)}[data-gene-ui-version=\"2.16.5\"] .mobile-date-ranges-picker .m-start-date{grid-area:m-start-date}[data-gene-ui-version=\"2.16.5\"] .mobile-date-ranges-picker .m-end-date{grid-area:m-end-date}[data-gene-ui-version=\"2.16.5\"] .mobile-date-ranges-picker .m-start-time{grid-area:m-start-time}[data-gene-ui-version=\"2.16.5\"] .mobile-date-ranges-picker .m-end-time{grid-area:m-end-time}[data-gene-ui-version=\"2.16.5\"] .mobile-date-ranges-picker i[class*=calendar],[data-gene-ui-version=\"2.16.5\"] .mobile-single-date-picker i[class*=calendar]{order:-2;pointer-events:none}[data-gene-ui-version=\"2.16.5\"] .mobile-date-ranges-picker i[class*=clear],[data-gene-ui-version=\"2.16.5\"] .mobile-single-date-picker i[class*=clear]{order:-1}[data-gene-ui-version=\"2.16.5\"] .date-input .input-structure>label{height:var(--input-element-height)}[data-gene-ui-version=\"2.16.5\"] .date-input .input-structure>.icon+label input{padding-inline:2rem 4.4rem}[data-gene-ui-version=\"2.16.5\"] .date-input .input-structure .input-element-relative{left:0;position:absolute;width:100%}[data-gene-ui-version=\"2.16.5\"] .date-input .input-structure .input-element-relative>input{padding-inline:2rem 1.5rem;padding-inline-end:6.4rem}[data-gene-ui-version=\"2.16.5\"] .date-input .input-structure .input-element-relative>.read-only{padding-inline:2rem 1.5rem}[data-gene-ui-version=\"2.16.5\"] .date-input i[class*=calendar]{order:-2}[data-gene-ui-version=\"2.16.5\"] .date-input i[class*=clear]{order:-1}[data-gene-ui-version=\"2.16.5\"] .mobile-date-ranges-picker .bc-icon-calendar,[data-gene-ui-version=\"2.16.5\"] .mobile-date-ranges-picker .bc-icon.clock,[data-gene-ui-version=\"2.16.5\"] .mobile-single-date-picker .bc-icon-calendar,[data-gene-ui-version=\"2.16.5\"] .mobile-single-date-picker .bc-icon.clock{pointer-events:none}";
styleInject(css_248z);
const getLastValidValue$1 = (date, validFormat) => date && date.isValid() ? date.format(validFormat) : '';
function DatePickerInput(_ref) {
let {
min,
max,
size,
title,
value,
onBlur,
onFocus,
isValid,
required,
onChange,
readOnly,
disabled,
className,
appearance,
pickerProps,
flexibility,
popoverAlign,
withoutPicker,
withTime,
format: dateFormat,
placeholder: inputPlaceholder,
markedDate,
frozenDateRange,
clearable,
...restProps
} = _ref;
const {
isMobile
} = useDeviceType();
const maxDate = max && dayjsWithPlugins(max);
const minDate = min && dayjsWithPlugins(min);
const mobileFormat = useMemo(() => withTime ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD', [withTime]);
const defaultFormat = useMemo(() => withTime ? 'DD/MM/YYYY HH:mm:ss' : 'DD/MM/YYYY', [withTime]);
const format = useMemo(() => dateFormat || defaultFormat, [dateFormat, defaultFormat]);
const placeholder = useMemo(() => inputPlaceholder || format, [inputPlaceholder, format]);
const validFormat = useMemo(() => isMobile ? mobileFormat : format, [isMobile, mobileFormat, format]);
const [date, setDate] = useState('');
const [inputValue, setInputValue] = useState('');
const [popoverOpened, setPopoverState] = useState(false);
const setPickerRef = useClick(e => {
e.preventDefault();
});
const inputRef = useRef();
const handleChange = useCallback(value => {
const date = dayjsWithPlugins(value);
if (!withTime) {
setPopoverState(false);
inputRef.current.blur();
}
setDate(date);
onChange(date.toDate());
setInputValue(date.format(validFormat));
}, [validFormat, withTime, onChange]);
const handleInputChange = useCallback(e => {
const {
value
} = e.target;
const isPM = dayjs(value.toLocaleLowerCase().replace('am', '').replace('pm', '')).hour() >= 12;
const customValue = isPM ? value.replace('am', 'PM') : value.replace('pm', 'AM');
let isFrozenDate = false;
const date = dayjsWithPlugins(customValue, validFormat);
const isValid = dayjs(date).format(validFormat) === customValue;
if (frozenDateRange.length && Array.isArray(frozenDateRange)) {
const format = 'YYYY/MM/DD';
isFrozenDate = !!frozenDateRange.find(_ref2 => {
let {
from,
to
} = _ref2;
return from && to && date.isBetween(dayjs(from).format(format), dayjs(to).format(format), 'day', '[]');
});
}
if (!isFrozenDate) {
if (isValid) {
setDate(date);
onChange(date.toDate());
} else if (!required && value === '') {
setDate('');
onChange(null);
}
}
setInputValue(value);
}, [frozenDateRange, validFormat, onChange, required]);
const checkDateInerval = useCallback(() => {
let value = getLastValidValue$1(date, validFormat);
if (!value) {
return null;
}
const minUnix = minDate && minDate.valueOf();
const maxUnix = maxDate && maxDate.valueOf();
const dateUnix = date && dayjs(date, validFormat).valueOf();
if (value) {
if (minUnix > dateUnix) {
value = minDate.format(validFormat);
} else if (maxUnix < dateUnix) {
value = maxDate.format(validFormat);
}
}
handleInputChange({
target: {
value
}
});
}, [date, validFormat, minDate, maxDate, handleInputChange]);
const handleBlur = useCallback(e => {
onBlur(e);
setPopoverState(false);
checkDateInerval();
}, [onBlur, checkDateInerval]);
const handleFocus = useCallback(e => {
setPopoverState(true);
onFocus(e);
}, [onFocus]);
const handleIconClick = useCallback((e, isBlurInitiatorCalendarIcon) => {
e.stopPropagation();
e.preventDefault();
if (!popoverOpened && !isBlurInitiatorCalendarIcon || withoutPicker) {
inputRef.current.focus();
}
}, [popoverOpened, withoutPicker]);
useEffect(() => {
const date = dayjsWithPlugins(value);
if (value) {
setDate(dayjsWithPlugins(date, validFormat));
setInputValue(date.format(validFormat));
} else if (value === null) {
setDate('');
setInputValue('');
}
}, [value, validFormat]);
useKeyDown(() => setPopoverState(false), [], {
current: window
}, ['Escape']);
const sharedProps = {
flexibility,
placeholder,
appearance,
label: title,
isValid,
inputSize: size,
disabled,
readOnly,
required,
ref: inputRef,
canClear: clearable,
...restProps
};
/* *** Mobile functions *** */
const mobileValue = useMemo(() => {
const val = value || inputValue;
return val ? dayjs(val).format(withTime ? 'YYYY-MM-DDTHH:mm' : 'YYYY-MM-DD') : '';
}, [withTime, value, inputValue]);
const mobileInputType = useMemo(() => withTime ? 'datetime-local' : 'date', [withTime]);
const handleMobileChange = useCallback(event => {
const {
value
} = event.target;
withTime ? handleChange(value) : handleInputChange({
target: {
value
}
});
}, [handleChange, handleInputChange, withTime]);
return isMobile ? /*#__PURE__*/React__default.createElement(ExtendedInput, _extends({
value: mobileValue,
itemsDirection: "end",
onKeyDown: stopEvent,
type: mobileInputType,
onChange: handleMobileChange,
className: "mobile-single-date-picker",
icon: readOnly ? '' : 'bc-icon-calendar'
}, sharedProps)) : /*#__PURE__*/React__default.createElement(PopoverV2, {
behave: "open",
align: popoverAlign,
isOpen: popoverOpened,
extendTargetWidth: false,
Content: !withoutPicker && /*#__PURE__*/React__default.createElement(DatePicker, _extends({
value: date,
min: minDate,
max: maxDate,
ref: setPickerRef,
withTime: withTime,
format: validFormat,
defaultValue: value,
defaultPreview: date,
onChange: handleChange,
onTimeChange: handleChange,
className: readOnly ? 'pointer-events-none' : ''
}, pickerProps, {
markedDate: markedDate,
frozenDateRange: frozenDateRange
}))
}, /*#__PURE__*/React__default.createElement(ExtendedInput, _extends({
clickableIcon: true,
value: inputValue,
onBlur: handleBlur,
itemsDirection: "end",
onFocus: handleFocus,
onIconClick: handleIconClick,
onChange: handleInputChange,
icon: readOnly ? '' : 'bc-icon-calendar',
className: classnames(className, 'date-input', {
'default-cursor': readOnly || disabled,
'clearable-date-picker': clearable,
'text-cursor': withoutPicker
})
}, sharedProps)));
}
const {
flexibility: flexibility$1,
appearance: appearances$1,
size: size$1
} = inputConfig;
DatePickerInput.propTypes = {
/**
* Controls alignment of popover
*/
popoverAlign: PropTypes.oneOf(popoverConfig.align),
/**
* Controls flexibility of input element
*/
flexibility: PropTypes.oneOf(flexibility$1),
/**
* Controls appearance of input element
*/
appearance: PropTypes.oneOf(appearances$1),
/**
* Placeholder text for input
*/
placeholder: PropTypes.string,
/**
* Disables datepicker when input is focused
*/
withoutPicker: PropTypes.bool,
/**
* Accepts same props as DatePicker component(organisms)
*/
pickerProps: PropTypes.object,
/**
* Min specifies the minimum value allowed for datepicker
*/
min: PropTypes.oneOfType([PropTypes.instanceOf(dayjsWithPlugins), PropTypes.instanceOf(Date), PropTypes.string, PropTypes.number]),
/**
* Max specifies the maximum value allowed for datepicker
*/
max: PropTypes.oneOfType([PropTypes.instanceOf(dayjsWithPlugins), PropTypes.instanceOf(Date), PropTypes.string, PropTypes.number]),
/**
* The value of the input element, required for a controlled component.
*/
value: PropTypes.oneOfType([PropTypes.instanceOf(dayjsWithPlugins), PropTypes.instanceOf(Date), PropTypes.string, PropTypes.number]),
/**
* The CSS class name of the wrapper element.
*/
className: PropTypes.string,
/**
* Controls input size
*/
size: PropTypes.oneOf(size$1),
/**
* Custom date format
*/
format: PropTypes.string,
/**
* If true, the input element will be disabled.
*/
disabled: PropTypes.bool,
/**
* It prevents the user from changing the value of the field.
*/
readOnly: PropTypes.bool,
/**
* If true, the input element will show icon which can reset selected date.
*/
clearable: PropTypes.bool,
/**
* Callback fired when the value is changed.
* function(date: Date) => void
*/
onChange: PropTypes.func,
/**
* Callback fired when the input looses focus.
* function(e: Event) => void
*/
onBlur: PropTypes.func,
/**
* Callback fired when the input get focused.
* function(e: Event) => void
*/
onFocus: PropTypes.func,
/**
* If false, the input will indicate an error.
*/
isValid: PropTypes.bool,
/**
* Title for input
*/
title: PropTypes.string,
/**
* MarkedDate specifies the default mark date
*/
markedDate: PropTypes.oneOfType([PropTypes.instanceOf(dayjs), PropTypes.instanceOf(Date), PropTypes.string, PropTypes.number]),
/**
* Prop is responsible for disabling selected range
*/
frozenDateRange: PropTypes.arrayOf(PropTypes.shape({
from: PropTypes.oneOfType([PropTypes.instanceOf(dayjs), PropTypes.instanceOf(Date), PropTypes.string, PropTypes.number]).isRequired,
to: PropTypes.oneOfType([PropTypes.instanceOf(dayjs), PropTypes.instanceOf(Date), PropTypes.string, PropTypes.number]).isRequired
}))
};
DatePickerInput.defaultProps = {
popoverAlign: popoverConfig.align[1],
flexibility: flexibility$1[0],
appearance: appearances$1[0],
title: 'Datepicker',
onChange: noop,
onFocus: noop,
onBlur: noop,
size: size$1[1],
frozenDateRange: [],
clearable: false
};
function getLastValidValue(startDate, endDate, validFormat, rangeSeparator) {
if (startDate && endDate && startDate.isValid() && endDate.isValid()) {
return "".concat(startDate.format(validFormat)).concat(rangeSeparator).concat(endDate.format(validFormat));
}
return '';
}
const rangeSeparator = ' — ';
function DateRangePickerInput(_ref) {
let {
startTimePlaceholder,
startDatePlaceholder,
endDatePlaceholder,
endTimePlaceholder,
defaultStartTime,
defaultEndTime,
withoutPicker,
popoverAlign,
flexibility,
placeholder,
pickerProps,
appearance,
className,
withTime,
onChange,
required,
disabled,
readOnly,
isValid,
onFocus,
format,
onBlur,
title,
value,
size,
max,
min,
isIncludeEndDateLastSecond,
markedDate,
frozenDateRange,
clearable,
...restProps
} = _ref;
const {
isMobile
} = useDeviceType();
const maxDate = max && dayjsWithPlugins(max);
const minDate = min && dayjsWithPlugins(min);
const validFormat = useMemo(() => isMobile ? withTime ? 'YYYY-MM-DD HH:mm' : 'YYYY-MM-DD' : format || getBrowserDateFormat(!!withTime), [isMobile, withTime, format]);
const [inputValue, setInputValue] = useState('');
const [startDate, setStartDate] = useState('');
const [endDate, setEndDate] = useState('');
const [mobileStartDate, setMobileStartDate] = useState('');
const [mobileEndDate, setMobileEndDate] = useState('');
const [mobileStartTime, setMobileStartTime] = useState('');
const [mobileEndTime, setMobileEndTime] = useState('');
const [popoverOpened, setPopoverState] = useState(false);
const inputRef = useRef();
const setPickerRef = useClick(e => {
e.preventDefault();
});
const setMobileDate = useCallback((start, end) => {
setMobileStartDate(start ? start.format('YYYY-MM-DD') : '');
setMobileEndDate(end ? end.format('YYYY-MM-DD') : '');
setMobileStartTime(start ? start.format('HH:mm') : '');
setMobileEndTime(end ? end.format('HH:mm') : '');
}, []);
const handleDateValidation = useCallback((first, second, value) => {
const startDateLocal = dayjsWithPlugins(first, validFormat);
const endDateLocal = dayjsWithPlugins(second, validFormat);
const isStartDateValid = startDateLocal.isValid() && startDateLocal.format(validFormat) === first;
const isEndDateValid = endDateLocal.isValid() && endDateLocal.format(validFormat) === second;
if (frozenDateRange.length && Array.isArray(frozenDateRange)) {
const format = 'YYYY/MM/DD';
const isValid = !frozenDateRange.find(_ref2 => {
let {
from,
to
} = _ref2;
return from && to && (startDateLocal.isBetween(dayjs(from).format(format), dayjs(to).format(format), 'day', '[]') || endDateLocal.isBetween(dayjs(from).format(format), dayjs(to).format(format), 'day', '[]'));
});
if (!isValid) {
return [null, null];
}
}
if (isStartDateValid && isEndDateValid && dayjsWithPlugins(startDateLocal).isAfter(endDateLocal)) {
const diff = endDate && startDate ? dayjsWithPlugins(endDate).diff(startDate, 'm') : 0;
const changedDate = dayjsWithPlugins(startDateLocal).isSame(startDate) ? {
start: endDateLocal.subtract(diff, 'minute'),
end: endDateLocal
} : {
start: startDateLocal,
end: startDateLocal.add(diff, 'minute')
};
setStartDate(changedDate.start);
setEndDate(changedDate.end);
return [changedDate.start, changedDate.end];
}
if (isStartDateValid && isEndDateValid) {
setStartDate(startDateLocal);
setEndDate(endDateLocal);
return [startDateLocal, endDateLocal];
}
if (!required && value === '') {
setStartDate('');
setEndDate('');
return [null, null];
}
}, [frozenDateRange, validFormat, endDate, startDate, required]);
const handleRangeChange = useCallback(value => {
const [startDate, endDate] = value;
if (startDate && endDate) {
const start = dayjsWithPlugins(startDate);
const end = dayjsWithPlugins(endDate);
setStartDate(start);
setEndDate(end);
if (!withTime && !isMobile) {
inputRef.current.blur();
setPopoverState(false);
}
setInputValue("".concat(start.format(validFormat)).concat(rangeSeparator).concat(end.format(validFormat)));
onChange(value);
}
}, [validFormat, rangeSeparator, onChange, withTime]);
const handleInputChange = useCallback(e => {
var _value, _value2, _value3;
let {
value
} = e.target;
if (((_value = value) === null || _value === void 0 ? void 0 : _value.length) >= (validFormat === null || validFormat === void 0 ? void 0 : validFormat.length) && !((_value2 = value) !== null && _value2 !== void 0 && _value2.includes(rangeSeparator)) && (inputValue === null || inputValue === void 0 ? void 0 : inputValue.length) < ((_value3 = value) === null || _value3 === void 0 ? void 0 : _value3.length)) {
value = "".concat(value).concat(rangeSeparator);
}
const [startDate = null, endDate = null] = value.split(rangeSeparator.trim());
const dates = handleDateValidation(startDate === null || startDate === void 0 ? void 0 : startDate.trim(), endDate === null || endDate === void 0 ? void 0 : endDate.trim(), value);
if (dates && dates[0] && dates[1]) {
onChange([dates[0].toDate(), dates[1].toDate()]);
}
setInputValue(value);
return dates;
}, [onChange, handleDateValidation, inputValue]);
const handleMobileDateChange = useCallback((e, index) => {
const isStart = index === 0;
const {
value
} = e.target;
const date = dayjsWithPlugins(value);
const start = isStart ? value : mobileStartDate || date.subtract(1, 'day').format('YYYY-MM-DD');
const end = !isStart ? value : mobileEndDate || date.add(1, 'day').format('YYYY-MM-DD');
const startTime = mobileStartTime || defaultStartTime;
const endTime = mobileEndTime || defaultEndTime;
const fullStartDate = withTime ? "".concat(start, " ").concat(startTime).concat(rangeSeparator).concat(end, " ").concat(endTime) : "".concat(start).concat(rangeSeparator).concat(end);
const [first, second] = handleInputChange({
target: {
value: fullStartDate
}
}) || [];
setMobileStartDate(first === null || first === void 0 ? void 0 : first.format('YYYY-MM-DD'));
setMobileEndDate(second === null || second === void 0 ? void 0 : second.format('YYYY-MM-DD'));
setMobileStartTime(startTime);
setMobileEndTime(endTime);
}, [mobileStartDate, mobileEndDate, mobileStartTime, defaultStartTime, mobileEndTime, defaultEndTime, withTime, rangeSeparator, handleInputChange]);
const handleMobileTimeChange = useCallback((e, index) => {
const isStart = index === 0;
const {
value
} = e.target;
const date = dayjsWithPlugins();
const startTime = isStart ? value : mobileStartTime || defaultStartTime;
const endTime = !isStart ? value : mobileEndTime || defaultEndTime;
const start = mobileStartDate || date.format('YYYY-MM-DD');
const end = mobileEndDate || date.add(1, 'day').format('YYYY-MM-DD');
if (startTime && endTime) {
const [first, second] = handleInputChange({
target: {
value: "".concat(start, " ").concat(startTime).concat(rangeSeparator).concat(end, " ").concat(endTime)
}
});
setMobileStartDate(first.format('YYYY-MM-DD'));
setMobileEndDate(second.format('YYYY-MM-DD'));
setMobileStartTime(first.format('HH:mm'));
setMobileEndTime(second.format('HH:mm'));
} else {
endTime && setMobileStartTime(startTime);
startTime && setMobileEndTime(endTime);
}
}, [mobileStartTime, defaultStartTime, mobileEndTime, defaultEndTime, mobileStartDate, mobileEndDate, handleInputChange, rangeSeparator]);
const checkDateInerval = useCallback(validDate => {
if (!validDate) {
return null;
}
let value = dayjs(validDate, validFormat);
const minUnix = minDate && minDate.valueOf();
const maxUnix = maxDate && maxDate.valueOf();
const dateUnix = value && value.valueOf();
if (minUnix > dateUnix) {
value = minUnix;
} else if (maxUnix < dateUnix) {
value = maxUnix;
}
return dayjs(value);
}, [validFormat, maxDate, minDate]);
const handleBlur = useCallback(e => {
const lastValidValue = getLastValidValue(startDate, endDate, validFormat, rangeSeparator);
setInputValue(lastValidValue);
setPopoverState(false);
onBlur(e);
if (lastValidValue) {
handleRangeChange([checkDateInerval(startDate.format(validFormat)), checkDateInerval(endDate.format(validFormat))]);
} else {
onChange([null, null]);
}
}, [startDate, endDate, validFormat, rangeSeparator, onBlur, handleRangeChange, checkDateInerval, onChange]);
const handleFocus = useCallback(e => {
setPopoverState(true);
onFocus(e);
}, [onFocus]);
const handleOnApply = useCallback(e => {
pickerProps === null || pickerProps === void 0 ? void 0 : pickerProps.onApply(e);
setPopoverState(false);
}, [pickerProps]);
const handleIconClick = useCallback((e, isBlurInitiatorCalendarIcon) => {
e.stopPropagation();
e.preventDefault();
if (!popoverOpened && !isBlurInitiatorCalendarIcon || withoutPicker) {
inputRef.current.focus();
}
}, [popoverOpened, withoutPicker]);
useEffect(() => {
const [first, second] = value;
const startDate = dayjsWithPlugins(first);
const endDate = dayjsWithPlugins(second);
if (first && second) {
setStartDate(dayjsWithPlugins(startDate, validFormat));
setEndDate(dayjsWithPlugins(endDate, validFormat));
isMobile && setMobileDate(startDate, endDate);
setInputValue("".concat(startDate.format(validFormat)).concat(rangeSeparator).concat(endDate.format(validFormat)));
} else if (first === null && second === null) {
setStartDate('');
setEndDate('');
isMobile && setMobileDate();
setInputValue('');
}
}, [value, validFormat, isMobile]);
useKeyDown(() => setPopoverState(false), [], {
current: window
}, ['Escape']);
const onClear = useCallback(() => onChange([null, null]), []);
const sharedProps = {
appearance,
inputSize: size,
disabled,
readOnly,
required,
onClear,
canClear: clearable,
...restProps
};
const dynamicProps = {};
if (isIncludeEndDateLastSecond) {
// @TODO need move to separated file
// add constants available for all lib components
// as this constant value also used in organisms
dynamicProps.defaultTimeValues = [['00', '00', '00'], ['00', '00', '00']];
}
return isMobile ? /*#__PURE__*/React__default.createElement("div", {
className: "mobile-date-ranges-holder"
}, placeholder && /*#__PURE__*/React__default.createElement("div", {
className: "md-range-title"
}, placeholder), /*#__PURE__*/React__default.createElement("div", {
className: classnames('mobile-date-ranges-picker', {
'with-time': withTime
})
}, /*#__PURE__*/React__default.createElement(ExtendedInput, _extends({
type: "date",
label: "From",
isValid: isValid,
onBlur: handleBlur,
itemsDirection: "end",
onFocus: handleFocus,
value: mobileStartDate,
className: "m-start-date",
placeholder: startDatePlaceholder,
onKeyDown: e => stopEvent(e, true),
icon: readOnly ? '' : 'bc-icon-calendar',
onChange: e => handleMobileDateChange(e, 0)
}, sharedProps)), /*#__PURE__*/React__default.createElement(ExtendedInput, _extends({
label: "To",
type: "date",
isValid: isValid,
onBlur: handleBlur,
itemsDirection: "end",
onFocus: handleFocus,
value: mobileEndDate,
className: "m-end-date",
placeholder: endDatePlaceholder,
onKeyDown: e => stopEvent(e, true),
icon: readOnly ? '' : 'bc-icon-calendar',
onChange: e => handleMobileDateChange(e, 1)
}, sharedProps)), withTime && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ExtendedInput, _extends({
type: "time",
label: "Time",
isValid: isValid,
value: mobileStartTime,
className: "m-start-time",
placeholder: startTimePlaceholder,
icon: readOnly ? '' : 'bc-icon-clock',
onChange: e => handleMobileTimeChange(e, 0)
}, sharedProps)), /*#__PURE__*/React__default.createElement(ExtendedInput, _extends({
type: "time",
label: "Time",
isValid: isValid,
value: mobileEndTime,
className: "m-end-time",
placeholder: endTimePlaceholder,
icon: readOnly ? '' : 'bc-icon-clock',
onChange: e => handleMobileTimeChange(e, 1)
}, sharedProps))))) : /*#__PURE__*/React__default.createElement(PopoverV2, {
behave: "open",
align: popoverAlign,
isOpen: popoverOpened,
extendTargetWidth: false,
Content: !withoutPicker && /*#__PURE__*/React__default.createElement(DatePicker.RangePicker, _extends({
min: minDate,
max: maxDate,
value: value,
withApply: false,
ref: setPickerRef,
withTime: withTime,
rangeEndDefault: endDate,
onChange: handleRangeChange,
rangeStartDefault: startDate,
frozenDateRange: frozenDateRange,
className: classnames({
'pointer-events-none': readOnly
})
}, pickerProps, {
onApply: handleOnApply
}, dynamicProps, {
markedDate: markedDate
}))
}, /*#__PURE__*/React__default.createElement(ExtendedInput, _extends({
label: title,
clickableIcon: true,
ref: inputRef,
isValid: isValid,
value: inputValue,
onBlur: handleBlur,
itemsDirection: "end",
onFocus: handleFocus,
flexibility: flexibility,
placeholder: placeholder,
onChange: handleInputChange,
icon: readOnly ? '' : 'bc-icon-calendar',
onIconClick: handleIconClick,
className: classnames(className, 'date-input', {
'default-cursor': readOnly || disabled,
'clearable-date-picker': clearable,
'text-cursor': withoutPicker
}),
autocomplete: "off"
}, sharedProps)));
}
const {
flexibility,
appearance: appearances,
size
} = inputConfig;
DateRangePickerInput.propTypes = {
/**
* Controls appearance of input element
*/
appearance: PropTypes.oneOf(appearances),
/**
* Placeholder text for input
*/
placeholder: PropTypes.string,
/**
* Title for input
*/
title: PropTypes.string,
/**
* The CSS class name of the wrapper element.
*/
className: PropTypes.string,
/**
* Custom date format
*/
format: PropTypes.string,
/**
* Controls flexibility of input element
*/
flexibility: PropTypes.oneOf(flexibility),
/**
* Define range picker is with time or no.
*/
withTime: PropTypes.bool,
/**
* If true, the input element will show icon which can reset selected date.
*/
clearable: PropTypes.bool,
/**
* If true, the input element will be disabled.
*/
disabled: PropTypes.bool,
/**
* It prevents the user from changing the value of the field.
*/
readOnly: PropTypes.bool,
/**
* Callback fired when the value is changed.
* function([startDate: Date, endDate: Date) => void
*/
onChange: PropTypes.func,
/**
* Callback fired when the input looses focus.
* function(e: Event) => void
*/
onBlur: PropTypes.func,
/**
* Callback fired when the input get focused.
* function(e: Event) => void
*/
onFocus: PropTypes.func,
/**
* The value of the input element, required for a controlled component.
*/
value: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.instanceOf(dayjsWithPlugins)), PropTypes.arrayOf(PropTypes.instanceOf(Date)), PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.number)]),
/**
* If false, the input will indicate an error.
*/
isValid: PropTypes.bool,
/**
* Disables datepicker when input is focused
*/
withoutPicker: PropTypes.bool,
/**
* Accepts same props as DatePicker component(organisms)
*/
pickerProps: PropTypes.object,
/**
* Min specifies the minimum value allowed for datepicker
*/
min: PropTypes.oneOfType([PropTypes.instanceOf(dayjsWithPlugins), PropTypes.instanceOf(Date), PropTypes.string, PropTypes.number]),
/**
* Max specifies the maximum value allowed for datepicker
*/
max: PropTypes.oneOfType([PropTypes.instanceOf(dayjsWithPlugins), PropTypes.instanceOf(Date), PropTypes.string, PropTypes.number]),
/**
* Controls input size
*/
size: PropTypes.oneOf(size),
/**
* Controls alignment of popover
*/
popoverAlign: PropTypes.oneOf(popoverConfig.align),
/**
* Placeholder text for start date input, which is used in mobile version
*/
startDatePlaceholder: PropTypes.string,
/**
* Placeholder text for end date input, which is used in mobile version
*/
endDatePlaceholder: PropTypes.string,
/**
* Placeholder text for start time input, which is used in mobile version
*/
startTimePlaceholder: PropTypes.string,
/**
* Placeholder text for end time input, which is used in mobile version
*/
endTimePlaceholder: PropTypes.string,
/**
* Set default start time when date changed
*/
defaultStartTime: PropTypes.string,
/**
* Set default end time when date changed
*/
defaultEndTime: PropTypes.string,
/**
* Prop is responsible for add one second to end date time value in case of true parameter
*/
isIncludeEndDateLastSecond: PropTypes.bool,
/**
* MarkedDate specifies the default mark date
*/
markedDate: PropTypes.oneOfType([PropTypes.instanceOf(dayjs), PropTypes.instanceOf(Date), PropTypes.string, PropTypes.number]),
/**
* Prop is responsible for disabling selected range
*/
frozenDateRange: PropTypes.arrayOf(PropTypes.shape({
from: PropTypes.oneOfType([PropTypes.instanceOf(dayjs), PropTypes.instanceOf(Date), PropTypes.string, PropTypes.number]).isRequired,
to: PropTypes.oneOfType([PropTypes.instanceOf(dayjs), PropTypes.instanceOf(Date), PropTypes.string, PropTypes.number]).isRequired
}))
};
DateRangePickerInput.defaultProps = {
popoverAlign: popoverConfig.align[1],
placeholder: getBrowserDateFormat(),
flexibility: flexibility[0],
appearance: appearances[0],
title: 'Datepicker',
onChange: noop,
size: size[1],
onFocus: noop,
onBlur: noop,
value: [],
defaultStartTime: '00:00',
defaultEndTime: '00:00',
startDatePlaceholder: 'Start date',
endDatePlaceholder: 'End date',
startTimePlaceholder: 'Start',
endTimePlaceholder: 'End',
isIncludeEndDateLastSecond: false,
frozenDateRange: [],
clearable: false
};
// Styles
DatePickerInput.WithRange = DateRangePickerInput;
export { DatePickerInput as default };