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 | 1x 1x 1x 1x 1x 1x 1x | import React, { Component } from 'react';
import { ListLayout_defaultProps } from './props/defaultProps';
import { ListLayout_propTypes, Column_propTypes } from './props/propTypes';
import { Container, Box } from '@zohodesk/components/lib/Layout';
import style from './ListLayout.module.css';
export default class ListLayout extends Component {
constructor(props) {
super(props);
}
render() {
let {
children,
className,
needHover,
align,
view,
containerClass,
isActive,
onClick,
onMouseLeave,
dataId,
dataTitle,
a11y,
isHovered,
onMouseEnter,
needPointer,
isKeyboardActive
} = this.props;
let { role = 'listitem', ariaLabel, ariaPosinset, ariaSetsize } = a11y;
return (
<div
className={`${style.container} ${containerClass} ${needHover ? style.listHover : ''} ${
isActive ? style.active : ''
} ${style[view]} ${onClick && needPointer ? style.cursorPointer : ''} ${isHovered ? style.hoveredStyle : ''} ${
isKeyboardActive ? style.keyboardActive : ''
} `}
onClick={onClick}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
data-id={dataId}
data-test-id={dataId}
data-title={dataTitle}
tabIndex={onClick ? '0' : null}
role={role}
data-a11y-inset-focus={true}
aria-label={ariaLabel}
aria-setsize={ariaSetsize}
aria-posinset={ariaPosinset}
>
<Container alignBox='row' align={align} className={`${style.innerContainer} ${className ? className : ''}`}>
{children}
</Container>
</div>
);
}
}
ListLayout.propTypes = ListLayout_propTypes;
ListLayout.defaultProps = ListLayout_defaultProps;
export class Column extends Component {
constructor(props) {
super(props);
}
render() {
let { children, className } = this.props;
return (
<Box className={`${className ? className : ''}`} {...this.props}>
{children}
</Box>
);
}
}
Column.propTypes = Column_propTypes;
// if (__DOCS__) {
// ListLayout.docs = {
// folderName: 'List',
// componentGroup: 'ListLayout'
// };
// }
|