Refactor #4602 - for Inplace

primefaces · Jul 6, 2023 · 6adecb3 · 6adecb3
1 parent f343d26
commit 6adecb3
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 43 deletions.
diff --git a/components/lib/inplace/Inplace.css b/components/lib/inplace/Inplace.css
diff --git a/components/lib/inplace/Inplace.js b/components/lib/inplace/Inplace.js
@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { localeOption } from '../api/Api';
+import { localeOption, PrimeReactContext } from '../api/Api';
 import { Button } from '../button/Button';
+import { useStyle } from '../hooks/Hooks';
 import { TimesIcon } from '../icons/times';
-import { classNames, IconUtils, mergeProps, ObjectUtils } from '../utils/Utils';
+import { IconUtils, mergeProps, ObjectUtils } from '../utils/Utils';
 import { InplaceBase } from './InplaceBase';
-import { PrimeReactContext } from '../api/Api';
 
 export const InplaceDisplay = (props) => props.children;
 export const InplaceContent = (props) => props.children;
@@ -17,7 +17,9 @@ export const Inplace = React.forwardRef((inProps, ref) => {
     const elementRef = React.useRef(null);
     const active = props.onToggle ? props.active : activeState;
 
-    const { ptm } = InplaceBase.setMetaData({
+    useStyle(InplaceBase.css.styles, { name: 'primereact_inplace_style' });
+
+    const { ptm, cx } = InplaceBase.setMetaData({
         props,
         state: {
             active: activeState
@@ -62,14 +64,10 @@ export const Inplace = React.forwardRef((inProps, ref) => {
     };
 
     const createDisplay = (content) => {
-        const className = classNames('p-inplace-display', {
-            'p-disabled': props.disabled
-        });
-
         const displayProps = mergeProps(
             {
                 onClick: open,
-                className,
+                className: cx('display'),
                 onKeyDown: onDisplayKeyDown,
                 tabIndex: props.tabIndex,
                 'aria-label': props.ariaLabel
@@ -87,7 +85,7 @@ export const Inplace = React.forwardRef((inProps, ref) => {
 
         if (props.closable) {
             const closeButtonProps = mergeProps({
-                className: 'p-inplace-content-close',
+                className: cx('closeButton'),
                 icon: closeIcon,
                 type: 'button',
                 onClick: close,
@@ -106,7 +104,7 @@ export const Inplace = React.forwardRef((inProps, ref) => {
 
         const contentProps = mergeProps(
             {
-                className: 'p-inplace-content'
+                className: cx('content')
             },
             ptm('content')
         );
@@ -137,18 +135,11 @@ export const Inplace = React.forwardRef((inProps, ref) => {
     }));
 
     const children = createChildren();
-    const className = classNames(
-        'p-inplace p-component',
-        {
-            'p-inplace-closable': props.closable
-        },
-        props.className
-    );
 
     const rootProps = mergeProps(
         {
             ref: elementRef,
-            className
+            className: cx('root')
         },
         InplaceBase.getOtherProps(props),
         ptm('root')

diff --git a/components/lib/inplace/InplaceBase.js b/components/lib/inplace/InplaceBase.js
@@ -1,4 +1,5 @@
 import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/utils';
 
 export const InplaceDisplayBase = ComponentBase.extend({
     defaultProps: {
@@ -29,5 +30,46 @@ export const InplaceBase = ComponentBase.extend({
         onClose: null,
         onToggle: null,
         children: undefined
+    },
+    css: {
+        classes: {
+            display: ({ props }) =>
+                classNames('p-inplace-display', {
+                    'p-disabled': props.disabled
+                }),
+            root: ({ props }) =>
+                classNames(
+                    'p-inplace p-component',
+                    {
+                        'p-inplace-closable': props.closable
+                    },
+                    props.className
+                ),
+            closeButton: 'p-inplace-content-close',
+            content: 'p-inplace-content'
+        },
+        styles: `
+        .p-inplace .p-inplace-display {
+            display: inline;
+            cursor: pointer;
+        }
+        
+        .p-inplace .p-inplace-content {
+            display: inline;
+        }
+        
+        .p-fluid .p-inplace.p-inplace-closable .p-inplace-content {
+            display: flex;
+        }
+        
+        .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext {
+            flex: 1 1 auto;
+            width: 1%;
+        }
+        
+        .p-inplace-content-close {
+            margin-left: .25rem;
+        }
+        `
     }
 });
diff --git a/components/lib/inplace/inplace.d.ts b/components/lib/inplace/inplace.d.ts
@@ -14,8 +14,8 @@
  *
  */
 import * as React from 'react';
-import { IconType, PassThroughType } from '../utils/utils';
 import { ButtonPassThroughOptions } from '../button';
+import { IconType, PassThroughType } from '../utils/utils';
 
 export declare type InplacePassThroughType<T> = PassThroughType<T, InplacePassThroughMethodOptions>;
 /**
@@ -130,6 +130,11 @@ export interface InplaceProps extends Omit<React.DetailedHTMLProps<React.HTMLAtt
      * @type {InplacePassThroughOptions}
      */
     pt?: InplacePassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
 }
 
 /**

diff --git a/styles/primereact.css b/styles/primereact.css
@@ -21,12 +21,10 @@
 @import "../components/lib/editor/Editor.css";
 @import "../components/lib/fileupload/FileUpload.css";
 @import "../components/lib/toast/Toast.css";
-@import "../components/lib/inplace/Inplace.css";
 @import "../components/lib/inputnumber/InputNumber.css";
 @import "../components/lib/inputswitch/InputSwitch.css";
 @import "../components/lib/inputtext/InputText.css";
 @import "../components/lib/inputtextarea/InputTextarea.css";
-@import "../components/lib/inplace/Inplace.css";
 @import "../components/lib/listbox/ListBox.css";
 @import "../components/lib/menu/Menu.css";
 @import "../components/lib/megamenu/MegaMenu.css";