@progress/sitefinity-nextjs-sdk
Version:
Provides OOB widgets developed using the Next.js framework, which includes an abstraction layer for Sitefinity communication. Additionally, it offers an expanded API, typings, and tools for further development and integration.
27 lines (26 loc) • 3.4 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { ListDisplayMode } from '../../editor/widget-framework/list-display-mode';
import { Pager } from '../pager/pager';
import { getExtension, getFileExtensionCssClass, getFileSize } from './common/utils';
export function DocumentListGridView(props) {
const items = props.items.Items;
if (items.length === 0) {
return null;
}
return (_jsxs("div", { ...props.attributes, children: [_jsxs("table", { className: "table", children: [_jsx("thead", { children: _jsxs("tr", { className: "row g-0", children: [_jsx("th", { className: "col-5 border-secondary", children: _jsx("span", { className: "fw-bold", children: props.titleColumnLabel }) }), _jsx("th", { className: "col-2 border-secondary", children: _jsx("span", { className: "fw-bold", children: props.typeColumnLabel }) }), _jsx("th", { className: "col-2 border-secondary text-end", children: _jsx("span", { className: "fw-bold", children: props.sizeColumnLabel }) }), _jsx("th", { className: "col border-secondary" })] }) }), _jsx("tbody", { className: "border-top-0", children: items.map((item, idx) => {
const title = item['Title'];
const fileSize = getFileSize(item);
const extension = getExtension(item);
const downloadUrl = item['Url'];
const itemUrl = `${props.url}${item.ItemDefaultUrl}${props.queryString}`;
const extensionStyle = {
backgroundColor: `var(${getFileExtensionCssClass(extension)})`
};
return (_jsxs("tr", { className: "row g-0", children: [_jsx("td", { className: "col-5", children: _jsxs("div", { className: "d-flex gap-4 align-items-center", children: [_jsxs("div", { className: "position-relative small", children: [_jsx("svg", { xmlns: "https://www.w3.org/2000/svg", width: "24", viewBox: "0 0 384 512", fill: "#a7acb1", children: _jsx("path", { d: "M224 136V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H248c-13.2 0-24-10.8-24-24zm160-14.1v6.1H256V0h6.1c6.4 0 12.5 2.5 17 7l97.9 98c4.5 4.5 7 10.6 7 16.9z" }) }), _jsx("span", { style: extensionStyle, className: "sc-file-icon-extension text-uppercase ps-1 pe-1 mb-2 text-white small", children: extension })] }), _jsx("div", { className: "flex-grow-1", children: title && _jsx("div", { className: "text-break", children: itemUrl && props.renderLinks
? _jsx("a", { href: itemUrl.toString(), children: title // sanitize
})
: (title) // sanitize
}) })] }) }), _jsx("td", { className: "col-2", children: _jsx("span", { children: extension }) }), _jsx("td", { className: "col-2 text-end", children: _jsx("span", { children: fileSize }) }), _jsx("td", { className: "col text-end", children: _jsx("a", { href: downloadUrl, target: "_blank", children: props.downloadLinkLabel }) })] }, idx));
}) })] }), props.pagerMode === ListDisplayMode.Paging &&
_jsx("div", { children: _jsx(Pager, { ...props.pagerProps }) })] }));
}