@zohodesk/dot/es/form/fields/MultiSelectField/MultiSelectField.js

In this Library, we Provide Some Basic Components to Build Your Application

/**** Libraries ****/
import React, { PureComponent } from 'react';
import { defaultProps } from "./props/defaultProps";
import { propTypes } from "./props/propTypes";
/**** Components ****/

import Label from '@zohodesk/components/lib/Label/Label';
import MultiSelect from '@zohodesk/components/lib/MultiSelect/MultiSelect';
import ValidationMessage from "../ValidationMessage/ValidationMessage";
import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
import FieldContainer from "../FieldContainer/FieldContainer";
/** CSS */

import style from "../Fields.module.css";
export default class MultiSelectField extends PureComponent {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.handleGetRef = this.handleGetRef.bind(this);
    this.onDropBoxOpen = this.onDropBoxOpen.bind(this); // this.handleLabelClick = this.handleLabelClick.bind(this);

    this.onSearch = this.onSearch.bind(this);
    this.getNextOptions = this.getNextOptions.bind(this);
    this.getNextId = getUniqueId(this);
  }

  handleChange(selectedValueIds, selectedValues) {
    let {
      id,
      onChange
    } = this.props;
    onChange && onChange(id, selectedValueIds, selectedValues);
  }

  onDropBoxOpen() {
    let {
      onDropBoxOpen,
      id
    } = this.props;
    return onDropBoxOpen && onDropBoxOpen(id);
  }

  onSearch(searchStr) {
    let {
      onSearch,
      id
    } = this.props;
    return onSearch && onSearch(searchStr, {
      id
    });
  }

  getNextOptions(searchStr) {
    let {
      getNextOptions,
      id
    } = this.props;
    return getNextOptions && getNextOptions(searchStr, {
      id
    });
  }

  handleGetRef(el) {
    let {
      getRef,
      id
    } = this.props;
    this.multiSelectBox = el;
    getRef && getRef(el, id);
  } // handleLabelClick() {
  //   let { isFocusOnLabelClick } = this.props;
  //   if (
  //     isFocusOnLabelClick &&
  //     this.multiSelectBox &&
  //     this.multiSelectBox.focus
  //   ) {
  //     this.multiSelectBox.focus();
  //   }
  // }


  render() {
    let {
      labelName,
      id,
      isMandatory,
      options,
      selectedOptions,
      needSelectAll,
      selectAllText,
      isAnimate,
      emptyMessage,
      size,
      variant,
      textBoxSize,
      animationStyle,
      validationMessage,
      validationPalette,
      isReadOnly,
      errorType,
      isDisabled,
      title,
      dataId,
      dataSelectorId,
      validationRuleMessage,
      validationRulePalette,
      onKeyDown,
      infoText,
      borderColor,
      placeHolder,
      fieldSize,
      valueField,
      textField,
      isNextOptions,
      isSearching,
      popupGroup,
      labelPalette,
      palette,
      lockedInfoText,
      isLocked,
      htmlId,
      children,
      customChildrenClass,
      onFocus,
      customProps,
      i18nKeys,
      renderLabelProps
    } = this.props;
    const {
      LabelProps = {},
      MultiSelectProps = {},
      ValidationMessageProps1 = {},
      ValidationMessageProps2 = {}
    } = customProps;
    let isDarkPalette = palette === 'dark';
    let uniqueId = htmlId ? htmlId : this.getNextId();
    return /*#__PURE__*/React.createElement("div", {
      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
      "data-title": isDisabled ? title : null,
      "data-selector-id": dataSelectorId
    }, labelName && /*#__PURE__*/React.createElement(FieldContainer, {
      infoText: infoText,
      isLocked: isLocked,
      lockedInfoText: lockedInfoText,
      renderProps: renderLabelProps
    }, /*#__PURE__*/React.createElement(Label, {
      text: labelName,
      id: id,
      size: fieldSize === 'small' ? 'small' : 'medium',
      palette: isDarkPalette ? 'dark' : isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette // onClick={this.handleLabelClick}
      ,
      customClass: `${style.fieldLabel} ${isMandatory ? style.labelMandatory : ''}`,
      dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
      htmlFor: uniqueId,
      ...LabelProps
    })), /*#__PURE__*/React.createElement(MultiSelect, {
      options: options,
      onChange: this.handleChange,
      selectedOptions: selectedOptions,
      getRef: this.handleGetRef,
      isReadOnly: isReadOnly,
      needSelectAll: needSelectAll,
      selectAllText: selectAllText,
      isAnimate: isAnimate,
      emptyMessage: emptyMessage,
      textBoxSize: textBoxSize,
      variant: variant,
      size: size,
      animationStyle: animationStyle,
      dataId: dataId,
      onKeyDown: onKeyDown,
      borderColor: borderColor,
      placeHolder: placeHolder,
      isDisabled: isDisabled,
      textField: textField,
      valueField: valueField,
      getNextOptions: this.getNextOptions,
      onSearch: this.onSearch,
      onDropBoxOpen: this.onDropBoxOpen,
      popupGroup: popupGroup,
      isNextOptions: isNextOptions,
      isSearching: isSearching,
      palette: palette,
      i18nKeys: i18nKeys,
      htmlId: uniqueId,
      customChildrenClass: customChildrenClass,
      onFocus: onFocus,
      ...MultiSelectProps,
      ariaLabelledby: uniqueId
    }, children ? children : null), validationMessage && /*#__PURE__*/React.createElement(ValidationMessage, {
      text: validationMessage,
      palette: validationPalette,
      type: errorType,
      dataId: `${dataId}_ValidationMessage`,
      htmlFor: uniqueId,
      ...ValidationMessageProps1
    }), validationRuleMessage && /*#__PURE__*/React.createElement(ValidationMessage, {
      text: validationRuleMessage,
      palette: validationRulePalette,
      type: errorType,
      dataId: `${dataId}_ValidationRuleMessage`,
      htmlFor: uniqueId,
      ...ValidationMessageProps2
    }));
  }

}
MultiSelectField.propTypes = propTypes;
MultiSelectField.defaultProps = defaultProps; // if (__DOCS__) {
//   MultiSelectField.docs = {
//     componentGroup: 'Form Fields',
//     folderName: 'General'
//   };
// }