Shopify Polaris 索引表（拖放）问题

Question

我正在使用 Shopify Polaris 库。问题在于它的组件 IndexTable 这个表不接受任何 html 标签作为子项，因为它破坏了 ui 特别是表头和表列。这就是为什么我无法实施 DND。我能做什么？

沙盒链接：https://codesandbox.io/s/sad-joliot-qfm2dc

()

import { Card, IndexTable, Page, Text } from "@shopify/polaris";
import React from "react";
import { ordersData } from "./orders";
import { DragDropContext, Draggable, Droppable } from "react-beautiful-dnd";

export default function App() {
  const [orders, setOrders] = React.useState([
  {
    id: "1020",
    order: "#1020",
    date: "Jul 20 at 4:34pm",
    customer: "Jaydon Stanton",
    total: "$969.44",
    paymentStatus: "Paid",
    fulfillmentStatus: "Unfulfilled"
  },
  {
    id: "1019",
    order: "#1019",
    date: "Jul 20 at 3:46pm",
    customer: "Ruben Westerfelt",
    total: "$701.19",
    paymentStatus: "Partially paid",
    fulfillmentStatus: "Unfulfilled"
  },
  {
    id: "1018",
    order: "#1018",
    date: "Jul 20 at 3.44pm",
    customer: "Leo Carder",
    total: "$798.24",
    paymentStatus: "Paid",
    fulfillmentStatus: "Unfulfilled"
  }
]);

  const handleDragEnd = ({ source, destination }) => {
    if (!destination) return;
    const reorderedItems = [...orders];
    const [movedItem] = reorderedItems.splice(source?.index, 1);
    reorderedItems.splice(destination?.index, 0, movedItem);
    setOrders(reorderedItems);
  };

  return (
    <Page fullWidth={true} title="Orders">
      <Card>
        <DragDropContext onDragEnd={handleDragEnd}>
          <IndexTable
            resourceName={{
              singular: "order",
              plural: "orders"
            }}
            itemCount={orders.length}
            headings={[
              { title: "Order" },
              { title: "Date" },
              { title: "Customer" },
              { title: "Total" },
              { title: "Payment status" },
              { title: "Fulfillment status" }
            ]}
            selectable={false}
          >
            <Droppable droppableId="orders">
              {(provided, snapshot) => (
                <div {...provided.droppableProps} ref={provided.innerRef}>
                  {orders.map(
                    (
                      {
                        id,
                        order,
                        date,
                        customer,
                        total,
                        paymentStatus,
                        fulfillmentStatus
                      },
                      index
                    ) => (
                      <Draggable
                        key={id}
                        draggableId={id?.toString()}
                        index={index}
                      >
                        {(provided, snapshot) => (
                          <div
                            ref={provided.innerRef}
                            {...provided.draggableProps}
                            {...provided.dragHandleProps}
                          >
                            <IndexTable.Row id={id} key={id} position={index}>
                              <IndexTable.Cell>
                                <Text
                                  variant="bodyMd"
                                  fontWeight="bold"
                                  as="span"
                                >
                                  {order}
                                </Text>
                              </IndexTable.Cell>
                              <IndexTable.Cell>{date}</IndexTable.Cell>
                              <IndexTable.Cell>{customer}</IndexTable.Cell>
                              <IndexTable.Cell>{total}</IndexTable.Cell>
                              <IndexTable.Cell>{paymentStatus}</IndexTable.Cell>
                              <IndexTable.Cell>
                                {fulfillmentStatus}
                              </IndexTable.Cell>
                            </IndexTable.Row>
                          </div>
                        )}
                      </Draggable>
                    )
                  )}
                </div>
              )}
            </Droppable>
          </IndexTable>
        </DragDropContext>
      </Card>
    </Page>
  );
}

Answer 1

您在使用 Shopify Polaris IndexTable 组件时遇到的问题是，它不接受任何 HTML 标签作为子级，这会在您尝试实现拖放功能时破坏 UI。

此问题的一种解决方案是使用

sortablejs

库以及

react-sortablejs

包装器。这将允许您实现拖放功能，而无需修改 IndexTable 组件。

以下是如何更新代码以使用

sortablejs

:

<Sortable
  options={{
    animation: 150,
  }}
  tag={IndexTable}
  onChange={setOrders}
>
  {/* Render the rest of your IndexTable code here */}
</Sortable>

通过使用 Sortable 组件包装 IndexTable 组件，您现在可以实现拖放功能，而无需修改 IndexTable 组件本身。

请注意，您可能还需要更新handleDragEnd函数才能使用新的实现。