Свернуть таблицу изменения макета - PullRequest
Новая
       4

Свернуть таблицу изменения макета

0 голосов
/ 20 мая 2019

Я использую Material-UI для создания таблицы, которая сворачивается после добавления более 3-х строк, но при открытии свернутой таблицы она меняет свой макет.

[введите описание изображения здесь] [1]

Создание строк 

    createRowFrame=(array,num)=>{
            return array.map(frameObject=>{
                return(
                    <MuiThemeProvider theme={theme}>
                        <TableRow key={frameObject.frame.id} style={num===2?{backgroundColor:"#F1D3D3"}:{}}>
                            <TableCell>1</TableCell>
                            <TableCell>{frameObject.frame.name}{frameObject.hipsterFrame !== null && (" / "+frameObject.hipsterFrame.name)}</TableCell>
                            <TableCell><DeleteIcon className={this.props.classes.icon} onClick={()=>{this.props.removeOneFrame(frameObject.frame.id)}}/></TableCell>
                        </TableRow>
                    </MuiThemeProvider>
                )
            })
        }

Создание таблицы свертывания (условно) 

        createTablePart=(frameArray, brand)=>{
            var remainingCredit = this.props.credits[brand+"Credit"] - frameArray.length
            var allowedFrames
            var overFrames
            if(remainingCredit<0){
                allowedFrames = frameArray.slice(0,this.props.credits[brand+"Credit"])
                overFrames = frameArray.slice(this.props.credits[brand+"Credit"], frameArray.length)
            } else {
                allowedFrames=frameArray
                overFrames=[]
            }
            console.log(allowedFrames)
            console.log(overFrames)
            if(frameArray.length>3){
                const {classes, t} = this.props;
                return(
                    <React.Fragment>
                        <MuiThemeProvider theme={theme}>
                            <TableRow onClick={()=>this.handleClickOpen(brand+"Open",this.state[brand+"Open"])}>
                                <TableCell>{frameArray.length}</TableCell>
                                <TableCell>{brand.toUpperCase()}</TableCell>
                                <TableCell>{this.state[brand+"Open"] ? <ExpandLess /> : <ExpandMore />}</TableCell>
                            </TableRow>
                            <Collapse in={this.state[brand+"Open"]} timeout="auto" unmountOnExit>
                                <div className={classes.collapsedTable}>
                                    {this.createRowFrame(allowedFrames,1)}
                                    {this.createRowFrame(overFrames,2)}
                                </div>
                            </Collapse>
                        </MuiThemeProvider>
                    </React.Fragment>
                )
            } else {
                return (
                <React.Fragment>
                    {this.createRowFrame(allowedFrames,1)}
                    {this.createRowFrame(overFrames,2)}
                </React.Fragment>
                )
            }
        }

Я ожидал, что таблица просто рухнет, но все еще подчиняется столбцам.

...