@zohodesk/dot 1.3.0 → 1.3.2

package/es/v1/layout/SetupDetailLayout/SetupDetailLayout.js

@@ -1,217 +1,174 @@
-import React, { Component } from 'react';
+import React, { useState } from 'react';
 import { SetupDetailLayout_defaultProps, SetupHeader_defaultProps, SetupContent_defaultProps, SetupFooter_defaultProps } from '../../../layout/SetupDetailLayout/props/defaultProps';
 import { SetupDetailLayout_propTypes, SetupHeader_propTypes, SetupContent_propTypes, SetupFooter_propTypes } from '../../../layout/SetupDetailLayout/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 class SetupDetailLayout extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isHelpInfoOpen: false
-    };
-    this.toggleHelpInfo = this.toggleHelpInfo.bind(this);
-  }
+export default function SetupDetailLayout(props) {
+  let {
+    children,
+    needHelpInfo,
+    getHelpInfo,
+    helpInfoTitle,
+    dataId,
+    i18nKeys
+  } = props;
+  const {
+    closeText = 'Close'
+  } = i18nKeys;
+  const [isHelpInfoOpen, setHelpInfoOpen] = useState(false);
 
-  toggleHelpInfo() {
-    let {
-      isHelpInfoOpen
-    } = this.state;
-    this.setState({
-      isHelpInfoOpen: !isHelpInfoOpen
-    });
+  function toggleHelpInfo() {
+    setHelpInfoOpen(!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);
-  }
+  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; // 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));
-  }
-
+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 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);
-  }
-
+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 class SetupFooter extends Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    let {
-      children,
-      dataId
-    } = this.props;
-    return /*#__PURE__*/React.createElement(Box, {
-      dataId: dataId
-    }, children);
-  }
-
+export function SetupFooter(props) {
+  let {
+    children,
+    dataId
+  } = props;
+  return /*#__PURE__*/React.createElement(Box, {
+    dataId: dataId
+  }, children);
 }
 SetupFooter.propTypes = SetupFooter_propTypes;
 SetupFooter.defaultProps = SetupFooter_defaultProps;

package/es/v1/layout/SubtabLayout/SubtabLayout.js

@@ -7,138 +7,122 @@ 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 class SubtabHeader extends React.Component {
-  render() {
-    let {
-      onAdd,
-      getLeftPlaceHolder,
-      title,
-      label,
-      getRightPlaceHolder,
-      type,
-      leftClassName,
-      rightClassName,
-      className,
-      needBorder,
-      needShadow,
-      needPlusIconLine,
-      children,
-      dataId,
-      isPeekView
-    } = this.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))));
-  }
-
+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 class SubtabFooter extends React.Component {
-  render() {
-    let {
-      isPeekView,
-      getRightFooterPlaceHolder,
-      dataId,
-      children,
-      className,
-      leftClassName,
-      rightClassName,
-      size,
-      needPadding,
-      type
-    } = this.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);
-  }
-
+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 class SubtabContent extends React.Component {
-  render() {
-    let {
-      children,
-      scroll,
-      className,
-      eleRef,
-      dataId,
-      onScroll
-    } = this.props;
-    return /*#__PURE__*/React.createElement(CardContent, {
-      scroll: scroll,
-      isScrollAttribute: true,
-      onScroll: onScroll,
-      customClass: className ? className : '',
-      eleRef: eleRef,
-      dataId: dataId
-    }, children);
-  }
-
+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 class SubtabLayout extends React.Component {
-  render() {
-    let {
-      children,
-      dataId
-    } = this.props;
-    return /*#__PURE__*/React.createElement(Card, _extends({
-      isScrollAttribute: true,
-      dataId: dataId
-    }, this.props, {
-      childTypes: {
-        cardHeader: SubtabHeader,
-        cardContent: SubtabContent
-      }
-    }), children);
-  }
-
+export default function SubtabLayout(props) {
+  let {
+    children,
+    dataId
+  } = props;
+  return /*#__PURE__*/React.createElement(Card, _extends({
+    isScrollAttribute: true,
+    dataId: dataId
+  }, props, {
+    childTypes: {
+      cardHeader: SubtabHeader,
+      cardContent: SubtabContent
+    }
+  }), children);
 }
 SubtabLayout.defaultProps = SubtabLayout_defaultProps;
-SubtabLayout.propTypes = SubtabLayout_propTypes; // if (__DOCS__) {
-//   SubtabLayout.docs = {
-//     componentGroup: 'Template'
-//   };
-// }
+SubtabLayout.propTypes = SubtabLayout_propTypes;