@zohodesk/dot/es/list/ListLayout/ListLayout.js

In this Library, we Provide Some Basic Components to Build Your Application

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/es/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 /*#__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 class Column extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    let {
      children,
      className
    } = this.props;
    return /*#__PURE__*/React.createElement(Box, {
      className: `${className ? className : ''}`,
      ...this.props
    }, children);
  }

}
Column.propTypes = Column_propTypes; // if (__DOCS__) {
//   ListLayout.docs = {
//     folderName: 'List',
//     componentGroup: 'ListLayout'
//   };
// }