@zohodesk/components 1.0.0-temp-67 → 1.0.0-temp-350

package/es/Select/SelectWithIcon.js

@@ -1,3 +1,4 @@
+import "core-js/modules/es.array.includes";
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 /**** Components ****/
@@ -5,12 +6,13 @@ import PropTypes from 'prop-types';
 import Popup from '../Popup/Popup';
 import TextBoxIcon from '../TextBoxIcon/TextBoxIcon';
 import Icon from '@zohodesk/icons/lib/Icon';
-import DropBox from '../DropBox/DropBox';
 import ListItemWithIcon from '../ListItem/ListItemWithIcon';
 import Card, { CardHeader, CardContent } from '../Card/Card';
 import EmptyState from '../MultiSelect/EmptyState';
 import { Container, Box } from '../Layout';
 import { getUniqueId } from '../Provider/IdProvider';
+import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
+import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
 /**** Methods ****/
 
 import { scrollTo } from '../utils/Common.js';
@@ -233,6 +235,17 @@ class SelectWithIcon extends Component {
     }
   }
 
+  responsiveFunc(_ref) {
+    let {
+      mediaQueryOR
+    } = _ref;
+    return {
+      tabletMode: mediaQueryOR([{
+        maxWidth: 700
+      }])
+    };
+  }
+
   render() {
     let {
       animationStyle,
@@ -345,82 +358,95 @@ class SelectWithIcon extends Component {
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-down",
       size: "7"
-    })))))), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/React.createElement(DropBox, {
-      animationStyle: animationStyle,
-      boxPosition: position,
-      isActive: isPopupReady,
-      isAnimate: true,
-      isArrow: false,
-      onClick: removeClose,
-      getRef: getContainerRef,
-      needResponsive: needResponsive,
-      dataId: `${dataId}_suggestions`,
-      size: boxSize,
-      isPadding: false
-    }, /*#__PURE__*/React.createElement(Card, {
-      onScroll: this.handleScroll,
-      htmlId: setAriaId,
-      a11y: {
-        role: 'listbox'
-      }
-    }, needSearch ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement("div", {
-      className: `${style.search} ${style[size]}`
-    }, /*#__PURE__*/React.createElement(TextBoxIcon, {
-      onClear: this.onSearchClear,
-      onChange: this.onSearch,
-      placeHolder: searchBoxPlaceHolder,
-      value: searchValue,
-      maxLength: maxLength,
-      onKeyDown: this.handleKeyDown,
-      inputRef: this.searchInputRef,
-      size: searchBoxSize,
-      dataId: `${dataId}_search`,
-      a11y: {
-        ariaDescribedby: ariaErrorId
-      },
-      autoComplete: false
-    }))) : null, /*#__PURE__*/React.createElement(CardContent, {
-      customClass: `${style.dropBoxList} ${dropBoxSize ? style[dropBoxSize] : ''}`,
-      eleRef: this.scrollContentRef
-    }, options.length ? /*#__PURE__*/React.createElement(React.Fragment, null, options.map((options, i) => {
+    })))))), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
+      query: this.responsiveFunc,
+      responsiveId: "Helmet"
+    }, _ref2 => {
       let {
-        iconName,
-        iconSize,
-        iconColor
-      } = options;
-      return /*#__PURE__*/React.createElement(ListItemWithIcon, {
-        key: options[idKey],
-        value: options[valueKey],
-        size: "medium",
-        onClick: this.handleChange,
-        id: options[idKey],
-        index: i,
-        title: options[valueKey],
-        palette: "default",
-        dataId: options[idKey],
-        iconName: iconName,
-        iconSize: iconSize,
-        iconClass: iconColor,
-        active: selectedId === options[idKey],
-        needBorder: needListBorder,
-        needTick: needTick,
-        onMouseEnter: this.handleMouseEnter,
-        highlight: selectedIndex === i,
-        getRef: this.itemRef,
+        tabletMode
+      } = _ref2;
+      return /*#__PURE__*/React.createElement(ResponsiveDropBox, {
+        animationStyle: animationStyle,
+        boxPosition: position,
+        isActive: isPopupReady,
+        isAnimate: true,
+        isArrow: false,
+        onClick: removeClose,
+        getRef: getContainerRef,
+        needResponsive: needResponsive,
+        dataId: `${dataId}_suggestions`,
+        size: boxSize,
+        isPadding: false,
+        isResponsivePadding: true,
+        alignBox: "row"
+      }, /*#__PURE__*/React.createElement(Box, {
+        flexible: true
+      }, /*#__PURE__*/React.createElement(Card, {
+        onScroll: this.handleScroll,
+        htmlId: setAriaId,
         a11y: {
-          role: 'option',
-          ariaSelected: selectedId === options[idKey]
+          role: 'listbox'
         }
-      });
-    })) : /*#__PURE__*/React.createElement(EmptyState, {
-      isLoading: isFetchingOptions,
-      options: options,
-      searchString: searchValue,
-      suggestions: options,
-      dataId: dataId,
-      i18nKeys: i18nKeys,
-      htmlId: ariaErrorId
-    })))) : null);
+      }, needSearch ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement("div", {
+        className: `${style.search} ${style[size]}`
+      }, /*#__PURE__*/React.createElement(TextBoxIcon, {
+        onClear: this.onSearchClear,
+        onChange: this.onSearch,
+        placeHolder: searchBoxPlaceHolder,
+        value: searchValue,
+        maxLength: maxLength,
+        onKeyDown: this.handleKeyDown,
+        inputRef: this.searchInputRef,
+        size: searchBoxSize,
+        dataId: `${dataId}_search`,
+        a11y: {
+          ariaDescribedby: ariaErrorId
+        },
+        autoComplete: false
+      }))) : null, /*#__PURE__*/React.createElement(CardContent, {
+        customClass: `${tabletMode ? style.responsivedropBoxList : style.dropBoxList} ${!tabletMode && dropBoxSize ? style[dropBoxSize] : ''}`,
+        shrink: true,
+        eleRef: this.scrollContentRef
+      }, options.length ? /*#__PURE__*/React.createElement(React.Fragment, null, options.map((options, i) => {
+        let {
+          iconName,
+          iconSize,
+          iconColor
+        } = options;
+        return /*#__PURE__*/React.createElement(ListItemWithIcon, {
+          key: options[idKey],
+          value: options[valueKey],
+          size: "medium",
+          onClick: this.handleChange,
+          id: options[idKey],
+          index: i,
+          title: options[valueKey],
+          palette: "default",
+          dataId: options[idKey],
+          iconName: iconName,
+          iconSize: iconSize,
+          iconClass: iconColor,
+          active: selectedId === options[idKey],
+          needBorder: needListBorder,
+          needTick: needTick,
+          onMouseEnter: this.handleMouseEnter,
+          highlight: selectedIndex === i,
+          getRef: this.itemRef,
+          a11y: {
+            role: 'option',
+            ariaSelected: selectedId === options[idKey]
+          }
+        });
+      })) : /*#__PURE__*/React.createElement(EmptyState, {
+        isLoading: isFetchingOptions,
+        options: options,
+        searchString: searchValue,
+        suggestions: options,
+        dataId: dataId,
+        i18nKeys: i18nKeys,
+        htmlId: ariaErrorId
+      })))));
+    }) : null);
   }
 
 }

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'
+  };
+}