wix-style-react
Version:
wix-style-react
353 lines (351 loc) • 11.5 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _noop = _interopRequireDefault(require("lodash/noop"));
var _isFunction = _interopRequireDefault(require("lodash/isFunction"));
var _Heading = _interopRequireDefault(require("../Heading"));
var _Tooltip = _interopRequireDefault(require("../Tooltip"));
var _SparklineChart = _interopRequireDefault(require("../SparklineChart"));
var _TrendIndicator = _interopRequireDefault(require("../TrendIndicator"));
var _Text = _interopRequireDefault(require("../Text"));
var _Loader = _interopRequireDefault(require("../Loader"));
var _AnalyticsSummaryCardSt = require("./AnalyticsSummaryCard.st.css");
var _constants = require("./constants");
var _Focusable = require("../common/Focusable");
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/AnalyticsSummaryCard/AnalyticsSummaryCard.js";
var SPARKLINE_HEIGHT = 22;
/** Analytics Summary Card */
class AnalyticsSummaryCard extends _react.default.PureComponent {
constructor() {
super(...arguments);
this.state = {
isHovered: false
};
this._handleMouseEnter = () => {
this.setState({
isHovered: true
});
};
this._handleMouseLeave = () => {
this.setState({
isHovered: false
});
};
this._handleClick = event => {
var {
onClick
} = this.props;
if ((0, _isFunction.default)(onClick)) {
onClick(event);
}
};
this._handleCTAClick = event => {
var {
onCTAClick
} = this.props;
event.stopPropagation();
if ((0, _isFunction.default)(onCTAClick)) {
onCTAClick(event);
}
};
this._shouldShowCTA = () => {
var {
isLoading,
ctaButton,
alwaysShowCTA
} = this.props;
var {
isHovered
} = this.state;
return !isLoading && ctaButton && (isHovered || alwaysShowCTA);
};
this._renderTitle = () => {
var {
title,
titleTooltip
} = this.props;
return /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
placement: "top",
content: titleTooltip,
disabled: !titleTooltip,
dataHook: _constants.dataHooks.analyticsSummaryCardTitleTooltip,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 59,
columnNumber: 7
}
}, /*#__PURE__*/_react.default.createElement("span", {
"data-hook": _constants.dataHooks.analyticsSummaryCardTitle,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 65,
columnNumber: 9
}
}, title));
};
this._renderValue = () => {
var {
value,
valueTooltip
} = this.props;
if (valueTooltip) {
return /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
placement: "top",
content: valueTooltip,
dataHook: _constants.dataHooks.analyticsSummaryCardValueTooltip,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 75,
columnNumber: 9
}
}, /*#__PURE__*/_react.default.createElement(_Text.default, {
tagName: "span",
weight: "bold",
dataHook: _constants.dataHooks.analyticsSummaryCardValue,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 80,
columnNumber: 11
}
}, value));
} else {
return /*#__PURE__*/_react.default.createElement(_Text.default, {
tagName: "span",
weight: "bold",
dataHook: _constants.dataHooks.analyticsSummaryCardValue,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 91,
columnNumber: 9
}
}, value);
}
};
}
render() {
var {
dataHook,
className,
trend,
isTrendVisible,
invertedTrend,
chartData,
chartColorHex,
chartWidth,
isLoading,
ctaButton,
onClick,
onChartHover,
chartHighlightedStartingIndex,
getChartTooltipContent,
chartAnimationDuration,
footer,
focusableOnFocus,
focusableOnBlur
} = this.props;
var {
isHovered
} = this.state;
var isClickable = (0, _isFunction.default)(onClick);
return /*#__PURE__*/_react.default.createElement("div", {
className: (0, _AnalyticsSummaryCardSt.st)(_AnalyticsSummaryCardSt.classes.root, {
hovered: isHovered,
clickable: isClickable
}, className),
"data-hook": dataHook,
onClick: this._handleClick,
onMouseEnter: this._handleMouseEnter,
onMouseLeave: this._handleMouseLeave,
onFocus: focusableOnFocus,
onBlur: focusableOnBlur,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 128,
columnNumber: 7
}
}, isLoading && /*#__PURE__*/_react.default.createElement("div", {
className: _AnalyticsSummaryCardSt.classes.loader,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 146,
columnNumber: 11
}
}, /*#__PURE__*/_react.default.createElement(_Loader.default, {
dataHook: _constants.dataHooks.analyticsSummaryCardLoader,
size: "tiny",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 147,
columnNumber: 13
}
})), this._shouldShowCTA() && /*#__PURE__*/_react.default.createElement("div", {
"data-hook": _constants.dataHooks.analyticsSummaryCardCTA,
className: (0, _AnalyticsSummaryCardSt.st)(_AnalyticsSummaryCardSt.classes.ctaButton),
onClick: this._handleCTAClick,
onFocus: focusableOnFocus,
onBlur: focusableOnBlur,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 156,
columnNumber: 11
}
}, ctaButton), /*#__PURE__*/_react.default.createElement("div", {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 167,
columnNumber: 9
}
}, /*#__PURE__*/_react.default.createElement("div", {
className: (0, _AnalyticsSummaryCardSt.st)(_AnalyticsSummaryCardSt.classes.title),
onFocus: focusableOnFocus,
onBlur: focusableOnBlur,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 169,
columnNumber: 11
}
}, /*#__PURE__*/_react.default.createElement(_Heading.default, {
size: "extraTiny",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 174,
columnNumber: 13
}
}, this._renderTitle())), /*#__PURE__*/_react.default.createElement("div", {
className: _AnalyticsSummaryCardSt.classes.valueLineContainer,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 178,
columnNumber: 11
}
}, /*#__PURE__*/_react.default.createElement("div", {
className: _AnalyticsSummaryCardSt.classes.valueAndTrend,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 179,
columnNumber: 13
}
}, this._renderValue(), isTrendVisible && /*#__PURE__*/_react.default.createElement(_TrendIndicator.default, {
dataHook: _constants.dataHooks.analyticsSummaryCardTrend,
className: _AnalyticsSummaryCardSt.classes.trend,
value: trend,
inverted: invertedTrend,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 182,
columnNumber: 17
}
})), /*#__PURE__*/_react.default.createElement("div", {
className: (0, _AnalyticsSummaryCardSt.st)(_AnalyticsSummaryCardSt.classes.sparkline),
onFocus: focusableOnFocus,
onBlur: focusableOnBlur,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 192,
columnNumber: 13
}
}, /*#__PURE__*/_react.default.createElement(_SparklineChart.default, {
dataHook: _constants.dataHooks.analyticsSummaryCardChart,
onHover: onChartHover,
data: chartData,
color: chartColorHex,
width: chartWidth,
height: SPARKLINE_HEIGHT,
highlightedStartingIndex: chartHighlightedStartingIndex,
getTooltipContent: getChartTooltipContent,
animationDuration: chartAnimationDuration,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 197,
columnNumber: 15
}
}))), /*#__PURE__*/_react.default.createElement("div", {
className: (0, _AnalyticsSummaryCardSt.st)(_AnalyticsSummaryCardSt.classes.footer),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 210,
columnNumber: 11
}
}, " ", footer)));
}
}
AnalyticsSummaryCard.displayName = 'AnalyticsSummaryCard';
AnalyticsSummaryCard.propTypes = {
/** Applied as data-hook HTML attribute that can be used in the tests */
dataHook: _propTypes.default.string,
/** A css class to be applied to the component's root element */
className: _propTypes.default.string,
/** Text for the title */
title: _propTypes.default.string,
/** Text for title tooltip */
titleTooltip: _propTypes.default.string,
/** Text Value */
value: _propTypes.default.string,
/** Text for value tooltip*/
valueTooltip: _propTypes.default.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.default.number,
/** Invert color and arrow direction of Trend. */
invertedTrend: _propTypes.default.bool,
/** Show/Hide Trend */
isTrendVisible: _propTypes.default.bool,
/** whether component is loading */
isLoading: _propTypes.default.bool,
/** CTA button React Node */
ctaButton: _propTypes.default.node,
/** fires when CTA button is clicked */
onCTAClick: _propTypes.default.func,
/** always show CTA button */
alwaysShowCTA: _propTypes.default.bool,
/** Card would be clickable */
onClick: _propTypes.default.func,
/** fires when chart is hovered */
onChartHover: _propTypes.default.func,
/** Indicates the starting index of the highlighted area of the chart */
chartHighlightedStartingIndex: _propTypes.default.number,
/** Chart width */
chartWidth: _propTypes.default.number,
/** Chart data */
chartData: _propTypes.default.array,
/** Chart tooltip content */
getChartTooltipContent: _propTypes.default.func,
/** Sets the color of the chart */
chartColorHex: _propTypes.default.string,
/** Chart animation duration */
chartAnimationDuration: _propTypes.default.number,
/** Footer - Node */
footer: _propTypes.default.node
};
AnalyticsSummaryCard.defaultProps = {
isLoading: false,
ctaButton: null,
footer: null,
onChartHover: _noop.default,
isTrendVisible: false,
alwaysShowCTA: false,
chartWidth: 69,
chartAnimationDuration: 300
};
var _default = exports.default = (0, _Focusable.withFocusable)(AnalyticsSummaryCard);
//# sourceMappingURL=AnalyticsSummaryCard.js.map