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

注文詳細ブロック

ViewOrderコンポーネントは、TypeScriptで構築された完全にカスタマイズ可能な注文表示コンポーネントです。ステータス、注文情報、画像、カスタマイズ可能な情報行を含む注文詳細を表示するための完全なインターフェースを、モダンなデザインパターンとともに提供します。

🚀 インストール​

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

📖 使用方法​

import {ViewOrder} from '@nodeblocks/frontend-view-order-block';
ライブエディター
function BasicViewOrder() {
  const orderInfoRows = [
    { label: '注文ID', value: '#12345' },
    { label: 'お客様', value: '田中太郎' },
    { label: '日付', value: '2024-01-15' },
    { label: '合計', value: '¥19,999' }
  ];

  return (
    <ViewOrder
      headerLabel=""
      statusText="処理中"
      statusLabel="現在のステータス"
      titleLabel=""
      titleText="プレミアム製品パッケージ"
      titleLink="#orders/12345"
      imageSrc="/img/icon.png"
      infoRows={orderInfoRows}>
      <ViewOrder.Header />
      <ViewOrder.DetailsRow />
      <ViewOrder.InfoRowList />
    </ViewOrder>
  );
}
結果
Loading...

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

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

プロパティ型デフォルト説明
headerLabelstringundefined注文ヘッダーセクションのラベルテキスト
statusTextstringundefined注文ステータス表示のテキストコンテンツ
statusLabelstringundefinedステータスフィールドのラベルテキスト
titleLabelstringundefined注文タイトルフィールドのラベルテキスト
titleTextstringundefined注文タイトルのテキストコンテンツ
titleLinkstringundefined注文タイトルのURL リンク
imageSrcstringundefined注文画像のソースURL
infoRowsArray<{label: string, value: ReactNode}>undefined表示する情報行の配列
classNamestringundefinedコンテナスタイリング用の追加CSSクラス名
childrenBlocksOverrideundefinedデフォルトレンダリングをオーバーライドするカスタムブロックコンポーネント

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

サブコンポーネント​

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

ViewOrder.Header​

タイトルとステータス情報を含む注文ヘッダーのコンテナ。

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

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

ViewOrder.DetailsRow​

タイトルと画像を含むメイン注文詳細のコンテナ。

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

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

ViewOrder.Status​

注文ステータス情報を表示します。

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

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

ViewOrder.Title​

クリック可能なリンクとして注文タイトルを表示します。

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

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

ViewOrder.Image​

注文画像を表示します。

プロパティ型デフォルト説明
classNamestringundefinedスタイリング用の追加CSSクラス名
srcstringコンテキストから注文画像のソースURL

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

ViewOrder.InfoRow​

ラベルと値を持つ単一の情報行を表示します。

プロパティ型デフォルト説明
labelReactNode必須情報行のラベルコンテンツ
valueReactNode必須情報行の値コンテンツ
classNamestringundefinedスタイリング用の追加CSSクラス名

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

ViewOrder.InfoRowList​

infoRows配列から複数の情報行を表示するコンテナ。

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

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

🔧 TypeScript サポート​

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

import ViewOrder from '@nodeblocks/frontend-view-order-block';
import { ReactNode } from 'react';

interface OrderInfoRow {
  label: string;
  value: ReactNode;
}

interface ViewOrderProps {
  headerLabel?: string;
  statusText?: string;
  statusLabel?: string;
  titleLabel?: string;
  titleText?: string;
  titleLink?: string;
  imageSrc?: string;
  infoRows?: OrderInfoRow[];
  className?: string;
  children?: ReactNode;
}

interface CustomOrderData {
  orderId: string;
  customerName: string;
  status: 'pending' | 'processing' | 'shipped' | 'delivered' | 'cancelled';
  total: number;
  items: {
    id: string;
    name: string;
    quantity: number;
    price: number;
  }[];
  shippingAddress: {
    street: string;
    city: string;
    country: string;
  };
}

const OrderDetailsView = () => {
  const orderData: CustomOrderData = {
    orderId: 'ORD-2024-001',
    customerName: '田中太郎',
    status: 'processing',
    total: 29999,
    items: [
      { id: '1', name: 'プレミアムヘッドフォン', quantity: 1, price: 19999 },
      { id: '2', name: 'USBケーブル', quantity: 2, price: 5000 }
    ],
    shippingAddress: {
      street: '新宿区新宿1-2-3',
      city: '東京都',
      country: '日本'
    }
  };

  const orderInfoRows: OrderInfoRow[] = [
    { label: '注文ID', value: orderData.orderId },
    { label: 'お客様', value: orderData.customerName },
    { label: '合計金額', value: `¥${orderData.total.toLocaleString()}` },
    { label: '商品数', value: orderData.items.length },
    { 
      label: '配送先住所', 
      value: `${orderData.shippingAddress.street}, ${orderData.shippingAddress.city}, ${orderData.shippingAddress.country}` 
    }
  ];

  return (
    <ViewOrder
      headerLabel="注文情報"
      statusText={orderData.status.charAt(0).toUpperCase() + orderData.status.slice(1)}
      statusLabel="現在のステータス"
      titleLabel="注文詳細"
      titleText={`注文 ${orderData.orderId}`}
      titleLink={`/orders/${orderData.orderId}`}
      imageSrc="/order-preview.jpg"
      infoRows={orderInfoRows}
      className="custom-order-view">
      <ViewOrder.Header />
      <ViewOrder.DetailsRow />
      <ViewOrder.InfoRowList />
    </ViewOrder>
  );
};

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