@atlaskit/editor-plugin-find-replace/dist/esm/ui/FindReplace.js

find replace plugin for @atlaskit/editor-core

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 */
/* eslint-disable @atlaskit/design-system/prefer-primitives */
/**
 * @jsxRuntime classic
 * @jsx jsx
 */
import React from 'react';

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
import { jsx } from '@emotion/react';
import { findReplaceMessages as messages } from '@atlaskit/editor-common/messages';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import Find from './Find';
import Replace from './Replace';
import { ruleStyles, wrapperPaddingStyles, wrapperStyles } from './ui-styles';
// eslint-disable-next-line @repo/internal/react/no-class-components
var FindReplace = /*#__PURE__*/function (_React$PureComponent) {
  function FindReplace(props) {
    var _this;
    _classCallCheck(this, FindReplace);
    _this = _callSuper(this, FindReplace, [props]);
    _defineProperty(_this, "findTextfield", null);
    _defineProperty(_this, "replaceTextfield", null);
    _defineProperty(_this, "state", {
      findTyped: false
    });
    _defineProperty(_this, "setFindTyped", function (value) {
      _this.setState({
        findTyped: value
      });
    });
    _defineProperty(_this, "setFindTextfieldRef", function (findTextfieldRef) {
      _this.findTextfield = findTextfieldRef.current;
    });
    _defineProperty(_this, "setReplaceTextfieldRef", function (replaceTextfieldRef) {
      _this.replaceTextfield = replaceTextfieldRef.current;
    });
    _defineProperty(_this, "setFocusToFind", function () {
      if (_this.findTextfield) {
        _this.findTextfield.focus();
      }
    });
    _defineProperty(_this, "setFocusToReplace", function () {
      if (_this.replaceTextfield) {
        _this.replaceTextfield.focus();
      }
    });
    _this.modalRef = /*#__PURE__*/React.createRef();
    return _this;
  }
  _inherits(FindReplace, _React$PureComponent);
  return _createClass(FindReplace, [{
    key: "render",
    value: function render() {
      var _this$props = this.props,
        findText = _this$props.findText,
        count = _this$props.count,
        isReplaceable = _this$props.isReplaceable,
        shouldFocus = _this$props.shouldFocus,
        onFind = _this$props.onFind,
        onFindBlur = _this$props.onFindBlur,
        onFindNext = _this$props.onFindNext,
        onFindPrev = _this$props.onFindPrev,
        onCancel = _this$props.onCancel,
        replaceText = _this$props.replaceText,
        onReplace = _this$props.onReplace,
        onReplaceAll = _this$props.onReplaceAll,
        dispatchAnalyticsEvent = _this$props.dispatchAnalyticsEvent,
        allowMatchCase = _this$props.allowMatchCase,
        shouldMatchCase = _this$props.shouldMatchCase,
        onToggleMatchCase = _this$props.onToggleMatchCase,
        intl = _this$props.intl;
      var focusToolbarButton = this.props.focusToolbarButton || function () {};
      return jsx("div", {
        role: 'dialog',
        "aria-label": intl === null || intl === void 0 ? void 0 : intl.formatMessage(messages.findReplaceDialogAriaLabel),
        "aria-modal": false,
        ref: this.modalRef
        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
        ,
        css: [wrapperStyles, wrapperPaddingStyles]
      }, jsx(Find, {
        allowMatchCase: allowMatchCase,
        shouldMatchCase: shouldMatchCase,
        onToggleMatchCase: onToggleMatchCase,
        findText: findText,
        count: count,
        shouldFocus: shouldFocus,
        onFind: onFind,
        onFindBlur: onFindBlur,
        onFindPrev: onFindPrev,
        onFindNext: onFindNext,
        onFindTextfieldRefSet: this.setFindTextfieldRef,
        onCancel: onCancel,
        onArrowDown: this.setFocusToReplace,
        findTyped: this.state.findTyped,
        setFindTyped: this.setFindTyped
      }), jsx("hr", {
        role: "presentation",
        css: ruleStyles,
        id: "replace-hr-element"
      }), jsx(Replace, {
        canReplace: expValEquals('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? !!isReplaceable : count.total > 0,
        replaceText: replaceText,
        onReplace: onReplace,
        onReplaceAll: onReplaceAll,
        onReplaceTextfieldRefSet: this.setReplaceTextfieldRef,
        onArrowUp: this.setFocusToFind,
        onCancel: onCancel,
        count: count,
        onFindPrev: onFindPrev,
        onFindNext: onFindNext,
        dispatchAnalyticsEvent: dispatchAnalyticsEvent,
        findTyped: this.state.findTyped,
        setFindTyped: this.setFindTyped,
        focusToolbarButton: focusToolbarButton
      }));
    }
  }]);
}(React.PureComponent);
export default FindReplace;