add connection modal

web/src/modals/ConnectionModal.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import ModalBase from './ModalBase';
+import { FormRow, FormLabel, FormValue, FormTextField, FormSubmit } from '../utility/forms';
+import { TextField } from '../utility/inputs';
+import { Formik, Form } from 'formik';
+// import FormikForm from '../utility/FormikForm';
+
+export default function ConnectionModal({ modalState }) {
+  const handleSubmit = values => {
+    console.log(values);
+    modalState.close();
+  };
+  return (
+    <ModalBase modalState={modalState}>
+      <h2>Add connection</h2>
+      <Formik onSubmit={handleSubmit} initialValues={{ server: 'localhost' }}>
+        <Form>
+          <FormTextField label="Server" name="server" />
+          <FormTextField label="Port" name="port" />
+          <FormTextField label="User" name="user" />
+          <FormTextField label="Password" name="password" />
+          <FormTextField label="Display name" name="displayName" />
+
+          <FormSubmit />
+        </Form>
+      </Formik>
+    </ModalBase>
+  );
+}

web/src/modals/ModalBase.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import Modal from 'react-modal';
+import styled from 'styled-components';
+
+// const StyledModal = styled(Modal)`
+//   position: absolute;
+//   top: 40px;
+//   left: 40px;
+//   right: 40px;
+//   bottom: 40px;
+//   border: 1px solid #ccc;
+//   background: #fff;
+//   overflow: auto;
+//   webkitoverflowscrolling: touch;
+//   borderradius: 4px;
+//   outline: none;
+//   padding: 20px;
+// `;
+
+const StyledModal = styled(Modal)`
+  border: 1px solid #ccc;
+  background: #fff;
+  overflow: auto;
+  webkitoverflowscrolling: touch;
+  borderradius: 4px;
+  outline: none;
+  padding: 20px;
+
+  width: 50%;
+  margin: auto;
+  margin-top: 15vh;
+`;
+
+export default function ModalBase({ modalState, children }) {
+  return (
+    <StyledModal isOpen={modalState.isOpen} onRequestClose={modalState.close}>
+      {children}
+    </StyledModal>
+  );
+}

web/src/modals/useModalState.js

@@ -0,0 +1,8 @@
+import React from 'react';
+
+export default function useModalState() {
+  const [isOpen, setOpen] = React.useState(false);
+  const close = () => setOpen(false);
+  const open = () => setOpen(true);
+  return { isOpen, open, close };
+}

web/src/utility/forms.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import styled from 'styled-components';
+import { TextField } from './inputs';
+import { Field } from 'formik';
+
+export const FormRow = styled.div`
+  display: flex;
+  margin: 10px;
+`;
+
+export const FormLabel = styled.div`
+  width: 10vw;
+  font-weight: bold;
+`;
+
+export const FormValue = styled.div``;
+
+export function FormTextField({ label, ...other }) {
+  return (
+    <FormRow>
+      <FormLabel>{label}</FormLabel>
+      <FormValue>
+        <Field {...other} as={TextField} />
+      </FormValue>
+    </FormRow>
+  );
+}
+
+export function FormSubmit({text}) {
+  return (
+    <FormRow>
+      <input type="submit" value={text}/>
+    </FormRow>
+  );
+}

web/src/utility/inputs.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export function TextField({ ...other }) {
+  return <input type="text" {...other}></input>;
+}

web/src/utility/layout.js

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+export const Grid = styled.div``;
+
+export const Row = styled.div``;
+
+export const Col = styled.div``;

web/src/widgets/DatabaseWidget.js

@@ -1,5 +1,13 @@
 import React from 'react';
+import useModalState from '../modals/useModalState';
+import ConnectionModal from '../modals/ConnectionModal';
 
 export default function DatabaseWidget() {
-  return <button onClick={() => {}}>Add connection</button>;
+  const modalState = useModalState();
+  return (
+    <>
+      <ConnectionModal modalState={modalState} />
+      <button onClick={modalState.open}>Add connection</button>
+    </>
+  );
 }