www.dextsolution.com
DEXTUPLOAD
X5
React リファレンス > DEXTUploadX5UI(List/Tile/Single/Grid)

# DEXTUploadX5UI(List/Tile/Single/Grid)

コンポーネント

  dextuploadx5-react 0.0.1 以降

  DEXTUploadX5UI は React で X5 UI を生成するための基本コンポーネントであり、実際のパッケージではこれを基に DEXTUploadX5List、DEXTUploadX5Grid、DEXTUploadX5Tile、DEXTUploadX5Single を提供します。

  このコンポーネントは渡された属性を用いて内部的に DX5.create() を呼び出し、React のライフサイクルに合わせて X5 インスタンスを生成・削除します。

      import {
        DEXTUploadX5List,
        DEXTUploadX5Grid
      } from "dextuploadx5-react";

      function Sample() {
        return (
          <>
            <DEXTUploadX5List id="list1" style={{ width: "100%", height: "320px" }} />
            <DEXTUploadX5Grid id="grid1" style={{ width: "100%", height: "320px" }} />
          </>
        );
      }

  List、Tile、Single、Grid コンポーネントは、内部的に異なる固定 type 値を渡す薄いラッパーです。

  次の属性が変わると内部 X5 インスタンスが再生成されます: id, type, progressType, path, waitingTime, lang

  Grid の columns 属性は Grid 形式でのみ意味を持ち、onCreated 時点で内部列を再構成します。

属性
  - columns
  - hidden
  - id
  - lang
  - progressType
  - type
  - waitingTime
  - onCreated
  - onError
  - onBeforeItemsAdd
  - onItemAdding
  - onItemsAdded
  - onBeforeItemsDelete
  - onItemDeleting
  - onItemsDeleted
  - onItemSelect
  - onItemCheck
  - onItemDoubleClick
  - onUploadBegin
  - onUploadItemStart
  - onUploadItemEnd
  - onUploadStopped
  - onUploadCompleted
  - onDownloadBegin
  - onDownloadItemStart
  - onDownloadItemEnd
  - onDownloadStopped
  - onDownloadCompleted
  - onPreview
  - onColumnDataBinding
  - onColumnDataDisplaying
  - onCompressWaitingBegin
  - onCompressWaitingCompleted
  - onCompressWaitingStopped
  - onDragAndDrop