Content Hubユーザー
ページ
ページコンポーネント
外
例
検索内で外部コンポーネントアクションを使用する

検索内で外部コンポーネントアクションを使用する

日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

次のReactの例では、検索内で外部コンポーネントアクションを使用しています。この例では、setModalOperationsプロパティを使用して、モーダルフッターにボタンと関連する動作を追加し、検証を実行する方法を示します。 setModalOperationsプロパティは、モーダル演算の配列を持つ関数です。

メモ

setModalOperationsプロパティは、外部コンポーネントアクション内の外部コンポーネントでのみ使用できる追加のプロパティです。

モーダル操作には、次のインターフェイスがあります。

interface ModalOperationConfig {
    name: string;
    id: string;
    label: string;
    displayType?: DisplayType;
    className?: string;
    onValidate?: () => boolean | Promise<boolean>;
    onClick?: (event?: unknown) => void | Promise<void>;
    onMouseOver?: (event?: unknown) => void | Promise<void>;
    onContextMenu?: (event?: unknown) => void | Promise<void>;
}

displayTypeのオプションは、link、default、primary、およびsecondaryです。

import ReactDOM from "react-dom";
import React from "react";
const OptionsContext = React.createContext<any>(null);
type ModalOperationConfig = {
  name: string;
  id: string;
  label: string;
  displayType?: "link" | "default" | "primary" | "secondary" | "none";
  className?: string;
  onValidate?: () => boolean | Promise<boolean>;
  onClick?: (event?: unknown) => void | Promise<void>;
  onMouseOver?: (event?: unknown) => void | Promise<void>;
  onContextMenu?: (event?: unknown) => void | Promise<void>;
};
export default function createExternalRoot(container: HTMLElement) {
  return {
    render(context: any) {
      const {
        api: { notifier },
        options: { setModalOperations, ...options },
      } = context;

      const okButtonConfig: ModalOperationConfig = {
        name: "ok",
        id: "ok",
        label: "Ok",
        displayType: "primary",
        onValidate: () => {
          console.log("validating async...");
          return new Promise((resolve) =>
            setTimeout(() => {
              const isValid = Math.random() > 0.5;
              if (!isValid) {
                notifier.notifyError("Invalid!");
              }
              resolve(isValid);
            }, 500)
          );
        },
        onClick: () => {
          notifier.notifySuccess("Success!");
        },
        onMouseOver: () => {
          console.log("mouseover");
        },
      };

      const cancelButtonConfig: ModalOperationConfig = {
        name: "cancel",
        id: "cancel",
        label: "Cancel",
        onClick: () => {
          notifier.notifyInfo("Canceled");
        },
      };

      setModalOperations([okButtonConfig, cancelButtonConfig]);

      ReactDOM.render(
        <OptionsContext.Provider value={options}>
          <OptionsContext.Consumer>
            {(options) => {
              return (
                <>
                  <div>
                    Showing a modal for entity with id {options.entityId}.
                  </div>
                  <div>Showing a rendition of the entity</div>
                  <img
                    src={context?.entity?.renditions?.preview?.[0]}
                    style={{ maxWidth: "100%" }}
                  />
                </>
              );
            }}
          </OptionsContext.Consumer>
        </OptionsContext.Provider>,
        container
      );
    },
    unmount() {
      ReactDOM.unmountComponentAtNode(container);
    },
  };
}

この記事を改善するための提案がある場合は、お知らせください!