From fc3f12e47bf30d2789ac75eea691de5acf634a82 Mon Sep 17 00:00:00 2001 From: Daniel Balogh Date: Wed, 11 May 2022 01:59:44 +0300 Subject: [PATCH] Add date and time support client-side --- README.md | 4 ++-- example/src/App.js | 8 ++++++++ example/src/components/DateInput.js | 13 +++++++++++++ example/src/components/TimeInput.js | 13 +++++++++++++ src/hooks/index.ts | 2 ++ src/hooks/useDateInput.ts | 6 ++++++ src/hooks/useTimeInput.ts | 6 ++++++ src/hooks/utils/useTextInput.ts | 2 +- src/scripts/googleFormsToJson.ts | 13 ++++++------- src/types/form.ts | 7 +------ 10 files changed, 58 insertions(+), 16 deletions(-) create mode 100644 example/src/components/DateInput.js create mode 100644 example/src/components/TimeInput.js create mode 100644 src/hooks/useDateInput.ts create mode 100644 src/hooks/useTimeInput.ts diff --git a/README.md b/README.md index 3cf2cb6..f4ca0fb 100644 --- a/README.md +++ b/README.md @@ -89,7 +89,7 @@ You can check a more complete example in the [example](https://github.com/franci - Right now there is no observability on errors when submitting a form. See this [comment on the code](https://github.com/francisconeves97/react-google-forms-hooks/blob/ca5018e578cfb0e230f9be58dfeee4117db28160/src/hooks/useGoogleForm.ts#L61-L65). - You can use the `submitToGoogleForm` export to create a server to handle form submissions. This way you can mitigate the CORS problem. - No support for multi page, sections, images and other Google Forms functionalities. However you can build your React form with multiple pages, by saving the `data` from `handleSubmit` and only `submitToGoogleForms` on the last page. -- The list of supported inputs doesn't feature every input from Google Forms. Supported inputs: Short Answer, Long Answer, Checkbox, Radio, Dropdown, Linear, Radio Grid, Checkbox Grid +- The list of supported inputs doesn't feature every input from Google Forms. Supported inputs: Short Answer, Long Answer, Date, Time, Checkbox, Radio, Dropdown, Linear, Radio Grid, Checkbox Grid - Because of CORS you have to run the `googleFormsToJson` script in build time. ## Contributing @@ -126,4 +126,4 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d -This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome! \ No newline at end of file +This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome! diff --git a/example/src/App.js b/example/src/App.js index 6b50aa6..ffcf236 100644 --- a/example/src/App.js +++ b/example/src/App.js @@ -9,6 +9,8 @@ import CheckboxInput from './components/CheckboxInput' import RadioInput from './components/RadioInput' import ShortAnswerInput from './components/ShortAnswerInput' import LongAnswerInput from './components/LongAnswerInput' +import DateInput from './components/DateInput' +import TimeInput from "./components/TimeInput" import RadioGridInput from './components/RadioGridInput' import CheckboxGridInput from './components/CheckboxGridInput' import DropdownInput from './components/DropdownInput' @@ -54,6 +56,12 @@ const Questions = () => { case 'LONG_ANSWER': questionInput = break + case 'DATE': + questionInput = + break + case 'TIMe': + questionInput = + break case 'RADIO_GRID': questionInput = break diff --git a/example/src/components/DateInput.js b/example/src/components/DateInput.js new file mode 100644 index 0000000..388fa6c --- /dev/null +++ b/example/src/components/DateInput.js @@ -0,0 +1,13 @@ +import React from 'react' + +import { useDateInput } from 'react-google-forms-hooks' + +export default function DateInput({ id }) { + const { register } = useDateInput(id) + + return ( +
+ +
+ ) +} diff --git a/example/src/components/TimeInput.js b/example/src/components/TimeInput.js new file mode 100644 index 0000000..5210342 --- /dev/null +++ b/example/src/components/TimeInput.js @@ -0,0 +1,13 @@ +import React from 'react' + +import { useTimeInput } from 'react-google-forms-hooks' + +export default function TimeInput({ id }) { + const { register } = useTimeInput(id) + + return ( +
+ +
+ ) +} diff --git a/src/hooks/index.ts b/src/hooks/index.ts index 7b5144f..f1591ed 100644 --- a/src/hooks/index.ts +++ b/src/hooks/index.ts @@ -8,3 +8,5 @@ export * from './useCheckboxGridInput' export * from './useRadioGridInput' export * from './useDropdownInput' export * from './useLinearInput' +export * from './useDateInput' +export * from './useTimeInput' diff --git a/src/hooks/useDateInput.ts b/src/hooks/useDateInput.ts new file mode 100644 index 0000000..1f60d1c --- /dev/null +++ b/src/hooks/useDateInput.ts @@ -0,0 +1,6 @@ +import { UseTextFieldReturn } from '../types' +import useTextInput from './utils/useTextInput' + +export const useDateInput = (id: string): UseTextFieldReturn => { + return useTextInput(id, 'DATE') +} diff --git a/src/hooks/useTimeInput.ts b/src/hooks/useTimeInput.ts new file mode 100644 index 0000000..1956d51 --- /dev/null +++ b/src/hooks/useTimeInput.ts @@ -0,0 +1,6 @@ +import { UseTextFieldReturn } from '../types' +import useTextInput from './utils/useTextInput' + +export const useTimeInput = (id: string): UseTextFieldReturn => { + return useTextInput(id, 'TIME') +} diff --git a/src/hooks/utils/useTextInput.ts b/src/hooks/utils/useTextInput.ts index 0129736..c66bdc7 100644 --- a/src/hooks/utils/useTextInput.ts +++ b/src/hooks/utils/useTextInput.ts @@ -6,7 +6,7 @@ import getFieldFromContext from './getFieldFromContext' export default ( id: string, - fieldType: 'LONG_ANSWER' | 'SHORT_ANSWER' + fieldType: 'LONG_ANSWER' | 'SHORT_ANSWER' | 'DATE' | 'TIME', ): UseTextFieldReturn => { const context = useGoogleFormContext() diff --git a/src/scripts/googleFormsToJson.ts b/src/scripts/googleFormsToJson.ts index babed1e..dee1fb2 100644 --- a/src/scripts/googleFormsToJson.ts +++ b/src/scripts/googleFormsToJson.ts @@ -100,6 +100,9 @@ const parseFieldType = (rawField: Array, fieldId: number) => { if (fieldId === 9) { return 'DATE' } + if (fieldId === 10) { + return 'TIME' + } return fieldTypes[fieldId] } @@ -141,7 +144,9 @@ const parseField = (rawField: Array): Field => { switch (field.type) { case 'SHORT_ANSWER': - case 'LONG_ANSWER': { + case 'LONG_ANSWER': + case 'DATE': + case 'TIME': { const fieldInfo = rawField[4][0] field.id = toString(fieldInfo[0]) field.required = toBool(fieldInfo[2]) @@ -179,12 +184,6 @@ const parseField = (rawField: Array): Field => { field.required = toBool(rawField[4][0][2]) break } - case 'DATE': { - const fieldInfo = rawField[4][0] - field.id = toString(fieldInfo[0]) - field.required = toBool(rawField[4][0][2]) - break - } } return field diff --git a/src/types/form.ts b/src/types/form.ts index 4fa2d17..a9e64df 100644 --- a/src/types/form.ts +++ b/src/types/form.ts @@ -14,11 +14,7 @@ export interface BaseField { } export interface TextField extends BaseField { - type: 'SHORT_ANSWER' | 'LONG_ANSWER' -} - -export interface DateField extends BaseField { - type: 'DATE' + type: 'SHORT_ANSWER' | 'LONG_ANSWER' | 'DATE' | 'TIME' } export interface CustomOptionField extends BaseField { @@ -59,7 +55,6 @@ export interface GridField extends BaseField { export type Field = | TextField - | DateField | CustomOptionField | DropdownField | GridField