@atlaskit/editor-plugin-loom
Version:
Loom plugin for @atlaskit/editor-core
103 lines (102 loc) • 4.21 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["onClickBeforeInit", "isDisabled", "href"];
/**
* @jsxRuntime classic
* @jsx jsx
*/
import React, { useCallback } from 'react';
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { jsx } from '@emotion/react';
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
import { isOfflineMode } from '@atlaskit/editor-plugin-connectivity';
import { executeRecordVideo } from '../pm-plugins/commands';
import ToolbarButtonComponent from './ToolbarButtonComponent';
var selector = function selector(states) {
var _states$loomState, _states$connectivityS;
return {
loomEnabled: (_states$loomState = states.loomState) === null || _states$loomState === void 0 ? void 0 : _states$loomState.isEnabled,
connectivityMode: (_states$connectivityS = states.connectivityState) === null || _states$connectivityS === void 0 ? void 0 : _states$connectivityS.mode
};
};
var CustomisableLoomToolbarButton = function CustomisableLoomToolbarButton(disabled, appearance, api) {
return /*#__PURE__*/React.forwardRef(function (props, ref) {
var onClickBeforeInit = props.onClickBeforeInit,
_props$isDisabled = props.isDisabled,
isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
href = props.href,
restProps = _objectWithoutProperties(props, _excluded);
var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['loom', 'connectivity'], selector),
loomEnabled = _useSharedPluginState.loomEnabled,
connectivityMode = _useSharedPluginState.connectivityMode;
var isLoomEnabled = !!loomEnabled;
var handleOnClick = useCallback(function (e) {
if (isLoomEnabled) {
executeRecordVideo(api);
} else {
onClickBeforeInit && onClickBeforeInit(e);
}
}, [isLoomEnabled, onClickBeforeInit]);
return jsx(ToolbarButtonComponent, _extends({
ref: ref,
hideTooltip: !!(restProps.onMouseEnter || restProps.onMouseLeave)
// Ignore href if Loom is enabled so that it doesn't interfere with recording
,
href: isLoomEnabled ? undefined : href,
disabled: disabled || isDisabled || isOfflineMode(connectivityMode),
api: api,
appearance: appearance
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
onClick: function onClick(e) {
return handleOnClick(e);
}
// Ignored via go/ees005
// eslint-disable-next-line react/jsx-props-no-spreading
}, restProps));
});
};
var LoomToolbarButtonWrapper = function LoomToolbarButtonWrapper(_ref) {
var disabled = _ref.disabled,
api = _ref.api,
appearance = _ref.appearance;
var handleOnClick = useCallback(function () {
return executeRecordVideo(api);
}, [api]);
var _useSharedPluginState2 = useSharedPluginStateWithSelector(api, ['loom', 'connectivity'], selector),
loomEnabled = _useSharedPluginState2.loomEnabled,
connectivityMode = _useSharedPluginState2.connectivityMode;
if (loomEnabled === undefined) {
return null;
}
return jsx(ToolbarButtonComponent
// Disable the icon while the SDK isn't initialised
, {
disabled: disabled || !loomEnabled || isOfflineMode(connectivityMode),
api: api,
appearance: appearance,
onClick: handleOnClick
});
};
export var loomPrimaryToolbarComponent = function loomPrimaryToolbarComponent(config, api) {
return function (_ref2) {
var disabled = _ref2.disabled,
appearance = _ref2.appearance;
if (config.shouldShowToolbarButton === false) {
return null;
}
if (config.renderButton) {
return config.renderButton(CustomisableLoomToolbarButton(disabled, appearance, api));
}
if (config.shouldShowToolbarButton) {
return jsx(LoomToolbarButtonWrapper
// Disable the icon while the SDK isn't initialised
, {
disabled: disabled,
api: api,
appearance: appearance
});
}
return null;
};
};