67 lines
1.8 KiB
JavaScript
67 lines
1.8 KiB
JavaScript
import { Slider } from "antd";
|
|
import React, { forwardRef } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
const CourtesyCarFuelComponent = (props, ref) => {
|
|
const { t } = useTranslation();
|
|
|
|
const marks = {
|
|
0: {
|
|
style: {
|
|
color: "#f50"
|
|
},
|
|
label: <strong>{t("courtesycars.labels.fuel.empty")}</strong>
|
|
},
|
|
13: t("courtesycars.labels.fuel.18"),
|
|
25: t("courtesycars.labels.fuel.14"),
|
|
38: t("courtesycars.labels.fuel.38"),
|
|
50: t("courtesycars.labels.fuel.12"),
|
|
63: t("courtesycars.labels.fuel.58"),
|
|
75: t("courtesycars.labels.fuel.34"),
|
|
88: t("courtesycars.labels.fuel.78"),
|
|
100: {
|
|
style: {
|
|
color: "#008000"
|
|
},
|
|
label: <strong>{t("courtesycars.labels.fuel.full")}</strong>
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Slider
|
|
ref={ref}
|
|
marks={marks}
|
|
step={null}
|
|
style={{ marginLeft: "2rem", marginRight: "2rem" }}
|
|
{...props}
|
|
tooltip={{
|
|
formatter: (value) => {
|
|
switch (value) {
|
|
case 0:
|
|
return t("courtesycars.labels.fuel.empty");
|
|
case 13:
|
|
return t("courtesycars.labels.fuel.18");
|
|
case 25:
|
|
return t("courtesycars.labels.fuel.14");
|
|
case 38:
|
|
return t("courtesycars.labels.fuel.38");
|
|
case 50:
|
|
return t("courtesycars.labels.fuel.12");
|
|
case 63:
|
|
return t("courtesycars.labels.fuel.58");
|
|
case 75:
|
|
return t("courtesycars.labels.fuel.34");
|
|
case 88:
|
|
return t("courtesycars.labels.fuel.78");
|
|
case 100:
|
|
return t("courtesycars.labels.fuel.full");
|
|
default:
|
|
return value;
|
|
}
|
|
}
|
|
}}
|
|
/>
|
|
);
|
|
};
|
|
export default forwardRef(CourtesyCarFuelComponent);
|