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

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

import React, { Component } 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/Layout';
import { Icon } from '@zohodesk/icons';
import style from "./SetupDetailLayout.module.css";
export default class SetupDetailLayout extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isHelpInfoOpen: false
    };
    this.toggleHelpInfo = this.toggleHelpInfo.bind(this);
  }

  toggleHelpInfo() {
    let {
      isHelpInfoOpen
    } = this.state;
    this.setState({
      isHelpInfoOpen: !isHelpInfoOpen
    });
  }

  render() {
    let {
      isHelpInfoOpen
    } = this.state;
    let {
      children,
      needHelpInfo,
      getHelpInfo,
      helpInfoTitle,
      dataId,
      i18nKeys
    } = this.props;
    const {
      closeText = 'Close'
    } = i18nKeys;
    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: this.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: this.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; // if (__DOCS__) {
//   SetupDetailLayout.docs = {
//     componentGroup: 'Template'
//   };
// }

export class SetupHeader extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    let {
      title,
      needBack,
      onBackClick,
      openHelpInfo,
      needHelpInfo,
      needHelpInfoWrapper,
      getLeftPlaceHolder,
      getRightPlaceHolder,
      leftClassName,
      rightClassName,
      isCustomizedHeader,
      headerCustomStyle,
      dataId,
      i18nKeys
    } = this.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 class SetupContent extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    let {
      children,
      needPadding,
      className,
      dataId
    } = this.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 class SetupFooter extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    let {
      children,
      dataId
    } = this.props;
    return /*#__PURE__*/React.createElement(Box, {
      dataId: dataId
    }, children);
  }

}
SetupFooter.propTypes = SetupFooter_propTypes;
SetupFooter.defaultProps = SetupFooter_defaultProps;