### React Menu Component Integration and Rendering

Source: https://context7.com/shenluwei/dplus-components/llms.txt

Demonstrates how to integrate the React Menu component into an application, including route setup, injecting menu props into components, and rendering the Menu with various configuration options like theme, logo, and WebSocket notifications.

```tsx
import React from 'react';
import ReactDOM from 'react-dom';
import { Menu } from '@dianplusjs/dp-components';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

// Define application routes
const App = () => (
  <Router>
    <Routes>
      <Route path="/" element={<Dashboard />} />
      <Route path="/orders" element={<Orders />} />
      <Route path="/inventory" element={<Inventory />} />
      <Route path="/reports" element={<Reports />} />
    </Routes>
  </Router>
);

// Dashboard component with menu injection
@Menu.inject
class Dashboard extends React.Component {
  componentDidMount() {
    const { menu } = this.props;
    console.log('Menu display mode:', menu.displayMode());
  }

  toggleFullScreen = () => {
    const { menu } = this.props;
    menu.toggleDisplayMode();
  };

  render() {
    return (
      <div>
        <h1>Dashboard</h1>
        <button onClick={this.toggleFullScreen}>
          Toggle Full Screen
        </button>
      </div>
    );
  }
}

// Render application with Menu wrapper
Menu.render(<App />, {
  domId: 'root',
  type: 'default',
  theme: 'dark',
  appLogo: '/logo.png',
  allowFullScreen: true,
  allowSettings: true,
  allowI18n: true,
  allowAppStore: true,
  allowHelp: true,
  changePasswordUrl: '/api/user/change-password',

  // WebSocket configuration for real-time notifications
  webSocketConfig: {
    url: 'ws://localhost:8080/ws',
    key: 'app_notifications',
    onMessage: (message) => {
      console.log('Received notification:', message);
    },
  },

  // Custom audio for notifications
  messageAudioSrc: '/audio/notification.mp3',

  // Message popup component
  messagePopup: (props) => (
    <div style={{ padding: '10px', background: '#fff' }}>
      <h4>{props.title}</h4>
      <p>{props.content}</p>
    </div>
  ),

  // Custom toolbar elements
  customElements: [
    {
      element: <span>Custom Button</span>,
      onClick: () => console.log('Custom action'),
    },
  ],

  // Drawer configuration
  drawer: {
    visible: false,
    width: 400,
    content: <div>Drawer Content</div>,
  },

  // Menu filtering
  menuFilter: (item) => {
    // Hide admin menu for non-admin users
    if (item.id === 'admin' && !window.isAdmin) {
      return false;
    }
    return true;
  },

  // Menu data transformation
  menusMap: (items) => {
    return items.map(item => ({
      ...item,
      name: item.name.toUpperCase(),
    }));
  },
});

// Alternative: Use Menu as component
const MenuComponent = () => (
  <Menu
    type="default"
    theme="light"
    allowFullScreen={true}
    allowSettings={true}
    appLogo="/logo.png"
  >
    <App />
  </Menu>
);

```

--------------------------------

### Invoice Template Designer using PrintDesign (React/TSX)

Source: https://context7.com/shenluwei/dplus-components/llms.txt

This example demonstrates how to use the PrintDesign component to create and manage an invoice template. It includes functionality for saving changes, previewing the template with sample data, and defining data sources. Dependencies include React, Ant Design, and the @dianplusjs/dp-components library. The component takes template data, dimensions, object identifiers, and callback functions for save and preview actions.

```tsx
import React, { useState } from 'react';
import { PrintDesign } from '@dianplusjs/dp-components';
import { Button, message } from 'antd';

const InvoiceTemplateDesigner = () => {
  const [templateData, setTemplateData] = useState({
    id: 'TPL_001',
    name: 'Invoice Template',
    width: 210,
    height: 297,
    unit: 'mm',
    pages: [{
      id: 'page_1',
      header: { height: 50, widgets: [] },
      body: { widgets: [] },
      footer: { height: 30, widgets: [] },
    }],
    dataSources: [
      {
        id: 'ds_order',
        name: 'Order Data',
        fields: ['orderNo', 'orderDate', 'customerName', 'totalAmount']
      },
      {
        id: 'ds_items',
        name: 'Order Items',
        fields: ['productName', 'quantity', 'price', 'subtotal']
      }
    ]
  });

  const handleSave = (updatedTemplate) => {
    console.log('Saving template:', updatedTemplate);
    setTemplateData(updatedTemplate);

    // Simulate API call
    setTimeout(() => {
      message.success('Template saved successfully!');
    }, 500);
  };

  const handlePreview = (template) => {
    console.log('Previewing template:', template);

    // Generate preview with sample data
    const sampleData = {
      orderNo: 'ORD20241221001',
      orderDate: '2024-12-21',
      customerName: 'ABC Corporation',
      totalAmount: 1250.00,
      items: [
        { productName: 'Product A', quantity: 2, price: 250.00, subtotal: 500.00 },
        { productName: 'Product B', quantity: 3, price: 250.00, subtotal: 750.00 },
      ]
    };

    // Open preview window
    message.info('Opening print preview...');
  };

  const modalInfo = {
    objectName: 'Sales Order',
    templateName: 'Invoice',
  };

  return (
    <div style={{ height: '100vh' }}>
      <div style={{ padding: '10px', borderBottom: '1px solid #e8e8e8' }}>
        <h2>Invoice Template Designer</h2>
        <p>Design custom invoice templates with drag-and-drop widgets</p>
      </div>

      <PrintDesign
        dataSource={templateData}
        height={800}
        id="TPL_001"
        objectId="OBJ_SALES_ORDER"
        modalInfo={modalInfo}
        onSave={handleSave}
        onView={handlePreview}
        extraContent={
          <Button
            type="link"
            onClick={() => message.info('Loading reference templates...')}
          >
            Load Template
          </Button>
        }
      />

      <div style={{
        position: 'fixed',
        bottom: 20,
        right: 20,
        background: '#fff',
        padding: '10px',
        boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
        borderRadius: '4px'
      }}>
        <div style={{ fontSize: '12px', color: '#666' }}>
          <p>Available Widgets:</p>
          <ul style={{ margin: 0, paddingLeft: '20px' }}>
            <li>Text: Static or dynamic text fields</li>
            <li>Image: Logos, product photos</li>
            <li>Barcode: 1D/2D barcodes</li>
            <li>Table: Line items, details</li>
            <li>Line: Separators, borders</li>
          </ul>
        </div>
      </div>
    </div>
  );
};

export default InvoiceTemplateDesigner;

```

--------------------------------

### Implement Multi-Method Payment with React

Source: https://context7.com/shenluwei/dplus-components/llms.txt

This React component demonstrates how to integrate and use the Payment component for handling multiple payment methods. It includes setting up order data, managing payment state, and handling payment results via callbacks. Dependencies include React and Dplus UI components.

