@atlaskit/editor-plugin-find-replace
Version:
find replace plugin for @atlaskit/editor-core
266 lines (263 loc) • 10.9 kB
JavaScript
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/inherits";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
/* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */
/**
* @jsxRuntime classic
* @jsx jsx
*/
import React from 'react';
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { jsx } from '@emotion/react';
import debounce from 'lodash/debounce';
import rafSchd from 'raf-schd';
import { injectIntl } from 'react-intl';
import { TRIGGER_METHOD } from '@atlaskit/editor-common/analytics';
import { findReplaceMessages as messages } from '@atlaskit/editor-common/messages';
import { Label } from '@atlaskit/form';
import TextLetterCaseIcon from '@atlaskit/icon-lab/core/text-letter-case';
import MatchCaseIcon from '@atlaskit/icon/core/text-style';
import Textfield from '@atlaskit/textfield';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import { FindReplaceTooltipButton } from './FindReplaceTooltipButton';
import { afterInputSection, countStyles, countStylesAlternateStyles, matchCaseSection, sectionWrapperStyles, sectionWrapperStylesAlternate, textFieldWrapper } from './ui-styles';
export var FIND_DEBOUNCE_MS = 100;
// eslint-disable-next-line @repo/internal/react/no-class-components
var Find = /*#__PURE__*/function (_React$Component) {
function Find(props) {
var _this;
_classCallCheck(this, Find);
_this = _callSuper(this, Find, [props]);
_defineProperty(_this, "findTextfieldRef", /*#__PURE__*/React.createRef());
_defineProperty(_this, "isComposing", false);
_defineProperty(_this, "syncFindText", function (onSynced) {
var _this$state;
// If the external prop findText changes and we aren't in a composition we should update to
// use the external prop value.
//
// An example of where this may happen is when a find occurs through the user selecting some text
// and pressing Mod-f.
if (!_this.isComposing && _this.props.findText !== ((_this$state = _this.state) === null || _this$state === void 0 ? void 0 : _this$state.localFindText)) {
_this.updateFindValue(_this.props.findText || '', onSynced);
}
});
_defineProperty(_this, "focusFindTextfield", function () {
var input = _this.findTextfieldRef.current;
if (_this.props.shouldFocus && input) {
input.select();
}
});
_defineProperty(_this, "handleFindChange", function (event) {
_this.updateFindValue(event.target.value);
});
// debounce (vs throttle) to not block typing inside find input while onFind runs
_defineProperty(_this, "debouncedFind", debounce(function (value) {
_this.props.onFind(value);
}, FIND_DEBOUNCE_MS));
_defineProperty(_this, "updateFindValue", function (value, onSynced) {
_this.setState({
localFindText: value
}, function () {
if (_this.isComposing) {
return;
}
onSynced && onSynced();
_this.debouncedFind(value);
});
_this.props.setFindTyped(true);
});
// throtlle between animation frames gives better experience on Enter compared to arbitrary value
// it adjusts based on performance (and document size)
_defineProperty(_this, "handleFindKeyDownThrottled", rafSchd(function (event) {
if (event.key === 'Enter') {
if (event.shiftKey) {
_this.props.onFindPrev({
triggerMethod: TRIGGER_METHOD.KEYBOARD
});
} else {
_this.props.onFindNext({
triggerMethod: TRIGGER_METHOD.KEYBOARD
});
}
} else if (event.key === 'ArrowDown') {
// we want to move focus between find & replace texfields when user hits up/down arrows
_this.props.onArrowDown();
}
}));
_defineProperty(_this, "handleFindKeyDown", function (event) {
if (_this.isComposing) {
return;
}
event.persist();
_this.handleFindKeyDownThrottled(event);
});
_defineProperty(_this, "handleFindKeyUp", function () {
_this.handleFindKeyDownThrottled.cancel();
});
_defineProperty(_this, "handleFindNextClick", function () {
if (_this.isComposing) {
return;
}
_this.props.onFindNext({
triggerMethod: TRIGGER_METHOD.BUTTON
});
});
_defineProperty(_this, "handleFindPrevClick", function () {
if (_this.isComposing) {
return;
}
_this.props.onFindPrev({
triggerMethod: TRIGGER_METHOD.BUTTON
});
});
_defineProperty(_this, "handleCompositionStart", function () {
_this.isComposing = true;
});
_defineProperty(_this, "handleCompositionEnd", function (event) {
_this.isComposing = false;
// type for React.CompositionEvent doesn't set type for target correctly
_this.updateFindValue(event.target.value);
});
_defineProperty(_this, "clearSearch", function () {
_this.props.onCancel({
triggerMethod: TRIGGER_METHOD.BUTTON
});
});
_defineProperty(_this, "handleMatchCaseClick", function () {
if (_this.props.onToggleMatchCase) {
_this.props.onToggleMatchCase();
_this.props.onFind(_this.props.findText);
}
});
_defineProperty(_this, "matchCaseIconEle", function (iconProps) {
return expValEquals('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? jsx(TextLetterCaseIcon, {
label: iconProps.label,
size: "small"
}) : jsx(MatchCaseIcon, {
label: _this.matchCase
});
});
var formatMessage = props.intl.formatMessage;
_this.find = formatMessage(messages.find);
_this.noResultsFound = formatMessage(messages.noResultsFound);
_this.matchCase = formatMessage(messages.matchCase);
// We locally manage the value of the input inside this component in order to support compositions.
// This requires some additional work inside componentDidUpdate to ensure we support changes that
// occur to this value which do not originate from this component.
_this.state = {
localFindText: ''
};
return _this;
}
_inherits(Find, _React$Component);
return _createClass(Find, [{
key: "componentDidMount",
value: function componentDidMount() {
var _this2 = this;
this.props.onFindTextfieldRefSet(this.findTextfieldRef);
// focus initially on dialog mount if there is no find text provided
if (!this.props.findText) {
// Wait for findTextfieldRef to become available then focus
setTimeout(function () {
_this2.focusFindTextfield();
}, 100);
}
this.syncFindText(function () {
// focus after input is synced if find text provided
if (_this2.props.findText) {
_this2.focusFindTextfield();
}
});
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps) {
var _this$state2,
_this3 = this;
// focus on update if find text did not change
if (this.props.findText === ((_this$state2 = this.state) === null || _this$state2 === void 0 ? void 0 : _this$state2.localFindText)) {
this.focusFindTextfield();
}
if (this.props.findText !== prevProps.findText && this.props.shouldFocus) {
this.syncFindText(function () {
// focus after input is synced if find text provided
if (_this3.props.findText) {
_this3.focusFindTextfield();
}
});
}
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
this.debouncedFind.cancel();
this.handleFindKeyDownThrottled.cancel();
}
}, {
key: "render",
value: function render() {
var _this$props = this.props,
findText = _this$props.findText,
count = _this$props.count,
shouldMatchCase = _this$props.shouldMatchCase,
formatMessage = _this$props.intl.formatMessage;
var resultsCount = formatMessage(messages.resultsCount, {
selectedMatchPosition: count.index + 1,
totalResultsCount: count.total
});
var elemAfterInput =
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
jsx("div", {
css: afterInputSection
}, jsx("div", {
"aria-live": "polite"
}, findText &&
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
jsx("span", {
"data-testid": "textfield-count",
css: [countStyles, countStylesAlternateStyles]
}, count.total === 0 ? this.noResultsFound : resultsCount)), jsx("div", {
css: matchCaseSection
}, jsx(FindReplaceTooltipButton, {
title: this.matchCase,
appearance: "default",
icon: this.matchCaseIconEle,
iconLabel: this.matchCase,
onClick: this.handleMatchCaseClick,
isPressed: shouldMatchCase
})));
return (
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
jsx("div", {
css: [sectionWrapperStyles, sectionWrapperStylesAlternate]
}, jsx("div", {
css: textFieldWrapper
}, jsx(Label, {
htmlFor: "find-text-field"
}, this.find), jsx(Textfield, {
name: "find",
id: "find-text-field",
testId: "find-field",
appearance: "standard",
value: this.state.localFindText,
ref: this.findTextfieldRef,
autoComplete: "off",
onChange: this.handleFindChange,
onKeyDown: this.handleFindKeyDown,
onKeyUp: this.handleFindKeyUp,
onBlur: this.props.onFindBlur,
onCompositionStart: this.handleCompositionStart,
onCompositionEnd: this.handleCompositionEnd,
elemAfterInput: elemAfterInput
})))
);
}
}]);
}(React.Component); // eslint-disable-next-line @typescript-eslint/ban-types
var _default_1 = injectIntl(Find);
export default _default_1;