@atlaskit/editor-common
Version:
A package that contains common classes and components for editor and renderer
164 lines (161 loc) • 9.52 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = require("react");
var _react2 = require("@emotion/react");
var _analyticsNext = require("@atlaskit/analytics-next");
var _colors = require("@atlaskit/theme/colors");
var _Layer = _interopRequireDefault(require("../Layer"));
var _templateObject, _templateObject2, _templateObject3;
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /** @jsx jsx */
var packageName = "@atlaskit/editor-common";
var packageVersion = "78.23.1";
var halfFocusRing = 1;
var dropOffset = '0, 8';
var DropList = /*#__PURE__*/function (_Component) {
(0, _inherits2.default)(DropList, _Component);
var _super = _createSuper(DropList);
function DropList() {
var _this;
(0, _classCallCheck2.default)(this, DropList);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _super.call.apply(_super, [this].concat(args));
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "wrapperStyles", (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n ", "\n transition-duration: 0.2s;\n transition: box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38);\n "])), _this.props.shouldFitContainer ? 'display: block; flex: 1 1 auto;' : 'display: inline-flex;'));
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "triggerStyles", (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n transition-duration: 0.2s;\n transition: box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38);\n ", "\n "])), _this.props.shouldFitContainer ? 'display: block; box-sizing: border-box;' : 'display: inline-flex;'));
/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "menuWrapper", function () {
return (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n color: ", ";\n background-color: ", ";\n border-radius: ", ";\n box-shadow: ", ";\n box-sizing: border-box;\n overflow: auto;\n padding: ", " 0;\n max-height: 90vh;\n "])), "var(--ds-text, ".concat(_colors.N900, ")"), "var(--ds-surface-overlay, ".concat(_colors.N0, ")"), "var(--ds-border-radius, 3px)", "var(--ds-shadow-overlay, ".concat("0 4px 8px calc(-1 * 2px) ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")"), "var(--ds-space-050, 4px)");
});
/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "componentDidMount", function () {
_this.setContentWidth();
// We use a captured event here to avoid a radio or checkbox dropdown item firing its
// click event first, which would cause a re-render of the element and prevent DropList
// from detecting the actual source of this original click event.
document.addEventListener('click', _this.handleClickOutside, true);
document.addEventListener('keydown', _this.handleEsc);
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "componentDidUpdate", function () {
if (_this.props.isOpen) {
_this.setContentWidth();
}
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "componentWillUnmount", function () {
document.removeEventListener('click', _this.handleClickOutside, true);
document.removeEventListener('keydown', _this.handleEsc);
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setContentWidth", function () {
var _assertThisInitialize = (0, _assertThisInitialized2.default)(_this),
dropContentRef = _assertThisInitialize.dropContentRef,
triggerRef = _assertThisInitialize.triggerRef;
var shouldFitContainer = _this.props.shouldFitContainer;
// We need to manually set the content width to match the trigger width
if (shouldFitContainer && dropContentRef && triggerRef) {
dropContentRef.style.width = "".concat(triggerRef.offsetWidth - halfFocusRing * 2, "px");
}
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleEsc", function (event) {
if ((event.key === 'Escape' || event.key === 'Esc') && _this.props.isOpen) {
_this.close(event);
}
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleClickOutside", function (event) {
if (_this.props.isOpen) {
if (event.target instanceof Node) {
// Rather than check for the target within the entire DropList, we specify the trigger/content.
// This aids with future effort in scroll-locking DropList when isMenuFixed is enabled; the scroll
// blanket which stretches to the viewport should not stop 'close' from being triggered.
var withinTrigger = _this.triggerRef && _this.triggerRef.contains(event.target);
var withinContent = _this.dropContentRef && _this.dropContentRef.contains(event.target);
if (!withinTrigger && !withinContent) {
_this.close(event);
}
}
}
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "close", function (event) {
if (_this.props.onOpenChange) {
_this.props.onOpenChange({
isOpen: false,
event: event
});
}
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleContentRef", function (ref) {
_this.dropContentRef = ref;
// If the dropdown has just been opened, we focus on the containing element so the
// user can tab to the first dropdown item. We will only receive this ref if isOpen
// is true or null, so no need to check for truthiness here.
if (ref) {
ref.focus();
}
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleTriggerRef", function (ref) {
_this.triggerRef = ref;
});
return _this;
}
(0, _createClass2.default)(DropList, [{
key: "render",
value: function render() {
var _this$props = this.props,
children = _this$props.children,
isOpen = _this$props.isOpen,
position = _this$props.position,
trigger = _this$props.trigger,
onPositioned = _this$props.onPositioned,
testId = _this$props.testId,
id = _this$props.id;
var layerContent = isOpen ? (0, _react2.jsx)("div", {
css: this.menuWrapper,
"data-role": "droplistContent",
"data-testid": testId && "".concat(testId, "--content"),
ref: this.handleContentRef,
id: id,
role: "presentation"
}, children) : null;
return (0, _react2.jsx)("div", {
css: this.wrapperStyles
}, (0, _react2.jsx)(_Layer.default, {
content: layerContent,
offset: dropOffset,
position: position,
onPositioned: onPositioned
}, (0, _react2.jsx)("div", {
css: this.triggerStyles,
ref: this.handleTriggerRef
}, trigger)));
}
}]);
return DropList;
}(_react.Component);
var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');
var _default = exports.default = (0, _analyticsNext.withAnalyticsContext)({
componentName: 'droplist',
packageName: packageName,
packageVersion: packageVersion
})((0, _analyticsNext.withAnalyticsEvents)({
onOpenChange: createAndFireEventOnAtlaskit({
action: 'toggled',
actionSubject: 'droplist',
attributes: {
componentName: 'droplist',
packageName: packageName,
packageVersion: packageVersion
}
})
})(DropList));