From 8512d6d9c126fecc63c07f4b613ac6d959bd8394 Mon Sep 17 00:00:00 2001
From: Moritz Stueckler <moritz.stueckler@gmail.com>
Date: Fri, 30 Apr 2021 18:46:04 +0200
Subject: [PATCH] fix: convert form checkicon to checkbox
---
src/components/Form/AddPoiForm.tsx | 8 ++------
src/components/Form/CheckboxInput.tsx | 21 +++++++++++++++++++++
2 files changed, 23 insertions(+), 6 deletions(-)
create mode 100644 src/components/Form/CheckboxInput.tsx
diff --git a/src/components/Form/AddPoiForm.tsx b/src/components/Form/AddPoiForm.tsx
index ba2e28d..79798c4 100644
--- a/src/components/Form/AddPoiForm.tsx
+++ b/src/components/Form/AddPoiForm.tsx
@@ -5,9 +5,9 @@ import fetcher from '../../util/fetcher';
import TextInput from './TextInput';
import FileInput from './FileInput';
import TextAreaInput from './TextAreaInput';
-import { CheckCircleOutline as CheckIcon } from 'heroicons-react';
import { useStore } from '../../hooks';
import { useHistory } from 'react-router-dom';
+import CheckboxInput from './CheckboxInput';
interface Props {}
@@ -115,11 +115,7 @@ const AddPoiForm: React.FC<Props> = () => {
return (
<form className="flex flex-col" onSubmit={handleSubmit} ref={formRef}>
- <p className="flex items-center leading-relaxed mb-5 text-gray-600">
- <CheckIcon className={`${draftPoi ? 'text-indigo-500' : 'text-gray-400'} mr-2`} />
- Bitte einen Pin auf der Karte setzen.
- </p>
-
+ <CheckboxInput name="draft" label={'Bitte einen Pin auf der Karte setzen.'} value={Boolean(draftPoi)} required />
<TextInput label={'Name des Orts'} name={'name'} value={formData.name} onChange={handleInputChange} required />
<TextInput
label={'Kategorie'}
diff --git a/src/components/Form/CheckboxInput.tsx b/src/components/Form/CheckboxInput.tsx
new file mode 100644
index 0000000..0d77cbf
--- /dev/null
+++ b/src/components/Form/CheckboxInput.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { CheckCircleOutline as CheckIcon } from 'heroicons-react';
+
+interface Props {
+ label: string;
+ value: boolean;
+ name: string;
+ required?: boolean;
+}
+
+const CheckboxInput: React.FC<Props> = ({ name, label, value, ...inputProps }) => {
+ return (
+ <label className="flex mb-4 items-center">
+ <CheckIcon className={`${value ? 'text-indigo-500' : 'text-gray-400'} mr-2`} />
+ <input readOnly type="checkbox" name={name} value={name} className="hidden" checked={value} {...inputProps} />
+ {!!label && <span className="form-label">{label}</span>}
+ </label>
+ );
+};
+
+export default CheckboxInput;
--
GitLab