Refactor PT - Related #4360, #4293, #4352, #4359

primefaces · May 11, 2023 · d1b72a7 · d1b72a7
1 parent f03f4d7
commit d1b72a7
Show file tree

Hide file tree

Showing 25 changed files with 169 additions and 112 deletions.
diff --git a/components/doc/inplace/pt/ptdoc.js b/components/doc/inplace/pt/ptdoc.js
@@ -7,58 +7,67 @@ import { InplaceContent } from '../../../lib/inplace/Inplace';
 export function PTDoc(props) {
     const code = {
         basic: `
-<Card
-    title="Simple Card"
+<Inplace
     pt={{
-        body: { className: 'bg-primary border-round-lg' }
+        display: { className: 'bg-primary' }
     }}
 >
-    <p className="m-0">
-        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
-        quas!
-    </p>
-</Card>
+    <InplaceDisplay>View Content</InplaceDisplay>
+    <InplaceContent>
+        <p className="m-0">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+            laborum.
+        </p>
+    </InplaceContent>
+</Inplace>
         `,
         javascript: `
 import React from 'react'; 
-import { Card } from 'primereact/card';
+import { Inplace } from 'primereact/inplace';
 
 export default function PTDemo() {
     return (
         <div className="card">
-            <Card
-                title="Simple Card"
+            <Inplace
                 pt={{
-                    body: { className: 'bg-primary border-round-lg' }
+                    display: { className: 'bg-primary' }
                 }}
             >
-                <p className="m-0">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
-                    quas!
-                </p>
-            </Card>
+                <InplaceDisplay>View Content</InplaceDisplay>
+                <InplaceContent>
+                    <p className="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+                        laborum.
+                    </p>
+                </InplaceContent>
+            </Inplace>
         </div>
     )
 }
         `,
         typescript: `
 import React from 'react'; 
-import { Card } from 'primereact/card';
+import { Inplace } from 'primereact/inplace';
 
 export default function PTDemo() {
     return (
         <div className="card">
-            <Card
-                title="Simple Card"
+            <Inplace
                 pt={{
-                    body: { className: 'bg-primary border-round-lg' }
+                    display: { className: 'bg-primary' }
                 }}
             >
-                <p className="m-0">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
-                    quas!
-                </p>
-            </Card>
+                <InplaceDisplay>View Content</InplaceDisplay>
+                <InplaceContent>
+                    <p className="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+                        laborum.
+                    </p>
+                </InplaceContent>
+            </Inplace>
         </div>
     )
 }

diff --git a/components/doc/splitter/pt/ptdoc.js b/components/doc/splitter/pt/ptdoc.js
@@ -58,5 +58,3 @@ export default function PTDemo() {
         </>
     );
 }
-
-export default PTDoc;
diff --git a/components/doc/tabview/pt/ptdoc.js b/components/doc/tabview/pt/ptdoc.js
@@ -134,5 +134,3 @@ export default function PTDemo() {
         </>
     );
 }
-
-export default PTDoc;
diff --git a/components/lib/accordion/accordion.d.ts b/components/lib/accordion/accordion.d.ts
@@ -46,7 +46,7 @@ export interface AccordionTabPassThroughOptions {
     /**
      * Uses to pass attributes to the headericon's DOM element.
      */
-    headerIcon?: AccordionTabPassThroughType<React.HTMLAttributes<HTMLSpanElement | SVGSVGElement>>;
+    headerIcon?: AccordionTabPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
     /**
      * Uses to pass attributes to the headertitle's DOM element.
      */

diff --git a/components/lib/avatar/avatar.d.ts b/components/lib/avatar/avatar.d.ts
@@ -34,7 +34,7 @@ export interface AvatarPassThroughOptions {
     /**
      * Uses to pass attributes to the icon's DOM element.
      */
-    icon?: AvatarPassThroughType<React.HTMLAttributes<SVGSVGElement>>;
+    icon?: AvatarPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
     /**
      * Uses to pass attributes to the image's DOM element.
      */
@@ -97,6 +97,11 @@ export interface AvatarProps extends Omit<React.DetailedHTMLProps<React.HTMLAttr
      * @readonly
      */
     children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {AvatarPassThroughOptions}
+     */
+    pt?: AvatarPassThroughOptions;
 }
 
 /**

diff --git a/components/lib/avatargroup/avatargroup.d.ts b/components/lib/avatargroup/avatargroup.d.ts
@@ -38,6 +38,11 @@ export interface AvatarGroupProps extends Omit<React.DetailedHTMLProps<React.HTM
      * @readonly
      */
     children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {AvatarGroupPassThroughOptions}
+     */
+    pt?: AvatarGroupPassThroughOptions;
 }
 
 /**

diff --git a/components/lib/badge/badge.d.ts b/components/lib/badge/badge.d.ts
@@ -55,6 +55,11 @@ export interface BadgeProps extends Omit<React.DetailedHTMLProps<React.HTMLAttri
      * @readonly
      */
     children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {BadgePassThroughOptions}
+     */
+    pt?: BadgePassThroughOptions;
 }
 
 /**

diff --git a/components/lib/blockui/blockui.d.ts b/components/lib/blockui/blockui.d.ts
@@ -84,6 +84,11 @@ export interface BlockUIProps extends Omit<React.DetailedHTMLProps<React.HTMLAtt
      * Template of mask.
      */
     template?: React.ReactNode | ((props: BlockUIProps) => React.ReactNode) | null | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {BlockUIPassThroughOptions}
+     */
+    pt?: BlockUIPassThroughOptions;
     /**
      * Fired when the element gets blocked.
      */

diff --git a/components/lib/chip/Chip.js b/components/lib/chip/Chip.js
@@ -42,8 +42,7 @@ export const Chip = React.memo(
                 ptm('removeIcon')
             );
 
-            const iconProps = { ...removeIconProps };
-            const icon = props.removeIcon || <TimesCircleIcon {...iconProps} />;
+            const icon = props.removeIcon || <TimesCircleIcon {...removeIconProps} />;
 
             if (props.image) {
                 const imageProps = mergeProps(
@@ -81,7 +80,7 @@ export const Chip = React.memo(
             }
 
             if (props.removable) {
-                content.push(IconUtils.getJSXIcon(icon, { ...iconProps }, { props }));
+                content.push(IconUtils.getJSXIcon(icon, { ...removeIconProps }, { props }));
             }
 
             return content;

diff --git a/components/lib/chip/chip.d.ts b/components/lib/chip/chip.d.ts
@@ -35,15 +35,15 @@ export interface ChipPassThroughOptions {
     /**
      * Uses to pass attributes to the icon's DOM element.
      */
-    icon?: ChipPassThroughType<React.HTMLAttributes<SVGSVGElement>>;
+    icon?: ChipPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
     /**
      * Uses to pass attributes to the label' DOM element.
      */
     label?: ChipPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
     /**
      * Uses to pass attributes to the removeIcon's DOM element.
      */
-    removeIcon?: ChipPassThroughType<React.HTMLAttributes<SVGSVGElement>>;
+    removeIcon?: ChipPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
 }
 
 /**
@@ -106,6 +106,11 @@ export interface ChipProps extends Omit<React.DetailedHTMLProps<React.HTMLAttrib
      * @readonly
      */
     children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {ChipPassThroughOptions}
+     */
+    pt?: ChipPassThroughOptions;
 }
 
 /**

diff --git a/components/lib/confirmdialog/confirmdialog.d.ts b/components/lib/confirmdialog/confirmdialog.d.ts
@@ -8,7 +8,7 @@
  *
  */
 import * as React from 'react';
-import { DialogPassThroughOptions, DialogProps } from '../dialog';
+import { DialogProps } from '../dialog';
 import { IconType, PassThroughType } from '../utils';
 import { ButtonPassThroughOptions } from '../button/button';
 
@@ -143,7 +143,7 @@ interface ConfirmDialogOptions {
  * Defines valid properties in ConfirmDialog component. In addition to these, all properties of {@link dialog} can be used in this component.
  * @group Properties
  */
-export interface ConfirmDialogProps extends Omit<DialogProps, 'onHide' | 'footer'> {
+export interface ConfirmDialogProps extends Omit<DialogProps, 'onHide' | 'footer' | 'pt'> {
     /**
      * Unique tag key used to separate the confirmDialog components in the page.
      */
@@ -217,6 +217,11 @@ export interface ConfirmDialogProps extends Omit<DialogProps, 'onHide' | 'footer
      * @readonly
      */
     children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {ConfirmDialogPassThroughOptions}
+     */
+    pt?: ConfirmDialogPassThroughOptions;
 }
 
 /**

diff --git a/components/lib/confirmpopup/ConfirmPopup.js b/components/lib/confirmpopup/ConfirmPopup.js
@@ -30,7 +30,11 @@ export const ConfirmPopup = React.memo(
         const [visibleState, setVisibleState] = React.useState(props.visible);
         const [reshowState, setReshowState] = React.useState(false);
         const { ptm } = ConfirmPopupBase.setMetaData({
-            props
+            props,
+            state: {
+                visible: visibleState,
+                reshow: reshowState
+            }
         });
 
         const overlayRef = React.useRef(null);
@@ -256,26 +260,22 @@ export const ConfirmPopup = React.memo(
                 ptm('footer')
             );
 
-            const rejectButtonProps = mergeProps(
-                {
-                    label: rejectLabel,
-                    icon: getPropValue('rejectIcon'),
-                    className: rejectClassName,
-                    onClick: reject
-                },
-                ptm('rejectButton')
-            );
+            const rejectButtonProps = mergeProps({
+                label: rejectLabel,
+                icon: getPropValue('rejectIcon'),
+                className: rejectClassName,
+                onClick: reject,
+                pt: ptm('rejectButton')
+            });
 
-            const acceptButtonProps = mergeProps(
-                {
-                    ref: acceptBtnRef,
-                    label: acceptLabel,
-                    icon: getPropValue('acceptIcon'),
-                    className: acceptClassName,
-                    onClick: accept
-                },
-                ptm('acceptButton')
-            );
+            const acceptButtonProps = mergeProps({
+                ref: acceptBtnRef,
+                label: acceptLabel,
+                icon: getPropValue('acceptIcon'),
+                className: acceptClassName,
+                onClick: accept,
+                pt: ptm('acceptButton')
+            });
 
             const content = (
                 <div {...footerProps}>

diff --git a/components/lib/confirmpopup/confirmpopup.d.ts b/components/lib/confirmpopup/confirmpopup.d.ts
@@ -38,7 +38,7 @@ export interface ConfirmPopupPassThroughOptions {
     /**
      * Uses to pass attributes to the icon's DOM element.
      */
-    icon?: ConfirmPopupPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement | SVGSVGElement>>;
+    icon?: ConfirmPopupPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
     /**
      * Uses to pass attributes to the message's DOM element.
      */
@@ -68,6 +68,11 @@ export interface ConfirmPopupState {
      * @defaultValue false
      */
     visible: boolean;
+    /**
+     * Current reshow state as a boolean.
+     * @defaultValue false
+     */
+    reshow: boolean;
 }
 
 /**
@@ -218,6 +223,11 @@ export interface ConfirmPopupProps {
      * @readonly
      */
     children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {ConfirmPopupPassThroughOptions}
+     */
+    pt?: ConfirmPopupPassThroughOptions;
 }
 
 /**

diff --git a/components/lib/dialog/dialog.d.ts b/components/lib/dialog/dialog.d.ts
@@ -53,11 +53,11 @@ export interface DialogPassThroughOptions {
     /**
      * Uses to pass attributes to the close button's component.
      */
-    closeButton?: DialogPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    closeButton?: DialogPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
     /**
      * Uses to pass attributes to the close button icon's component.
      */
-    closeButtonIcon?: DialogPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
+    closeButtonIcon?: DialogPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
     /**
      * Uses to pass attributes to the content's DOM element.
      */
@@ -292,6 +292,11 @@ export interface DialogProps {
      * @defaultValue false
      */
     visible?: boolean | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {DialogPassThroughOptions}
+     */
+    pt?: DialogPassThroughOptions;
     /**
      * Callback to invoke when dialog is clicked.
      * @param {React.PointerEvent<HTMLElement>} event - Browser event.

diff --git a/components/lib/divider/divider.d.ts b/components/lib/divider/divider.d.ts
@@ -58,6 +58,11 @@ export interface DividerProps extends Omit<React.DetailedHTMLProps<React.HTMLAtt
      * @readonly
      */
     children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {DividerPassThroughOptions}
+     */
+    pt?: DividerPassThroughOptions;
 }
 
 /**

diff --git a/components/lib/fieldset/fieldset.d.ts b/components/lib/fieldset/fieldset.d.ts
@@ -155,6 +155,11 @@ export interface FieldsetProps extends Omit<React.DetailedHTMLProps<React.HTMLAt
      * @readonly
      */
     children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {FieldsetPassThroughOptions}
+     */
+    pt?: FieldsetPassThroughOptions;
 }
 
 /**
-Original file line number
+Diff line change
@@ Expand Up / @@ -58,5 +58,3 @@ export default function PTDemo() { @@
             </>
         );
     }
-    export default PTDoc;