@@ -0,0 +1,6 @@
+ .ant-btn-primary {
+ background-color: #0B7FAD;
+ color: white;
+ margin-left: 40px;
+ margin-top: 12px;
+}
@@ -0,0 +1,10 @@
+import { render, fireEvent, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import React from 'react';
+import FileChooserComponentButton from './FileChooserComponentButton';
+
+test('Filechooser modal opens on button click', async () => {
+ const { queryByText } = render(<FileChooserComponentButton />);
+ fireEvent.click(queryByText('File chooser component'));
+ await waitFor(() => expect(queryByText('Choose a file')).toBeInTheDocument());
+});
@@ -0,0 +1,19 @@
+import React, { useState } from 'react';
+import './FileChooserComponentButton.scss';
+import FileChooserModal from '../FileChooserModal/FileChooserModal';
+import { Button } from 'antd';
+const FileChooserComponentButton = (): JSX.Element => {
+ const [show, setShow] = useState(false);
+ return (
+ <div>
+ <Button type="primary" onClick={() => setShow(true)}>
+ File chooser component
+ </Button>
+ <FileChooserModal onClose={() => setShow(false)} show={show} />
+ </div>
+ );
+};
+export default FileChooserComponentButton;
@@ -0,0 +1,2 @@
@@ -0,0 +1,28 @@
+import './FileChooserModal.scss';
+import Modal from 'antd/lib/modal/Modal';
+interface FileProps {
+ show: boolean;
+ onClose: () => void;
+const FileChooserModal: React.FC<FileProps> = ({ show, onClose }) => {
+ const handleOk = () => {
+ onClose();
+ };
+ const handleCancel = () => {
+ <Modal
+ title="Choose a file"
+ open={show}
+ onOk={handleOk}
+ onCancel={handleCancel}
+ okText="Select"
+ ></Modal>
+export default FileChooserModal;
@@ -11,6 +11,11 @@ export async function loadComponent(name) {
case 'ReactExampleGlobal':
return (await import('./ReactExampleGlobal/ReactExampleGlobal')).default;
+ case 'FileChooserComponentButton':
+ await import('./FileChooserComponent/FileChooserComponentButton/FileChooserComponentButton')
+ ).default;
default:
console.error(`A placeholder component is rendered because you probably forgot to include your new component in the
loadComponent function of reactComponents/imports.js`);
@@ -79,6 +79,18 @@ ${ commonheader(_("Importer"), "indexer", user, request, "60px") | n,unicode }
<!-- /ko -->
</a>
</li>
+ <!-- File Chooser component button
+ <script type="text/javascript">
+ (function () {
+ window.createReactComponents('#importerComponents');
+ })();
+ </script>
+ <li>
+ <FileChooserComponentButton data-reactcomponent='FileChooserComponentButton' ></FileChooserComponentButton>
+ </li>
+ !-->
</ul>
</div>