@zohodesk/dot 1.0.0-temp-85 → 1.0.0-temp-88

package/es/form/fields/TagsMultiSelect/TagsMultiSelect.js

@@ -3,12 +3,13 @@ import PropTypes from 'prop-types';
 import { Container, Box } from '@zohodesk/components/lib/Layout';
 import Tag from '@zohodesk/components/lib/Tag/Tag';
 import TextBoxIcon from '@zohodesk/components/lib/TextBoxIcon/TextBoxIcon';
-import DropBox from '@zohodesk/components/lib/DropBox/DropBox';
 import EmptySearch from '@zohodesk/svg/lib/svg/EmptySearch';
 import ListItem from '@zohodesk/components/lib/ListItem/ListItem';
 import Loader from '@zohodesk/svg/lib/svg/Loader';
 import DropDownSeparator from '@zohodesk/components/lib/DropDown/DropDownSeparator';
 import CommonEmptyState from '../../../emptystate/CommonEmptyState/CommonEmptyState';
+import ResponsiveDropBox from '@zohodesk/components/lib/ResponsiveDropBox/ResponsiveDropBox';
+import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
 import { findScrollEnd, stopBubbling } from '../../../utils/Common';
 import { scrollTo } from '@zohodesk/components/lib/utils/Common.js';
 import style from './TagsMultiSelect.module.css';
@@ -97,6 +98,17 @@ export default class TagsMultiSelect extends React.Component {
     this.containerRef = ele;
   }
 
