@kelvininc/ui-components
Version:
Kelvin UI Components
103 lines (102 loc) • 5.14 kB
JavaScript
import dayjs from "dayjs";
import { isEmpty } from "lodash-es";
import { BOTTOM_OPTIONS_HEIGHT, DEFAULT_TIMEZONE_GROUP_LABEL, DEFAULT_TIMEZONE_GROUP_NAME, GROUP_GAP, MAX_HEIGHT, OTHER_TIMEZONES_GROUP_LABEL, OTHER_TIMEZONES_GROUP_NAME, PADDING_SIZE, SELECT_OPTION_HEIGHT } from "./relative-time-picker.config";
import { buildOptionRange, buildTimestampRange } from "../../utils/relative-time.helper";
import { getDefaultTimezone } from "../../utils/date.helper";
export const buildRelativeTimeSelectOptions = (options, timeZone = getDefaultTimezone()) => {
return options.map(group => buildRelativeTimeGroupOptions(group, timeZone));
};
export const buildRelativeTimeGroupOptions = (options, timeZone) => {
return options.map(option => {
const dayjsRange = buildOptionRange(option, timeZone);
return Object.assign(Object.assign({ key: option.value }, option), { description: buildDateRangeDescription(dayjsRange, option.labelRangeFormatter), range: buildTimestampRange(dayjsRange) });
});
};
/**
* Builds the description of the date
* @param startDate start date
* @param endDate end date
* @param formatObject specifies how the dates and the separators should be read
* @returns description of the range accordingly with the format object
*/
export const buildDateRangeDescription = ([startDate, endDate], formatObject) => {
const startDateDescription = !isEmpty(formatObject.startDateFormatter) ? startDate.format(formatObject.startDateFormatter) : '';
const separator = !isEmpty(formatObject.separator) ? ` ${formatObject.separator} ` : '';
const endDateDescription = !isEmpty(formatObject.endDateFormatter) ? endDate.format(formatObject.endDateFormatter) : '';
return `${startDateDescription}${separator}${endDateDescription}`;
};
export const getSelectedKeyRange = (options, key) => {
var _a;
const selectedItem = options.flat().find(item => item.key === key);
return (_a = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.range) !== null && _a !== void 0 ? _a : [];
};
export const hasRangeChanged = (selectedRange, currentRange) => {
if (isEmpty(selectedRange))
return true;
const currentRangeStartDate = getDateTimeWithResetedSeconds(currentRange[0]);
const currentRangeEndDate = getDateTimeWithResetedSeconds(currentRange[1]);
const selectedRangeStartDate = getDateTimeWithResetedSeconds(selectedRange[0]);
const selectedRangeEndDate = getDateTimeWithResetedSeconds(selectedRange[1]);
if (currentRangeStartDate !== selectedRangeStartDate || currentRangeEndDate !== selectedRangeEndDate) {
return true;
}
return false;
};
const getDateTimeWithResetedSeconds = (date) => {
return dayjs(date).set('second', 0).format();
};
export const isScrollNeeded = (options, displayingCustomizeOption, displayingTimezoneDropdown) => {
const optionsListHeight = options.reduce((acc, group) => {
const groupSize = group.length * SELECT_OPTION_HEIGHT;
return acc + groupSize + GROUP_GAP;
}, 0);
const customizeOptionHeight = displayingCustomizeOption ? BOTTOM_OPTIONS_HEIGHT : 0;
const dropdownOptionHeight = displayingTimezoneDropdown ? BOTTOM_OPTIONS_HEIGHT : 0;
return optionsListHeight > MAX_HEIGHT - customizeOptionHeight - dropdownOptionHeight - 2 * PADDING_SIZE;
};
export const buildTimezonesDropdownOptions = (timezones) => {
let defaultTimezoneGroup = {};
const defaultTimezone = getDefaultTimezone();
let otherTimezones = [...timezones];
const defaultTimezoneIndex = otherTimezones.findIndex(({ name }) => name === defaultTimezone);
if (defaultTimezoneIndex !== -1) {
const timezone = otherTimezones[defaultTimezoneIndex];
otherTimezones.splice(defaultTimezoneIndex, 1);
defaultTimezoneGroup = {
[DEFAULT_TIMEZONE_GROUP_NAME]: {
label: DEFAULT_TIMEZONE_GROUP_LABEL,
value: DEFAULT_TIMEZONE_GROUP_NAME,
options: {
[timezone.name]: {
value: timezone.name,
label: timezone.label
}
}
}
};
}
let otherTimezoneGroup = {};
if (!isEmpty(otherTimezones)) {
otherTimezoneGroup = {
[OTHER_TIMEZONES_GROUP_NAME]: {
label: OTHER_TIMEZONES_GROUP_LABEL,
value: OTHER_TIMEZONES_GROUP_NAME,
options: otherTimezones.reduce((accumulator, { label, name }) => {
var _a;
accumulator[name] = (_a = accumulator[name]) !== null && _a !== void 0 ? _a : {
value: name,
label
};
return accumulator;
}, {})
}
};
}
const options = Object.assign(Object.assign({}, defaultTimezoneGroup), otherTimezoneGroup);
// Check if there's only one group
if (Object.keys(options).length === 1) {
const [groupKey] = Object.keys(options);
return options[groupKey].options;
}
return options;
};