67 lines
1.6 KiB
TypeScript
67 lines
1.6 KiB
TypeScript
import React, { ReactElement, ReactNode } from "react";
|
|
|
|
import clsx from "clsx";
|
|
import { InputLabel, styled } from "@mui/material";
|
|
import NotchedOutline from "@mui/material/OutlinedInput/NotchedOutline";
|
|
|
|
const DivRoot = styled("div")(({ theme }) => ({
|
|
position: "relative",
|
|
marginTop: "8px",
|
|
}));
|
|
|
|
const DivContentWrapper = styled("div")(({ theme }) => ({
|
|
position: "relative",
|
|
}));
|
|
|
|
const DivContent = styled("div")(({ theme }) => ({
|
|
paddingTop: "1px",
|
|
paddingLeft: theme.spacing(1),
|
|
paddingRight: theme.spacing(1),
|
|
}));
|
|
|
|
const StyledInputLabel = styled(InputLabel)(({ theme }) => ({
|
|
position: "absolute",
|
|
left: 0,
|
|
top: 0,
|
|
}));
|
|
|
|
const StyledNotchedOutline = styled(NotchedOutline)(({ theme }) => [
|
|
{
|
|
borderRadius: theme.shape.borderRadius,
|
|
borderColor: theme.palette.grey["400"]
|
|
},
|
|
theme.applyStyles('dark', {
|
|
borderRadius: theme.shape.borderRadius,
|
|
borderColor: theme.palette.grey["800"]
|
|
})
|
|
]);
|
|
|
|
interface Props {
|
|
id: string;
|
|
label: string;
|
|
children: ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
export default function LabelledOutlined({ id, label, children, className }: Props): ReactElement {
|
|
const labelRef = React.useRef(null);
|
|
return (
|
|
<DivRoot className={clsx(className)}>
|
|
<StyledInputLabel
|
|
ref={labelRef}
|
|
htmlFor={id}
|
|
variant="outlined"
|
|
shrink
|
|
>
|
|
{label}
|
|
</StyledInputLabel>
|
|
<DivContentWrapper>
|
|
<DivContent id={id}>
|
|
{children}
|
|
<StyledNotchedOutline notched label={label + "*"} />
|
|
</DivContent>
|
|
</DivContentWrapper>
|
|
</DivRoot>
|
|
);
|
|
}
|