Comments
Bid comment form, popovers, auction comments list, and auction comments display.
Import from @workspace/bridge-react/bidding/comment/* or @workspace/bridge-react/bidding/table/bid-comments-list.
BidCommentForm
Controlled form for editing a bid comment. Can be placed inside a popover, modal, or inline.
import { BidCommentForm } from '@workspace/bridge-react/bidding/comment/bid-comment-form';
<BidCommentForm
bid="1NT"
value={comment}
onChange={setComment}
onSave={handleSave}
onCancel={handleCancel}
/>Props
Prop
Type
BidCommentPopover
Popover wrapper for plain text bid comment editing. Manages internal state and delegates to BidCommentForm.
import { BidCommentPopover } from '@workspace/bridge-react/bidding/comment/bid-comment-popover';
<BidCommentPopover
bid="1NT"
bidIndex={0}
currentComment={comment}
onSaveComment={(idx, text) => saveComment(idx, text)}
onRemoveComment={(idx) => removeComment(idx)}
open={open}
onOpenChange={setOpen}
>
<button>Edit Comment</button>
</BidCommentPopover>Props
Prop
Type
RichBidCommentPopover
Popover with a rich text editor (BridgeEditor) for bid comments with suit symbols and alert toggle.
import { RichBidCommentPopover } from '@workspace/bridge-react/bidding/comment/rich-bid-comment-popover';
<RichBidCommentPopover
bidDisplay={<BidDisplay bid="1NT" />}
currentComment={htmlComment}
onCommentChange={(html) => saveComment(bidIndex, html)}
open={open}
onOpenChange={setOpen}
isAlerted={isAlerted}
onAlertToggle={setIsAlerted}
>
<button>Edit Comment</button>
</RichBidCommentPopover>Props
Prop
Type
BidCommentsList
Standalone component to display a list of bid comments outside the bidding table.
import { BidCommentsList } from '@workspace/bridge-react/bidding/table/bid-comments-list';
<BidCommentsList comments={[
{ bid: '1NT', comment: 'Strong NT opening', index: 0 },
]} />Demo
Props
Prop
Type
AuctionComments
Import from @workspace/bridge-react/bidding/auction-comments-display.
Compound display component for auction comments with Display and Empty sub-components. The display shows bid-comment pairs with an orange left border. Follows the same compound pattern as PlayComments and FinalComment.
AuctionComments.Display
import { AuctionComments } from '@workspace/bridge-react/bidding/auction-comments-display';
<AuctionComments.Display comments={[
{ bid: '1NT', comment: '15-17 HCP, balanced' },
{ bid: '3NT', comment: 'Game force, no 4-card major' },
]} />Demo
Auction comments
Props
Prop
Type
AuctionComments.Empty
Placeholder shown when there are no auction comments.
<AuctionComments.Empty />
<AuctionComments.Empty labels={{ message: "Aucun commentaire" }} />Demo
No auction comments
Props
Prop
Type