@crpt/react-utils/es/hocs/logLifecycle.js

A useful kit for daily using

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

/**
 * Big-ups: https://reactjs.org/docs/higher-order-components.html#dont-mutate-the-original-component-use-composition
 */
import React, { Component } from 'react';

import { getDisplayName } from '../lib';

// Big-ups: https://htmlcolorcodes.com/color-names/
var GREEN = '#3CB371'; // medium-spring-green
var BLUE = '#00BFFF'; // deepsky-blue

var COLORS = [GREEN, BLUE];

var logLifecycle = function logLifecycle(WrappedComponent) {
  var _class, _temp2;

  var displayName = getDisplayName(WrappedComponent);

  var LogLifecycle = (_temp2 = _class = function (_Component) {
    _inherits(LogLifecycle, _Component);

    function LogLifecycle() {
      var _temp, _this, _ret;

      _classCallCheck(this, LogLifecycle);

      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
        args[_key] = arguments[_key];
      }

      return _ret = (_temp = (_this = _possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.logMethod = function (methodName) {
        var methodData = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};

        console.group('%c' + methodName + ' %c@ ' + displayName, 'font-size: 16px; font-weight: lighter;', 'font-size: 12px; font-weight: lighter; color: #FFA500;');
        Object.keys(methodData).forEach(function (key, idx) {
          console.log('%c' + key + ':', 'color: ' + COLORS[idx] + '; font-size: 12px;', methodData[key]);
        });
        console.groupEnd();
      }, _temp), _possibleConstructorReturn(_this, _ret);
    }

    LogLifecycle.prototype.componentDidMount = function componentDidMount() {
      this.logMethod('componentDidMount', {
        'Current props': this.props
      });
    };

    LogLifecycle.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
      this.logMethod('componentWillReceiveProps', {
        'Current props': this.props,
        'Next props': nextProps
      });
    };

    LogLifecycle.prototype.componentWillUpdate = function componentWillUpdate(nextProps, nextState) {
      this.logMethod('componentWillUpdate', {
        'Next props': nextProps,
        'Next state': nextState
      });
    };

    LogLifecycle.prototype.componentDidUpdate = function componentDidUpdate(prevProps) {
      this.logMethod('componentDidUpdate', {
        'Prev props': prevProps,
        'Current props': this.props
      });
    };

    /* eslint-disable no-console */


    /* eslint-enable no-console */

    LogLifecycle.prototype.render = function render() {
      return React.createElement(WrappedComponent, this.props);
    };

    return LogLifecycle;
  }(Component), _class.WrappedComponent = WrappedComponent, _class.displayName = 'logLifecycle(' + displayName + ')', _temp2);


  return LogLifecycle;
};

export default logLifecycle;