chore: merge uncontrollable widgets

Talend · Oct 11, 2023 · ab20bb9 · ab20bb9
1 parent 67cd4b8
commit ab20bb9
Show file tree

Hide file tree

Showing 9 changed files with 40 additions and 100 deletions.
diff --git a/packages/design-system/src/components/Form/ToggleSwitch/Primitive/ToggleSwitchPrimitive.tsx b/packages/design-system/src/components/Form/ToggleSwitch/Primitive/ToggleSwitchPrimitive.tsx
@@ -5,6 +5,7 @@ import classnames from 'classnames';
 
 import { useId } from '../../../../useId';
 import { CheckboxPrimitiveType } from '../../Checkbox/Primitive/CheckboxPrimitive';
+import { useControl } from '../../../../useControl';
 
 import styles from './ToggleSwitchPrimitive.module.scss';
 
@@ -13,8 +14,8 @@ export type ToggleSwitchPrimitiveType = Omit<CheckboxPrimitiveType, 'onChange'>
 };
 
 const ToggleSwitchPrimitive = forwardRef(
-	(
-		{
+	(props: Omit<ToggleSwitchPrimitiveType, 'indeterminate'>, ref: Ref<HTMLInputElement>) => {
+		const {
 			id,
 			label,
 			defaultChecked,
@@ -26,10 +27,15 @@ const ToggleSwitchPrimitive = forwardRef(
 			isInline,
 			onChange,
 			...rest
-		}: Omit<ToggleSwitchPrimitiveType, 'indeterminate'>,
-		ref: Ref<HTMLInputElement>,
-	) => {
+		} = props;
 		const switchId = useId(id, 'switch-');
+		const controlled = useControl<boolean>(props, {
+			onChangeKey: 'onChange',
+			valueKey: 'checked',
+			defaultValueKey: 'defaultChecked',
+			selector: e => e.target.checked,
+			defaultValue: false,
+		});
 
 		return (
 			<span
@@ -48,11 +54,8 @@ const ToggleSwitchPrimitive = forwardRef(
 						readOnly={readOnly}
 						required={required}
 						aria-checked={checked}
-						checked={checked}
-						onChange={() =>
-							// If readonly, we return current check status ; Else we return opposite status as new status
-							onChange?.(Boolean(readOnly ? checked : !checked))
-						}
+						checked={controlled.value}
+						onChange={e => controlled.onChange(e)}
 						{...rest}
 						ref={ref}
 					/>

diff --git a/packages/design-system/src/components/Form/ToggleSwitch/ToggleSwitch.tsx b/packages/design-system/src/components/Form/ToggleSwitch/ToggleSwitch.tsx
@@ -1,19 +1,13 @@
 import { forwardRef, Ref } from 'react';
 
-import { Mandatory } from '../../../types';
 import ToggleSwitchPrimitive, {
 	ToggleSwitchPrimitiveType,
 } from './Primitive/ToggleSwitchPrimitive';
 
-export type ToggleSwitchProps = Mandatory<
-	Omit<ToggleSwitchPrimitiveType, 'className' | 'style'>,
-	'onChange'
->;
+export type ToggleSwitchProps = Omit<ToggleSwitchPrimitiveType, 'className' | 'style'>;
 
-const ToggleSwitch = forwardRef((props: ToggleSwitchProps, ref: Ref<HTMLInputElement>) => {
+export const ToggleSwitch = forwardRef((props: ToggleSwitchProps, ref: Ref<HTMLInputElement>) => {
 	return <ToggleSwitchPrimitive {...props} ref={ref} />;
 });
 
 ToggleSwitch.displayName = 'ToggleSwitch';
-
-export default ToggleSwitch;
diff --git a/packages/design-system/src/components/Form/ToggleSwitch/UncontrolledToggleSwitch.tsx b/packages/design-system/src/components/Form/ToggleSwitch/UncontrolledToggleSwitch.tsx
diff --git a/packages/design-system/src/components/Form/ToggleSwitch/index.ts b/packages/design-system/src/components/Form/ToggleSwitch/index.ts
@@ -1,4 +1 @@
-import ToggleSwitch from './ToggleSwitch';
-import UncontrolledToggleSwitch from './UncontrolledToggleSwitch';
-
-export { ToggleSwitch, UncontrolledToggleSwitch };
+export { ToggleSwitch } from './ToggleSwitch';
diff --git a/packages/design-system/src/components/Form/index.ts b/packages/design-system/src/components/Form/index.ts
@@ -1,4 +1,4 @@
-import { ToggleSwitch, UncontrolledToggleSwitch } from './ToggleSwitch';
+import { ToggleSwitch } from './ToggleSwitch';
 import Buttons from './Buttons';
 import Datalist from './Field/Datalist';
 import Input from './Field/Input';

diff --git a/packages/design-system/src/components/Switch/Switch.tsx b/packages/design-system/src/components/Switch/Switch.tsx
@@ -1,4 +1,4 @@
-import { useLayoutEffect, useRef, useState, useEffect } from 'react';
+import { MouseEvent, useLayoutEffect, useRef, useState, useEffect } from 'react';
 import type { PropsWithChildren, HTMLAttributes } from 'react';
 
 import classnames from 'classnames';
@@ -18,7 +18,7 @@ export type SwitchProps = PropsWithChildren<Omit<HTMLAttributes<HTMLDivElement>,
 	disabled?: boolean;
 	readOnly?: boolean;
 	// Redefine onChange prop
-	onChange?: (selectedValue: string) => void;
+	onChange?: (event: MouseEvent<HTMLButtonElement>, selectedValue: string) => void;
 };
 
 const Switch = ({
@@ -90,9 +90,9 @@ const Switch = ({
 							tabIndex={-1}
 							role="radio"
 							aria-checked={isChecked}
-							onClick={() => {
+							onClick={(e: MouseEvent<HTMLButtonElement>) => {
 								setRadio(v);
-								onChange?.(v);
+								onChange?.(e, v);
 							}}
 							value={v}
 							key={i}

diff --git a/packages/design-system/src/stories/form/Fieldset/Fieldset.stories.tsx b/packages/design-system/src/stories/form/Fieldset/Fieldset.stories.tsx
@@ -7,7 +7,6 @@ import {
 	Form,
 	InlineMessageDestructive,
 	InlineMessageInformation,
-	UncontrolledToggleSwitch,
 } from '../../../';
 
 export default {
@@ -178,11 +177,7 @@ export const ConditionalFieldset = () => {
 						ref={register({ required: 'This field is required' })}
 					/>
 				</Form.Row>
-				<UncontrolledToggleSwitch
-					label="Send invite to admin user"
-					name="withUser"
-					ref={register()}
-				/>
+				<Form.ToggleSwitch label="Send invite to admin user" name="withUser" ref={register()} />
 			</Form.Fieldset>
 			{withUser && (
 				<Form.Fieldset legend="Invite admin for this account">

diff --git a/packages/design-system/src/stories/form/Form.stories.tsx b/packages/design-system/src/stories/form/Form.stories.tsx
@@ -108,15 +108,15 @@ export const Default = () => {
 					<option>Foo</option>
 					<option>Bar</option>
 				</Form.Select>
-				<UncontrolledCheckbox
+				<Form.ToggleSwitch
 					defaultChecked
 					required
 					id="test-checkbox"
 					name="test-checkbox"
 					label="Checkbox"
 				/>
 				<Form.Radio label="Radio" name="radio" checked />
-				<UncontrolledToggleSwitch label="Switch" defaultChecked name="Switch" />
+				<Form.ToggleSwitch label="Switch" defaultChecked name="Switch" />
 				<Form.Buttons>
 					<ButtonSecondary type="reset" onClick={action('cancel')}>
 						Reset

diff --git a/packages/design-system/src/stories/form/ToggleSwitch/ToggleSwitch.stories.tsx b/packages/design-system/src/stories/form/ToggleSwitch/ToggleSwitch.stories.tsx
@@ -5,7 +5,6 @@ import {
 	InlineMessageInformation,
 	StackVertical,
 	ToggleSwitch,
-	UncontrolledToggleSwitch,
 } from '../../../../';
 import { useForm } from 'react-hook-form';
 
@@ -16,45 +15,30 @@ export default {
 
 export const ToggleSwitchStates = () => (
 	<StackVertical gap="M" justify="stretch" align="stretch">
-		<UncontrolledToggleSwitch placeholder="Placeholder" name="time" label="ToggleSwitch" />
-		<UncontrolledToggleSwitch
+		<Form.ToggleSwitch placeholder="Placeholder" name="time" label="ToggleSwitch" />
+		<Form.ToggleSwitch
 			placeholder="Placeholder"
 			name="time"
 			label="ToggleSwitch disabled"
 			disabled
 		/>
-		<UncontrolledToggleSwitch
+		<Form.ToggleSwitch
 			placeholder="Placeholder"
 			name="time"
 			label="ToggleSwitch read-only"
 			readOnly
 		/>
-		<UncontrolledToggleSwitch name="time" label="ToggleSwitch checked" defaultChecked />
-		<UncontrolledToggleSwitch
-			name="time"
-			label="ToggleSwitch checked disabled"
-			defaultChecked
-			disabled
-		/>
-		<UncontrolledToggleSwitch
-			name="time"
-			label="ToggleSwitch checked read-only"
-			defaultChecked
-			readOnly
-		/>
+		<Form.ToggleSwitch name="time" label="ToggleSwitch checked" defaultChecked />
+		<Form.ToggleSwitch name="time" label="ToggleSwitch checked disabled" defaultChecked disabled />
+		<Form.ToggleSwitch name="time" label="ToggleSwitch checked read-only" defaultChecked readOnly />
 	</StackVertical>
 );
 
 export const ToggleSwitchInline = () => (
 	<>
-		<UncontrolledToggleSwitch
-			placeholder="Placeholder"
-			name="time"
-			label="ToggleSwitch inline"
-			isInline
-		/>
+		<Form.ToggleSwitch placeholder="Placeholder" name="time" label="ToggleSwitch inline" isInline />
 		<span> </span>
-		<UncontrolledToggleSwitch
+		<Form.ToggleSwitch
 			placeholder="Placeholder"
 			name="time"
 			label="ToggleSwitch inline"
@@ -66,7 +50,7 @@ export const ToggleSwitchInline = () => (
 
 export const ToggleSwitchWithLongLabel = () => (
 	<div style={{ width: '200px' }}>
-		<UncontrolledToggleSwitch
+		<Form.ToggleSwitch
 			placeholder="Placeholder"
 			name="time"
 			label="Label with a lot of content, too much probably, and most certainly enough to generate a line break in this small box."
@@ -89,7 +73,7 @@ export const ToggleSwitchControlled = () => {
 	return (
 		<Form>
 			<Form.Fieldset legend="Control switch state" required>
-				<UncontrolledToggleSwitch label="Toggle all" name="option-a" ref={register()} />
+				<Form.ToggleSwitch label="Toggle all" name="option-a" ref={register()} />
 				<ToggleSwitch
 					label="Controlled switch"
 					name="option-b"
@@ -120,26 +104,16 @@ export const ToggleSwitchReactHooksForm = () => {
 				/>
 			)}
 			<Form.Fieldset legend="Enabled">
-				<UncontrolledToggleSwitch label="Option a" name="option-a" ref={register()} />
-				<UncontrolledToggleSwitch
-					label="Option b"
-					defaultChecked
-					name="option-b"
-					ref={register()}
-				/>
+				<Form.ToggleSwitch label="Option a" name="option-a" ref={register()} />
+				<Form.ToggleSwitch label="Option b" defaultChecked name="option-b" ref={register()} />
 			</Form.Fieldset>
 			<Form.Fieldset legend="Read only" readOnly>
-				<UncontrolledToggleSwitch label="Option c" name="option-c" ref={register()} />
-				<UncontrolledToggleSwitch
-					label="Option d"
-					defaultChecked
-					name="option-d"
-					ref={register()}
-				/>
+				<Form.ToggleSwitch label="Option c" name="option-c" ref={register()} />
+				<Form.ToggleSwitch label="Option d" defaultChecked name="option-d" ref={register()} />
 			</Form.Fieldset>
 			<Form.Fieldset legend="Disabled" disabled>
-				<UncontrolledToggleSwitch label="Option e" disabled name="option-e" ref={register()} />
-				<UncontrolledToggleSwitch
+				<Form.ToggleSwitch label="Option e" disabled name="option-e" ref={register()} />
+				<Form.ToggleSwitch
 					label="Option f"
 					defaultChecked
 					disabled