@atlaskit/editor-plugin-code-block
Version:
Code block plugin for @atlaskit/editor-core
232 lines (231 loc) • 11.9 kB
JavaScript
/* LanguagePicker.tsx generated by @compiled/babel-plugin v0.39.1 */
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.LanguagePicker = void 0;
require("./LanguagePicker.compiled.css");
var _runtime = require("@compiled/react/runtime");
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _new = _interopRequireDefault(require("@atlaskit/button/new"));
var _messages = require("@atlaskit/editor-common/messages");
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/core/chevron-down"));
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _compiled = require("@atlaskit/primitives/compiled");
var _select = require("@atlaskit/select");
var _languagePickerOptions = require("./language-picker-options");
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); }
function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
var pickerOptionStyles = null;
var styles = {
divider: "_h7alglyw _179rglyw _mqm2ia51 _1bsb1osq",
trigger: "_1reo15vq _18m915vq _p12fuuw1 _1bto1l2s _o5721q9c _ficf1e5h _1xw9glyw"
};
var CustomGroup = function CustomGroup(props) {
var allGroups = props.selectProps.options;
var isFirstGroup = allGroups.length > 0 && allGroups[0] === props.data;
return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, !isFirstGroup && /*#__PURE__*/_react.default.createElement(_compiled.Box, {
as: "hr",
xcss: styles.divider,
role: "presentation"
}), /*#__PURE__*/_react.default.createElement(_select.components.Group, props));
};
var CustomOption = function CustomOption(props) {
return (
/*#__PURE__*/
// eslint-disable-next-line react/jsx-props-no-spreading -- react-select custom components must forward all props to the default Option.
_react.default.createElement(_select.components.Option, props, /*#__PURE__*/_react.default.createElement("span", {
className: (0, _runtime.ax)(["_vwz478tn"])
}, props.children))
);
};
var popupSelectComponents = {
Group: CustomGroup,
Option: CustomOption
};
var menuPopperProps = {
modifiers: [{
name: 'offset',
options: {
offset: [0, 8]
}
}, {
name: 'preventOverflow',
enabled: false
}]
};
var focusWithoutScrolling = function focusWithoutScrolling(element) {
element.focus({
preventScroll: true
});
};
var getRecentlyUsedLanguages = function getRecentlyUsedLanguages(recentLanguageValues, optionsByValue) {
var recentlyUsedLanguages = [];
var _iterator = _createForOfIteratorHelper(recentLanguageValues),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var recentLanguageValue = _step.value;
var option = optionsByValue.get(recentLanguageValue);
if (option) {
recentlyUsedLanguages.push(option);
}
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
return recentlyUsedLanguages;
};
var LanguagePicker = exports.LanguagePicker = function LanguagePicker(_ref) {
var _defaultValue$label;
var defaultValue = _ref.defaultValue,
filterOption = _ref.filterOption,
formatMessage = _ref.formatMessage,
languagePickerOptions = _ref.languagePickerOptions,
_ref$recentLanguageVa = _ref.recentLanguageValues,
recentLanguageValues = _ref$recentLanguageVa === void 0 ? [] : _ref$recentLanguageVa,
onMenuOpen = _ref.onMenuOpen,
onSelection = _ref.onSelection,
_ref$triggerSpacing = _ref.triggerSpacing,
triggerSpacing = _ref$triggerSpacing === void 0 ? 'default' : _ref$triggerSpacing;
var label = (_defaultValue$label = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.label) !== null && _defaultValue$label !== void 0 ? _defaultValue$label : formatMessage(_messages.codeBlockButtonMessages.selectLanguage);
var selectLanguageLabel = formatMessage(_messages.codeBlockButtonMessages.selectLanguage);
var _useState = (0, _react.useState)(false),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
hasSearchQuery = _useState2[0],
setHasSearchQuery = _useState2[1];
var _useState3 = (0, _react.useState)(),
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
lockedPopperPlacement = _useState4[0],
setLockedPopperPlacement = _useState4[1];
var inputValueRef = (0, _react.useRef)('');
var optionsByValue = (0, _react.useMemo)(function () {
return new Map(languagePickerOptions.map(function (option) {
return [option.value, option];
}));
}, [languagePickerOptions]);
var recentlyUsedLanguages = (0, _react.useMemo)(function () {
return getRecentlyUsedLanguages(recentLanguageValues, optionsByValue);
}, [recentLanguageValues, optionsByValue]);
var options = (0, _react.useMemo)(function () {
return (0, _languagePickerOptions.createGroupedLanguageOptions)({
formatMessage: formatMessage,
languages: languagePickerOptions,
recentlyUsedLanguages: recentlyUsedLanguages
});
}, [formatMessage, languagePickerOptions, recentlyUsedLanguages]);
var searchOptions = (0, _react.useMemo)(function () {
return options.flatMap(function (group) {
return group.options;
});
}, [options]);
var stableMenuPopperProps = (0, _react.useMemo)(function () {
return {
// Allow Popper to choose top on the first open when bottom has no room, then lock the
// chosen placement so later hover/search renders do not move the open picker.
placement: lockedPopperPlacement !== null && lockedPopperPlacement !== void 0 ? lockedPopperPlacement : 'bottom-start',
modifiers: [{
name: 'offset',
options: {
offset: [0, 8]
}
}, {
name: 'preventOverflow',
enabled: false
}].concat((0, _toConsumableArray2.default)(lockedPopperPlacement ? [{
name: 'flip',
enabled: false
}] : [])),
onFirstUpdate: function onFirstUpdate(_ref2) {
var placement = _ref2.placement;
setLockedPopperPlacement(placement);
}
};
}, [lockedPopperPlacement]);
var handleChange = (0, _react.useCallback)(function (option) {
var _option$selectionSour;
if (!option) {
return;
}
var isSearchSelection = inputValueRef.current.trim().length > 0;
var selectionSource = isSearchSelection ? 'search' : (_option$selectionSour = option.selectionSource) !== null && _option$selectionSour !== void 0 ? _option$selectionSour : 'all';
onSelection(option, selectionSource);
}, [onSelection]);
var handleInputChange = (0, _react.useCallback)(function (newInputValue, actionMeta) {
// React-select clears the input as part of selecting a value before onChange fires.
// Keep the last user-typed query so handleChange can report search selections correctly.
var isInputChange = !actionMeta || actionMeta.action === 'input-change';
if (isInputChange) {
inputValueRef.current = newInputValue;
}
if (isInputChange || !(0, _platformFeatureFlags.fg)('platform_editor_code_block_dogfooding_patch')) {
setHasSearchQuery(newInputValue.trim().length > 0);
return newInputValue;
}
return inputValueRef.current;
}, []);
var handleMenuOpen = (0, _react.useCallback)(function () {
if ((0, _platformFeatureFlags.fg)('platform_editor_code_block_dogfooding_patch')) {
inputValueRef.current = '';
setHasSearchQuery(false);
setLockedPopperPlacement(undefined);
}
onMenuOpen === null || onMenuOpen === void 0 || onMenuOpen();
}, [onMenuOpen]);
var handleTriggerMouseDown = (0, _react.useCallback)(function (event) {
if ((0, _platformFeatureFlags.fg)('platform_editor_code_block_dogfooding_patch')) {
// PopupSelect's FocusLock returns focus to the element that was focused before the
// picker opened. If that is the editor/code block, closing the picker can scroll the
// whole code block into view. Focus the trigger first without scrolling so FocusLock
// returns to the trigger; see CodeBlockLanguagePicker's handleSelection for restoring
// editor focus.
focusWithoutScrolling(event.currentTarget);
}
}, []);
var renderTarget = (0, _react.useCallback)(function (_ref3) {
var isOpen = _ref3.isOpen,
ref = _ref3.ref,
onKeyDown = _ref3.onKeyDown,
ariaControls = _ref3['aria-controls'];
return /*#__PURE__*/_react.default.createElement("div", {
className: (0, _runtime.ax)([styles.trigger])
}, /*#__PURE__*/_react.default.createElement(_new.default, {
spacing: triggerSpacing,
shouldFitContainer: true,
onMouseDown: handleTriggerMouseDown,
onKeyDown: onKeyDown,
ref: ref,
iconAfter: _chevronDown.default,
appearance: "subtle",
isSelected: isOpen,
"aria-controls": ariaControls,
testId: "code-block-language-picker-trigger"
}, label));
}, [label, triggerSpacing, handleTriggerMouseDown]);
return /*#__PURE__*/_react.default.createElement(_select.PopupSelect, {
components: popupSelectComponents,
filterOption: filterOption,
label: selectLanguageLabel,
maxMenuHeight: 300,
minMenuWidth: 200,
menuPlacement: "auto",
onChange: handleChange,
onInputChange: handleInputChange,
onMenuOpen: handleMenuOpen,
options: hasSearchQuery ? searchOptions : options,
popperProps: (0, _platformFeatureFlags.fg)('platform_editor_code_block_dogfooding_patch') ? stableMenuPopperProps : menuPopperProps,
searchThreshold: -1,
target: renderTarget,
testId: "code-block-language-picker",
defaultValue: defaultValue
});
};