docusaurus/lib/core/GridBlock.js

/**
 * Copyright (c) 2017-present, Facebook, Inc.
 * All rights reserved.
 *
 * This source code is licensed under the BSD-style license found in the
 * LICENSE file in the root directory of this source tree. An additional grant
 * of patent rights can be found in the PATENTS file in the same directory.
 */

const React = require("react");
const classNames = require("classnames");

const Marked = require("./Marked.js");

class GridBlock extends React.Component {
  renderBlock(block) {
    const blockClasses = classNames("blockElement", this.props.className, {
      alignCenter: this.props.align === "center",
      alignRight: this.props.align === "right",
      fourByGridBlock: this.props.layout === "fourColumn",
      imageAlignBottom: block.image && block.imageAlign === "bottom",
      imageAlignSide:
        block.image &&
        (block.imageAlign === "left" || block.imageAlign === "right"),
      imageAlignTop: block.image && block.imageAlign === "top",
      threeByGridBlock: this.props.layout === "threeColumn",
      twoByGridBlock: this.props.layout === "twoColumn"
    });

    const topLeftImage =
      (block.imageAlign === "top" || block.imageAlign === "left") &&
      this.renderBlockImage(block.image);

    const bottomRightImage =
      (block.imageAlign === "bottom" || block.imageAlign === "right") &&
      this.renderBlockImage(block.image);

    return (
      <div className={blockClasses} key={block.title}>
        {topLeftImage}
        <div className="blockContent">
          {this.renderBlockTitle(block.title)}
          <Marked>
            {block.content}
          </Marked>
        </div>
        {bottomRightImage}
      </div>
    );
  }

  renderBlockImage(image) {
    if (image) {
      return (
        <div className="blockImage">
          <img src={image} />
        </div>
      );
    } else {
      return null;
    }
  }

  renderBlockTitle(title) {
    if (title) {
      return (
        <h2>
          <Marked>{title}</Marked>
        </h2>
      );
    } else {
      return null;
    }
  }

  render() {
    return (
      <div className="gridBlock">
        {this.props.contents.map(this.renderBlock, this)}
      </div>
    );
  }
}

GridBlock.defaultProps = {
  align: "left",
  contents: [],
  imagealign: "top",
  layout: "twoColumn"
};

module.exports = GridBlock;