@zohodesk/dot
Version:
In this Library, we Provide Some Basic Components to Build Your Application
68 lines • 2.02 kB
JavaScript
import React from 'react';
import { ListLayout_defaultProps } from "./props/defaultProps";
import { ListLayout_propTypes, Column_propTypes } from "./props/propTypes";
import { Container, Box } from '@zohodesk/components/es/v1/Layout';
import style from "../../../list/ListLayout/ListLayout.module.css";
export default function ListLayout(props) {
let {
children,
className,
needHover,
align,
view,
containerClass,
isActive,
onClick,
onMouseLeave,
dataId,
dataTitle,
a11y,
isHovered,
onMouseEnter,
needPointer,
isKeyboardActive
} = props;
let {
role = 'listitem',
ariaLabel,
ariaPosinset,
ariaSetsize
} = a11y;
return /*#__PURE__*/React.createElement("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
}, /*#__PURE__*/React.createElement(Container, {
alignBox: "row",
align: align,
className: `${style.innerContainer} ${className ? className : ''}`
}, children));
}
ListLayout.propTypes = ListLayout_propTypes;
ListLayout.defaultProps = ListLayout_defaultProps;
export function Column(props) {
let {
children,
className
} = props;
return /*#__PURE__*/React.createElement(Box, {
className: `${className ? className : ''}`,
...props
}, children);
}
Column.propTypes = Column_propTypes; // if (__DOCS__) {
// ListLayout.docs = {
// folderName: 'List',
// componentGroup: 'ListLayout'
// };
// }