All files / src/bubble/_example BubbleTriggerExample.jsx

83.33% Statements 5/6
50% Branches 3/6
50% Functions 1/2
83.33% Lines 5/6

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            1x 1x   1x   1x       1x                                                
import React, { useState } from "react";
import { Bubble } from "@tencent/tea-component/lib/bubble";
import { Button } from "@tencent/tea-component/lib/button";
import { Input } from "@tencent/tea-component/lib/input";
 
export default function BubbleTriggerExample() {
  const [inputText, setInputText] = useState("");
  const length = parseInt(inputText, 10);
 
  const inputError = Boolean(inputText) && Number.isNaN(length);
 
  const content = length
    ? `面积 S = ${length} x ${length} = ${length * length}`
    : "请输入边长,计算正方形面积";
 
  return (
    <>
      <section>
        <Bubble trigger="click" content="我是被点了之后才出现的内容">
          <Button>点击出现</Button>
        </Bubble>
      </section>
      <section>
        <Bubble
          trigger="focus"
          content={inputError ? "输入有误,请输入整数" : content}
          placement="right"
          error={inputError}
        >
          <Input
            placeholder="聚焦出现"
            value={inputText}
            onChange={value => setInputText(value)}
          />
        </Bubble>
      </section>
    </>
  );
}