All files / src/inputadornment/_example InputAdornmentSelectExample.jsx

100% Statements 7/7
100% Branches 0/0
100% Functions 4/4
100% Lines 7/7

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              1x 2x             1x 4x             1x 3x           1x                                                        
import React from "react";
import { InputAdornment } from "@tencent/tea-component/lib/inputadornment";
import { Input } from "@tencent/tea-component/lib/input";
import { Select } from "@tencent/tea-component/lib/select";
 
export default function InputAdornmentExample() {
  const protocolSelect = (
    <Select
      options={["http://", "https://"].map(value => ({ value }))}
      defaultValue="http://"
      style={{ width: "auto" }}
    />
  );
 
  const tldSelect = (
    <Select
      options={[".com", ".cn", ".net", ".org"].map(value => ({ value }))}
      defaultValue=".cn"
      style={{ width: "auto" }}
    />
  );
 
  const domainSelect = (
    <Select
      options={["tencent", "qq", "cloud.tencent"].map(value => ({ value }))}
      defaultValue="tencent"
      style={{ width: "auto" }}
    />
  );
 
  return (
    <>
      <section>
        <InputAdornment before={protocolSelect}>
          <Input />
        </InputAdornment>
      </section>
 
      <section>
        <InputAdornment after={tldSelect}>
          <Input />
        </InputAdornment>
      </section>
 
      <section>
        <InputAdornment before={protocolSelect} after={tldSelect}>
          <Input />
        </InputAdornment>
      </section>
 
      <section>
        <InputAdornment before={protocolSelect} after={tldSelect}>
          {domainSelect}
        </InputAdornment>
      </section>
    </>
  );
}