@zohodesk/components 1.0.0-alpha-237 → 1.0.0-alpha-240

package/es/Select/docs/GroupSelect__default.docs.js

@@ -0,0 +1,149 @@
+/**** Libraries ****/
+import React, { Component } from 'react';
+/**** Components ****/
+
+import GroupSelect from '../GroupSelect';
+let groupedOptions = [{
+  id: 'tickets',
+  name: 'Tickets',
+  options: [{
+    id: '001',
+    subject: 'Ticket001'
+  }, {
+    id: '002',
+    subject: 'Ticket002'
+  }, {
+    id: '003',
+    subject: 'Ticket003'
+  }, {
+    id: '004',
+    subject: 'Ticket004'
+  }, {
+    id: '005',
+    subject: 'Ticket005'
+  }],
+  valueField: 'id',
+  textField: 'subject'
+}, {
+  id: 'tasks',
+  name: 'Tasks',
+  options: [{
+    id: '001',
+    subject: 'Task001'
+  }, {
+    id: '002',
+    subject: 'Task002'
+  }, {
+    id: '003',
+    subject: 'Task003'
+  }, {
+    id: '004',
+    subject: 'Task004'
+  }, {
+    id: '005',
+    subject: 'Task005'
+  }],
+  valueField: 'id',
+  textField: 'subject'
+}, {
+  id: 'accounts',
+  name: 'Accounts',
+  options: [{
+    id: '001',
+    name: 'Account001'
+  }, {
+    id: '002',
+    name: 'Account002'
+  }, {
+    id: '003',
+    name: 'Account003'
+  }, {
+    id: '004',
+    name: 'Account004'
+  }, {
+    id: '005',
+    name: 'Account005'
+  }],
+  valueField: 'id',
+  textField: 'name'
+}, {
+  id: 'contacts',
+  name: 'Contacts',
+  options: [{
+    id: '001',
+    name: 'Contact001'
+  }, {
+    id: '002',
+    name: 'Contact002'
+  }, {
+    id: '003',
+    name: 'Contact003'
+  }, {
+    id: '004',
+    name: 'Contact004'
+  }, {
+    id: '005',
+    name: 'Contact005'
+  }],
+  valueField: 'id',
+  textField: 'name'
+}];
+export default class GroupSelect__default extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      selectedOption: {
+        groupId: 'tickets',
+        selected: '001'
+      }
+    };
+    this.handleChange = this.handleChange.bind(this);
+    this.groupFooter = this.groupFooter.bind(this);
+  }
+
+  handleChange(selectedOption) {
+    this.setState({
+      selectedOption
+    });
+  }
+
+  groupFooter() {
+    return /*#__PURE__*/React.createElement("div", null, "Footer");
+  }
+
+  render() {
+    let {
+      selectedOption
+    } = this.state;
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(GroupSelect, {
+      groupedOptions: groupedOptions,
+      selectedOption: selectedOption,
+      onChange: this.handleChange,
+      needSearch: true,
+      searchEmptyMessage: "No matches found",
+      emptyMessage: "No Options",
+      isDefaultSelectValue: false,
+      placeHolder: "Select Option",
+      needLocalSearch: true
+    }), /*#__PURE__*/React.createElement(GroupSelect, {
+      groupedOptions: groupedOptions,
+      selectedOption: selectedOption,
+      onChange: this.handleChange,
+      needSearch: true,
+      searchEmptyMessage: "No matches found",
+      emptyMessage: "No Options",
+      isDefaultSelectValue: false,
+      placeHolder: "Select Option",
+      needLocalSearch: true,
+      getFooter: this.groupFooter
+    }, "Children"));
+  }
+
+}
+
+if (false) {
+  GroupSelect__default.docs = {
+    componentGroup: 'Form Elements',
+    folderName: 'Style Guide'
+  };
+}

package/es/Select/docs/SelectWithAvatar__default.docs.js

