aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/molecules/forms/switch/switch.tsx
diff options
context:
space:
mode:
authorArmand Philippot <git@armandphilippot.com>2023-10-05 18:58:30 +0200
committerArmand Philippot <git@armandphilippot.com>2023-11-11 18:14:41 +0100
commitfb860884857da73ee5b5e897745301cdf1d770a2 (patch)
tree3aaf3c192b3375a7e1bf2dbf9daa866be357a2f5 /src/components/molecules/forms/switch/switch.tsx
parente97325a2c174a87c29593d1b42b9a1cc1eaf11af (diff)
refactor(components): make form components compliant with Eslint rules
Diffstat (limited to 'src/components/molecules/forms/switch/switch.tsx')
-rw-r--r--src/components/molecules/forms/switch/switch.tsx55
1 files changed, 37 insertions, 18 deletions
diff --git a/src/components/molecules/forms/switch/switch.tsx b/src/components/molecules/forms/switch/switch.tsx
index d340a0c..df2ba0c 100644
--- a/src/components/molecules/forms/switch/switch.tsx
+++ b/src/components/molecules/forms/switch/switch.tsx
@@ -1,14 +1,21 @@
-import type { FC, ChangeEventHandler, ReactNode, ReactElement } from 'react';
+import {
+ type FC,
+ type ChangeEventHandler,
+ type ReactNode,
+ type ReactElement,
+ forwardRef,
+ type ForwardRefRenderFunction,
+} from 'react';
import {
Fieldset,
type FieldsetProps,
- LabelProps,
- RadioProps,
+ type LabelProps,
+ type RadioProps,
Label,
Radio,
} from '../../../atoms';
+import type { TooltipProps } from '../../tooltip';
import styles from './switch.module.scss';
-import { TooltipProps } from '../../tooltip';
type SwitchItemProps = Omit<LabelProps, 'children' | 'htmlFor' | 'isRequired'> &
Pick<RadioProps, 'isDisabled' | 'name'> & {
@@ -94,24 +101,31 @@ export type SwitchProps = Omit<FieldsetProps, 'children'> & {
value: SwitchOption['value'];
};
-/**
- * Switch component.
- */
-export const Switch: FC<SwitchProps> = ({
- className = '',
- isDisabled = false,
- items,
- name,
- onSwitch,
- tooltip,
- value,
- ...props
-}) => {
+const SwitchWithRef: ForwardRefRenderFunction<
+ HTMLFieldSetElement,
+ SwitchProps
+> = (
+ {
+ className = '',
+ isDisabled = false,
+ items,
+ name,
+ onSwitch,
+ tooltip,
+ value,
+ ...props
+ },
+ ref
+) => {
+ const fieldsetClass = `${styles.fieldset} ${className}`;
+
return (
<Fieldset
{...props}
- className={`${styles.fieldset} ${className}`}
+ className={fieldsetClass}
isDisabled={isDisabled}
+ ref={ref}
+ // eslint-disable-next-line react/jsx-no-literals -- Role allowed
role="radiogroup"
>
{tooltip}
@@ -130,3 +144,8 @@ export const Switch: FC<SwitchProps> = ({
</Fieldset>
);
};
+
+/**
+ * Switch component.
+ */
+export const Switch = forwardRef(SwitchWithRef);