@atlaskit/status
Version:
Fabric Status React Components
89 lines • 3.19 kB
JavaScript
/* color.tsx generated by @compiled/babel-plugin v0.39.1 */
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import "./color.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import EditorDoneIcon from '@atlaskit/icon/core/check-mark';
import { Pressable } from '@atlaskit/primitives/compiled';
import { PureComponent } from 'react';
import { FormattedMessage } from 'react-intl-next';
import { ANALYTICS_HOVER_DELAY } from '../constants';
import { messages } from '../i18n';
const styles = {
button: "_2rko12b0 _19itia51 _1reo15vq _18m915vq _4t3i1tcg _1bsb1tcg _bfhki8nm _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _1e0c1ule"
};
const buttonWrapperStyles = null;
export default class Color extends PureComponent {
constructor(...args) {
super(...args);
_defineProperty(this, "hoverStartTime", 0);
_defineProperty(this, "onMouseEnter", () => {
this.hoverStartTime = Date.now();
});
_defineProperty(this, "onMouseLeave", () => {
const {
onHover
} = this.props;
const delay = Date.now() - this.hoverStartTime;
if (delay >= ANALYTICS_HOVER_DELAY && onHover) {
onHover(this.props.value);
}
this.hoverStartTime = 0;
});
_defineProperty(this, "onMouseDown", e => {
e.preventDefault();
});
_defineProperty(this, "onClick", e => {
const {
onClick,
value
} = this.props;
e.preventDefault();
onClick(value);
});
}
render() {
const {
tabIndex,
backgroundColor,
isSelected,
borderColor,
iconColor,
value,
setRef,
onKeyDown
} = this.props;
return /*#__PURE__*/React.createElement("li", {
className: ax(["_2rko12x7 _189ee4h9 _1dqonqa1 _1h6d1j28 _19pkze3t _2hwxv77o _otyrze3t _18u0v77o _1e0c1txw _4cvr1h6o _ca0qe4h9 _u5f3e4h9 _n3tde4h9 _19bve4h9 _bfw7ia51"])
}, /*#__PURE__*/React.createElement(FormattedMessage, messages[`${value}Color`], labels => /*#__PURE__*/React.createElement(Pressable, {
xcss: styles.button,
onClick: this.onClick,
onMouseEnter: this.onMouseEnter,
onMouseLeave: this.onMouseLeave,
onMouseDown: this.onMouseDown,
onKeyDown: onKeyDown,
tabIndex: tabIndex,
title: labels[0]
// button element does not support aria-selected.
// For button selected (to be precise pressed) or not
// use aria-pressed as per
// https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role#associated_aria_roles_states_and_properties
,
"aria-pressed": isSelected,
style: {
backgroundColor: backgroundColor || 'transparent',
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
color: iconColor,
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
borderColor
},
ref: setRef
}, isSelected && /*#__PURE__*/React.createElement(EditorDoneIcon, {
color: "currentColor",
label: labels[0]
}))));
}
componentWillUnmount() {
this.hoverStartTime = 0;
}
}