feat: Introduce size: invisible for demo site

reference: #8
marsidev · Jan 16, 2023 · e243495 · e243495
1 parent 2e932b4
commit e243495
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 19 deletions.
diff --git a/packages/example/src/components/ConfigForm.tsx b/packages/example/src/components/ConfigForm.tsx
@@ -1,4 +1,4 @@
-import { forwardRef } from 'react'
+import { forwardRef, useState } from 'react'
 import Options from './Options'
 
 interface FormProps {
@@ -7,41 +7,76 @@ interface FormProps {
 	onChangeSize: (value: string) => void
 }
 
+const ThemeOptions = [
+	{ label: 'Auto', value: 'auto' },
+	{ label: 'Light', value: 'light' },
+	{ label: 'Dark', value: 'dark' }
+] as const
+
+const SizeOptions = [
+	{ label: 'Normal', value: 'normal' },
+	{ label: 'Compact', value: 'compact' },
+	{ label: 'Invisible', value: 'invisible' }
+] as const
+
+const SiteKeyOptions = [
+	{ label: 'Always pass', value: 'pass' },
+	{ label: 'Always fail', value: 'fail' },
+	{ label: 'Force interactive challenge', value: 'interactive' }
+] as const
+
+type SizeType = typeof SizeOptions[number]['value']
+type SiteKeyType = typeof SiteKeyOptions[number]['value']
+
 const ConfigForm = forwardRef<HTMLFormElement, FormProps>((props, ref) => {
+	const [sizeType, setSizeType] = useState<SizeType>('normal')
+	const [siteKeyType, setSiteKeyType] = useState<SiteKeyType>('pass')
+	const isInvisibleType = (sizeType === 'invisible')
+
+	function onChangeSiteKeyTypeProxy(val: string) {
+		setSiteKeyType(val as SiteKeyType)
+		props.onChangeSiteKeyType(val)
+	}
+
+	function onChangeSizeProxy(val: string) {
+		if (val === 'invisible' && siteKeyType === 'interactive') {
+			// Change the siteKey type to `pass` when this is the invisible key type.
+			onChangeSiteKeyTypeProxy('pass')
+		}
+		setSizeType(val as SizeType)
+		props.onChangeSize(val)
+	}
+
 	return (
 		<form ref={ref} className='text-left accent-[#f4a15d]'>
 			<div className='flex gap-16'>
 				<Options
 					name='theme'
-					options={[
-						{ label: 'Auto', value: 'auto' },
-						{ label: 'Light', value: 'light' },
-						{ label: 'Dark', value: 'dark' }
-					]}
+					options={[...ThemeOptions]}
 					title='Theme'
 					onChange={props.onChangeTheme}
 				/>
 
 				<Options
 					name='size'
-					options={[
-						{ label: 'Normal', value: 'normal' },
-						{ label: 'Compact', value: 'compact' }
-					]}
+					options={[...SizeOptions]}
 					title='Size'
-					onChange={props.onChangeSize}
+					onChange={onChangeSizeProxy}
 				/>
 
 				<Options
 					helperUrl='https://developers.cloudflare.com/turnstile/frequently-asked-questions/#are-there-sitekeys-and-secret-keys-that-can-be-used-for-testing'
 					name='siteKey'
-					options={[
-						{ label: 'Always pass', value: 'pass' },
-						{ label: 'Always fail', value: 'fail' },
-						{ label: 'Force interactive challenge', value: 'interactive' }
-					]}
+					options={SiteKeyOptions.map(option => ({
+						...option,
+						// Option will be disabled on Invisibile widget type, and requesting
+						// the widget to be interactive.
+						disabled: (option.value === 'interactive' && isInvisibleType)
+					})
+					)}
 					title='Demo Site Key Type'
-					onChange={props.onChangeSiteKeyType}
+					value={siteKeyType}
+					onChange={onChangeSiteKeyTypeProxy}
 				/>
 			</div>
 		</form>

diff --git a/packages/example/src/components/Options.tsx b/packages/example/src/components/Options.tsx
@@ -1,6 +1,7 @@
 interface Option {
 	label: string
 	value: string
+	disabled?: boolean
 }
 
 interface OptionsProps {
@@ -9,9 +10,17 @@ interface OptionsProps {
 	options: Option[]
 	helperUrl?: string
 	onChange?: (value: string) => void
+	value?: this['options'][number]['value']
 }
 
 const Options: React.FC<OptionsProps> = props => {
+	let defaultValue: string | undefined
+
+	// Sets the defaultValue only if the value is not defined.
+	if (!props.value) {
+		defaultValue = props.options[0].value
+	}
+
 	return (
 		<label className='flex flex-col max-w-fit min-w-[80px]'>
 			<span className='font-medium'>
@@ -32,8 +41,9 @@ const Options: React.FC<OptionsProps> = props => {
 
 			<select
 				className='rounded-md px-2 py-2'
-				defaultValue={props.options[0].value}
+				defaultValue={defaultValue}
 				name={props.name}
+				value={props.value}
 				onChange={e => {
 					e.preventDefault()
 					if (!props.onChange) return
@@ -42,7 +52,7 @@ const Options: React.FC<OptionsProps> = props => {
 			>
 				{props.options.map(option => {
 					return (
-						<option key={option.value} value={option.value}>
+						<option key={option.value} disabled={(option.disabled === true)} value={option.value}>
 							{option.label}
 						</option>
 					)