From 503f4040bbe603226d68233aaaa15b9dd44c2d92 Mon Sep 17 00:00:00 2001 From: habubey Date: Thu, 6 Jul 2023 08:52:33 +0300 Subject: [PATCH] Refactor #4602 - for Chip --- components/lib/chip/Chip.css | 21 ------------------ components/lib/chip/Chip.js | 27 ++++++++++------------- components/lib/chip/ChipBase.js | 39 +++++++++++++++++++++++++++++++++ components/lib/chip/chip.d.ts | 5 +++++ styles/primereact.css | 1 - 5 files changed, 55 insertions(+), 38 deletions(-) delete mode 100644 components/lib/chip/Chip.css diff --git a/components/lib/chip/Chip.css b/components/lib/chip/Chip.css deleted file mode 100644 index 14cc1a4de5..0000000000 --- a/components/lib/chip/Chip.css +++ /dev/null @@ -1,21 +0,0 @@ -.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%; -} diff --git a/components/lib/chip/Chip.js b/components/lib/chip/Chip.js index 0253896f2c..35aaf081cf 100644 --- a/components/lib/chip/Chip.js +++ b/components/lib/chip/Chip.js @@ -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) => { @@ -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 }); @@ -38,7 +41,7 @@ export const Chip = React.memo( { key: 'removeIcon', tabIndex: 0, - className: 'p-chip-remove-icon', + className: cx('removeIcon'), onClick: close, onKeyDown }, @@ -62,7 +65,7 @@ export const Chip = React.memo( const chipIconProps = mergeProps( { key: 'icon', - className: 'p-chip-icon' + className: cx('icon') }, ptm('icon') ); @@ -74,7 +77,7 @@ export const Chip = React.memo( const labelProps = mergeProps( { key: 'label', - className: 'p-chip-text' + className: cx('label') }, ptm('label') ); @@ -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') diff --git a/components/lib/chip/ChipBase.js b/components/lib/chip/ChipBase.js index 24dca6438b..b074ed8e06 100644 --- a/components/lib/chip/ChipBase.js +++ b/components/lib/chip/ChipBase.js @@ -1,4 +1,5 @@ import { ComponentBase } from '../componentbase/ComponentBase'; +import { classNames } from '../utils/utils'; export const ChipBase = ComponentBase.extend({ defaultProps: { @@ -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%; + } + ` } }); diff --git a/components/lib/chip/chip.d.ts b/components/lib/chip/chip.d.ts index a140de3375..4943cc9e21 100644 --- a/components/lib/chip/chip.d.ts +++ b/components/lib/chip/chip.d.ts @@ -111,6 +111,11 @@ export interface ChipProps extends Omit