export function PropertyField()

in packages/bonito-ui/src/components/property/property-field.tsx [31:137]
82 lines of code
3 McCabe index (conditional complexity)

export function PropertyField<T>(props: PropertyFieldProps<T>): JSX.Element {
    const getText = props.getText ?? defaultGetText;

    const defaultRenderValue: (value?: T) => React.ReactNode =
        React.useCallback(
            (val) => {
                const text = getText && getText(val);
                return text !== "" ? text : "-";
            },
            [getText]
        );
    const renderValue = props.renderValue ?? defaultRenderValue;

    const mouseOverHandler: (
        event: React.MouseEvent<HTMLElement, MouseEvent>
    ) => void = React.useCallback(
        (event) => {
            const btn = event.currentTarget.getElementsByClassName(
                "clipboard-button"
            )[0] as HTMLElement;
            if (getText(props.value) !== "") {
                // Only show clipboard icon if the value is defined and not
                // empty string
                btn.style.visibility = "visible";
            }
        },
        [getText, props.value]
    );

    const clipboardClickHandler = React.useCallback(() => {
        copyToClipboard(getText(props.value));
    }, [getText, props.value]);

    return (
        <>
            <Stack
                tokens={{ childrenGap: 8 }}
                horizontal
                style={{
                    display: "flex",
                    maxWidth: "1200px",
                    minWidth: "500px",
                }}
                onMouseOver={mouseOverHandler}
                onMouseOut={mouseOutHandler}
            >
                <div
                    data-testid="label"
                    className="property-label"
                    style={{
                        flexBasis: "180px",
                        flexShrink: 0,
                        height: "24px",
                        lineHeight: "24px",
                        ...props.labelStyle,
                    }}
                >
                    {props.renderLabel && props.renderLabel(props.label)}
                </div>
                <div
                    style={{
                        flexShrink: 0,
                        flexGrow: 1,
                        flexBasis: 0,
                    }}
                >
                    <div
                        style={{
                            display: "flex",
                            wordBreak: "break-word",
                            lineHeight: "24px",
                        }}
                    >
                        <div
                            style={{ flex: "1 0 0" }}
                            data-testid="content"
                            className="property-content"
                        >
                            {renderValue(props.value)}
                        </div>
                        <div
                            className="clipboard-button"
                            style={{
                                display: "inline-block",
                                height: "24px",
                                textAlign: "center",
                                verticalAlign: "middle",
                                visibility: "hidden",
                            }}
                        >
                            {props.hideCopyButton || (
                                <IconButton
                                    data-testid="clipboard-button"
                                    // Line height is 24px, icon height is 32px. Need
                                    // to move the icon up 4px to align center with text
                                    style={{ marginTop: "-4px" }}
                                    iconProps={{ iconName: "copy" }}
                                    onClick={clipboardClickHandler}
                                />
                            )}
                        </div>
                    </div>
                </div>
            </Stack>
        </>
    );
}