@zohodesk/components 1.0.0-alpha-238 → 1.0.0-alpha-239

package/es/ListItem/docs/ListItemWithRadio__custom.docs.js

@@ -0,0 +1,91 @@
+import React from 'react';
+import ListItemWithRadio from '../ListItemWithRadio';
+import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
+import style from '../../common/docStyle.module.css';
+export default class ListItemWithRadio__custom extends React.Component {
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '250px'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithRadio, {
+      customClass: {
+        customListItem: style.listItem,
+        customRadio: style.listRadio,
+        customRadioWrap: style.listRadioWrap
+      },
+      value: "ListItem",
+      id: "11"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithRadio, {
+      customClass: {
+        customListItem: style.listItem,
+        customRadio: style.listRadio,
+        customRadioWrap: style.listRadioWrap
+      },
+      value: "ListItem",
+      autoHover: true,
+      id: "12"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithRadio, {
+      customClass: {
+        customListItem: style.listItem,
+        customRadio: style.listRadio,
+        customRadioWrap: style.listRadioWrap
+      },
+      value: "ListItem",
+      highlight: true,
+      checked: true,
+      id: "13"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithRadio, {
+      customClass: {
+        customListItem: style.listItem,
+        customRadio: style.listRadio,
+        customRadioWrap: style.listRadioWrap
+      },
+      value: "ListItem",
+      active: true,
+      checked: true,
+      id: "14"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithRadio, {
+      customClass: {
+        customListItem: style.listItem,
+        customRadio: style.listRadio,
+        customRadioWrap: style.listRadioWrap
+      },
+      isDisabled: true,
+      value: "ListItem disabled",
+      active: true,
+      checked: true,
+      id: "14"
+    }))));
+  }
+
+}
+
+if (false) {
+  ListItemWithRadio__custom.docs = {
+    componentGroup: 'Molecule',
+    folderName: 'Style Guide',
+    description: ' ',
+    external: true
+  };
+}

package/es/ListItem/docs/ListItemWithRadio__default.docs.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import ListItemWithRadio from '../ListItemWithRadio';
+import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
+export default class ListItemWithRadio__default extends React.Component {
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '250px'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithRadio, {
+      value: "ListItem",
+      id: "11"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithRadio, {
+      value: "ListItem",
+      autoHover: true,
+      id: "12"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithRadio, {
+      value: "ListItem",
+      highlight: true,
+      checked: true,
+      id: "13"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithRadio, {
+      value: "ListItem",
+      active: true,
+      checked: true,
+      id: "14"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithRadio, {
+      isDisabled: true,
+      value: "ListItem disabled",
+      active: true,
+      checked: true,
+      id: "14"
+    }))));
+  }
+
+}
+
+if (false) {
+  ListItemWithRadio__default.docs = {
+    componentGroup: 'Molecule',
+    folderName: 'Style Guide',
+    description: ' ',
+    external: true
+  };
+}

package/es/ListItem/docs/ListItem__custom.docs.js