@@ -0,0 +1,97 @@
+import React, { Component } from 'react';
+import SelectWithAvatar from '../SelectWithAvatar';
+import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
+let option = [{
+  text: 'Option 1',
+  id: '1'
+}, {
+  text: 'Option 2',
+  id: '2'
+}, {
+  text: 'Option 3',
+  id: '3'
+}, {
+  text: 'Option 4',
+  id: '4'
+}, {
+  text: 'Option 5',
+  id: '5'
+}, {
+  text: 'Option 6',
+  id: '6'
+}, {
+  text: 'Option 7',
+  id: '7'
+}, {
+  text: 'Option 8',
+  id: '8'
+}, {
+  text: 'Option 9',
+  id: '9'
+}, {
+  text: 'Option 10',
+  id: '10'
+}];
+export default class SelectWithAvatar__default extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: ''
+    };
+    this.handleChange = this.handleChange.bind(this);
+  }
+
+  handleChange(value) {
+    this.setState({
+      value
+    });
+  }
+
+  render() {
+    let {
+      value
+    } = this.state;
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '360px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(SelectWithAvatar, {
+      options: option,
+      onChange: this.handleChange,
+      selectedValue: value,
+      needSearch: true,
+      emptyMessage: "No matches found",
+      placeHolder: "PlaceHolder",
+      isDefaultSelectValue: false,
+      onRemove: () => {
+        this.handleChange('');
+      }
+    }), /*#__PURE__*/React.createElement(SelectWithAvatar, {
+      options: option,
+      onChange: this.handleChange,
+      selectedValue: value,
+      needSearch: true,
+      emptyMessage: "No matches found",
+      placeHolder: "PlaceHolder",
+      isDefaultSelectValue: false,
+      isReadOnly: true
+    }), /*#__PURE__*/React.createElement(SelectWithAvatar, {
+      options: option,
+      onChange: this.handleChange,
+      selectedValue: value,
+      needSearch: true,
+      emptyMessage: "No matches found",
+      placeHolder: "PlaceHolder",
+      isDefaultSelectValue: false,
+      isDisabled: true
+    })));
+  }
+
+}
+
+if (false) {
+  SelectWithAvatar__default.docs = {
+    componentGroup: 'Form Elements',
+    folderName: 'Style Guide'
+  };
+}

package/es/Select/docs/SelectWithIcon__default.docs.js

@@ -0,0 +1,138 @@
+import React, { Component } from 'react';
+import SelectWithIcon from '../SelectWithIcon';
+export default class SelectWithIcon__default extends Component {
+  constructor(props) {
+    super(props);
+    this.options = [{
+      value: 'Bar',
+      id: 'bar',
+      iconName: 'ZD-RP-clrBar',
+      iconSize: '13'
+    }, {
+      value: 'Stacked Bar',
+      id: 'stackedBar',
+      iconName: 'ZD-RP-clrStackedBar',
+      iconSize: '13'
+    }, {
+      value: 'Percentage Bar',
+      id: 'percentageBar',
+      iconName: 'ZD-RP-clrPercentageBar',
+      iconSize: '13'
+    }, {
+      value: 'Pie',
+      id: 'pie',
+      iconName: 'ZD-RP-clrPie',
+      iconSize: '13'
+    }, {
+      value: 'Funnel',
+      id: 'funnel',
+      iconName: 'ZD-RP-clrFunnel',
+      iconSize: '13'
+    }, {
+      value: 'Line',
+      id: 'line',
+      iconName: 'ZD-RP-clrLine',
+      iconSize: '13'
+    }, {
+      value: 'Multiple Line',
+      id: 'multipleLine',
+      iconName: 'ZD-RP-clrMultiline',
+      iconSize: '13'
+    }, {
+      value: 'Table',
+      id: 'table',
+      iconName: 'ZD-RP-clrTableReport',
+      iconSize: '13'
+    }];
+    this.state = {
+      selectedValue: this.options[0].value,
+      selectedId: this.options[0].id,
+      selectedIcon: this.options[0].iconName,
+      selectedIconSize: this.options[0].iconSize
+    };
+    this.handleChange = this.handleChange.bind(this);
+  }
+
+  handleChange(selectedId, selectedValue, index, e) {
+    this.setState({
+      selectedValue,
+      selectedId,
+      selectedIcon: this.options[index].iconName,
+      selectedIconSize: this.options[index].iconSize
+    });
+  }
+
+  render() {
+    let {
+      selectedValue,
+      selectedId,
+      selectedIconSize,
+      selectedIcon
+    } = this.state;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '300px',
+        marginBottom: '20px'
+      }
+    }, /*#__PURE__*/React.createElement(SelectWithIcon, {
+      options: this.options,
+      needSearch: true,
+      searchPlaceHolder: "Search",
+      searchEmptyMessage: 'No matches found',
+      selectedValue: selectedValue,
+      onChange: this.handleChange,
+      placeHolder: "Placeholder",
+      selectedId: selectedId,
+      needTick: true,
+      textBoxVariant: "primary",
+      iconSize: selectedIconSize,
+      iconName: selectedIcon
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '300px',
+        marginBottom: '20px'
+      }
+    }, /*#__PURE__*/React.createElement(SelectWithIcon, {
+      options: this.options,
+      needSearch: true,
+      searchPlaceHolder: "Search",
+      searchEmptyMessage: 'No matches found',
+      selectedValue: selectedValue,
+      onChange: this.handleChange,
+      placeHolder: "Placeholder",
+      selectedId: selectedId,
+      needTick: true,
+      textBoxVariant: "primary",
+      isDisabled: true,
+      iconSize: selectedIconSize,
+      iconName: selectedIcon
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '300px',
+        marginBottom: '20px'
+      }
+    }, /*#__PURE__*/React.createElement(SelectWithIcon, {
+      options: this.options,
+      needSearch: true,
+      searchPlaceHolder: "Search",
+      searchEmptyMessage: 'No matches found',
+      selectedValue: selectedValue,
+      onChange: this.handleChange,
+      placeHolder: "Placeholder",
+      selectedId: selectedId,
+      needTick: true,
+      textBoxVariant: "primary",
+      isReadOnly: true,
+      iconSize: selectedIconSize,
+      iconName: selectedIcon
+    })));
+  }
+
+}
+
+if (false) {
+  SelectWithIcon__default.docs = {
+    componentGroup: 'Form Elements',
+    folderName: 'Style Guide'
+  };
+}

