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

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

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

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

import style from "../../../../form/fields/Fields.module.css";

function MultiSelectField(props) {
  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,
    onChange,
    onDropBoxOpen,
    onSearch,
    getNextOptions,
    getRef
  } = props;
  const {
    LabelProps = {},
    MultiSelectProps = {},
    ValidationMessageProps1 = {},
    ValidationMessageProps2 = {}
  } = customProps;
  const getNextId = useUniqueId();
  const multiSelectBox = useRef(null);
  let isDarkPalette = palette === 'dark';
  let uniqueId = htmlId ? htmlId : getNextId();

  function handleChange(selectedValueIds, selectedValues) {
    onChange && onChange(id, selectedValueIds, selectedValues);
  }

  function handleDropBoxOpen() {
    return onDropBoxOpen && onDropBoxOpen(id);
  }

  function handleSearch(searchStr) {
    return onSearch && onSearch(searchStr, {
      id
    });
  }

  function handleGetNextOptions(searchStr) {
    return getNextOptions && getNextOptions(searchStr, {
      id
    });
  }

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


  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: handleChange,
    selectedOptions: selectedOptions,
    getRef: 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: handleGetNextOptions,
    onSearch: handleSearch,
    onDropBoxOpen: handleDropBoxOpen,
    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;
const MemoizedMultiSelectField = /*#__PURE__*/memo(MultiSelectField);
MemoizedMultiSelectField.propTypes = propTypes;
MemoizedMultiSelectField.defaultProps = defaultProps;
MemoizedMultiSelectField.displayName = 'MultiSelectField';
export default MemoizedMultiSelectField;