```tsx
import React, { useState } from 'react';
import { Payment } from '@dianplusjs/dp-components';
import { Dialog } from '@dianplusjs/dp-components';

const CheckoutPage = () => {
  const [showPayment, setShowPayment] = useState(false);
  const [orderData] = useState({
    orderId: 'ORD20241221001',
    totalAmount: 299.99,
    brandId: '10029',
    applyId: 'POS_001',
    bizUniqueId: 'ORDER_001',
  });

  const handlePaymentResult = (result) => {
    console.log('Payment result:', result);

    if (result === 'success') {
      Dialog.success({
        title: 'Payment Successful',
        content: `Order ${orderData.orderId} has been paid successfully!`, 
      });
    } else if (result === 'fail') {
      Dialog.error({
        title: 'Payment Failed',
        content: 'Payment was unsuccessful. Please try again.',
      });
    } else if (result === 'timeout') {
      Dialog.warning({
        title: 'Payment Timeout',
        content: 'Please check the order list for payment status.',
      });
    }

    setShowPayment(false);
  };

  const handlePrint = () => {
    console.log('Printing receipt for order:', orderData.orderId);
  };

  return (
    <div>
      <div style={{ padding: '20px' }}>
        <h2>Order Summary</h2>
        <p>Order ID: {orderData.orderId}</p>
        <p>Total Amount: ${orderData.totalAmount}</p>
        <button onClick={() => setShowPayment(true)}>
          Proceed to Payment
        </button>
      </div>

      {showPayment && (
        <Payment
          brandId={orderData.brandId}
          staffId="100414"
          applyId={orderData.applyId}
          bizUniqueId={orderData.bizUniqueId}
          mode="multiple"
          integrationPay={1}
          isPos={true}
          isPrint={true}
          autoPrint={false}
          timeoutMessage="Please check order list for payment status"
          queryErrorMessage="Payment verification failed. Check order list."
          close={handlePaymentResult}
          print={handlePrint}
          targetPayMethodNames={[
            'WECHAT_SCAN_B2C',
            'WECHAT_SCAN_C2B',
            'ALIPAY_SCAN_B2C',
            'ALIPAY_SCAN_C2B',
            'UNIT_SCAN_B2C'
          ]}
          hiddinPayScene={['GIFT_CARD']}
          giftCardList={[]}
          cashCouponList={[]}
          openGiftCard={(amount) => console.log('Open gift card:', amount)}
          openCashCoupon={(amount) => console.log('Open cash coupon:', amount)}
          currentState={(state) => console.log('Payment state:', state)}
          loaded={() => console.log('Payment methods loaded')}
        />
      )}
    </div>
  );
};

export default CheckoutPage;

```

--------------------------------

### Implement Draggable Dialog and Confirmation Modals

Source: https://context7.com/shenluwei/dplus-components/llms.txt

This React component demonstrates the usage of the enhanced Dialog component for managing users. It showcases how to open a draggable dialog for adding new users and utilizes utility methods like `Dialog.confirm`, `Dialog.success`, `Dialog.error`, and `Dialog.warning` for user interactions and feedback. It depends on React, `@dianplusjs/dp-components`, and `antd` for UI elements and modal functionalities.

```tsx
import React, { useState } from 'react';
import { Dialog } from '@dianplusjs/dp-components';
import { Button, Input, Form } from 'antd';

const UserManagement = () => {
  const [visible, setVisible] = useState(false);
  const [formData, setFormData] = useState({ name: '', email: '' });

  const handleDelete = (userId) => {
    Dialog.confirm({
      title: 'Confirm Deletion',
      content: (
        <div>
          <p>Are you sure you want to delete this user?</p>
          <p>This action cannot be undone.</p>
        </div>
      ),
      okText: 'Delete',
      okType: 'danger',
      onOk: async (e, close) => {
        try {
          // Simulate API call
          await new Promise(resolve => setTimeout(resolve, 1000));
          console.log('User deleted:', userId);
          Dialog.success({
            title: 'Success',
            content: 'User deleted successfully!',
          });
          close();
        } catch (error) {
          Dialog.error({
            title: 'Error',
            content: 'Failed to delete user: ' + error.message,
          });
          return Promise.reject(error);
        }
      },
      onCancel: (e, close) => {
        close();
      }
    });
  };

  const handleSave = (e, close) => {
    if (!formData.name || !formData.email) {
      Dialog.warning({
        title: 'Validation Error',
        content: 'Please fill in all required fields',
      });
      return;
    }
    console.log('Saving user:', formData);
    close();
    setVisible(false);
  };

  return (
    <div>
      <Button type="primary" onClick={() => setVisible(true)}>
        Add User
      </Button>

      <Dialog
        open={visible}
        title="Add New User"
        width={600}
        destroyOnClose={true}
        onOk={handleSave}
        onCancel={(e, close) => {
          close();
          setVisible(false);
        }}
        okText="Save"
        cancelText="Cancel"
      >
        <Form layout="vertical">
          <Form.Item label="Name" required>
            <Input
              value={formData.name}
              onChange={(e) => setFormData({ ...formData, name: e.target.value })}
              placeholder="Enter user name"
            />
          </Form.Item>
          <Form.Item label="Email" required>
            <Input
              type="email"
              value={formData.email}
              onChange={(e) => setFormData({ ...formData, email: e.target.value })}
              placeholder="Enter email address"
            />
          </Form.Item>
        </Form>
      </Dialog>

      <Button danger onClick={() => handleDelete('user123')}>
        Delete User
      </Button>
    </div>
  );
};

export default UserManagement;

```

