@fesjs/fes-design/es/select/optionList.js

fes-design for PC

import { defineComponent, computed, createVNode, Fragment, createTextVNode } from 'vue';
import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
import Scrollbar from '../scrollbar/scrollbar.js';
import Ellipsis from '../ellipsis/ellipsis';
import VirtualList from '../virtual-list/virtualList';
import CheckOutlined from '../icon/CheckOutlined';
import { noop } from '../_util/utils';
import { useLocale } from '../config-provider/useLocale';
import TextHightlight from '../text-highlight';
import { PADDING_LEFT_BASE, PADDING_LEFT_INDENT } from './const';
import { selectProps } from './props';

function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
const optionListProps = {
  prefixCls: String,
  containerStyle: {
    type: Object
  },
  options: {
    type: Array,
    default() {
      return [];
    }
  },
  virtualScroll: selectProps.virtualScroll,
  isSelect: {
    type: Function,
    default: noop
  },
  onSelect: {
    type: Function,
    default: noop
  },
  onHover: {
    type: Function,
    default: noop
  },
  isLimit: {
    type: Boolean
  },
  emptyText: String,
  renderOption: Function,
  renderEmpty: Function,
  hoverOptionValue: [String, Number, Object],
  filterText: String,
  filterTextHighlight: Boolean
};
var optionList = defineComponent({
  props: optionListProps,
  emits: ['scroll'],
  setup(props, _ref) {
    let {
      emit
    } = _ref;
    const {
      t
    } = useLocale();
    const getOptionStyle = _ref2 => {
      let {
        level = 1
      } = _ref2;
      return {
        paddingLeft: `${PADDING_LEFT_BASE + (level - 1) * PADDING_LEFT_INDENT}px`
      };
    };
    const enableVirtualScroll = computed(() => {
      if (typeof props.virtualScroll === 'boolean') {
        return props.virtualScroll ? props.options.length > 50 : false;
      }
      if (typeof props.virtualScroll === 'number') {
        return props.options.length > props.virtualScroll;
      }
      return true;
    });
    const renderLabel = (option, isSelected, prefixCls) => {
      var _slots, _slots2;
      if (option.__isGroup && (_slots = option.slots) !== null && _slots !== void 0 && _slots.label) {
        return option.slots.label(_objectSpread(_objectSpread({}, option), {}, {
          isSelected
        }));
      }
      if (!option.__isGroup && (_slots2 = option.slots) !== null && _slots2 !== void 0 && _slots2.default) {
        return option.slots.default(_objectSpread(_objectSpread({}, option), {}, {
          isSelected
        }));
      }
      if (props.renderOption) {
        return props.renderOption(_objectSpread(_objectSpread({}, option), {}, {
          isSelected
        }));
      }
      if (option.label) {
        return createVNode(Fragment, null, [createVNode(Ellipsis, {
          "class": `${prefixCls}-label`
        }, {
          default: () => [props.filterTextHighlight && props.filterText && !option.__cache ? createVNode(TextHightlight, {
            "strict": true,
            "searchValues": [props.filterText]
          }, {
            default: () => [option.label]
          }) : option.label, option.__cache && createVNode("span", {
            "class": `${prefixCls}-label-tip`
          }, [createTextVNode("- "), t('select.tagOption')])]
        }), createVNode(CheckOutlined, {
          "class": `${prefixCls}-checked-icon ${isSelected ? 'is-selected' : ''}`
        }, null)]);
      }
      return null;
    };

    // 渲染每个分组
    const renderGroupOption = option => {
      const isSelected = false;
      const prefixCls = `${props.prefixCls}-group-option`;
      const classList = [prefixCls].filter(Boolean);
      return createVNode("div", {
        "class": classList,
        "style": getOptionStyle({
          level: option.__level
        })
      }, [renderLabel(option, isSelected, prefixCls)]);
    };

    // 渲染每个option
    const renderOption = option => {
      const value = option.value;
      const isSelected = props.isSelect(value);
      const isHover = props.hoverOptionValue === option.value;
      const prefixCls = `${props.prefixCls}-option`;
      const classList = [prefixCls, isSelected && 'is-checked', isHover && 'is-hover', (option.disabled || !isSelected && props.isLimit) && 'is-disabled'].filter(Boolean);
      return createVNode("div", {
        "class": classList,
        "style": getOptionStyle({
          level: option.__level
        }),
        "onClick": () => {
          if (option.disabled) {
            return;
          }
          props.onSelect(value, option);
        },
        "onMouseover": () => {
          if (option.disabled) {
            return;
          }
          props.onHover(option);
        }
      }, [renderLabel(option, isSelected, prefixCls)]);
    };
    const renderDefault = _ref3 => {
      let {
        source
      } = _ref3;
      return source.__isGroup ? renderGroupOption(source) : renderOption(source);
    };
    const inValidValueKey = '_ALL_KEY_';
    return () => enableVirtualScroll.value ? createVNode(VirtualList, {
      "onScroll": event => {
        emit('scroll', event);
      },
      "dataSources": props.options,
      "dataKey": data =>
      // 兼容全部选项，value为空值的选项
      data.value === null || data.value === undefined ? inValidValueKey + String(data.value) : data.value,
      "estimateSize": 32,
      "keeps": 14,
      "style": props.containerStyle,
      "class": `${props.prefixCls}-dropdown is-max-height`
    }, {
      default: renderDefault
    }) : props.options.length ? createVNode(Scrollbar, {
      "onScroll": event => {
        emit('scroll', event);
      },
      "containerStyle": props.containerStyle,
      "containerClass": `${props.prefixCls}-dropdown`
    }, {
      default: () => [props.options.map(option => {
        return option.__isGroup ? renderGroupOption(option) : renderOption(option);
      })]
    }) : props.renderEmpty ? createVNode("div", {
      "class": [`${props.prefixCls}-dropdown`],
      "style": props.containerStyle
    }, [props.renderEmpty()]) : createVNode("div", {
      "class": [`${props.prefixCls}-dropdown`, `${props.prefixCls}-null`],
      "style": props.containerStyle
    }, [props.emptyText]);
  }
});

export { optionList as default };