48 lines
1.1 KiB
JavaScript
48 lines
1.1 KiB
JavaScript
import { Slider } from "antd";
|
|
import React, { useEffect, useState, forwardRef } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
const CourtesyCarFuelComponent = ({ value = 100, onChange }, ref) => {
|
|
const [option, setOption] = useState(value);
|
|
const { t } = useTranslation();
|
|
|
|
useEffect(() => {
|
|
if (onChange) {
|
|
onChange(option);
|
|
}
|
|
}, [option, onChange]);
|
|
|
|
const marks = {
|
|
0: {
|
|
style: {
|
|
color: "#f50",
|
|
},
|
|
label: t("courtesycars.labels.fuel.empty"),
|
|
},
|
|
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}
|
|
defaultValue={value}
|
|
onChange={setOption}
|
|
step={null}
|
|
/>
|
|
);
|
|
};
|
|
export default forwardRef(CourtesyCarFuelComponent);
|