rinsvent/fms
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Rinsvent 2023-01-14 21:34:46 +07:00
parent bb977edb2c
commit f63cd5c87b
6 changed files with 52 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/elements/commands/elements/argument/index.tsx
View File

@ -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>
)
}

2
components/elements/commands/elements/command/index.tsx
View File

@ -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} />

4
components/elements/commands/elements/command/styles.module.css
View File

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

10
components/elements/commands/elements/option/index.tsx
View File

@ -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>
)
}

65
components/elements/commands/elements/options/index.tsx
View File

@ -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)
!check && result.push(value)
let check = selectedValues.find(item => item === value.name)
check && result.push(value)
})
setAvailableOptions(result)
}, [values]);
setSelectedOptions(result)
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) => {
let selectedValue = event.target.value
let selectedOption = availableOptions.find(item => item.name === selectedValue)
selectedOption && values.push(selectedOption)
setValues([ ...values ])
event.target.value = '';
const handleChange = (event: any) => {
const { target: { value }} = event
setSelectedValues(typeof value === 'string' ? value.split(',') : value)
};
let temp = {
...ol
}
if (selectedOption) {
temp[selectedOption.name] = selectedOption.acceptValue ? '' : null;
}
setOptionList(temp)
}
return (
<>
{availableOptions.length > 0 && <><select onChange={onChange}>
<option value="">-</option>
{availableOptions.map((option: OptionInterface, index: number) => (
<option key={index} value={option.name}>{option.name}</option>
))}
</select>&nbsp;</>}
{values.map((option: OptionInterface, index: number) => (
{optionList.length > 0 &&
<>
<Select
value={selectedValues}
label="Option"
multiple
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} />
))}
</>

4
components/elements/commands/styles.module.css
View File

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