wix-style-react
Version:
285 lines (241 loc) • 10.5 kB
JavaScript
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }
import React from 'react';
import PropTypes from 'prop-types';
import noop from 'lodash/noop';
import isFunction from 'lodash/isFunction';
import Heading from '../Heading';
import Tooltip from '../Tooltip';
import SparklineChart from '../SparklineChart';
import TrendIndicator from '../TrendIndicator';
import Text from '../Text';
import Loader from '../Loader';
import { st, classes } from './AnalyticsSummaryCard.st.css';
import { dataHooks } from './constants';
import { withFocusable } from "wix-ui-core/dist/es/src/hocs/Focusable/FocusableHOC";
var SPARKLINE_HEIGHT = 22;
/** Analytics Summary Card */
var AnalyticsSummaryCard = /*#__PURE__*/function (_React$PureComponent) {
_inherits(AnalyticsSummaryCard, _React$PureComponent);
var _super = _createSuper(AnalyticsSummaryCard);
function AnalyticsSummaryCard() {
var _this;
_classCallCheck(this, AnalyticsSummaryCard);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _super.call.apply(_super, [this].concat(args));
_defineProperty(_assertThisInitialized(_this), "state", {
isHovered: false
});
_defineProperty(_assertThisInitialized(_this), "_handleMouseEnter", function () {
_this.setState({
isHovered: true
});
});
_defineProperty(_assertThisInitialized(_this), "_handleMouseLeave", function () {
_this.setState({
isHovered: false
});
});
_defineProperty(_assertThisInitialized(_this), "_handleClick", function (event) {
var onClick = _this.props.onClick;
if (isFunction(onClick)) {
onClick(event);
}
});
_defineProperty(_assertThisInitialized(_this), "_handleCTAClick", function (event) {
var onCTAClick = _this.props.onCTAClick;
event.stopPropagation();
if (isFunction(onCTAClick)) {
onCTAClick(event);
}
});
_defineProperty(_assertThisInitialized(_this), "_shouldShowCTA", function () {
var _this$props = _this.props,
isLoading = _this$props.isLoading,
ctaButton = _this$props.ctaButton;
var isHovered = _this.state.isHovered;
return !isLoading && ctaButton && isHovered;
});
_defineProperty(_assertThisInitialized(_this), "_renderTitle", function () {
var _this$props2 = _this.props,
title = _this$props2.title,
titleTooltip = _this$props2.titleTooltip;
return /*#__PURE__*/React.createElement(Tooltip, {
placement: "top",
content: titleTooltip,
disabled: !titleTooltip,
dataHook: dataHooks.analyticsSummaryCardTitleTooltip
}, /*#__PURE__*/React.createElement("span", {
"data-hook": dataHooks.analyticsSummaryCardTitle
}, title));
});
_defineProperty(_assertThisInitialized(_this), "_renderValue", function () {
var _this$props3 = _this.props,
value = _this$props3.value,
valueTooltip = _this$props3.valueTooltip;
if (valueTooltip) {
return /*#__PURE__*/React.createElement(Tooltip, {
placement: "top",
content: valueTooltip,
dataHook: dataHooks.analyticsSummaryCardValueTooltip
}, /*#__PURE__*/React.createElement(Text, {
tagName: "span",
weight: "bold",
dataHook: dataHooks.analyticsSummaryCardValue
}, value));
} else {
return /*#__PURE__*/React.createElement(Text, {
tagName: "span",
weight: "bold",
dataHook: dataHooks.analyticsSummaryCardValue
}, value);
}
});
return _this;
}
_createClass(AnalyticsSummaryCard, [{
key: "render",
value: function render() {
var _this$props4 = this.props,
dataHook = _this$props4.dataHook,
className = _this$props4.className,
trend = _this$props4.trend,
isTrendVisible = _this$props4.isTrendVisible,
invertedTrend = _this$props4.invertedTrend,
chartData = _this$props4.chartData,
chartColorHex = _this$props4.chartColorHex,
chartWidth = _this$props4.chartWidth,
isLoading = _this$props4.isLoading,
ctaButton = _this$props4.ctaButton,
onClick = _this$props4.onClick,
onChartHover = _this$props4.onChartHover,
chartHighlightedStartingIndex = _this$props4.chartHighlightedStartingIndex,
getChartTooltipContent = _this$props4.getChartTooltipContent,
chartAnimationDuration = _this$props4.chartAnimationDuration,
footer = _this$props4.footer,
focusableOnFocus = _this$props4.focusableOnFocus,
focusableOnBlur = _this$props4.focusableOnBlur;
var isHovered = this.state.isHovered;
var isClickable = isFunction(onClick);
return /*#__PURE__*/React.createElement("div", {
className: st(classes.root, {
hovered: isHovered,
clickable: isClickable
}, className),
"data-hook": dataHook,
onClick: this._handleClick,
onMouseEnter: this._handleMouseEnter,
onMouseLeave: this._handleMouseLeave,
onFocus: focusableOnFocus,
onBlur: focusableOnBlur
}, isLoading && /*#__PURE__*/React.createElement("div", {
className: classes.loader
}, /*#__PURE__*/React.createElement(Loader, {
dataHook: dataHooks.analyticsSummaryCardLoader,
size: "tiny"
})), this._shouldShowCTA() && /*#__PURE__*/React.createElement("div", {
"data-hook": dataHooks.analyticsSummaryCardCTA,
className: st(classes.ctaButton),
onClick: this._handleCTAClick,
onFocus: focusableOnFocus,
onBlur: focusableOnBlur
}, ctaButton), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
className: st(classes.title),
onFocus: focusableOnFocus,
onBlur: focusableOnBlur
}, /*#__PURE__*/React.createElement(Heading, {
appearance: "H6"
}, this._renderTitle())), /*#__PURE__*/React.createElement("div", {
className: classes.valueLineContainer
}, /*#__PURE__*/React.createElement("div", {
className: classes.valueAndTrend
}, this._renderValue(), isTrendVisible && /*#__PURE__*/React.createElement(TrendIndicator, {
dataHook: dataHooks.analyticsSummaryCardTrend,
className: classes.trend,
value: trend,
inverted: invertedTrend
})), /*#__PURE__*/React.createElement("div", {
className: st(classes.sparkline),
onFocus: focusableOnFocus,
onBlur: focusableOnBlur
}, /*#__PURE__*/React.createElement(SparklineChart, {
dataHook: dataHooks.analyticsSummaryCardChart,
onHover: onChartHover,
data: chartData,
color: chartColorHex,
width: chartWidth,
height: SPARKLINE_HEIGHT,
highlightedStartingIndex: chartHighlightedStartingIndex,
getTooltipContent: getChartTooltipContent,
animationDuration: chartAnimationDuration
}))), /*#__PURE__*/React.createElement("div", {
className: st(classes.footer)
}, " ", footer)));
}
}]);
return AnalyticsSummaryCard;
}(React.PureComponent);
AnalyticsSummaryCard.displayName = 'AnalyticsSummaryCard';
AnalyticsSummaryCard.propTypes = {
/** Applied as data-hook HTML attribute that can be used in the tests */
dataHook: PropTypes.string,
/** A css class to be applied to the component's root element */
className: PropTypes.string,
/** Text for the title */
title: PropTypes.string,
/** Text for title tooltip */
titleTooltip: PropTypes.string,
/** Text Value */
value: PropTypes.string,
/** Text for value tooltip*/
valueTooltip: PropTypes.string,
/** A number to be displayed as the trend, a positive number will be green with an arrow facing up and a negative number will be red with an arrow facing down */
trend: PropTypes.number,
/** Invert color and arrow direction of Trend. */
invertedTrend: PropTypes.bool,
/** Show/Hide Trend */
isTrendVisible: PropTypes.bool,
/** whether component is loading */
isLoading: PropTypes.bool,
/** CTA button React Node */
ctaButton: PropTypes.node,
/** fires when CTA button is clicked */
onCTAClick: PropTypes.func,
/** Card would be clickable */
onClick: PropTypes.func,
/** fires when chart is hovered */
onChartHover: PropTypes.func,
/** Indicates the starting index of the highlighted area of the chart */
chartHighlightedStartingIndex: PropTypes.number,
/** Chart width */
chartWidth: PropTypes.number,
/** Chart data */
chartData: PropTypes.array,
/** Chart tooltip content */
getChartTooltipContent: PropTypes.func,
/** Sets the color of the chart */
chartColorHex: PropTypes.string,
/** Chart animation duration */
chartAnimationDuration: PropTypes.number,
/** Footer - Node */
footer: PropTypes.node
};
AnalyticsSummaryCard.defaultProps = {
isLoading: false,
ctaButton: null,
footer: null,
onChartHover: noop,
isTrendVisible: false,
chartWidth: 69,
chartAnimationDuration: 300
};
export default withFocusable(AnalyticsSummaryCard);