wp-optimize / vendor / team-updraft / lib-onboarding-wizard / Wizard / Onboarding / src / components / Fields / CheckboxCard.jsx

CheckboxCard.jsx in WP-Optimize – Cache, Compress images, Minify & Clean database to boost page speed & performance trunk, at vendor/team-updraft/lib-onboarding-wizard/Wizard/Onboarding/src/components/Fields/CheckboxCard.jsx

111 lines 4.8 KB

Raw Download Zip

1	import { useEffect, useState } from "react";
2	import * as RadixAccordion from "@radix-ui/react-accordion";
3	import FieldWrapper from "@/components/Fields/FieldWrapper";
4	import CheckboxInput from "@/components/Fields/CheckboxInput";
5	import SwitchInput from "@/components/Fields/SwitchInput";
6	import { __ } from "@wordpress/i18n";
7	import Icon from "@/utils/Icon";
8	import { renderPossiblyHtml } from "../../utils/html";
9
10	const CheckboxCard = ({
11	field,
12	onChange,
13	value,
14	}) => {
15	const [expanded, setExpanded] = useState(false);
16
17	const disabled = field.is_lock === true;
18
19	// Mirror legacy Checkbox behavior: when locked, force value to false.
20	useEffect(() => {
21	if (disabled && value !== false) {
22	onChange(false);
23	}
24	}, [disabled]);
25
26	const hasDetails = typeof field.details === "string" && field.details.trim() !== "";
27	const hasSummary = typeof field.summary === "string" && field.summary.trim() !== "";
28
29	const showDetailsLabel = field.show_details_label \|\| __("Show details", "ONBOARDING_WIZARD_TEXT_DOMAIN");
30	const hideDetailsLabel = field.hide_details_label \|\| __("Hide details", "ONBOARDING_WIZARD_TEXT_DOMAIN");
31
32	const Toggle = field.subtype === "switch" ? SwitchInput : CheckboxInput;
33
34	const textColor = disabled ? "text-[#9FA4A7]" : "text-gray-1000";
35
36	return (
37	<FieldWrapper
38	label={""}
39	inputId={field.id}
40	className="pb-2 !mt-1 border-b border-grey last:border-b-0"
41	>
42	<div className="flex items-start gap-2">
43	{field.icon && (
44	<div className="flex-shrink-0">
45	<Icon name={field.icon} size={24} />
46	</div>
47	)}
48
49	<div className="flex-1 min-w-0">
50	<label
51	htmlFor={field.id}
52	className={`font-semibold text-md block cursor-pointer ${textColor}`}
53	>
54	{field.label}
55	</label>
56
57	{hasSummary && (
58	<div className={`text-md font-normal ${textColor}`}>
59	{renderPossiblyHtml(field.summary)}
60	</div>
61	)}
62
63	{hasDetails && (
64	<RadixAccordion.Root
65	type="single"
66	value={expanded ? "details" : ""}
67	onValueChange={(v) => setExpanded(v === "details")}
68	collapsible
69	>
70	<RadixAccordion.Item value="details">
71	<RadixAccordion.Header className="flex">
72	<RadixAccordion.Trigger
73	className="mt-1 text-sm font-medium flex items-center gap-1 text-[var(--teamupdraft-grey-700)] hover:text-[var(--teamupdraft-grey-900)] focus:outline-none focus:ring-0 bg-transparent border-0 p-0 cursor-pointer"
74	>
75	<span>{expanded ? hideDetailsLabel : showDetailsLabel}</span>
76	<span
77	className={`inline-flex transition-transform duration-200 ${expanded ? "rotate-180" : ""}`}
78	aria-hidden="true"
79	>
80	<Icon name="expand" size={16} color="gray500" fill="gray500" />
81	</span>
82	</RadixAccordion.Trigger>
83	</RadixAccordion.Header>
84	<RadixAccordion.Content
85	className="overflow-hidden data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp"
86	>
87	<div className={`text-sm font-normal italic mt-1 ${textColor}`}>
88	{renderPossiblyHtml(field.details)}
89	</div>
90	</RadixAccordion.Content>
91	</RadixAccordion.Item>
92	</RadixAccordion.Root>
93	)}
94	</div>
95
96	<div className="flex-shrink-0">
97	<Toggle
98	label={field.label}
99	onChange={(checked) => !disabled && onChange(!!checked)}
100	value={disabled ? false : !!value}
101	id={field.id}
102	disabled={disabled}
103	/>
104	</div>
105	</div>
106	</FieldWrapper>
107	);
108	};
109
110	export default CheckboxCard;
111