@atlaskit/status
Version:
Fabric Status React Components
137 lines (135 loc) • 4.47 kB
JavaScript
/* Status.tsx generated by @compiled/babel-plugin v0.39.1 */
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import "./Status.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import { PureComponent } from 'react';
import Lozenge from '@atlaskit/lozenge';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import { withAnalyticsEvents } from '@atlaskit/analytics-next';
import { createStatusAnalyticsAndFire } from './analytics';
import { ANALYTICS_HOVER_DELAY } from './constants';
const colorToLozengeAppearanceMap = {
neutral: 'default',
purple: 'new',
blue: 'inprogress',
red: 'removed',
yellow: 'moved',
green: 'success'
};
const DEFAULT_APPEARANCE = 'default';
const MAX_WIDTH = 200;
/**
* This is to account for a bug in android chromium and should be removed
* when the editor fixes its focus handling with respect to Status.
*
* See DSP-7701 for additional context.
*/
const inlineBlockStyles = null;
// eg. Version/4.0 Chrome/95.0.4638.50
const isAndroidChromium = typeof window !== 'undefined' && /Version\/.* Chrome\/.*/.test(window.navigator.userAgent);
class StatusInternal extends PureComponent {
constructor(...args) {
super(...args);
_defineProperty(this, "hoverStartTime", 0);
_defineProperty(this, "handleMouseEnter", _e => {
this.hoverStartTime = Date.now();
});
_defineProperty(this, "handleMouseLeave", _e => {
const {
onHover
} = this.props;
const delay = Date.now() - this.hoverStartTime;
if (delay >= ANALYTICS_HOVER_DELAY && onHover) {
onHover();
}
this.hoverStartTime = 0;
});
_defineProperty(this, "handleKeyDown", e => {
const {
onClick
} = this.props;
if (onClick && (e.key === 'Enter' || e.key === ' ')) {
e.preventDefault();
onClick(e);
}
});
_defineProperty(this, "handleFocus", _e => {
this.hoverStartTime = Date.now();
});
_defineProperty(this, "handleBlur", _e => {
const {
onHover
} = this.props;
const delay = Date.now() - this.hoverStartTime;
if (delay >= ANALYTICS_HOVER_DELAY && onHover) {
onHover();
}
this.hoverStartTime = 0;
});
}
componentWillUnmount() {
this.hoverStartTime = 0;
}
render() {
const {
text,
color,
style,
role,
onClick,
isBold
} = this.props;
if (text.trim().length === 0) {
return null;
}
const appearance = colorToLozengeAppearanceMap[color] || DEFAULT_APPEARANCE;
// Note: ommitted data-local-id attribute to avoid copying/pasting the same localId
return /*#__PURE__*/React.createElement("span", {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
className: ax([isAndroidChromium && "_d0dzdf4r _1k0l7vkz _1frxnkob", "status-lozenge-span"]),
onClick: onClick,
onKeyDown: expValEquals('platform_editor_a11y_eslint_fix', 'isEnabled', true) ? onClick ? this.handleKeyDown : undefined : undefined,
onMouseEnter: this.handleMouseEnter,
onMouseLeave: this.handleMouseLeave,
onFocus: expValEquals('platform_editor_a11y_eslint_fix', 'isEnabled', true) ? this.handleFocus : undefined,
onBlur: expValEquals('platform_editor_a11y_eslint_fix', 'isEnabled', true) ? this.handleBlur : undefined,
tabIndex: expValEquals('platform_editor_a11y_eslint_fix', 'isEnabled', true) ? onClick ? -1 : undefined : undefined,
"data-node-type": "status",
"data-color": color,
"data-style": style,
role: role
}, /*#__PURE__*/React.createElement(Lozenge, {
appearance: appearance,
maxWidth: MAX_WIDTH,
isBold: isBold
}, text));
}
}
_defineProperty(StatusInternal, "displayName", 'StatusInternal');
export const Status = withAnalyticsEvents({
onClick: (createEvent, props) => {
const {
localId
} = props;
return createStatusAnalyticsAndFire(createEvent)({
action: 'clicked',
actionSubject: 'statusLozenge',
attributes: {
localId
}
});
},
onHover: (createEvent, props) => {
const {
localId
} = props;
return createStatusAnalyticsAndFire(createEvent)({
action: 'hovered',
actionSubject: 'statusLozenge',
attributes: {
localId
}
});
}
})(StatusInternal);