src/pages/ecology/index.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import enquire from 'enquire.js';
import Language from '../../components/language';
import Header from '../../components/header';
import Footer from '../../components/footer';
import ecologyConfig from '../../../site_config/ecology';
import Memo from './memo';
import Card from './card';
import ImgItem from './img-item';
import { getLink } from '../../../utils';
import './index.scss';

class Ecology extends Language {
  constructor(props) {
    super(props);
    this.state = {
      vertical: true,
    };
  }

  componentDidMount() {
    enquire.register('screen and (max-width: 640px)', {
      match: () => {
        this.setState({
          vertical: false,
        });
      },
      unmatch: () => {
        this.setState({
          vertical: true,
        });
      },
      // Keep a empty destory to avoid triggering unmatch when unregister
      destroy: () => {},
    });
  }

  render() {
    const language = this.getLanguage();
    const dataSource = ecologyConfig[language];
    return (
      <div className="ecology-page">
        <Header
          type="normal"
          currentKey="ecology"
          logo={getLink('/img/dubbo_colorful.png')}
          language={language}
          onLanguageChange={this.onLanguageChange}
        />
        <section className="eco-container">
          <h4 className="eco-title">{dataSource.title}</h4>
          <p className="eco-desc">{dataSource.desc}</p>
          <div className="eco-body">
            <div className="left-part">
              {
                dataSource.body.slice(0, -1).map(d => (
                  <Memo key={d.title} title={d.title} bgColor={d.bgColor}>
                    {
                      d.children.map(sd => (
                        <Card key={sd.title} title={sd.title}>
                          {
                            sd.children.map(ssd => (
                              <ImgItem key={ssd.name} dataSource={ssd} />
                            ))
                          }
                        </Card>
                      ))
                    }
                  </Memo>
                ))
              }
            </div>
            {
              dataSource.body.length > 1 ?
              <div className="right-part">
                {
                  dataSource.body.slice(-1).map(d => (
                    <Memo key={d.title} vertical={this.state.vertical} title={d.title} bgColor={d.bgColor}>
                      {
                        d.children.map(sd => (
                          <Card key={sd.title} title={sd.title}>
                            {
                              sd.children.map(ssd => (
                                <ImgItem key={ssd.name} dataSource={ssd} />
                              ))
                            }
                          </Card>
                        ))
                      }
                    </Memo>
                  ))
                }
              </div>
              : null
            }
          </div>
        </section>
        <Footer logo={getLink('/img/dubbo_gray.png')} />
      </div>
    );
  }
}

document.getElementById('root') && ReactDOM.render(<Ecology />, document.getElementById('root'));

export default Ecology;