From e8f89cc26d8e897229bfe350ad956dfe1d5984b5 Mon Sep 17 00:00:00 2001 From: Cosmin Radu Date: Fri, 1 Nov 2024 17:14:00 +0200 Subject: [PATCH 1/4] #34215 - API changes --- src/components/ContextMenu/ContextMenu.tsx | 42 +++++++++------------- src/timeline.js | 13 +++---- 2 files changed, 20 insertions(+), 35 deletions(-) diff --git a/src/components/ContextMenu/ContextMenu.tsx b/src/components/ContextMenu/ContextMenu.tsx index 81c969f..41df568 100644 --- a/src/components/ContextMenu/ContextMenu.tsx +++ b/src/components/ContextMenu/ContextMenu.tsx @@ -10,16 +10,16 @@ type Position = StrictPopupProps["position"]; type IParamsForAction = { selection: any[]; position?: Position; + /** + * if undefined => the menu is closed else {x, y} position where the menu should open + */ + positionToOpen?: Point; [key: string]: any; } interface ContextMenuProps { actions: IAction[]; - paramsForAction: IParamsForAction; - /** - * if undefined => the menu is closed else {x, y} position where the menu should open - */ - positionToOpen?: Point; + actionParam: IParamsForAction; /** * Callback for extra actions when the menu is closed */ @@ -32,30 +32,20 @@ const testids = createTestids('ContextMenu', { }); export const contextMenuTestIds = testids; -export class ContextMenu extends React.Component { +export class ContextMenu extends React.Component { - constructor(props) { + constructor(props: ContextMenuProps) { super(props); this.close = this.close.bind(this); - this.state = { - isOpened: props.positionToOpen - } - } - - componentDidUpdate(prevProps: Readonly, prevState: Readonly<{}>, snapshot?: any): void { - if (this.props.positionToOpen != prevProps.positionToOpen) { - this.setState({ isOpened: this.props.positionToOpen ? true : false }); - } } close() { - this.setState({ isOpened: false }); this.props.onClose && this.props.onClose(); } getPopupContext(): HTMLElement { - const x = this.props.positionToOpen?.x; - const y = this.props.positionToOpen?.y; + const x = this.props.actionParam.positionToOpen?.x; + const y = this.props.actionParam.positionToOpen?.y; return { getBoundingClientRect: () => ({ left: x, @@ -69,7 +59,7 @@ export class ContextMenu extends React.Component action.isVisible ? action.isVisible(this.props.paramsForAction) : true); + return actions.filter(action => action.isVisible ? action.isVisible(this.props.actionParam) : true); } render() { @@ -77,10 +67,10 @@ export class ContextMenu extends React.Component { this.close(); - }} open={(this.state.isOpened && visibleActions.length > 0)}> + }} open={(this.props.actionParam.positionToOpen && visibleActions.length > 0)}> {visibleActions.map((action: IAction) => { const key = visibleActions.indexOf(action); @@ -89,17 +79,17 @@ export class ContextMenu extends React.Component { - let params: IActionParamForRun = { ...this.props.paramsForAction, closeContextMenu: this.close, eventPoint: { x: event.clientX, y: event.clientY } } + let params: IActionParamForRun = { ...this.props.actionParam, closeContextMenu: this.close, eventPoint: { x: event.clientX, y: event.clientY } } action.run && action.run(params); if (!params.dontCloseContextMenuAfterRunAutomatically) { this.close(); } }}> - : React.cloneElement(action.renderInMenu({ ...this.props.paramsForAction, closeContextMenu: this.close }), { key: visibleActions.indexOf(action), "data-testid": testids.menuItem + "_" + key }) + : React.cloneElement(action.renderInMenu({ ...this.props.actionParam, closeContextMenu: this.close }), { key: visibleActions.indexOf(action), "data-testid": testids.menuItem + "_" + key }) ); }) } diff --git a/src/timeline.js b/src/timeline.js index d46e558..aead48e 100644 --- a/src/timeline.js +++ b/src/timeline.js @@ -2144,12 +2144,13 @@ export default class Timeline extends React.Component { * @returns { JSX.Element } */ renderContextMenu() { + let actions = this.props.onContextMenuShow ? this.props.onContextMenuShow({actionParam}) : []; const actionParam = { selection: this._selectionHolder ? this._selectionHolder.state.selectedItems : [], row: this.state.openedContextMenuRow, - time: this.state.openedContextMenuTime + time: this.state.openedContextMenuTime, + positionToOpen: actions.length > 0 ? this.state.openedContextMenuCoordinates : undefined }; - let actions = this.props.onContextMenuShow ? this.props.onContextMenuShow({actionParam}) : []; if (this.props.onDragToCreateEnded && this.props.forceDragToCreateMode == undefined) { // If the user doesn't forces the enter/exit from dragToCreateMode => // a default mechanism is implemented via an action that enters the drag to create mode @@ -2198,13 +2199,7 @@ export default class Timeline extends React.Component { }); } - return ( - 0 ? this.state.openedContextMenuCoordinates : undefined} - actions={actions} - /> - ); + return ; } /** From 0b2d363aa53ee480e3806624a4c5e0aecbbf8ea1 Mon Sep 17 00:00:00 2001 From: Cosmin Radu Date: Fri, 1 Nov 2024 18:36:25 +0200 Subject: [PATCH 2/4] #34215 - finish API changes --- src/components/ContextMenu/ContextMenu.tsx | 18 +++++++++++------- src/timeline.js | 4 +++- 2 files changed, 14 insertions(+), 8 deletions(-) diff --git a/src/components/ContextMenu/ContextMenu.tsx b/src/components/ContextMenu/ContextMenu.tsx index 41df568..84bc189 100644 --- a/src/components/ContextMenu/ContextMenu.tsx +++ b/src/components/ContextMenu/ContextMenu.tsx @@ -9,21 +9,25 @@ type Position = StrictPopupProps["position"]; type IParamsForAction = { selection: any[]; + isOpened: boolean; + /** + * Position for the popover. + */ position?: Position; /** - * if undefined => the menu is closed else {x, y} position where the menu should open + * The coordinates {x, y} of position where the menu should be rendered when it's opened */ positionToOpen?: Point; + /** + * Callback for extra actions when the menu is closed + */ + onClose?: () => void; [key: string]: any; } interface ContextMenuProps { actions: IAction[]; actionParam: IParamsForAction; - /** - * Callback for extra actions when the menu is closed - */ - onClose?: () => void; } const testids = createTestids('ContextMenu', { @@ -40,7 +44,7 @@ export class ContextMenu extends React.Component { } close() { - this.props.onClose && this.props.onClose(); + this.props.actionParam.onClose && this.props.actionParam.onClose(); } getPopupContext(): HTMLElement { @@ -70,7 +74,7 @@ export class ContextMenu extends React.Component { position={this.props.actionParam.position} onClose={() => { this.close(); - }} open={(this.props.actionParam.positionToOpen && visibleActions.length > 0)}> + }} open={(this.props.actionParam.isOpened && visibleActions.length > 0)}> {visibleActions.map((action: IAction) => { const key = visibleActions.indexOf(action); diff --git a/src/timeline.js b/src/timeline.js index aead48e..605367f 100644 --- a/src/timeline.js +++ b/src/timeline.js @@ -2145,11 +2145,13 @@ export default class Timeline extends React.Component { */ renderContextMenu() { let actions = this.props.onContextMenuShow ? this.props.onContextMenuShow({actionParam}) : []; + let positionToOpen = actions.length > 0 ? this.state.openedContextMenuCoordinates : undefined; const actionParam = { selection: this._selectionHolder ? this._selectionHolder.state.selectedItems : [], row: this.state.openedContextMenuRow, time: this.state.openedContextMenuTime, - positionToOpen: actions.length > 0 ? this.state.openedContextMenuCoordinates : undefined + positionToOpen, + isOpened: positionToOpen ? true : false }; if (this.props.onDragToCreateEnded && this.props.forceDragToCreateMode == undefined) { // If the user doesn't forces the enter/exit from dragToCreateMode => From f94e01802b14dabac1e819559525bf5f493cd5e7 Mon Sep 17 00:00:00 2001 From: Cosmin Radu Date: Tue, 26 Nov 2024 16:10:53 +0200 Subject: [PATCH 3/4] #34215 - fix for a bug --- src/timeline.js | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/timeline.js b/src/timeline.js index 605367f..9e1c427 100644 --- a/src/timeline.js +++ b/src/timeline.js @@ -2144,12 +2144,15 @@ export default class Timeline extends React.Component { * @returns { JSX.Element } */ renderContextMenu() { - let actions = this.props.onContextMenuShow ? this.props.onContextMenuShow({actionParam}) : []; - let positionToOpen = actions.length > 0 ? this.state.openedContextMenuCoordinates : undefined; - const actionParam = { + let actionParam = { selection: this._selectionHolder ? this._selectionHolder.state.selectedItems : [], row: this.state.openedContextMenuRow, - time: this.state.openedContextMenuTime, + time: this.state.openedContextMenuTime + }; + let actions = this.props.onContextMenuShow ? this.props.onContextMenuShow({actionParam}) : []; + let positionToOpen = actions.length > 0 ? this.state.openedContextMenuCoordinates : undefined; + actionParam = { + ...actionParam, positionToOpen, isOpened: positionToOpen ? true : false }; From 5d5fed2a6388a2d06724f804d9a0fbd9d24ee281 Mon Sep 17 00:00:00 2001 From: Cosmin Radu Date: Wed, 27 Nov 2024 12:12:28 +0200 Subject: [PATCH 4/4] #34215 - small changes --- src/timeline.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/timeline.js b/src/timeline.js index 53dc4b5..f5340b3 100644 --- a/src/timeline.js +++ b/src/timeline.js @@ -1037,7 +1037,7 @@ export default class Timeline extends React.Component { ); }); - if (this._table) { + if (this._table && this._table.getApi().updateRowHeights) { this._table.getApi().updateRowHeights(); } } @@ -2174,7 +2174,8 @@ export default class Timeline extends React.Component { actionParam = { ...actionParam, positionToOpen, - isOpened: positionToOpen ? true : false + isOpened: positionToOpen ? true : false, + onClose: () => this.setState({openedContextMenuCoordinates: undefined}) }; if (this.props.onDragToCreateEnded && this.props.forceDragToCreateMode == undefined) { // If the user doesn't forces the enter/exit from dragToCreateMode =>