Skip to content

Instantly share code, notes, and snippets.

@sakgoyal
Last active March 8, 2024 18:33
Show Gist options
  • Save sakgoyal/701db76182e3f49a6bc709a1ead1461c to your computer and use it in GitHub Desktop.
Save sakgoyal/701db76182e3f49a6bc709a1ead1461c to your computer and use it in GitHub Desktop.
Some people write some TS code. I updated it to work with TS v5. its not perfect. but i only spent 5 minutes on it...
declare class ReactTrelloBoard<CardMetaData extends object = {}> extends React.Component<ReactTrello.BoardProps<CardMetaData>> {}
declare module ReactTrello {
interface NewCardTemplateProps<CardMetaData extends object = {}> {
laneId: string;
onAdd: (card: Card<CardMetaData>) => void;
onCancel: () => void;
}
interface BoardData<CardMetaData extends object = {}> {
lanes: Lane<CardMetaData>[];
}
type node = unknown & React.ReactNode;
type element = unknown & React.ReactElement<unknown>;
interface EventBus {
publish: (arg0 : any) => void;
}
export interface Card<CardMetaData extends object = {}> {
id ?: string;
title : string;
description : string;
label ?: string;
metadata ?: CardMetaData;
draggable ?: boolean;
tags ?: Tags[];
}
interface Tags {
title: string;
color: string;
bgcolor: string;
}
interface Lane<CardMetaData extends object = {}>{
id: string;
title?: string;
label?: string;
cards?: Card<CardMetaData>[];
disallowAddingCard?: boolean;
}
interface BoardProps<CardMetaData extends object = {}> {
/** Makes all cards and lanes draggable. @default false */
draggable?: boolean;
/** Set to false to disable lane dragging. @default true */
laneDraggable?: boolean;
/** Set to false to disable card dragging. @default true */
cardDraggable?: boolean;
/** Make the lanes with cards collapsible. @default false */
collapsibleLanes?: boolean;
/** Makes the entire board editable. Allow cards to be added or deleted @default false */
editable?: boolean;
/** Allows new lanes to be added to the board @default false */
canAddLanes?: boolean;
/** Disable showing the delete icon to the top right corner of the card (when board is editable) */
hideCardDeleteIcon?: boolean;
/** Allow inline lane title edit. Default: false */
editLaneTitle?: boolean;
/** Callback triggered when the board data changes. */
onDataChange?: (newData: object) => void;
/** Callback triggered when a card is clicked. */
onCardClick?: (cardId: string, metadata: CardMetaData, laneId: string) => void;
/** Callback triggered when a new card is added. */
onCardAdd?: (card: Card, laneId: string) => void;
/** Callback triggered before deleting a card. Call the callback() if confirming card deletion. */
onBeforeCardDelete?: (callback: () => void) => void;
/** Callback triggered when a card is deleted. */
onCardDelete?: (cardId: string, laneId: string) => void;
/** Callback triggered when a card is moved across lanes. */
onCardMoveAcrossLanes?: (fromLaneId: string, toLaneId: string, cardId: string, index: number) => void;
/** Callback triggered when a new lane is added. */
onLaneAdd?: (params: object) => void;
/** Callback triggered when a lane is deleted. */
onLaneDelete?: (laneId: string) => void;
/** Callback triggered when a lane's attributes are updated. */
onLaneUpdate?: (laneId: string, data: Lane) => void;
/** Callback triggered when a lane is clicked. */
onLaneClick?: (laneId: string) => void;
/** Callback triggered when a lane is scrolled to the end. */
onLaneScroll?: (requestedPage: number, laneId: string) => void;
/** Callback triggered when card drag is started. */
handleDragStart?: (cardId: string, laneId: string) => void;
/** Callback triggered when card drag ends. Return false to cancel drop. */
handleDragEnd?: (
cardId: string,
sourceLaneId: string,
targetLaneId: string,
position: number,
cardDetails: object
) => boolean | void;
/** Callback triggered when lane drag is started. */
handleLaneDragStart?: (laneId: string) => void;
/** Callback triggered when lane drag ends. */
handleLaneDragEnd?: (removedIndex: number, addedIndex: number, payload: object) => void;
/** Special function providing a publishHook to pass new events to the board. */
eventBusHandle?: (publishHook: Function) => void;
/** Used to specify the logic to sort cards on a lane. */
laneSortFunction?: (card1: object, card2: object) => number;
/** Language of compiled texts ("en", "ru", "pt-br"). Default is "en". */
lang?: string;
/** Translation function. Look into ./src/locales for keys list. */
t?: (key: string) => string;
/** CSS class to be applied to Card when being dragged */
cardDragClass?: string;
/** CSS class to be applied to Lane when being dragged */
laneDragClass?: string;
/** Pass custom element to replace the Add Card link at the end of the lane (when board is editable) */
components?: {
AddCardLink?: React.JSX.Element;
NewCardForm?: React.JSX.Element;
Card?: React.JSX.Element;
};
addCardLink?: React.JSX.Element;
/** Pass a custom new card template to add new cards to a lane (when board is editable) */
newCardTemplate?: node;
/** Pass a custom new lane template to add new lanes to a board (when board is editable) */
newLaneTemplate?: node;
/** Pass css style props to board container */
style?: React.CSSProperties;
/** Pass css style props to lane container */
laneStyle?: React.CSSProperties;
/** Pass css style props to card container */
cardStyle?: React.CSSProperties;
/** Boolean to indicate a custom card template will be specified. Add the card component as child to Board */
customCardLayout?: boolean;
/** Pass custom lane header as react component to modify appearance */
customLaneHeader?: element;
/** Actual board data in the form of json */
data: BoardData<CardMetaData>;
/** If cards have tags, use this prop to modify their style */
tagStyle?: object;
addLaneTitle?: string;
addCardTitle?: string;
}
}
declare module "react-trello" {
export default ReactTrelloBoard;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment