|  |  |  | 
|---|
|  |  |  | import * as React from 'react'; | 
|---|
|  |  |  | import { Tooltip } from 'antd'; | 
|---|
|  |  |  | import classNames from 'classnames'; | 
|---|
|  |  |  | import * as AntdIcons from '@ant-design/icons'; | 
|---|
|  |  |  | import type { ThemeType } from './index'; | 
|---|
|  |  |  | import styles from './style.less'; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const allIcons: { | 
|---|
|  |  |  | [key: string]: any; | 
|---|
|  |  |  | } = AntdIcons; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | export interface CopyableIconProps { | 
|---|
|  |  |  | name: string; | 
|---|
|  |  |  | isNew: boolean; | 
|---|
|  |  |  | theme: ThemeType; | 
|---|
|  |  |  | justCopied: string | null; | 
|---|
|  |  |  | onSelect: (type: string, text: string) => any; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const CopyableIcon: React.FC<CopyableIconProps> = ({ | 
|---|
|  |  |  | name, | 
|---|
|  |  |  | justCopied, | 
|---|
|  |  |  | onSelect, | 
|---|
|  |  |  | theme, | 
|---|
|  |  |  | }) => { | 
|---|
|  |  |  | const className = classNames({ | 
|---|
|  |  |  | copied: justCopied === name, | 
|---|
|  |  |  | [theme]: !!theme, | 
|---|
|  |  |  | }); | 
|---|
|  |  |  | return ( | 
|---|
|  |  |  | <li className={className} | 
|---|
|  |  |  | onClick={() => { | 
|---|
|  |  |  | if (onSelect) { | 
|---|
|  |  |  | onSelect(theme, name); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }}> | 
|---|
|  |  |  | <Tooltip title={name}> | 
|---|
|  |  |  | {React.createElement(allIcons[name], { className: styles.anticon })} | 
|---|
|  |  |  | </Tooltip> | 
|---|
|  |  |  | {/* <span className={styles.anticonClass}> | 
|---|
|  |  |  | <Badge dot={isNew}>{name}</Badge> | 
|---|
|  |  |  | </span> */} | 
|---|
|  |  |  | </li> | 
|---|
|  |  |  | ); | 
|---|
|  |  |  | }; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | export default CopyableIcon; | 
|---|
|  |  |  | import * as React from 'react'; | 
|---|
|  |  |  | import { Tooltip } from 'antd'; | 
|---|
|  |  |  | import classNames from 'classnames'; | 
|---|
|  |  |  | import * as AntdIcons from '@ant-design/icons'; | 
|---|
|  |  |  | import type { ThemeType } from './index'; | 
|---|
|  |  |  | import styles from './style.less'; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const allIcons: { | 
|---|
|  |  |  | [key: string]: any; | 
|---|
|  |  |  | } = AntdIcons; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | export interface CopyableIconProps { | 
|---|
|  |  |  | name: string; | 
|---|
|  |  |  | isNew: boolean; | 
|---|
|  |  |  | theme: ThemeType; | 
|---|
|  |  |  | justCopied: string | null; | 
|---|
|  |  |  | onSelect: (type: string, text: string) => any; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const CopyableIcon: React.FC<CopyableIconProps> = ({ | 
|---|
|  |  |  | name, | 
|---|
|  |  |  | justCopied, | 
|---|
|  |  |  | onSelect, | 
|---|
|  |  |  | theme, | 
|---|
|  |  |  | }) => { | 
|---|
|  |  |  | const className = classNames({ | 
|---|
|  |  |  | copied: justCopied === name, | 
|---|
|  |  |  | [theme]: !!theme, | 
|---|
|  |  |  | }); | 
|---|
|  |  |  | return ( | 
|---|
|  |  |  | <li className={className} | 
|---|
|  |  |  | onClick={() => { | 
|---|
|  |  |  | if (onSelect) { | 
|---|
|  |  |  | onSelect(theme, name); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }}> | 
|---|
|  |  |  | <Tooltip title={name}> | 
|---|
|  |  |  | {React.createElement(allIcons[name], { className: styles.anticon })} | 
|---|
|  |  |  | </Tooltip> | 
|---|
|  |  |  | {/* <span className={styles.anticonClass}> | 
|---|
|  |  |  | <Badge dot={isNew}>{name}</Badge> | 
|---|
|  |  |  | </span> */} | 
|---|
|  |  |  | </li> | 
|---|
|  |  |  | ); | 
|---|
|  |  |  | }; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | export default CopyableIcon; | 
|---|