@kelvininc/ui-components
Version:
Kelvin UI Components
138 lines (137 loc) • 7.04 kB
JavaScript
import dayjs from "dayjs";
import { CALENDAR_DATE_TIME_MASK, DATETIME_INPUT_MASK } from "../absolute-time-picker/absolute-time-picker.config";
import { ERelativeTimeInputMode } from "../absolute-time-picker/absolute-time-picker.types";
import { ERelativeTimeComparisonConfig } from "../relative-time-picker/relative-time-picker.types";
import { isEmpty, isNil, isNumber } from "lodash-es";
import { CUSTOMIZE_INTERVAL_KEY } from "../relative-time-picker/relative-time-picker.config";
import { UTC_TIMEZONE_OFFSET } from "./time-picker.config";
import { newTimezoneDate } from "../../utils/date.helper";
/**
* 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
*/
export 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
*/
export 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);
};
export 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
*/
export 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 === CUSTOMIZE_INTERVAL_KEY) {
return [dayjs(from).tz(timezoneName).format(CALENDAR_DATE_TIME_MASK)];
}
return [dayjs(from).utcOffset(timezoneOffset).format(CALENDAR_DATE_TIME_MASK)];
}
if (selectedOption.key === CUSTOMIZE_INTERVAL_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)];
};
export const getLast24HoursRange = () => {
const nowTimestamp = dayjs().utc();
return [nowTimestamp.subtract(24, 'hours').valueOf(), nowTimestamp.valueOf()];
};
export 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)
};
}
}
};
export 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; };
export 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];
};
export 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;
};
export const validateNewRange = (range) => {
const [from, to] = range;
return from && to && dayjs(from).isValid() && dayjs(to).isValid() && dayjs(from).isBefore(to);
};
export 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
}
};
};