Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 | 33x 33x 33x 33x 33x 33x 33x 33x 33x 33x 33x 8x 8x | import React from 'react';
import { defaultProps } from './props/defaultProps';
import { propTypes } from './props/propTypes';
import { Icon } from '@zohodesk/icons';
import { Container } from '@zohodesk/components/lib/Layout';
import btnStyle from '@zohodesk/components/lib/semantic/Button/semanticButton.module.css';
import RippleEffect from '@zohodesk/components/lib/RippleEffect/RippleEffect';
import style from './IconButton.module.css';
export default class IconButton extends React.Component {
constructor(props) {
super(props);
this.state = { isPressed: false };
this.handleToggle = this.handleToggle.bind(this);
this.triggerClick = this.triggerClick.bind(this);
this.triggerMouseDown = this.triggerMouseDown.bind(this);
this.triggerMouseOver = this.triggerMouseOver.bind(this);
this.onBlur = this.onBlur.bind(this);
}
handleToggle(e) {
if (e.key === ' ' || e.key === 'Enter' || e.key === 'Spacebar') {
e.preventDefault();
// this.triggerClick(e);
this.triggerMouseDown(e);
}
}
triggerClick(e) {
let { onClick, isDisabled } = this.props;
!isDisabled ? (onClick && onClick(e), this.setState({ isPressed: true })) : null;
}
triggerMouseOver(e) {
let { onMouseOver, isDisabled } = this.props;
!isDisabled ? (onMouseOver && onMouseOver(e), this.setState({ isPressed: true })) : null;
}
triggerMouseDown(e) {
let { onMouseDown, isDisabled } = this.props;
!isDisabled ? (onMouseDown && onMouseDown(e), this.setState({ isPressed: true })) : null;
}
onBlur(e) {
let { isDisabled } = this.props;
!isDisabled ? this.setState({ isPressed: false }) : null;
}
render() {
let {
palette,
iconSize,
size,
iconName,
className,
iconClass,
dataId,
dataSelectorId,
eleRef,
isActive,
tourId,
isDisabled,
children,
hoverType,
title,
isBold,
isNeedEffect,
needButtonTag,
a11y,
dataIsHtml,
customProps
} = this.props;
let { isPressed } = this.state;
let { ariaHaspopup, ariaExpanded, ariaLabel, ariaControls, ariaLabelledby } = a11y;
return (
<RippleEffect
palette={palette}
isActive={isActive}
hoverType={hoverType}
isDisabled={isDisabled}
isNeedEffect={isNeedEffect}
>
<Container
aria-label={ariaLabel}
aria-haspopup={ariaHaspopup}
aria-expanded={ariaExpanded}
aria-controls={ariaControls}
aria-labelledby={ariaLabelledby}
tagName={needButtonTag ? 'button' : 'div'}
isInline
tourId={tourId}
align='both'
isCover={false}
className={`${needButtonTag ? btnStyle.buttonReset : ''} ${style[size]} ${style.wrapper} ${className || ''} ${
isActive ? style[`${palette}_active`] : style[palette]
}`}
dataId={dataId}
dataSelectorId={dataSelectorId}
onClick={this.triggerClick}
data-title={title}
data-ishtml={dataIsHtml}
eleRef={eleRef}
onMouseDown={this.triggerMouseDown}
onMouseEnter={this.triggerMouseOver}
aria-pressed={isPressed}
onKeyDown={this.handleToggle}
onFocus={this.triggerMouseOver}
onBlur={this.onBlur}
disabled={isDisabled}
{...customProps}
>
{iconName ? <Icon isBold={isBold} size={iconSize} name={iconName} iconClass={iconClass} /> : null}
{children ? children : null}
</Container>
</RippleEffect>
);
}
}
IconButton.propTypes = propTypes;
IconButton.defaultProps = defaultProps;
// if (__DOCS__) {
// IconButton.docs = {
// componentGroup: 'Atom'
// };
// }
|