zappyzep/presetup-configurator/src/Levels.tsx

47 lines
1.2 KiB
TypeScript
Raw Normal View History

2021-01-18 22:44:54 +02:00
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() {
2021-09-11 19:06:51 +03:00
setLevels((arr) => [...arr, ["", LEVEL_MODERATOR]]);
2021-01-18 22:44:54 +02:00
}
function removeLevel(index) {
2021-09-11 19:06:51 +03:00
setLevels((arr) => [...arr].splice(index, 1));
2021-01-18 22:44:54 +02:00
}
function updateLevelId(index, id) {
const validId = id.replace(/[^0-9]/g, "");
2021-09-11 19:06:51 +03:00
setLevels((arr) => {
2021-01-18 22:44:54 +02:00
arr[index][0] = validId;
return [...arr];
});
}
function updateLevelLevel(index, level) {
2021-09-11 19:06:51 +03:00
setLevels((arr) => {
2021-01-18 22:44:54 +02:00
arr[index][1] = parseInt(level, 10);
return [...arr];
});
}
return (
<div>
{levels.map(([id, level], index) => (
<div key={index}>
2021-09-11 19:06:51 +03:00
<input value={id} onChange={(e) => updateLevelId(index, e.target.value)} />
<select value={level} onChange={(e) => updateLevelLevel(index, e.target.value)}>
2021-01-18 22:44:54 +02:00
<option value={LEVEL_ADMIN}>Admin</option>
<option value={LEVEL_MODERATOR}>Moderator</option>
</select>
</div>
))}
<button onClick={addLevel}>Add</button>
</div>
);
}