Skip to content

Commit

Permalink
Refactor #4602 - for Inplace
Browse files Browse the repository at this point in the history
  • Loading branch information
habubey committed Jul 6, 2023
1 parent f343d26 commit 6adecb3
Show file tree
Hide file tree
Showing 5 changed files with 58 additions and 43 deletions.
21 changes: 0 additions & 21 deletions components/lib/inplace/Inplace.css

This file was deleted.

29 changes: 10 additions & 19 deletions components/lib/inplace/Inplace.js
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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
Expand Down Expand Up @@ -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
Expand All @@ -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,
Expand All @@ -106,7 +104,7 @@ export const Inplace = React.forwardRef((inProps, ref) => {

const contentProps = mergeProps(
{
className: 'p-inplace-content'
className: cx('content')
},
ptm('content')
);
Expand Down Expand Up @@ -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')
Expand Down
42 changes: 42 additions & 0 deletions components/lib/inplace/InplaceBase.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { ComponentBase } from '../componentbase/ComponentBase';
import { classNames } from '../utils/utils';

export const InplaceDisplayBase = ComponentBase.extend({
defaultProps: {
Expand Down Expand Up @@ -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;
}
`
}
});
7 changes: 6 additions & 1 deletion components/lib/inplace/inplace.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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>;
/**
Expand Down Expand Up @@ -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;
}

/**
Expand Down
2 changes: 0 additions & 2 deletions styles/primereact.css
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down

0 comments on commit 6adecb3

Please sign in to comment.