Fix #3683: BlockUI add containerStyle, containerClassName

primefaces · Nov 21, 2022 · 090c60a · 090c60a
1 parent 9ba427d
commit 090c60a
Show file tree

Hide file tree

Showing 6 changed files with 84 additions and 14 deletions.
diff --git a/api-generator/components/blockui.js b/api-generator/components/blockui.js
@@ -41,6 +41,18 @@ const BlockUIProps = [
         default: 'null',
         description: 'Inline style of the element.'
     },
+    {
+        name: 'containerClassName',
+        type: 'string',
+        default: 'null',
+        description: 'Style class of the container element.'
+    },
+    {
+        name: 'containerStyle',
+        type: 'React.CSSProperties',
+        default: 'null',
+        description: 'Inline style of the container element.'
+    },
     {
         name: 'template',
         type: 'any',

diff --git a/components/doc/blockui/index.js b/components/doc/blockui/index.js
@@ -1,9 +1,9 @@
-import React, { memo } from 'react';
 import Link from 'next/link';
-import { TabView, TabPanel } from '../../lib/tabview/TabView';
-import { useLiveEditorTabs } from '../common/liveeditor';
+import React, { memo } from 'react';
+import { TabPanel, TabView } from '../../lib/tabview/TabView';
 import { CodeHighlight } from '../common/codehighlight';
 import { DevelopmentSection } from '../common/developmentsection';
+import { useLiveEditorTabs } from '../common/liveeditor';
 
 const BlockUIDoc = memo(() => {
     const sources = {
@@ -437,6 +437,18 @@ export const BlockUIDemo = () => {
                                     <td>null</td>
                                     <td>Inline style of the element.</td>
                                 </tr>
+                                <tr>
+                                    <td>containerClassName</td>
+                                    <td>string</td>
+                                    <td>null</td>
+                                    <td>Style class of the container element.</td>
+                                </tr>
+                                <tr>
+                                    <td>containerStyle</td>
+                                    <td>React.CSSProperties</td>
+                                    <td>null</td>
+                                    <td>Inline style of the container element.</td>
+                                </tr>
                                 <tr>
                                     <td>template</td>
                                     <td>any</td>

diff --git a/components/lib/blockui/BlockUI.js b/components/lib/blockui/BlockUI.js
@@ -95,9 +95,10 @@ export const BlockUI = React.forwardRef((props, ref) => {
 
     const otherProps = ObjectUtils.findDiffKeys(props, BlockUI.defaultProps);
     const mask = createMask();
+    const className = classNames('p-blockui-container', props.containerClassName);
 
     return (
-        <div id={props.id} ref={elementRef} className="p-blockui-container" {...otherProps}>
+        <div id={props.id} ref={elementRef} className={className} style={props.containerStyle} {...otherProps}>
             {props.children}
             {mask}
         </div>
@@ -107,14 +108,16 @@ export const BlockUI = React.forwardRef((props, ref) => {
 BlockUI.displayName = 'BlockUI';
 BlockUI.defaultProps = {
     __TYPE: 'BlockUI',
-    id: null,
-    blocked: false,
-    fullScreen: false,
-    baseZIndex: 0,
     autoZIndex: true,
-    style: null,
+    baseZIndex: 0,
+    blocked: false,
     className: null,
-    template: null,
+    containerClassName: null,
+    containerStyle: null,
+    fullScreen: false,
+    id: null,
     onBlocked: null,
-    onUnblocked: null
+    onUnblocked: null,
+    style: null,
+    template: null
 };
diff --git a/components/lib/blockui/BlockUI.spec.js b/components/lib/blockui/BlockUI.spec.js
@@ -66,4 +66,10 @@ describe('BlockUI', () => {
         // Assert
         expect(container.parentElement).toMatchSnapshot('unblocked-event-fullscreen');
     });
+    snapshotParent(
+        <BlockUI blocked={true} className="block-jest" style={{ cursor: 'move' }} containerClassName="container-jest" containerStyle={{ cursor: 'pointer' }}>
+            <Panel>style + class</Panel>
+        </BlockUI>,
+        'container style and className'
+    );
 });
diff --git a/components/lib/blockui/__snapshots__/BlockUI.spec.js.snap b/components/lib/blockui/__snapshots__/BlockUI.spec.js.snap
@@ -142,6 +142,41 @@ exports[`BlockUI block panel 1`] = `
 </body>
 `;
 
+exports[`BlockUI container style and className 1`] = `
+<body
+  class=""
+>
+  <div>
+    <div
+      class="p-blockui-container container-jest"
+      style="cursor: pointer;"
+    >
+      <div
+        class="p-panel p-component"
+      >
+        <div
+          aria-hidden="false"
+          aria-labelledby="pr_id_4_header"
+          class="p-toggleable-content"
+          id="pr_id_4_content"
+          role="region"
+        >
+          <div
+            class="p-panel-content"
+          >
+            style + class
+          </div>
+        </div>
+      </div>
+      <div
+        class="p-blockui p-component-overlay p-component-overlay-enter block-jest"
+        style="cursor: move; z-index: 4205;"
+      />
+    </div>
+  </div>
+</body>
+`;
+
 exports[`BlockUI unblock panel 1`] = `
 <body
   class=""

diff --git a/components/lib/blockui/blockui.d.ts b/components/lib/blockui/blockui.d.ts
@@ -3,14 +3,16 @@ import * as React from 'react';
 type BlockUITemplateType = React.ReactNode | ((props: BlockUIProps) => React.ReactNode);
 
 export interface BlockUIProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+    autoZIndex?: boolean;
+    baseZIndex?: number;
     blocked?: boolean;
+    children?: React.ReactNode;
+    containerClassName?: string;
+    containerStyle?: React.CSSProperties;
     fullScreen?: boolean;
-    baseZIndex?: number;
-    autoZIndex?: boolean;
     template?: BlockUITemplateType;
     onBlocked?(): void;
     onUnblocked?(): void;
-    children?: React.ReactNode;
 }
 
 export declare class BlockUI extends React.Component<BlockUIProps, any> {