--------------------------------

### React Form with Business Data Selectors

Source: https://context7.com/shenluwei/dplus-components/llms.txt

This React component demonstrates how to use Easy Components for selecting business data within a form. It utilizes Ant Design for form management and integrates modal selectors for stores, products, channels, and warehouses. It handles state management for selections and includes submission logic.

```tsx
import React, { useState } from 'react';
import { Easy, Select } from '@dianplusjs/dp-components';
import { Form, Button } from 'antd';

const { StoreModal, GoodsSkuModal, ChannelModal, WarehouseModal } = Easy;

const BusinessDataForm = () => {
  const [formRef] = Form.useForm();
  const [selectedStore, setSelectedStore] = useState(null);
  const [selectedProducts, setSelectedProducts] = useState([]);

  const handleSubmit = () => {
    const values = formRef.getFieldsValue();
    console.log('Form values:', {
      ...values,
      store: selectedStore,
      products: selectedProducts,
    });
  };

  return (
    <Form form={formRef} layout="vertical">
      <Form.Item label="Select Store" name="store" rules={[{ required: true }]}>
        {Select.wrapModal({ placeholder: 'Choose a store', allowClear: true })( 
          <StoreModal
            value={selectedStore}
            onOk={(selected) => {
              setSelectedStore(selected);
              formRef.setFieldsValue({ store: selected });
            }}
            queryConfig={{
              disabled: ['storeName'],
              initValues: { storeCode: 'ST' }
            }}
          />
        )}
      </Form.Item>

      <Form.Item label="Select Products" name="products">
        {Select.wrapModal({ placeholder: 'Choose products', allowClear: true })( 
          <GoodsSkuModal
            isMultiple
            value={selectedProducts}
            onOk={(selected) => {
              setSelectedProducts(selected);
              formRef.setFieldsValue({ products: selected });
            }}
          />
        )}
      </Form.Item>

      <Form.Item label="Select Channel" name="channel">
        {Select.wrapModal({ placeholder: 'Choose channel' })( 
          <ChannelModal
            onOk={(selected) => formRef.setFieldsValue({ channel: selected })}
            channelControl="ACCESS_CONTROL_KEY"
          />
        )}
      </Form.Item>

      <Form.Item label="Select Warehouse" name="warehouse">
        <Select.KeySelect
          lazy
          search
          placeholder="Search or select warehouse"
          dataSource={DataProvider.find('ModalTable').create('warehouse')}
        >
          <WarehouseModal />
        </Select.KeySelect>
      </Form.Item>

      <Form.Item>
        <Button type="primary" onClick={handleSubmit}>
          Submit Order
        </Button>
      </Form.Item>
    </Form>
  );
};

export default BusinessDataForm;

```

--------------------------------

### AppLayout Usage with Automatic Height Calculation in React

Source: https://context7.com/shenluwei/dplus-components/llms.txt

This React component demonstrates the usage of AppLayout with automatic height calculation for the content area. It utilizes Ant Design components for inputs, buttons, and pagination. The component fetches and displays data, simulating a dashboard page.

