@atlaskit/status
Version:
Fabric Status React Components
122 lines (120 loc) • 4.8 kB
JavaScript
/* Status.tsx generated by @compiled/babel-plugin v0.36.1 */
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/inherits";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import "./Status.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(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; })(); }
import { PureComponent } from 'react';
import Lozenge from '@atlaskit/lozenge/compiled';
import { withAnalyticsEvents } from '@atlaskit/analytics-next';
import { createStatusAnalyticsAndFire } from './analytics';
import { ANALYTICS_HOVER_DELAY } from './constants';
var colorToLozengeAppearanceMap = {
neutral: 'default',
purple: 'new',
blue: 'inprogress',
red: 'removed',
yellow: 'moved',
green: 'success'
};
var DEFAULT_APPEARANCE = 'default';
var 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.
*/
var inlineBlockStyles = null;
// eg. Version/4.0 Chrome/95.0.4638.50
var isAndroidChromium = typeof window !== 'undefined' && /Version\/.* Chrome\/.*/.test(window.navigator.userAgent);
var StatusInternal = /*#__PURE__*/function (_PureComponent) {
function StatusInternal() {
var _this;
_classCallCheck(this, StatusInternal);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _callSuper(this, StatusInternal, [].concat(args));
_defineProperty(_this, "hoverStartTime", 0);
_defineProperty(_this, "handleMouseEnter", function (_e) {
_this.hoverStartTime = Date.now();
});
_defineProperty(_this, "handleMouseLeave", function (_e) {
var onHover = _this.props.onHover;
var delay = Date.now() - _this.hoverStartTime;
if (delay >= ANALYTICS_HOVER_DELAY && onHover) {
onHover();
}
_this.hoverStartTime = 0;
});
return _this;
}
_inherits(StatusInternal, _PureComponent);
return _createClass(StatusInternal, [{
key: "componentWillUnmount",
value: function componentWillUnmount() {
this.hoverStartTime = 0;
}
}, {
key: "render",
value: function render() {
var _this$props = this.props,
text = _this$props.text,
color = _this$props.color,
style = _this$props.style,
role = _this$props.role,
onClick = _this$props.onClick,
isBold = _this$props.isBold;
if (text.trim().length === 0) {
return null;
}
var 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,
onMouseEnter: this.handleMouseEnter,
onMouseLeave: this.handleMouseLeave,
"data-node-type": "status",
"data-color": color,
"data-style": style,
role: role
}, /*#__PURE__*/React.createElement(Lozenge, {
appearance: appearance,
maxWidth: MAX_WIDTH,
isBold: isBold
}, text));
}
}]);
}(PureComponent);
_defineProperty(StatusInternal, "displayName", 'StatusInternal');
export var Status = withAnalyticsEvents({
onClick: function onClick(createEvent, props) {
var localId = props.localId;
return createStatusAnalyticsAndFire(createEvent)({
action: 'clicked',
actionSubject: 'statusLozenge',
attributes: {
localId: localId
}
});
},
onHover: function onHover(createEvent, props) {
var localId = props.localId;
return createStatusAnalyticsAndFire(createEvent)({
action: 'hovered',
actionSubject: 'statusLozenge',
attributes: {
localId: localId
}
});
}
})(StatusInternal);