メインコンテンツまでスキップ

組織作成ブロック

CreateOrganization は MUI ベースの制御型組織申請フォームです。

インストール​

npm install @nodeblocks/frontend-create-organization-block

必要なもの​

項目理由
dataフォーム状態の単一の信頼源。構造は establishmentDate のようなカスタムフィールドで拡張できます
onDataChange検証、分析、または副作用のための更新済み状態とメタデータを受け取ります
errors (optional)データパスをキーにしたフィールドエラー
termsOfUseUrl (optional)コンプライアンスセクションの利用規約リンク先 URL
privacyAgreementUrl (optional)コンプライアンスセクションのプライバシーポリシーリンク先 URL
onSearchAddressClick (optional)CompanyAddress.PostCode の郵便番号検索ボタンを処理します
制御コンポーネント

CreateOrganization はフォーム状態を保持しません。状態はアプリ側で管理し、data を通して渡してください。デフォルトのフォームデータには、アカウント保持者フィールド、会社詳細、コンプライアンスチェックボックスが含まれ、establishmentDate のようなカスタムフィールドにも拡張できます。

コード例​

ライブエディター
function Example() {
  const defaultData = {
    applicationUserName: '',
    applicationUserEmail: '',
    applicationUserPhoneNumber: '',
    companyName: '',
    postcode: '',
    cityTownVillage: '',
    townStreetBuilding: '',
    representivePersonName: '',
    representativePhoneNumber: '',
    companyUrl: '',
    additionalInformation: '',
    establishmentDate: '',
    prefecture: '',
    capital: '',
    numberOfEmployees: '',
    userAgreement: '',
    privacyPolicy: '',
  };

  const [data, setData] = React.useState(defaultData);

  return (
    <CreateOrganization
      data={data}
      onDataChange={setData}
      termsOfUseUrl="/terms-of-use"
      privacyAgreementUrl="/privacy-policy"
      onSearchAddressClick={() => {
        setData((current) => ({ ...current }));
      }}
      onSubmit={(event) => {
        event.preventDefault();
        setData((current) => ({ ...current }));
      }}
    />
  );
}
結果
Loading...

重要なプロパティ​

コアプロパティ​

プロパティ型必須デフォルト説明
dataCreateOrganizationFormData ({ applicationUserName?, applicationUserEmail?, applicationUserPhoneNumber?, companyName?, postcode?, cityTownVillage?, townStreetBuilding?, representivePersonName?, representativePhoneNumber?, companyUrl?, additionalInformation?, prefecture?, capital?, numberOfEmployees?, userAgreement?, privacyPolicy? } or extended Record<string, unknown>)Yes-制御されたフォームデータオブジェクト
onDataChange(data, meta) => voidYes-更新時に呼び出されます。meta には name, value, cause（input, change, blur, clear, reset, programmatic）、および任意の event が含まれます
errors{ [fieldName: string]: string | string[] }Noundefinedデータパスをキーにしたフィールドエラー; common keys include the account-holder fields, company fields, userAgreement, privacyPolicy, and custom extension fields such as establishmentDate
termsOfUseUrlstringNo'/terms-of-use'コンプライアンスチェックボックス内の利用規約リンク先 URL
privacyAgreementUrlstringNo'/privacy-policy'コンプライアンスチェックボックス内のプライバシーポリシーリンク先 URL
onSearchAddressClickMouseEventHandler<HTMLButtonElement>NoundefinedCompanyAddress.PostCode の郵便番号検索ボタンを有効にします

コンテンツプロパティ​

ルートの labels prop は公開されていません。代わりに、入れ子のコンパウンドコンポーネントで文言を上書きしてください。

レイアウトと構成のプロパティ​

プロパティ型必須デフォルト説明
componentStackProps<'form'>['component']No'form'ルートコンテナ要素
childrenReactNode or block override functionNoundefinedコンパウンドコンポーネント用の JSX children を渡すか、ブロックをオーバーライドする関数を渡します
classNamestringNoundefinedルートコンテナの追加クラス名
sxStackProps<'form'>['sx']Noundefinedルートコンテナ用の MUI sx スタイリング

children を除く StackProps<'form'> の props を継承します。ルートはデフォルトで title, description, form を描画します。Form はその後、AccountHolder, CompanyInformation, Compliance, SubmitButton を組み立てます。

デフォルト UI ブロック​