```tsx
import React, { useState, useEffect } from 'react';
import { AppLayout } from '@dianplusjs/dp-components';
import { Input, Button, Pagination } from 'antd';

// Extended component with automatic height calculation
const DashboardPage = AppLayout.extend((props) => {
  const { maxContentHeight } = props;
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false);
  const [page, setPage] = useState(1);
  const [language, setLanguage] = useState('en-US');

  useEffect(() => {
    // Simulate data loading
    setLoading(true);
    setTimeout(() => {
      setData(Array.from({ length: 50 }, (_, i) => ({ id: i, name: `Item ${i}` })));
      setLoading(false);
    }, 1000);
  }, [page]);

  const routes = [
    { name: 'Home', href: '#/' },
    { name: 'Reports', href: '#/reports' },
    { name: 'Sales Dashboard', href: '' },
  ];

  return (
    <AppLayout loading={loading}>
      <AppLayout.Header
        routes={routes}
        allowToggleDisplayMode={true}
        allowFullScreen={true}
        currentLanguage={language}
        onLanguageChange={setLanguage}
        extraContent={
          <div>
            <Button type="link">Export</Button>
            <Button type="link">Settings</Button>
          </div>
        }
        prompt={{
          text: 'You have unsaved changes. Continue?',
          visible: false
        }}
      />

      <AppLayout.Filter>
        <Input.Search
          placeholder="Search items..."
          style={{ width: 300 }}
          onSearch={(value) => console.log('Search:', value)}
        />
      </AppLayout.Filter>

      <AppLayout.Operations>
        <Button type="primary">Create New</Button>
        <Button>Import</Button>
        <Button>Export</Button>
      </AppLayout.Operations>

      <AppLayout.Content
        style={{
          height: maxContentHeight,
          overflow: 'auto',
          padding: '16px'
        }}
      >
        <div>
          {data.map(item => (
            <div key={item.id} style={{ padding: '8px', borderBottom: '1px solid #eee' }}>
              {item.name}
            </div>
          ))}
        </div>
      </AppLayout.Content>

      <AppLayout.Pagination>
        <Pagination
          current={page}
          total={500}
          pageSize={50}
          onChange={setPage}
          showSizeChanger
          showTotal={(total) => `Total ${total} items`}
        />
      </AppLayout.Pagination>
    </AppLayout>
  );
});

export default DashboardPage;
```

--------------------------------

### React Component for Employee Data Management with DjExcel

Source: https://context7.com/shenluwei/dplus-components/llms.txt

This React component demonstrates the usage of DjExcel for managing employee data. It includes functionalities for exporting employee records with specified fields and importing employee data via Excel files. The component utilizes Ant Design components for UI elements and DjExcel's components for Excel operations. It also features a task window to monitor import/export job progress. Dependencies include 'react', '@dianplusjs/dp-components', and 'antd'.

```tsx
import React from 'react';
import { DjExcel, BooleanTrigger } from '@dianplusjs/dp-components';
import { Space, Button } from 'antd';

const EmployeeDataManagement = () => {
  const currentBrandId = '10029';
  const currentUserId = '100414';

  const exportConfig = {
    jobName: 'Export Employees',
    bizType: '13051',
    entId: currentBrandId,
    userId: currentUserId,
    titles: DjExcel.generateExcelXML([
      { key: 'storageCode', name: 'Store Code', width: 100 },
      { key: 'depCode', name: 'Department Code', width: 120 },
      { key: 'atom.jobNumber', name: 'Job Number', required: 'true', width: 100 },
      { key: 'atom.realName', name: 'Full Name', required: 'true', width: 150 },
      { key: 'atom.mobilePhone', name: 'Mobile Phone', width: 120 },
      { key: 'typeDesc', name: 'System Type', width: 100 },
      { key: 'roleName', name: 'Role', width: 120 },
      { key: 'statusDesc', name: 'Status', width: 80 },
      {
        key: 'photo',
        name: 'Photo',
        type: 6,
        imageW: 50,
        imageH: 50,
        width: 80
      },
    ]),
    queryContent: JSON.stringify({
      brandId: currentBrandId,
      pageSize: 1000,
      status: 'ACTIVE',
    }),
  };

  const importConfig = {
    entId: currentBrandId,
    jobName: 'Import Employees',
    bizType: '13051',
    userId: currentUserId,
  };

  return (
    <div style={{ padding: '20px' }}>
      <h2>Employee Data Management</h2>

      <Space size="middle">
        {/* Export Button */}
        <BooleanTrigger destroyOnClose>
          <Button type="primary">Export Employees</Button>
          <DjExcel.ExportModal
            title="Export Employee Data"
            params={exportConfig}
            onClose={(jobId) => {
              console.log('Export job created:', jobId);
            }}
          />
        </BooleanTrigger>

        {/* Import Button */}
        <DjExcel.ImportButton
          type="default"
          excelProps={{
            title: 'Import Employee Data',
            params: importConfig,
            check: true,
            errToStop: true,
            template: '/templates/employee_import_template.xlsx',
            onClose: (result) => {
              console.log('Import result:', result);
              if (result.success) {
                console.log(`Imported ${result.totalCount} employees`);
              }
            },
          }}
        >
          Import Employees
        </DjExcel.ImportButton>

        {/* Task List */}
        <BooleanTrigger>
          <Button>View Tasks</Button>
          <DjExcel.TaskWindow bizType="13051" />
        </BooleanTrigger>
      </Space>

      <div style={{ marginTop: '20px', color: '#666' }}>
        <p>Export: Downloads all active employees with specified fields</p>
        <p>Import: Upload Excel file to batch create/update employee records</p>
        <p>Task List: Monitor import/export job progress and download results</p>
      </div>
    </div>
  );
};

export default EmployeeDataManagement;

```

