@kelvininc/ui-components
Version:
Kelvin UI Components
173 lines (169 loc) • 8.52 kB
JavaScript
import { H as dayjs, F as newTimezoneDate } from './p-BS8xGxWJ.js';
import { D as DATETIME_INPUT_MASK, C as CALENDAR_DATE_TIME_MASK } from './p-BWl-z3SO.js';
import { B as EValidationState, t as EIconName, A as EInputFieldType, C as CUSTOM_TIME_RANGE_KEY, v as ERelativeTimeComparisonConfig, j as ERelativeTimeInputMode } from './p-BP5CxQcH.js';
import { o as offset, s as size } from './p-CgqRIP0M.js';
import { a as DEFAULT_DROPDOWN_Z_INDEX, i as isNil } from './p-CRcRM80a.js';
import './p-BEbvpiII.js';
import { i as isNumber } from './p-C9bG1i86.js';
import { i as isEmpty } from './p-BZNGlO8m.js';
// It needs to be lower because there are other dropdowns with a portal inside
const TIME_PICKER_PORTAL_Z_INDEX = 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: EInputFieldType.Text,
icon: EIconName.Calendar,
state: EValidationState.None,
tooltipConfig: {
truncate: false
}
};
const DEFAULT_TIME_RANGE_DROPDOWN_POSITION_OPTIONS = {
placement: 'bottom-end',
middleware: [
offset(TIME_RANGE_PICKER_DROPDOWN_INPUT_OFFSET),
size({
apply({ elements }) {
Object.assign(elements.floating.style, {
width: 'max-content'
});
}
})
]
};
const DEFAULT_SELECTED_TIME_KEY = 'last-24-h';
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(range)) {
const [from, to] = range;
const timeZoneFromDate = createFormattedDateFromTimestampInTimezone(from, timezone);
const timeZoneToDate = createFormattedDateFromTimestampInTimezone(to, timezone);
return 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 = dayjs(from).tz(timezoneName);
const timezoneText = (_a = timezonesByOffset.filter(opt => opt.name === timezoneName)[0]) !== null && _a !== void 0 ? _a : UTC_TIMEZONE_OFFSET;
if (isNumber(to)) {
const toDate = dayjs(to).tz(timezoneName);
return `${fromDate.format(DATETIME_INPUT_MASK)} to ${toDate.format(DATETIME_INPUT_MASK)} ${timezoneText.label}`;
}
return `${fromDate.format(DATETIME_INPUT_MASK)} ${timezoneText.label}`;
};
const createFormattedDateFromTimestampInTimezone = (date, timezone) => {
return dayjs(date).tz(timezone).format(DATETIME_INPUT_MASK);
};
const createTimestampInTimezoneFromFormattedDate = (date, timezone, format = DATETIME_INPUT_MASK) => {
return 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 === CUSTOM_TIME_RANGE_KEY) {
return [dayjs(from).tz(timezoneName).format(CALENDAR_DATE_TIME_MASK)];
}
return [dayjs(from).utcOffset(timezoneOffset).format(CALENDAR_DATE_TIME_MASK)];
}
if (selectedOption.key === CUSTOM_TIME_RANGE_KEY) {
return [dayjs(from).tz(timezoneName).format(CALENDAR_DATE_TIME_MASK), dayjs(to).tz(timezoneName).format(CALENDAR_DATE_TIME_MASK)];
}
return [dayjs(from).utcOffset(timezoneOffset).format(CALENDAR_DATE_TIME_MASK), dayjs(to).utcOffset(timezoneOffset).format(CALENDAR_DATE_TIME_MASK)];
};
const getLast24HoursRange = () => {
const nowTimestamp = 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(option)) {
if (option.comparisonConfig === ERelativeTimeComparisonConfig.RelativeAmountOfUnits) {
return {
mode: 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: ERelativeTimeInputMode.Date,
from: newTimezoneDate(timezone, from).format(DATETIME_INPUT_MASK),
to: newTimezoneDate(timezone, to).format(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(componentRangeState) && isEmpty(propRangeState)) {
return false;
}
if (isEmpty(propRangeState) && !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 && dayjs(from).isValid() && dayjs(to).isValid() && 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
}
};
};
export { APPLY_BUTTON_ERROR_TOOLTIP_TEXT as A, DEFAULT_TIME_RANGE_DROPDOWN_POSITION_OPTIONS as D, FULL_RANGE_SIZE as F, TIME_PICKER_PORTAL_Z_INDEX as T, buildCustomIntervalTimeRange as a, buildTooltipText as b, createTimestampInTimezoneFromFormattedDate as c, DEFAULT_TIME_RANGE_PICKER_INPUT_CONFIG as d, DEFAULT_SELECTED_TIME_KEY as e, getTimestampFromDateRange as f, getLast24HoursRange as g, hasRangeChanged as h, getTimePickerEventPayload as i, getRelativeTimeLabel as j, getAbsoluteTimePickerRangeDates as k, getRelativeTimeInputText as l, validateNewRange as v };