ブロックMUI ベースコンポーネント備考
CreateOrganizationStackルートプロバイダー兼レイアウトコンテナ。component="form" がデフォルトで、レスポンシブな余白を備えます
TitleTypographyデフォルト文言は 組織を作成する です
DescriptionTypographyデフォルト文言は申請フローを説明し、必須フィールドを示します
FormStackデフォルトレイアウトはアカウント保持者、会社情報、コンプライアンス、送信セクションをまとめます
Form.AccountHolderStackデフォルトのセクションタイトルは 連絡先情報 です
Form.AccountHolder.SectionTitleTypographyデフォルト文言は 連絡先情報 です
Form.AccountHolder.NameTextFieldname="applicationUserName"、デフォルトラベルは 氏名、デフォルトプレースホルダーは 名前を入力 です
Form.AccountHolder.EmailTextFieldname="applicationUserEmail"、デフォルトラベルは メールアドレス、デフォルトプレースホルダーは メールアドレスを入力 です
Form.AccountHolder.ContactTextFieldname="applicationUserPhoneNumber"、デフォルトラベルは 電話番号、デフォルトプレースホルダーは 電話番号を入力 です
Form.CompanyInformationStackデフォルトのセクションタイトルは 会社情報 です
Form.CompanyInformation.SectionTitleTypographyデフォルト文言は 会社情報 です
Form.CompanyInformation.CompanyNameTextFieldname="companyName"、デフォルトラベルは 会社名、デフォルトプレースホルダーは 会社名を入力 です
Form.CompanyInformation.CompanyAddressStack郵便番号、都道府県、市区町村、住所、代表者連絡先フィールドをまとめる入れ子の住所セクション
Form.CompanyInformation.CompanyAddress.LocationTitleTypographyデフォルト文言は 本社所在地 です
Form.CompanyInformation.CompanyAddress.PostCodeStack + TextField + Buttonname="postcode"、デフォルトラベルは 郵便番号、デフォルトプレースホルダーは 郵便番号を入力、検索ボタン文言のデフォルトは 住所を検索 です
Form.CompanyInformation.CompanyAddress.PrefectureTextFieldname="prefecture"、デフォルトラベルは 都道府県、デフォルトプレースホルダーは 都道府県を選択、選択肢のデフォルトは英語表記の都道府県一覧です
Form.CompanyInformation.CompanyAddress.CityTextFieldname="cityTownVillage"、デフォルトラベルは 市区町村、デフォルトプレースホルダーは 市区町村を入力 です
Form.CompanyInformation.CompanyAddress.TownAddressTextFieldname="townStreetBuilding"、デフォルトラベルは 住所、デフォルトプレースホルダーは 町名、街路、建物番号を入力 です
Form.CompanyInformation.CompanyAddress.RepresentativePersonNameTextFieldname="representivePersonName"、デフォルトラベルは 代表者名、デフォルトプレースホルダーは 代表者の氏名を入力 です
Form.CompanyInformation.CompanyAddress.RepresentativeContactTextFieldname="representativePhoneNumber"、デフォルトラベルは 代表者電話番号、デフォルトプレースホルダーは 代表者の電話番号を入力 です
Form.CompanyInformation.CompanyCapitalStack + TextField + Typographyname="capital"、デフォルトラベルは 資本金、デフォルトプレースホルダーは 会社の資本金を入力、接尾辞は 円 です
Form.CompanyInformation.CompanySizeStack + TextField + Typographyname="numberOfEmployees"、デフォルトラベルは 従業員数、デフォルトプレースホルダーは 会社の従業員数を入力、接尾辞は 人 です
Form.CompanyInformation.HomePageUrlTextFieldname="companyUrl"、デフォルトラベルは ホームページ URL、デフォルトプレースホルダーは 会社のホームページ URL を入力 です
Form.CompanyInformation.AdditionalInformationTextFieldname="additionalInformation"、デフォルトラベルは 追加情報、デフォルトプレースホルダーは 会社の説明を入力、複数行入力が有効です
Form.ComplianceStack大画面では横並び、小画面では縦並びのデフォルトのコンプライアンス行
Form.Compliance.CheckUserAgreementFormControl + FormControlLabel + Checkbox + Linkname="userAgreement"、デフォルト文言は 利用規約に同意します。、リンク先は termsOfUseUrl または /terms-of-use（新しいタブで開きます）です
Form.Compliance.CheckPrivacyAgreementFormControl + FormControlLabel + Checkbox + Linkname="privacyPolicy"、デフォルト文言は プライバシーポリシーに同意します。、リンク先は privacyAgreementUrl または /privacy-policy（新しいタブで開きます）です
Form.SubmitButtonButtonデフォルト文言は 送信 です

追加フィールドプリミティブ​

プリミティブMUI ベースコンポーネント備考
DateFieldLocalizationProvider + DatePickerカスタムフロー向けに CreateOrganization.DateField としてエクスポートされます。デフォルトの表示形式は yyyy/MM/dd、保存値の形式は yyyy-MM-dd、デフォルトロケールは en-US です

TypeScript​

export type CreateOrganizationFormData =
  | {
      applicationUserName?: string;
      applicationUserEmail?: string;
      applicationUserPhoneNumber?: string;
      companyName?: string;
      postcode?: string;
      cityTownVillage?: string;
      townStreetBuilding?: string;
      representivePersonName?: string;
      representativePhoneNumber?: string;
      companyUrl?: string;
      additionalInformation?: string;
      prefecture?: string;
      capital?: string;
      numberOfEmployees?: string;
      userAgreement?: string;
      privacyPolicy?: string;
    }
  | Record<string, unknown>;