@zohodesk/dot 1.0.0-beta.22 → 1.0.0-beta.220

package/es/list/status/StatusDropdown/StatusDropdown.js

@@ -0,0 +1,495 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Icon from '@zohodesk/icons/lib/Icon';
+import DropBox from '@zohodesk/components/lib/DropBox/DropBox';
+import Popup from '@zohodesk/components/lib/Popup/Popup';
+import { Box, Container } from '@zohodesk/components/lib/Layout';
+import DropDownHeading from '@zohodesk/components/lib/DropDown/DropDownHeading';
+import TextBoxIcon from '@zohodesk/components/lib/TextBoxIcon/TextBoxIcon';
+import Loader from '@zohodesk/svg/lib/svg/Loader';
+import EmptySearch from '@zohodesk/svg/lib/svg/EmptySearch';
+import { scrollTo } from '@zohodesk/components/lib/utils/Common.js';
+import TextBox from '@zohodesk/components/lib/TextBox/TextBox';
+import CommonEmptyState from '../../../emptystate/CommonEmptyState/CommonEmptyState';
+import StatusListItem from '../StatusListItem/StatusListItem';
+import commonStyle from '@zohodesk/components/lib/common/common.module.css';
+import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
+import btnStyle from '@zohodesk/components/lib/semantic/Button/semanticButton.module.css';
+import style from './StatusDropdown.module.css';
+export class StatusDropdown extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      searchString: '',
+      selectedIndex: 0,
+      options: props.options
+    };
+    this.handleChange = this.handleChange.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.onSelect = this.onSelect.bind(this);
+    this.handleTogglePopup = this.handleTogglePopup.bind(this);
+    this.onSearchClear = this.onSearchClear.bind(this);
+    this.searchList = this.searchList.bind(this);
+    this.scrollContentRef = this.scrollContentRef.bind(this);
+    this.handleMouseEnter = this.handleMouseEnter.bind(this);
+    this.searchInputRef = this.searchInputRef.bind(this);
+    this.itemRef = this.itemRef.bind(this);
+    this.inputRef = this.inputRef.bind(this);
+    this.handleScroll = this.handleScroll.bind(this);
+    this.emptySearchSVG = this.emptySearchSVG.bind(this);
+    this.getAriaId = getUniqueId(this);
+  }
+
+  emptySearchSVG() {
+    return /*#__PURE__*/React.createElement(EmptySearch, {
+      size: "small"
+    });
+  }
+
+  inputRef(el) {
+    this.hiddenInput = el;
+  }
+
+  itemRef(ele, index, id) {
+    this[`suggestion_${id}`] = ele;
+  }
+
+  searchInputRef(el) {
+    this.searchInput = el;
+  }
+
+  handleTogglePopup(e) {
+    let {
+      togglePopup,
+      boxPosition,
+      onSelectLabel,
+      isPopupOpen,
+      onTogglePopup
+    } = this.props;
+    !isPopupOpen && onSelectLabel && onSelectLabel(e);
+    onTogglePopup && onTogglePopup(isPopupOpen);
+    togglePopup(e, boxPosition);
+  }
+
+  scrollContentRef(el) {
+    let {
+      isPopupOpen
+    } = this.props;
+
+    if (isPopupOpen) {
+      this.optionsContainer = el;
+    }
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.options.length != this.props.options.length) {
+      this.setState({
+        options: nextProps.options
+      });
+    }
+  }
+
+  onSelect(element, e) {
+    let {
+      onClick,
+      togglePopup,
+      isPopupOpen,
+      onTogglePopup
+    } = this.props;
+    onClick && onClick(e, element);
+    onTogglePopup && onTogglePopup(isPopupOpen);
+    togglePopup(e);
+  }
+
+  componentDidUpdate(prevProps) {
+    let {
+      isPopupOpen,
+      isSearch,
+      idName
+    } = this.props;
+    let {
+      selectedIndex,
+      options
+    } = this.state;
+
+    if (prevProps.isPopupOpen != isPopupOpen) {
+      setTimeout(() => {
+        isPopupOpen && isSearch ? this.searchInput && this.searchInput.focus() : this.hiddenInput && this.hiddenInput.focus();
+      }, 10);
+    }
+
+    let mergeOptions = options;
+    let option = mergeOptions[selectedIndex];
+    let id = option && option[idName] || {};
+    let selSuggestion = this[`suggestion_${id}`];
+
+    if (isPopupOpen) {
+      this.optionsContainer && scrollTo(this.optionsContainer, selSuggestion);
+    }
+
+    if (!prevProps.isPopupOpen && this.props.isPopupOpen) {
+      this.onSearchClear();
+    }
+  }
+
+  handleKeyDown(e) {
+    let {
+      keyCode
+    } = e;
+    let {
+      selectedIndex,
+      options
+    } = this.state;
+    let totalIndex = options.length;
+    let {
+      togglePopup,
+      onClick,
+      boxPosition,
+      isPopupReady,
+      isNextOptions,
+      getNextOptions,
+      onTogglePopup,
+      isPopupOpen
+    } = this.props;
+
+    if (isPopupReady && (keyCode === 38 || keyCode === 40) && e.preventDefault) {
+      e.preventDefault(); //prevent body scroll
+    }
+
+    if (isPopupReady) {
+      switch (keyCode) {
+        case 40:
+          if (selectedIndex === totalIndex - 1) {
+            this.setState({
+              selectedIndex: 0
+            });
+          } else {
+            if (selectedIndex === totalIndex - 3) {
+              isNextOptions && getNextOptions && getNextOptions();
+            }
+
+            this.setState({
+              selectedIndex: selectedIndex + 1
+            });
+          }
+
+          break;
+
+        case 38:
+          if (selectedIndex === 0) {
+            this.setState({
+              selectedIndex: totalIndex - 1
+            });
+          } else {
+            this.setState({
+              selectedIndex: selectedIndex - 1
+            });
+          }
+
+          break;
+
+        case 13:
+          onClick && onClick(options[selectedIndex].name, e);
+          onTogglePopup && onTogglePopup(isPopupOpen);
+          togglePopup(e, boxPosition);
+          break;
+
+        default:
+          break;
+      }
+    } else {
+      if (keyCode === 13 || keyCode === 40) {
+        togglePopup(e, boxPosition);
+      }
+    }
+  }
+
+  searchList(value) {
+    let {
+      options,
+      keyName
+    } = this.props;
+    let foptions = options.filter(dept => dept[keyName].toLowerCase().indexOf(value.toLowerCase()) != -1);
+    return foptions;
+  }
+
+  handleChange(value, e) {
+    let foptions = this.searchList(value);
+    this.setState({
+      searchString: value,
+      selectedIndex: -1,
+      options: foptions
+    });
+  }
+
+  onSearchClear() {
+    let foptions = this.searchList('');
+    this.setState({
+      searchString: '',
+      options: foptions
+    });
+  }
+
+  handleMouseEnter(id, value, index, e) {
+    this.setState({
+      selectedIndex: index
+    });
+  }
+
+  handleScroll(e) {
+    const {
+      isNextOptions,
+      getNextOptions
+    } = this.props;
+
+    if (e.target.scrollTop + e.target.offsetHeight > e.target.scrollHeight - 1) {
+      isNextOptions && getNextOptions && getNextOptions(e);
+    }
+  }
+
+  render() {
+    let {
+      options,
+      selectedIndex
+    } = this.state;
+    let {
+      value,
+      removeClose,
+      boxSize,
+      keyName,
+      idName,
+      title,
+      isSearch,
+      isArrow,
+      placeHolderText,
+      className,
+      right,
+      left,
+      top,
+      bottom,
+      isPopupOpen: isOpen,
+      isPopupReady,
+      position,
+      getTargetRef,
+      getContainerRef,
+      dataId,
+      searchBoxSize,
+      searchEmptyHint,
+      searchErrorText,
+      activeStyle,
+      showOnHover = false,
+      isDisabled,
+      showIconOnHover,
+      isReadOnly,
+      hoverStyle,
+      isEditable,
+      needTick,
+      dataTitle,
+      isDataLoaded,
+      children,
+      targetAlign,
+      needResponsive,
+      arrowIconPosition,
+      statusColor,
+      needExternalPopupState = false,
+      isPopupActive = false
+    } = this.props;
+    let isPopupOpen = needExternalPopupState ? isPopupActive && isOpen : isOpen;
+    let {
+      searchString
+    } = this.state;
+    let containerClass = `${className ? className : ''} ${isPopupReady ? activeStyle ? activeStyle : '' : showIconOnHover ? style.hoverIcon : ''} ${isDisabled ? commonStyle.disabled : isReadOnly ? style.readOnly : !isEditable ? style.cursorDefault : !showOnHover ? `${style.cursor} ${hoverStyle ? hoverStyle : ''}` : `${hoverStyle ? hoverStyle : ''} ${style.cursorDefault}`}`;
+    let ariaTitleId = this.getAriaId();
+    return /*#__PURE__*/React.createElement("div", {
+      className: style.posRel,
+      onMouseEnter: showOnHover && !isDisabled && !isReadOnly && isEditable ? this.handleTogglePopup : undefined,
+      onMouseLeave: showOnHover && !isDisabled && !isReadOnly && isEditable ? this.handleTogglePopup : undefined
+    }, /*#__PURE__*/React.createElement(Container, {
+      tagName: "button",
+      alignBox: "row",
+      className: `${style.container} ${containerClass} ${btnStyle.buttonReset}`,
+      onMouseDown: !showOnHover && !isDisabled && !isReadOnly && isEditable ? this.handleTogglePopup : null,
+      eleRef: getTargetRef,
+      align: targetAlign,
+      isCover: false,
+      dataId: dataId,
+      onClick: removeClose,
+      disabled: isDisabled || isReadOnly ? true : false,
+      "aria-haspopup": true,
+      "aria-expanded": isPopupOpen && isEditable ? true : false
+    }, isEditable ? /*#__PURE__*/React.createElement("div", {
+      className: style.hiddenInput
+    }, /*#__PURE__*/React.createElement(TextBox, {
+      type: "text",
+      inputRef: this.inputRef,
+      onKeyDown: this.handleKeyDown,
+      needAppearance: false,
+      placeHolder: placeHolderText
+    })) : null, children ? children : /*#__PURE__*/React.createElement(Box, {
+      className: `${style.value} toggleDropText`,
+      shrink: true,
+      tagName: "span",
+      "data-title": dataTitle
+    }, value), isEditable ? /*#__PURE__*/React.createElement(Icon, {
+      "aria-hidden": true,
+      size: "7",
+      name: "ZD-down",
+      iconClass: `${'toggleDropIcon'} ${style.arrow} ${style[`${arrowIconPosition}_arrow`]}`,
+      dataId: "statusdownarrow"
+    }) : null), isPopupOpen && isEditable ? /*#__PURE__*/React.createElement(DropBox, {
+      boxPosition: position,
+      isActive: isPopupReady,
+      onClick: removeClose,
+      size: boxSize,
+      right: right,
+      left: left,
+      top: top,
+      bottom: bottom,
+      isArrow: isArrow,
+      isAnimate: true,
+      getRef: getContainerRef,
+      customClass: {
+        customDropBoxWrap: style.dropBoxContainer
+      },
+      needResponsive: needResponsive
+    }, /*#__PURE__*/React.createElement(React.Fragment, null, isSearch ? /*#__PURE__*/React.createElement("div", {
+      className: style.search
+    }, /*#__PURE__*/React.createElement(TextBoxIcon, {
+      placeHolder: placeHolderText,
+      onChange: this.handleChange,
+      value: searchString,
+      onClear: this.onSearchClear,
+      size: searchBoxSize,
+      inputRef: this.searchInputRef,
+      onKeyDown: this.handleKeyDown,
+      a11y: {
+        ariaHaspopup: true,
+        ariaExpanded: true,
+        role: 'combobox',
+        ariaActivedescendant: value,
+        ariaOwns: ariaTitleId
+      }
+    })) : null, title && options.length != 0 && /*#__PURE__*/React.createElement("div", {
+      className: style.title
+    }, /*#__PURE__*/React.createElement(DropDownHeading, {
+      htmlId: ariaTitleId,
+      text: title,
+      a11y: {
+        role: 'heading'
+      }
+    })), /*#__PURE__*/React.createElement(Box, {
+      scroll: "vertical",
+      dataId: `${dataId}_list`,
+      className: style.maxHgt,
+      eleRef: this.scrollContentRef,
+      onScroll: this.handleScroll,
+      role: isSearch ? 'listbox' : 'menu',
+      "aria-labelledby": ariaTitleId,
+      tabindex: "0"
+    }, options.length != 0 && isDataLoaded ? /*#__PURE__*/React.createElement(React.Fragment, null, options.map((item, i) => /*#__PURE__*/React.createElement(React.Fragment, {
+      key: i
+    }, /*#__PURE__*/React.createElement(StatusListItem, {
+      dataId: `dataid_${i}`,
+      value: item[keyName],
+      id: item[idName],
+      active: value === item[keyName],
+      onClick: this.onSelect.bind(this, item),
+      index: i,
+      highlight: selectedIndex === i,
+      needTick: needTick,
+      needBorder: false,
+      onMouseEnter: this.handleMouseEnter,
+      getRef: this.itemRef,
+      bulletColor: item[statusColor],
+      title: item[keyName],
+      a11y: {
+        role: isSearch ? 'option' : 'menuitem',
+        ariaSelected: value === item[keyName]
+      }
+    })))) : isDataLoaded ? /*#__PURE__*/React.createElement(CommonEmptyState, {
+      className: style.svgWrapper,
+      title: searchErrorText || 'oops !',
+      description: searchEmptyHint,
+      size: "small",
+      getEmptyState: this.emptySearchSVG
+    }) : /*#__PURE__*/React.createElement("div", {
+      className: style.loader
+    }, /*#__PURE__*/React.createElement(Loader, null))))) : null);
+  }
+
+}
+
+if (false) {
+  StatusDropdown.docs = {
+    componentGroup: 'Molecule'
+  };
+}
+
+StatusDropdown.defaultProps = {
+  keyName: 'name',
+  idName: 'key',
+  isArrow: false,
+  searchBoxSize: 'small',
+  isDisabled: false,
+  showIconOnHover: false,
+  isReadOnly: false,
+  isEditable: true,
+  isDataLoaded: true,
+  needTick: true,
+  targetAlign: 'vertical',
+  needResponsive: true,
+  arrowIconPosition: 'default',
+  boxSize: 'medium',
+  needExternalPopupState: false,
+  statusColor: 'statusColor'
+};
+StatusDropdown.propTypes = {
+  activeStyle: PropTypes.string,
+  arrowIconPosition: PropTypes.oneOf(['default', 'overlay']),
+  bottom: PropTypes.number,
+  boxPosition: PropTypes.oneOf(['bottomRight', 'bottomLeft', 'bottomCenter', 'topRight', 'topLeft', 'topCenter', 'rightTop', 'rightBottom', 'rightCenter', 'leftTop', 'leftBottom', 'leftCenter']),
+  boxSize: PropTypes.oneOf(['small', 'medium', 'mlarge', 'large']),
+  children: PropTypes.node,
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  dataTitle: PropTypes.string,
+  getContainerRef: PropTypes.func,
+  getNextOptions: PropTypes.func,
+  getTargetRef: PropTypes.func,
+  hoverStyle: PropTypes.string,
+  idName: PropTypes.string,
+  isArrow: PropTypes.bool,
+  isDataLoaded: PropTypes.bool,
+  isDataLoaded: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  isEditable: PropTypes.bool,
+  isNextOptions: PropTypes.bool,
+  isPopupActive: PropTypes.bool,
+  isPopupOpen: PropTypes.bool,
+  isPopupReady: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  isSearch: PropTypes.bool,
+  keyName: PropTypes.string,
+  left: PropTypes.number,
+  needExternalPopupState: PropTypes.bool,
+  needResponsive: PropTypes.bool,
+  needTick: PropTypes.bool,
+  onClick: PropTypes.func,
+  onTogglePopup: PropTypes.func,
+  options: PropTypes.array.isRequired,
+  placeHolderText: PropTypes.string,
+  position: PropTypes.string,
+  removeClose: PropTypes.func,
+  right: PropTypes.number,
+  searchBoxSize: PropTypes.oneOf(['small', 'medium', 'xmedium']),
+  searchEmptyHint: PropTypes.string,
+  searchErrorText: PropTypes.string,
+  showIconOnHover: PropTypes.bool,
+  showOnHover: PropTypes.bool,
+  statusColor: PropTypes.string,
+  targetAlign: PropTypes.oneOf(['vertical', 'horizontal', 'both', 'top', 'right', 'bottom', 'left', 'between', 'around']),
+  title: PropTypes.string,
+  togglePopup: PropTypes.func,
+  value: PropTypes.node
+};
+export default Popup(StatusDropdown);

