SelectInput

import React, { useState } from "react";
import SelectInput from "pocko-ui/SelectInput";
 
const dropdown: any = [
    {id: 1, name: '1', value: '1'},
    {id: 2, name: '2', value: '2'},
    {id: 3, name: '3', value: '3'}
]
 
const [defaultValue, setDefaultValue] = useState<any>('')
 
<SelectInput
    id="id"
    name="name"
    dropdownRender={dropdown}
    inputId={"demo1-input-id"}
    titleId={"demo1-title-id"}
    onChange={(i: any) => {
        console.log(i);
        setDefaultValue(i.value)
    }}
></SelectInput>
 
<SelectInput
  id="id"
  name="name"
  dropdownRender={dropdown}
  inputId={"demo1_1-input-id"}
  titleId={"demo1_1-title-id"}
  onChange={(i: any) => {
    setDefaultValue2(i.value);
  }}
  defaultValue={defaultValue2}
  wrapperClassName="mt-2"
  cleanTrigger={{
    valid: true,
    cleanValueLabel: "Clean",
    cleanFunc: () => {
      setDefaultValue2("");
    },
  }}
></SelectInput>
 

import React, { useState } from "react";
import SelectInput from "pocko-ui/SelectInput";
 
const dropdown: any = [
    {id: 1, name: '1', value: '1'},
    {id: 2, name: '2', value: '2'},
    {id: 3, name: '3', value: '3'}
]
const [defaultValue, setDefaultValue] = useState<any[]>([]) // *** the type must be array
 
<SelectInput
    id="id"
    name="name"
    dropdownRender={dropdown}
    inputId={"demo2-input-id"}
    titleId={"demo2-title-id"}
    onChange={(i: any) => {
        console.log(i);
 
        setDefaultValue(i)
    }}
    defaultValue={defaultValue}
    wrapperClassName="mt-2"
></SelectInput>

import React, { useState } from "react";
import SelectInput from "pocko-ui/SelectInput";
 
const dropdown: any = [
    {id: 1, name: '1', value: '1'},
    {id: 2, name: '2', value: '2'},
    {id: 3, name: '3', value: '3'}
]
const [defaultValue, setDefaultValue] = useState<any>('')
 
<SelectInput
  label="Top"
  type="COMMON"
  id="id"
  name="name"
  dropdownRender={dropdown}
  inputId={"demoTop-input-id"}
  titleId={"demoTop-title-id"}
  onChange={(i: any) => {
    console.log(i);
 
    setDefaultValue(i.value ? i.value : i);
  }}
  defaultValue={defaultValue}
  dropdownPosition="top"
></SelectInput>
 
<SelectInput
  label="Bottom"
  type="COMMON"
  id="id"
  name="name"
  dropdownRender={dropdown}
  inputId={"demoTop-input-id"}
  titleId={"demoTop-title-id"}
  onChange={(i: any) => {
    console.log(i);
 
    setDefaultValue(i.value ? i.value : i);
  }}
  defaultValue={defaultValue}
  wrapperClassName="my-2"
  dropdownPosition="bottom"
></SelectInput>
 
<SelectInput
  label="Auto"
  type="COMMON"
  id="id"
  name="name"
  dropdownRender={dropdown}
  inputId={"demoTop-input-id"}
  titleId={"demoTop-title-id"}
  onChange={(i: any) => {
    console.log(i);
 
    setDefaultValue(i.value ? i.value : i);
  }}
  defaultValue={defaultValue}
  dropdownPosition="auto"
></SelectInput>

import React, { useState } from "react";
import SelectInput from "pocko-ui/SelectInput";
 
const dropdown: any = [
    {id: 1, name: '1', value: '1'},
    {id: 2, name: '2', value: '2'},
    {id: 3, name: '3', value: '3'}
]
const [defaultValue, setDefaultValue] = useState<any>('')
 
<SelectInput
    type="COMMON"
    id="id"
    name="name"
    dropdownRender={dropdown}
    inputId={"demo3-input-id"}
    titleId={"demo3-title-id"}
    onChange={(i: any) => {
        console.log(i);
 
        if(i) {
           setDefaultValue(i.value)
        } else {
           setDefaultValue(i)
        }
    }}
    defaultValue={defaultValue}
    isHandleInput={true}
></SelectInput>

import React, { useState } from "react";
import SelectInput from "pocko-ui/SelectInput";
 
const dropdown: any = [
  { id: 1, name: "OIE19022", value: "1" },
  { id: 2, name: "OIE19061", value: "2" },
  { id: 3, name: "SWE19048", value: "3" },
];
 
const [defaultValue, setDefaultValue] = useState<any>("");
 
<SelectInput
  type="COMMON"
  id="id"
  name="name"
  dropdownRender={dropdown}
  inputId={"demo4-custom-input-id"}
  titleId={"demo4-custom-title-id"}
  onChange={(i: any) => {
    console.log(i);
 
    setDefaultValue(i.value ? i.value : i);
  }}
  defaultValue={defaultValue}
  renderOption={(item: any) => (
    <>
      <span>{item.name}</span>
      <small className="d-flex flex-wrap align-items-center gap-1 text-secondary-emphasis anes-bill-justify-between">
        <span>id：{item.id}</span>
        <span>value：{item.value}</span>
      </small>
    </>
  )}
></SelectInput>