react combat: make a container assembly adaptive layout matrix Thought

Demand is so.

• There is a need to show a small area of ​​several square type element
• Relatively small number of display time in a row
• When comparing the number of display two rows

Grid with bad because when the number is odd rows which is necessary when two elements are centered obediently.

With flex, then write directly you need to write a lot of judgment, because of the different number of lines when the page structure will be different.

So, I thought of using a two-dimensional array (matrix) to indicate at what time thinking of how to display.

 

The code.

// 波浪效果测试

import React from 'react'

import Styles from './index.less'

import Wave from '../wave/index.js'
import { Flex } from 'antd-mobile'

class WaveContainer extends React.Component {
  constructor(props){
    super(props)
    this.state = {
    }
  }

  render(){
    console.log(this.props.dataBar)

    const baseFlex = {
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center'
    }
    const theStyle = {
      main:{
        ...baseFlex,
        width:'17.552vw',
        height:'10.521vw',
        color:"#fff"
      },
      tem:{
        ...baseFlex,
        flex:"auto",
        color:'#fff'
      },
      shellA:{
        ...baseFlex,
        width:'100%',
        height:'100%'
      },
      shellB:{
        ...baseFlex,
        width:'100%',
        height:'50%'
      }
    }

    const dataBar = this.props.dataBar

    const Container = ((dataBar) => {

      const flexMatrix = [
        [0,0],
        [1,0],
        [2,0],
        [3,0],
        [2,2],
        [3,2],
        [3,3],
        [4,3],
        [4,4],
        [5,4],
        [5,5],
        [6,5],
        [6,6]
      ]

      const sData = dataBar.data.sData
      const length = sData.length

      const matrix = flexMatrix[length] ? flexMatrix[length] : flexMatrix[12]

      if (matrix[0] === 0) {
        return ""
      }

      let temShell, temA, temB 

      temA = sData.slice(0, matrix[0]).map((item, index) => 
        <div style={theStyle.tem} key={index.toString()}> <Wave data={item} /> </div>
      );

      if (matrix[1] === 0) {
        temB = ""
      } else {
        temB = sData.slice(matrix[0], (matrix[0] + matrix[1])).map((item, index) => 
          <div style={theStyle.tem} key={index.toString()}> <Wave data={item} /> </div>
        );
      }

      if (matrix[1] === 0) {
        temShell = <div style={theStyle.shellA} > {temA} </div>
      } else {
        temShell = [0,0].map((item, index) => 
          <div style={theStyle.shellB} key={"temShell" + index.toString()}> {index === 0 ? temA : temB} </div>
        );

        theStyle.main.flexWrap = "wrap"
      }

      console.log(temShell)
      
      return temShell
    })(dataBar)

    return (
      <div style={theStyle.main}>
        {/* <Wave /> */}
        { Container }
      </div>
    );
  }
}

export default WaveContainer

 

Explain a little.

• Expand the operator to make a more compact style.
• flexMatrix  is recorded matrix data.
• temA, temB is put container line elements.
• temShell is put temA, temB container.
• theStyle.main.flexWrap = "wrap" so that elements can be properly wrap.
• The action is divided slice data objects, rendering those line only one line of data required.
• [0,0] is needed because two rows, so with an array of two elements, with the JSX map output.

 

Then the code page from the incoming data.

render(){
    const dataBar = {
         data:{
            sData:[
              { name: 'a', data: 55, color:'rgb(79,239,223)' },
              { name: 'b', data: 5, color:'rgb(79,239,223)'},
              { name: 'c', data: 36, color:'rgb(79,239,223)'},
              { name: 'd', data: 476, color:'rgb(87,207,30)'},
              { name: 'e', data: 226, color:'rgb(79,239,223)'},
              { name: 'f', data: 273, color:'rgb(251,211,36)'}
            ]
          }
    }

    return (
      <div className={Styles.main}>
        <WaveContainer dataBar={dataBar} />
      </div>
    );
  }

In fact, and he had no relationship. Because the object is passed directly to the inside of a more elemental.

 

the above.