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

組織リストブロック

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

🚀 インストール​

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

📖 使用方法​

import {ListOrganizations} from '@nodeblocks/frontend-list-organization-block';
ライブエディター
function BasicListOrganizations() {
  const [currentTab, setCurrentTab] = useState('all');
  const [isLoading, setIsLoading] = useState(false);
  const [searchValue, setSearchValue] = useState('');

  const organizationData = [
    {
      id: '1',
      createdAt: '2024-01-15T10:30:00Z',
      name: 'アクメ株式会社',
      joinDate: '2024-01-15T10:30:00Z',
      auditStatus: 'approved'
    },
    {
      id: '2',
      createdAt: '2024-01-14T09:15:00Z',
      name: 'テック・ソリューションズ',
      joinDate: '2024-01-20T14:45:00Z',
      auditStatus: 'waiting_for_review'
    },
    {
      id: '3',
      createdAt: '2024-01-13T16:20:00Z',
      name: 'グローバル・インダストリーズ',
      joinDate: '2024-01-18T11:30:00Z',
      auditStatus: 'rejected'
    }
  ];

  const tabs = [
    { label: 'すべての組織' },
    { label: '承認済み' },
    { label: '審査中' },
    { label: '拒否済み' }
  ];

  const labels = {
    emptyStateMessage: '組織が見つかりません',
    searchFieldPlaceholder: '組織を検索...',
    actions: {
      headerAction: '組織を追加',
      rowAction: '審査'
    },
    headerRow: {
      createdAt: '作成日時',
      name: '組織名',
      joinDate: '参加日',
      auditStatus: 'ステータス'
    },
    cellData: {
      statusApproved: '承認済み',
      statusRejected: '拒否済み',
      statusWaitingForReview: '審査中'
    }
  };

  const handleSearchChange = (value) => {
    setSearchValue(value);
    console.log('検索変更:', value);
  };

  const handleActionClick = () => {
    console.log('ヘッダーアクションがクリックされました');
  };

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

  const handleRowActionClick = (rowData) => {
    console.log('行アクションがクリックされました:', rowData);
  };

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

  return (
    <ListOrganizations
      listOrganizationsTitle="組織管理"
      labels={labels}
      isLoading={isLoading}
      onSearchFieldChange={handleSearchChange}
      onActionClick={handleActionClick}
      onNavigate={handleNavigate}
      onRowActionClick={handleRowActionClick}
      data={organizationData}
      rowHref={getRowHref}
      tabs={tabs}
      currentTab={currentTab}
      onTabChange={setCurrentTab}>
      <ListOrganizations.Header style={{display: 'flex', justifyContent: 'space-between'}}>
        <ListOrganizations.Title />
        <ListOrganizations.Action />
      </ListOrganizations.Header>
      <ListOrganizations.Content>
        {isLoading ? (
          <ListOrganizations.Loader />
        ) : (
          <>
            <ListOrganizations.Tabs />
            <ListOrganizations.Table />
          </>
        )}
      </ListOrganizations.Content>
    </ListOrganizations>
  );
}
結果
Loading...

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

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

プロパティ型デフォルト説明
listOrganizationsTitleReactNode必須組織テーブルセクションのタイトル
labelsOrganizationLabels必須テーブルヘッダー、アクション、メッセージのラベルオブジェクト
isLoadingbooleanundefinedテーブルが現在読み込み中かどうか
onSearchFieldChange(value: string) => void必須検索フィールドの値が変更されたときのコールバック関数
onActionClick() => void必須ヘッダーアクションボタンのコールバック関数
onNavigate(to: string) => void必須ナビゲーション用のコールバック関数
onRowActionClick(rowData: ListOrganizationsRowData) => void必須行アクションがクリックされたときのコールバック関数
pagination{currentPage: number; onPageChange: (page: number) => void; totalPages: number}undefinedページネーション設定オブジェクト
dataListOrganizationsRowData[]必須組織データオブジェクトの配列
rowHref(row: ListOrganizationsRowData) => string必須行リンクURLを生成する関数
tabsTab[]必須タブ設定オブジェクトの配列
currentTabstringundefined現在アクティブなタブ識別子
onTabChange(tab: string) => voidundefinedタブが変更されたときのコールバック関数
classNamestringundefinedコンテナスタイリング用の追加CSSクラス名
childrenBlocksOverrideundefinedデフォルトレンダリングをオーバーライドするカスタムブロックコンポーネント

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

サブコンポーネント​

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

ListOrganizations.Title​

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

ListOrganizations.Action​

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

