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

招待リストブロック

ListInvitesコンポーネントは、ReactとTypeScriptで構築された完全にカスタマイズ可能でアクセシブルな招待管理インターフェースです。モダンなデザインパターン、アクションドロップダウン、ページネーションサポート、ローディング状態、および高度な招待管理アプリケーション向けの柔軟なカスタマイズオプションを備えた完全な表形式招待リスト体験を提供します。

🚀 インストール​

npm install @nodeblocks/frontend-list-invites-block

📖 使用方法​

import {ListInvites} from '@nodeblocks/frontend-list-invites-block';
ライブエディター
function BasicListInvites() {
  const [isLoading, setIsLoading] = useState(false);

  const inviteData = [
    {
      id: '1',
      name: '田中太郎',
      email: 'tanaka.taro@example.com',
      status: 'pending'
    },
    {
      id: '2',
      name: '佐藤花子',
      email: 'sato.hanako@example.com',
      status: 'accepted'
    },
    {
      id: '3',
      name: '鈴木次郎',
      email: 'suzuki.jiro@example.com',
      status: 'expired'
    }
  ];

  const labels = {
    emptyStateMessage: '招待が見つかりません',
    actions: {
      inviteUser: 'ユーザーを招待'
    },
    headerRow: {
      name: '名前',
      email: 'メールアドレス',
      status: 'ステータス'
    },
    rowActions: {
      reject: '招待を拒否'
    },
    unsetDateMessage: '日付未設定'
  };

  const handleItemReject = (inviteId) => {
    console.log('招待を拒否:', inviteId);
  };

  const handleClickAction = () => {
    console.log('ユーザーを招待がクリックされました');
  };

  const handleNavigate = (path) => {
    console.log('ナビゲート先:', path);
  };

  const getRowHref = (row) => `/invites/${row.id}`;

  return (
    <ListInvites
      listInvitesTitle="招待管理"
      labels={labels}
      isLoading={isLoading}
      onNavigate={handleNavigate}
      onClickAction={handleClickAction}
      onItemReject={handleItemReject}
      data={inviteData}
      rowHref={getRowHref}>
      <ListInvites.Header style={{display: 'flex', justifyContent: 'space-between', padding: '16px'}}>
        <ListInvites.Title />
        <ListInvites.Action />
      </ListInvites.Header>
      <ListInvites.Content>
        {isLoading ? (
          <ListInvites.Loader />
        ) : (
          <ListInvites.Table />
        )}
      </ListInvites.Content>
    </ListInvites>
  );
}
結果
Loading...

🔧 プロパティリファレンス​

メインコンポーネントのプロパティ​

プロパティ型デフォルト説明
listInvitesTitleReactNode必須招待セクションのタイトル
labelsTableLabels必須テーブルヘッダー、アクション、メッセージのラベルオブジェクト
isLoadingbooleanundefinedテーブルが現在読み込み中かどうか
onNavigate(to: string) => void必須ナビゲーション用のコールバック関数
onClickAction() => void必須メインアクションボタンのコールバック関数
onItemReject(inviteId: string) => void必須招待が拒否されたときのコールバック関数
dataListInvitesRowData[]必須招待データオブジェクトの配列
rowHref(row: ListInvitesRowData) => string必須行リンクURLを生成する関数
pagination{currentPage: number; onPageChange: (page: number) => void; totalPages: number}コンテキストからページネーション設定
classNamestringundefinedコンテナスタイリング用の追加CSSクラス名
childrenBlocksOverrideundefinedデフォルトレンダリングをオーバーライドするカスタムブロックコンポーネント

注意: このコンポーネントはすべてのHTML div 要素プロパティを継承します。

サブコンポーネント​

ListInvitesコンポーネントは複数のサブコンポーネントを提供します。すべてのサブコンポーネントは、メインコンポーネントのコンテキストからデフォルト値を受け取り、プロパティを通じてこれらの値をオーバーライドできます。

ListInvites.Header​

プロパティ型デフォルト説明
childrenReactNodeundefinedデフォルトヘッダーレンダリングをオーバーライドするカスタムコンテンツ
classNamestringundefinedスタイリング用の追加CSSクラス名

注意: このコンポーネントはすべてのHTML div 要素プロパティを継承します。

ListInvites.Title​

