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

find replace plugin for @atlaskit/editor-core

import _defineProperty from "@babel/runtime/helpers/defineProperty";
/* 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 { css, jsx } from '@emotion/react';
import { findReplaceMessages as messages } from '@atlaskit/editor-common/messages/find-replace';
import Find from './Find';
import Replace from './Replace';
import { ruleStyles, wrapperPaddingStyles, wrapperStyles } from './ui-styles';

// Magic number taken from ./FindReplaceToolbarButton.tsx
const dropdownWidth = 382;

// Without replace the find row is the widest row, so the popup would size to it and
// change width as the match counter appears. Pin it to the width the dropdown reserves.
const findOnlyWidthStyles = css({
  boxSizing: 'border-box',
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
  width: `${dropdownWidth}px`,
  maxWidth: '100%'
});
// eslint-disable-next-line @repo/internal/react/no-class-components
class FindReplace extends React.PureComponent {
  constructor(props) {
    super(props);
    _defineProperty(this, "findTextfield", null);
    _defineProperty(this, "replaceTextfield", null);
    _defineProperty(this, "state", {
      findTyped: false
    });
    _defineProperty(this, "setFindTyped", value => {
      this.setState({
        findTyped: value
      });
    });
    _defineProperty(this, "setFindTextfieldRef", findTextfieldRef => {
      this.findTextfield = findTextfieldRef.current;
    });
    _defineProperty(this, "setReplaceTextfieldRef", replaceTextfieldRef => {
      this.replaceTextfield = replaceTextfieldRef.current;
    });
    _defineProperty(this, "setFocusToFind", () => {
      if (this.findTextfield) {
        this.findTextfield.focus();
      }
    });
    _defineProperty(this, "setFocusToReplace", () => {
      if (this.replaceTextfield) {
        this.replaceTextfield.focus();
      }
    });
    this.modalRef = /*#__PURE__*/React.createRef();
  }
  render() {
    const {
      findText,
      count,
      isReplaceable,
      shouldFocus,
      onFind,
      onFindBlur,
      onFindNext,
      onFindPrev,
      onCancel,
      replaceText,
      onReplace,
      onReplaceAll,
      dispatchAnalyticsEvent,
      allowMatchCase,
      shouldMatchCase,
      onToggleMatchCase,
      intl,
      allowReplace = true
    } = this.props;
    const focusToolbarButton = this.props.focusToolbarButton || (() => {});
    return jsx("div", {
      role: 'dialog',
      "aria-label": intl === null || intl === void 0 ? void 0 : intl.formatMessage(allowReplace ? messages.findReplaceDialogAriaLabel : messages.findDialogAriaLabel),
      "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, !allowReplace && findOnlyWidthStyles]
    }, 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
    }), allowReplace &&
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
    jsx("hr", {
      role: "presentation",
      css: ruleStyles,
      id: "replace-hr-element"
    }), jsx(Replace, {
      allowReplace: allowReplace,
      canReplace: !!isReplaceable,
      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
    }));
  }
}
export default FindReplace;