Перевел дизайн на материал

components/elements/commands/elements/argument/index.tsx

@@ -1,6 +1,7 @@
 import styles from './styles.module.css'
 import {useContext, useEffect, useState} from "react";
 import Context, {ContextInterface} from "../command/context";
+import {TextField} from "@mui/material";
 
 export interface ArgumentInterface {
     name: string,
@@ -27,7 +28,8 @@ export default function Argument(argument: ArgumentInterface) {
     }
     return (
         <span>
-            <input onInput={onInput} placeholder={argument.name} value={value} type="text"/>&nbsp;
+            <TextField onInput={onInput} placeholder={argument.name} value={value} size="small" variant="outlined" />&nbsp;
+            {/*<input onInput={onInput} placeholder={argument.name} value={value} type="text"/>&nbsp;*/}
         </span>
     )
 }

components/elements/commands/elements/command/index.tsx

@@ -29,7 +29,7 @@ export default function Command({command, callback}: CommandComponentInterface)
 
     return (
         <Provider value={{optionList, setOptionList, argumentList, setArgumentList}}>
-            <div className={styles.task}>
+            <div>
                 <div title={command.description}>
                     {command.name}&nbsp;
                     <Options optionList={command.options} />

components/elements/commands/elements/command/styles.module.css

@@ -1,4 +0,0 @@
-.task {
-    display: grid;
-    grid-template-columns: 11fr 1fr;
-}

components/elements/commands/elements/option/index.tsx

@@ -1,6 +1,7 @@
 import styles from './styles.module.css'
 import {useContext} from "react";
 import Context, {ContextInterface} from "../command/context";
+import {TextField} from "@mui/material";
 
 export interface OptionInterface {
     name: string,
@@ -27,7 +28,14 @@ export default function Option(option: OptionInterface) {
     }
     return (
         <span>
-            {option.shortcut ? '-' : '--'}{option.shortcut || option.name} {option.acceptValue && <input onInput={onInput} type="text"/>}&nbsp;
+            {option.shortcut ? '-' : '--'}
+            {option.acceptValue ? '' : (option.shortcut || option.name)}
+            {option.acceptValue &&
+                <TextField
+                    label={option.shortcut || option.name}
+                    onInput={onInput}
+                    size="small"
+                    variant="outlined" />}&nbsp;
         </span>
     )
 }

components/elements/commands/elements/options/index.tsx

@@ -2,6 +2,7 @@ import styles from './styles.module.css'
 import Option, {OptionInterface} from '../option'
 import {useContext, useEffect, useState} from "react";
 import Context, {ContextInterface} from "../command/context";
+import {Select, MenuItem, Checkbox, ListItemText} from "@mui/material";
 
 interface OptionsInterface {
     optionList: OptionInterface[]
@@ -9,46 +10,58 @@ interface OptionsInterface {
 
 export default function Options({optionList}: OptionsInterface) {
     let {optionList: ol, setOptionList} = useContext<ContextInterface>(Context)
-    let [availableOptions, setAvailableOptions] = useState<OptionInterface[]>(optionList);
+    let [selectedOptions, setSelectedOptions] = useState<OptionInterface[]>([]);
     let [values, setValues] = useState<OptionInterface[]>([]);
+    let [selectedValues, setSelectedValues] = useState<string[]>([]);
 
     useEffect(() => {
         let result: OptionInterface[] = [];
         optionList.forEach((value, index, array) => {
-            let check = values.find(item => item === value)
+            let check = selectedValues.find(item => item === value.name)
-            !check && result.push(value)
+            check && result.push(value)
         })
-        setAvailableOptions(result)
+        setSelectedOptions(result)
-    }, [values]);
+
+        let temp: any = {}
+        optionList.forEach((value, index, array) => {
+            let check = selectedValues.find(item => item === value.name)
+            check && (temp[value.name] = value.acceptValue ? '' : null)
+        })
+        setOptionList(temp)
+    }, [selectedValues]);
 
     if (!optionList.length) {
         return <></>
     }
 
-    let onChange = (event: any) => {
+    const handleChange = (event: any) => {
-        let selectedValue = event.target.value
+        const { target: { value }} = event
-        let selectedOption = availableOptions.find(item => item.name === selectedValue)
+        setSelectedValues(typeof value === 'string' ? value.split(',') : value)
-        selectedOption && values.push(selectedOption)
+    };
-        setValues([ ...values ])
-        event.target.value = '';
 
-        let temp = {
-            ...ol
-        }
-        if (selectedOption) {
-            temp[selectedOption.name] = selectedOption.acceptValue ? '' : null;
-        }
-        setOptionList(temp)
-    }
     return (
         <>
-            {availableOptions.length > 0 && <><select onChange={onChange}>
+            {optionList.length > 0 &&
-                <option value="">-</option>
+                <>
-                {availableOptions.map((option: OptionInterface, index: number) => (
+                    <Select
-                    <option key={index} value={option.name}>{option.name}</option>
+                        value={selectedValues}
-                ))}
+                        label="Option"
-            </select>&nbsp;</>}
+                        multiple
-            {values.map((option: OptionInterface, index: number) => (
+                        displayEmpty
+                        onChange={handleChange}
+                        renderValue={(selectedValues) => `Options`}
+                        size="small"
+                    >
+                        {optionList.map((option: OptionInterface, index: number) => (
+                            <MenuItem key={index} value={option.name}>
+                                <Checkbox checked={selectedValues.indexOf(option.name) > -1} />
+                                <ListItemText primary={option.name} />
+                            </MenuItem>
+                        ))}
+                    </Select>
+                    &nbsp;
+                </>}
+            {selectedOptions.map((option: OptionInterface, index: number) => (
                 <Option key={index} {...option} />
             ))}
         </>

components/elements/commands/styles.module.css

@@ -1,4 +0,0 @@
-.task {
-    display: grid;
-    grid-template-columns: 11fr 1fr;
-}