@atlaskit/status
Version:
Fabric Status React Components
106 lines (105 loc) • 4.35 kB
JavaScript
/* StatusPicker.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 "./StatusPicker.compiled.css";
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 TextField from '@atlaskit/textfield';
import React, { PureComponent } from 'react';
import { injectIntl } from 'react-intl-next';
import ColorPalette from './internal/color-palette';
import { messages } from './i18n';
var fieldTextWrapperStyles = null;
var Picker = /*#__PURE__*/function (_PureComponent) {
function Picker() {
var _this;
_classCallCheck(this, Picker);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _callSuper(this, Picker, [].concat(args));
_defineProperty(_this, "fieldTextWrapperKey", Math.random().toString());
_defineProperty(_this, "colorPaletteKey", Math.random().toString());
_defineProperty(_this, "onChange", function (evt) {
// @ts-ignore
_this.props.onTextChanged(evt.target.value);
});
_defineProperty(_this, "onKeyPress", function (event) {
if (event.key === 'Enter') {
_this.props.onEnter();
}
});
_defineProperty(_this, "handleInputRef", function (ref) {
_this.inputRef = ref;
if (ref && _this.props.autoFocus) {
_this.focusInput();
}
});
_defineProperty(_this, "focusInput", function () {
if (!_this.inputRef) {
return;
}
// Defer to prevent editor scrolling to top
_this.autofocusTimeout = setTimeout(function () {
var _this$inputRef;
(_this$inputRef = _this.inputRef) === null || _this$inputRef === void 0 || _this$inputRef.focus();
});
});
return _this;
}
_inherits(Picker, _PureComponent);
return _createClass(Picker, [{
key: "render",
value: function render() {
var _this$props = this.props,
text = _this$props.text,
selectedColor = _this$props.selectedColor,
onColorClick = _this$props.onColorClick,
onColorHover = _this$props.onColorHover,
intl = _this$props.intl;
// Using <React.Fragment> instead of [] to workaround Enzyme
// (https://github.com/airbnb/enzyme/issues/1149)
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
key: this.fieldTextWrapperKey,
className: ax(["_19pkidpf _otyridpf _2hwxu2gc _18u0u2gc _n6347jlr"])
}, /*#__PURE__*/React.createElement(TextField, {
value: text,
isCompact: true,
ref: this.handleInputRef,
onChange: this.onChange,
onKeyPress: this.onKeyPress,
spellCheck: false,
autoComplete: "off",
"aria-label": intl.formatMessage(messages.statusInputLabel)
})), /*#__PURE__*/React.createElement(ColorPalette, {
key: this.colorPaletteKey,
onClick: onColorClick,
onHover: onColorHover,
selectedColor: selectedColor
}));
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate() {
if (this.inputRef && this.props.autoFocus) {
this.focusInput();
}
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
if (this.autofocusTimeout !== undefined) {
clearTimeout(this.autofocusTimeout);
}
}
}]);
}(PureComponent);
_defineProperty(Picker, "defaultProps", {
autoFocus: true
});
export var StatusPicker = injectIntl(Picker);