Dollerok/P8-Panels
1
0
Fork 0
forked from CITKParus/P8-Panels
Code Issues Pull Requests Projects Releases Wiki Activity

WEB APP: Стили в примерах для разработчика (MUI)

Browse Source
This commit is contained in:
Mikhail Chechnev 2023-12-21 20:34:20 +03:00
parent 24585ba6b2
commit 60af1cf05f
2 changed files with 56 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
app/panels/samples/mui.js
View File

@ -22,7 +22,10 @@ import { ApplicationСtx } from "../../context/application"; //Контекст
const STYLES = {
CONTAINER: { textAlign: "center", paddingTop: "20px" },
TITLE: { paddingBottom: "15px" },
LIST: { width: "100%", maxWidth: "600px", bgcolor: "background.paper" }
GRID_CONTAINER: { maxWidth: "500px" },
GRID_TEM: { width: "100%" },
LIST_CONTAINER: { marginTop: "10pt", maxHeight: "60vh", overflow: "auto", width: "100%" },
LIST: { width: "100%", bgcolor: "background.paper" }
};
//-----------
@ -109,48 +112,54 @@ const Mui = ({ title }) => {
<Typography sx={STYLES.TITLE} variant={"h6"}>
{title}
</Typography>
<Grid container spacing={0} direction="column" alignItems="center">
<Grid item xs={12}>
<TextField
name="agnAbbr"
label="Мнемокод"
value={agentForm.agnAbbr}
variant="standard"
fullWidth
onChange={handleAgentFormChanged}
/>
<TextField
name="agnName"
label="Наименование"
value={agentForm.agnName}
variant="standard"
fullWidth
onChange={handleAgentFormChanged}
/>
<Box pt="10px">
<Button onClick={handleAgentInsert} variant="contained" fullWidth>
Добавить контрагента
</Button>
</Box>
<List sx={STYLES.LIST}>
{agents.map(a => (
<ListItem
key={a.NRN}
secondaryAction={
<IconButton edge="end" title="Удалить контрагента" onClick={() => handleAgnetDeleteClick(a.NRN)}>
<Icon>delete</Icon>
</IconButton>
}
disablePadding
>
<ListItemButton onClick={() => handleAgnetClick(a.NRN)}>
<ListItemText primary={a.SAGNABBR} secondary={a.SAGNNAME} />
</ListItemButton>
</ListItem>
))}
</List>
<Box display="flex" justifyContent="center" alignItems="center">
<Grid container spacing={0} direction="column" alignItems="center" justifyContent="center" sx={STYLES.GRID_CONTAINER}>
<Grid item xs={12} sx={STYLES.GRID_TEM}>
<TextField
name="agnAbbr"
label="Мнемокод"
value={agentForm.agnAbbr}
variant="standard"
fullWidth
onChange={handleAgentFormChanged}
/>
<TextField
name="agnName"
label="Наименование"
value={agentForm.agnName}
variant="standard"
fullWidth
onChange={handleAgentFormChanged}
/>
<Box pt="10px">
<Button onClick={handleAgentInsert} variant="contained" fullWidth>
Добавить контрагента
</Button>
</Box>
</Grid>
<Grid item xs={12} sx={STYLES.GRID_TEM}>
<Box sx={STYLES.LIST_CONTAINER}>
<List sx={STYLES.LIST}>
{agents.map(a => (
<ListItem
key={a.NRN}
secondaryAction={
<IconButton edge="end" title="Удалить контрагента" onClick={() => handleAgnetDeleteClick(a.NRN)}>
<Icon>delete</Icon>
</IconButton>
}
disablePadding
>
<ListItemButton onClick={() => handleAgnetClick(a.NRN)}>
<ListItemText primary={a.SAGNABBR} secondary={a.SAGNNAME} />
</ListItemButton>
</ListItem>
))}
</List>
</Box>
</Grid>
</Grid>
</Grid>
</Box>
</div>
);
};

9
app/panels/samples/samples.js
View File

@ -35,6 +35,7 @@ const MODES = {
//Стили
const STYLES = {
ROOT: { height: "calc(100vh - 64px)" },
CONTAINER: { textAlign: "center", paddingTop: "20px" },
BACK_BUTTON: { position: "absolute", left: "20px", marginTop: "20px" }
};
@ -46,19 +47,19 @@ const STYLES = {
//Примеры
const Samples = () => {
//Собственное состояние
const [mode, setMode] = useState("");
const [mode, setMode] = useState("MUI");
//Генерация содержимого
return (
<div>
<div style={STYLES.ROOT}>
{mode ? (
<div>
<>
<Fab variant="extended" sx={STYLES.BACK_BUTTON} onClick={() => setMode("")}>
<Icon>arrow_back_ios</Icon>
{BUTTONS.NAVIGATE_BACK}
</Fab>
{React.createElement(MODES[mode]?.component || (() => {}), { title: MODES[mode]?.caption })}
</div>
</>
) : (
<div style={STYLES.CONTAINER}>
{Object.entries(MODES).map(m => (