@r3l/app/lib/modules/web_about/countUp/countUp.box.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 _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

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

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 _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));

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

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

var _web = require("../../styled/web");

var _styled = require("../../styled");

var _styled2 = _interopRequireDefault(require("@emotion/styled"));

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

var _templateObject, _templateObject2, _templateObject3;

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 _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 CountUpBoxContainer = (0, _styled2.default)(_web.View)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  justify-content: flex-start;\n  flex-direction: row;\n  align-items: center;\n  transition: background-color 0.5s ease;\n  ", ";\n"])), function (p) {
  return p.c ? "color: ".concat(p.c, ";") : '';
});
var CountUpBoxShadow = (0, _styled2.default)(_web.View)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: 0;\n  box-shadow: -4px 0px 5px -1px #dddddd;\n  z-index: -1;\n"])));
var Headline = (0, _styled2.default)(_styled.Text)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  text-transform: uppercase;\n  font-size: [5, 3];\n  line-height: [5, 3];\n  ", "\n"])), function (p) {
  return p.hide ? 'visibility: hidden;' : '';
});

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

  var _super = _createSuper(CountUpBox);

  function CountUpBox() {
    (0, _classCallCheck2.default)(this, CountUpBox);
    return _super.apply(this, arguments);
  }

  (0, _createClass2.default)(CountUpBox, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.animate();
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate(oldProps) {
      if (oldProps.headline !== this.props.headline) {
        this.animate();
      }
    }
  }, {
    key: "animate",
    value: function animate() {
      var _this = this;

      var _this$props = this.props,
          headline = _this$props.headline,
          onHeadlineFinished = _this$props.onHeadlineFinished;
      var len = headline.length;
      var lastIndex = 0;

      _utils.tween.remove(this.t);

      this.t = _utils.tween.add({
        duration: 500,
        easing: _utils.tween.easing.circOut,
        update: function update(obj, t) {
          var roundedIndex = Math.round(t * len);

          if (lastIndex !== roundedIndex) {
            lastIndex = roundedIndex;
            _this.label.innerHTML = headline.substr(0, roundedIndex);
            _this.labelRest.innerHTML = headline.substr(roundedIndex, headline.length - 1);
          }
        },
        finished: function finished() {
          if (onHeadlineFinished) onHeadlineFinished();
        }
      });
    }
  }, {
    key: "render",
    value: function render() {
      var _this2 = this;

      var _this$props2 = this.props,
          type = _this$props2.type,
          color = _this$props2.color,
          children = _this$props2.children,
          height = _this$props2.height;
      var width = [75 * 8, '65%'];
      return /*#__PURE__*/_react.default.createElement(CountUpBoxContainer, {
        h: height,
        w: width,
        bg: color,
        c: type === 'relevant' ? 'white' : 'black',
        pr: 1
      }, children, /*#__PURE__*/_react.default.createElement(_styled.InlineText, null, /*#__PURE__*/_react.default.createElement(Headline, {
        inline: 1,
        ref: function ref(_ref) {
          return _this2.label = _ref;
        }
      }), /*#__PURE__*/_react.default.createElement(Headline, {
        inline: 1,
        hide: true,
        ref: function ref(_ref2) {
          return _this2.labelRest = _ref2;
        }
      })), /*#__PURE__*/_react.default.createElement(CountUpBoxShadow, {
        h: height,
        w: width
      }));
    }
  }]);
  return CountUpBox;
}(_react.PureComponent);

exports.default = CountUpBox;
(0, _defineProperty2.default)(CountUpBox, "propTypes", {
  height: _propTypes.default.number,
  type: _propTypes.default.string,
  headline: _propTypes.default.string,
  color: _propTypes.default.string,
  onHeadlineFinished: _propTypes.default.func,
  children: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.object])
});
//# sourceMappingURL=countUp.box.js.map