a462bb5a61
The Field component was only able to display for large fields like text input, but for small component like Checkbox or Radio we need to set specific generic padding that are suitable to those.
43 lines
1006 B
TypeScript
43 lines
1006 B
TypeScript
import React, { PropsWithChildren } from "react";
|
|
import classNames from "classnames";
|
|
|
|
export type FieldState = "success" | "error" | "default";
|
|
|
|
export type FieldProps = {
|
|
state?: FieldState | undefined;
|
|
text?: string | undefined;
|
|
rightText?: string | undefined;
|
|
fullWidth?: boolean | undefined;
|
|
compact?: boolean | undefined;
|
|
className?: string | undefined;
|
|
};
|
|
|
|
type Props = FieldProps & PropsWithChildren;
|
|
|
|
export const Field = ({
|
|
children,
|
|
state = "default",
|
|
text,
|
|
rightText,
|
|
fullWidth,
|
|
compact,
|
|
className,
|
|
}: Props) => {
|
|
return (
|
|
<div
|
|
className={classNames("c__field", "c__field--" + state, className, {
|
|
"c__field--full-width": fullWidth,
|
|
"c__field--compact": compact,
|
|
})}
|
|
>
|
|
{children}
|
|
{(text || rightText) && (
|
|
<div className="c__field__footer">
|
|
<span className="c__field__text">{text}</span>
|
|
<span className="c__field__text__right">{rightText}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|