Browse Source

Initial Filechooser modal

Nidhi Bhat G 3 years ago
parent
commit
4296761d2d

+ 6 - 0
desktop/core/src/desktop/js/reactComponents/FileChooserComponent/FileChooserComponentButton/FileChooserComponentButton.scss

@@ -0,0 +1,6 @@
+  .ant-btn-primary {
+    background-color: #0B7FAD;
+    color: white;
+    margin-left: 40px;
+    margin-top: 12px;
+}

+ 10 - 0
desktop/core/src/desktop/js/reactComponents/FileChooserComponent/FileChooserComponentButton/FileChooserComponentButton.test.tsx

@@ -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());
+});

+ 19 - 0
desktop/core/src/desktop/js/reactComponents/FileChooserComponent/FileChooserComponentButton/FileChooserComponentButton.tsx

@@ -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;

+ 2 - 0
desktop/core/src/desktop/js/reactComponents/FileChooserComponent/FileChooserModal/FileChooserModal.scss

@@ -0,0 +1,2 @@
+
+

+ 28 - 0
desktop/core/src/desktop/js/reactComponents/FileChooserComponent/FileChooserModal/FileChooserModal.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+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 = () => {
+    onClose();
+  };
+  return (
+    <Modal
+      title="Choose a file"
+      open={show}
+      onOk={handleOk}
+      onCancel={handleCancel}
+      okText="Select"
+    ></Modal>
+  );
+};
+
+export default FileChooserModal;

+ 5 - 0
desktop/core/src/desktop/js/reactComponents/imports.js

@@ -11,6 +11,11 @@ export async function loadComponent(name) {
     case 'ReactExampleGlobal':
       return (await import('./ReactExampleGlobal/ReactExampleGlobal')).default;
 
+    case 'FileChooserComponentButton':
+      return (
+        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`);

+ 12 - 0
desktop/libs/indexer/src/indexer/templates/importer.mako

@@ -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>
+            <div>
+              <FileChooserComponentButton data-reactcomponent='FileChooserComponentButton' ></FileChooserComponentButton>
+            </div>
+          </li>
+          !-->
         </ul>
       </div>
     </div>