import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import { Select } from 'antd'
import SearchSelect from '@inkefe/components-search-select'

const options = []

for (let i = 0; i < 100000; i++) {
  const value = `${i.toString(36)}${i}`

  options.push({
    id: i,
    value,
  })
}

class App extends Component {
  constructor (props) {
    super(props)
    this.state = {}
  }

  render () {
    return <SearchSelect
      allowClear
      showSearch
      mode="multiple"
      style={{ width: '200px' }}
      placeholder="Please select"
    >
      {
        options.map(item =>
          <Select.Option
            key={item.id}
            value={`${item.id}`}
          >
            { item.value }
          </Select.Option>
        )
      }
    </SearchSelect>
  }
}

ReactDOM.render((
  <App />
), mountNode)

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import { Select } from 'antd'
import SearchSelect from '@inkefe/components-search-select'

const ALL = '-1'

const options = [
  {
    id: ALL,
    value: '全部',
  },
]

for (let i = 0; i < 1000; i++) {
  const value = `${i.toString(36)}${i}`

  options.push({
    id: i,
    value,
  })
}

class App extends Component {
  constructor (props) {
    super(props)
    this.state = {
      selected: []
    }
  }

  handleMultipleSelectAllDisabled = value => {
    const { selected } = this.state

    let isHasAll = false

    if (selected?.length > 0) {
      if (selected.indexOf(ALL) > -1) {
        isHasAll = true
      }

      if ((isHasAll && +value !== +ALL) || (!isHasAll && +value === +ALL)) {
        return true
      }

      return false
    }

    return false
  }

  handleChange = value => {
    this.setState({
      selected: value
    })
  }

  render () {
    return <SearchSelect
      allowClear
      showSearch
      mode="multiple"
      style={{ width: '200px' }}
      placeholder="Please select"
      onChange={this.handleChange}
    >
      {
        options.map(item =>
          <Select.Option
            key={item.id}
            value={`${item.id}`}
            disabled={this.handleMultipleSelectAllDisabled(item.id)}
          >
            { item.value }
          </Select.Option>
        )
      }
    </SearchSelect>
  }
}

ReactDOM.render((
  <App />
), mountNode)