Tantalum UI

Order 调整排序布局

宫格类排序组件，类似于微信朋友圈上传图片，支持删除功能。

import { TaOrder, TaGroup } from '@/index'
import { useState } from 'react'

const items = [
  { id: 1, type: 'primary' },
  { id: 2, type: 'success' },
  { id: 3, type: 'warning' },
  { id: 4, type: 'danger' }
]

export default function ExpOrder() {
  const maps = new Map(
    items.map(item => {
      return [item.id, item.type]
    })
  )

  // const [items1, setItems1] = useState(
  //   items.map(item => {
  //     return { id: item.id }
  //   })
  // )
  const [items2, setItems2] = useState(
    items.map(item => {
      return { id: item.id }
    })
  )
  const [items3, setItems3] = useState(
    items.map(item => {
      return { id: item.id }
    })
  )

  return (
    <>
      {/* <TaGroup title="基础用法">
        <div className="exp-order-box">
          <TaOrder
            items={items1}
            onUpdateItems={setItems1 as any}
            render={({ id }) => (
              <div className={`exp-order-item ${maps.get(id as number)}`}></div>
            )}
          />
        </div>
      </TaGroup> */}
      <TaGroup title="设置列数">
        <div className="exp-order-box">
          <TaOrder
            columnNumber="4"
            items={items2}
            onUpdateItems={setItems2 as any}
            render={({ id }) => (
              <div className={`exp-order-item ${maps.get(id as number)}`}></div>
            )}
          />
        </div>
      </TaGroup>
      <TaGroup title="允许删除">
        <div className="exp-order-box">
          <TaOrder
            deletable
            items={items3}
            onUpdateItems={setItems3 as any}
            render={({ id }) => (
              <div className={`exp-order-item ${maps.get(id as number)}`}></div>
            )}
          />
        </div>
      </TaGroup>
    </>
  )
}

Import 

import { TaOrder } from 'tantalum-ui-mobile-react'

具体的引入方式可以参考引入组件。

Import Type

组件导出的类型定义：

import type { OrderOnDelete } from 'tantalum-ui-mobile-react'

Props

属性类型默认值必填说明
itemsItem[]是列表数组
columnNumbernumber3否渲染列数
aspectRationumber1否渲染宽高比
deletablebooleanfalse否支持删除

注： 由于该组件是宫格类排序，所以需要预设列数和每项固定宽高。

items 的结构 

interface Item {
  id: string | number
  draggable?: boolean
}

注：要求一定要有 id 作为唯一键。

Events

事件描述回调函数参数TypeScript 函数
onDelete单项被删除时触发payload: { item: { id: string | number }, index: number }OrderOnDelete

Slots

列表项（children） 

<TaOrder
  columnNumber="4"
  items={items2}
  onUpdateItems={setItems2 as any}
  render={({ id, index }) => (
    <div className={`exp-order-item ${maps.get(id as number)}`}></div>
  )}
/>