Select/Tree Select/Autocomplete/Dropdown

[travor20814]

問題描述

1. props 傳遞方式不同

• Dropdown 需要自己傳 menu，children 被拿來當作控制指向用

<Dropdown menu={renderMenu()}>
  {(ref) => (
     <TriggerButton ref={ref} />
  )}
</Dropdown>

• Select 預先 render 好 Menu，以 children 方式吃 <Menu> children，

<Select>
  <Option>1</Option>
  <OptionGroup label="Group A">
     <Option>2</Option>
  </OptionGroup>
</Select>

• Tree Select 是傳 options 為了餵給 <Tree>

<TreeSelect options={yourOptions} />

• Autocomplete 是傳 options，底下已事先 render 好 <Menu> 並透過 options 來 mapping <Option>

<AutoComplete options={yourOptions} />

2. Select 不應該有「搜尋」功能，將該功能統一整合到 Autocomplete，參考 2021/12/02 會議討論 #107
3. Autocomplete 整個 refactor，詳細參考 2021/12/02 會議討論 #107
4. Tree Select 的輸入框 tags 行為需統一跟 Autocomplete 一樣

[travor20814]

回答/解法

1. 需討論整合方式，統一強制用 options 來傳遞？

• 這會面臨到 options 的格式問題，因為可能可以放 <OptionGroup>，如果做成多一層巢狀，應該更不直覺？

[{
  "label": "string | undefined",
  "data": [{ "label": "選項1", "value": 1 }]
}]

2. 需先等設計完成 Autocomplete 的重構
3. 需先等設計完成 Autocomplete 的重構
4. 需先等設計完成 Autocomplete 的重構

[travor20814]

1. dropdown menu 應該要改成 renderMenu？
   1-1: button, menu 相反過來，renderButton 的方式，menu 放 children
   1-2: popperProps 這種應該不要直接傳整包 object，展開成有 prefix 的一行一行改，例如 popperOpen, popperPlacement…etc

2 Select, 3. TreeSelect, 4. AutoComplete
統整成 options 用法 / children 用法 都支援
應該要一個中間層 (OptionGroup)，作為語法糖統整 children 的型態（比如在 tree select 下要讓 group 可以點）

[travor20814]

Select 的 clearable 是 true 時，應該要不能有空值的狀態（defaultValue, value 必定要給）