import './icon.scss' ; import React , { ReactNode } from "react" ; import { findDOMNode } from "react-dom" ; import { autoBind , cssNames } from "../../utils" ; import { TooltipDecoratorProps , withTooltip } from "../tooltip" ; import isNumber from "lodash/isNumber" ; export interface IconProps extends React . HTMLAttributes < any > , TooltipDecoratorProps { material ? : string ; svg ? : string ; colorful ? : boolean ; href ? : string ; size ? : string | number ; small ? : boolean ; big ? : boolean ; active ? : boolean ; interactive ? : boolean ; focusable ? : boolean ; sticker ? : boolean ; disabled ? : boolean ; } @ withTooltip export class Icon extends React . PureComponent < IconProps > { static defaultProps : IconProps = { focusable : true , } ; constructor ( props ) { super ( props ) ; autoBind ( this ) ; } get isInteractive ( ) { var { interactive , onClick , href } = this . props ; return interactive || ! ! ( onClick || href ) ; } onClick ( evt ) { if ( this . props . disabled ) { return ; } if ( this . props . onClick ) { this . props . onClick ( evt ) ; } } onKeyDown ( evt ) { switch ( evt . nativeEvent . code ) { case "Space" : case "Enter" : var icon = findDOMNode ( this ) as HTMLElement ; setTimeout ( ( ) => icon . click ( ) ) ; evt . preventDefault ( ) ; break ; } if ( this . props . onKeyDown ) { this . props . onKeyDown ( evt ) ; } } render ( ) { var { isInteractive } = this ; var { className , href , colorful , material , svg , size , small , big , disabled , sticker , active , focusable , children , tooltip , interactive : _interactive , onClick : _onClick , onKeyDown : _onKeyDown , ... elemProps } = this . props ; var iconContent ; var iconProps = { className : cssNames ( "Icon" , { svg , material , disabled , sticker , active , focusable , colorful , interactive : isInteractive , } , ! size ? { small , big } : { } , className ) , onClick : isInteractive ? this . onClick : undefined , onKeyDown : isInteractive ? this . onKeyDown : undefined , tabIndex : isInteractive && focusable && ! disabled ? 0 : undefined , style : size ? { "--size" : size + ( isNumber ( size ) ? "px" : "" ) } as React . CSSProperties : undefined , ... elemProps , } ; if ( svg ) { var svgIconText = require ( "!!raw-loader!./" + svg + ".svg" ) . default ; iconContent = < span dangerouslySetInnerHTML = { { __html : svgIconText } } />; } if ( material ) { iconContent = < span className = "material-icons" > { material } < /span>; } iconProps . children = ( < > { tooltip } { iconContent } < />); if ( href ) { return < a { ... iconProps } href = { href } / > ; } return < i { ... iconProps } / > ; } }