46 lines
1.3 KiB
JavaScript
46 lines
1.3 KiB
JavaScript
import { Typography } from "antd";
|
|
|
|
export default function DataLabel({
|
|
label,
|
|
hideIfNull,
|
|
children,
|
|
open = true,
|
|
styles,
|
|
valueClassName,
|
|
onValueClick,
|
|
...props
|
|
}) {
|
|
if (!open || (hideIfNull && !children)) return null;
|
|
|
|
return (
|
|
<div {...props} style={{ display: "flex", alignItems: "flex-start" }}>
|
|
<div
|
|
style={{
|
|
marginRight: ".2rem",
|
|
flexShrink: 0, // <-- key: don't let the label collapse
|
|
whiteSpace: "nowrap" // <-- key: keep "Email:" on one line
|
|
}}
|
|
>
|
|
<Typography.Text type="secondary">{`${label}:`}</Typography.Text>
|
|
</div>
|
|
|
|
<div
|
|
style={{
|
|
flex: 1, // <-- key: take remaining space
|
|
minWidth: 0, // <-- key: allow this flex item to shrink
|
|
marginLeft: ".3rem",
|
|
fontWeight: "bolder",
|
|
overflowWrap: "anywhere", // <-- key: break long tokens (email/vin)
|
|
wordBreak: "break-word", // (backup behavior across browsers)
|
|
cursor: onValueClick !== undefined ? "pointer" : "",
|
|
...(styles?.value ?? {}) // apply your per-field overrides to ALL children types
|
|
}}
|
|
className={valueClassName}
|
|
onClick={onValueClick}
|
|
>
|
|
{typeof children === "string" ? <Typography.Text>{children}</Typography.Text> : children}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|