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

wix-style-react

import React from 'react';
import { withFocusable } from '../../common/Focusable';
import { InfoCircleSmall } from '@wix/wix-ui-icons-common';
import Text from '../../Text';
import Tooltip from '../../Tooltip';
import Loader from '../../Loader';
import TrendIndicator from '../../TrendIndicator';
import AdaptiveHeading from '../../utils/AdaptiveHeading';
import DataHooks from '../dataHooks';
import { st, classes } from './StatisticsItem.st.css';
import { SIZES } from '../constants';
class StatisticsItem extends React.PureComponent {
    constructor() {
        super(...arguments);
        this._getFocusableProps = () => {
            const { onClick, focusableOnFocus, focusableOnBlur } = this.props;
            return onClick
                ? {
                    onFocus: focusableOnFocus,
                    onBlur: focusableOnBlur,
                    tabIndex: 0,
                }
                : {};
        };
        this._getSpaceOrEnterHandler = handler => event => {
            const { key } = event;
            const isEnter = key === 'Enter';
            const isSpace = key === ' ';
            if (isEnter || isSpace) {
                handler(event);
                event.preventDefault();
            }
        };
        this._renderValue = ({ value, valueInShort, size, isLoading, alignItems }) => {
            if (isLoading) {
                const margin = size === SIZES.tiny ? '3px' : '6px';
                return (React.createElement("div", { className: st(classes.loader, {
                        size,
                        alignItems,
                        marginTop: margin,
                        marginBottom: margin,
                    }) },
                    React.createElement(Loader, { dataHook: DataHooks.loader, size: "tiny" })));
            }
            const appearance = size === SIZES.tiny ? 'tiny' : 'H2';
            return (React.createElement(AdaptiveHeading, { text: value || '-', appearance: appearance, textInShort: valueInShort, dataHook: DataHooks.value }));
        };
        this._renderDescription = ({ description, descriptionInfo, alignItems }) => {
            if (!description) {
                return null;
            }
            return (React.createElement("div", { className: st(classes.description, { alignItems }) },
                React.createElement(Text, { ellipsis: true, size: "small", dataHook: DataHooks.description, secondary: true }, description),
                descriptionInfo && (React.createElement(Tooltip, { textAlign: "start", className: classes.tooltip, dataHook: DataHooks.tooltip, content: descriptionInfo },
                    React.createElement(InfoCircleSmall, { className: classes.info, "data-hook": DataHooks.info })))));
        };
        this._renderPercents = ({ percentage, invertedPercentage }) => {
            if (percentage == null) {
                return null;
            }
            return (React.createElement(TrendIndicator, { className: classes.percentage, dataHook: DataHooks.percentage, value: percentage, inverted: invertedPercentage }));
        };
    }
    render() {
        const { value, valueInShort, description, descriptionInfo, percentage, invertedPercentage, onClick, children, focusableOnFocus, focusableOnBlur, className, size, alignItems, isLoading, ...rest } = this.props;
        const attrs = {
            ...this._getFocusableProps(),
            'data-hook': DataHooks.stat,
            onKeyDown: onClick ? this._getSpaceOrEnterHandler(onClick) : undefined,
            onClick,
            ...rest,
        };
        return (React.createElement("div", { ...attrs, className: st(classes.item, {
                clickable: !!onClick,
                size,
                alignItems,
            }, className) },
            this._renderValue({
                value,
                valueInShort,
                size,
                isLoading,
                alignItems,
            }),
            this._renderDescription({
                description,
                descriptionInfo,
                alignItems,
            }),
            this._renderPercents({ percentage, invertedPercentage }),
            children));
    }
}
StatisticsItem.displayName = 'StatisticsItem';
StatisticsItem.defaultProps = {
    alignItems: 'center',
};
export default withFocusable(StatisticsItem);
//# sourceMappingURL=StatisticsItem.js.map