--------------------------------

### Implement BigTable High-Performance Data Table in React

Source: https://context7.com/shenluwei/dplus-components/llms.txt

Demonstrates the implementation of the BigTable component, a high-performance data table supporting virtual scrolling, column filtering, sorting, and row selection. It requires React and the '@dianplusjs/dp-components' library. The component takes data source and column definitions as input and handles table state changes and row selection.

```tsx
import React, { useRef } from 'react';
import { BigTable } from '@dianplusjs/dp-components';

const MyDataTable = () => {
  const tableRef = useRef(null);

  // Generate sample data
  const dataSource = Array.from({ length: 10000 }, (_, i) => ({
    id: i,
    region: `Region ${i % 10}`,
    store: `Store ${i}`,
    sales: Math.floor(Math.random() * 100000),
    date: new Date(2024, i % 12, i % 28).toLocaleDateString(),
  }));

  const columns = [
    {
      key: 'region',
      title: 'Region',
      dataIndex: ['region'],
      fixed: 'left',
      sortEnabled: true,
      filterEnabled: true,
      filterDataType: 'TEXT',
      width: 120,
    },
    {
      key: 'store',
      title: 'Store',
      dataIndex: ['store'],
      sortEnabled: true,
      filterEnabled: true,
      width: 160,
    },
    {
      key: 'sales',
      title: 'Sales Amount',
      dataIndex: ['sales'],
      sortEnabled: true,
      filterEnabled: true,
      filterDataType: 'NUMBER',
      render: (value) => `$${value.toLocaleString()}`,
    },
    {
      key: 'date',
      title: 'Date',
      dataIndex: ['date'],
      sortEnabled: true,
      filterEnabled: true,
      filterDataType: 'DATE_RANGE',
    },
  ];

  const handleTableChange = (filters, sorters) => {
    console.log('Filters:', filters);
    console.log('Sorters:', sorters);
  };

  const handleExport = () => {
    tableRef.current?.exportToExcel();
  };

  return (
    <div style={{ width: '100%', height: 600 }}>
      <button onClick={handleExport}>Export to Excel</button>
      <BigTable
        ref={tableRef}
        rowKey={(row) => row.id}
        dataSource={dataSource}
        columns={columns}
        options={{
          tableHeadDragEnabled: true,
          tableHeadFilterEnabled: true,
          tableHeadSorterEnabled: true,
          hoverRowEnable: true,
          frozen: { rowCount: 1 },
        }}
        onTableChange={handleTableChange}
        rowSelection={{
          type: 'checkbox',
          onChange: (selectedKeys, selectedRows) => {
            console.log(`Selected ${selectedKeys.length} rows`);
          },
        }}
      />
    </div>
  );
};

export default MyDataTable;

```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.