<commit_before>// (C) Copyright 2014-2015 Hewlett Packard Enterprise Development LP

import React, { Component, PropTypes } from 'react';
import { FormattedDate } from 'react-intl';
import merge from 'lodash/object/merge';
import pick from 'lodash/object/pick';
import keys from 'lodash/object/keys';
import Box from './Box';
import Meter from './Meter';

import StatusIcon from './icons/Status';

var CLASS_ROOT = "notification";

export default class Notification extends Component {
  render() {
    var classes = [CLASS_ROOT];
    var other = pick(this.props, keys(Box.propTypes));
    classes.push(CLASS_ROOT + "--" + this.props.status.toLowerCase());
    if (this.props.className) {
      classes.push(this.props.className);
    }

    var status;
    if (this.props.status) {
      status = (
        <StatusIcon className={CLASS_ROOT + "__status"}
        value={this.props.status} small={true} />
      );
    }

    var state;
    if (this.props.state) {
      state = <div className={CLASS_ROOT + "__state"}>{this.props.state}</div>;
    }

    var progress;
    if (this.props.hasOwnProperty('percentComplete')) {
      progress = (
        <Meter units="%"
          series={[{value: this.props.percentComplete, label: '', colorIndex: 'light-1'}]}
          size="large" />
      );
    }

    var timestamp;
    if (this.props.timestamp) {
      var timestampFormatted = (
        <FormattedDate value={this.props.timestamp}
          weekday="long"
          day="numeric"
          month="long"
          year="numeric"
          hour="numeric"
          minute="numeric"
          second="numeric" />
      );

      timestamp = (
        <div className={CLASS_ROOT + "__timestamp"}>
          {timestampFormatted}
        </div>
      );
    }

    return (
      <Box className={classes.join(' ')} {...other}>
        <Box direction="row" responsive={false}>
          {status}
          <span className={CLASS_ROOT + "__message"}>
            {this.props.message}
          </span>
        </Box>
        {timestamp}
        {state}
        {progress}
        {this.props.children}
      </Box>
    );
  }
}

Notification.defaultProps = {
  flush: true,
  status: 'unknown',
  pad: 'medium'
};

Notification.propTypes = merge({
  message: PropTypes.string.isRequired,
  percentComplete: PropTypes.number,
  state: PropTypes.string,
  status: PropTypes.string,
  timestamp: PropTypes.object // Date
}, Box.propTypes);
<commit_msg>Fixed an issue with Notification and percentComplete=.<commit_after>// (C) Copyright 2014-2015 Hewlett Packard Enterprise Development LP

import React, { Component, PropTypes } from 'react';
import { FormattedDate } from 'react-intl';
import merge from 'lodash/object/merge';
import pick from 'lodash/object/pick';
import keys from 'lodash/object/keys';
import Box from './Box';
import Meter from './Meter';

import StatusIcon from './icons/Status';

var CLASS_ROOT = "notification";

export default class Notification extends Component {
  render() {
    var classes = [CLASS_ROOT];
    var other = pick(this.props, keys(Box.propTypes));
    classes.push(CLASS_ROOT + "--" + this.props.status.toLowerCase());
    if (this.props.className) {
      classes.push(this.props.className);
    }

    var status;
    if (this.props.status) {
      status = (
        <StatusIcon className={CLASS_ROOT + "__status"}
        value={this.props.status} small={true} />
      );
    }

    var state;
    if (this.props.state) {
      state = <div className={CLASS_ROOT + "__state"}>{this.props.state}</div>;
    }

    var progress;
    if (this.props.percentComplete || 0 === this.props.percentComplete) {
      progress = (
        <Meter units="%"
          series={[{value: this.props.percentComplete, label: '', colorIndex: 'light-1'}]}
          size="large" />
      );
    }

    var timestamp;
    if (this.props.timestamp) {
      var timestampFormatted = (
        <FormattedDate value={this.props.timestamp}
          weekday="long"
          day="numeric"
          month="long"
          year="numeric"
          hour="numeric"
          minute="numeric"
          second="numeric" />
      );

      timestamp = (
        <div className={CLASS_ROOT + "__timestamp"}>
          {timestampFormatted}
        </div>
      );
    }

    return (
      <Box className={classes.join(' ')} {...other}>
        <Box direction="row" responsive={false}>
          {status}
          <span className={CLASS_ROOT + "__message"}>
            {this.props.message}
          </span>
        </Box>
        {timestamp}
        {state}
        {progress}
        {this.props.children}
      </Box>
    );
  }
}

Notification.defaultProps = {
  flush: true,
  status: 'unknown',
  pad: 'medium'
};

Notification.propTypes = merge({
  message: PropTypes.string.isRequired,
  percentComplete: PropTypes.number,
  state: PropTypes.string,
  status: PropTypes.string,
  timestamp: PropTypes.object // Date
}, Box.propTypes);

{'fraction_non_alphanumeric': 0.14383699818438572, 'fraction_numerical': 0.003832963485979423, 'mean_word_length': 2.491549295774648, 'pattern_counts': {'":': 0, '<': 29, '<?xml version=': 0, '>': 29, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4420124', 'n_tokens_mistral': 1471, 'n_tokens_neox': 1451, 'n_words': 322}