useCsView

useCsView は、画面項目を 1 つの View（画面）として初期化するためのフックです。カスタムバリデーションルールの定義オブジェクトやバリデーションの実行タイミングなど、追加のオプションを指定できます。

シグネチャ

useCsView(definitions, options?, validationEventHook?): CsView & D

引数

引数名	必須	型	説明
definitions	〇	D extends CsViewDefinition*¹	開発者が定義した画面項目の型を指定します。画面項目には入力項目定義のフックやイベント定義のフックを指定できます。
options		readonly?: boolean, customValidationRules?: AppValidationRules extends CustomValidationRules,*² validationTrigger?: "onSubmit" | "onBlur"	readonlyには読み取り専用にするかどうかを指定します。 デフォルトはfalseです。 customValidationRulesには適用したいカスタムバリデーションルールの定義オブジェクトを指定します。詳細はカスタムバリデーションの追加方法を参照してください。 validationTriggerにはバリデーションの実行タイミングを指定します。onSubmitはボタン押下時、onBlurは入力項目からフォーカスが外れたタイミングでバリデーションを実行します。デフォルトはonSubmitです。
validationEventHook		(instance: CsView & D, customValidationRules?: CustomValidationRules*²) => CsValidationEvent*³	利用者は直接指定することは通常ありません。 導入ツールでインストールした際にYupかZodのイベントが指定されるようになっています。

*1: CsViewDefinitionは、キーがstring、値がCsItemBaseまたはCsEventのみを許容するRecord型です。

*2: CustomValidationRulesは、キーがルール名で、値がCustomValidationRuleのオブジェクトです。

*3: CsValidationEventはバリデーション処理を行うイベントです。Yup の実装クラスと Zod の実装クラスがあります。

返り値

画面項目が 1 つに集約されたCsViewの拡張クラスのインスタンスを返します。 返り値の正確な型は CsView & D で、D は、定義した画面項目とイベントのオブジェクトの型になります。

使用例

const view = useCsView(
  {
    title: useCsInputTextItem("タイトル", useInit(""), stringRule(true, 1, 10)),
    description: useCsTextAreaItem(
      "説明",
      useInit(""),
      stringRule(true, 1, 100)
    ),
    createButton: useCsRqMutateButtonClickEvent(usePostTodo()),
  },
  {
    readonly: true,
    customValidationRules: {
      ...buildInCustomValidationRules, // 組み込みのルールオブジェクトを指定
      ...myCustomValidationRules, // 独自のルールオブジェクトを指定
    }
    validationTrigger: "onBlur",
  }
);