+  responsiveFunc(_ref) {
+    let {
+      mediaQueryOR
+    } = _ref;
+    return {
+      tabletMode: mediaQueryOR([{
+        maxWidth: 700
+      }])
+    };
+  }
+
   render() {
     let {
       searchList,
@@ -169,7 +181,7 @@ export default class TagsMultiSelect extends React.Component {
     }, showAll ? `${i18nKeys.lessText}` : `+${tagsList.length - chipNeedToShow} ${i18nKeys.moreText}`) : null) : null, /*#__PURE__*/React.createElement(Box, {
       flexible: true,
       adjust: true,
-      shrnik: true,
+      shrink: true,
       className: style.inputWrapper
     }, /*#__PURE__*/React.createElement("span", {
       className: style.custmSpan
@@ -190,67 +202,80 @@ export default class TagsMultiSelect extends React.Component {
       },
       size: "xsmall",
       inputRef: this.textInputRef
-    }, getTextBoxChildren ? getTextBoxChildren() : null))), isPopupOpen ? /*#__PURE__*/React.createElement(DropBox, {
-      isAnimate: true,
-      isActive: isPopupReady,
-      isArrow: false,
-      getRef: getContainerRef,
-      isBoxPaddingNeed: true,
-      size: boxSize,
-      boxPosition: boxPosition,
-      isPadding: false,
-      customClass: {
-        customDropBoxWrap: style.dropdown
-      },
-      dataId: `${dataId}_dropbox`
-    }, isTagListLoading ? /*#__PURE__*/React.createElement(Container, {
-      align: "both",
-      className: style.viewpopNew
-    }, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Container, {
-      scroll: "vertical",
-      className: style.viewpopNew,
-      onScroll: this.onScroll,
-      eleRef: this.getContainerRef
-    }, searchList.length ? /*#__PURE__*/React.createElement(Box, {
-      flexible: true
-    }, searchList.map((item, index) => {
+    }, getTextBoxChildren ? getTextBoxChildren() : null))), isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
+      query: this.responsiveFunc,
+      responsiveId: "Helmet"
+    }, _ref2 => {
       let {
-        name,
-        isNew
-      } = item;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, searchList.length > 1 && isNew ? /*#__PURE__*/React.createElement(DropDownSeparator, null) : null, /*#__PURE__*/React.createElement(ListItem, {
-        key: index,
-        index: index,
-        autoHover: true,
-        value: isNew ? '' : name,
-        title: isNew ? '' : name,
-        onClick: addTag.bind(this, item),
-        needTick: true,
-        highlight: selectSearchIndex === index,
-        getRef: this.getSelectedItemRef,
-        isDisabled: listDisabled
-      }, isNew ? /*#__PURE__*/React.createElement(Container, {
-        alignBox: "row",
-        align: "vertical"
+        tabletMode
+      } = _ref2;
+      return /*#__PURE__*/React.createElement(ResponsiveDropBox, {
+        isAnimate: true,
+        isActive: isPopupReady,
+        isArrow: false,
+        getRef: getContainerRef,
+        isBoxPaddingNeed: true,
+        size: boxSize,
+        boxPosition: boxPosition,
+        isPadding: false,
+        customClass: {
+          customDropBoxWrap: style.dropdown
+        },
+        dataId: `${dataId}_dropbox`,
+        isResponsivePadding: true,
+        alignBox: "row"
       }, /*#__PURE__*/React.createElement(Box, {
-        className: style.newTagLabel
-      }, i18nKeys.newTagText, ":"), /*#__PURE__*/React.createElement(Box, {
-        shrink: true,
-        "data-title": name,
-        className: `${style.dotted} ${style.newTagText} `,
-        dataId: `${dataId}_new_tag_text`
-      }, name)) : null));
-    })) : /*#__PURE__*/React.createElement(Box, {
-      flexible: true,
-      dataId: `${dataId}_empty`
-    }, /*#__PURE__*/React.createElement(Container, {
-      className: style.searchEmpty
-    }, /*#__PURE__*/React.createElement(CommonEmptyState, {
-      title: i18nKeys.emptyTitleText,
-      description: i18nKeys.emptyDescription,
-      size: "small",
-      getEmptyState: this.emptySearchSVG
-    })))))) : null);
+        flexible: true
+      }, isTagListLoading ? /*#__PURE__*/React.createElement(Container, {
+        align: "both",
+        className: `${tabletMode ? '' : style.viewpopNew}`
+      }, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Container, {
+        scroll: "vertical",
+        className: `${tabletMode ? '' : style.viewpopNew}`,
+        onScroll: this.onScroll,
+        eleRef: this.getContainerRef
+      }, searchList.length ? /*#__PURE__*/React.createElement(Box, {
+        flexible: true,
+        shrink: true
+      }, searchList.map((item, index) => {
+        let {
+          name,
+          isNew
+        } = item;
+        return /*#__PURE__*/React.createElement(React.Fragment, null, searchList.length > 1 && isNew ? /*#__PURE__*/React.createElement(DropDownSeparator, null) : null, /*#__PURE__*/React.createElement(ListItem, {
+          key: index,
+          index: index,
+          autoHover: true,
+          value: isNew ? '' : name,
+          title: isNew ? '' : name,
+          onClick: addTag.bind(this, item),
+          needTick: true,
+          highlight: selectSearchIndex === index,
+          getRef: this.getSelectedItemRef,
+          isDisabled: listDisabled
+        }, isNew ? /*#__PURE__*/React.createElement(Container, {
+          alignBox: "row",
+          align: "vertical"
+        }, /*#__PURE__*/React.createElement(Box, {
+          className: style.newTagLabel
+        }, i18nKeys.newTagText, ":"), /*#__PURE__*/React.createElement(Box, {
+          shrink: true,
+          "data-title": name,
+          className: `${style.dotted} ${style.newTagText} `,
+          dataId: `${dataId}_new_tag_text`
+        }, name)) : null));
+      })) : /*#__PURE__*/React.createElement(Box, {
+        flexible: true,
+        dataId: `${dataId}_empty`
+      }, /*#__PURE__*/React.createElement(Container, {
+        className: style.searchEmpty
+      }, /*#__PURE__*/React.createElement(CommonEmptyState, {
+        title: i18nKeys.emptyTitleText,
+        description: i18nKeys.emptyDescription,
+        size: "small",
+        getEmptyState: this.emptySearchSVG
+      })))))));
+    }) : null);
   }
 
 }

package/es/form/fields/TagsMultiSelect/docs/TagsMultiSelect__default.docs.js

