@r3l/app/lib/modules/stats/mobile/stats.component.js

Relevant App

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _typeof = require("@babel/runtime/helpers/typeof");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _react = _interopRequireWildcard(require("react"));

var _reactNativeWeb = require("react-native-web");

var _propTypes = _interopRequireDefault(require("prop-types"));

var _reactRedux = require("react-redux");

var _redux = require("redux");

var _global = require("../../../styles/global");

var _percent = _interopRequireDefault(require("./percent.component"));

var _utils = require("../../../utils");

var tooltipActions = _interopRequireWildcard(require("../../tooltip/tooltip.actions"));

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

var styles;

var Stats = /*#__PURE__*/function (_Component) {
  (0, _inherits2.default)(Stats, _Component);

  var _super = _createSuper(Stats);

  function Stats(props, context) {
    var _this;

    (0, _classCallCheck2.default)(this, Stats);
    _this = _super.call(this, props, context);
    _this.initTooltips = _this.initTooltips.bind((0, _assertThisInitialized2.default)(_this));
    _this.toggleTooltip = _this.toggleTooltip.bind((0, _assertThisInitialized2.default)(_this));
    _this.tooltipParent = {};
    return _this;
  }

  (0, _createClass2.default)(Stats, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      var _this2 = this;

      if (this.props.type === 'nav' && this.props.discover) {
        this.tooltipParent.topics = this.props.parent.title;
        setTimeout(function () {
          return _this2.initTooltips();
        }, 1000);
      }
    }
  }, {
    key: "initTooltips",
    value: function initTooltips() {
      var _this3 = this;

      ['relevance', 'coin', 'topics', 'earnings'].forEach(function (name) {
        _this3.props.actions.setTooltipData({
          name: name,
          toggle: function toggle() {
            return _this3.toggleTooltip(name);
          }
        });
      });
    }
  }, {
    key: "toggleTooltip",
    value: function toggleTooltip(name) {
      var _this4 = this;

      // TODO test the onboarding here — might need this
      // console.log('toggle toolitp ', name);
      // if (
      //   (name === 'relevance' || name === 'coin') &&
      //   // this.props.currentView !== 'discover'
      // ) {
      //   return;
      // }
      if (this.props.type !== 'nav') return;
      if (!this.tooltipParent[name]) return;
      this.tooltipParent[name].measureInWindow(function (x, y, w, h) {
        var parent = {
          x: x,
          y: y,
          w: w,
          h: h
        };
        if (x + y + w + h === 0) return;

        _this4.props.actions.setTooltipData({
          name: name,
          parent: parent
        });

        _this4.props.actions.showTooltip(name);
      });
    }
  }, {
    key: "render",
    value: function render() {
      var _this5 = this,
          _entity$relevance;

      var type = this.props.type;
      var entity = this.props.entity || this.props.auth.user;
      if (!entity) return null;
      var statsStyle = [{
        fontSize: 17,
        lineHeight: 17,
        height: 17
      }, styles.bebas, styles.quarterLetterSpacing];
      var iconStyle = [];
      var coinStyle = [];

      if (this.props.size === 'small' || _global.smallScreen && type === 'nav') {
        statsStyle = [{
          fontSize: 15,
          lineHeight: 15
        }, styles.bebas, styles.quarterLetterSpacing];
        iconStyle = [{
          width: 15,
          height: 13
        }];
        coinStyle = [{
          width: 15,
          height: 15
        }];
      }

      if (this.props.size === 'tiny') {
        statsStyle = [{
          fontSize: 13,
          lineHeight: 13
        }, styles.bebas, styles.quarterLetterSpacing];
        iconStyle = [{
          width: 14,
          height: 14
        }]; // coinStyle = [{ width: 18, height: 15, marginBottom: -6 }];
      }

      var value = /*#__PURE__*/_react.default.createElement(_reactNativeWeb.TouchableOpacity, {
        ref: function ref(c) {
          return _this5.tooltipParent.coin = c;
        },
        onPress: function onPress() {
          return _this5.toggleTooltip('coin');
        },
        style: styles.statInner
      }, /*#__PURE__*/_react.default.createElement(_reactNativeWeb.Image, {
        resizeMode: 'contain',
        style: [styles.coin].concat((0, _toConsumableArray2.default)(coinStyle)),
        source: require("../../../../public/img/relevantcoin.png")
      }), /*#__PURE__*/_react.default.createElement(_reactNativeWeb.Text, {
        style: [this.props.textStyle, statsStyle, styles.darkGrey]
      }, _utils.numbers.abbreviateNumber(entity.value || entity.balance + entity.tokenBalance || 0)));

      var percent = /*#__PURE__*/_react.default.createElement(_reactNativeWeb.View, {
        style: styles.statInner
      }, /*#__PURE__*/_react.default.createElement(_percent.default, {
        fontSize: 17,
        user: entity
      })); // This is in order to display topic relevance correctly


      entity.relevance = entity.relevance || {};
      var rank = Math.max(0, entity === null || entity === void 0 ? void 0 : (_entity$relevance = entity.relevance) === null || _entity$relevance === void 0 ? void 0 : _entity$relevance.reputation);

      var relevance = /*#__PURE__*/_react.default.createElement(_reactNativeWeb.TouchableOpacity, {
        ref: function ref(c) {
          return _this5.tooltipParent.relevance = c;
        },
        onPress: function onPress() {
          return _this5.toggleTooltip('relevance');
        },
        style: styles.statInner
      }, /*#__PURE__*/_react.default.createElement(_reactNativeWeb.Image, {
        resizeMode: 'contain',
        style: [styles.r].concat((0, _toConsumableArray2.default)(iconStyle)),
        source: require("../../../../public/img/r.png")
      }), /*#__PURE__*/_react.default.createElement(_reactNativeWeb.Text, {
        style: [this.props.textStyle, statsStyle, styles.darkGrey]
      }, _utils.numbers.abbreviateNumber(Number(rank.toFixed(2)))));

      var getLeft = function getLeft() {
        if (type === 'relevance') return null;
        if (type === 'value') return value;
        if (type === 'percent') return _this5.props.renderLeft || percent;
        if (type === 'nav') return value;
        return null;
      };

      var getRight = function getRight() {
        if (type === 'value') return relevance;
        if (type === 'percent') return relevance;
        if (type === 'nav') return relevance;
        if (type === 'relevance') return relevance;
        return null;
      };

      var br = /*#__PURE__*/_react.default.createElement(_reactNativeWeb.View, {
        style: styles.statInner
      }, /*#__PURE__*/_react.default.createElement(_reactNativeWeb.Text, {
        style: statsStyle
      }, _global.smallScreen ? '•' : ' • '));

      return /*#__PURE__*/_react.default.createElement(_reactNativeWeb.View, {
        style: [styles.stats, this.props.style]
      }, getLeft(), getLeft() && !this.props.renderLeft ? br : null, getRight());
    }
  }]);
  return Stats;
}(_react.Component);

