/// import { BaseResource } from '../../pages/types'; import { SetNotificationType } from '../../Provider'; import { RecordPageType, WindowControlOptionsType } from '../../templates/RecordPage/types'; export type WindowProps = { /** * 一覧から選択したリソース * 一覧で見えている情報をそのまま利用したい場合は、RecordPageTemplateのpropsに差し込みます * 一覧と詳細でオブジェクト定義が異なる場合や、RecordPageを用いる場合などには、必ずしも用いる必要はありません */ resource?: R; /** * 内部からウインドウを閉じるための関数 */ onRequestClose: () => void; /** * サブウインドウを開くための関数です * idにはウインドウ上の操作によって開く別のウインドウのidを指定します * 原則として、サブウインドウは主ウインドウの左側に並べられるように出現します * * 表示されるサブウインドウのレイアウトは、以下のロジックによって決定します * - メインウインドウのレイアウトが 'screen' のとき * - サブウインドウは 'screen' で表示されます * - メインウインドウにpairedWindowIdが設定されていて、すでに2つのウインドウが並べて表示されているとき * - サブウインドウは 'screen' で表示されます * - 'drawer' 形式で、メインウインドウだけが表示されているとき * - サブウインドウは、サブウインドウに対して設定したレイアウト(layoutOptions.type)に従って表示されます * - 'drawer' 形式で、すでにほかのサブウインドウを含めて2つのウインドウが並べて表示されているとき * - サブウインドウが入れ替わる形で 'drawer' で表示されます * - 'drawer' 形式で、上に重なるように 'screen' なサブウインドウがほかに表示されているとき * - サブウインドウは 'screen' で表示されます */ onRequestOpenSubWindow: (props: { id: string; }) => void; /** * 通知を表示するための関数 * RecordPageTemplateを使用する場合には、RecordPageTemplateのpropsに差し込みます */ setNotification?: SetNotificationType; /** * 選択中のリソースのID * 通常は、RecordPageTemplateのpropsにそのまま流し込みます */ recordId: string; /** * 新規作成時に事前に設定した条件を示すID * 一覧画面から「追加」ボタンを押下したとき、作成したいもののカテゴリを事前に選択させて、その結果に応じて作成画面全体を出し分ける場合に使用します * defaultOperationOptions.new.preCondition の設定が必要です */ preCondition: string; /** * ウインドウを使用する場合にRecordPageTemplateに渡すオプション * 通常は、RecordPageTemplateのpropsにそのまま流し込みます * */ windowControlOptions: Pick; }; export type IndexPageWindowOptionsType = { /** * ウインドウを識別するためのidを指定します * ウインドウを開いているときのqueryKeyクエリパラメータの値として使用されます */ id: string; /** * レイアウトが 'drawer-scrim' | 'drawer' のとき、2つのウインドウを同時に、左右に並べて表示することができます * 主コンテンツとサブコンテンツを見比べて作業を行わせる場合に使用します * pairedWindowIdには、サブコンテンツとして表示するウインドウのidを指定します * 左側に主ウインドウ(このウインドウ)、右側にサブウインドウ(pairedWindowIdをidに持つウインドウ)が表示されます * * WARN: メインウインドウのレイアウトが 'screen' の場合、この指定は無効化され、サブウインドウは表示されません * 2つのウインドウを左右に並べて表示する場合は、メインウインドウのレイアウトも 'drawer-scrim' または 'drawer' に設定してください */ pairedWindowId?: string; /** * ウインドウをどのようなレイアウト(ドロワー・モーダル)で表示するかを指定します */ layoutOptions: { type: 'screen' | 'drawer-scrim' | 'drawer'; switchable?: boolean; size?: 'small' | 'medium' | 'full'; }; /** * ListAreaでの項目選択時に表示されるウインドウである場合に指定します * @default false * * listResourceRelatedがtrueのものがあれば、そのウインドウが利用されます * ひとつもtrueにしていないかつ、windows配列最初のlistResourceRelatedが未指定の場合、そのウインドウが自動的に利用されます * すべてのウインドウがリストの項目選択に無関係の場合は、すべてのウインドウに listResourceRelated: false を指定してください */ listResourceRelated?: boolean; /** * ウインドウを用いて開くことができるページの一覧 * @default ['detail', 'edit', 'new'] * * listResourceRelatedがtrueの場合、一覧画面での以下の挙動が自動的に変化します * new が含まれている場合: ヘッダーの「追加」ボタンを押下時にページ遷移をせずにウインドウを表示します * detail / edit が含まれている場合: リストから項目を押下時にページ遷移をせずにウインドウを表示します */ pages?: RecordPageType[]; /** * ウインドウ内部に表示するRecordPageコンポーネントを指定します * 返却するReactNodeには、RecordPageTemplateやRecordPageを使用してください */ render: ( /** * ウインドウ自身を制御するためのprops */ windowProps: WindowProps) => React.ReactNode; }; export type IndexPageWindowOptions = { /** * 現在表示しているウインドウを制御するためのクエリパラメータのキーを指定します * @default current_window * * 実装TODO: 一覧に複数の一覧がある場合を想定して、以下のように制御できるようにしておく * ?current_window=window1 になったり ?current_window=window2 になったり変化する */ queryKey?: string; /** * ウインドウ内で表示されるレコードを一意に特定するためのクエリパラメータのキーを指定します * 新規作成時など、recordIdが存在しない場合はこのクエリパラメータは付与されません * @default record_id * ?record_id=1 */ recordIdQueryKey?: string; /** * 新規作成を行う際に何らかの条件設定を行う場合に使用するクエリパラメータのキーを指定します * 詳細・編集時にはこのクエリパラメータは付与されません * @default pre_condition * ?pre_condition=virtual */ preConditionQueryKey?: string; /** * 表示するウインドウの一覧を設定します */ windows: IndexPageWindowOptionsType[]; }; /** * ウインドウの開閉を制御するためのコンポーネント * @experimental v3のリリースまでは、型定義に変更が入る可能性があります */ export type IndexWindowAreaProps = { windowOptions?: IndexPageWindowOptions; };