@websolutespa/payload-plugin-bowl
Version:
Bowl PayloadCms plugin of the BOM Repository
91 lines (90 loc) • 4.06 kB
JavaScript
'use client';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Button, Modal, useConfig, useModal, useTranslation } from '@payloadcms/ui';
import { getRouteResolver } from '@websolutespa/payload-utils';
import React from 'react';
import { DecoratedList } from '../DecoratedList/DecoratedList';
import './ImportExportList.scss';
import { ImportModal } from './ImportModal';
const baseClass = 'import-export-list';
export const ImportExportList = ({ parser, exampleCSV = '', ...props })=>{
// !!! check translations
const { t } = useTranslation();
const slug = props.collectionSlug;
const { config } = useConfig();
const routeResolver = getRouteResolver(config);
const exportUrl = routeResolver.api(`/${slug}/export`);
const { openModal, isModalOpen } = useModal();
const modalKey = `${slug}-import-modal`;
const isModalOpened = isModalOpen(modalKey);
const downloadExampleCSV = ()=>{
const element = document.createElement('a');
element.style.position = 'absolute';
const file = new Blob([
exampleCSV
], {
type: 'text/plain'
});
element.href = URL.createObjectURL(file);
element.download = 'example.csv';
document.body.appendChild(element); // Required for this to work in FireFox
element.click();
element.remove();
};
return /*#__PURE__*/ _jsx(DecoratedList, {
props: props,
after: /*#__PURE__*/ _jsxs(_Fragment, {
children: [
/*#__PURE__*/ _jsxs("div", {
className: "gutter--left gutter--right import-export-list__actions",
children: [
/*#__PURE__*/ _jsx(Button, {
className: "pill pill--style-light pill--has-link pill--has-action",
onClick: ()=>openModal(modalKey),
children: /*#__PURE__*/ _jsx("span", {
children: t('importExport:importCSV')
})
}),
/*#__PURE__*/ _jsx("a", {
className: "pill pill--style-light pill--has-link pill--has-action",
href: exportUrl,
download: `${slug}.csv`,
children: /*#__PURE__*/ _jsx("span", {
children: t('importExport:exportCSV')
})
}),
exampleCSV && /*#__PURE__*/ _jsx(Button, {
className: "pill pill--style-light pill--has-link pill--has-action",
onClick: ()=>downloadExampleCSV(),
children: /*#__PURE__*/ _jsx("span", {
children: t('importExport:exampleCSV')
})
})
]
}),
/*#__PURE__*/ _jsx(Modal, {
slug: modalKey,
className: `${baseClass}__modal`,
children: isModalOpened && /*#__PURE__*/ _jsx(ImportModal, {
parser: parser,
slug: props.collectionSlug
})
})
]
})
});
};
export function importExportListWithParser(parser, exampleCSV) {
// console.log('importExportListWithParser', 'parser', parser);
const WithParserImportExportList = ({ ...props })=>{
return /*#__PURE__*/ _jsx(ImportExportList, {
parser: parser,
exampleCSV: exampleCSV,
...props
});
};
// WithParserImportExportList.displayName = `WithParserImportExportList(${getDisplayName(WrappedComponent)})`;
WithParserImportExportList.displayName = 'WithParserImportExportList(ImportExportList)';
return WithParserImportExportList;
}
//# sourceMappingURL=ImportExportList.js.map