maronato/cal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixed typo in CheckboxField and wrapped description in <label> (#2924) 

* Fixed typo in CheckboxField and wrapped description in <label>

* Make functionality identical to before

* Fixed use of infomationIconText

* Fix lint error (needs refactor, out of scope)
This commit is contained in:
Alex van Andel 2022-05-30 15:51:18 +01:00 committed by GitHub
parent af5bc9d530
commit d1f117f17a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 42 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
apps/web/components/dialog/EditLocationDialog.tsx
View File

@ -73,6 +73,7 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
if (selection) {
locationFormMethods.setValue("locationType", selection?.value);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [selection]);
const locationFormSchema = z.object({
@ -136,7 +137,7 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
onChange={(e) =>
locationFormMethods.setValue("displayLocationPublicly", e.target.checked)
}
infomationIconText={t("display_location_info_badge")}></CheckboxField>
informationIconText={t("display_location_info_badge")}></CheckboxField>
)}
/>
</div>
@ -182,7 +183,7 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
: undefined
}
onChange={(e) => locationFormMethods.setValue("displayLocationPublicly", e.target.checked)}
infomationIconText={t("display_location_info_badge")}></CheckboxField>
informationIconText={t("display_location_info_badge")}></CheckboxField>
)}
/>
</div>

69
apps/web/components/ui/form/CheckboxField.tsx
View File

@ -1,51 +1,60 @@
import React, { forwardRef, InputHTMLAttributes } from "react";
import classNames from "@calcom/lib/classNames";
import InfoBadge from "@components/ui/InfoBadge";
type Props = InputHTMLAttributes<HTMLInputElement> & {
label?: React.ReactNode;
description: string;
descriptionAsLabel?: boolean;
infomationIconText?: string;
informationIconText?: string;
};
const CheckboxField = forwardRef<HTMLInputElement, Props>(
({ label, description, infomationIconText, descriptionAsLabel, ...rest }, ref) => {
({ label, description, informationIconText, ...rest }, ref) => {
const descriptionAsLabel = !label || rest.descriptionAsLabel;
return (
<div className="block items-center sm:flex">
{label && !descriptionAsLabel && (
{label && (
<div className="min-w-48 mb-4 sm:mb-0">
<label htmlFor={rest.id} className="flex text-sm font-medium text-neutral-700">
{label}
</label>
</div>
)}
{label && descriptionAsLabel && (
<div className="min-w-48 mb-4 sm:mb-0">
<span className="flex text-sm font-medium text-neutral-700">{label}</span>
{React.createElement(
descriptionAsLabel ? "div" : "label",
{
className: "flex text-sm font-medium text-neutral-700",
...(!descriptionAsLabel
? {
htmlFor: rest.id,
}
: {}),
},
label
)}
</div>
)}
<div className="w-full">
<div className="relative flex items-start">
<div className="flex h-5 items-center">
<input
{...rest}
disabled={rest.disabled}
ref={ref}
type="checkbox"
className="text-primary-600 focus:ring-primary-500 h-4 w-4 rounded border-gray-300"
/>
</div>
<div className="text-sm ltr:ml-3 rtl:mr-3">
{!label || descriptionAsLabel ? (
<label htmlFor={rest.id} className="text-neutral-700">
{description}
</label>
) : (
<p className="text-neutral-900">{description}</p>
)}
</div>
{infomationIconText && <InfoBadge content={infomationIconText}></InfoBadge>}
{React.createElement(
descriptionAsLabel ? "label" : "div",
{
className: classNames(
"relative flex items-start",
descriptionAsLabel ? "text-neutral-700" : "text-neutral-900"
),
},
<>
<div className="flex h-5 items-center">
<input
{...rest}
ref={ref}
type="checkbox"
className="text-primary-600 focus:ring-primary-500 h-4 w-4 rounded border-gray-300"
/>
</div>
<span className="text-sm ltr:ml-3 rtl:mr-3">{description}</span>
</>
)}
{informationIconText && <InfoBadge content={informationIconText}></InfoBadge>}
</div>
</div>
</div>