125 lines
3.4 KiB
TypeScript
125 lines
3.4 KiB
TypeScript
import React from "react";
|
|
import { useTranslation } from "next-i18next";
|
|
import classNames from "classnames";
|
|
|
|
import RaidDropdown from "~components/RaidDropdown";
|
|
|
|
import "./index.scss";
|
|
|
|
interface Props {
|
|
children: React.ReactNode;
|
|
scrolled: boolean;
|
|
element?: number;
|
|
raidSlug?: string;
|
|
recency?: number;
|
|
onFilter: ({
|
|
element,
|
|
raidSlug,
|
|
recency,
|
|
}: {
|
|
element?: number;
|
|
raidSlug?: string;
|
|
recency?: number;
|
|
}) => void;
|
|
}
|
|
|
|
const FilterBar = (props: Props) => {
|
|
// Set up translation
|
|
const { t } = useTranslation("common");
|
|
|
|
// Set up refs for filter dropdowns
|
|
const elementSelect = React.createRef<HTMLSelectElement>();
|
|
const raidSelect = React.createRef<HTMLSelectElement>();
|
|
const recencySelect = React.createRef<HTMLSelectElement>();
|
|
|
|
// Set up classes object for showing shadow on scroll
|
|
const classes = classNames({
|
|
FilterBar: true,
|
|
shadow: props.scrolled,
|
|
});
|
|
|
|
function elementSelectChanged() {
|
|
const elementValue = elementSelect.current
|
|
? parseInt(elementSelect.current.value)
|
|
: -1;
|
|
props.onFilter({ element: elementValue });
|
|
}
|
|
|
|
function recencySelectChanged() {
|
|
const recencyValue = recencySelect.current
|
|
? parseInt(recencySelect.current.value)
|
|
: -1;
|
|
props.onFilter({ recency: recencyValue });
|
|
}
|
|
|
|
function raidSelectChanged(slug?: string) {
|
|
props.onFilter({ raidSlug: slug });
|
|
}
|
|
|
|
return (
|
|
<div className={classes}>
|
|
{props.children}
|
|
<select
|
|
onChange={elementSelectChanged}
|
|
ref={elementSelect}
|
|
value={props.element}
|
|
>
|
|
<option data-element="all" key={-1} value={-1}>
|
|
{t("elements.full.all")}
|
|
</option>
|
|
<option data-element="null" key={0} value={0}>
|
|
{t("elements.full.null")}
|
|
</option>
|
|
<option data-element="wind" key={1} value={1}>
|
|
{t("elements.full.wind")}
|
|
</option>
|
|
<option data-element="fire" key={2} value={2}>
|
|
{t("elements.full.fire")}
|
|
</option>
|
|
<option data-element="water" key={3} value={3}>
|
|
{t("elements.full.water")}
|
|
</option>
|
|
<option data-element="earth" key={4} value={4}>
|
|
{t("elements.full.earth")}
|
|
</option>
|
|
<option data-element="dark" key={5} value={5}>
|
|
{t("elements.full.dark")}
|
|
</option>
|
|
<option data-element="light" key={6} value={6}>
|
|
{t("elements.full.light")}
|
|
</option>
|
|
</select>
|
|
<RaidDropdown
|
|
currentRaid={props.raidSlug}
|
|
showAllRaidsOption={true}
|
|
onChange={raidSelectChanged}
|
|
ref={raidSelect}
|
|
/>
|
|
<select onChange={recencySelectChanged} ref={recencySelect}>
|
|
<option key={-1} value={-1}>
|
|
{t("recency.all_time")}
|
|
</option>
|
|
<option key={86400} value={86400}>
|
|
{t("recency.last_day")}
|
|
</option>
|
|
<option key={604800} value={604800}>
|
|
{t("recency.last_week")}
|
|
</option>
|
|
<option key={2629746} value={2629746}>
|
|
{t("recency.last_month")}
|
|
</option>
|
|
<option key={7889238} value={7889238}>
|
|
{t("recency.last_3_months")}
|
|
</option>
|
|
<option key={15778476} value={15778476}>
|
|
{t("recency.last_6_months")}
|
|
</option>
|
|
<option key={31556952} value={31556952}>
|
|
{t("recency.last_year")}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default FilterBar;
|