@bryntum/gantt-react 7.1.2 → 7.2.0

package/src/WrapperHelper.tsx

@@ -20,9 +20,43 @@ declare global {
 }
 
 /**
- * Development warning. Showed when environment is set to 'development'
- * @param {String} clsName react component instance
- * @param {String} msg console message
+ * Extends the standard React.ReactPortal type to include an optional `taskGeneration` property.
+ * This property can be used to track or associate a generation number with the portal,
+ * which may be useful for managing updates or synchronization tasks in complex React applications.
+ *
+ * @property {number} [taskGeneration] Optional generation number for task tracking or synchronization.
+ */
+type ReactPortalWithTaskGeneration = React.ReactPortal & { taskGeneration?: number };
+
+/**
+ * Represents the state for a React component that manages portals and their generation.
+ *
+ * @property {Map} portals A map associating unique string keys with `ReactPortalWithTaskGeneration` instances.
+ * @property {number} generation A numeric value indicating the current generation or version of the component state.
+ */
+type ReactComponentState = {
+    portals    : Map<string, ReactPortalWithTaskGeneration>
+    generation : number
+};
+
+/**
+ * Extends the standard HTMLElement to include additional optional properties
+ * used for managing element-specific data and state within the application.
+ *
+ * @property {any} [elementData] Arbitrary data associated with the element.
+ * @property {string|null} [lastPortalId] Identifier for the last portal rendered into this element, or null if none.
+ * @property {boolean} [didSetTextContent] Indicates whether the text content of the element has been set.
+ */
+type HTMLElementWithData = HTMLElement & {
+    elementData?: any
+    lastPortalId?: string | null
+    didSetTextContent?: boolean
+};
+
+/**
+ * Development warning. Shown when environment is set to 'development'
+ * @param {string} clsName react component instance
+ * @param {string} msg console message
  */
 function devWarning(clsName: string, msg: string): void {
     // @ts-ignore
@@ -38,7 +72,7 @@ function devWarningContainer(clsName: string, containerParam: string): void {
     devWarning(
         clsName,
         `Using "${containerParam}" parameter for configuration is not recommended.\n` +
-        "Widget is placed automatically inside it's container element.\n" +
+        'Widget is placed automatically inside its container element.\n' +
         `Solution: remove "${containerParam}" parameter from configuration.`
     );
 }
@@ -62,14 +96,14 @@ function devWarningProjectProp(clsName: string): void {
 /**
  * Returns `true` if the provided element is an instance of React Element.
  * All React elements require an additional $$typeof: Symbol.for('react.element') field declared on the object for security reasons.
- * The object, which React.createElement() return has $$typeof property equals to Symbol.for('react.element')
+ * The object, which React.createElement() returns has $$typeof property equal to Symbol.for('react.element')
  *
  * Sources:
  * https://reactjs.org/blog/2015/12/18/react-components-elements-and-instances.html
  * https://github.com/facebook/react/pull/4832
  *
- * @param {*} element
- * @returns {Boolean}
+ * @param {*} element Element to check
+ * @returns {boolean} True if element is a React element
  * @internal
  */
 function isReactElement(element: any): boolean {
@@ -78,8 +112,8 @@ function isReactElement(element: any): boolean {
 
 /**
  * Creates bryntum component config from react component
- * @param {Object} reactInstance react component instance
- * @returns {Object} config object
+ * @param {object} reactInstance react component instance
+ * @returns {object} config object
  */
 function createConfig(reactInstance: any): object {
     const
@@ -101,6 +135,7 @@ function createConfig(reactInstance: any): object {
             processCellContent     : isView ? processCellContent : undefined,
             processCellEditor      : isView ? processCellEditor : undefined,
             processEventContent    : isView ? processEventContent : undefined,
+            processTaskContent     : isView ? processTaskContent : undefined,
             processTaskItemContent : isView ? processTaskItemContent : undefined,
             processResourceHeader  : isView ? processResourceHeader : undefined
         } as any;
@@ -178,10 +213,10 @@ function createConfig(reactInstance: any): object {
 
 /**
  * Applies property value to Bryntum config or instance.
- * @param {Object} configOrInstance target object
- * @param {String} prop property name
- * @param {Object} value value
- * @param {Boolean} isConfig config setting mode
+ * @param {object} configOrInstance target object
+ * @param {string} prop property name
+ * @param {object} value value
+ * @param {boolean} isConfig config setting mode
  */
 function applyPropValue(configOrInstance: any, prop: string, value: any, isConfig = true): void {
     // Assigning React wrapper component instance
@@ -270,9 +305,9 @@ function createWidget(component: any): any {
 
 /**
  * Calculates the portalId from passed ids
- * @param {String|Number} id
- * @param {String|Number} columnId
- * @returns {String} portalId as `portal-${id}-${columnId}`
+ * @param {string|number} id Record id
+ * @param {string|number} columnId Column id
+ * @returns {string} portalId as `portal-${id}-${columnId}`
  */
 function getPortalId(id: string | number, columnId: string | number): string {
     return `portal-${id}-${columnId}`;
@@ -281,7 +316,7 @@ function getPortalId(id: string | number, columnId: string | number): string {
 /**
  * Delete portal and its container
  * @param {*} component React Component, the wrapper itself
- * @param {String} portalId As returned from getPortalId function
+ * @param {string} portalId As returned from getPortalId function
  */
 function deletePortal(component: any, portalId: string): void {
     const portal = component.state.portals.get(portalId);
@@ -313,7 +348,7 @@ function releaseReactCell(component: any, cellElement: any): void {
 /**
  * Calls releaseReactCell that implements the cleanup
  * @param {*} component React Component, the wrapper itself
- * @param {Object} context
+ * @param {object} context Event context object
  * @param {Core.data.Model[]} context.records Array of records that are going to be removed
  */
 function beforeRemoveRecords(component: any, { records, removingAll }: { records: any[]; removingAll: boolean }): void {
@@ -361,9 +396,9 @@ function updateGeneration(component: any, thisTick = false, callback = () => {})
  * Component about to be updated, from changing a prop using state.
  * React to it depending on what changed and prevent react from re-rendering our component.
  * @param {*} component react component instance
- * @param nextProps
- * @param nextState
- * @returns {Boolean}
+ * @param {object} nextProps Next props
+ * @param {object} nextState Next state
+ * @returns {boolean}
  */
 function shouldComponentUpdate(component: any, nextProps: Readonly<any>, nextState: Readonly<any>): boolean {
     const { props, instance, propertyNames } = component;
@@ -380,10 +415,10 @@ function shouldComponentUpdate(component: any, nextProps: Readonly<any>, nextSta
 }
 
 /**
- *
- * @param { Object } context
- * @param { * } context.cellContent Content to be rendered in cell (set by renderer)
- * @returns { Boolean } `true` if there is a React Renderer in this cell, `false` otherwise
+ * Checks if the cell content is a React element
+ * @param {object} context Renderer context object
+ * @param {*} context.cellContent Content to be rendered in cell (set by renderer)
+ * @returns {boolean} `true` if there is a React Renderer in this cell, `false` otherwise
  */
 function hasFrameworkRenderer({ cellContent }: { cellContent: any }): boolean {
     // @ts-ignore
@@ -393,9 +428,9 @@ function hasFrameworkRenderer({ cellContent }: { cellContent: any }): boolean {
 /**
  * Hook called by instance when rendering cells within
  * Row::renderCell(), creates portals for JSX supplied by renderers
- * @param {Object} context
- * @param {Object} context.rendererData Data passed from renderCell
- * @param {Object} context.cellElementData Data passed from renderCell
+ * @param {object} context Renderer context object
+ * @param {object} context.rendererData Data passed from renderCell
+ * @param {object} context.cellElementData Data passed from renderCell
  */
 function processCellContent(this: { reactComponent: any; isExporting: boolean; $isCollapsing: boolean; }, { rendererData, cellElementData, rendererHtml }: {
     rendererData: any
@@ -793,10 +828,102 @@ function processCalendarEventContent(this: any, {
     return returnValue;
 }
 
+function processTaskContent(this: any, {
+    jsx, // React element to render in portal
+    action, // Rendering action
+    targetElement, // DOM element to create portal in
+    reactComponent // the React wrapper component
+}: {
+    jsx: ReactElement
+    action: string
+    targetElement: HTMLElementWithData
+    reactComponent: React.Component & { syncContent: (fn: () => unknown) => void }
+}): boolean {
+
+    const { taskResize } = this.features;
+
+    if (
+        !reactComponent ||
+        action !== 'syncFwConfig' ||
+        (taskResize?.isResizing && !taskResize.dragging.completed)
+    ) {
+        return false;
+    }
+
+    // Ensure we have the expected DOM structure and type safety
+    const wrap : HTMLElementWithData | null | undefined = targetElement.parentElement?.parentElement;
+
+    if (!wrap?.elementData) {
+        return false;
+    }
+
+    const
+        wrapData       = wrap.elementData,
+        { taskRecord } = wrapData,
+        state          = reactComponent.state as ReactComponentState,
+        { portals }    = state,
+        portalId       = `portal-task-${taskRecord.id}`;
+
+    if (taskRecord.isMilestone) {
+        deletePortal(reactComponent, portalId);
+        targetElement.innerHTML = '';
+        wrap.lastPortalId = null;
+        return false;
+    }
+
+    // Make this function available for testing. It is used for synchronizing task content, specifically
+    // for React portal rendering. It should only be called during event D&D drop operation.
+    reactComponent.syncContent = reactComponent.syncContent || function(fn: () => unknown) {
+        flushSync(fn);
+    };
+
+    const parent = wrap.querySelector('.b-gantt-task-content') as HTMLElement;
+
+    if (jsx) {
+
+        const
+            portal        = portals.get(portalId),
+            updateContent = () => {
+                // Clean-up the content element
+                parent!.innerHTML = '';
+                const
+                    jsxContainer = DomHelper.createElement({
+                        className     : 'b-jsx-container',
+                        // As stated above, we are at the wrapper, but we should render the JSX inside the content element
+                        parent,
+                        // Signal DomSync to not remove React-controlled content
+                        retainElement : true
+                    }) as Element,
+                    portal       = ReactDOM.createPortal(jsx, jsxContainer) as ReactPortalWithTaskGeneration;
+
+                // Store taskGeneration on the portal to easily determine later if it needs to be updated
+                portal.taskGeneration = wrap.elementData.taskGeneration;
+
+                // Save portalId for later use
+                wrap.lastPortalId = portalId;
+
+                // Store portal in map in state, so that React can keep track of it
+                portals.set(portalId, portal);
+                updateGeneration(reactComponent, true);
+
+                targetElement.didSetTextContent = true;
+            };
+
+        // Recreate portal only if the underlying taskRecord has changed or is different from last used
+        if (!portal || portal.taskGeneration !== wrap.elementData.taskGeneration || wrap.lastPortalId !== portalId) {
+            // Delete the old portal if one exists
+            deletePortal(reactComponent, portalId);
+            updateContent();
+        }
+    }
+
+    return true;
+}
+
 /**
  * Generate a unique portal ID for an event.
- * @param {Object} assignmentRecord The assignment record
- * @param {Object} [eventRecord] The event record
+ * @param {object} assignmentRecord The assignment record
+ * @param {object} [eventRecord] The event record
  * @param {string} [segment] Segment identifier for split events
  * @param {boolean} [isExporting] To check if exporting is in progress
  * @returns {string} The generated portal ID
@@ -811,8 +938,8 @@ function generateEventPortalId(assignmentRecord: any, eventRecord?: any, segment
  * DomSync only fires callback for it and not for children. The nested children are removed as part of
  * removing the parent, so their callbacks don't fire individually. We must explicitly clean up their portals here.
  * @param {*} component React Component, the wrapper itself
- * @param {Object} parentEventRecord The parent event record
- * @param {Object} resourceRecord The resource record (needed for assignment lookup)
+ * @param {object} parentEventRecord The parent event record
+ * @param {object} resourceRecord The resource record (needed for assignment lookup)
  * @param {boolean} isExporting Whether we're in export mode
  */
 function deleteNestedEventPortals(component: any, parentEventRecord: any, resourceRecord: any, isExporting: boolean): void {
@@ -959,7 +1086,7 @@ function processEventContent(this: any, {
             generationUpdateFlag = true;
         }
 
-        // If nestedEvents feature is enabled and this is a event with nested children, need
+        // If nestedEvents feature is enabled and this is an event with nested children, need
         // to clean up their portals. Because DomSync only fires callback for the parent when it's released,
         // nested children are removed as part of removing the parent, so their callbacks don't fire.
         if (nestedEvents?.enabled && eventRecord.children?.length) {
@@ -1097,9 +1224,9 @@ function handleReactElement(widget: Widget, element: any): void {
 /**
  * Handles the React header element by processing JSX content within the widget.
  *
- * @param {Object} column Object containing grid and id properties
+ * @param {object} column Object containing grid and id properties
  * @param {HTMLElement} headerElement The header element to be processed
- * @param {Any} html JSX content to be processed
+ * @param {any} html JSX content to be processed
  */
 function handleReactHeaderElement(column: { grid: any; id: string }, headerElement: HTMLElement, html: any): void {
     const

package/src/index.ts

@@ -9,6 +9,7 @@ export * from './BryntumThemeCombo';
 export * from './BryntumAIFilterField';
 export * from './BryntumAssignmentField';
 export * from './BryntumAssignmentGrid';
+export * from './BryntumAssignmentPicker';
 export * from './BryntumButton';
 export * from './BryntumButtonGroup';
 export * from './BryntumCalendarEditor';
@@ -62,6 +63,7 @@ export * from './BryntumNumberField';
 export * from './BryntumPagingToolbar';
 export * from './BryntumPanel';
 export * from './BryntumPasswordField';
+export * from './BryntumProgressBar';
 export * from './BryntumProjectCombo';
 export * from './BryntumGanttProjectModel';
 export * from './BryntumRadio';