プロパティ型デフォルト説明
childrenReactNodeundefinedデフォルトタイトルレンダリングをオーバーライドするカスタムコンテンツ
sizeenum"3XL"タイトルのタイポグラフィサイズ
weightenum"bold"タイポグラフィの太さ
typeenum"heading"タイポグラフィタイプ
colorenum"low-emphasis"タイトルのカラーテーマ
classNamestringundefinedスタイリング用の追加CSSクラス名

注意: このコンポーネントはすべてのHTML span 要素プロパティを継承します。

ListInvites.Action​

プロパティ型デフォルト説明
childrenReactNodeundefinedデフォルトアクションレンダリングをオーバーライドするカスタムコンテンツ
directionenum"row"アクションボタンのフレックス方向
alignItemsenum"stretch"コンテナ内のアイテムの整列
gapSizeenum"S"コンテナ内のアイテム間のギャップ
classNamestringundefinedスタイリング用の追加CSSクラス名

ListInvites.Content​

プロパティ型デフォルト説明
childrenReactNodeundefinedデフォルトコンテンツレンダリングをオーバーライドするカスタムコンテンツ
classNamestringundefinedスタイリング用の追加CSSクラス名

注意: このコンポーネントはすべてのHTML div 要素プロパティを継承します。

ListInvites.Loader​

プロパティ型デフォルト説明
childrenReactNode円形プログレスインジケーターカスタムローディングインジケーターコンテンツ
classNamestringundefinedスタイリング用の追加CSSクラス名

注意: このコンポーネントはすべてのHTML div 要素プロパティを継承します。

ListInvites.Table​

プロパティ型デフォルト説明
classNamestringundefinedスタイリング用の追加CSSクラス名
dataListInvitesRowData[]コンテキストからテーブルデータの配列
labelsTableLabels必須テーブルヘッダー、アクション、メッセージのラベルオブジェクト
dropdownMenuItems(cell: ListInvitesRowData) => Array<DropDownMenuItems>コンテキストからドロップダウンメニューアイテムを生成する関数
dropdownMenuState{openedDropdownMenuId: string}コンテキストから現在開かれているドロップダウンメニュー
setDropdownMenuState({openedDropdownMenuId: string}) => voidコンテキストから開かれたドロップダウンメニューが変更されたときのコールバック関数
emptyState{icon?: IconType; message: string}コンテキストから空状態の設定
isLoadingbooleanコンテキストからローディング状態
onNavigate(to: string) => voidコンテキストからナビゲーションコールバック関数
pagination{currentPage: number; onPageChange: (page: number) => void; totalPages: number}コンテキストからページネーション設定
rowHref`(cell: ListInvitesRowData) => stringundefinednull`

🔧 TypeScript サポート​

包括的な型定義による完全なTypeScriptサポート:

import {ListInvites} from '@nodeblocks/frontend-list-invites-block';

interface ListInvitesRowData {
  id: string;
  name: string;
  email: string;
  status: string;
}

interface CustomInviteTableProps {
  invites: ListInvitesRowData[];
  onRejectInvite: (inviteId: string) => void;
  onInviteUser: () => void;
  isTableLoading: boolean;
}

interface TableLabels {
  emptyStateMessage: string;
  actions: {
    inviteUser: string;
  };
  headerRow: {
    name: string;
    email: string;
    status: string;
  };
  rowActions: {
    reject: string;
  };
  unsetDateMessage: string;
}

const InviteTableComponent = ({invites, onRejectInvite, onInviteUser, isTableLoading}: CustomInviteTableProps) => {
  const tableLabels: TableLabels = {
    emptyStateMessage: '利用可能な招待がありません',
    actions: {inviteUser: '招待を送信'},
    headerRow: {
      name: '氏名',
      email: 'メールアドレス',
      status: '招待ステータス',
    },
    rowActions: {
      reject: '招待を拒否',
    },
    unsetDateMessage: '日付未設定',
  };

  return (
    <ListInvites
      listInvitesTitle="チーム招待"
      labels={tableLabels}
      isLoading={isTableLoading}
      onNavigate={path => console.log('ナビゲート:', path)}
      onClickAction={onInviteUser}
      onItemReject={onRejectInvite}
      data={invites}
      rowHref={row => `/invites/${row.id}`}>
      <ListInvites.Header />
      <ListInvites.Content />
    </ListInvites>
  );
};

React、TypeScript、モダンなウェブ標準を使用して❤️で構築されました。