@atlaskit/editor-plugin-floating-toolbar
Version:
Floating toolbar plugin for @atlaskit/editor-core
173 lines (167 loc) • 9.03 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ScrollButtons = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _react2 = require("@emotion/react");
var _rafSchd = _interopRequireDefault(require("raf-schd"));
var _floatingToolbar = require("@atlaskit/editor-common/floating-toolbar");
var _ui = require("@atlaskit/editor-common/ui");
var _chevronLeft = _interopRequireDefault(require("@atlaskit/icon/core/chevron-left"));
var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/core/chevron-right"));
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
/**
* @jsxRuntime classic
* @jsx jsx
*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
var toolbarScrollButtons = (0, _react2.css)({
display: 'grid',
gridTemplateColumns: '1fr 1fr',
gridGap: "var(--ds-space-050, 4px)",
padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-100, 8px)"),
borderLeft: "solid ".concat("var(--ds-border, #0B120E24)", " ", "var(--ds-border-width, 1px)"),
flexShrink: 0,
alignItems: 'center'
});
var LeftIcon = _chevronLeft.default;
var RightIcon = _chevronRight.default;
// Remove this component (replaced by ScrollButton) as part of platform_editor_controls clean up
var ScrollButtons = exports.ScrollButtons = function ScrollButtons(_ref) {
var intl = _ref.intl,
scrollContainerRef = _ref.scrollContainerRef,
node = _ref.node,
disabled = _ref.disabled,
areAnyNewToolbarFlagsEnabled = _ref.areAnyNewToolbarFlagsEnabled;
var buttonsContainerRef = (0, _react.useRef)(null);
var _useState = (0, _react.useState)(false),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
needScroll = _useState2[0],
setNeedScroll = _useState2[1];
var _useState3 = (0, _react.useState)(true),
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
canScrollLeft = _useState4[0],
setCanScrollLeft = _useState4[1];
var _useState5 = (0, _react.useState)(true),
_useState6 = (0, _slicedToArray2.default)(_useState5, 2),
canScrollRight = _useState6[0],
setCanScrollRight = _useState6[1];
var setCanScrollDebounced = (0, _rafSchd.default)(function () {
// Refs are null before mounting and after unmount
if (!scrollContainerRef.current) {
return;
}
var _scrollContainerRef$c = scrollContainerRef.current,
scrollLeft = _scrollContainerRef$c.scrollLeft,
scrollWidth = _scrollContainerRef$c.scrollWidth,
offsetWidth = _scrollContainerRef$c.offsetWidth;
setCanScrollLeft(scrollLeft > 0);
setCanScrollRight(scrollLeft + offsetWidth < scrollWidth - 1); // -1 to account for half pixel
});
var onScroll = function onScroll() {
return setCanScrollDebounced();
};
var scrollLeft = function scrollLeft() {
var _scrollContainerRef$c2, _scrollContainerRef$c3, _scrollContainerRef$c4;
var _ref2 = ((_scrollContainerRef$c2 = scrollContainerRef.current) === null || _scrollContainerRef$c2 === void 0 ? void 0 : _scrollContainerRef$c2.getBoundingClientRect()) || {},
_ref2$width = _ref2.width,
scrollContainerWidth = _ref2$width === void 0 ? 0 : _ref2$width;
var scrollLeft = ((_scrollContainerRef$c3 = scrollContainerRef.current) === null || _scrollContainerRef$c3 === void 0 ? void 0 : _scrollContainerRef$c3.scrollLeft) || 0;
// scroll to current position - scroll container width
var scrollTo = scrollLeft - scrollContainerWidth;
(_scrollContainerRef$c4 = scrollContainerRef.current) === null || _scrollContainerRef$c4 === void 0 || _scrollContainerRef$c4.scrollTo({
top: 0,
left: scrollTo,
behavior: 'smooth'
});
};
var scrollRight = function scrollRight() {
var _scrollContainerRef$c5, _scrollContainerRef$c6, _scrollContainerRef$c7;
var _ref3 = ((_scrollContainerRef$c5 = scrollContainerRef.current) === null || _scrollContainerRef$c5 === void 0 ? void 0 : _scrollContainerRef$c5.getBoundingClientRect()) || {},
_ref3$width = _ref3.width,
scrollContainerWidth = _ref3$width === void 0 ? 0 : _ref3$width;
var scrollLeft = ((_scrollContainerRef$c6 = scrollContainerRef.current) === null || _scrollContainerRef$c6 === void 0 ? void 0 : _scrollContainerRef$c6.scrollLeft) || 0;
// scroll to current position + scroll container width
var scrollTo = scrollLeft + scrollContainerWidth;
(_scrollContainerRef$c7 = scrollContainerRef.current) === null || _scrollContainerRef$c7 === void 0 || _scrollContainerRef$c7.scrollTo({
top: 0,
left: scrollTo,
behavior: 'smooth'
});
};
var resizeObserver = new ResizeObserver(function (t) {
var _scrollContainerRef$c8, _scrollContainerRef$c9;
var widthNeededToShowAllItems = ((_scrollContainerRef$c8 = scrollContainerRef.current) === null || _scrollContainerRef$c8 === void 0 ? void 0 : _scrollContainerRef$c8.scrollWidth) || 0;
// Ignored via go/ees005
// eslint-disable-next-line @atlaskit/editor/no-as-casting
var availableSpace = (_scrollContainerRef$c9 = scrollContainerRef.current) === null || _scrollContainerRef$c9 === void 0 || (_scrollContainerRef$c9 = _scrollContainerRef$c9.parentNode) === null || _scrollContainerRef$c9 === void 0 ? void 0 : _scrollContainerRef$c9.offsetWidth;
if (availableSpace >= widthNeededToShowAllItems) {
setNeedScroll(false);
} else {
setNeedScroll(true);
onScroll();
}
});
(0, _react.useEffect)(function () {
onScroll();
var scrollContainerRefCurrent = scrollContainerRef.current;
if (scrollContainerRefCurrent) {
// enable/disable scroll buttons depending on scroll position
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
scrollContainerRefCurrent.addEventListener('scroll', onScroll);
// watch for toolbar resize and show/hide scroll buttons if needed
resizeObserver.observe(scrollContainerRefCurrent);
}
return function () {
if (scrollContainerRefCurrent) {
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
scrollContainerRefCurrent.removeEventListener('scroll', onScroll);
resizeObserver.unobserve(scrollContainerRefCurrent);
}
setCanScrollDebounced.cancel();
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
(0, _react.useEffect)(function () {
var scrollContainerRefCurrent = scrollContainerRef.current;
if (scrollContainerRefCurrent) {
var _scrollContainerRefCu;
// reset scroll position when switching from one node with toolbar to another
// scroll to made optional as it may not be rendered in testing env
(_scrollContainerRefCu = scrollContainerRefCurrent.scrollTo) === null || _scrollContainerRefCu === void 0 || _scrollContainerRefCu.call(scrollContainerRefCurrent, {
left: 0
});
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [node.type]);
return needScroll ? (0, _react2.jsx)("div", {
ref: buttonsContainerRef,
css: toolbarScrollButtons
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
,
className: "scroll-buttons"
}, (0, _react2.jsx)(_ui.FloatingToolbarButton, {
title: intl.formatMessage(_floatingToolbar.messages.floatingToolbarScrollLeft),
icon: (0, _react2.jsx)(LeftIcon, {
label: intl.formatMessage(_floatingToolbar.messages.floatingToolbarScrollLeft),
size: "small"
}),
onClick: scrollLeft,
disabled: !canScrollLeft || disabled,
areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
}), (0, _react2.jsx)(_ui.FloatingToolbarButton, {
title: intl.formatMessage(_floatingToolbar.messages.floatingToolbarScrollRight),
icon: (0, _react2.jsx)(RightIcon, {
label: intl.formatMessage(_floatingToolbar.messages.floatingToolbarScrollRight),
size: "small"
}),
onClick: scrollRight,
disabled: !canScrollRight || disabled,
areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
})) : null;
};