Related #4352, #4602 - For Misc

primefaces · Aug 22, 2023 · 68f6522 · 68f6522
1 parent a5f2cda
commit 68f6522
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 41 deletions.
diff --git a/components/lib/avatar/Avatar.js b/components/lib/avatar/Avatar.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { PrimeReactContext } from '../api/Api';
 import { useHandleStyle } from '../componentbase/ComponentBase';
-import { IconUtils, ObjectUtils, classNames, mergeProps } from '../utils/Utils';
+import { DomHandler, IconUtils, ObjectUtils, classNames, mergeProps } from '../utils/Utils';
 import { AvatarBase } from './AvatarBase';
 
 export const Avatar = React.forwardRef((inProps, ref) => {
@@ -10,11 +10,13 @@ export const Avatar = React.forwardRef((inProps, ref) => {
 
     const elementRef = React.useRef(null);
     const [imageFailed, setImageFailed] = React.useState(false);
+    const [isNestedInAvatarGroup, setisNestedInAvatarGroup] = React.useState(false);
 
     const { ptm, cx, isUnstyled } = AvatarBase.setMetaData({
         props,
         state: {
-            imageFailed: imageFailed
+            imageFailed: imageFailed,
+            isNestedInAvatarGroup            
         }
     });
 
@@ -69,6 +71,12 @@ export const Avatar = React.forwardRef((inProps, ref) => {
         props.onImageError && props.onImageError(event);
     };
 
+    React.useEffect(() => {
+        const isInAG = DomHandler.isAttributeEquals(elementRef.current.parentElement, 'data-pc-name', 'avatargroup');
+
+        setisNestedInAvatarGroup(isInAG);
+    },[])
+
     React.useImperativeHandle(ref, () => ({
         props,
         getElement: () => elementRef.current

diff --git a/components/lib/avatar/avatar.d.ts b/components/lib/avatar/avatar.d.ts
@@ -16,6 +16,23 @@ export declare type AvatarPassThroughType<T> = PassThroughType<T, AvatarPassThro
  */
 export interface AvatarPassThroughMethodOptions {
     props: AvatarProps;
+    state: AvatarState;
+}
+
+/**
+ * Defines current inline state in Avatar component.
+ */
+export interface AvatarState {
+    /**
+     * Current imageFailed state as a boolean.
+     * @defaultValue false
+     */
+    imageFailed: boolean;
+    /**
+     * Current state that indicates whether the Avatar component is nested within an AvatarGroup component.
+     * @defaultValue false
+     */
+    isNestedInAvatarGroup: boolean;
 }
 
 /**

diff --git a/components/lib/blockui/BlockUI.js b/components/lib/blockui/BlockUI.js
@@ -85,9 +85,16 @@ export const BlockUI = React.forwardRef((inProps, ref) => {
         if (visibleState) {
             const appendTo = props.fullScreen ? document.body : 'self';
             const maskProps =
-                ({
+                mergeProps({
                     className: cx('mask'),
-                    style: props.style
+                    style: {
+                        ...props.style,
+                        position: props.fullScreen ? 'fixed' : 'absolute',
+                        top: '0',
+                        left: '0',
+                        width: '100%',
+                        height: '100%'                          
+                    }
                 },
                 ptm('mask'));
             const content = props.template ? ObjectUtils.getJSXElement(props.template, props) : null;

diff --git a/components/lib/blockui/BlockUIBase.js b/components/lib/blockui/BlockUIBase.js
@@ -19,11 +19,6 @@ const styles = `
 }
 
 .p-blockui {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
     opacity: 1;
     display: flex;
     align-items: center;

diff --git a/components/lib/editor/Editor.js b/components/lib/editor/Editor.js
@@ -162,48 +162,48 @@ export const Editor = React.memo(
             } else {
                 const getMergeProps = (params, key) => mergeProps(params && { ...params }, ptm(key));
 
-                const formatsProps = mergeProps({ className: cx('formats') }, ptm('formats'));
+                const formatsProps = mergeProps({ className: 'ql-formats' }, ptm('formats'));
 
                 return (
                     <div {...toolbarProps}>
                         <span {...formatsProps}>
-                            <select {...getMergeProps({ className: cx('header'), defaultValue: '0' }, 'header')}>
+                            <select {...getMergeProps({ className: 'ql-header', defaultValue: '0' }, 'header')}>
                                 <option {...getMergeProps({ value: '1' }, 'option')}>Heading</option>
                                 <option {...getMergeProps({ value: '2' }, 'option')}>Subheading</option>
                                 <option {...getMergeProps({ value: '0' }, 'option')}>Normal</option>
                             </select>
-                            <select {...getMergeProps({ className: cx('font') }, 'font')}>
+                            <select {...getMergeProps({ className: 'ql-font' }, 'font')}>
                                 <option {...getMergeProps(undefined, 'option')}></option>
                                 <option {...getMergeProps({ value: 'serif' }, 'option')}></option>
                                 <option {...getMergeProps({ value: 'monospace' }, 'option')}></option>
                             </select>
                         </span>
                         <span {...formatsProps}>
-                            <button {...getMergeProps({ type: 'button', className: cx('bold'), 'aria-label': 'Bold' }, 'bold')}></button>
-                            <button {...getMergeProps({ type: 'button', className: cx('italic'), 'aria-label': 'Italic' }, 'italic')}></button>
-                            <button {...getMergeProps({ type: 'button', className: cx('underline'), 'aria-label': 'Underline' }, 'underline')}></button>
+                            <button {...getMergeProps({ type: 'button', className: 'ql-bold', 'aria-label': 'Bold' }, 'bold')}></button>
+                            <button {...getMergeProps({ type: 'button', className: 'ql-italic', 'aria-label': 'Italic' }, 'italic')}></button>
+                            <button {...getMergeProps({ type: 'button', className: 'ql-underline', 'aria-label': 'Underline' }, 'underline')}></button>
                         </span>
                         <span {...formatsProps}>
-                            <select {...getMergeProps({ className: cx('color') }, 'color')}></select>
-                            <select {...getMergeProps({ className: cx('background') }, 'background')}></select>
+                            <select {...getMergeProps({ className: 'ql-color' }, 'color')}></select>
+                            <select {...getMergeProps({ className: 'ql-background' }, 'background')}></select>
                         </span>
                         <span {...formatsProps}>
-                            <button {...getMergeProps({ type: 'button', className: cx('list'), value: 'ordered', 'aria-label': 'Ordered List' }, 'list')}></button>
+                            <button {...getMergeProps({ type: 'button', className: 'ql-list', value: 'ordered', 'aria-label': 'Ordered List' }, 'list')}></button>
                             <button {...getMergeProps({ type: 'button', className: cx('list'), value: 'bullet', 'aria-label': 'Unordered List' }, 'list')}></button>
-                            <select {...getMergeProps({ className: cx('select') }, 'select')}>
+                            <select {...getMergeProps({ className: 'ql-align' }, 'select')}>
                                 <option {...getMergeProps({ defaultValue: true }, 'option')}></option>
                                 <option {...getMergeProps({ value: 'center' }, 'option')}></option>
                                 <option {...getMergeProps({ value: 'right' }, 'option')}></option>
                                 <option {...getMergeProps({ value: 'justify' }, 'option')}></option>
                             </select>
                         </span>
                         <span {...formatsProps}>
-                            <button {...getMergeProps({ type: 'button', className: cx('link'), 'aria-label': 'Insert Link' }, 'link')}></button>
-                            <button {...getMergeProps({ type: 'button', className: cx('image'), 'aria-label': 'Insert Image' }, 'image')}></button>
-                            <button {...getMergeProps({ type: 'button', className: cx('codeBlock'), 'aria-label': 'Insert Code Block' }, 'codeBlock')}></button>
+                            <button {...getMergeProps({ type: 'button', className: 'ql-link', 'aria-label': 'Insert Link' }, 'link')}></button>
+                            <button {...getMergeProps({ type: 'button', className: 'ql-image', 'aria-label': 'Insert Image' }, 'image')}></button>
+                            <button {...getMergeProps({ type: 'button', className: 'ql-code-block', 'aria-label': 'Insert Code Block' }, 'codeBlock')}></button>
                         </span>
                         <span {...formatsProps}>
-                            <button {...getMergeProps({ type: 'button', className: cx('clean'), 'aria-label': 'Remove Styles' }, 'clean')}></button>
+                            <button {...getMergeProps({ type: 'button', className: 'ql-clean', 'aria-label': 'Remove Styles' }, 'clean')}></button>
                         </span>
                     </div>
                 );

diff --git a/components/lib/editor/EditorBase.js b/components/lib/editor/EditorBase.js
@@ -4,20 +4,6 @@ import { classNames } from '../utils/Utils';
 const classes = {
     root: ({ props }) => classNames('p-component p-editor-container', props.className),
     toolbar: 'p-editor-toolbar',
-    formats: 'ql-formats',
-    header: 'ql-header',
-    font: 'ql-font',
-    bold: 'ql-bold',
-    italic: 'ql-italic',
-    underline: 'ql-underline',
-    color: 'ql-color',
-    background: 'ql-background',
-    list: 'ql-list',
-    select: 'ql-align',
-    link: 'ql-link',
-    image: 'ql-image',
-    codeBlock: 'ql-code-block',
-    clean: 'ql-clean',
     content: 'p-editor-content'
 };
 

diff --git a/components/lib/passthrough/tailwind/index.js b/components/lib/passthrough/tailwind/index.js
@@ -1512,7 +1512,7 @@ const Tailwind = {
         })
     },
     avatar: {
-        root: ({ props, parent }) => ({
+        root: ({ props, state }) => ({
             className: classNames(
                 'flex items-center justify-center',
                 'bg-gray-300 dark:bg-gray-800',
@@ -1524,10 +1524,10 @@ const Tailwind = {
                     'text-base h-8 w-8': props.size == null || props.size == 'normal',
                     'w-12 h-12 text-xl': props.size == 'large',
                     'w-16 h-16 text-2xl': props.size == 'xlarge'
+                },
+                {
+                    '-ml-4 border-2 border-white dark:border-gray-900': state.isNestedInAvatarGroup
                 }
-                // {
-                //     '-ml-4 border-2 border-white dark:border-gray-900': parent.instance !== undefined
-                // }
             )
         }),
         image: 'h-full w-full'