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

package/src/dropdown/ToggleDropDown/ToggleDropDown.js

@@ -1,598 +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 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 class ToggleDropDown extends React.Component {
-  constructor(props) {
-    super(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);
-  }
-
-  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 } = this.props;
-    !isPopupOpen && onSelectLabel && onSelectLabel(e);
-    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 } = this.props;
-    onClick && onClick(e, element);
-    togglePopup(e);
-  }
-
-  componentDidUpdate(prevProps) {
-    let { isPopupOpen, isSearch, idName } = this.props;
-    let { selectedIndex, options, seperatedOptions } = this.state;
-    if (prevProps.isPopupOpen != isPopupOpen) {
-      setTimeout(() => {
-        isPopupOpen
-          ? isSearch
-            ? this.searchInput.focus()
-            : this.hiddenInput.focus()
-          : this.hiddenInput.focus();
-      }, 10);
-    }
-    let mergeOptions = seperatedOptions
-      ? options.concat(seperatedOptions)
-      : options;
-    let option = mergeOptions[selectedIndex];
-    let id = (option && option[idName]) || {};
-    let selSuggestion = this[`suggestion_${id}`];
-    if (isPopupOpen) {
-      this.optionsContainer && scrollTo(this.optionsContainer, selSuggestion);
-    }
-  }
-
-  handleKeyDown(e) {
-    let { keyCode } = e;
-    let { selectedIndex, options, seperatedOptions } = this.state;
-    let totalIndex = seperatedOptions
-      ? options.length + seperatedOptions.length
-      : options.length;
-    let mergeOptions = seperatedOptions
-      ? options.concat(seperatedOptions)
-      : options;
-    let {
-      togglePopup,
-      onClick,
-      boxPosition,
-      isPopupOpen,
-      isNextOptions,
-      getNextOptions
-    } = 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(e, mergeOptions[selectedIndex]);
-        togglePopup(e, boxPosition);
-        break;
-    }
-  }
-
-  searchList(value) {
-    let { options, keyName, seperatedOptions } = this.props;
-    let foptions = options.filter(
-      dept => dept[keyName].toLowerCase().indexOf(value.toLowerCase()) != -1
-    );
-    let fseperatedOptions =
-      seperatedOptions &&
-      seperatedOptions.filter(
-        dept => dept[keyName].toLowerCase().indexOf(value.toLowerCase()) != -1
-      );
-    let optionsObj = {
-      foptions,
-      fseperatedOptions
-    };
-    return optionsObj;
-  }
-
-  handleChange(value, e) {
-    let optionsObj = this.searchList(value);
-    this.setState({
-      searchString: value,
-      selectedIndex: -1,
-      options: optionsObj.foptions,
-      seperatedOptions: optionsObj.fseperatedOptions
-    });
-  }
-
-  onSearchClear() {
-    let optionsObj = this.searchList('');
-    this.setState({
-      searchString: '',
-      options: optionsObj.foptions,
-      seperatedOptions: optionsObj.fseperatedOptions
-    });
-  }
-
-  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, seperatedOptions } = this.state;
-    let {
-      value,
-      removeClose,
-      boxSize,
-      keyName,
-      idName,
-      title,
-      isSearch,
-      isArrow,
-      placeHolderText,
-      className,
-      right,
-      left,
-      top,
-      bottom,
-      isPopupOpen,
-      isPopupReady,
-      position,
-      getTargetRef,
-      getContainerRef,
-      dataId,
-      searchBoxSize,
-      searchEmptyHint,
-      searchErrorText,
-      activeStyle,
-      showOnHover = false,
-      isDisabled,
-      showIconOnHover,
-      isReadOnly,
-      hoverStyle,
-      isEditable,
-      iconName,
-      iconSize,
-      needTick,
-      dataTitle,
-      isDataLoaded,
-      children,
-      targetAlign,
-      needResponsive
-    } = this.props;
-    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}`
-    }`;
-    return (
-      <div
-        className={style.posRel}
-        onMouseEnter={
-          showOnHover && !isDisabled && !isReadOnly && isEditable
-            ? this.handleTogglePopup
-            : undefined
-        }
-        onMouseLeave={
-          showOnHover && !isDisabled && !isReadOnly && isEditable
-            ? this.handleTogglePopup
-            : undefined
-        }
-      >
-        <Container
-          alignBox='row'
-          className={containerClass}
-          onClick={
-            !showOnHover &&
-            !isDisabled &&
-            !isReadOnly &&
-            isEditable &&
-            this.handleTogglePopup
-          }
-          eleRef={getTargetRef}
-          align={targetAlign}
-          isCover={false}
-          dataId={dataId}
-        >
-          <div className={style.hiddenInput}>
-            <TextBox
-              type='text'
-              inputRef={this.inputRef}
-              onKeyDown={this.handleKeyDown}
-              needAppearance={false}
-            />
-          </div>
-          {children ? (
-            children
-          ) : (
-            <React.Fragment>
-              {iconName ? (
-                <Box className={style.iconBox}>
-                  <Icon name={iconName} size={iconSize} />
-                </Box>
-              ) : null}
-              <Box
-                className={`${style.value} toggleDropText`}
-                shrink
-                tagName='span'
-                data-title={dataTitle}
-              >
-                {value}
-              </Box>
-              {isEditable ? (
-                <Box
-                  className={style.arrow}
-                  dataId='statusdownarrow'
-                  tagName='span'
-                >
-                  <Icon
-                    size='6'
-                    name='ZD-blockDownArrow'
-                    iconClass='toggleDropIcon'
-                  />
-                </Box>
-              ) : null}
-            </React.Fragment>
-          )}
-        </Container>
-        {isPopupOpen ? (
-          <DropBox
-            boxPosition={position}
-            isActive={isPopupReady}
-            onClick={removeClose}
-            size={boxSize}
-            right={right}
-            left={left}
-            top={top}
-            bottom={bottom}
-            isArrow={isArrow}
-            isAnimate
-            getRef={getContainerRef}
-            className={style.dropBoxContainer}
-            needResponsive={needResponsive}
-          >
-            <React.Fragment>
-              {title && (
-                <div className={style.title}>
-                  <DropDownHeading text={title} />
-                </div>
-              )}
-              {isSearch ? (
-                <div className={style.search}>
-                  <TextBoxIcon
-                    placeHolder={placeHolderText}
-                    onChange={this.handleChange}
-                    value={searchString}
-                    onClear={this.onSearchClear}
-                    size={searchBoxSize}
-                    inputRef={this.searchInputRef}
-                    onKeyDown={this.handleKeyDown}
-                  >
-                    <Icon name='ZD-search' size='13' />
-                  </TextBoxIcon>
-                </div>
-              ) : null}
-              <Box
-                scroll='vertical'
-                dataId={`${dataId}_list`}
-                className={style.maxHgt}
-                eleRef={this.scrollContentRef}
-                onScroll={this.handleScroll}
-              >
-                {(options.length != 0 ||
-                  (seperatedOptions && seperatedOptions.length != 0)) &&
-                isDataLoaded ? (
-                  <React.Fragment>
-                    {options.length != 0 && options[0].iconName ? (
-                      <React.Fragment>
-                        {options.map((item, i) => {
-                          let { iconName, iconSize } = item;
-                          return (
-                            <ListItemWithIcon
-                              key={i}
-                              dataId={`dataid_${i}`}
-                              value={item[keyName]}
-                              id={item[idName]}
-                              active={value === item[keyName]}
-                              onClick={this.onSelect.bind(this, item)}
-                              index={i}
-                              highlight={selectedIndex === i}
-                              iconName={iconName}
-                              iconSize={iconSize}
-                              needTick={needTick}
-                              needBorder={false}
-                              onMouseEnter={this.handleMouseEnter}
-                              getRef={this.itemRef}
-                            />
-                          );
-                        })}
-                      </React.Fragment>
-                    ) : (
-                      <React.Fragment>
-                        {options.map((item, i) => {
-                          return (
-                            <ListItem
-                              key={i}
-                              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}
-                            />
-                          );
-                        })}
-                      </React.Fragment>
-                    )}
-                    {seperatedOptions && seperatedOptions.length != 0 && (
-                      <React.Fragment>
-                        {options.length != 0 && (
-                          <div className={style.seperatedLine}></div>
-                        )}
-                        {seperatedOptions[0].iconName ? (
-                          <React.Fragment>
-                            {seperatedOptions.map((item, i) => {
-                              let { iconName, iconSize } = item;
-                              return (
-                                <ListItemWithIcon
-                                  key={i}
-                                  dataId={`dataid_${i + options.length}`}
-                                  value={item[keyName]}
-                                  id={item[idName]}
-                                  active={value === item[keyName]}
-                                  onClick={this.onSelect.bind(this, item)}
-                                  index={i + options.length}
-                                  highlight={
-                                    selectedIndex === i + options.length
-                                  }
-                                  iconName={iconName}
-                                  iconSize={iconSize}
-                                  needTick={needTick}
-                                  isTick={value === item[keyName]}
-                                  onMouseEnter={this.handleMouseEnter}
-                                  getRef={this.itemRef}
-                                />
-                              );
-                            })}
-                          </React.Fragment>
-                        ) : (
-                          <React.Fragment>
-                            {seperatedOptions.map((item, i) => {
-                              return (
-                                <ListItem
-                                  key={i}
-                                  dataId={`dataid_${i + options.length}`}
-                                  value={item[keyName]}
-                                  id={item[idName]}
-                                  active={value === item[keyName]}
-                                  onClick={this.onSelect.bind(this, item)}
-                                  index={i + options.length}
-                                  highlight={
-                                    selectedIndex == i + options.length
-                                  }
-                                  needTick={needTick}
-                                  isTick={value === item[keyName]}
-                                  onMouseEnter={this.handleMouseEnter}
-                                  getRef={this.itemRef}
-                                />
-                              );
-                            })}
-                          </React.Fragment>
-                        )}
-                      </React.Fragment>
-                    )}
-                  </React.Fragment>
-                ) : isDataLoaded ? (
-                  <CommonEmptyState
-                    className={style.svgWrapper}
-                    title={searchErrorText || 'oops !'}
-                    description={searchEmptyHint}
-                  >
-                    <EmptySearch size='small' />
-                  </CommonEmptyState>
-                ) : (
-                  <div className={style.loader}>
-                    <Loader />
-                  </div>
-                )}
-              </Box>
-            </React.Fragment>
-          </DropBox>
-        ) : null}
-      </div>
-    );
-  }
-}
-if (__DOCS__) {
-  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 = {
-  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,
-  isDataLoaded: PropTypes.bool,
-  children: PropTypes.node,
-  seperatedOptions: PropTypes.array,
-  targetAlign: PropTypes.oneOf([
-    'vertical',
-    'horizontal',
-    'both',
-    'top',
-    'right',
-    'bottom',
-    'left',
-    'between',
-    'around'
-  ]),
-  isNextOptions: PropTypes.bool,
-  getNextOptions: PropTypes.func,
-  needResponsive: PropTypes.bool
-};
-
-export default Popup(ToggleDropDown);

package/src/dropdown/ToggleDropDown/docs/ToggleDropDown__default.docs.js

@@ -1,75 +0,0 @@
-import React from 'react';
-import ToggleDropDown from '../ToggleDropDown';
-
-export default class ToggleDropDown__default extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: 'All department',
-      options: [
-        {
-          value: 'All department',
-          id: 'department',
-          iconName: 'ZD-setupFields'
-        },
-        { value: 'dep1', id: 'department-1', iconName: 'ZD-setupFields' },
-        { value: 'dep2', id: 'department-2', iconName: 'ZD-setupFields' },
-        { value: 'dep3', id: 'department-3', iconName: 'ZD-setupFields' },
-        { value: 'dep4', id: 'department-4', iconName: 'ZD-setupFields' },
-        { value: 'dep5', id: 'department-5', iconName: 'ZD-setupFields' },
-        { value: 'dep6', id: 'department-6', iconName: 'ZD-setupFields' }
-      ]
-    };
-    this.onSelect = this.onSelect.bind(this);
-    this.getNextOptions = this.getNextOptions.bind(this);
-  }
-
-  onSelect(element, e) {
-    this.setState({
-      value: e.value
-    });
-  }
-
-  getNextOptions() {
-    this.setState({
-      options: [
-        {
-          value: 'All department',
-          id: 'department',
-          iconName: 'ZD-setupFields'
-        },
-        { value: 'dep1', id: 'department-1', iconName: 'ZD-setupFields' },
-        { value: 'dep2', id: 'department-2', iconName: 'ZD-setupFields' },
-        { value: 'dep3', id: 'department-3', iconName: 'ZD-setupFields' },
-        { value: 'dep4', id: 'department-4', iconName: 'ZD-setupFields' },
-        { value: 'dep5', id: 'department-5', iconName: 'ZD-setupFields' },
-        { value: 'dep6', id: 'department-6', iconName: 'ZD-setupFields' },
-        { value: 'dep7', id: 'department-7', iconName: 'ZD-setupFields' },
-        { value: 'dep8', id: 'department-8', iconName: 'ZD-setupFields' },
-        { value: 'dep9', id: 'department-9', iconName: 'ZD-setupFields' }
-      ]
-    });
-  }
-
-  render() {
-    let { options } = this.state;
-    return (
-      <div>
-        <ToggleDropDown
-          value={this.state.value}
-          dataTitle={this.state.value}
-          keyName='value'
-          onClick={this.onSelect}
-          isSearch
-          title='header'
-          options={options}
-          isNextOptions
-          getNextOptions={this.getNextOptions}
-        />
-      </div>
-    );
-  }
-}
-ToggleDropDown__default.docs = {
-  componentGroup: 'Molecule'
-};