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

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

import React, { useState } from 'react';
import { SetupDetailLayout_defaultProps, SetupHeader_defaultProps, SetupContent_defaultProps, SetupFooter_defaultProps } from "./props/defaultProps";
import { SetupDetailLayout_propTypes, SetupHeader_propTypes, SetupContent_propTypes, SetupFooter_propTypes } from "./props/propTypes";
import { Container, Box } from '@zohodesk/components/es/v1/Layout';
import { Icon } from '@zohodesk/icons';
import style from "../../../layout/SetupDetailLayout/SetupDetailLayout.module.css";
export default function SetupDetailLayout(props) {
  let {
    children,
    needHelpInfo,
    getHelpInfo,
    helpInfoTitle,
    dataId,
    i18nKeys
  } = props;
  const {
    closeText = 'Close'
  } = i18nKeys;
  const [isHelpInfoOpen, setHelpInfoOpen] = useState(false);

  function toggleHelpInfo() {
    setHelpInfoOpen(!isHelpInfoOpen);
  }

  return /*#__PURE__*/React.createElement(Container, {
    isScrollAttribute: true,
    dataId: dataId
  }, React.Children.map(children, child => {
    if (child && child.type == SetupHeader) {
      return /*#__PURE__*/React.cloneElement(child, {
        openHelpInfo: toggleHelpInfo,
        needHelpInfo: needHelpInfo
      });
    }

    return child;
  }), getHelpInfo ? /*#__PURE__*/React.createElement(Box, {
    className: `${style.popup} ${isHelpInfoOpen ? style.open : style.close}`,
    dataId: `${dataId}_infobox`
  }, /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Container, {
    alignBox: "row",
    align: "vertical",
    className: style.infoHeader
  }, /*#__PURE__*/React.createElement(Box, {
    className: style.infoIcon
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "ZD-info31"
  })), /*#__PURE__*/React.createElement(Box, {
    flexible: true,
    className: style.infoText
  }, helpInfoTitle), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement("span", {
    onClick: toggleHelpInfo,
    className: style.infoClose,
    "data-title": closeText,
    "data-id": `${dataId}_close`,
    "data-test-id": `${dataId}_close`
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "ZD-close"
  }))))), /*#__PURE__*/React.createElement(Box, {
    flexible: true,
    scroll: "vertical",
    className: style.infoFooter
  }, getHelpInfo()))) : null);
}
SetupDetailLayout.propTypes = SetupDetailLayout_propTypes;
SetupDetailLayout.defaultProps = SetupDetailLayout_defaultProps;
export function SetupHeader(props) {
  let {
    title,
    needBack,
    onBackClick,
    openHelpInfo,
    needHelpInfo,
    needHelpInfoWrapper,
    getLeftPlaceHolder,
    getRightPlaceHolder,
    leftClassName,
    rightClassName,
    isCustomizedHeader,
    headerCustomStyle,
    dataId,
    i18nKeys
  } = props;
  const {
    infoText = 'Help',
    backText = 'Back'
  } = i18nKeys;
  return /*#__PURE__*/React.createElement(Box, {
    className: isCustomizedHeader === true ? headerCustomStyle : style.header,
    dataId: dataId
  }, /*#__PURE__*/React.createElement(Container, {
    alignBox: "row",
    align: "vertical"
  }, /*#__PURE__*/React.createElement(Box, {
    className: style.back
  }, needBack ? /*#__PURE__*/React.createElement("span", {
    className: style.backIcon,
    onClick: onBackClick,
    "data-title": backText,
    "data-id": `${dataId}_back`,
    "data-test-id": `${dataId}_back`
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "ZD-back"
  })) : null), /*#__PURE__*/React.createElement(Box, {
    flexible: !getLeftPlaceHolder && !getRightPlaceHolder ? true : false,
    className: style.title,
    dataId: `${dataId}_title`
  }, title), getLeftPlaceHolder ? /*#__PURE__*/React.createElement(Box, {
    flexible: true,
    shrink: true,
    adjust: getRightPlaceHolder ? true : false,
    className: leftClassName
  }, /*#__PURE__*/React.createElement(Container, {
    align: "vertical",
    alignBox: "row"
  }, getLeftPlaceHolder())) : null, getRightPlaceHolder ? /*#__PURE__*/React.createElement(Box, {
    flexible: true,
    shrink: true,
    adjust: getLeftPlaceHolder ? true : false,
    className: rightClassName
  }, /*#__PURE__*/React.createElement(Container, {
    align: "vertical",
    alignBox: "row",
    className: style.rightPanel
  }, getRightPlaceHolder())) : null, needHelpInfo ? /*#__PURE__*/React.createElement(Box, null, needHelpInfoWrapper ? /*#__PURE__*/React.createElement("span", {
    className: style.helpInfoCont
  }, /*#__PURE__*/React.createElement("span", {
    className: style.helpInfo,
    onClick: openHelpInfo,
    "data-title": infoText,
    "data-id": `${dataId}_info`,
    "data-test-id": `${dataId}_info`
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "ZD-info31"
  }))) : /*#__PURE__*/React.createElement("span", {
    className: `${style.helpInfo} ${style.mr15}`,
    onClick: openHelpInfo,
    "data-title": infoText,
    "data-id": `${dataId}_info`,
    "data-test-id": `${dataId}_info`
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "ZD-info31"
  }))) : null));
}
SetupHeader.propTypes = SetupHeader_propTypes;
SetupHeader.defaultProps = SetupHeader_defaultProps;
export function SetupContent(props) {
  let {
    children,
    needPadding,
    className,
    dataId
  } = props;
  return /*#__PURE__*/React.createElement(Box, {
    flexible: true,
    scroll: "vertical",
    className: `${className ? className : ''} ${style.content} ${needPadding ? style.padding : ''} `,
    isScrollAttribute: true,
    dataId: dataId
  }, children);
}
SetupContent.propTypes = SetupContent_propTypes;
SetupContent.defaultProps = SetupContent_defaultProps;
export function SetupFooter(props) {
  let {
    children,
    dataId
  } = props;
  return /*#__PURE__*/React.createElement(Box, {
    dataId: dataId
  }, children);
}
SetupFooter.propTypes = SetupFooter_propTypes;
SetupFooter.defaultProps = SetupFooter_defaultProps;