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

招待承諾ブロック

AcceptInvitation は MUI 上に構築された制御済みの招待承諾フォームブロックです。

インストール​

npm install @nodeblocks/frontend-accept-invitation-block

必要なもの​

項目重要な理由
dataフォーム状態の単一の信頼できる情報源 (name, password, confirmPassword)
onDataChangeフィールド変更時に更新済みの state とメタデータを受け取る
email (optional)フォームの上に表示される読み取り専用の招待メール
errors (optional)フィールド単位のエラー表示を行う
制御されたコンポーネント

AcceptInvitation はフォーム state を所有しません。state はアプリ側で保持し、data を通じて渡してください。

コード例​

ライブエディター
function Example() {
  const defaultData = {
    name: '',
    password: '',
    confirmPassword: '',
  };

  const [data, setData] = React.useState(defaultData);
  const [errors, setErrors] = React.useState({});

  const handleDataChange = (nextData, meta) => {
    const {[meta.name]: _removed, ...restErrors} = errors;
    let nextErrors = restErrors;

    // Validate required fields on blur (same pattern as storybook)
    if (meta.cause === 'blur') {
      nextErrors = {...restErrors};
      if (meta.name === 'name' && !String(nextData.name || '').trim()) {
        nextErrors.name = 'Name is required.';
      }
      if (meta.name === 'password' && !nextData.password) {
        nextErrors.password = 'Password is required.';
      }
      if (meta.name === 'confirmPassword' && !nextData.confirmPassword) {
        nextErrors.confirmPassword = 'Please confirm your password.';
      }
    }

    setErrors(nextErrors);
    setData(nextData);
  };

  return (
    <AcceptInvitation
      data={data}
      email="invited@example.com"
      errors={Object.keys(errors).length ? errors : undefined}
      onDataChange={handleDataChange}
      onSubmit={e => {
        e.preventDefault();
        alert(`Submit:\n${JSON.stringify(data, null, 2)}`);
      }}
    />
  );
}
結果
Loading...

重要な props​

コア props​

PropTypeRequiredDefaultDescription
dataAcceptInvitationFormData ({ name, password, confirmPassword } or extended Record<string, unknown>)Yes-現在のフォーム data オブジェクト
onDataChange(data, meta) => voidYes-更新時に呼び出されます。meta には name, value, cause (input, change, blur, clear, reset, programmatic), optional event が含まれます
errors{ [fieldName: string]: string | string[] }Noundefineddata のフィールド名 (name, password, confirmPassword) に紐づくフィールドエラーを表示します

コンテンツ props​

PropTypeRequiredDefaultDescription
emailstringNoundefined読み取り専用の招待メールアドレス
labels{ acceptInvitationTitle?, emailDisplay?, nameField?, passwordField?, confirmPasswordField?, acceptInvitationButton? }NoacceptInvitationTitle: 'アカウント作成', emailDisplay: 'メールアドレス', nameField: '氏名', passwordField: 'パスワード', confirmPasswordField: 'パスワード再入力', acceptInvitationButton: 'アカウントを作成'デフォルトのテキストラベルを上書き
placeholders{ nameField?, passwordField?, confirmPasswordField? }NonameField: '氏名を入力', passwordField: 'パスワードを入力', confirmPasswordField: 'パスワードを再入力'フィールドのプレースホルダーを上書き

レイアウトと構成 props​

PropTypeRequiredDefaultDescription
childrenBlocksOverride | ReactNodeNoundefinedデフォルトのブロックを上書きするか、カスタムの JSX children を提供します
componentReact.ElementTypeNo'form'ルート要素の型
classNamestringNoundefinedルートコンテナのクラス名
sxSxPropsNoundefinedルートコンテナ向けの MUI システムスタイル

AcceptInvitation は StackProps<'form'>（children を除く）も継承するため、onSubmit、id、noValidate などの標準的なフォーム props がサポートされます。オーバーライドなしのデフォルトのブロック順は acceptInvitationTitle, form (defaultBlockOrder) です。

デフォルト UI ブロック​

BlockBuilt onNotes
AcceptInvitation (root)Stack (component="form")制御されたフォームコンテナ。デフォルトの最大幅は 496px
AcceptInvitation.AcceptInvitationTitleTypographyタイトルテキストブロック。デフォルトは アカウント作成
AcceptInvitation.FormStackフォームフィールドのコンテナ（送信はルート form が処理）
AcceptInvitation.Form.EmailDisplayTypography + Stack読み取り専用の招待メール表示。ラベルのデフォルトは メールアドレス。ルートの email prop を使用
AcceptInvitation.Form.NameFieldTextFieldname="name"; required; autoComplete="name"; デフォルト 氏名 / 氏名を入力
AcceptInvitation.Form.PasswordFieldTextField + IconButtonname="password"; required; autoComplete="new-password"; デフォルト パスワード / パスワードを入力; 表示切替あり
AcceptInvitation.Form.ConfirmPasswordFieldTextField + IconButtonname="confirmPassword"; required; autoComplete="new-password"; デフォルト パスワード再入力 / パスワードを再入力; 表示切替あり
AcceptInvitation.Form.AcceptInvitationButtonButton送信ボタン (variant="contained", size="large", fullWidth, type="submit"); デフォルト アカウントを作成

TypeScript​

import {AcceptInvitation, AcceptInvitationFormData} from '@nodeblocks/frontend-accept-invitation-block';

type MyAcceptInvitationData = AcceptInvitationFormData & {
  inviteToken?: string;
};