public-offering
/
cal.pub0.org
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Show fields but mark them disabled

pull/6560/head
Hariom Balhara 2023-02-16 11:14:00 +05:30
parent f26141a59a
commit b8f9d39fc4
3 changed files with 66 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/web/public/static/locales/en/common.json
View File

@ -1604,5 +1604,7 @@
"booking_with_payment_cancelled_refunded": "This booking payment has been refunded.",
"booking_confirmation_failed": "Booking confirmation failed",
"form_builder_field_already_exists": "A field with this name already exists",
"form_builder_field_add_subtitle": "Customize the questions asked on the booking page"
"form_builder_field_add_subtitle": "Customize the questions asked on the booking page",
"form_builder_system_field_cant_delete": "This system field can't be removed.",
"form_builder_system_field_cant_toggle": "This system field can't be toggled."
}

41
packages/features/form-builder/FormBuilder.tsx
View File

@ -22,6 +22,7 @@ import {
InputField,
Input,
showToast,
Tooltip,
} from "@calcom/ui";
import { Switch } from "@calcom/ui";
import { FiArrowDown, FiArrowUp, FiX, FiPlus, FiTrash2, FiInfo } from "@calcom/ui/components/icon";
@ -323,14 +324,14 @@ export const FormBuilder = function FormBuilder({
</div>
{field.editable !== "user-readonly" && (
<div className="flex items-center space-x-2">
{field.editable !== "system" && (
<Switch
checked={!field.hidden}
onCheckedChange={(checked) => {
update(index, { ...field, hidden: !checked });
}}
/>
)}
<Switch
disabled={field.editable === "system"}
tooltip={field.editable === "system" ? t("form_builder_system_field_cant_toggle") : ""}
checked={!field.hidden}
onCheckedChange={(checked) => {
update(index, { ...field, hidden: !checked });
}}
/>
<Button
color="secondary"
onClick={() => {
@ -338,16 +339,20 @@ export const FormBuilder = function FormBuilder({
}}>
Edit
</Button>
{field.editable !== "system" && field.editable !== "system-but-optional" && (
<Button
color="minimal"
variant="icon"
onClick={() => {
removeField(index);
}}
StartIcon={FiTrash2}
/>
)}
<Button
color="minimal"
tooltip={
field.editable === "system" || field.editable === "system-but-optional"
? t("form_builder_system_field_cant_delete")
: ""
}
disabled={field.editable === "system" || field.editable === "system-but-optional"}
variant="icon"
onClick={() => {
removeField(index);
}}
StartIcon={FiTrash2}
/>
</div>
)}
</li>

69
packages/ui/components/form/switch/Switch.tsx
View File

@ -5,6 +5,14 @@ import React from "react";
import classNames from "@calcom/lib/classNames";
import { Tooltip } from "../../tooltip";
const Wrapper = ({ children, tooltip }: { tooltip?: string; children: React.ReactNode }) => {
if (!tooltip) {
return <>{children}</>;
}
return <Tooltip content={tooltip}>{children}</Tooltip>;
};
const Switch = (
props: React.ComponentProps<typeof PrimitiveSwitch.Root> & {
label?: string;
@ -12,43 +20,46 @@ const Switch = (
className?: string;
};
fitToHeight?: boolean;
tooltip?: string;
}
) => {
const { label, fitToHeight, ...primitiveProps } = props;
const id = useId();
return (
<div className={classNames("flex h-auto w-auto flex-row items-center", fitToHeight && "h-fit")}>
<PrimitiveSwitch.Root
className={classNames(
props.checked ? "bg-gray-900" : "bg-gray-200",
primitiveProps.disabled ? "cursor-not-allowed" : "hover:bg-gray-300",
"focus:ring-brand-800 h-5 w-[34px] rounded-full shadow-none",
props.className
)}
{...primitiveProps}>
<PrimitiveSwitch.Thumb
id={id}
// Since we dont support global dark mode - we have to style dark mode components specifically on the instance for now
// TODO: Remove once we support global dark mode
<Wrapper tooltip={props.tooltip}>
<div className={classNames("flex h-auto w-auto flex-row items-center", fitToHeight && "h-fit")}>
<PrimitiveSwitch.Root
className={classNames(
"block h-[14px] w-[14px] rounded-full bg-white transition will-change-transform ltr:translate-x-[4px] rtl:-translate-x-[4px] ltr:[&[data-state='checked']]:translate-x-[17px] rtl:[&[data-state='checked']]:-translate-x-[17px]",
props.checked && "shadow-inner",
props.thumbProps?.className
props.checked ? "bg-gray-900" : "bg-gray-200",
primitiveProps.disabled ? "cursor-not-allowed" : "hover:bg-gray-300",
"focus:ring-brand-800 h-5 w-[34px] rounded-full shadow-none",
props.className
)}
/>
</PrimitiveSwitch.Root>
{label && (
<Label.Root
htmlFor={id}
className={classNames(
"align-text-top text-sm font-medium text-gray-900 ltr:ml-3 rtl:mr-3 dark:text-white",
primitiveProps.disabled ? "cursor-not-allowed opacity-25" : "cursor-pointer "
)}>
{label}
</Label.Root>
)}
</div>
{...primitiveProps}>
<PrimitiveSwitch.Thumb
id={id}
// Since we dont support global dark mode - we have to style dark mode components specifically on the instance for now
// TODO: Remove once we support global dark mode
className={classNames(
"block h-[14px] w-[14px] rounded-full bg-white transition will-change-transform ltr:translate-x-[4px] rtl:-translate-x-[4px] ltr:[&[data-state='checked']]:translate-x-[17px] rtl:[&[data-state='checked']]:-translate-x-[17px]",
props.checked && "shadow-inner",
props.thumbProps?.className
)}
/>
</PrimitiveSwitch.Root>
{label && (
<Label.Root
htmlFor={id}
className={classNames(
"align-text-top text-sm font-medium text-gray-900 ltr:ml-3 rtl:mr-3 dark:text-white",
primitiveProps.disabled ? "cursor-not-allowed opacity-25" : "cursor-pointer "
)}>
{label}
</Label.Root>
)}
</div>
</Wrapper>
);
};