/**
 * title: 带 disabled 的场景
 * debug: true
 */

import React, { useState } from 'react'

import { MultiSelect, SelectOption as Option, Form, FormItem } from 'react-icecream'

export default function Demo() {
  const [products, setProducts] = useState(['kodo', 'fusion'])

  return (
    <Form>
      <FormItem label="折叠">
        <MultiSelect clearable value={products} onChange={setProducts} placeholder="请选择" disabled>
          <Option value="kodo">对象存储 Kodo</Option>
          <Option value="fusion">CDN</Option>
          <Option value="dora">智能多媒体服务 Dora</Option>
          <Option value="qvm">云主机服务 QVM</Option>
          <Option value="pandora">机器数据分析平台 Pandora</Option>
        </MultiSelect>
      </FormItem>
      <FormItem label="未折叠">
        <MultiSelect clearable collapsed={false} value={products} onChange={setProducts} placeholder="请选择" disabled>
          <Option value="kodo">对象存储 Kodo</Option>
          <Option value="fusion">CDN</Option>
          <Option value="dora">智能多媒体服务 Dora</Option>
          <Option value="qvm">云主机服务 QVM</Option>
          <Option value="pandora">机器数据分析平台 Pandora</Option>
        </MultiSelect>
      </FormItem>
    </Form>
  )
}