From 0da45505d7b5bc4d9b1e4aa1e9489f8b1f165725 Mon Sep 17 00:00:00 2001 From: Hassan Abouelela <47495861+HassanAbouelela@users.noreply.github.com> Date: Mon, 4 Jan 2021 04:00:10 +0300 Subject: Adds Question Rendering Adds a question component, and calls it on form page. Adds styling for input types and form page. Lays foundation for validation and submission. Signed-off-by: Hassan Abouelela <47495861+HassanAbouelela@users.noreply.github.com> --- src/pages/FormPage.tsx | 76 +++++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 66 insertions(+), 10 deletions(-) (limited to 'src/pages/FormPage.tsx') diff --git a/src/pages/FormPage.tsx b/src/pages/FormPage.tsx index 1805897..b966e84 100644 --- a/src/pages/FormPage.tsx +++ b/src/pages/FormPage.tsx @@ -1,12 +1,17 @@ /** @jsx jsx */ -import { jsx } from "@emotion/react"; +import { jsx, css } from "@emotion/react"; import { Link } from "react-router-dom"; +import React, { SyntheticEvent, useEffect, useState } from "react"; import { useParams } from "react-router"; + import HeaderBar from "../components/HeaderBar"; -import { useEffect, useState } from "react"; -import { Form, getForm } from "../api/forms"; +import RenderedQuestion from "../components/Question"; import Loading from "../components/Loading"; +import ScrollToTop from "../components/ScrollToTop"; + +import { Form, FormFeatures, getForm } from "../api/forms"; + interface PathParams { id: string @@ -21,19 +26,70 @@ function FormPage(): JSX.Element { getForm(id).then(form => { setForm(form); }); - }); + }, []); if (!form) { return ; } - return
- -
-

{form.description}

- Return home + const questions = form.questions.map((question, index) => { + return ; + }); + + function handleSubmit(event: SyntheticEvent) { + questions.forEach(prop => { + const question = prop.props.question; + + // TODO: Parse input from each question, and submit + switch (question.type) { + default: + console.log(question.id, prop.props.public_state); + } + }); + + event.preventDefault(); + } + + const open: boolean = form.features.includes(FormFeatures.Open); + + let closed_header = null; + let submit = null; + + if (open) { + submit = ( +
+ +
+ ); + } else { + closed_header = ( +
+
This form is now closed. You will not be able to submit your response.
+
+ ); + } + + + return ( +
+ +
+
+ { closed_header } + {questions} +
+
+
+ Return Home +
+
+ { submit } +
+
+
+
-
; + ); } export default FormPage; -- cgit v1.2.3 From 996c14afb9d81e962ef66b99bd869bce4f3688f0 Mon Sep 17 00:00:00 2001 From: Hassan Abouelela <47495861+HassanAbouelela@users.noreply.github.com> Date: Wed, 6 Jan 2021 08:00:31 +0300 Subject: Breaks Up CSS Into Components Moves the styles from the CSS file, into emotion CSS in each component's file to make navigation easier, and keep CSS and JSX together.Drops raw-loader dependency. Signed-off-by: Hassan Abouelela <47495861+HassanAbouelela@users.noreply.github.com> --- package.json | 1 - src/colors.ts | 2 + src/commonStyles.tsx | 39 +++ src/components/InputTypes/Checkbox.tsx | 62 ++++- src/components/InputTypes/Radio.tsx | 4 +- src/components/InputTypes/Range.tsx | 101 ++++++- src/components/InputTypes/Select.tsx | 109 +++++++- src/components/InputTypes/ShortText.tsx | 3 +- src/components/InputTypes/TextArea.tsx | 14 +- src/components/Question.tsx | 61 ++++- src/components/ScrollToTop.tsx | 3 +- src/pages/FormPage.tsx | 168 ++++++++++-- src/pages/css/FormPage.css | 452 -------------------------------- src/tests/pages/FormPage.test.tsx | 2 +- webpack.config.js | 6 - yarn.lock | 8 - 16 files changed, 498 insertions(+), 537 deletions(-) create mode 100644 src/commonStyles.tsx delete mode 100644 src/pages/css/FormPage.css (limited to 'src/pages/FormPage.tsx') diff --git a/package.json b/package.json index e74aa57..c3e21ce 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,6 @@ "fs-extra": "9.0.1", "html-webpack-plugin": "4.5.1", "identity-obj-proxy": "3.0.0", - "raw-loader": "4.0.2", "react": "17.0.1", "react-app-polyfill": "2.0.0", "react-dom": "17.0.1", diff --git a/src/colors.ts b/src/colors.ts index e9c74b1..52b48cb 100644 --- a/src/colors.ts +++ b/src/colors.ts @@ -1,8 +1,10 @@ export default { blurple: "#7289DA", + darkerBlurple: "#4E609C", darkButNotBlack: "#2C2F33", notQuiteBlack: "#23272A", greyple: "#99AAB5", + darkerGreyple: "#6E7D88", error: "#f04747", success: "#43b581" }; diff --git a/src/commonStyles.tsx b/src/commonStyles.tsx new file mode 100644 index 0000000..d47dea7 --- /dev/null +++ b/src/commonStyles.tsx @@ -0,0 +1,39 @@ +import { css } from "@emotion/react"; + +const selectable = css` + -moz-user-select: text; + -webkit-user-select: text; + -ms-user-select: text; + user-select: text; +`; + +const unselectable = css` + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; +`; + +const textInputs = css` + display: inline-block; + width: min(20rem, 90%); + height: 100%; + min-height: 2rem; + + background: whitesmoke; + + color: black; + padding: 0 1rem; + font: inherit; + + margin-bottom: 0; + + border: 0.1rem solid black; + border-radius: 8px; +`; + +export { + selectable, + unselectable, + textInputs +}; diff --git a/src/components/InputTypes/Checkbox.tsx b/src/components/InputTypes/Checkbox.tsx index ed02b83..07872d6 100644 --- a/src/components/InputTypes/Checkbox.tsx +++ b/src/components/InputTypes/Checkbox.tsx @@ -1,6 +1,7 @@ /** @jsx jsx */ -import { jsx } from "@emotion/react"; +import { jsx, css } from "@emotion/react"; import React, { ChangeEvent } from "react"; +import colors from "../../colors"; interface CheckboxProps { index: number, @@ -8,13 +9,66 @@ interface CheckboxProps { handler: (event: ChangeEvent) => void } +const generalStyles = css` + label { + display: inline-block; + position: relative; + top: 0.25em; + + width: 1em; + height: 1em; + + margin: 1rem 0.5rem 0 0; + border: whitesmoke 0.2rem solid; + border-radius: 25%; + + transition: background-color 300ms; + } + + .unselected { + background-color: white; + } + + .unselected:hover { + background-color: lightgray; + } + + input { + position: absolute; + opacity: 0; + height: 0; + width: 0; + } + + .checkmark { + position: absolute; + } +`; + +const activeStyles = css` + .selected { + background-color: ${colors.blurple}; + } + + .selected .checkmark { + width: 0.30rem; + height: 0.60rem; + left: 0.25em; + + border: solid white; + border-width: 0 0.2rem 0.2rem 0; + + transform: rotate(45deg); + } +`; + export default function Checkbox(props: CheckboxProps): JSX.Element { return ( -