chore: enable multiple-type toggle-group in shadcn-ui examples

edmundhung · Aug 28, 2024 · fec2e60 · fec2e60
1 parent c7283a4
commit fec2e60
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 5 deletions.
diff --git a/examples/shadcn-ui/src/App.tsx b/examples/shadcn-ui/src/App.tsx
@@ -44,6 +44,7 @@ const UserSubscriptionSchema = z.object({
 	accountType: z.enum(['personal', 'business'], {
 		required_error: 'You must select an account type',
 	}),
+	accountTypes: z.array(z.enum(['personal', 'business'])),
 	interests: z
 		.array(z.string())
 		.min(3, 'You must select at least three interest'),
@@ -54,7 +55,11 @@ function App() {
 	const [form, fields] = useForm({
 		id: 'signup',
 		onValidate({ formData }) {
-			return parseWithZod(formData, { schema: UserSubscriptionSchema });
+			const result = parseWithZod(formData, { schema: UserSubscriptionSchema });
+			if (result.status==='error') {
+				console.error(result);
+			}
+			return result
 		},
 		onSubmit(e) {
 			e.preventDefault();
@@ -164,6 +169,21 @@ function App() {
 						<FieldError>{fields.accountType.errors}</FieldError>
 					)}
 				</Field>
+				<Field>
+					<Label htmlFor={fields.accountTypes.id}>Account types</Label>
+					<ToggleGroupConform
+						type="multiple"
+						meta={fields.accountTypes}
+						items={[
+							{ value: 'personal', label: 'Personal' },
+							{ value: 'business', label: 'Business' },
+							{ value: 'business2', label: 'Business2' },
+						]}
+					/>
+					{fields.accountTypes.errors && (
+						<FieldError>{fields.accountTypes.errors}</FieldError>
+					)}
+				</Field>
 				<Field>
 					<fieldset>Interests</fieldset>
 					<CheckboxGroupConform

diff --git a/examples/shadcn-ui/src/components/conform/ToggleGroup.tsx b/examples/shadcn-ui/src/components/conform/ToggleGroup.tsx
@@ -6,19 +6,20 @@ import { ComponentProps, ElementRef, useRef } from 'react';
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
 
 export const ToggleGroupConform = ({
+	type = 'single',
 	meta,
 	items,
 	...props
 }: {
 	items: Array<{ value: string; label: string }>;
-	meta: FieldMetadata<string>;
+	meta: FieldMetadata<string | string[]>;
 } & Omit<ComponentProps<typeof ToggleGroup>, 'defaultValue'>) => {
 	const toggleGroupRef = useRef<ElementRef<typeof ToggleGroup>>(null);
-	const control = useControl(meta);
+	const control = useControl<string | string[]>(meta);
 
 	return (
 		<>
-			<input
+			{type === 'single' ? <input
 				name={meta.name}
 				ref={control.register}
 				className="sr-only"
@@ -27,9 +28,22 @@ export const ToggleGroupConform = ({
 				onFocus={() => {
 					toggleGroupRef.current?.focus();
 				}}
-			/>
+			/> : control.value ? (control.value as string[]).map(v => <input
+				// use the same name as the field, html form will handle the rest
+				name={meta.name} 
+				className="sr-only"
+				tabIndex={-1}
+				value={v}
+				// we just care the value to be submitted
+				onChange={() => { }}
+				onFocus={() => {
+					toggleGroupRef.current?.focus();
+				}}
+			/>) : null}
+
 			<ToggleGroup
 				{...props}
+				type={type}
 				ref={toggleGroupRef}
 				value={control.value}
 				onValueChange={(value) => {