Function EditSettingsOptionList

frontend/src/components/GuildScriptPage.tsx:325–453

({ list }: {
    list: SettingsOptionList,
})

}

function EditSettingsOptionList({ list }: {
    list: SettingsOptionList,
}) {
    const { value: rawValue, setValue } = useSettingsField(list.name)
    const settingsValuesContext = useContext(SettingsValuesContext)
    if (!settingsValuesContext) {
        throw new Error("no settings context")
    }


    const value: SettingsOptionValue[][] = rawValue === undefined
        ? Array.isArray(list.defaultValue)
            ? (list.defaultValue as any[])
                .filter(row => Array.isArray(row))
                .map(row => (row as any[])
                    .filter(field => field
                        && typeof field === "object"
                        && typeof field.name === "string"
                        && "value" in field)
                    .map(field => ({
                        name: field.name,
                        value: Array.isArray(field.value) ? [...field.value] : field.value,
                    })))
            : []
        : Array.isArray(rawValue.value)
            ? (rawValue.value as SettingsOptionValue[][]).map(row => [...row])
            : []


    function newItem() {

        setValue([
            ...value.map(row => [...row]),
            [],
        ])
    }

    function deleteItem(index: number) {
        const copy = value.map(row => [...row])
        copy.splice(index, 1)
        setValue(copy)
    }

    return <Paper sx={{ marginTop: 3, padding: 1 }} elevation={2}>
        <Box display={"flex"} justifyContent={"space-between"} alignItems={"start"} gap={1}>
            <Box>
                <Typography>{list.label}</Typography>
                <Typography variant='body2'>{list.description}</Typography>
            </Box>
            <Box display={"flex"} gap={1}>
                {(Boolean(rawValue) && (list.defaultValue || !list.required)) &&
                    <IconButton
                        type="button"
                        color='warning'
                        onClick={() => setValue(null)}
                    >
                        <ReplayIcon />
                    </IconButton>}