wix-style-react/dist/src/StatisticsWidget/StatisticsItem/StatisticsItem.js

wix-style-react

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _Focusable = require("../../common/Focusable");
var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
var _Text = _interopRequireDefault(require("../../Text"));
var _Tooltip = _interopRequireDefault(require("../../Tooltip"));
var _Loader = _interopRequireDefault(require("../../Loader"));
var _TrendIndicator = _interopRequireDefault(require("../../TrendIndicator"));
var _AdaptiveHeading = _interopRequireDefault(require("../../utils/AdaptiveHeading"));
var _dataHooks = _interopRequireDefault(require("../dataHooks"));
var _StatisticsItemSt = require("./StatisticsItem.st.css");
var _constants = require("../constants");
var _excluded = ["value", "valueInShort", "description", "descriptionInfo", "percentage", "invertedPercentage", "onClick", "children", "focusableOnFocus", "focusableOnBlur", "className", "size", "alignItems", "isLoading"];
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/StatisticsWidget/StatisticsItem/StatisticsItem.js";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
class StatisticsItem extends _react.default.PureComponent {
  constructor() {
    super(...arguments);
    this._getFocusableProps = () => {
      var {
        onClick,
        focusableOnFocus,
        focusableOnBlur
      } = this.props;
      return onClick ? {
        onFocus: focusableOnFocus,
        onBlur: focusableOnBlur,
        tabIndex: 0
      } : {};
    };
    this._getSpaceOrEnterHandler = handler => event => {
      var {
        key
      } = event;
      var isEnter = key === 'Enter';
      var isSpace = key === ' ';
      if (isEnter || isSpace) {
        handler(event);
        event.preventDefault();
      }
    };
    this._renderValue = _ref => {
      var {
        value,
        valueInShort,
        size,
        isLoading,
        alignItems
      } = _ref;
      if (isLoading) {
        var margin = size === _constants.SIZES.tiny ? '3px' : '6px';
        return /*#__PURE__*/_react.default.createElement("div", {
          className: (0, _StatisticsItemSt.st)(_StatisticsItemSt.classes.loader, {
            size,
            alignItems,
            marginTop: margin,
            marginBottom: margin
          }),
          __self: this,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 47,
            columnNumber: 9
          }
        }, /*#__PURE__*/_react.default.createElement(_Loader.default, {
          dataHook: _dataHooks.default.loader,
          size: "tiny",
          __self: this,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 55,
            columnNumber: 11
          }
        }));
      }
      var appearance = size === _constants.SIZES.tiny ? 'tiny' : 'H2';
      return /*#__PURE__*/_react.default.createElement(_AdaptiveHeading.default, {
        text: value || '-',
        appearance: appearance,
        textInShort: valueInShort,
        dataHook: _dataHooks.default.value,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 63,
          columnNumber: 7
        }
      });
    };
    this._renderDescription = _ref2 => {
      var {
        description,
        descriptionInfo,
        alignItems
      } = _ref2;
      if (!description) {
        return null;
      }
      return /*#__PURE__*/_react.default.createElement("div", {
        className: (0, _StatisticsItemSt.st)(_StatisticsItemSt.classes.description, {
          alignItems
        }),
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 78,
          columnNumber: 7
        }
      }, /*#__PURE__*/_react.default.createElement(_Text.default, {
        ellipsis: true,
        size: "small",
        dataHook: _dataHooks.default.description,
        secondary: true,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 79,
          columnNumber: 9
        }
      }, description), descriptionInfo && /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
        textAlign: "start",
        className: _StatisticsItemSt.classes.tooltip,
        dataHook: _dataHooks.default.tooltip,
        content: descriptionInfo,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 83,
          columnNumber: 11
        }
      }, /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.InfoCircleSmall, {
        className: _StatisticsItemSt.classes.info,
        "data-hook": _dataHooks.default.info,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 89,
          columnNumber: 13
        }
      })));
    };
    this._renderPercents = _ref3 => {
      var {
        percentage,
        invertedPercentage
      } = _ref3;
      if (percentage == null) {
        return null;
      }
      return /*#__PURE__*/_react.default.createElement(_TrendIndicator.default, {
        className: _StatisticsItemSt.classes.percentage,
        dataHook: _dataHooks.default.percentage,
        value: percentage,
        inverted: invertedPercentage,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 105,
          columnNumber: 7
        }
      });
    };
  }
  render() {
    var _this$props = this.props,
      {
        value,
        valueInShort,
        description,
        descriptionInfo,
        percentage,
        invertedPercentage,
        onClick,
        children,
        focusableOnFocus,
        focusableOnBlur,
        className,
        size,
        alignItems,
        isLoading
      } = _this$props,
      rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
    var attrs = _objectSpread(_objectSpread({}, this._getFocusableProps()), {}, {
      'data-hook': _dataHooks.default.stat,
      onKeyDown: onClick ? this._getSpaceOrEnterHandler(onClick) : undefined,
      onClick
    }, rest);
    return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, attrs, {
      className: (0, _StatisticsItemSt.st)(_StatisticsItemSt.classes.item, {
        clickable: !!onClick,
        size,
        alignItems
      }, className),
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 142,
        columnNumber: 7
      }
    }), this._renderValue({
      value,
      valueInShort,
      size,
      isLoading,
      alignItems
    }), this._renderDescription({
      description,
      descriptionInfo,
      alignItems
    }), this._renderPercents({
      percentage,
      invertedPercentage
    }), children);
  }
}
StatisticsItem.displayName = 'StatisticsItem';
StatisticsItem.defaultProps = {
  alignItems: 'center'
};
var _default = exports.default = (0, _Focusable.withFocusable)(StatisticsItem);
//# sourceMappingURL=StatisticsItem.js.map