package/{src/dropdown/ToggleDropDown/ToggleDropDown.module.css → es/list/status/StatusDropdown/StatusDropdown.module.css}

@@ -1,16 +1,33 @@
+.container {
+  max-width: 100%;
+}
 .posRel {
   position: relative;
 }
 .maxHgt {
-  max-height: var(--zd_size250);
+  max-height: var(--zd_size265);
   padding: var(--zd_size10) 0;
 }
 .title {
-  padding-top: var(--zd_size8);
+  padding-top: var(--zd_size6);
 }
-.arrow {
+[dir=ltr] .default_arrow, [dir=ltr] .overlay_arrow {
   padding: 0 0 0 var(--zd_size5);
 }
+[dir=rtl] .default_arrow, [dir=rtl] .overlay_arrow {
+  padding: 0 var(--zd_size5) 0 0;
+}
+.overlay_arrow {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%) perspective(1px);
+}
+[dir=ltr] .overlay_arrow {
+  left: 100%;
+}
+[dir=rtl] .overlay_arrow {
+  right: 100%;
+}
 .hoverIcon .arrow {
   opacity: 0;
   visibility: hidden;
@@ -23,7 +40,7 @@
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
 }
 .search {
-  padding: var(--zd_size6) var(--zd_size15) 0;
+  padding: var(--zd_size6) var(--zd_size20) 0;
 }
 .svgWrapper {
   padding-bottom: var(--zd_size25);
@@ -37,12 +54,18 @@
 .cursor {
   cursor: pointer;
 }
-.dropBoxContainer {
+[dir=ltr] .dropBoxContainer {
   text-align: left;
 }
-.iconBox {
+[dir=rtl] .dropBoxContainer {
+  text-align: right;
+}
+[dir=ltr] .iconBox {
   margin-right: var(--zd_size4);
 }
+[dir=rtl] .iconBox {
+  margin-left: var(--zd_size4);
+}
 .iconBox > i {
   display: block;
 }
@@ -51,12 +74,13 @@
   margin: 0 auto;
 }
 .seperatedLine {
-  border-bottom: 1px solid var(--dot_border_solitude);
   height: var(--zd_size1);
+  border-bottom: 1px solid var(--zdt_statusdropdown_line_border);
   margin: var(--zd_size9) 0 var(--zd_size10);
 }
 .hiddenInput {
   width: 0;
+  height: 0;
   opacity: 0;
 }
 .hiddenInput > input {