@@ -0,0 +1,77 @@
+import React from 'react';
+import TagsMultiSelect from '../TagsMultiSelect';
+import Icon from '@zohodesk/icons/lib/Icon';
+export default class TagsMultiSelect__default extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isPopupOpen: false
+    };
+    this.handleTogglePopup = this.handleTogglePopup.bind(this);
+    this.getCustomChildren = this.getCustomChildren.bind(this);
+  }
+
+  handleTogglePopup() {
+    this.setState({
+      isPopupOpen: !this.state.isPopupOpen
+    });
+  }
+
+  getCustomChildren() {
+    return /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-SE-setpracket",
+      size: "18"
+    });
+  }
+
+  render() {
+    let {
+      isPopupOpen
+    } = this.state;
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        position: 'relative'
+      }
+    }, /*#__PURE__*/React.createElement(TagsMultiSelect, {
+      addTag: () => {},
+      closeSearch: () => {},
+      deleteTag: () => {},
+      handleChange: () => {},
+      handleKeyUp: () => {},
+      isReadOnly: false,
+      name: "",
+      noMoreData: true,
+      searchList: [],
+      searchTags: () => {},
+      selectSearchIndex: "-1",
+      tagsList: [{
+        name: 'Tag1',
+        tagType: 'MANUAL',
+        id: '5853000007033049'
+      }, {
+        name: 'Tag2',
+        tagType: 'MANUAL',
+        id: '5853000007033069'
+      }],
+      handleTogglePopup: this.handleTogglePopup,
+      isPopupOpen: isPopupOpen,
+      isPopupReady: isPopupOpen,
+      i18nKeys: {
+        newTagText: 'New Tag',
+        emptyTitleText: 'OOPS',
+        emptyDescription: 'No tag available',
+        deleteText: 'Delete tag',
+        lessText: 'Less',
+        moreText: 'More'
+      },
+      getTextBoxChildren: this.getCustomChildren
+    }));
+  }
+
+}
+
+if (false) {
+  TagsMultiSelect__default.docs = {
+    componentGroup: 'TagsMultiSelect'
+  };
+}

package/es/form/fields/TagsMultiSelectField/docs/TagsMultiSelectField__default.docs.js

@@ -0,0 +1,82 @@
+import React from 'react';
+import TagsMultiSelectField from '../TagsMultiSelectField';
+import Icon from '@zohodesk/icons/lib/Icon';
+
+const TagsMultiSelectField__default = () => {
+  let value = [{
+    name: 'Tag1',
+    tagType: 'MANUAL',
+    id: '5853000007033049'
+  }, {
+    name: 'Tag2',
+    tagType: 'MANUAL',
+    id: '5853000007033069'
+  }, {
+    name: 'Tag3',
+    tagType: 'MANUAL',
+    id: '5853000007033080'
+  }];
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      margin: '20px 20px 0'
+    }
+  }, /*#__PURE__*/React.createElement(TagsMultiSelectField, {
+    ePhiData: {
+      ePhiTitle: 'ehhweh',
+      ePhiText: 'ephi',
+      ePhiStatus: true
+    },
+    fieldProperties: {
+      id: 'tag',
+      name: 'tag',
+      labelName: 'Tags MultiSelect',
+      isReadOnly: false,
+      isDisabled: false,
+      value,
+      options: [],
+      selectedValueCount: '10'
+    },
+    styleProperties: {
+      labelPalette: 'secondary'
+    },
+    i18nKeys: {
+      newTagText: 'New Tag',
+      emptyTitleText: 'OOPS',
+      emptyDescription: 'No tag available',
+      deleteText: 'Delete tag',
+      lessText: 'Less',
+      moreText: 'More'
+    },
+    actions: {
+      onAdd: (tag, event) => {
+        console.log('Add Event=====', tag);
+      },
+      onDelete: (tag, event) => {
+        console.log('Delete Event=====', tag);
+      },
+      onChange: searchValue => {
+        console.log('Value Change Event------>>', searchValue);
+      },
+      onScroll: () => {}
+    },
+    isNewNeeded: true,
+    getTextBoxChildren: () => /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-SE-setpracket",
+      size: "18"
+    })
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: '13px',
+      marginLeft: '5px',
+      color: 'var(--dot_shuttleGrey)'
+    }
+  }, "shift+t")));
+};
+
+export default TagsMultiSelectField__default;
+
+if (false) {
+  TagsMultiSelectField__default.docs = {
+    componentGroup: 'TagsMultiSelectField'
+  };
+}

package/es/form/fields/TextBoxField/docs/TextBoxField__default.docs.js

