ant-design-vue/components/vc-select/DropdownMenu.jsx

import raf from 'raf'
import PropTypes from '../_util/vue-types'
import Menu from '../vc-menu'
import scrollIntoView from 'dom-scroll-into-view'
import { getSelectKeys, preventDefaultEvent } from './util'
import { cloneElement } from '../_util/vnode'
import BaseMixin from '../_util/BaseMixin'
import { getSlotOptions, getComponentFromProp } from '../_util/props-util'

export default {
  name: 'DropdownMenu',
  mixins: [BaseMixin],
  props: {
    ariaId: PropTypes.string,
    defaultActiveFirstOption: PropTypes.bool,
    value: PropTypes.any,
    dropdownMenuStyle: PropTypes.object,
    multiple: PropTypes.bool,
    // onPopupFocus: PropTypes.func,
    // onPopupScroll: PropTypes.func,
    // onMenuDeSelect: PropTypes.func,
    // onMenuSelect: PropTypes.func,
    prefixCls: PropTypes.string,
    menuItems: PropTypes.any,
    inputValue: PropTypes.string,
    visible: PropTypes.bool,
    backfillValue: PropTypes.any,
    firstActiveValue: PropTypes.string,
    menuItemSelectedIcon: PropTypes.any,
  },

  created () {
    this.rafInstance = { cancel: () => null }
    this.lastInputValue = this.$props.inputValue
    this.lastVisible = false
  },

  mounted () {
    this.$nextTick(() => {
      this.scrollActiveItemToView()
    })
    this.lastVisible = this.$props.visible
  },
  watch: {
    visible (val) {
      if (!val) {
        this.lastVisible = val
      }
    },
  },
  updated () {
    const props = this.$props
    if (!this.prevVisible && props.visible) {
      this.$nextTick(() => {
        this.scrollActiveItemToView()
      })
    }
    this.lastVisible = props.visible
    this.lastInputValue = props.inputValue
    this.prevVisible = this.visible
  },
  beforeDestroy () {
    if (this.rafInstance && this.rafInstance.cancel) {
      this.rafInstance.cancel()
    }
  },
  methods: {
    scrollActiveItemToView () {
    // scroll into view
      const itemComponent = this.firstActiveItem && this.firstActiveItem.$el
      const props = this.$props
      const { value, visible, firstActiveValue } = props
      if (!itemComponent || !visible) {
        return
      }
      const scrollIntoViewOpts = {
        onlyScrollIfNeeded: true,
      }
      if (
        (!value || value.length === 0) && firstActiveValue
      ) {
        scrollIntoViewOpts.alignWithTop = true
      }
      // Delay to scroll since current frame item position is not ready when pre view is by filter
      // https://github.com/ant-design/ant-design/issues/11268#issuecomment-406634462
      this.rafInstance = raf(() => {
        scrollIntoView(
          itemComponent,
          this.$refs.menuRef.$el,
          scrollIntoViewOpts
        )
      })
    },

    renderMenu () {
      const props = this.$props
      const {
        menuItems,
        defaultActiveFirstOption,
        value,
        prefixCls,
        multiple,
        inputValue,
        firstActiveValue,
        dropdownMenuStyle,
        backfillValue,
        visible,
      } = props
      const menuItemSelectedIcon = getComponentFromProp(this, 'menuItemSelectedIcon')
      const { menuDeselect, menuSelect, popupScroll } = this.$listeners
      if (menuItems && menuItems.length) {
        const selectedKeys = getSelectKeys(menuItems, value)
        const menuProps = {
          props: {
            multiple,
            defaultActiveFirst: defaultActiveFirstOption,
            itemIcon: multiple ? menuItemSelectedIcon : null,
            selectedKeys,
            prefixCls: `${prefixCls}-menu`,
          },
          on: {},
          style: dropdownMenuStyle,
          ref: 'menuRef',
          attrs: {
            role: 'listbox',
          },
        }
        if (popupScroll) {
          menuProps.on.scroll = popupScroll
        }
        if (multiple) {
          menuProps.on.deselect = menuDeselect
          menuProps.on.select = menuSelect
        } else {
          menuProps.on.click = menuSelect
        }
        const activeKeyProps = {}

        let clonedMenuItems = menuItems
        if (selectedKeys.length || firstActiveValue) {
          if (props.visible && !this.lastVisible) {
            activeKeyProps.activeKey = selectedKeys[0] !== undefined ? selectedKeys[0] : firstActiveValue
          } else if (!visible) {
            activeKeyProps.activeKey = undefined
          }
          let foundFirst = false
          // set firstActiveItem via cloning menus
          // for scroll into view
          const clone = item => {
            if (
              (!foundFirst && selectedKeys.indexOf(item.key) !== -1) ||
              (!foundFirst && !selectedKeys.length && firstActiveValue.indexOf(item.key) !== -1)
            ) {
              foundFirst = true
              return cloneElement(item, {
                directives: [{
                  name: 'ant-ref',
                  value: ref => {
                    this.firstActiveItem = ref
                  },
                }],
              })
            }
            return item
          }

          clonedMenuItems = menuItems.map(item => {
            if (getSlotOptions(item).isMenuItemGroup) {
              const children = item.componentOptions.children.map(clone)
              return cloneElement(item, { children })
            }
            return clone(item)
          })
        } else {
          // Clear firstActiveItem when dropdown menu items was empty
          // Avoid `Unable to find node on an unmounted component`
          // https://github.com/ant-design/ant-design/issues/10774
          this.firstActiveItem = null
        }

        // clear activeKey when inputValue change
        const lastValue = value && value[value.length - 1]
        if (inputValue !== this.lastInputValue && (!lastValue || lastValue !== backfillValue)) {
          activeKeyProps.activeKey = ''
        }
        menuProps.props = { ...activeKeyProps, ...menuProps.props }
        return (
          <Menu {...menuProps}>
            {clonedMenuItems}
          </Menu>
        )
      }
      return null
    },
  },
  render () {
    const renderMenu = this.renderMenu()
    const { popupFocus, popupScroll } = this.$listeners
    return renderMenu ? (
      <div
        style={{
          overflow: 'auto',
          transform: 'translateZ(0)',
        }}
        id={this.$props.ariaId}
        tabIndex='-1'
        onFocus={popupFocus}
        onMousedown={preventDefaultEvent}
        onScroll={popupScroll}
        ref='menuContainer'
      >
        {renderMenu}
      </div>
    ) : null
  },
}