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 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 2x 2x | /**** Libraries ****/
import React from 'react';
import { defaultProps } from './props/defaultProps';
import { propTypes } from './props/propTypes';
import { Container, Box } from '@zohodesk/components/lib/Layout';
/**** Components ****/
import { Icon } from '@zohodesk/icons';
import CssProvider from '@zohodesk/components/lib/Provider/CssProvider';
/**** CSS ****/
import style from './StatusListItem.module.css';
export default class StatusListItem extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
this.getRef = this.getRef.bind(this);
this.handleMouseEnter = this.handleMouseEnter.bind(this);
}
getRef(ele) {
this.ele = ele;
let { index, getRef, id } = this.props;
getRef && getRef(ele, index, id);
}
handleClick(e) {
let { onClick, id, value, index } = this.props;
onClick && onClick(id, value, index, e);
}
handleMouseEnter(e) {
let { onMouseEnter, id, value, index } = this.props;
onMouseEnter && onMouseEnter(id, value, index, e);
}
render() {
let {
size,
active,
highlight,
value,
autoHover,
palette,
title,
disableTitle,
needTick,
isLink,
href,
target,
needBorder,
isDisabled,
bulletColor,
a11y,
needMultiLineText,
customClass,
children
} = this.props;
let options = {};
let { role, ariaSelected, ariaHidden = true, ariaLabel, insetFocus = true } = a11y;
Iif (isLink) {
options.href = href;
options.target = `_${target}`;
}
return (
<Container
role={role}
aria-selected={ariaSelected}
aria-label={ariaLabel}
data-a11y-inset-focus={insetFocus}
isCover={false}
align='baseline'
alignBox='row'
className={`${style.list} ${style[size]} ${style[palette]} ${
active ? style.active : highlight && !isDisabled ? style.hover : ''
} ${autoHover && !isDisabled ? style.effect : ''} ${needTick ? style.withTick : ''} ${
isDisabled ? CssProvider('isDisable') : ''
} ${needBorder ? style.withBorder : ''} ${customClass}`}
dataId={String(value).replace("'", '_')}
onClick={!isDisabled && this.handleClick}
onMouseEnter={this.handleMouseEnter}
eleRef={this.getRef}
tagName={isLink ? 'a' : 'li'}
data-title={isDisabled ? disableTitle : null}
tabindex={isDisabled ? '-1' : '0'}
{...options}
{...a11y}
>
<Box className={`${style.statusType} ${style[bulletColor]}`} />
<Box flexible shrink>
<Container alignBox='row' align={needMultiLineText ? 'top' : 'vertical'}>
<Box data-title={isDisabled ? null : title} shrink className={needMultiLineText ? style.multiLineValue : style.value}>{value}</Box>
<Box>{children && children}</Box>
</Container>
</Box>
{needTick && active ? (
<div className={style.tickIcon} aria-hidden={ariaHidden}>
<Icon name='ZD-ticknew' size='8' />
</div>
) : null}
</Container>
);
}
}
StatusListItem.defaultProps = defaultProps;
StatusListItem.propTypes = propTypes;
// if (__DOCS__) {
// StatusListItem.docs = {
// componentGroup: 'StatusListItem',
// folderName: 'List'
// };
// }
|