-
Notifications
You must be signed in to change notification settings - Fork 66
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
raylotan
committed
Aug 14, 2024
1 parent
677392f
commit 1f1c85e
Showing
27 changed files
with
2,284 additions
and
383 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,93 +1,92 @@ | ||
| import React, { useCallback, forwardRef } from 'react'; | ||
| import classNames from 'classnames'; | ||
| import React, { forwardRef, memo } from 'react'; | ||
| import { Icon } from 'tdesign-icons-react'; | ||
| import noop from '../_util/noop'; | ||
| import { TdTagProps } from './type'; | ||
| import parseTNode from 'tdesign-mobile-react/_util/parseTNode'; | ||
| import { StyledProps } from 'tdesign-mobile-react/common'; | ||
| import useDefaultProps from 'tdesign-mobile-react/hooks/useDefaultProps'; | ||
| import useConfig from '../_util/useConfig'; | ||
| import { tagDefaultProps } from './defaultProps'; | ||
| import { TdTagProps } from './type'; | ||
|
|
||
| export interface TagProps extends TdTagProps { | ||
| className: string; | ||
| style: object; | ||
| } | ||
|
|
||
| const Tag = forwardRef<HTMLDivElement, TagProps>((props, ref) => { | ||
| const { | ||
| className = '', | ||
| style = {}, | ||
| closable = false, | ||
| content = null, | ||
| disabled = false, | ||
| icon = undefined, | ||
| maxWidth, | ||
| children = '', | ||
| shape = 'square', | ||
| size = 'medium', | ||
| theme = 'default', | ||
| variant = 'dark', | ||
| onClick = noop, | ||
| onClose = noop, | ||
| ...other | ||
| } = props; | ||
| export interface TagProps extends TdTagProps, StyledProps { } | ||
|
|
||
| const { classPrefix } = useConfig(); | ||
| const baseClass = `${classPrefix}-tag`; | ||
| const Tag = memo( | ||
| forwardRef<HTMLDivElement, TagProps>((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 tagClassNames = classNames( | ||
| `${baseClass}`, | ||
| `${baseClass}--theme-${theme}`, | ||
| `${baseClass}--shape-${shape}`, | ||
| `${baseClass}--variant-${variant}`, | ||
| `${baseClass}--size-${size}`, | ||
| { | ||
| [`${classPrefix}-is-closable ${baseClass}--closable`]: closable, | ||
| [`${classPrefix}-is-disabled ${baseClass}--disabled`]: disabled, | ||
| }, | ||
| className, | ||
| ); | ||
| const { classPrefix } = useConfig(); | ||
| const baseClass = `${classPrefix}-tag`; | ||
|
|
||
| const tagStyle = { | ||
| ...style, | ||
| maxWidth: typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth, | ||
| }; | ||
| 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 getRenderContent = useCallback(() => { | ||
| const contentType = typeof content; | ||
| if (contentType === 'string' || contentType === 'number') { | ||
| return content; | ||
| } | ||
| // if (contentType === 'function') { | ||
| // return content(); | ||
| // } | ||
| const tagStyle = { | ||
| ...style, | ||
| maxWidth: typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth, | ||
| }; | ||
|
|
||
| return content; | ||
| }, [content]); | ||
| const handleClose = (e) => { | ||
| e.stopPropagation(); | ||
| if (!props.disabled) { | ||
| onClose?.({ e }); | ||
| } | ||
| }; | ||
|
|
||
| function onClickClose(e) { | ||
| if (disabled) { | ||
| return; | ||
| } | ||
| e.stopPropagation(); | ||
| onClose({ e }); | ||
| } | ||
| const handleClick = (e) => { | ||
| if (disabled) { | ||
| return; | ||
| } | ||
| onClick?.({ e }); | ||
| }; | ||
|
|
||
| const handleClick = (e) => { | ||
| if (disabled) { | ||
| return; | ||
| } | ||
| onClick({ e }); | ||
| }; | ||
| const ChildNode = parseTNode(content) || parseTNode(children); | ||
|
|
||
| return ( | ||
| <span className={tagClassNames} style={tagStyle} onClick={handleClick} ref={ref} {...other}> | ||
| <span className={`${baseClass}__icon`}>{icon}</span> | ||
| <span className={`${baseClass}__text`}>{getRenderContent() || children}</span> | ||
| {closable ? ( | ||
| <span className={`${baseClass}__icon-close`} onClick={onClickClose}> | ||
| <Icon name="close" /> | ||
| </span> | ||
| ) : null} | ||
| </span> | ||
| ); | ||
| }); | ||
| return ( | ||
| <span | ||
| className={tagClassNames} | ||
| style={tagStyle} | ||
| aria-disabled={props.disabled} | ||
| role="button" | ||
| onClick={handleClick} | ||
| ref={ref} | ||
| {...otherProps} | ||
| > | ||
| {icon && <span className={`${baseClass}__icon`}>{icon}</span>} | ||
| <span className={`${baseClass}__text`}>{ChildNode}</span> | ||
| {props.closable && ( | ||
| <span className={`${baseClass}__icon-close`} onClick={handleClose}> | ||
| <Icon name="close" /> | ||
| </span> | ||
| )} | ||
| </span> | ||
| ) | ||
| })); | ||
|
|
||
| export default React.memo(Tag); | ||
| export default Tag; |
Oops, something went wrong.