@kelvininc/ui-components
Version:
Kelvin UI Components
199 lines (194 loc) • 10.3 kB
JavaScript
;
var date_helper = require('./date.helper-DwNTBYV0.js');
var absoluteTimePicker_config = require('./absolute-time-picker.config-BF9QIy90.js');
var absoluteTimePickerDropdown_types = require('./absolute-time-picker-dropdown.types-mPwO9zQk.js');
var relativeTimePicker_config = require('./relative-time-picker.config-BBTpZn3r.js');
var floatingUi_dom = require('./floating-ui.dom-CxA-aH57.js');
var icon_types = require('./icon.types-B8lvUrX_.js');
var config = require('./config-TIjltaxO.js');
var isNumber = require('./isNumber-nnoh6LNV.js');
var isEmpty = require('./isEmpty-C_HQvGy-.js');
var isNil = require('./isNil-B-fGcnNC.js');
// It needs to be lower because there are other dropdowns with a portal inside
const TIME_PICKER_PORTAL_Z_INDEX = config.DEFAULT_DROPDOWN_Z_INDEX - 1;
const TIME_RANGE_PICKER_DROPDOWN_INPUT_OFFSET = 8;
const DEFAULT_TIME_RANGE_PICKER_INPUT_CONFIG = {
placeholder: 'Select a date',
type: absoluteTimePickerDropdown_types.EInputFieldType.Text,
icon: icon_types.EIconName.Calendar,
state: absoluteTimePickerDropdown_types.EValidationState.None,
tooltipConfig: {
truncate: false
}
};
const DEFAULT_TIME_RANGE_DROPDOWN_POSITION_OPTIONS = {
placement: 'bottom-end',
middleware: [
floatingUi_dom.offset(TIME_RANGE_PICKER_DROPDOWN_INPUT_OFFSET),
floatingUi_dom.size({
apply({ elements }) {
Object.assign(elements.floating.style, {
width: 'max-content'
});
}
})
]
};
const DEFAULT_SELECTED_TIME_KEY = 'last-24-h';
exports.ETimePickerView = void 0;
(function (ETimePickerView) {
ETimePickerView["RelativeTimePicker"] = "relativeTimePicker";
ETimePickerView["AbsoluteTimePicker"] = "absoluteTimePicker";
ETimePickerView["FullView"] = "fullView";
})(exports.ETimePickerView || (exports.ETimePickerView = {}));
const FULL_RANGE_SIZE = 2;
const APPLY_BUTTON_ERROR_TOOLTIP_TEXT = 'Both time inputs must be filled.';
const UTC_TIMEZONE_OFFSET = {
label: 'UTC'
};
/**
* Generates the text displayed in the dropdown when the custom interval option is selected
* @param range range in timestamp
* @param timezone timezone applied to the timestamp
* @returns label to be displayed in the dropdown
*/
const buildCustomIntervalTimeRange = (range, timezone) => {
if (!isEmpty.isEmpty(range)) {
const [from, to] = range;
const timeZoneFromDate = createFormattedDateFromTimestampInTimezone(from, timezone);
const timeZoneToDate = createFormattedDateFromTimestampInTimezone(to, timezone);
return isNil.isNil(to) ? timeZoneFromDate : `${timeZoneFromDate} to ${timeZoneToDate}`;
}
return '';
};
/**
* Generates the text to be displayed by the tooltip when the dropdown input is hovered
* @param range selectd range
* @param timezones timezones available
* @returns tooltip text to be displayed
*/
const buildTooltipText = (range, selectdTimezone, timezonesByOffset) => {
var _a;
const [from, to] = range;
const timezoneName = selectdTimezone.name;
const fromDate = date_helper.dayjs(from).tz(timezoneName);
const timezoneText = (_a = timezonesByOffset.filter(opt => opt.name === timezoneName)[0]) !== null && _a !== void 0 ? _a : UTC_TIMEZONE_OFFSET;
if (isNumber.isNumber(to)) {
const toDate = date_helper.dayjs(to).tz(timezoneName);
return `${fromDate.format(absoluteTimePicker_config.DATETIME_INPUT_MASK)} to ${toDate.format(absoluteTimePicker_config.DATETIME_INPUT_MASK)} ${timezoneText.label}`;
}
return `${fromDate.format(absoluteTimePicker_config.DATETIME_INPUT_MASK)} ${timezoneText.label}`;
};
const createFormattedDateFromTimestampInTimezone = (date, timezone) => {
return date_helper.dayjs(date).tz(timezone).format(absoluteTimePicker_config.DATETIME_INPUT_MASK);
};
const createTimestampInTimezoneFromFormattedDate = (date, timezone, format = absoluteTimePicker_config.DATETIME_INPUT_MASK) => {
return date_helper.dayjs(date, format).tz(timezone, true).valueOf();
};
/**
* Transforms the selected timestamp range in formatted dates to be read by the kv-absolute-time-picker component
* @param selectedOption selected ranges and timezone
* @returns range in the calendar date time format
*/
const getAbsoluteTimePickerRangeDates = (selectedOption, defaultTimezone) => {
var _a, _b, _c, _d;
const [from, to] = selectedOption.range;
const timezoneOffset = (_b = (_a = selectedOption.timezone) === null || _a === void 0 ? void 0 : _a.offset) !== null && _b !== void 0 ? _b : defaultTimezone.offset;
const timezoneName = (_d = (_c = selectedOption.timezone) === null || _c === void 0 ? void 0 : _c.name) !== null && _d !== void 0 ? _d : defaultTimezone.name;
if (!from && !to) {
return [];
}
if (!to && from) {
if (selectedOption.key === relativeTimePicker_config.CUSTOMIZE_INTERVAL_KEY) {
return [date_helper.dayjs(from).tz(timezoneName).format(absoluteTimePicker_config.CALENDAR_DATE_TIME_MASK)];
}
return [date_helper.dayjs(from).utcOffset(timezoneOffset).format(absoluteTimePicker_config.CALENDAR_DATE_TIME_MASK)];
}
if (selectedOption.key === relativeTimePicker_config.CUSTOMIZE_INTERVAL_KEY) {
return [date_helper.dayjs(from).tz(timezoneName).format(absoluteTimePicker_config.CALENDAR_DATE_TIME_MASK), date_helper.dayjs(to).tz(timezoneName).format(absoluteTimePicker_config.CALENDAR_DATE_TIME_MASK)];
}
return [date_helper.dayjs(from).utcOffset(timezoneOffset).format(absoluteTimePicker_config.CALENDAR_DATE_TIME_MASK), date_helper.dayjs(to).utcOffset(timezoneOffset).format(absoluteTimePicker_config.CALENDAR_DATE_TIME_MASK)];
};
const getLast24HoursRange = () => {
const nowTimestamp = date_helper.dayjs().utc();
return [nowTimestamp.subtract(24, 'hours').valueOf(), nowTimestamp.valueOf()];
};
const getRelativeTimeInputText = (options, selectedTimeOption, timezone) => {
const option = options.flat().find(option => option.value === selectedTimeOption.key);
if (!isEmpty.isEmpty(option)) {
if (option.comparisonConfig === absoluteTimePickerDropdown_types.ERelativeTimeComparisonConfig.RelativeAmountOfUnits) {
return {
mode: absoluteTimePickerDropdown_types.ERelativeTimeInputMode.Text,
from: `Now - ${Math.abs(option.startDate.amount) === 0 ? 'start of' : Math.abs(option.startDate.amount)} ${option.startDate.unit}`,
to: 'Now'
};
}
else {
const [from, to] = selectedTimeOption.range;
return {
mode: absoluteTimePickerDropdown_types.ERelativeTimeInputMode.Date,
from: date_helper.newTimezoneDate(timezone, from).format(absoluteTimePicker_config.DATETIME_INPUT_MASK),
to: date_helper.newTimezoneDate(timezone, to).format(absoluteTimePicker_config.DATETIME_INPUT_MASK)
};
}
}
};
const getRelativeTimeLabel = (relativeTimeValue, relativeTimeOptions) => { var _a, _b; return (_b = (_a = relativeTimeOptions.flat().find(option => option.value === relativeTimeValue)) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : relativeTimeValue; };
const getTimestampFromDateRange = (range, previousTimezone, newTimezone) => {
const [from, to] = range;
// Load date in the previous timezone
const parsedFromDate = createFormattedDateFromTimestampInTimezone(from, previousTimezone);
const parsedToDate = createFormattedDateFromTimestampInTimezone(to, previousTimezone);
// Create new timestamps with the updated timezone
const fromDate = createTimestampInTimezoneFromFormattedDate(parsedFromDate, newTimezone);
const toDate = createTimestampInTimezoneFromFormattedDate(parsedToDate, newTimezone);
return [fromDate, toDate];
};
const hasRangeChanged = (componentRangeState, propRangeState) => {
if (isEmpty.isEmpty(componentRangeState) && isEmpty.isEmpty(propRangeState)) {
return false;
}
if (isEmpty.isEmpty(propRangeState) && !isEmpty.isEmpty(componentRangeState)) {
return true;
}
if ((componentRangeState === null || componentRangeState === void 0 ? void 0 : componentRangeState.length) !== (propRangeState === null || propRangeState === void 0 ? void 0 : propRangeState.length)) {
return true;
}
const [newRangeFrom, newRangeTo] = propRangeState;
const [currentRangeFrom, currentRangeTo] = componentRangeState;
return newRangeFrom !== currentRangeFrom || newRangeTo !== currentRangeTo;
};
const validateNewRange = (range) => {
const [from, to] = range;
return from && to && date_helper.dayjs(from).isValid() && date_helper.dayjs(to).isValid() && date_helper.dayjs(from).isBefore(to);
};
const getTimePickerEventPayload = (timeState, timezone) => {
const { key, range } = timeState;
const timezoneOffset = timezone.offset;
const timezoneName = timezone.name;
return {
key,
range: range,
timezone: {
offset: timezoneOffset,
name: timezoneName
}
};
};
exports.APPLY_BUTTON_ERROR_TOOLTIP_TEXT = APPLY_BUTTON_ERROR_TOOLTIP_TEXT;
exports.DEFAULT_SELECTED_TIME_KEY = DEFAULT_SELECTED_TIME_KEY;
exports.DEFAULT_TIME_RANGE_DROPDOWN_POSITION_OPTIONS = DEFAULT_TIME_RANGE_DROPDOWN_POSITION_OPTIONS;
exports.DEFAULT_TIME_RANGE_PICKER_INPUT_CONFIG = DEFAULT_TIME_RANGE_PICKER_INPUT_CONFIG;
exports.FULL_RANGE_SIZE = FULL_RANGE_SIZE;
exports.TIME_PICKER_PORTAL_Z_INDEX = TIME_PICKER_PORTAL_Z_INDEX;
exports.buildCustomIntervalTimeRange = buildCustomIntervalTimeRange;
exports.buildTooltipText = buildTooltipText;
exports.createTimestampInTimezoneFromFormattedDate = createTimestampInTimezoneFromFormattedDate;
exports.getAbsoluteTimePickerRangeDates = getAbsoluteTimePickerRangeDates;
exports.getLast24HoursRange = getLast24HoursRange;
exports.getRelativeTimeInputText = getRelativeTimeInputText;
exports.getRelativeTimeLabel = getRelativeTimeLabel;
exports.getTimePickerEventPayload = getTimePickerEventPayload;
exports.getTimestampFromDateRange = getTimestampFromDateRange;
exports.hasRangeChanged = hasRangeChanged;
exports.validateNewRange = validateNewRange;