@wix/design-system
Version:
@wix/design-system
228 lines (227 loc) • 10.1 kB
JavaScript
"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 _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _react = _interopRequireDefault(require("react"));
var _Focusable = require("../../common/Focusable");
var _Text = _interopRequireDefault(require("../../Text"));
var _InfoIcon = _interopRequireDefault(require("../../InfoIcon"));
var _Loader = _interopRequireDefault(require("../../Loader"));
var _TrendIndicator = _interopRequireDefault(require("../../TrendIndicator"));
var _AdaptiveHeading = _interopRequireDefault(require("../../common/AdaptiveHeading"));
var _dataHooks = _interopRequireDefault(require("../dataHooks"));
var _StatisticsItemSt = require("./StatisticsItem.st.css.js");
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/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/StatisticsWidget/StatisticsItem/StatisticsItem.jsx";
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; }
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
var StatisticsItem = /*#__PURE__*/function (_React$PureComponent) {
function StatisticsItem() {
var _this;
(0, _classCallCheck2["default"])(this, StatisticsItem);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _callSuper(this, StatisticsItem, [].concat(args));
_this._getFocusableProps = function () {
var _this$props = _this.props,
onClick = _this$props.onClick,
focusableOnFocus = _this$props.focusableOnFocus,
focusableOnBlur = _this$props.focusableOnBlur;
return onClick ? {
onFocus: focusableOnFocus,
onBlur: focusableOnBlur,
tabIndex: 0
} : {};
};
_this._getSpaceOrEnterHandler = function (handler) {
return function (event) {
var key = event.key;
var isEnter = key === 'Enter';
var isSpace = key === ' ';
if (isEnter || isSpace) {
handler(event);
event.preventDefault();
}
};
};
_this._renderValue = function (_ref) {
var value = _ref.value,
valueInShort = _ref.valueInShort,
size = _ref.size,
isLoading = _ref.isLoading,
alignItems = _ref.alignItems;
if (isLoading) {
var margin = size === _constants.SIZES.tiny ? '3px' : '6px';
return /*#__PURE__*/_react["default"].createElement("div", {
className: (0, _StatisticsItemSt.st)(_StatisticsItemSt.classes.loader, {
size: size,
alignItems: alignItems,
marginTop: margin,
marginBottom: margin
}),
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 46,
columnNumber: 9
}
}, /*#__PURE__*/_react["default"].createElement(_Loader["default"], {
dataHook: _dataHooks["default"].loader,
size: "tiny",
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 54,
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: 62,
columnNumber: 7
}
});
};
_this._renderDescription = function (_ref2) {
var description = _ref2.description,
descriptionInfo = _ref2.descriptionInfo,
alignItems = _ref2.alignItems;
if (!description) {
return null;
}
return /*#__PURE__*/_react["default"].createElement("div", {
className: (0, _StatisticsItemSt.st)(_StatisticsItemSt.classes.description, {
alignItems: alignItems
}),
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 77,
columnNumber: 7
}
}, /*#__PURE__*/_react["default"].createElement(_Text["default"], {
ellipsis: true,
size: "small",
dataHook: _dataHooks["default"].description,
secondary: true,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 78,
columnNumber: 9
}
}, description), descriptionInfo && /*#__PURE__*/_react["default"].createElement(_InfoIcon["default"], {
dataHook: _dataHooks["default"].info,
content: descriptionInfo,
size: "small",
tooltipProps: {
textAlign: 'start'
},
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 82,
columnNumber: 11
}
}));
};
_this._renderPercents = function (_ref3) {
var percentage = _ref3.percentage,
invertedPercentage = _ref3.invertedPercentage;
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: 99,
columnNumber: 7
}
});
};
return _this;
}
(0, _inherits2["default"])(StatisticsItem, _React$PureComponent);
return (0, _createClass2["default"])(StatisticsItem, [{
key: "render",
value: function render() {
var _this$props2 = this.props,
value = _this$props2.value,
valueInShort = _this$props2.valueInShort,
description = _this$props2.description,
descriptionInfo = _this$props2.descriptionInfo,
percentage = _this$props2.percentage,
invertedPercentage = _this$props2.invertedPercentage,
onClick = _this$props2.onClick,
children = _this$props2.children,
focusableOnFocus = _this$props2.focusableOnFocus,
focusableOnBlur = _this$props2.focusableOnBlur,
className = _this$props2.className,
size = _this$props2.size,
alignItems = _this$props2.alignItems,
isLoading = _this$props2.isLoading,
rest = (0, _objectWithoutProperties2["default"])(_this$props2, _excluded);
var attrs = _objectSpread(_objectSpread({}, this._getFocusableProps()), {}, {
'data-hook': _dataHooks["default"].stat,
onKeyDown: onClick ? this._getSpaceOrEnterHandler(onClick) : undefined,
onClick: onClick
}, rest);
return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, attrs, {
className: (0, _StatisticsItemSt.st)(_StatisticsItemSt.classes.item, {
clickable: !!onClick,
size: size,
alignItems: alignItems
}, className),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 136,
columnNumber: 7
}
}), this._renderValue({
value: value,
valueInShort: valueInShort,
size: size,
isLoading: isLoading,
alignItems: alignItems
}), this._renderDescription({
description: description,
descriptionInfo: descriptionInfo,
alignItems: alignItems
}), this._renderPercents({
percentage: percentage,
invertedPercentage: invertedPercentage
}), children);
}
}]);
}(_react["default"].PureComponent);
StatisticsItem.displayName = 'StatisticsItem';
StatisticsItem.defaultProps = {
alignItems: 'center'
};
var _default = exports["default"] = (0, _Focusable.withFocusable)(StatisticsItem);