content: import React from 'react';
  import PropTypes from 'prop-types';
  import Message from './Message';
  import { Strings } from '../model/Strings';
  import styles from '../styles/comments.scss';
  import { TransitionMotion, spring } from 'react-motion';
  
  const willLeave = () => ({
      flex: spring(0)
  });
  
  const willEnter = () => ({
      flex: 0
  });
  
  class OrderComments extends React.Component {
      constructor(props) {
          super(props);
      }
      render() {
          return (
              <TransitionMotion
              defaultStyles={[
                  { key: 'one', style: { flex: 0 } }
              ]}
              styles={[
                  { key: 'one', style: { flex: spring(100) } }
              ]}
              willEnter={willEnter}
              willLeave={willLeave}
              >
              {(intStyles) => (
                  <div style={{ height: '100%', overflowY: 'auto' }}>
                      {intStyles.map(({ key, style }) => (
                          <div id={styles.messages} key={key} style={{flexBasis: style.flex + '%'}}>
                              <div id={styles.message_container}>
                                  <div id={styles.message_pane_scroller}>
                                      {this.props.comments.map(item =>
                                          <Message key={item.id} avatar={Strings.users.userById[item.ownerId].avatarUrl} content={item.comment} timestamp={item.timestamp} owner={Strings.users.userById[item.ownerId].name} team={Strings.users.userById[item.ownerId].team} />
                                      )}
                                  </div>
                              </div>
                          </div>
                      ))}
                  </div>
              )}
              </TransitionMotion>
          );
      }
  }
  
  OrderComments.propTypes = {
      comments: PropTypes.array
  };
  
  export default OrderComments;
  