@beisen-phoenix/field-dropdown/lib/index.js

import _extends from "@babel/runtime/helpers/extends";
import "core-js/modules/es7.array.includes";
import "core-js/modules/es6.string.includes";
import "core-js/modules/es6.regexp.split";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { useCallback, useMemo, useState, useEffect, useRef } from 'react';
import Layer from '@beisen-phoenix/unmodeled-layer';
import Select from '@beisen-phoenix/select/';
import SingleSelect from '@beisen-phoenix/single-select-list';
import GroupSingleSelect from '@beisen-phoenix/group-single-select';
import MultipleSelect from '@beisen-phoenix/multi-select-list';
import FormControlPreview from '@beisen-phoenix/form-control-preview';
import { getFilterdOptions, getDisplayLabel } from './utils';
import './index.css';
import utils from '@beisen-phoenix/common-utils';
var classes = utils.BEMClass('fieldDropdown');

var onChange = function onChange(data) {};

var FieldDropdown = function FieldDropdown(props) {
  var _props$optionSearch = props.optionSearch,
      optionSearch = _props$optionSearch === void 0 ? false : _props$optionSearch,
      _props$showCheckAll = props.showCheckAll,
      showCheckAll = _props$showCheckAll === void 0 ? true : _props$showCheckAll,
      _props$hasError = props.hasError,
      hasError = _props$hasError === void 0 ? false : _props$hasError,
      _props$isPreview = props.isPreview,
      isPreview = _props$isPreview === void 0 ? false : _props$isPreview,
      _props$selectType = props.selectType,
      selectType = _props$selectType === void 0 ? 'single' : _props$selectType,
      _props$disabled = props.disabled,
      disabled = _props$disabled === void 0 ? false : _props$disabled,
      layerWidth = props.layerWidth,
      onBlur = props.onBlur,
      _props$selectIsActive = props.selectIsActive,
      selectIsActive = _props$selectIsActive === void 0 ? false : _props$selectIsActive,
      _props$autoFocus = props.autoFocus,
      autoFocus = _props$autoFocus === void 0 ? false : _props$autoFocus,
      _props$hostSubmit = props.hostSubmit,
      hostSubmit = _props$hostSubmit === void 0 ? false : _props$hostSubmit,
      caseSensitive = props.caseSensitive,
      optionSearchAutoFocus = props.optionSearchAutoFocus,
      _props$splitKey = props.splitKey,
      splitKey = _props$splitKey === void 0 ? ',' : _props$splitKey;
  var isSearch = disabled ? false : 'isSearch' in props ? props.isSearch : true; // 控制弹层显示与否

  var _useState = useState(autoFocus),
      _useState2 = _slicedToArray(_useState, 2),
      visible = _useState2[0],
      setVisible = _useState2[1];

  var _useState3 = useState(autoFocus),
      _useState4 = _slicedToArray(_useState3, 2),
      selectFocus = _useState4[0],
      setSelectFocus = _useState4[1];

  var layerWrapperRef = useRef();
  var isWrapperInRef = useRef(false); //input的node节点

  var inputRef = useRef();
  var isBlurRef = useRef(false);
  var isSelectClickRef = useRef(false); // 控制选择器显示的label
  // const [displayLabel, setDisplayLabel] = useState();
  // 控制弹层中选中的列表

  var _useState5 = useState(props.value || ''),
      _useState6 = _slicedToArray(_useState5, 2),
      selectedValue = _useState6[0],
      setSelectedValue = _useState6[1]; // 控制弹层中选中的列表（multiSelect模式）


  var _useState7 = useState(props.value || ''),
      _useState8 = _slicedToArray(_useState7, 2),
      selectedValueForMultiSelect = _useState8[0],
      setSelectedValueForMultiSelect = _useState8[1]; // 搜索的关键词


  var _useState9 = useState(),
      _useState10 = _slicedToArray(_useState9, 2),
      searchWord = _useState10[0],
      setSearchWord = _useState10[1];

  useEffect(function () {
    setSelectedValue(props.value || '');
  }, [props.value]);
  useEffect(function () {
    setSelectedValueForMultiSelect(props.value || '');
  }, [props.value]); //控制弹层显示与否

  var toggleLayer = useCallback(function (visible) {
    if (disabled) return; // 如果是禁用状态,需要禁止弹层展开

    if (visible) setSearchWord(''); // 打开弹层时,清除搜索内容

    visible && setSelectedValue(selectedValue);

    if (visible && selectType === 'multiple') {
      // 此操作是为了解决复选后,在没点击确定的情况下关闭弹层再打开弹层时产生的数据不一致问题
      var selectLength = selectedValue && selectedValue.split(splitKey).length;
      var tmpLength = selectedValueForMultiSelect && selectedValueForMultiSelect.split(splitKey).length;

      if (tmpLength !== selectLength) {
        setSelectedValueForMultiSelect(selectedValue);
      }
    }

    if (isSelectClickRef.current) {
      setVisible(true);
      isSelectClickRef.current = false;
    } else {
      setVisible(visible);
    }

    if (visible) setSelectFocus(true);
  }, [selectedValue, selectedValueForMultiSelect, disabled]); // 点击删除按钮时的回调

  var onDelete = useCallback(function (data) {
    if (data) {
      var val = data.map(function (item) {
        return item.value;
      }).join(splitKey);
      setSelectedValue(val);
      setSelectedValueForMultiSelect(val);
      props.onChange && props.onChange(val);
    } else {
      // 点击input 的删除按钮
      setSearchWord('');

      if (selectType !== 'multiple') {
        setSelectedValue('');
        setSelectedValueForMultiSelect('');
        props.onChange && props.onChange('');
      }
    }

    setVisible(false);
  }, [props.onChange]); // keyUp搜索时的回调

  var onSearch = useCallback(function (data) {
    setSearchWord(data);
  }, []); // 选中某个选项的时候触发

  var onSelect = useCallback(function (data) {
    if (selectType !== 'multiple') {
      setSelectedValue(data.value);
      setVisible(false);
      props.onChange && props.onChange(data.value);

      if (layerWrapperRef.current) {
        layerWrapperRef.current.focus();
      }
    } else {
      // 本次选择到的值
      var newData = data.map(function (item) {
        return item.value;
      });

      if (searchWord) {
        // 已选择的值
        var selectedArr = selectedValue && selectedValue.split(splitKey) || []; // 搜索到的值

        var searchdValue = getFilterdOptions(selectType, props.options, searchWord, caseSensitive).map(function (item) {
          return item.value;
        }); // 可能丢失的值

        var mayLost = selectedArr.filter(function (v) {
          return searchdValue.indexOf(v) > -1;
        }); // 真正丢失的值

        var realLost = mayLost.filter(function (item) {
          return !newData.includes(item);
        }); // 清除掉丢失的值

        realLost.forEach(function (item) {
          var index = selectedArr.indexOf(item);
          if (index !== -1) selectedArr.splice(index, 1);
        }); // 增加不存在的值

        for (var ind in newData) {
          if (!selectedArr.includes(newData[ind])) {
            selectedArr.push(newData[ind]);
          }
        }

        setSelectedValueForMultiSelect(selectedArr.join(splitKey));
      } else {
        setSelectedValueForMultiSelect(newData.join(splitKey));
      }

      if (layerWrapperRef.current) {
        layerWrapperRef.current.focus();
      }
    }

    setSelectFocus(true);
  }, [selectType, selectedValue, searchWord]);

  var afterOnClick = function afterOnClick(values) {
    setSelectedValue(values);
    setSearchWord('');
    setVisible(false);
  }; // 底部确定按钮 只有复选的时候会出现 点击关闭弹层


  var footer = useMemo(function () {
    var values = selectedValueForMultiSelect;
    return selectType == 'multiple' ? [{
      text: '确定',
      onClick: function onClick() {
        if (hostSubmit) {
          props.onChange && props.onChange(values, function () {
            afterOnClick(values);
          });
          afterOnClick(values);
        } else {
          props.onChange && props.onChange(values);
          afterOnClick(values);
        }

        if (layerWrapperRef.current) {
          layerWrapperRef.current.focus();
        }
      }
    }] : null;
  }, [selectType, selectedValueForMultiSelect, selectedValue, props.onChange]);

  var getSelectList = function getSelectList() {
    // 如果设置了isSearch = true 则禁用弹层的搜索功能
    // 如果设置了isSearch = false 并且设置了optionSearch = true 则开启弹层搜索功能
    // 如果设置isSearch = false 并且设置了optionSearch = false 则不开启任何搜索功能
    var canSearch = isSearch ? false : optionSearch ? true : false;
    var options = searchWord ? getFilterdOptions(selectType, props.options, searchWord, caseSensitive) : props.options;
    var selectContent;

    if (selectType == 'group') {
      selectContent = React.createElement(GroupSingleSelect, {
        searchWord: searchWord,
        value: selectedValue,
        options: options,
        onChange: onSelect,
        caseSensitive: caseSensitive,
        autoFocus: optionSearchAutoFocus
      });
    }

    if (selectType == 'multiple') {
      var selectedData = selectedValueForMultiSelect ? options.filter(function (item) {
        return selectedValueForMultiSelect.split(splitKey).includes(item.value);
      }) : undefined;
      selectContent = React.createElement(MultipleSelect, {
        searchWord: searchWord,
        showCheckAll: showCheckAll,
        defaultSelectedItems: selectedData,
        isSearch: canSearch // searchWord={searchWord}
        ,
        items: options,
        extraCls: classes({
          element: 'multiSelect'
        }),
        onChange: onSelect,
        caseSensitive: caseSensitive,
        autoFocus: optionSearchAutoFocus
      });
    }

    if (!selectContent) {
      selectContent = React.createElement(SingleSelect, {
        searchWord: searchWord,
        selectedValue: selectedValue,
        items: options,
        isSearch: canSearch,
        onChange: onSelect,
        caseSensitive: caseSensitive,
        autoFocus: optionSearchAutoFocus
      });
    }

    return selectContent;
  };

  var getPopupContainer = useCallback(function () {// debugger
    // if(props.getPopupContainer){
    //   return getPopupContainer();
    // }else{
    //   return layerWrapperRef.current
    // }
  }, [props.getPopupContainer]);
  var handleWrapperBlur = useCallback(function () {
    if (!visible && !isWrapperInRef.current && !isBlurRef.current) {
      onBlur && onBlur();
      isBlurRef.current = true;
      setTimeout(function () {
        isBlurRef.current = false;
      }, 10);
      setSelectFocus(false);
    }
  }, [visible, onBlur]); //为了解决多选带搜索时，不能触发外层div的blur事件

  var handleWrapperMouseEnterLeave = useCallback(function (flag) {
    return function (e) {
      isWrapperInRef.current = flag;
    };
  }, []);
  var getInputRef = useCallback(function (node) {
    inputRef.current = node;
  }, []); // useEffect(() => {
  // 	if (autoFocus) {
  // 		console.log(
  // 			'aaaa',
  // 			getDisplayLabel(
  // 				props.options,
  // 				selectType,
  // 				selectedValue,
  // 				props.disabled && props.displayLabel
  // 			)
  // 		);
  // 		inputRef.current && inputRef.current.click();
  // 	}
  // }, []);
  //复杂参数控制，是为了实现给外界onBlur能够在正确的时机调用

  useEffect(function () {
    if (inputRef.current) {
      inputRef.current.onblur = function () {
        if (!visible && !isWrapperInRef.current && !isBlurRef.current) {
          onBlur && onBlur();
          setSelectFocus(false);
          isBlurRef.current = true;
          setTimeout(function () {
            isBlurRef.current = false;
          }, 10);
        }
      };
    }
  }, [onBlur, visible]);
  useEffect(function () {
    if (autoFocus && inputRef.current) {
      inputRef.current.focus();
    }
  }, []); //select的点击事件

  var handleSelectClick = useCallback(function () {
    if (isSearch) {
      isSelectClickRef.current = true;
    }
  }, [isSearch]);

  if (isPreview) {
    return React.createElement(FormControlPreview, {
      multiple: selectType === 'multiple',
      value: getDisplayLabel(props.options, selectType, selectedValue, props.displayLabel, splitKey)
    });
  }

  return React.createElement(Layer, {
    blockContainer: true,
    trigger: ['click'],
    content: visible ? getSelectList() : null,
    visible: visible,
    zIndex: props.zIndex,
    onVisibleChange: toggleLayer,
    footer: props.options.length > 0 ? footer : null,
    width: layerWidth,
    getPopupContainer: props.getPopupContainer,
    destroyPopupOnHide: true,
    stretch: props.stretch
  }, React.createElement("div", {
    tabIndex: 2,
    className: "select_dropdown_wrapper",
    onMouseEnter: handleWrapperMouseEnterLeave(true),
    onMouseLeave: handleWrapperMouseEnterLeave(false),
    ref: layerWrapperRef,
    onBlur: handleWrapperBlur
  }, React.createElement(Select, _extends({}, props, {
    extraCls: classes({
      element: '',
      extra: props.extraCls
    }),
    isSearch: isSearch,
    error: hasError,
    inputRef: getInputRef,
    onClick: handleSelectClick,
    value: getDisplayLabel(props.options, selectType, selectedValue, props.displayLabel, splitKey),
    isMultiSelect: selectType == 'multiple',
    onDelete: onDelete,
    isActive: selectIsActive ? selectFocus : visible,
    onSearch: onSearch,
    onChange: onChange,
    exitSearch: !visible
  }))));
};

FieldDropdown.defaultProps = {
  options: []
};
export default FieldDropdown;