ListOrganizations.Header​

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

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

ListOrganizations.Loader​

プロパティ型デフォルト説明
childrenReactNode円形プログレスインジケーターカスタムローディングインジケーターコンテンツ
classNamestringundefinedスタイリング用の追加CSSクラス名
directionenum"row"アクションコンポーネントのフレックス方向
alignItemsenumSpacingデフォルトからコンテナ内のアイテムの整列
gapSizeenumSpacingデフォルトからコンテナ内のアイテム間のギャップ

ListOrganizations.Content​

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

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

ListProductsTable.Tabs​

プロパティ型デフォルト説明
tabsTab[]コンテキストからタブ設定オブジェクトの配列
currentTabstringコンテキストから現在アクティブなタブ識別子
onTabChange(tab: string) => voidコンテキストからタブ変更コールバック関数
tabWidthstring"stretch"タブの幅の動作
classNamestringundefinedスタイリング用の追加CSSクラス名

ListOrganizations.Table​

プロパティ型デフォルト説明
classNamestringundefinedスタイリング用の追加CSSクラス名
labelsOrganizationLabelsコンテキストからテーブルヘッダーとアクションのラベル
isLoadingbooleanコンテキストからローディング状態
dataListOrganizationsRowData[]コンテキストからテーブルデータの配列
rowHref(row: ListOrganizationsRowData) => stringコンテキストから行リンク関数
onNavigate(to: string) => voidコンテキストからナビゲーションコールバック関数
onRowActionClick(rowData: ListOrganizationsRowData) => voidコンテキストから行アクションコールバック関数
paginationPaginationPropsコンテキストからページネーション設定
emptyState{icon: enum, message: string}コンテキストから空状態の設定

🔧 TypeScript サポート​

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

import {ListOrganizations} from '@nodeblocks/frontend-list-organization-block';

interface Tab {
  isDisabled?: boolean;
  key?: string;
  label: string;
  subtitle?: string;
}

interface ListOrganizationsRowData {
  id: string;
  createdAt: string;
  name: string;
  joinDate: string;
  auditStatus: string;
}

interface OrganizationLabels {
  emptyStateMessage: string;
  searchFieldPlaceholder: string;
  actions: {
    headerAction: ReactNode;
    rowAction: ReactNode;
  };
  headerRow: {
    createdAt: string;
    name: string;
    joinDate: string;
    auditStatus: string;
  };
  cellData: {
    statusApproved: ReactNode;
    statusRejected: ReactNode;
    statusWaitingForReview: ReactNode;
  };
}

interface CustomOrganizationTableProps {
  organizations: ListOrganizationsRowData[];
  onSearch: (query: string) => void;
  onAddOrganization: () => void;
  onReviewOrganization: (org: ListOrganizationsRowData) => void;
  tableTabs: Array<Tab>;
  currentActiveTab: string;
  onTabSwitch: (tab: string) => void;
  isTableLoading: boolean;
}

const OrganizationTableComponent = ({
  organizations,
  onSearch,
  onAddOrganization,
  onReviewOrganization,
  tableTabs,
  currentActiveTab,
  onTabSwitch,
  isTableLoading,
}: CustomOrganizationTableProps) => {
  const tableLabels: OrganizationLabels = {
    emptyStateMessage: '利用可能な組織がありません',
    searchFieldPlaceholder: '組織名で検索...',
    actions: {
      headerAction: '新規組織',
      rowAction: '申請を審査',
    },
    headerRow: {
      createdAt: '作成日',
      name: '組織名',
      joinDate: '参加日',
      auditStatus: '監査ステータス',
    },
    cellData: {
      statusApproved: <span style={{color: 'green'}}>承認済み</span>,
      statusRejected: <span style={{color: 'red'}}>拒否済み</span>,
      statusWaitingForReview: <span style={{color: 'orange'}}>審査中</span>,
    },
  };

  return (
    <ListOrganizations
      listOrganizationsTitle="組織管理ダッシュボード"
      labels={tableLabels}
      isLoading={isTableLoading}
      onSearchFieldChange={onSearch}
      onActionClick={onAddOrganization}
      onNavigate={path => console.log('ナビゲート:', path)}
      onRowActionClick={onReviewOrganization}
      data={organizations}
      rowHref={row => `/organizations/${row.id}`}
      tabs={tableTabs}
      currentTab={currentActiveTab}
      onTabChange={onTabSwitch}>
      <ListOrganizations.Header />
      <ListOrganizations.Content />
    </ListOrganizations>
  );
};

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