@@ -0,0 +1,45 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import TextBoxField from '../TextBoxField';
+import { Container } from '@zohodesk/components/lib/Layout';
+import Icon from '@zohodesk/icons/lib/Icon';
+export default class TextBoxField__default extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TextBoxField, {
+      labelName: "Contact Name",
+      textBoxSize: "xmedium",
+      textBoxVariant: "primary",
+      validationMessage: "Invalid Input"
+    }), /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '30px 0 10px',
+        fontFamily: 'var(--zd_semibold)'
+      }
+    }, "Children Option"), /*#__PURE__*/React.createElement(TextBoxField, {
+      labelName: "Contact Name",
+      textBoxSize: "xmedium",
+      textBoxVariant: "primary",
+      validationMessage: "Invalid Input"
+    }, /*#__PURE__*/React.createElement(Container, {
+      align: "both",
+      style: {
+        marginRight: '15px'
+      }
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-SE-setpracket",
+      size: "18"
+    }))));
+  }
+
+}
+
+if (false) {
+  TextBoxField__default.docs = {
+    componentGroup: 'Form Fields',
+    folderName: 'General'
+  };
+}

package/es/form/fields/TextEditorField/docs/TextEditorField__default.docs.js

@@ -0,0 +1,43 @@
+/*** Libraries ***/
+import React, { Component } from 'react';
+/*** Components ***/
+
+import TextEditorField from '../TextEditorField';
+import { Box } from '@zohodesk/components/lib/Layout';
+export default class TextEditorField__default extends Component {
+  constructor(props) {
+    super(props);
+    this.handleEditorStyleOptions = this.handleEditorStyleOptions.bind(this);
+  }
+
+  handleEditorStyleOptions(ZohoDeskEditor_Init, hookToOrganize) {
+    ZohoDeskEditor_Init.toolbarOrder = [['bold', 'Bold (Ctrl+B)', '#KBEditortools_txtbold', 'KBEditortools-txtbold'], ['italic', 'Italic (Ctrl+I)', '#KBEditortools_txtitalic', 'KBEditortools-txtitalic'], ['underline', 'Underline (Ctrl+U)', '#KBEditortools_txtunderline', 'KBEditortools-txtunderline']];
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TextEditorField, {
+      needEditor: false,
+      labelName: "TextArea"
+    }, /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      style: {
+        fontSize: '12px',
+        color: 'var(--dot_primary)',
+        textAlign: 'right'
+      }
+    }, "Placeholders")), /*#__PURE__*/React.createElement(TextEditorField, {
+      id: "editor",
+      labelName: "TextEditor",
+      EDITORURL: "https://js.zohostatic.com/zde/v2.2.9/js/ZohoDeskEditor.js",
+      initCallback: this.handleEditorStyleOptions,
+      loadingComponent: /*#__PURE__*/React.createElement("div", null, "Loading...")
+    }));
+  }
+
+}
+
+if (false) {
+  TextEditorField__default.docs = {
+    componentGroup: 'Fields'
+  };
+}

package/es/form/fields/TextareaField/docs/TextareaField__default.docs.js

@@ -0,0 +1,26 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import TextareaField from '../TextareaField';
+export default class TextareaField__default extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement(TextareaField, {
+      labelName: "Textarea",
+      onChange: () => {},
+      textBoxSize: "xsmall",
+      textBoxVariant: "primary",
+      validationMessage: "Invalid Input"
+    });
+  }
+
+}
+
+if (false) {
+  TextareaField__default.docs = {
+    componentGroup: 'Form Fields',
+    folderName: 'General'
+  };
+}

package/es/form/fields/ValidationMessage/docs/ValidationMessage__default.docs.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import ValidationMessage from '../ValidationMessage';
+export default class ValidationMessage__default extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ValidationMessage, {
+      text: "validation",
+      palette: "default",
+      size: "small",
+      type: "secondary",
+      tooltip: "Information"
+    }), /*#__PURE__*/React.createElement(ValidationMessage, {
+      text: "validation",
+      palette: "primary",
+      size: "small",
+      type: "secondary"
+    }), /*#__PURE__*/React.createElement(ValidationMessage, {
+      text: "validation",
+      palette: "secondary",
+      size: "small",
+      type: "secondary",
+      tooltip: "Information"
+    }), /*#__PURE__*/React.createElement(ValidationMessage, {
+      text: "validation",
+      palette: "danger",
+      size: "small",
+      type: "secondary"
+    }), /*#__PURE__*/React.createElement(ValidationMessage, {
+      text: "validation",
+      palette: "mandatory",
+      size: "small",
+      type: "secondary",
+      tooltip: "Information"
+    }), /*#__PURE__*/React.createElement(ValidationMessage, {
+      text: "validation",
+      palette: "dark",
+      size: "small",
+      type: "secondary"
+    }), /*#__PURE__*/React.createElement(ValidationMessage, {
+      text: "validation",
+      palette: "disable",
+      size: "small",
+      type: "secondary",
+      tooltip: "Information"
+    }));
+  }
+
+}
+
+if (false) {
+  ValidationMessage__default.docs = {
+    componentGroup: 'Form Fields',
+    folderName: 'Style Guide'
+  };
+}

