diff --git a/src/_util/parseTNode.ts b/src/_util/parseTNode.ts index 6dbd3072..58c3fd8c 100644 --- a/src/_util/parseTNode.ts +++ b/src/_util/parseTNode.ts @@ -1,7 +1,8 @@ -import isFunction from 'lodash/isFunction'; import React, { ReactElement, ReactNode } from 'react'; -import log from '../_common/js/log'; +import isFunction from 'lodash/isFunction'; import { TNode } from '../common'; +import log from '../_common/js/log'; + // 解析 TNode 数据结构 export default function parseTNode( diff --git a/src/tag/CheckTag.tsx b/src/tag/CheckTag.tsx index 0ce68663..966c0546 100644 --- a/src/tag/CheckTag.tsx +++ b/src/tag/CheckTag.tsx @@ -1,8 +1,5 @@ import classNames from 'classnames'; -import React, { - forwardRef, - memo -} from 'react'; +import React, { forwardRef } from 'react'; import { Icon } from 'tdesign-icons-react'; import parseTNode from 'tdesign-mobile-react/_util/parseTNode'; import { StyledProps } from 'tdesign-mobile-react/common'; @@ -12,99 +9,97 @@ import useDefaultProps from '../hooks/useDefaultProps'; import { checkTagDefaultProps } from "./defaultProps"; import { TdCheckTagProps } from './type'; -export interface TagCheckProps extends TdCheckTagProps, StyledProps { } +export interface CheckTagProps extends TdCheckTagProps, StyledProps { } -const TagCheck = memo( - forwardRef((originProps, ref) => { - const props = useDefaultProps(originProps, checkTagDefaultProps) - const { - checked, - defaultChecked, - content, - children, - style, - className, - icon, - disabled, - closable, - size, - shape, - variant, - onClick, - onChange, - onClose, - ...otherProps - } = props; +const CheckTag = forwardRef((originProps, ref) => { + const props = useDefaultProps(originProps, checkTagDefaultProps) + const { + checked, + defaultChecked, + content, + children, + style, + className, + icon, + disabled, + closable, + size, + shape, + variant, + onClick, + onChange, + onClose, + ...otherProps + } = props; - const { classPrefix } = useConfig(); + const { classPrefix } = useConfig(); - const [innerChecked, onInnerChecked] = useDefault(checked, defaultChecked, onChange); + const [innerChecked, onInnerChecked] = useDefault(checked, defaultChecked, onChange); - const baseClass = `${classPrefix}-tag`; + const baseClass = `${classPrefix}-tag`; - const checkTagClass = classNames( - `${baseClass}`, - // `${baseClass}--checkable`, - `${baseClass}--${shape}`, - `${baseClass}--${innerChecked ? 'primary' : 'default'}`, - `${baseClass}--${size}`, - `${baseClass}--${variant}`, + const checkTagClass = classNames( + `${baseClass}`, + // `${baseClass}--checkable`, + `${baseClass}--${shape}`, + `${baseClass}--${innerChecked ? 'primary' : 'default'}`, + `${baseClass}--${size}`, + `${baseClass}--${variant}`, - { - [`${baseClass}--closable`]: closable, - [`${baseClass}--disabled`]: disabled, - [`${baseClass}--checked`]: !disabled && innerChecked, - }, - className, - ); + { + [`${baseClass}--closable`]: closable, + [`${baseClass}--disabled`]: disabled, + [`${baseClass}--checked`]: !disabled && innerChecked, + }, + className, + ); - const renderText = () => { - if (Array.isArray(content) && content.length === 2) { - return innerChecked ? content[0] : content[1]; - } - return content; + const renderText = () => { + if (Array.isArray(content) && content.length === 2) { + return innerChecked ? content[0] : content[1]; } + return content; + } - const childNode = parseTNode(renderText()) || parseTNode(children) + const childNode = parseTNode(renderText()) || parseTNode(children) - const tagStyle = { - ...style, - }; + const tagStyle = { + ...style, + }; - const handleClick = (e) => { - if (!props.disabled) { - onClick?.(e); - onInnerChecked(!innerChecked); - } - }; + const handleClick = (e) => { + if (!props.disabled) { + onClick?.(e); + onInnerChecked(!innerChecked); + } + }; - const handleClose = (e) => { - e.stopPropagation(); - if (!props.disabled) { - onClose?.({ e }); - } - }; + const handleClose = (e) => { + e.stopPropagation(); + if (!props.disabled) { + onClose?.({ e }); + } + }; - return ( - - {icon && {icon}} - {childNode} - {props.closable && ( - - - - )} - - ); - }), -); + return ( + + {icon && {icon}} + {childNode} + {props.closable && ( + + + + )} + + ); +}); -export default TagCheck; +export default CheckTag; diff --git a/src/tag/Tag.tsx b/src/tag/Tag.tsx index 6b5c67b4..087f9448 100644 --- a/src/tag/Tag.tsx +++ b/src/tag/Tag.tsx @@ -1,5 +1,5 @@ import classNames from 'classnames'; -import React, { forwardRef, memo } from 'react'; +import React, { forwardRef } from 'react'; import { Icon } from 'tdesign-icons-react'; import parseTNode from 'tdesign-mobile-react/_util/parseTNode'; import { StyledProps } from 'tdesign-mobile-react/common'; @@ -10,83 +10,82 @@ import { TdTagProps } from './type'; export interface TagProps extends TdTagProps, StyledProps { } -const Tag = memo( - forwardRef((originProps, ref) => { - const props = useDefaultProps(originProps, tagDefaultProps) - const { - className, - style, - closable, - content, - disabled, - icon, - maxWidth, - children, - shape, - size, - theme, - variant, - onClick, - onClose, - ...otherProps - } = props; +const Tag = forwardRef((originProps, ref) => { + const props = useDefaultProps(originProps, tagDefaultProps) + const { + className, + style, + closable, + content, + disabled, + icon, + maxWidth, + children, + shape, + size, + theme, + variant, + onClick, + onClose, + ...otherProps + } = props; - const { classPrefix } = useConfig(); - const baseClass = `${classPrefix}-tag`; + const { classPrefix } = useConfig(); + const baseClass = `${classPrefix}-tag`; - const tagClassNames = classNames( - `${baseClass}`, - `${baseClass}--${theme}`, - `${baseClass}--${shape}`, - `${baseClass}--${variant}`, - `${baseClass}--${size}`, - { - [`${classPrefix}-is-closable ${baseClass}--closable`]: closable, - [`${classPrefix}-is-disabled ${baseClass}--disabled`]: disabled, - }, - className, - ); + const tagClassNames = classNames( + `${baseClass}`, + `${baseClass}--${theme}`, + `${baseClass}--${shape}`, + `${baseClass}--${variant}`, + `${baseClass}--${size}`, + { + [`${classPrefix}-is-closable ${baseClass}--closable`]: closable, + [`${classPrefix}-is-disabled ${baseClass}--disabled`]: disabled, + }, + className, + ); - const tagStyle = { - ...style, - maxWidth: typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth, - }; + const tagStyle = { + ...style, + maxWidth: typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth, + }; - const handleClose = (e) => { - e.stopPropagation(); - if (!props.disabled) { - onClose?.({ e }); - } - }; + const handleClose = (e) => { + e.stopPropagation(); + if (!props.disabled) { + onClose?.({ e }); + } + }; - const handleClick = (e) => { - if (disabled) { - return; - } - onClick?.({ e }); - }; + const handleClick = (e) => { + if (disabled) { + return; + } + onClick?.({ e }); + }; - const ChildNode = parseTNode(content) || parseTNode(children); + const ChildNode = parseTNode(content) || parseTNode(children); - return ( - - {icon && {icon}} - {ChildNode} - {props.closable && ( - - - - )} - - ) - })); + return ( + + {icon && {icon}} + {ChildNode} + {props.closable && ( + + + + )} + + ) +}); export default Tag;