@zohodesk/dot 1.0.0-beta.209 → 1.0.0-beta.211

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

@@ -1,488 +0,0 @@
-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() : 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,
-      isPopupOpen,
-      isNextOptions,
-      getNextOptions,
-      onTogglePopup
-    } = this.props;
-
-    if (isPopupOpen && (keyCode === 38 || keyCode === 40) && e.preventDefault) {
-      e.preventDefault(); //prevent body scroll
-    }
-
-    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;
-    }
-  }
-
-  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/es/list/status/StatusDropdown/StatusDropdown.module.css

@@ -1,89 +0,0 @@
-.container {
-  max-width: 100%;
-}
-.posRel {
-  position: relative;
-}
-.maxHgt {
-  max-height: var(--zd_size265);
-  padding: var(--zd_size10) 0;
-}
-.title {
-  padding-top: var(--zd_size6);
-}
-[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;
-}
-.hoverIcon:hover .arrow {
-  opacity: 1;
-  visibility: visible;
-}
-.value {
-  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
-}
-.search {
-  padding: var(--zd_size6) var(--zd_size20) 0;
-}
-.svgWrapper {
-  padding-bottom: var(--zd_size25);
-}
-.readOnly {
-  cursor: no-drop;
-}
-.cursorDefault {
-  cursor: default;
-}
-.cursor {
-  cursor: pointer;
-}
-[dir=ltr] .dropBoxContainer {
-  text-align: left;
-}
-[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;
-}
-.loader {
-  width: var(--zd_size40);
-  margin: 0 auto;
-}
-.seperatedLine {
-  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 {
-  width: 100%;
-  padding: 0;
-}