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

注文リストブロック

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

🚀 インストール​

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

📖 使用方法​

import {ListOrder} from '@nodeblocks/frontend-list-order-block';
ライブエディター
function BasicListOrder() {
  const [orders, setOrders] = useState([
    {
      id: '1',
      logoUrl: '/img/icon-small.png',
      title: 'オフィス用品注文',
      subtitle: 'ABC会社',
      date: '2024-01-15',
      status: 'completed',
      statusLabel: '完了',
    },
    {
      id: '2',
      logoUrl: '/img/icon-small.png',
      title: 'ソフトウェアライセンス',
      subtitle: 'テック株式会社',
      date: '2024-01-14',
      status: 'pending',
      statusLabel: '保留中',
    },
  ]);
  const [hasMore, setHasMore] = useState(true);
  const [isLoading, setIsLoading] = useState(false);

  const handleOrderClick = order => {
    console.log('注文がクリックされました:', order);
    // 注文ナビゲーション処理
  };

  const handleLoadMore = () => {
    setIsLoading(true);
    // 追加注文読み込みロジック
    setTimeout(() => {
      setIsLoading(false);
      setOrders([...orders, ...orders]);
      setHasMore(false);
    }, 1000);
  };

  return (
    <ListOrder
      orders={orders}
      hasMore={hasMore}
      onClickOrder={handleOrderClick}
      onClickLoadMore={handleLoadMore}
      isLoadingList={isLoading}>
      <ListOrder.OrderListSection />
      <ListOrder.OrderLoadingCircle />
      <ListOrder.LoadMoreButton />
    </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';

// 注文データインターフェース
export type Order = {
  id: string;
  logoUrl: string;
  title: string;
  subtitle: string;
  date: string;
  status: string;
  statusLabel: string;
};

// メインコンポーネントインターフェース
interface ListOrderProps extends Omit<ComponentProps<'div'>, 'children'> {
  orders: Order[];
  hasMore: boolean;
  onClickOrder?: (order: Order) => void;
  onClickLoadMore?: () => void;
  isLoadingList?: boolean;
  className?: string;
}

// 完全な型付けを使用した使用例
interface CustomOrderListProps {
  orderData: Order[];
  onOrderSelect: (order: Order) => void;
  loadMoreOrders: () => void;
  hasMoreData: boolean;
  isLoading: boolean;
}

const OrderListComponent = ({
  orderData,
  onOrderSelect,
  loadMoreOrders,
  hasMoreData,
  isLoading,
}: CustomOrderListProps) => {
  return (
    <ListOrder
      orders={orderData}
      hasMore={hasMoreData}
      onClickOrder={onOrderSelect}
      onClickLoadMore={loadMoreOrders}
      isLoadingList={isLoading}>
      <ListOrder.OrderListSection />
      <ListOrder.OrderLoadingCircle />
      <ListOrder.LoadMoreButton />
    </ListOrder>
  );
};

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