@zohodesk/dot 1.0.0-beta.21 → 1.0.0-beta.212

package/es/dropdown/ToggleDropDown/ToggleDropDown.js

@@ -1,588 +0,0 @@
-import _defineProperty from 'babel-runtime/helpers/defineProperty';
-import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
-import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
-import _createClass from 'babel-runtime/helpers/createClass';
-import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
-import _inherits from 'babel-runtime/helpers/inherits';
-
-var _ToggleDropDown$propT;
-
-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 commonStyle from '@zohodesk/components/lib/common/common.module.css';
-import Popup from '@zohodesk/components/lib/Popup/Popup';
-import { Box, Container } from '@zohodesk/components/lib/Layout';
-import ListItem from '@zohodesk/components/lib/ListItem/ListItem';
-import ListItemWithIcon from '@zohodesk/components/lib/ListItem/ListItemWithIcon';
-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 CommonEmptyState from '../../emptystate/CommonEmptyState/CommonEmptyState';
-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 style from './ToggleDropDown.module.css';
-
-export var ToggleDropDown = function (_React$Component) {
-  _inherits(ToggleDropDown, _React$Component);
-
-  function ToggleDropDown(props) {
-    _classCallCheck(this, ToggleDropDown);
-
-    var _this = _possibleConstructorReturn(this, (ToggleDropDown.__proto__ || _Object$getPrototypeOf(ToggleDropDown)).call(this, props));
-
-    _this.state = {
-      searchString: '',
-      selectedIndex: 0,
-      options: props.options,
-      seperatedOptions: props.seperatedOptions
-    };
-    _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);
-    return _this;
-  }
-
-  _createClass(ToggleDropDown, [{
-    key: 'inputRef',
-    value: function inputRef(el) {
-      this.hiddenInput = el;
-    }
-  }, {
-    key: 'itemRef',
-    value: function itemRef(ele, index, id) {
-      this['suggestion_' + id] = ele;
-    }
-  }, {
-    key: 'searchInputRef',
-    value: function searchInputRef(el) {
-      this.searchInput = el;
-    }
-  }, {
-    key: 'handleTogglePopup',
-    value: function handleTogglePopup(e) {
-      var _props = this.props,
-          togglePopup = _props.togglePopup,
-          boxPosition = _props.boxPosition,
-          onSelectLabel = _props.onSelectLabel,
-          isPopupOpen = _props.isPopupOpen;
-
-      !isPopupOpen && onSelectLabel && onSelectLabel(e);
-      togglePopup(e, boxPosition);
-    }
-  }, {
-    key: 'scrollContentRef',
-    value: function scrollContentRef(el) {
-      var isPopupOpen = this.props.isPopupOpen;
-
-      if (isPopupOpen) {
-        this.optionsContainer = el;
-      }
-    }
-  }, {
-    key: 'componentWillReceiveProps',
-    value: function componentWillReceiveProps(nextProps) {
-      if (nextProps.options.length != this.props.options.length) {
-        this.setState({
-          options: nextProps.options
-        });
-      }
-    }
-  }, {
-    key: 'onSelect',
-    value: function onSelect(element, e) {
-      var _props2 = this.props,
-          onClick = _props2.onClick,
-          togglePopup = _props2.togglePopup;
-
-      onClick && onClick(e, element);
-      togglePopup(e);
-    }
-  }, {
-    key: 'componentDidUpdate',
-    value: function componentDidUpdate(prevProps) {
-      var _this2 = this;
-
-      var _props3 = this.props,
-          isPopupOpen = _props3.isPopupOpen,
-          isSearch = _props3.isSearch,
-          idName = _props3.idName;
-      var _state = this.state,
-          selectedIndex = _state.selectedIndex,
-          options = _state.options,
-          seperatedOptions = _state.seperatedOptions;
-
-      if (prevProps.isPopupOpen != isPopupOpen) {
-        setTimeout(function () {
-          isPopupOpen ? isSearch ? _this2.searchInput.focus() : _this2.hiddenInput.focus() : _this2.hiddenInput.focus();
-        }, 10);
-      }
-      var mergeOptions = seperatedOptions ? options.concat(seperatedOptions) : options;
-      var option = mergeOptions[selectedIndex];
-      var id = option && option[idName] || {};
-      var selSuggestion = this['suggestion_' + id];
-      if (isPopupOpen) {
-        this.optionsContainer && scrollTo(this.optionsContainer, selSuggestion);
-      }
-    }
-  }, {
-    key: 'handleKeyDown',
-    value: function handleKeyDown(e) {
-      var keyCode = e.keyCode;
-      var _state2 = this.state,
-          selectedIndex = _state2.selectedIndex,
-          options = _state2.options,
-          seperatedOptions = _state2.seperatedOptions;
-
-      var totalIndex = seperatedOptions ? options.length + seperatedOptions.length : options.length;
-      var mergeOptions = seperatedOptions ? options.concat(seperatedOptions) : options;
-      var _props4 = this.props,
-          togglePopup = _props4.togglePopup,
-          onClick = _props4.onClick,
-          boxPosition = _props4.boxPosition,
-          isPopupOpen = _props4.isPopupOpen,
-          isNextOptions = _props4.isNextOptions,
-          getNextOptions = _props4.getNextOptions;
-
-      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(e, mergeOptions[selectedIndex]);
-          togglePopup(e, boxPosition);
-          break;
-      }
-    }
-  }, {
-    key: 'searchList',
-    value: function searchList(value) {
-      var _props5 = this.props,
-          options = _props5.options,
-          keyName = _props5.keyName,
-          seperatedOptions = _props5.seperatedOptions;
-
-      var foptions = options.filter(function (dept) {
-        return dept[keyName].toLowerCase().indexOf(value.toLowerCase()) != -1;
-      });
-      var fseperatedOptions = seperatedOptions && seperatedOptions.filter(function (dept) {
-        return dept[keyName].toLowerCase().indexOf(value.toLowerCase()) != -1;
-      });
-      var optionsObj = {
-        foptions: foptions,
-        fseperatedOptions: fseperatedOptions
-      };
-      return optionsObj;
-    }
-  }, {
-    key: 'handleChange',
-    value: function handleChange(value, e) {
-      var optionsObj = this.searchList(value);
-      this.setState({
-        searchString: value,
-        selectedIndex: -1,
-        options: optionsObj.foptions,
-        seperatedOptions: optionsObj.fseperatedOptions
-      });
-    }
-  }, {
-    key: 'onSearchClear',
-    value: function onSearchClear() {
-      var optionsObj = this.searchList('');
-      this.setState({
-        searchString: '',
-        options: optionsObj.foptions,
-        seperatedOptions: optionsObj.fseperatedOptions
-      });
-    }
-  }, {
-    key: 'handleMouseEnter',
-    value: function handleMouseEnter(id, value, index, e) {
-      this.setState({
-        selectedIndex: index
-      });
-    }
-  }, {
-    key: 'handleScroll',
-    value: function handleScroll(e) {
-      var _props6 = this.props,
-          isNextOptions = _props6.isNextOptions,
-          getNextOptions = _props6.getNextOptions;
-
-      if (e.target.scrollTop + e.target.offsetHeight > e.target.scrollHeight - 1) {
-        isNextOptions && getNextOptions && getNextOptions(e);
-      }
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      var _this3 = this;
-
-      var _state3 = this.state,
-          options = _state3.options,
-          selectedIndex = _state3.selectedIndex,
-          seperatedOptions = _state3.seperatedOptions;
-      var _props7 = this.props,
-          value = _props7.value,
-          removeClose = _props7.removeClose,
-          boxSize = _props7.boxSize,
-          keyName = _props7.keyName,
-          idName = _props7.idName,
-          title = _props7.title,
-          isSearch = _props7.isSearch,
-          isArrow = _props7.isArrow,
-          placeHolderText = _props7.placeHolderText,
-          className = _props7.className,
-          right = _props7.right,
-          left = _props7.left,
-          top = _props7.top,
-          bottom = _props7.bottom,
-          isPopupOpen = _props7.isPopupOpen,
-          isPopupReady = _props7.isPopupReady,
-          position = _props7.position,
-          getTargetRef = _props7.getTargetRef,
-          getContainerRef = _props7.getContainerRef,
-          dataId = _props7.dataId,
-          searchBoxSize = _props7.searchBoxSize,
-          searchEmptyHint = _props7.searchEmptyHint,
-          searchErrorText = _props7.searchErrorText,
-          activeStyle = _props7.activeStyle,
-          _props7$showOnHover = _props7.showOnHover,
-          showOnHover = _props7$showOnHover === undefined ? false : _props7$showOnHover,
-          isDisabled = _props7.isDisabled,
-          showIconOnHover = _props7.showIconOnHover,
-          isReadOnly = _props7.isReadOnly,
-          hoverStyle = _props7.hoverStyle,
-          isEditable = _props7.isEditable,
-          iconName = _props7.iconName,
-          iconSize = _props7.iconSize,
-          needTick = _props7.needTick,
-          dataTitle = _props7.dataTitle,
-          isDataLoaded = _props7.isDataLoaded,
-          children = _props7.children,
-          targetAlign = _props7.targetAlign,
-          needResponsive = _props7.needResponsive;
-      var searchString = this.state.searchString;
-
-      var 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);
-      return React.createElement(
-        'div',
-        {
-          className: style.posRel,
-          onMouseEnter: showOnHover && !isDisabled && !isReadOnly && isEditable ? this.handleTogglePopup : undefined,
-          onMouseLeave: showOnHover && !isDisabled && !isReadOnly && isEditable ? this.handleTogglePopup : undefined
-        },
-        React.createElement(
-          Container,
-          {
-            alignBox: 'row',
-            className: containerClass,
-            onClick: !showOnHover && !isDisabled && !isReadOnly && isEditable && this.handleTogglePopup,
-            eleRef: getTargetRef,
-            align: targetAlign,
-            isCover: false,
-            dataId: dataId
-          },
-          React.createElement(
-            'div',
-            { className: style.hiddenInput },
-            React.createElement(TextBox, {
-              type: 'text',
-              inputRef: this.inputRef,
-              onKeyDown: this.handleKeyDown,
-              needAppearance: false
-            })
-          ),
-          children ? children : React.createElement(
-            React.Fragment,
-            null,
-            iconName ? React.createElement(
-              Box,
-              { className: style.iconBox },
-              React.createElement(Icon, { name: iconName, size: iconSize })
-            ) : null,
-            React.createElement(
-              Box,
-              {
-                className: style.value + ' toggleDropText',
-                shrink: true,
-                tagName: 'span',
-                'data-title': dataTitle
-              },
-              value
-            ),
-            isEditable ? React.createElement(
-              Box,
-              {
-                className: style.arrow,
-                dataId: 'statusdownarrow',
-                tagName: 'span'
-              },
-              React.createElement(Icon, {
-                size: '6',
-                name: 'ZD-blockDownArrow',
-                iconClass: 'toggleDropIcon'
-              })
-            ) : null
-          )
-        ),
-        isPopupOpen ? 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,
-            className: style.dropBoxContainer,
-            needResponsive: needResponsive
-          },
-          React.createElement(
-            React.Fragment,
-            null,
-            title && React.createElement(
-              'div',
-              { className: style.title },
-              React.createElement(DropDownHeading, { text: title })
-            ),
-            isSearch ? React.createElement(
-              'div',
-              { className: style.search },
-              React.createElement(
-                TextBoxIcon,
-                {
-                  placeHolder: placeHolderText,
-                  onChange: this.handleChange,
-                  value: searchString,
-                  onClear: this.onSearchClear,
-                  size: searchBoxSize,
-                  inputRef: this.searchInputRef,
-                  onKeyDown: this.handleKeyDown
-                },
-                React.createElement(Icon, { name: 'ZD-search', size: '13' })
-              )
-            ) : null,
-            React.createElement(
-              Box,
-              {
-                scroll: 'vertical',
-                dataId: dataId + '_list',
-                className: style.maxHgt,
-                eleRef: this.scrollContentRef,
-                onScroll: this.handleScroll
-              },
-              (options.length != 0 || seperatedOptions && seperatedOptions.length != 0) && isDataLoaded ? React.createElement(
-                React.Fragment,
-                null,
-                options.length != 0 && options[0].iconName ? React.createElement(
-                  React.Fragment,
-                  null,
-                  options.map(function (item, i) {
-                    var iconName = item.iconName,
-                        iconSize = item.iconSize;
-
-                    return React.createElement(ListItemWithIcon, {
-                      key: i,
-                      dataId: 'dataid_' + i,
-                      value: item[keyName],
-                      id: item[idName],
-                      active: value === item[keyName],
-                      onClick: _this3.onSelect.bind(_this3, item),
-                      index: i,
-                      highlight: selectedIndex === i,
-                      iconName: iconName,
-                      iconSize: iconSize,
-                      needTick: needTick,
-                      needBorder: false,
-                      onMouseEnter: _this3.handleMouseEnter,
-                      getRef: _this3.itemRef
-                    });
-                  })
-                ) : React.createElement(
-                  React.Fragment,
-                  null,
-                  options.map(function (item, i) {
-                    return React.createElement(ListItem, {
-                      key: i,
-                      dataId: 'dataid_' + i,
-                      value: item[keyName],
-                      id: item[idName],
-                      active: value === item[keyName],
-                      onClick: _this3.onSelect.bind(_this3, item),
-                      index: i,
-                      highlight: selectedIndex === i,
-                      needTick: needTick,
-                      needBorder: false,
-                      onMouseEnter: _this3.handleMouseEnter,
-                      getRef: _this3.itemRef
-                    });
-                  })
-                ),
-                seperatedOptions && seperatedOptions.length != 0 && React.createElement(
-                  React.Fragment,
-                  null,
-                  options.length != 0 && React.createElement('div', { className: style.seperatedLine }),
-                  seperatedOptions[0].iconName ? React.createElement(
-                    React.Fragment,
-                    null,
-                    seperatedOptions.map(function (item, i) {
-                      var iconName = item.iconName,
-                          iconSize = item.iconSize;
-
-                      return React.createElement(ListItemWithIcon, {
-                        key: i,
-                        dataId: 'dataid_' + (i + options.length),
-                        value: item[keyName],
-                        id: item[idName],
-                        active: value === item[keyName],
-                        onClick: _this3.onSelect.bind(_this3, item),
-                        index: i + options.length,
-                        highlight: selectedIndex === i + options.length,
-                        iconName: iconName,
-                        iconSize: iconSize,
-                        needTick: needTick,
-                        isTick: value === item[keyName],
-                        onMouseEnter: _this3.handleMouseEnter,
-                        getRef: _this3.itemRef
-                      });
-                    })
-                  ) : React.createElement(
-                    React.Fragment,
-                    null,
-                    seperatedOptions.map(function (item, i) {
-                      return React.createElement(ListItem, {
-                        key: i,
-                        dataId: 'dataid_' + (i + options.length),
-                        value: item[keyName],
-                        id: item[idName],
-                        active: value === item[keyName],
-                        onClick: _this3.onSelect.bind(_this3, item),
-                        index: i + options.length,
-                        highlight: selectedIndex == i + options.length,
-                        needTick: needTick,
-                        isTick: value === item[keyName],
-                        onMouseEnter: _this3.handleMouseEnter,
-                        getRef: _this3.itemRef
-                      });
-                    })
-                  )
-                )
-              ) : isDataLoaded ? React.createElement(
-                CommonEmptyState,
-                {
-                  className: style.svgWrapper,
-                  title: searchErrorText || 'oops !',
-                  description: searchEmptyHint
-                },
-                React.createElement(EmptySearch, { size: 'small' })
-              ) : React.createElement(
-                'div',
-                { className: style.loader },
-                React.createElement(Loader, null)
-              )
-            )
-          )
-        ) : null
-      );
-    }
-  }]);
-
-  return ToggleDropDown;
-}(React.Component);
-if (false) {
-  ToggleDropDown.docs = {
-    componentGroup: 'Molecule'
-  };
-}
-
-ToggleDropDown.defaultProps = {
-  keyName: 'value',
-  idName: 'id',
-  isArrow: true,
-  searchBoxSize: 'small',
-  isDisabled: false,
-  showIconOnHover: false,
-  isReadOnly: false,
-  isEditable: true,
-  isDataLoaded: true,
-  needTick: true,
-  targetAlign: 'vertical',
-  needResponsive: true
-};
-
-ToggleDropDown.propTypes = (_ToggleDropDown$propT = {
-  activeStyle: PropTypes.string,
-  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']),
-  className: PropTypes.string,
-  dataId: PropTypes.string,
-  dataTitle: PropTypes.string,
-  getContainerRef: PropTypes.func,
-  getTargetRef: PropTypes.func,
-  hoverStyle: PropTypes.string,
-  iconName: PropTypes.string,
-  iconSize: PropTypes.string,
-  idName: PropTypes.string,
-  isArrow: PropTypes.bool,
-  isDataLoaded: PropTypes.bool,
-  isDisabled: PropTypes.bool,
-  isEditable: PropTypes.bool,
-  isPopupOpen: PropTypes.bool,
-  isPopupReady: PropTypes.bool,
-  isReadOnly: PropTypes.bool,
-  isSearch: PropTypes.bool,
-  keyName: PropTypes.string,
-  left: PropTypes.number,
-  needTick: PropTypes.bool,
-  onClick: 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,
-  title: PropTypes.string,
-  togglePopup: PropTypes.func,
-  value: PropTypes.node
-}, _defineProperty(_ToggleDropDown$propT, 'isDataLoaded', PropTypes.bool), _defineProperty(_ToggleDropDown$propT, 'children', PropTypes.node), _defineProperty(_ToggleDropDown$propT, 'seperatedOptions', PropTypes.array), _defineProperty(_ToggleDropDown$propT, 'targetAlign', PropTypes.oneOf(['vertical', 'horizontal', 'both', 'top', 'right', 'bottom', 'left', 'between', 'around'])), _defineProperty(_ToggleDropDown$propT, 'isNextOptions', PropTypes.bool), _defineProperty(_ToggleDropDown$propT, 'getNextOptions', PropTypes.func), _defineProperty(_ToggleDropDown$propT, 'needResponsive', PropTypes.bool), _ToggleDropDown$propT);
-
-export default Popup(ToggleDropDown);

package/es/dropdown/ToggleDropDown/ToggleDropDown.module.css

@@ -1,74 +0,0 @@
-.posRel {
-  position: relative;
-}
-.maxHgt {
-  max-height: var(--zd_size250);
-  padding: var(--zd_size10) 0;
-}
-.title {
-  padding-top: var(--zd_size8);
-}
-[dir=ltr] .arrow {
-  padding: 0 0 0 var(--zd_size5);
-}
-[dir=rtl] .arrow {
-  padding: 0 var(--zd_size5) 0 0;
-}
-.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_size15) 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(--dot_border_solitude);
-  margin: var(--zd_size9) 0 var(--zd_size10);
-}
-.hiddenInput {
-  width: 0;
-  opacity: 0;
-}
-.hiddenInput > input {
-  width: 100%;
-  padding: 0;
-}