@atlaskit/editor-common
Version:
A package that contains common classes and components for editor and renderer
98 lines (95 loc) • 3.74 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.AssistiveText = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = require("react");
var _react2 = require("@emotion/react");
var _debounce = _interopRequireDefault(require("lodash/debounce"));
/**
* @jsxRuntime classic
* @jsx jsx
*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports -- Ignored via go/DSP-18766; jsx required at runtime for @jsxRuntime classic
var assitiveTextStyles = (0, _react2.css)({
border: 0,
clip: 'rect(0 0 0 0)',
height: '1px',
marginbottom: '-1px',
marginright: '-1px',
overflow: 'hidden',
padding: 0,
position: 'absolute',
whitespace: 'nowrap',
width: '1px'
});
var AssistiveText = exports.AssistiveText = function AssistiveText(_ref) {
var _ref$assistiveText = _ref.assistiveText,
assistiveText = _ref$assistiveText === void 0 ? '' : _ref$assistiveText,
_ref$isInFocus = _ref.isInFocus,
isInFocus = _ref$isInFocus === void 0 ? false : _ref$isInFocus,
_ref$id = _ref.id,
id = _ref$id === void 0 ? '' : _ref$id,
_ref$statusDebounceMi = _ref.statusDebounceMillis,
_statusDebounceMillis = _ref$statusDebounceMi === void 0 ? 1400 : _ref$statusDebounceMi;
var _useState = (0, _react.useState)(false),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
bump = _useState2[0],
setBump = _useState2[1];
var _useState3 = (0, _react.useState)(false),
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
debounced = _useState4[0],
setDebounced = _useState4[1];
var _useState5 = (0, _react.useState)(false),
_useState6 = (0, _slicedToArray2.default)(_useState5, 2),
silenced = _useState6[0],
setSilenced = _useState6[1];
var debounceStatusUpdate = (0, _react.useMemo)(function () {
return (0, _debounce.default)(function () {
var shouldSilence = !isInFocus;
setBump(function (prevBump) {
return !prevBump;
});
setDebounced(true);
setSilenced(shouldSilence);
});
}, [isInFocus]);
(0, _react.useEffect)(function () {
if (!debounced) {
// eslint-disable-next-line @atlassian/perf-linting/no-chain-state-updates -- Ignored via go/ees017 (to be fixed)
debounceStatusUpdate();
return function () {
debounceStatusUpdate.cancel();
};
}
}, [assistiveText, isInFocus, debounced, debounceStatusUpdate]);
(0, _react.useEffect)(function () {
if (debounced) {
// eslint-disable-next-line @atlassian/perf-linting/no-chain-state-updates -- Ignored via go/ees017 (to be fixed)
setBump(function (prevBump) {
return !prevBump;
});
// eslint-disable-next-line @atlassian/perf-linting/no-chain-state-updates -- Ignored via go/ees017 (to be fixed)
setDebounced(true);
// eslint-disable-next-line @atlassian/perf-linting/no-chain-state-updates -- Ignored via go/ees017 (to be fixed)
setSilenced(!isInFocus);
}
}, [assistiveText, isInFocus, debounced]);
return (0, _react2.jsx)("div", {
css: assitiveTextStyles
}, (0, _react2.jsx)("div", {
"data-testid": id + '__status--A',
id: id + '__status--A',
role: "status",
"aria-atomic": "true",
"aria-live": "polite"
}, !silenced && debounced && bump ? assistiveText : ''), (0, _react2.jsx)("div", {
"data-testid": id + '__status--B',
id: id + '__status--B',
role: "status",
"aria-atomic": "true",
"aria-live": "polite"
}, !silenced && debounced && !bump ? assistiveText : ''));
};