@keycloakify/keycloak-admin-ui
Version:
Repackaged Keycloak Admin UI
71 lines • 4.04 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { KeycloakSelect, SelectVariant, } from "../../ui-shared";
import { SelectOption, Split, SplitItem, TextInput, } from "@patternfly/react-core";
import { useEffect, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
const allTimes = [
{ unit: "second", label: "times.seconds", multiplier: 1 },
{ unit: "minute", label: "times.minutes", multiplier: 60 },
{ unit: "hour", label: "times.hours", multiplier: 3600 },
{ unit: "day", label: "times.days", multiplier: 86400 },
];
const getTimeUnit = (units, value = 0) => units.reduce((v, time) => value % time.multiplier === 0 && v.multiplier < time.multiplier
? time
: v, units[0]);
export const toHumanFormat = (value, locale) => {
const timeUnit = getTimeUnit(allTimes, value);
const formatter = new Intl.NumberFormat(locale, {
style: "unit",
unit: timeUnit.unit,
unitDisplay: "long",
});
return formatter.format(value / timeUnit.multiplier);
};
export const TimeSelector = ({ value, units = ["second", "minute", "hour", "day"], onChange, className, min, menuAppendTo, ...rest }) => {
const { t } = useTranslation();
const [lastMultiplier, setLastMultiplier] = useState();
const defaultMultiplier = useMemo(() => { var _a; return (_a = allTimes.find((time) => time.unit === units[0])) === null || _a === void 0 ? void 0 : _a.multiplier; }, [units]);
const [timeValue, setTimeValue] = useState("");
const [multiplier, setMultiplier] = useState(defaultMultiplier);
const [open, setOpen] = useState(false);
const times = useMemo(() => {
const filteredUnits = units.map((unit) => allTimes.find((time) => time.unit === unit));
if (!filteredUnits.every((u) => u.multiplier === multiplier) &&
filteredUnits[0] !== allTimes[0]) {
filteredUnits.unshift(allTimes[0]);
}
return filteredUnits;
}, [units, multiplier]);
useEffect(() => {
const multiplier = getTimeUnit(times, value).multiplier;
if (value) {
setMultiplier(multiplier);
setTimeValue(value / multiplier);
setLastMultiplier(multiplier);
}
else {
setTimeValue(value || "");
setMultiplier(lastMultiplier !== null && lastMultiplier !== void 0 ? lastMultiplier : defaultMultiplier);
setLastMultiplier(lastMultiplier !== null && lastMultiplier !== void 0 ? lastMultiplier : defaultMultiplier);
}
}, [value, defaultMultiplier]);
const updateTimeout = (timeout, times = multiplier) => {
if (timeout !== "") {
onChange === null || onChange === void 0 ? void 0 : onChange(timeout * (times || 1));
setTimeValue(timeout);
}
else {
onChange === null || onChange === void 0 ? void 0 : onChange("");
}
};
return (_jsxs(Split, { hasGutter: true, className: className, children: [_jsx(SplitItem, { children: _jsx(TextInput, { ...rest, type: "number", "aria-label": "kc-time", min: min || 0, value: timeValue, className: `${className}-input`, onChange: (_event, value) => {
updateTimeout("" === value ? value : parseInt(value));
} }) }), _jsx(SplitItem, { id: `${className}-select-menu`, children: _jsx(KeycloakSelect, { variant: SelectVariant.single, "aria-label": t("unitLabel"), className: `${className}-select`, onSelect: (value) => {
setMultiplier(value);
updateTimeout(timeValue, value);
setOpen(false);
}, menuAppendTo: menuAppendTo, selections: multiplier, onToggle: () => {
setOpen(!open);
}, isOpen: open, isDisabled: rest.isDisabled, children: times.map((time) => (_jsx(SelectOption, { id: time.label, value: time.multiplier, children: t(time.label) }, time.label))) }) })] }));
};
//# sourceMappingURL=TimeSelector.js.map