commonscomputer/cal.diy
5
0 Fork 0
Code Issues Pull Requests Actions 1.9k Packages Projects Releases Wiki Activity

Feat disable guests for events (#719)

Browse Source 
* Abstracts CheckboxField

* Allows disabling the guests field while booking

Co-authored-by: Bailey Pumfleet <pumfleet@hey.com>
This commit is contained in:
Omar LópezandBailey Pumfleet authored and GitHub committed 2021-09-22 12:04:32 +01:00
1 parent 1c2998fc13
commit e1f1386332
8 files changed
+104 -64
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

components/booking/pages/BookingPage.tsx
+39 -33
View File
@@ -329,42 +329,48 @@ const BookingPage = (props: any): JSX.Element => {
)}
</div>
))}
<div className="mb-4">
{!guestToggle && (
<label
onClick={toggleGuestEmailInput}
htmlFor="guests"
className="block text-sm font-medium dark:text-white text-blue-500 mb-1 hover:cursor-pointer">
+ Additional Guests
</label>
)}
{guestToggle && (
<div>
{!props.eventType.disableGuests && (
<div className="mb-4">
{!guestToggle && (
<label
onClick={toggleGuestEmailInput}
htmlFor="guests"
className="block text-sm font-medium dark:text-white text-gray-700 mb-1">
Guests
className="block text-sm font-medium dark:text-white text-blue-500 mb-1 hover:cursor-pointer">
+ Additional Guests
</label>
<ReactMultiEmail
placeholder="guest@example.com"
emails={guestEmails}
onChange={(_emails: string[]) => {
setGuestEmails(_emails);
}}
getLabel={(email: string, index: number, removeEmail: (index: number) => void) => {
return (
<div data-tag key={index}>
{email}
<span data-tag-handle onClick={() => removeEmail(index)}>
×
</span>
</div>
);
}}
/>
</div>
)}
</div>
)}
{guestToggle && (
<div>
<label
htmlFor="guests"
className="block text-sm font-medium dark:text-white text-gray-700 mb-1">
Guests
</label>
<ReactMultiEmail
placeholder="guest@example.com"
emails={guestEmails}
onChange={(_emails: string[]) => {
setGuestEmails(_emails);
}}
getLabel={(
email: string,
index: number,
removeEmail: (index: number) => void
) => {
return (
<div data-tag key={index}>
{email}
<span data-tag-handle onClick={() => removeEmail(index)}>
×
</span>
</div>
);
}}
/>
</div>
)}
</div>
)}
<div className="mb-4">
<label
htmlFor="notes"
components/ui/form/CheckboxField.tsx
+37
View File
@@ -0,0 +1,37 @@
import React, { forwardRef, InputHTMLAttributes } from "react";
type Props = InputHTMLAttributes<HTMLInputElement> & {
label: string;
description: string;
};
const CheckboxField = forwardRef<HTMLInputElement, Props>(({ label, description, ...rest }, ref) => {
return (
<div className="items-center block sm:flex">
<div className="mb-4 min-w-44 sm:mb-0">
<label htmlFor={rest.id} className="flex text-sm font-medium text-neutral-700">
{label}
</label>
</div>
<div className="w-full">
<div className="relative flex items-start">
<div className="flex items-center h-5">
<input
{...rest}
ref={ref}
type="checkbox"
className="w-4 h-4 border-gray-300 rounded focus:ring-primary-500 text-primary-600"
/>
</div>
<div className="ml-3 text-sm">
<p className="text-neutral-900">{description}</p>
</div>
</div>
</div>
</div>
);
});
CheckboxField.displayName = "CheckboxField";
export default CheckboxField;