@zohodesk/dot/es/v1/layout/SubtabLayout/SubtabLayout.js

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

import React from 'react';
import { SubtabHeader_propTypes, SubtabFooter_propTypes, SubtabContent_propTypes, SubtabLayout_propTypes } from "./props/propTypes";
import { SubtabHeader_defaultProps, SubtabFooter_defaultProps, SubtabContent_defaultProps, SubtabLayout_defaultProps } from "./props/defaultProps";
import { Container, Box } from '@zohodesk/components/es/v1/Layout';
import { Card, CardHeader, CardContent } from '@zohodesk/components/es/v1/Card';
import PlusIcon from "../../PlusIcon/PlusIcon";
import style from "../../../layout/SubtabLayout/SubtabLayout.module.css";
export function SubtabHeader(props) {
  let {
    onAdd,
    getLeftPlaceHolder,
    title,
    label,
    getRightPlaceHolder,
    type,
    leftClassName,
    rightClassName,
    className,
    needBorder,
    needShadow,
    needPlusIconLine,
    children,
    dataId,
    isPeekView
  } = props;
  return /*#__PURE__*/React.createElement(CardHeader, {
    customClass: `${style.tabHead} ${needShadow ? style.shadowStyle : ''} ${needBorder ? `${style[type]}_borderStyle` : ''}`
  }, /*#__PURE__*/React.createElement(Container, {
    alignBox: "row",
    className: ` ${className} ${isPeekView ? `${style[type]}_peek` : style[type]}`,
    align: "vertical"
  }, onAdd || children ? /*#__PURE__*/React.createElement(Box, {
    className: `${style.left} ${needPlusIconLine ? style.plusIconLine : ''}`
  }, onAdd ? /*#__PURE__*/React.createElement(PlusIcon, {
    dataId: dataId,
    onClick: onAdd
  }) : children) : null, title ? /*#__PURE__*/React.createElement(Box, {
    className: `${style.title} ${onAdd ? style.cursor : ''}`,
    onClick: onAdd ? onAdd : null
  }, title) : null, getLeftPlaceHolder && /*#__PURE__*/React.createElement(Box, {
    flexible: true,
    shrink: true,
    adjust: getRightPlaceHolder ? true : false,
    className: leftClassName
  }, label ? /*#__PURE__*/React.createElement("div", {
    className: style.label
  }, label) : null, getLeftPlaceHolder), getRightPlaceHolder && /*#__PURE__*/React.createElement(Box, {
    flexible: true,
    shrink: true,
    adjust: getLeftPlaceHolder ? true : false,
    className: rightClassName
  }, /*#__PURE__*/React.createElement(Container, {
    alignBox: "row",
    align: "vertical",
    className: style.aside
  }, getRightPlaceHolder))));
}
SubtabHeader.propTypes = SubtabHeader_propTypes;
SubtabHeader.defaultProps = SubtabHeader_defaultProps;
export function SubtabFooter(props) {
  let {
    isPeekView,
    getRightFooterPlaceHolder,
    dataId,
    children,
    className,
    leftClassName,
    rightClassName,
    size,
    needPadding,
    type
  } = props;
  return /*#__PURE__*/React.createElement(Container, {
    alignBox: "row",
    align: "vertical",
    className: ` ${style.footer}  ${needPadding ? isPeekView ? `${style[type]}_peekFooter` : `${style[type]}_detailFooter` : ''} ${style[size]} ${className}`,
    dataId: dataId
  }, children ? /*#__PURE__*/React.createElement(Box, {
    flexible: true,
    shrink: true,
    className: leftClassName
  }, children) : null, getRightFooterPlaceHolder ? /*#__PURE__*/React.createElement(Box, {
    flexible: true,
    shrink: true,
    className: rightClassName
  }, getRightFooterPlaceHolder) : null);
}
SubtabFooter.propTypes = SubtabFooter_propTypes;
SubtabFooter.defaultProps = SubtabFooter_defaultProps;
export function SubtabContent(props) {
  let {
    children,
    scroll,
    className,
    eleRef,
    dataId,
    onScroll
  } = props;
  return /*#__PURE__*/React.createElement(CardContent, {
    scroll: scroll,
    isScrollAttribute: true,
    onScroll: onScroll,
    customClass: className ? className : '',
    eleRef: eleRef,
    dataId: dataId
  }, children);
}
SubtabContent.propTypes = SubtabContent_propTypes;
SubtabContent.defaultProps = SubtabContent_defaultProps;
export default function SubtabLayout(props) {
  let {
    children,
    dataId
  } = props;
  return /*#__PURE__*/React.createElement(Card, {
    isScrollAttribute: true,
    dataId: dataId,
    ...props,
    childTypes: {
      cardHeader: SubtabHeader,
      cardContent: SubtabContent
    }
  }, children);
}
SubtabLayout.defaultProps = SubtabLayout_defaultProps;
SubtabLayout.propTypes = SubtabLayout_propTypes;