66c25bcdbd
Based on recent developers feedbacks that needed to use props types in order to wrap the lib's component they were stuck because we were not exporting all of them. Fixes #143
48 lines
1.2 KiB
TypeScript
48 lines
1.2 KiB
TypeScript
import React, { InputHTMLAttributes, forwardRef } from "react";
|
|
import classNames from "classnames";
|
|
import { Field, FieldProps } from ":/components/Forms/Field";
|
|
|
|
export type SwitchProps = InputHTMLAttributes<HTMLInputElement> &
|
|
FieldProps & {
|
|
label?: string;
|
|
labelSide?: "left" | "right";
|
|
};
|
|
|
|
export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
|
|
(
|
|
{
|
|
label,
|
|
text,
|
|
state,
|
|
fullWidth,
|
|
labelSide = "left",
|
|
...props
|
|
}: SwitchProps,
|
|
ref,
|
|
) => {
|
|
return (
|
|
<label
|
|
className={classNames(
|
|
"c__checkbox",
|
|
"c__switch",
|
|
"c__switch--" + labelSide,
|
|
{
|
|
"c__checkbox--disabled": props.disabled,
|
|
"c__switch--full-width": fullWidth,
|
|
},
|
|
)}
|
|
>
|
|
<Field text={text} compact={true} state={state} fullWidth={fullWidth}>
|
|
<div className="c__checkbox__container">
|
|
{label && <div className="c__checkbox__label">{label}</div>}
|
|
<div className="c__switch__rail__wrapper">
|
|
<input type="checkbox" {...props} ref={ref} />
|
|
<div className="c__switch__rail" />
|
|
</div>
|
|
</div>
|
|
</Field>
|
|
</label>
|
|
);
|
|
},
|
|
);
|