package/es/form/layout/Field/docs/Field__default.docs.js

@@ -0,0 +1,25 @@
+import React, { Component } from 'react';
+import Field from '../Field';
+export default class Field__default extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement(Field, {
+      column: "two",
+      rowBreak: true
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        textAlign: 'center'
+      }
+    }, "Chidren"));
+  }
+
+}
+
+if (false) {
+  Field__default.docs = {
+    componentGroup: 'ModuleAddForm'
+  };
+}

package/es/form/layout/Section/docs/Section__default.docs.js

@@ -0,0 +1,21 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import Section from '../Section';
+export default class Section__default extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement(Section, {
+      title: "SectionTitle"
+    }, /*#__PURE__*/React.createElement("div", null, "Section children"));
+  }
+
+}
+
+if (false) {
+  Section__default.docs = {
+    componentGroup: 'ModuleAddForm'
+  };
+}

package/es/layout/SetupDetailLayout/docs/SetupDetailLayout__default.docs.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { SetupDetailLayout, SetupHeader, SetupFooter, SetupContent } from '../';
+import FormAction from '../../../FormAction/FormAction';
+export default class SetupDetailLayout__default extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement(SetupDetailLayout, {
+      getHelpInfo: () => {},
+      needHelpInfo: true
+    }, /*#__PURE__*/React.createElement(SetupHeader, {
+      title: "Setup",
+      getLeftPlaceHolder: () => /*#__PURE__*/React.createElement("p", null, "setupLeft"),
+      getRightPlaceHolder: () => /*#__PURE__*/React.createElement("p", null, "setupRight")
+    }), /*#__PURE__*/React.createElement(SetupContent, null, /*#__PURE__*/React.createElement("span", null, "Content")), /*#__PURE__*/React.createElement(SetupFooter, null, /*#__PURE__*/React.createElement(FormAction, {
+      size: "large"
+    }, /*#__PURE__*/React.createElement("p", null, "Footer"))));
+  }
+
+}
+
+if (false) {
+  SetupDetailLayout__default.docs = {
+    componentGroup: 'Template'
+  };
+}

package/es/layout/SubtabLayout/docs/SubtabLayout__default.docs.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import { SubtabLayout, SubtabHeader, SubtabContent, SubtabFooter } from '../';
+export default class SubtabLayout__default extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      needBorder: true,
+      needShadow: false
+    };
+    this.onScroll = this.onScroll.bind(this);
+    this.interval = null;
+  }
+
+  onScroll() {
+    this.setState({
+      needBorder: true,
+      needShadow: true
+    });
+    this.interval = null;
+    let intern = setTimeout(() => {
+      clearInterval(this.interval);
+      this.setState({
+        needBorder: true,
+        needShadow: false
+      });
+    }, 500);
+    this.interval = intern;
+  }
+
+  render() {
+    let boxStyle = {
+      padding: 'var(--zd_size21)'
+    };
+    let {
+      needShadow,
+      needBorder
+    } = this.state;
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        height: '100vh',
+        width: '100%'
+      }
+    }, /*#__PURE__*/React.createElement(SubtabLayout, null, /*#__PURE__*/React.createElement(SubtabHeader, {
+      needShadow: needShadow,
+      needBorder: needBorder
+    }), /*#__PURE__*/React.createElement(SubtabContent, null, /*#__PURE__*/React.createElement("div", {
+      onScroll: this.onScroll,
+      style: {
+        height: '100%',
+        width: '100%'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: boxStyle
+    }, "box 1"), /*#__PURE__*/React.createElement("div", {
+      style: boxStyle
+    }, "box 1"), /*#__PURE__*/React.createElement("div", {
+      style: boxStyle
+    }, "box 2"))), /*#__PURE__*/React.createElement(SubtabFooter, null, "Footer")));
+  }
+
+}
+
+if (false) {
+  SubtabLayout__default.docs = {
+    componentGroup: 'Template'
+  };
+}