Skip to content

Commit

Permalink
Refactor #4602 - for Chip
Browse files Browse the repository at this point in the history
  • Loading branch information
habubey committed Jul 6, 2023
1 parent eac31f5 commit 503f404
Show file tree
Hide file tree
Showing 5 changed files with 55 additions and 38 deletions.
21 changes: 0 additions & 21 deletions components/lib/chip/Chip.css

This file was deleted.

27 changes: 11 additions & 16 deletions components/lib/chip/Chip.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import * as React from 'react';
import { classNames, IconUtils, mergeProps, ObjectUtils } from '../utils/Utils';
import { ChipBase } from './ChipBase';
import { TimesCircleIcon } from '../icons/timescircle';
import { PrimeReactContext } from '../api/Api';
import { useStyle } from '../hooks/Hooks';
import { TimesCircleIcon } from '../icons/timescircle';
import { IconUtils, mergeProps, ObjectUtils } from '../utils/Utils';
import { ChipBase } from './ChipBase';

export const Chip = React.memo(
React.forwardRef((inProps, ref) => {
Expand All @@ -12,7 +13,9 @@ export const Chip = React.memo(
const elementRef = React.useRef(null);
const [visibleState, setVisibleState] = React.useState(true);

const { ptm } = ChipBase.setMetaData({
useStyle(ChipBase.css.styles, { name: 'primereact_chip_style' });

const { ptm, cx } = ChipBase.setMetaData({
props
});

Expand All @@ -38,7 +41,7 @@ export const Chip = React.memo(
{
key: 'removeIcon',
tabIndex: 0,
className: 'p-chip-remove-icon',
className: cx('removeIcon'),
onClick: close,
onKeyDown
},
Expand All @@ -62,7 +65,7 @@ export const Chip = React.memo(
const chipIconProps = mergeProps(
{
key: 'icon',
className: 'p-chip-icon'
className: cx('icon')
},
ptm('icon')
);
Expand All @@ -74,7 +77,7 @@ export const Chip = React.memo(
const labelProps = mergeProps(
{
key: 'label',
className: 'p-chip-text'
className: cx('label')
},
ptm('label')
);
Expand All @@ -90,21 +93,13 @@ export const Chip = React.memo(
};

const createElement = () => {
const className = classNames(
'p-chip p-component',
{
'p-chip-image': props.image != null
},
props.className
);

const content = props.template ? ObjectUtils.getJSXElement(props.template, props) : createContent();

const rootProps = mergeProps(
{
ref: elementRef,
style: props.style,
className: className
className: cx('root')
},
ChipBase.getOtherProps(props),
ptm('root')
Expand Down
39 changes: 39 additions & 0 deletions components/lib/chip/ChipBase.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 ChipBase = ComponentBase.extend({
defaultProps: {
Expand All @@ -15,5 +16,43 @@ export const ChipBase = ComponentBase.extend({
onImageError: null,
onRemove: null,
children: undefined
},
css: {
classes: {
root: ({ props }) =>
classNames(
'p-chip p-component',
{
'p-chip-image': props.image != null
},
props.className
),
removeIcon: 'p-chip-remove-icon',
icon: 'p-chip-icon',
label: 'p-chip-text'
},
styles: `
.p-chip {
display: inline-flex;
align-items: center;
}
.p-chip-text {
line-height: 1.5;
}
.p-chip-icon.pi {
line-height: 1.5;
}
.p-chip .p-chip-remove-icon {
line-height: 1.5;
cursor: pointer;
}
.p-chip img {
border-radius: 50%;
}
`
}
});
5 changes: 5 additions & 0 deletions components/lib/chip/chip.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -111,6 +111,11 @@ export interface ChipProps extends Omit<React.DetailedHTMLProps<React.HTMLAttrib
* @type {ChipPassThroughOptions}
*/
pt?: ChipPassThroughOptions;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false
*/
unstyled?: boolean;
}

/**
Expand Down
1 change: 0 additions & 1 deletion styles/primereact.css
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,6 @@
@import "../components/lib/splitter/Splitter.css";
@import "../components/lib/confirmpopup/ConfirmPopup.css";
@import "../components/lib/scrolltop/ScrollTop.css";
@import "../components/lib/chip/Chip.css";
@import "../components/lib/cascadeselect/CascadeSelect.css";
@import "../components/lib/treeselect/TreeSelect.css";
@import "../components/lib/virtualscroller/VirtualScroller.css";
Expand Down

0 comments on commit 503f404

Please sign in to comment.