<commit_before>import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { Components } from 'meteor/vulcan:core';
import { registerComponent } from 'meteor/vulcan:core';
import { withStyles } from '@material-ui/core/styles';
import classNames from 'classnames';

const styles = theme => ({
    formSection: {
      fontFamily: theme.typography.fontFamily,
      border: `solid 1px ${theme.palette.grey[400]}`,
      marginBottom: theme.spacing.unit,
    },
    formSectionFields: {
      paddingRight: theme.spacing.unit*2,
      paddingLeft: theme.spacing.unit*2,
    },
    formSectionBody: {
      paddingTop: theme.spacing.unit,
      paddingBottom: theme.spacing.unit,
      borderTop: `solid 1px ${theme.palette.grey[300]}`,
    },
    formSectionHeading: {
      display:"flex",
      justifyContent: "space-between",
      paddingTop: theme.spacing.unit*2,
      paddingRight: theme.spacing.unit*2,
      paddingBottom: theme.spacing.unit,
      paddingLeft: theme.spacing.unit*2,
    },
    flex: {
      display: "flex",
      alignItems: "flex-start",
      flexWrap: "wrap"
    }
})

class FormGroup extends PureComponent {
  constructor(props) {
    super(props);
    this.toggle = this.toggle.bind(this);
    this.renderHeading = this.renderHeading.bind(this);
    this.state = {
      collapsed: props.startCollapsed || false,
    };
  }

  toggle() {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  }

  renderHeading() {
    const { classes, label } = this.props
    return (
      <div className={classes.formSectionHeading} onClick={this.toggle}>
        <h3 className="form-section-heading-title">{ label }</h3>
        <span>
          {this.state.collapsed ? <Components.IconRight height={16} width={16}/> : <Components.IconDown height={16} width={16} />}
        </span>
      </div>
    );
  }

  // if at least one of the fields in the group has an error, the group as a whole has an error
  hasErrors = () => _.some(this.props.fields, field => {
    return !!this.props.errors.filter(error => error.path === field.path).length
  });

  render() {
    const { classes, name, defaultStyle, flexStyle} = this.props
    const groupStyling = !(name == 'default' || defaultStyle)
    return (
      <div className={groupStyling && classes.formSection}>
        { groupStyling && this.renderHeading()}
        { (!this.state.collapsed || this.hasErrors()) &&
          <div className={classNames(classes.formSectionFields, {[classes.formSectionBody]: groupStyling, [classes.flex]: flexStyle})}
            >
            {this.props.fields.map(field => (
              <Components.FormComponent
                key={field.name}
                {...field}
                errors={this.props.errors}
                throwError={this.props.throwError}
                currentValues={this.props.currentValues}
                updateCurrentValues={this.props.updateCurrentValues}
                deletedValues={this.props.deletedValues}
                addToDeletedValues={this.props.addToDeletedValues}
                clearFieldErrors={this.props.clearFieldErrors}
                formType={this.props.formType}
                currentUser={this.props.currentUser}
              />
            ))}
          </div>
        }
      </div>
    );
  }
}

FormGroup.propTypes = {
  name: PropTypes.string,
  label: PropTypes.string,<commit_msg>Fix a console warning that was appearing on LW post pages<commit_after>import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { Components } from 'meteor/vulcan:core';
import { registerComponent } from 'meteor/vulcan:core';
import { withStyles } from '@material-ui/core/styles';
import classNames from 'classnames';

const styles = theme => ({
    formSection: {
      fontFamily: theme.typography.fontFamily,
      border: `solid 1px ${theme.palette.grey[400]}`,
      marginBottom: theme.spacing.unit,
    },
    formSectionFields: {
      paddingRight: theme.spacing.unit*2,
      paddingLeft: theme.spacing.unit*2,
    },
    formSectionBody: {
      paddingTop: theme.spacing.unit,
      paddingBottom: theme.spacing.unit,
      borderTop: `solid 1px ${theme.palette.grey[300]}`,
    },
    formSectionHeading: {
      display:"flex",
      justifyContent: "space-between",
      paddingTop: theme.spacing.unit*2,
      paddingRight: theme.spacing.unit*2,
      paddingBottom: theme.spacing.unit,
      paddingLeft: theme.spacing.unit*2,
    },
    flex: {
      display: "flex",
      alignItems: "flex-start",
      flexWrap: "wrap"
    }
})

class FormGroup extends PureComponent {
  constructor(props) {
    super(props);
    this.toggle = this.toggle.bind(this);
    this.renderHeading = this.renderHeading.bind(this);
    this.state = {
      collapsed: props.startCollapsed || false,
    };
  }

  toggle() {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  }

  renderHeading() {
    const { classes, label } = this.props
    return (
      <div className={classes.formSectionHeading} onClick={this.toggle}>
        <h3 className="form-section-heading-title">{ label }</h3>
        <span>
          {this.state.collapsed ? <Components.IconRight height={16} width={16}/> : <Components.IconDown height={16} width={16} />}
        </span>
      </div>
    );
  }

  // if at least one of the fields in the group has an error, the group as a whole has an error
  hasErrors = () => _.some(this.props.fields, field => {
    return !!this.props.errors.filter(error => error.path === field.path).length
  });

  render() {
    const { classes, name, defaultStyle, flexStyle} = this.props
    const groupStyling = !(name == 'default' || defaultStyle)
    return (
      <div className={groupStyling ? classes.formSection : undefined}>
        { groupStyling && this.renderHeading()}
        { (!this.state.collapsed || this.hasErrors()) &&
          <div className={classNames(classes.formSectionFields, {[classes.formSectionBody]: groupStyling, [classes.flex]: flexStyle})}
            >
            {this.props.fields.map(field => (
              <Components.FormComponent
                key={field.name}
                {...field}
                errors={this.props.errors}
                throwError={this.props.throwError}
                currentValues={this.props.currentValues}
                updateCurrentValues={this.props.updateCurrentValues}
                deletedValues={this.props.deletedValues}
                addToDeletedValues={this.props.addToDeletedValues}
                clearFieldErrors={this.props.clearFieldErrors}
                formType={this.props.formType}
                currentUser={this.props.currentUser}
              />
            ))}
          </div>
        }
      </div>
    );
  }
}

FormGroup.propTypes = {
  name: PropTypes.string,
  label: PropTypes.string,
{'fraction_non_alphanumeric': 0.13414811581550998, 'fraction_numerical': 0.006692856103593773, 'mean_word_length': 2.5561303673047076, 'pattern_counts': {'":': 0, '<': 29, '<?xml version=': 0, '>': 39, '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': '4620874', 'n_tokens_mistral': 2060, 'n_tokens_neox': 1998, 'n_words': 380}