@atlaskit/status
Version:
Fabric Status React Components
88 lines (86 loc) • 2.88 kB
JavaScript
/* StatusPicker.tsx generated by @compiled/babel-plugin v0.39.1 */
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import "./StatusPicker.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
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';
const fieldTextWrapperStyles = null;
class Picker extends PureComponent {
constructor(...args) {
super(...args);
_defineProperty(this, "fieldTextWrapperKey", Math.random().toString());
_defineProperty(this, "colorPaletteKey", Math.random().toString());
_defineProperty(this, "onChange", evt => {
// @ts-ignore
this.props.onTextChanged(evt.target.value);
});
_defineProperty(this, "onKeyPress", event => {
if (event.key === 'Enter') {
this.props.onEnter();
}
});
_defineProperty(this, "handleInputRef", ref => {
this.inputRef = ref;
if (ref && this.props.autoFocus) {
this.focusInput();
}
});
_defineProperty(this, "focusInput", () => {
if (!this.inputRef) {
return;
}
// Defer to prevent editor scrolling to top
this.autofocusTimeout = setTimeout(() => {
var _this$inputRef;
(_this$inputRef = this.inputRef) === null || _this$inputRef === void 0 ? void 0 : _this$inputRef.focus();
});
});
}
render() {
const {
text,
selectedColor,
onColorClick,
onColorHover,
intl
} = this.props;
// 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 _n6341ihb"])
}, /*#__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
}));
}
componentDidUpdate() {
if (this.inputRef && this.props.autoFocus) {
this.focusInput();
}
}
componentWillUnmount() {
if (this.autofocusTimeout !== undefined) {
clearTimeout(this.autofocusTimeout);
}
}
}
// eslint-disable-next-line @typescript-eslint/ban-types
_defineProperty(Picker, "defaultProps", {
autoFocus: true
});
export const StatusPicker = injectIntl(Picker);