У меня есть компонент, который отображает полноэкранный <Dialog> с <Table>.
Каждая строка в этом <Table> содержит <TableCell>, который содержит <Button> компонент.
При нажатии появится другое, не полноэкранное <Dialog>, содержащее <Table>, и покажет, что содержит объект в основном <Table>.
Примерно так:
--- Корзина --- Всего --- Продукты ---- Дата -----
------- A --------- 3 ------------ [1] ------ someDate-- // [1] будучи кнопкой
onClick() из [1] вызывает меньшее <Dialog>
--- --- Наименование Цена --- Количество ---
---- Prod ------- 3 ---------- 1 ------- // Вложенный <Dialog>
Теперь у меня есть метод, который просто анализирует дату, которую я получаю из бэкэнда, в столбец Date в главном <Table>.
Как ни странно, если я нажму <Button> для второй, меньшей <Dialog>, метод будет вызван снова, все зависнет на 5 секунд, и несколько окон всплывают друг над другом.
У меня есть переменная open в состоянии, поэтому я подумал, что все это становится визуализатором, когда я переключаю его. Что имело бы смысл.
Я попытался использовать <Modal>, который на самом деле был бы лучшим вариантом, но он просто вылетал в Chrome. Экран становится черным с параллельными линиями поперек.
Итак, я делаю два цикла в компоненте <Dialog>.
Вот код, использующий <Dialog>:
<Dialog
open={this.props.loadBasketsWindowOpen}
transition={Transition}
keepMounted
onClose={this.handleClose}
aria-labelledby="alert-dialog-slide-title"
aria-describedby="alert-dialog-slide-description"
fullScreen
>
<DialogTitle id="alert-dialog-slide-title">
<p style={centerDiv}>{"Baskets: "}{this.props.openBaskets.length}</p>
<hr style={horizontalLineStyle}/>
</DialogTitle>
<DialogContent>
<div style={centerDiv}>
<Table>
<TableHead>
<TableRow>
<TableCell style={tableTextStyle}>User</TableCell>
<TableCell style={tableTextStyle}>Total</TableCell>
<TableCell style=tableTextStyle}>Products</TableCell>
<TableCell style={tableTextStyle}>Date</TableCell>
<TableCell></TableCell>
</TableRow>
</TableHead>
<TableBody>
{this.props.baskets !== undefined ?
this.props.baskets.map(basket => {
return(
<TableRow key={basket.id}>
<TableCell style={tableTextStyle}>
{basket.user}
</TableCell>
<TableCell style={tableTextStyle}>
€{basket.total}
</TableCell>
<TableCell style={tableTextStyle}>
<Button onClick={this.onToggle}>
{basket.posBasketItems.length}
<Dialog
open={this.state.innerTableWindowOpen}
onClose={this.handleClose}
aria-labelledby="alert-dialog-slide-title"
aria-describedby="alert-dialog-slide-
description"
>
<DialogTitle>
<p style={centerDiv}>
{"Cart: "}
{basket.length} Products
</p>
<hr style={horizontalLineStyle}/>
</DialogTitle>
<DialogContent>
<Table>
<TableHead>
<TableRow>
<TableCell>
Name
</TableCell>
<TableCell>
Price
</TableCell>
<TableCell>
Quantity
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{basket.items.map(item => {
return (
<TableRow key={item.id}>
<TableCell>
{item.name}
</TableCell>
<TableCell>
{item.price}
</TableCell>
<TableCell>
{item.quantity}
</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
</DialogContent>
</Dialog>
</Button>
</TableCell>
<TableCell>
{this.parseDate(basket.date)}
</TableCell>
<TableCell>
<Button
onClick={()=>this.setToCurrentBasket(basket)}
>
<ADD_TO_SHOPPING_CART />
</Button>
</TableCell>
</TableRow>
);
}) : ''}
</TableBody>
</Table>
</div>
</DialogContent>
<DialogActions>
<div>
<MuiThemeProvider theme={cancelButtonTheme}>
<Button
variant="raised"
onClick={this.closeOpenBasketsWindow}
color="secondary"
>
CANCEL
</Button>
</MuiThemeProvider>
</div>
</DialogActions>
</Dialog>
Вот onToggle() и состояние
state = {
innerTableWindowOpen: false
};
onToggle = () => {
this.setState({
innerTableWindowOpen: !this.state.innerTableWindowOpen
});
}
Буду признателен за любую идею исправить это с помощью <Dialog> или <Modal> или даже чего-то подобного.
Идея состоит в том, чтобы сделать короткий предварительный просмотр того, что находится в корзине, прежде чем выбрать один.
Спасибо!