All files / src/select/_example MultiSelectExample.jsx

100% Statements 4/4
50% Branches 1/2
100% Functions 4/4
100% Lines 4/4

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71              1x                                                                                       2x 2x       2x                            
import React from "react";
import { SelectMultiple } from "@tencent/tea-component/lib/select";
import { Form } from "@tencent/tea-component/lib/form";
import { Tag } from "@tea/component/tag";
import { Tooltip } from "@tea/component/tooltip";
 
export default function MultiSelectExample() {
  return (
    <Form>
      <Form.Item label="看电影吃什么">
        <SelectMultiple
          options={[
            { value: "gz", text: "瓜子", tooltip: "百煮入味香" },
            {
              value: "hs",
              text: "花生",
              tooltip: "花生已售罄",
            },
            { value: "bmf", text: "爆米花", tooltip: "焦糖味" },
            { value: "kl", text: "可乐", tooltip: "肥宅快乐水" },
            { value: "pj", text: "啤酒" },
            { value: "kqs", text: "矿泉水" },
            { value: "bbz", text: "八宝粥" },
          ]}
          allOption={{
            value: "all",
            text: "我都要",
            tooltip: "胖子是没有前途的",
          }}
        />
      </Form.Item>
      <Form.Item label="看完电影吃什么">
        <SelectMultiple
          staging={false}
          appearance="button"
          defaultValue={["gz"]}
          options={[
            { value: "gz", text: "瓜子", tooltip: "百煮入味香" },
            {
              value: "hs",
              text: "花生",
              disabled: true,
              tooltip: "花生已售罄",
            },
            { value: "bmf", text: "爆米花", tooltip: "焦糖味" },
            { value: "kl", text: "可乐", tooltip: "肥宅快乐水" },
            { value: "pj", text: "啤酒" },
            { value: "kqs", text: "矿泉水" },
            { value: "bbz", text: "八宝粥" },
          ]}
          button={options =>
            options.length ? (
              <Tooltip title={options.map(o => o.text).join(", ")}>
                <div>
                  <Tag.Group>
                    {options.map(o => (
                      <Tag key={o.value}>{o.text}</Tag>
                    ))}
                  </Tag.Group>
                </div>
              </Tooltip>
            ) : (
              "请选择"
            )
          }
        />
      </Form.Item>
    </Form>
  );
}