39 lines
1.2 KiB
TypeScript
39 lines
1.2 KiB
TypeScript
import React, {useContext, useState} from "react";
|
|
import {Icon, List, Menu} from "semantic-ui-react";
|
|
import UserContext from "../Contexts/UserContext";
|
|
|
|
interface RulesetListProps {
|
|
rulesetNames: string[];
|
|
onItemChange: (newItemId: string | "addNewRuleset") => any;
|
|
selectedItemIndex: number;
|
|
creatingRuleset: boolean;
|
|
}
|
|
|
|
const RulesetList: React.FunctionComponent<RulesetListProps> = (props) => {
|
|
const {rulesetNames, onItemChange, selectedItemIndex, creatingRuleset} = props;
|
|
const {strings: Locale} = useContext(UserContext);
|
|
|
|
const selectedItem = creatingRuleset ? "" : rulesetNames[selectedItemIndex];
|
|
|
|
return (
|
|
<Menu pointing={true} vertical={true}>
|
|
{rulesetNames.map(name => (
|
|
<Menu.Item
|
|
key={name}
|
|
name={name}
|
|
active={selectedItem === name}
|
|
onClick={() => onItemChange(name)}
|
|
/>
|
|
))}
|
|
<Menu.Item
|
|
active={creatingRuleset}
|
|
onClick={() => onItemChange("addNewRuleset")}
|
|
>
|
|
{Locale.rulesetsPage.newRuleset}
|
|
<Icon name={"add"} />
|
|
</Menu.Item>
|
|
</Menu>
|
|
);
|
|
};
|
|
|
|
export default RulesetList; |