@commercelayer/react-components/lib/cjs/components/orders/OrderList.js

The Official Commerce Layer React Components

"use client";
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.OrderList=OrderList;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),CustomerContext_1=tslib_1.__importDefault(require("../../context/CustomerContext")),OrderListChildrenContext_1=tslib_1.__importDefault(require("../../context/OrderListChildrenContext")),OrderListPaginationContext_1=tslib_1.__importDefault(require("../../context/OrderListPaginationContext")),react_table_1=require("@tanstack/react-table"),icons_1=require("../../utils/icons"),filterChildren_1=tslib_1.__importDefault(require("../../utils/filterChildren")),rowComponents=["OrderListRow","OrderListEmpty"],paginationComponents=["OrderListPaginationInfo","OrderListPaginationButtons"];function OrderList({id,type="orders",children,columns,loadingElement,showActions=!1,showPagination=!1,sortBy=[{id:"number",desc:!0}],pageSize=10,paginationContainerClassName,actionsComponent,actionsContainerClassName,theadClassName,rowTrClassName,...p}){const[loading,setLoading]=(0,react_1.useState)(!0),[sorting,setSorting]=(0,react_1.useState)(sortBy),[{pageIndex,pageSize:currentPageSize},setPagination]=(0,react_1.useState)({pageIndex:0,pageSize}),{orders,subscriptions,getCustomerOrders,getCustomerSubscriptions}=(0,react_1.useContext)(CustomerContext_1.default),defaultSdkSorting=sortBy.length&&sortBy[0]!=null?{[sortBy[0].id]:sortBy[0].desc?"desc":"asc"}:void 0;(0,react_1.useEffect)(()=>{const sdkSorting=sorting.length&&sorting[0]!=null?{[sorting[0].id]:sorting[0].desc?"desc":"asc"}:defaultSdkSorting;type==="orders"&&getCustomerOrders!=null&&getCustomerOrders({pageNumber:pageIndex+1,pageSize:currentPageSize,sortBy:sdkSorting}),type==="subscriptions"&&getCustomerSubscriptions!=null&&getCustomerSubscriptions({pageNumber:pageIndex+1,pageSize:currentPageSize,sortBy:sdkSorting,id})},[pageIndex,currentPageSize,sorting,id!=null]);const data=(0,react_1.useMemo)(()=>type==="orders"?orders??[]:id==null?subscriptions??[]:subscriptions?.[0]?.type==="orders"?subscriptions:[],[orders,subscriptions]),cols=(0,react_1.useMemo)(()=>columns,[columns]),pagination=(0,react_1.useMemo)(()=>({pageIndex,pageSize:currentPageSize}),[pageIndex,currentPageSize]),pageCount=orders?.pageCount??subscriptions?.pageCount??-1,table=(0,react_table_1.useReactTable)({data,columns:cols,getSortedRowModel:(0,react_table_1.getSortedRowModel)(),getCoreRowModel:(0,react_table_1.getCoreRowModel)(),getPaginationRowModel:(0,react_table_1.getPaginationRowModel)(),manualPagination:!0,manualSorting:!0,pageCount,state:{sorting,pagination},onSortingChange:setSorting,onPaginationChange:setPagination}),TableHtmlElement="table",TheadHtmlElement="thead",TbodyHtmlElement="tbody",ThHtmlElement="th",TrHtmlElement="tr";(0,react_1.useEffect)(()=>(type==="orders"&&orders!=null&&setLoading(!1),type==="subscriptions"&&subscriptions!=null&&setLoading(!1),()=>{setLoading(!0)}),[orders,subscriptions]);const LoadingComponent=loadingElement||(0,jsx_runtime_1.jsx)("div",{children:"Loading..."}),headerComponent=table.getHeaderGroups().map(headerGroup=>{const columnsComponents=headerGroup.headers.map((header,k)=>{const sortLabel=header.column.getIsSorted()!==!1?header.column.getIsSorted():"";return(0,jsx_runtime_1.jsx)(ThHtmlElement,{"data-testid":`thead-${k}`,"data-sort":`${sortLabel||""}`,className:columns[k]?.className,children:(0,jsx_runtime_1.jsxs)("span",{className:`${columns[k]?.titleClassName??""} ${header.column.getCanSort()?"cursor-pointer select-none":""}`,onClick:header.column.getToggleSortingHandler(),children:[(0,react_table_1.flexRender)(header.column.columnDef.header,header.getContext()),{asc:icons_1.sortAscIcon,desc:icons_1.sortDescIcon}[header.column.getIsSorted()]??null]})},header.id)});return(0,jsx_runtime_1.jsx)(TrHtmlElement,{children:columnsComponents},headerGroup.id)}),rowsComponents=(0,filterChildren_1.default)({children,filterBy:rowComponents,componentName:"OrderList"}),components=table.getRowModel().rows.map(row=>{const childProps={type,orders:type==="orders"?orders:subscriptions,order:row.original,row,showActions,actionsComponent,actionsContainerClassName};return(0,jsx_runtime_1.jsx)(TrHtmlElement,{className:rowTrClassName,children:(0,jsx_runtime_1.jsx)(OrderListChildrenContext_1.default.Provider,{value:childProps,children:rowsComponents})},row.id)}),pagComponents=(0,filterChildren_1.default)({children,filterBy:paginationComponents,componentName:"OrderList"}),totalRows=type==="orders"?orders?.meta.recordCount??0:subscriptions?.meta.recordCount??0,Pagination=()=>showPagination?(0,jsx_runtime_1.jsx)(OrderListPaginationContext_1.default.Provider,{value:{canNextPage:table.getCanNextPage(),canPreviousPage:table.getCanPreviousPage(),gotoPage:table.setPageIndex,nextPage:table.nextPage,pageCount:table.getPageCount(),pageIndex:table.getState().pagination.pageIndex,pageOptions:table.getPageOptions(),pageSize:table.getState().pagination.pageSize,previousPage:table.previousPage,setPageSize:table.setPageSize,totalRows},children:pagComponents}):null;return loading&&(orders==null||subscriptions==null)?(0,jsx_runtime_1.jsx)(jsx_runtime_1.Fragment,{children:LoadingComponent}):(type==="orders"?orders:subscriptions)?.length===0?(0,jsx_runtime_1.jsxs)(OrderListChildrenContext_1.default.Provider,{value:{orders:type==="orders"?orders:subscriptions},children:[rowsComponents,(0,jsx_runtime_1.jsx)(Pagination,{})]}):(0,jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment,{children:[(0,jsx_runtime_1.jsxs)(TableHtmlElement,{...p,children:[(0,jsx_runtime_1.jsx)(TheadHtmlElement,{className:theadClassName,children:headerComponent}),(0,jsx_runtime_1.jsx)(TbodyHtmlElement,{children:components})]}),totalRows<=pageSize?null:(0,jsx_runtime_1.jsx)("div",{className:paginationContainerClassName,children:(0,jsx_runtime_1.jsx)(Pagination,{})})]})}exports.default=OrderList;