@@ -0,0 +1,114 @@
+import React from 'react';
+import ListItem from '../ListItem';
+import style from '../../common/docStyle.module.css';
+export default class ListItem__custom extends React.Component {
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '250px'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(ListItem, {
+      customClass: {
+        customListItem: style.listItem,
+        customTickIcon: style.listTick
+      },
+      value: "ListItem",
+      isLink: true,
+      href: "https://zoho.com",
+      disableTitle: "Disabled list",
+      palette: "default"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(ListItem, {
+      customClass: {
+        customListItem: style.listItem,
+        customTickIcon: style.listTick
+      },
+      value: "ListItem",
+      autoHover: true,
+      disableTitle: "Disabled list"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(ListItem, {
+      customClass: {
+        customListItem: style.listItem,
+        customTickIcon: style.listTick
+      },
+      value: "ListItem",
+      highlight: true,
+      disableTitle: "Disabled list"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(ListItem, {
+      customClass: {
+        customListItem: style.listItem,
+        customTickIcon: style.listTick
+      },
+      value: "ListItem",
+      autoHover: true,
+      active: true,
+      disableTitle: "Disabled list",
+      title: "ListItem title"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(ListItem, {
+      customClass: {
+        customListItem: style.listItem,
+        customTickIcon: style.listTick
+      },
+      value: "ListItem",
+      active: true,
+      needTick: true,
+      disableTitle: "disabled list",
+      palette: "dark"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(ListItem, {
+      customClass: {
+        customListItem: style.listItem,
+        customTickIcon: style.listTick
+      },
+      value: "ListItem disabled",
+      palette: "secondary",
+      autoHover: true,
+      isDisabled: true,
+      disableTitle: "disabled list"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(ListItem, {
+      customClass: {
+        customListItem: style.listItem,
+        customTickIcon: style.listTick
+      },
+      autoHover: true,
+      active: true,
+      value: "ListItemListItemListItemListItemListItem"
+    }, "ChildrenChildrenChildren ChildrenChildrenChildrenChildren")));
+  }
+
+}
+
+if (false) {
+  ListItem__custom.docs = {
+    componentGroup: 'Molecule',
+    folderName: 'Style Guide',
+    description: ' ',
+    external: true
+  };
+}

package/es/ListItem/docs/ListItem__default.docs.js

@@ -0,0 +1,82 @@
+import React from 'react';
+import ListItem from '../ListItem';
+export default class ListItem__default extends React.Component {
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '250px'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(ListItem, {
+      value: "ListItem",
+      isLink: true,
+      href: "https://zoho.com",
+      disableTitle: "Disabled list"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(ListItem, {
+      value: "ListItem",
+      autoHover: true,
+      disableTitle: "Disabled list"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(ListItem, {
+      value: "ListItem",
+      highlight: true,
+      disableTitle: "Disabled list"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(ListItem, {
+      value: "ListItem",
+      active: true,
+      disableTitle: "Disabled list",
+      title: "ListItem title"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(ListItem, {
+      value: "ListItem",
+      active: true,
+      needTick: true,
+      disableTitle: "disabled list"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(ListItem, {
+      value: "ListItem disabled",
+      palette: "secondary",
+      autoHover: true,
+      isDisabled: true,
+      disableTitle: "disabled list"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(ListItem, {
+      autoHover: true,
+      active: true,
+      value: "ListItemListItemListItemListItemListItem"
+    }, "ChildrenChildrenChildren ChildrenChildrenChildrenChildren")));
+  }
+
+}
+
+if (false) {
+  ListItem__default.docs = {
+    componentGroup: 'Molecule',
+    folderName: 'Style Guide',
+    description: ' ',
+    external: true
+  };
+}

package/es/MultiSelect/docs/AdvancedGroupMultiSelect__default.docs.js

@@ -0,0 +1,125 @@
+import React from 'react';
+import AdvancedGroupMultiSelect from '../AdvancedGroupMultiSelect';
+export default class AdvancedGroupMultiSelect__default extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleSelectOptions = this.handleSelectOptions.bind(this);
+    this.getNextOptions = this.getNextOptions.bind(this);
+    this.groupFooter = this.groupFooter.bind(this);
+    this.onSearch = this.onSearch.bind(this);
+    this.state = {
+      selectedGroupOptions: [{
+        groupId: 'Group1',
+        id: 'group13'
+      }, {
+        groupId: 'Group1',
+        id: '1212'
+      }, {
+        groupId: 'Group2',
+        id: '2222'
+      }],
+      selectedOptionDetails: {
+        Group1: [{
+          value: 'Ashok',
+          id: '1212'
+        }],
+        Group2: [{
+          value: 'team 1',
+          id: '2222'
+        }]
+      }
+    };
+  }
+
+  getNextOptions(searchStr) {
+    return Promise.resolve();
+  }
+
+  onSearch(searchStr) {
+    return Promise.resolve();
+  }
+
+  handleSelectOptions() {
+    let selectedGroupOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    this.setState({
+      selectedGroupOptions
+    });
+  }
+
+  groupFooter() {
+    return /*#__PURE__*/React.createElement("div", null, "Footer");
+  }
+
+  render() {
+    let groupOptions = [{
+      id: 'Group1',
+      name: 'Group 1',
+      options: [{
+        id: 'group11',
+        value: 'Option 1'
+      }, {
+        id: 'group12',
+        value: 'Option 2'
+      }, {
+        id: 'group13',
+        value: 'Option 3'
+      }],
+      textField: 'value',
+      valueField: 'id'
+    }, {
+      id: 'Group2',
+      name: 'Group 2',
+      options: [{
+        id: 'group21',
+        value: 'Group2 Option 1'
+      }, {
+        id: 'group22',
+        value: 'Group2 Option 2'
+      }, {
+        id: 'group23',
+        value: 'Group2 Option 3'
+      }],
+      textField: 'value',
+      valueField: 'id'
+    }];
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(AdvancedGroupMultiSelect, {
+      groupedOptions: groupOptions,
+      selectedGroupOptions: this.state.selectedGroupOptions,
+      onChange: this.handleSelectOptions,
+      dataIdSrchEmptyMsg: "EmptySearch",
+      dataIdNoOptnsMsg: "NoData",
+      needLocalSearch: true,
+      getNextOptions: this.getNextOptions,
+      onSearch: this.onSearch,
+      selectedOptionDetails: this.state.selectedOptionDetails,
+      i18nKeys: {
+        clearText: 'Clear Selected Items',
+        loadingText: 'Fetching...',
+        emptyText: 'No Options .',
+        noMoreText: 'No More Options .',
+        searchEmptyText: 'No Matches Found .'
+      }
+    }), /*#__PURE__*/React.createElement(AdvancedGroupMultiSelect, {
+      groupedOptions: groupOptions,
+      selectedGroupOptions: this.state.selectedGroupOptions,
+      onChange: this.handleSelectOptions,
+      emptyMessage: "No data found",
+      searchEmptyMessage: "No results found",
+      dataIdSrchEmptyMsg: "EmptySearch",
+      dataIdNoOptnsMsg: "NoData",
+      needLocalSearch: true,
+      getNextOptions: this.getNextOptions,
+      onSearch: this.onSearch,
+      selectedOptionDetails: this.state.selectedOptionDetails,
+      getFooter: this.groupFooter
+    }, /*#__PURE__*/React.createElement("div", null, "Children")));
+  }
+
+}
+
+if (false) {
+  AdvancedGroupMultiSelect__default.docs = {
+    componentGroup: 'Form Elements',
+    folderName: 'Style Guide'
+  };
+}

package/es/MultiSelect/docs/AdvancedMultiSelect__default.docs.js

@@ -0,0 +1,114 @@
+/**** Libraries ****/
+import React, { Component } from 'react';
+/**** Components ****/
+
+import AdvancedMultiSelect from '../AdvancedMultiSelect';
+export default class AdvancedMultiSelect__default extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      options: [{
+        id: 2,
+        text: 'text2',
+        listItemProps: {
+          style: {
+            color: 'red'
+          }
+        }
+      }, {
+        id: 3,
+        text: 'text3',
+        listItemProps: {
+          style: {
+            color: 'blue'
+          }
+        }
+      }, {
+        id: 4,
+        text: 'text4'
+      }, {
+        id: 5,
+        text: 'text5'
+      }, {
+        id: 6,
+        text: 'text6'
+      }, {
+        id: 7,
+        text: 'text7'
+      }, {
+        id: 8,
+        text: 'text8'
+      }, {
+        id: 9,
+        text: 'text9'
+      }, {
+        id: 10,
+        text: 'text10'
+      }],
+      selectedOptions: [1, 2, 3, 4],
+      selectedOptionDetails: [{
+        id: 1,
+        text: 'text1'
+      }]
+    };
+    this.handleChange = this.handleChange.bind(this);
+    this.handleGetSelectedOptionDetails = this.handleGetSelectedOptionDetails.bind(this);
+    this.getFooter = this.getFooter.bind(this);
+  }
+
+  handleChange(selectedOptions) {
+    this.setState({
+      selectedOptions
+    });
+  }
+
+  handleGetSelectedOptionDetails() {
+    return Promise.resolve();
+  }
+
+  getFooter() {
+    return /*#__PURE__*/React.createElement("div", null, "Custom Footer");
+  }
+
+  render() {
+    let {
+      selectedOptions,
+      options,
+      selectedOptionDetails
+    } = this.state;
+    return /*#__PURE__*/React.createElement(AdvancedMultiSelect, {
+      id: "8888",
+      options: options,
+      selectedOptions: selectedOptions,
+      onChange: this.handleChange,
+      selectedOptionsLimit: 2,
+      selectedOptionDetails: selectedOptionDetails,
+      getSelectedOptionDetails: this.handleGetSelectedOptionDetails,
+      needSelectAll: true,
+      selectAllText: "Select All",
+      placeHolder: "Select Text",
+      optionType: "default",
+      i18nKeys: {
+        clearText: 'Clear Selected Items',
+        loadingText: 'Fetching...',
+        emptyText: 'No Options .',
+        noMoreText: 'No More Options .',
+        searchEmptyText: 'No Matches Found .'
+      },
+      getFooter: this.getFooter,
+      customProps: {
+        SuggestionsProps: {
+          needBorder: false
+        }
+      }
+    });
+  }
+
+}
+
+if (false) {
+  AdvancedMultiSelect__default.docs = {
+    componentGroup: 'Form Elements',
+    folderName: 'Style Guide'
+  };
+}