Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 | 5x 5x 5x 5x 81x 1x 78x 1x 1x 5x 81x 81x 5x 81x 81x 81x 81x 81x 81x 81x 81x 81x 81x 81x 5x | import React from "react";
import {
FormControlLabelProps,
FormControlLabelStyleProps,
} from "./FormControlLabel.types";
import Text from "../Text/Text";
import styled from "styled-components";
const getFlexDirection = (
labelPlacement?: "start" | "end" | "top" | "bottom"
) => {
switch (labelPlacement) {
case "start":
return "row-reverse";
case "end":
return "row";
case "top":
return "column-reverse";
case "bottom":
return "column";
}
};
const StyledFormControl = styled.label<FormControlLabelStyleProps>`
display: inline-flex;
width: fit-content;
align-items: center;
justify-content: center;
vertical-align: middle;
gap: ${(props) => props.$gap}px;
cursor: pointer;
user-select: none;
flex-direction: ${(props) => getFlexDirection(props.$labelPlacement)};
`;
const FormControlLabel: React.FC<FormControlLabelProps> = ({
control,
label,
labelPlacement = "end",
size = "medium",
gap = 4,
disabled = false,
color,
"data-testid": dataTestId,
...props
}) => {
const _disabled = control.props.disabled || disabled;
return (
<StyledFormControl
$gap={gap}
$labelPlacement={labelPlacement}
$disabled={_disabled}
$size={size}
data-testid={dataTestId}
>
{React.cloneElement(control, {
...(!control.props.size && size && { size }),
...(!control.props.size && color && { color }),
...props,
})}
<span>
{typeof label === "string" ? (
<Text color={color} variant="paragraph" size={size}>
{label}
</Text>
) : (
label
)}
</span>
</StyledFormControl>
);
};
export default FormControlLabel;
|