package/es/Select/docs/Select__default.docs.js

@@ -0,0 +1,288 @@
+import React from 'react';
+import Select from '../Select';
+import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
+import Icon from '@zohodesk/icons/lib/Icon';
+import { Container } from '../../Layout';
+let option = [{
+  text: 'Apple',
+  id: 0
+}, {
+  text: 'Banana',
+  id: '1'
+}, {
+  text: 'Blackberries',
+  id: '2'
+}, {
+  text: 'Custard-Apple',
+  id: '3'
+}, {
+  text: 'Guava',
+  id: '4'
+}, {
+  text: 'Grapes',
+  id: '5'
+}, {
+  text: 'Jackfruit',
+  id: '6'
+}, {
+  text: 'Jujube Fruit',
+  id: '7'
+}, {
+  text: 'Lemon',
+  id: '8'
+}, {
+  text: 'Papaya',
+  id: '9'
+}, {
+  text: 'Pineapple',
+  id: '10'
+}];
+let customOption = [{
+  text: 'Apple',
+  id: 0,
+  listItemProps: {
+    style: {
+      'color': 'red'
+    }
+  }
+}, {
+  text: 'Banana',
+  id: '1',
+  listItemProps: {
+    style: {
+      'color': 'orange'
+    }
+  }
+}, {
+  text: 'Blackberries',
+  id: '2',
+  listItemProps: {
+    style: {
+      'color': 'blue'
+    }
+  }
+}, {
+  text: 'Guava',
+  id: '3'
+}, {
+  text: 'Grapes',
+  id: '4'
+}, {
+  text: 'Jackfruit',
+  id: '5'
+}];
+export default class Select__default extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: ''
+    };
+    this.handleChange = this.handleChange.bind(this);
+    this.customChildren = this.customChildren.bind(this);
+  }
+
+  handleChange(value) {
+    this.setState({
+      value
+    });
+  }
+
+  customChildren() {
+    let serach = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    return /*#__PURE__*/React.createElement("div", null, serach.searchString, "Custom Children");
+  }
+
+  render() {
+    let {
+      value
+    } = this.state;
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '360px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement("div", null, "Default"), /*#__PURE__*/React.createElement(Select, {
+      options: option,
+      onChange: this.handleChange,
+      selectedValue: value,
+      needSearch: true,
+      emptyMessage: "No matches found",
+      placeHolder: "PlaceHolder",
+      searchBoxPlaceHolder: "Search",
+      isDefaultSelectValue: false,
+      i18nKeys: {
+        loadingText: 'Loading',
+        emptyText: 'emptyText',
+        noMoreText: 'noMoreText',
+        searchEmptyText: 'searchEmptyText',
+        TextBoxIcon_i18n: {
+          clearText: 'Clear Data'
+        }
+      }
+    }), /*#__PURE__*/React.createElement("div", null, "Disabled"), /*#__PURE__*/React.createElement(Select, {
+      options: option,
+      onChange: this.handleChange,
+      selectedValue: value,
+      needSearch: true,
+      emptyMessage: "No matches found",
+      placeHolder: "isDisabled",
+      searchBoxPlaceHolder: "Search",
+      isDefaultSelectValue: false,
+      isDisabled: true
+    }), /*#__PURE__*/React.createElement("div", null, "Custom Props"), /*#__PURE__*/React.createElement(Select, {
+      options: customOption,
+      onChange: this.handleChange,
+      selectedValue: value,
+      needSearch: true,
+      emptyMessage: "No matches found",
+      placeHolder: "PlaceHolder",
+      searchBoxPlaceHolder: "Search",
+      isDefaultSelectValue: false,
+      i18nKeys: {
+        loadingText: 'Loading',
+        emptyText: 'emptyText',
+        noMoreText: 'noMoreText',
+        searchEmptyText: 'searchEmptyText',
+        TextBoxIcon_i18n: {
+          clearText: 'Clear Data'
+        }
+      },
+      customProps: {
+        listItemProps: {
+          style: {
+            'color': 'green'
+          }
+        },
+        TextBoxProps: {
+          style: {
+            'color': 'brown'
+          }
+        },
+        DropdownSearchTextBoxProps: {
+          style: {
+            'color': 'purple'
+          }
+        }
+      }
+    }), /*#__PURE__*/React.createElement("div", null, "Disabled"), /*#__PURE__*/React.createElement(Select, {
+      options: option,
+      onChange: this.handleChange,
+      selectedValue: value,
+      needSearch: true,
+      emptyMessage: "No matches found",
+      placeHolder: "isDisabled",
+      searchBoxPlaceHolder: "Search",
+      isDefaultSelectValue: false,
+      isDisabled: true
+    }), /*#__PURE__*/React.createElement("div", null, "Readonly"), /*#__PURE__*/React.createElement(Select, {
+      options: option,
+      onChange: this.handleChange,
+      selectedValue: value,
+      needSearch: true,
+      emptyMessage: "No matches found",
+      placeHolder: "isReadOnly",
+      searchBoxPlaceHolder: "Search",
+      isDefaultSelectValue: false,
+      isReadOnly: true
+    }), /*#__PURE__*/React.createElement("div", null, "Custom Children"), /*#__PURE__*/React.createElement(Select, {
+      options: option,
+      onChange: this.handleChange,
+      selectedValue: value,
+      needSearch: true,
+      emptyMessage: "No matches found",
+      placeHolder: "isReadOnly",
+      searchBoxPlaceHolder: "Search",
+      isDefaultSelectValue: false,
+      getChildren: this.customChildren
+    }), /*#__PURE__*/React.createElement("div", null, "Custom Footer"), /*#__PURE__*/React.createElement(Select, {
+      options: option,
+      onChange: this.handleChange,
+      selectedValue: value,
+      needSearch: true,
+      emptyMessage: "No matches found",
+      placeHolder: "isReadOnly",
+      searchBoxPlaceHolder: "Search",
+      isDefaultSelectValue: false,
+      getFooter: this.customChildren
+    }), /*#__PURE__*/React.createElement("div", null, "Custom Empty"), /*#__PURE__*/React.createElement(Select, {
+      options: option,
+      onChange: this.handleChange,
+      selectedValue: value,
+      needSearch: true,
+      emptyMessage: "No matches found",
+      placeHolder: "isReadOnly",
+      searchBoxPlaceHolder: "Search",
+      isDefaultSelectValue: false,
+      getCustomEmptyState: this.customChildren
+    }), /*#__PURE__*/React.createElement("div", {
+      style: {
+        position: 'relative',
+        width: '500px'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '300px'
+      }
+    }, /*#__PURE__*/React.createElement("div", null, "isParentBased"), /*#__PURE__*/React.createElement(Select, {
+      options: option,
+      onChange: this.handleChange,
+      selectedValue: value,
+      needSearch: true,
+      emptyMessage: "No matches found",
+      placeHolder: "isReadOnly",
+      searchBoxPlaceHolder: "Search",
+      isDefaultSelectValue: false,
+      isParentBased: false
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '300px'
+      }
+    }, /*#__PURE__*/React.createElement("div", null, "isParentBased"), /*#__PURE__*/React.createElement(Select, {
+      options: option,
+      onChange: this.handleChange,
+      selectedValue: value,
+      needSearch: true,
+      emptyMessage: "No matches found",
+      placeHolder: "isReadOnly",
+      searchBoxPlaceHolder: "Search",
+      isDefaultSelectValue: false,
+      isParentBased: false,
+      isReadOnly: true
+    }))), /*#__PURE__*/React.createElement("div", null, "TextBoxIcon Children"), /*#__PURE__*/React.createElement(Select, {
+      options: option,
+      onChange: this.handleChange,
+      selectedValue: value,
+      needSearch: true,
+      emptyMessage: "No matches found",
+      placeHolder: "PlaceHolder",
+      searchBoxPlaceHolder: "Search",
+      isDefaultSelectValue: false,
+      i18nKeys: {
+        loadingText: 'Loading',
+        emptyText: 'emptyText',
+        noMoreText: 'noMoreText',
+        searchEmptyText: 'searchEmptyText',
+        TextBoxIcon_i18n: {
+          clearText: 'Clear Data'
+        }
+      }
+    }, /*#__PURE__*/React.createElement(Container, {
+      align: "both",
+      style: {
+        marginRight: '15px'
+      }
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-SE-setpracket",
+      size: "18"
+    })))));
+  }
+
+}
+
+if (false) {
+  Select__default.docs = {
+    componentGroup: 'Form Elements',
+    folderName: 'Style Guide',
+    external: true,
+    description: ' '
+  };
+}