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

注文リストブロック

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

🚀 インストール​

npm install @nodeblocks/frontend-list-order-block@0.1.1

📖 使用法​

import {ListOrder} from '@nodeblocks/frontend-list-order-block';
ライブエディター
function SimpleListOrder() {
  const orders = [
    {
      id: '1',
      logoUrl: 'https://placehold.co/600x400',
      title: '注文 #ORD-001',
      subtitle: '3項目 - 電子機器',
      date: '2024-01-15',
      status: 'delivered',
      statusLabel: '配送済み',
    },
    {
      id: '2',
      logoUrl: 'https://placehold.co/600x400',
      title: '注文 #ORD-002',
      subtitle: '1項目 - 衣類',
      date: '2024-01-14',
      status: 'processing',
      statusLabel: '処理中',
    },
    {
      id: '3',
      logoUrl: 'https://placehold.co/600x400',
      title: '注文 #ORD-003',
      subtitle: '5項目 - ホーム・ガーデン',
      date: '2024-01-13',
      status: 'shipped',
      statusLabel: '発送済み',
    },
  ];

  return (
    <ListOrder orders={orders} hasMore={false} onClickOrder={order => console.log('注文がクリックされました:', order.id)}>
      <ListOrder.OrderListSection />
    </ListOrder>
  );
}
結果
Loading...

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

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

プロパティ型デフォルト説明
ordersOrder[]必須表示する注文オブジェクトの配列
hasMoreboolean必須読み込む注文がまだあるかどうか
onClickOrder(order: Order) => voidundefined注文がクリックされたときにトリガーされるコールバック関数
onClickLoadMore() => voidundefined「もっと読み込む」ボタンがクリックされたときにトリガーされるコールバック関数
isLoadingListbooleanundefinedリストが現在読み込み中かどうか
classNamestringundefinedコンテナスタイリング用の追加CSSクラス名
childrenBlocksOverrideundefinedデフォルトブロックをオーバーライドまたはカスタムコンポーネントレンダリングするための関数

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

サブコンポーネント​

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

ListOrder.OrderListSection​

プロパティ型デフォルト説明
childrenReactNodeundefinedデフォルト注文リストレンダリングをオーバーライドするカスタムコンテンツ
classNamestringundefinedスタイリング用の追加CSSクラス名
ordersOrder[]コンテキストから表示する注文の配列
onClickOrder(order: Order) => voidコンテキストから注文クリックイベントのコールバック関数

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

ListOrder.OrderCard​

プロパティ型デフォルト説明
orderOrder必須表示する注文オブジェクト
classNamestringundefinedスタイリング用の追加CSSクラス名
onClick() => voidundefined注文カードのカスタムクリックハンドラー
childrenReactNodeundefinedデフォルトカードレンダリングをオーバーライドするカスタムコンテンツ

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

プロパティ型デフォルト説明
srcstring必須組織ロゴのURL
altstring"Organization Logo"ロゴ画像の代替テキスト
classNamestringundefinedスタイリング用の追加CSSクラス名

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

ListOrder.OrderTitle​

プロパティ型デフォルト説明
childrenReactNode必須注文のタイトルテキスト
classNamestringundefinedスタイリング用の追加CSSクラス名

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

ListOrder.OrderSubtitle​

プロパティ型デフォルト説明
childrenReactNode必須注文のサブタイトルテキスト（通常は組織名）
classNamestringundefinedスタイリング用の追加CSSクラス名

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

ListOrder.OrderDate​

プロパティ型デフォルト説明
childrenReactNode必須注文の日付テキスト
classNamestringundefinedスタイリング用の追加CSSクラス名

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

ListOrder.OrderLoadingCircle​

プロパティ型デフォルト説明
childrenReactNodeデフォルトローディングサークルカスタムローディングインジケーターコンテンツ
classNamestringundefinedスタイリング用の追加CSSクラス名
widthstring"100"ローディングサークルの幅
heightstring"100"ローディングサークルの高さ

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

ListOrder.LoadMoreButton​

プロパティ型デフォルト説明
childrenReactNode"Read More"ボタンテキストコンテンツ
classNamestringundefinedスタイリング用の追加CSSクラス名
hasMorebooleanコンテキストから読み込み可能なアイテムがまだあるかどうか
onClickLoadMore() => voidコンテキストから注文をさらに読み込む関数
onClick() => voidundefinedボタンのカスタムクリックハンドラー
disabledbooleanローディング状態に基づくボタンが無効かどうか

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

🔧 TypeScript サポート​

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

import {ListOrder} from '@nodeblocks/frontend-list-order-block';
import {ComponentProps} from 'react';

// Order data interface
export type Order = {
  id: string;
  logoUrl: string;
  title: string;
  subtitle: string;
  date: string;
  status: string;
  statusLabel: string;
};

// Main component interface
interface ListOrderProps extends Omit<ComponentProps<'div'>, 'children'> {
  orders: Order[];
  hasMore: boolean;
  onClickOrder?: (order: Order) => void;
  onClickLoadMore?: () => void;
  isLoadingList?: boolean;
  className?: string;
}

// Usage example with full typing
function TypedListOrder() {
  const orderData: Order[] = [
    {
      id: 'order-1',
      logoUrl: 'https://placehold.co/600x400',
      title: 'プレミアムパッケージ',
      subtitle: '年間サブスクリプション - 5ユーザー',
      date: '2024-01-20',
      status: 'delivered',
      statusLabel: '配送済み',
    },
    {
      id: 'order-2',
      logoUrl: 'https://placehold.co/600x400',
      title: 'スタンダードパッケージ',
      subtitle: '月間サブスクリプション - 2ユーザー',
      date: '2024-01-19',
      status: 'processing',
      statusLabel: '配送中',
    },
  ];

  const handleOrderClick = (order: Order): void => {
    console.log('選択された注文:', order.id, order.title);
  };

  const handleLoadMore = (): void => {
    console.log('さらに注文を読み込み中...');
  };

  return (
    <ListOrder
      orders={orderData}
      hasMore={true}
      onClickOrder={handleOrderClick}
      onClickLoadMore={handleLoadMore}
      isLoadingList={false}
      style={{
        maxWidth: '800px',
        margin: '0 auto',
        padding: '24px',
        border: '1px solid #e5e7eb',
        borderRadius: '16px',
      }}
    >
      <ListOrder.OrderListSection />
      <ListOrder.LoadMoreButton />
    </ListOrder>
  );
}

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