import { AlertMessageType } from "../Alert"; import { AssertType } from "../@types/AssertType"; import { UnionToIntersection } from "../@types/UnionToIntersection"; import { CSVImportUIScreenTitles } from "./screens/types"; export type { CSVImportUIScreenTitles }; export type Mode = "create" | "update"; export type CellError = [string, string]; export type CSVImportUIColumn = Readonly<{ label: string; description?: string; type?: "date" | "number"; options?: readonly string[]; required?: boolean; hiddenOnCreateTemplate?: boolean; /** * アップロードされたCSVにヘッダーがなければ表示しない。 */ hiddenIfNoHeader?: boolean; renderCell?: (props: { value: string; header: string; row: Record; }) => React.JSX.Element; }>; /** * ライブラリ利用者用の型 */ export type CSVImportUIColumns = Record; export interface CSVImportUIRenderSearchFieldProps { onChange: (args: Row[]) => void; } type OptionByLabel = { [Key in keyof Columns]: Record; }[keyof Columns]; export type CSVImportUIRow = AssertType>, Record>; export interface CSVImportUIProps = CSVImportUIRow> { /** * 利用できるモードを指定する。 */ acceptMode: Mode[]; /** * アップロード画面に進む前にトリガーされる。 * 行ごとにデータを処理する。 * * onPreUploadDataが指定されている場合、こちらは無視される。 * * この関数内でsetStateを使用すると、行ごとの処理で過剰なレンダリングを引き起こす可能性があります。 * 状態更新が必要な場合は、以下の方法を検討してください: * - onPreUploadDataを使用して一括でデータを処理する * - 複数の更新をバッチ処理して、すべての行の処理後に一度だけ状態を更新する * - レンダリングを必要としない中間値にはuseRefを使用する */ onPreUploadDataByRow?: (args: { index: number; /** * 欠損したフィールドがある可能性があるため、型を緩くする。 */ row: Partial; mode: Mode; }) => Promise<{ /** * @deprecated 代わりに `errors` を使用してください。 */ error?: CellError; errors?: CellError[]; data?: Record; }>; /** * アップロード画面に進む前にトリガーされる。 * 一括でデータをアップロードする。 * * 現状onPreUploadDataByRowByRowとは異なり、行ごとにエラーを表示することはできない。 * 代わりに、エラー時に表示されるアラートのメッセージをerrorMessageで指定する。 * * 行毎にエラーを表示したくなった場合は、要望を出すこと。 */ onPreUploadData?: (args: { data: Partial[]; mode: Mode; }) => Promise<{ errorMessage?: AlertMessageType; data?: Record[]; }>; /** * CSVをパースしたデータのアップロードがトリガーされた際に呼ばれる。 * 行ごとにデータをアップロードする。 * * onUploadDataが指定されている場合、こちらは無視される。 * * この関数内でsetStateを使用すると、行ごとの処理で過剰なレンダリングを引き起こす可能性があります。 * 状態更新が必要な場合は、以下の方法を検討してください: * - onUploadDataを使用して一括でデータを処理する * - 複数の更新をバッチ処理して、すべての行の処理後に一度だけ状態を更新する * - レンダリングを必要としない中間値にはuseRefを使用する */ onUploadDataByRow?: (args: { index: number; /** * 欠損したフィールドがある可能性があるため、型を緩くする。 */ row: Partial; mode: Mode; }) => Promise<{ /** * @deprecated 代わりに `errors` を使用してください。 */ error?: CellError; errors?: CellError[]; data?: Record; }>; /** * CSVをパースしたデータのアップロードがトリガーされた際に呼ばれる。 * 一括でデータをアップロードする。 * * 現状onUploadDataByRowとは異なり、行ごとにエラーを表示することはできない。 * 代わりに、エラー時に表示されるアラートのメッセージをerrorMessageで指定する。 * * 行毎にエラーを表示したくなった場合は、要望を出すこと。 */ onUploadData?: (args: { data: Partial[]; mode: Mode; }) => Promise<{ errorMessage?: AlertMessageType; data?: Record[]; }>; /** * 検索フォームのラベルとして利用される。 * (only upload mode) */ searchLabel?: string; /** * 検索が行われた際にトリガーされる。 * ユーザーの入力した文字列に応じてデータを返却する。このデータはCSVとしてダウンロードされる。 * (only upload mode) */ onSearchData?: (args: { value: string; }) => Promise<{ data: Row[]; }>; /** * CSVの各列をどのように表示するか指定する。 * 各列には、次のプロパティが指定できる。 * * `label` : CSVのヘッダーとして利用される。 * * `type` : `date`または`number`が指定でき、それぞれ日付と数値としてアップロードされたCSVの値が正しいかどうかを検証する。 * * `options` : その列が持てる値のリストを指定する。アップロードされたCSVの値がこのリストに含まれているかどうかを検証する。 * * `required` : その列が必須かどうかを指定する。アップロードされたCSVの値が空でないかどうかを検証する。 * * `renderCell` : その列のセルをどのように表示するかを指定する。その列の値、ヘッダー、行のデータが渡される。 * * `hiddenOnCreateTemplate` : 作成用のCSVのテンプレートに、その列を表示しないかどうかを決定する。 * * `hiddenIfNoHeader` : アップロードされたCSVにそのヘッダーがなければ、その列を表示しないかどうかを決定する。 */ columns: Columns; /** * ダウンロードされるCSVに付与されるプレフィックスを指定する */ csvPrefix?: string; /** * CSVのダウンロードがトリガーされたときに呼ばれる */ onDownloadCSV: (args: { data: Row[]; filename: string; }) => void; /** * CSVがアップロードされたときに呼ばれる */ csvParser: (args: { file: File; }) => Promise<{ data: Record[]; }>; /** * アップロードされたCSVのデータをバリデーションする。 */ csvValidator?: (args: { /** * ここで渡されるデータがRowと一致するとは限らない。 */ row: Record; }) => Promise<{ errors?: CellError[]; }>; /** * 更新モードで検索のカスタマイズをする。 * 省略するとonSearchData, searchLabelを用いた単一の検索フィールドが表示される。これを指定するとonSearchData, searchLabelは無視される。 * (only upload mode) */ renderSearchField?: (props: CSVImportUIRenderSearchFieldProps) => React.JSX.Element; /** * 編集用CSVをダウンロードするページをスキップする */ skipDownloadTemplate?: boolean; /** * 更新用のCSVをダウンロードする際にデフォルトで表示されるデータを指定する。 */ defaultTemplateData?: Row[]; /** * ダウンロードテンプレートで利用する項目を選択するかどうかを指定する。 * デフォルトでは、hiddenOnCreateTemplateが指定されていない列の全ての項目が追加される。 * @default false */ selectDownloadTemplateColumns?: boolean; /** * 各スクリーンのタイトルを上書きする。 * * CSVImportUIは作成・更新を主な用途としているため、デフォルトのタイトルには * 「作成」「更新」「アップロード」といった文言が含まれる。 * それ以外の用途で利用する場合は、このpropで適切なタイトルに差し替えることを推奨する。 * * @example * ```tsx * screenTitles={{ * selectMode: "操作の選択", * downloadCreateTemplate: "登録用CSVのダウンロード", * downloadUpdateTemplate: "編集用CSVのダウンロード", * loadCSV: "CSVの読み込み", * uploadCSV: "実行", * complete: "完了しました", * }} * ``` */ screenTitles?: CSVImportUIScreenTitles; } export declare const CSVImportUI: = CSVImportUIRow>(props: CSVImportUIProps) => import("@emotion/react/jsx-runtime").JSX.Element;