github.com/muhammedhassanm/blockchain@v0.0.0-20200120143007-697261defd4d/build-blockchain-insurance-app-master/web/src/block-explorer/components/Transaction.js (about)

     1  'use strict';
     2  
     3  import React, { Props } from 'react';
     4  import PropTypes from 'prop-types';
     5  import { injectIntl, intlShape } from 'react-intl';
     6  import moment from 'moment';
     7  import 'moment/locale/de';
     8  
     9  const calcDate = (timestamp) => {
    10    return new Date(timestamp);
    11  };
    12  
    13  class Transaction extends React.Component {
    14  
    15    static get propTypes() {
    16      return {
    17        intl: intlShape.isRequired,
    18        data: PropTypes.shape({
    19          type: PropTypes.string.isRequired,
    20          timestamp: PropTypes.string.isRequired
    21        })
    22      };
    23    }
    24  
    25    constructor(props) {
    26      super(props);
    27  
    28      this.state = {
    29        overflown: false,
    30      };
    31    }
    32  
    33    componentDidMount() {
    34      setTimeout(() => {
    35        const transTypeElem = this.refs.transTypeElem;
    36        const overflown = transTypeElem.clientWidth < transTypeElem.scrollWidth;
    37        if (overflown) {
    38          transTypeElem.style.setProperty(
    39            '--scroll-width', transTypeElem.scrollWidth + 'px');
    40          this.setState({ overflown });
    41        }
    42      }, navigator.userAgent.indexOf('Safari') > -1 ? 1000 : 0);
    43      // Safari needs some time, to avoid bugs
    44    }
    45  
    46    render() {
    47      const { intl, data: { timestamp, type } } = this.props;
    48      const date = calcDate(timestamp);
    49      const formattedDate = moment(date).format('L', intl.locale);
    50      return (
    51        <div className='transaction'>
    52          <div className='trans-date'>{formattedDate}</div>
    53          &nbsp;
    54          <div className='trans-type' ref='transTypeElem'>
    55            <div className={this.state.overflown ? 'overflown' : ''}>
    56              <code>{type}</code>
    57            </div>
    58          </div>
    59        </div>
    60      );
    61    }
    62  }
    63  
    64  export default injectIntl(Transaction);