(0, _defineProperty2.default)(Stats, "propTypes", {
  type: _propTypes.default.string,
  discover: _propTypes.default.bool,
  parent: _propTypes.default.object,
  actions: _propTypes.default.object,
  // currentView: PropTypes.string,
  size: _propTypes.default.string,
  textStyle: _propTypes.default.object,
  topic: _propTypes.default.string,
  renderLeft: _propTypes.default.object,
  style: _propTypes.default.object,
  entity: _propTypes.default.object,
  auth: _propTypes.default.object
});

var localStyles = _reactNativeWeb.StyleSheet.create({
  stats: {
    alignItems: 'flex-end',
    justifyContent: 'flex-end',
    flexDirection: 'row'
  },
  statInner: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    alignItems: 'flex-end'
  }
});

styles = _objectSpread(_objectSpread({}, _global.globalStyles), localStyles);

function mapDispatchToProps(dispatch) {
  return {
    actions: (0, _redux.bindActionCreators)(_objectSpread({}, tooltipActions), dispatch)
  };
}

var _default = (0, _reactRedux.connect)(function (state) {
  return {
    auth: state.auth // currentView: state.navigation.currentView

  };
}, mapDispatchToProps)(Stats);

exports.default = _default;
//# sourceMappingURL=stats.component.js.map