<commit_before>React = require 'react'
PropTypes = React.PropTypes
componentWidthMixin = require 'react-component-width-mixin'

calculateLayout = require './calculate_layout'

module.exports = React.createClass
  displayName: "ComponentGallery"
  mixins: [componentWidthMixin]

  propTypes:
    children: PropTypes.any.isRequired
    disableServerRender: PropTypes.bool
    margin: PropTypes.number
    targetWidth: PropTypes.number
    widthHeightRatio: PropTypes.number
    disableServerRender: PropTypes.bool

  getDefaultProps: ->
    margin: 10
    targetWidth: 200
    widthHeightRatio: 1
    disableServerRender: false

  render: ->
    # If we don't know the component width, there's nothing we can do.
    if @state.componentWidth is 0
      <div />
    # If we're server rendering and the user has disabled server rendering.
    else if not @isMounted() and @props.disableServerRender
      <div />
    else
      [componentWidth, componentsPerRow] = calculateLayout(@props, @state)
      return (
        <div className="component-gallery #{@props.className}" style={{overflow: "hidden"}}>
          {React.Children.map(@props.children, (child, i) =>
            if componentsPerRow is 1
              marginRight = 0
            else if i isnt 0 and (i + 1) % componentsPerRow is 0
              marginRight = 0
            else
              marginRight = @props.margin

            return (
              React.DOM.div({
                className: "component-wrapper"
                style: {
                  width: "#{componentWidth}px"
                  height: "#{componentWidth*@props.widthHeightRatio}px"
                  display: "inline-block"
                  marginRight: "#{marginRight}px"
                  marginBottom: "#{@props.margin}px"
                  overflow: "hidden"
                  position: "relative"
                  "verticalAlign": "top"
                }
              }, child)
            )
          )}
        </div>
      )<commit_msg>Add option to remove marginBottom on last row<commit_after>React = require 'react'
PropTypes = React.PropTypes
componentWidthMixin = require 'react-component-width-mixin'

calculateLayout = require './calculate_layout'

module.exports = React.createClass
  displayName: "ComponentGallery"
  mixins: [componentWidthMixin]

  propTypes:
    children: PropTypes.any.isRequired
    disableServerRender: PropTypes.bool
    margin: PropTypes.number
    noMarginBottomOnLastRow: PropTypes.bool
    targetWidth: PropTypes.number
    widthHeightRatio: PropTypes.number
    disableServerRender: PropTypes.bool

  getDefaultProps: ->
    margin: 10
    noMarginBottomOnLastRow: false
    targetWidth: 200
    widthHeightRatio: 1
    disableServerRender: false

  render: ->
    # If we don't know the component width, there's nothing we can do.
    if @state.componentWidth is 0
      <div />
    # If we're server rendering and the user has disabled server rendering.
    else if not @isMounted() and @props.disableServerRender
      <div />
    else
      [componentWidth, componentsPerRow] = calculateLayout(@props, @state)
      return (
        <div className="component-gallery #{@props.className}" style={{overflow: "hidden"}}>
          {React.Children.map(@props.children, (child, i) =>
            marginBottom = @props.margin

            if @props.noMarginBottomOnLastRow
              # Is this component on the last row?
              numRows = Math.ceil(React.Children.count(@props.children) / componentsPerRow)
              if (i + 1) > ((numRows - 1) * componentsPerRow)
                marginBottom = 0

            if componentsPerRow is 1
              marginRight = 0
            else if i isnt 0 and (i + 1) % componentsPerRow is 0
              marginRight = 0
            else
              marginRight = @props.margin

            return (
              React.DOM.div({
                className: "component-wrapper"
                style: {
                  width: "#{componentWidth}px"
                  height: "#{componentWidth*@props.widthHeightRatio}px"
                  display: "inline-block"
                  marginRight: "#{marginRight}px"
                  marginBottom: "#{marginBottom}px"
                  overflow: "hidden"
                  position: "relative"
                  "verticalAlign": "top"
                }
              }, child)
            )
          )}
        </div>
      )
{'fraction_non_alphanumeric': 0.0923285811269518, 'fraction_numerical': 0.006562570717356868, 'mean_word_length': 2.025325119780972, 'pattern_counts': {'":': 2, '<': 11, '<?xml version=': 0, '>': 18, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '602325', 'n_tokens_mistral': 1193, 'n_tokens_neox': 1144, 'n_words': 301}