3
0
Fork 0
mirror of https://github.com/ZeppelinBot/Zeppelin.git synced 2025-03-18 15:00:00 +00:00
zeppelin/presetup-configurator/src/Levels.tsx
2021-01-18 22:44:54 +02:00

46 lines
1.2 KiB
TypeScript

import React, { useState } from "react";
const LEVEL_ADMIN = 100;
const LEVEL_MODERATOR = 50;
export type LevelEntry = [string, number]; // id, level
export function Levels({ levels, setLevels }) {
function addLevel() {
setLevels(arr => [...arr, ["", LEVEL_MODERATOR]]);
}
function removeLevel(index) {
setLevels(arr => [...arr].splice(index, 1));
}
function updateLevelId(index, id) {
const validId = id.replace(/[^0-9]/g, "");
setLevels(arr => {
arr[index][0] = validId;
return [...arr];
});
}
function updateLevelLevel(index, level) {
setLevels(arr => {
arr[index][1] = parseInt(level, 10);
return [...arr];
});
}
return (
<div>
{levels.map(([id, level], index) => (
<div key={index}>
<input value={id} onChange={e => updateLevelId(index, e.target.value)} />
<select value={level} onChange={e => updateLevelLevel(index, e.target.value)}>
<option value={LEVEL_ADMIN}>Admin</option>
<option value={LEVEL_MODERATOR}>Moderator</option>
</select>
</div>
))}
<button onClick={addLevel}>Add</button>
</div>
);
}