# UI Component (使用styled-components)
###### tags: `MIGO`
<!-- * 設計稿(只有部分元件)：https://app.axure.cloud/app/project/w5pv6o/inspect/f22cnl -->
* 使用react-bootstrap(Bootstra 4)作為元件的基底，props參數需參考react-bootstrap
https://react-bootstrap-v4.netlify.app/components/alerts
※此文件中的props表格參數,若命名與react-bootstrap 的props相同的項目，表示有針對此prop做客製化的變化
## Variable (共用變數)
### Color Type
<span style="color:#4B65A6">primary</span>:"#4B65A6"
<span style="color:#6399D1">secondary</span>:"#6399D1"
<span style="color:#3CA078">success</span>:"#3CA078"
<span style="color:#DC3C50">danger</span>:"#DC3C50"
<span style="color:#333333">dark</span>:"#333333"
white:"#ffffff"
<span style="color:rgba(51,51,51,0.75)">darkerGray</span>:"rgba(51,51,51,0.75)"
<span style="color:rgba(51,51,51,0.66)">darkGray</span>:"rgba(51,51,51,0.66)"
<span style="color:rgba(51,51,51,0.5)">gray</span>:"rgba(51,51,51,0.5)"
### Spacing
large:"40px",
medium:"24px",
small:"16px",
mini :"8px",
micro:"4px",
---
## Element (單一元件)
### --- H element 元件
StyleH1、H1
StyleH2、H2
StyleH3、H3
StyleH4、H4
StyleH5、H5
StyleH6、H6
Props參數：
| Name | Default | Type | Description |
| ---------- | ------- | ------------- | ------------------------------------------------------------------------------------- |
| colorType | | string | 文字顏色類型<br><b>Enums</b> : <br/> primary、secondary、success、danger、dark、white、gray、darkGray、darkerGray |
| colorAlpha | 1 | string number | 文字透明度 |
Demo：
```
<StyleH1 colorType="primary" colorAlpha="0.75">標題</StyleH1>
```
### --- Table 元件
StyleTable、Table
※使用react-bootstrap-table-next元件
Props參數：
> props參數需參考 react-bootstrap-table-next 的文件：
> 1. https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/table-props.html
> 2. https://ppt.cc/fcLYpx
>
>需注意的是，下方表格參數的className，會額外作用在 react-bootstrap-table-next元件的<b style="color: #4b8abf;">父層</b>容器
| Name | Default | Type | Description |
| --------- | ------- | ------ | -------------------------------------------------- |
| className | | string | 元件class name |
Demo：
```
<StyleTable
headerClasses="table-header"
bodyClasses="paragraph"
keyField="customId"
data={[
{
customId: 1,
cellPhone: "0911123456",
birthday: "2022/1/1",
},
{
customId: 2,
cellPhone: "0922123456",
birthday: "2022/2/2",
},
{
customId: 3,
cellPhone: "0933123456",
birthday: "2022/3/3",
},
]}
columns={[
{ dataField: 'customId', text: '會員編號', sort: true },
{ dataField: 'cellPhone', text: '手機' },
{ dataField: 'birthday', text: '生日', sort: true }
]}
bordered={false}
onTableChange={(type,props)=>console.log(type,props)}
striped
defaultSortDirection="asc"
className="table-container" // <-- 作用在父層
/>
```
### --- Button 元件
StyleButton、Button
Props參數：
| Name | Default | Type | Description |
| ------------ | ------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| colorType | | string | 文字顏色類型<br><b>Enums</b> : <br/> primary、secondary、success、danger、dark、white、gray、darkGray、darkerGray<br>※僅限outline的模式 |
| colorAlpha | 1 | string number | 文字透明度<br>※僅限outline的模式且colorType有填寫 |
| variant | primary | string | 按鈕類型 <br>*outline等其他變化可參考react-bootstrap的[Button設定](https://react-bootstrap-v4.netlify.app/components/buttons/)<br><br>設定類型若與下方類型不匹配則不會變化<br><b>Enums</b> : <br/> primary、secondary、success、danger、dark、white、gray、darkGray、darkerGray |
| size | lg | string | 按鈕尺寸 <br><b>Enums</b> : <br/> lg、md、sm |
| isLoading | | boolean | 按鈕是否加入loading的圖示 |
| loaderOption | | object | 請參考 [Loader元件](#—-Loader-元件) 參數設定<br>※button中的loader，size預設為sm |
Demo：
```
<StyleButton
variant="primary"
colorType="primary"
colorAlpha="1"
size="lg"
isLoading={true}
loaderOption={{
colorType: "dark",
}}
>
Button
</StyleButton>
```
### --- Input 元件
StyleInput、Input
Props參數：
| Name | Secondary Name | Default | Type | Description |
| ----------------------- | -------------- | ------- | ----------------- | ---------------------------------------------------------------------------------------------------------------- |
| colorType | | | string | 文字顏色類型<br><b>Enums</b> : <br> primary、secondary、success、danger、dark、white、gray、darkGray、darkerGray |
| colorAlpha | | 1 | string number | 文字透明度 |
| size | | md | string | 欄位的高度與文字的大小<br><b>Enums</b> : <br>lg、sm |
| feedbackText | | | string | 欄位驗證成功或失敗時，要顯示的文字 |
| hideFeedbackText | | | boolean | feedbackText是否隱藏文字 |
| feedbackTooltip | | false | boolean | feedbackText的呈現方式是否使用tooltip來呈現 |
| prependContent | | | node | input前方一小格，要顯示的HTML或JSX節點，也可以輸入文字 |
| prependContentColor | | | string | input前方一小格的文字顏色<br>※需輸入CSS的有效顏色字串 |
| prependContentBgcolor | | | string | input前方一小格的背景顏色<br>※需輸入CSS的有效顏色字串 |
| prependContentPadding | | | string | input前方一小格的padding |
| appendContent | | | node | input後方一小格，要顯示的HTML或JSX節點，也可以輸入文字 |
| appendContentColor | | | string | input後方一小格的文字顏色<br>※需輸入CSS的有效顏色字串 |
| appendContentBgColor | | | string | input後方一小格的背景顏色<br>※需輸入CSS的有效顏色字串 |
| appendContentPadding | | | string | input後方一小格的padding |
| appendContentHaveBorder | | true | boolean | input後方一小格是否顯示邊框 |
| isFocusCocatAppend | | false | boolean | onFocus的時候，聚焦的範圍是否包含appendContent的部分 |
| onClick | | | function | input的onClick事件 |
| prependContentOnClick | | | function | prependContent的click事件 |
| appendContentOnClick | | | function | appendContent的click事件 |
| searchFeature | | | object | 開啟欄位搜尋功能的設定 |
| | isOpen | false | boolean | 是否開啟欄位的搜尋功能 |
| | data | | array with object | 搜尋下拉選單的列表<br><b>Enums</b> : <br>[{text:"aaa"},{text:"bbb"}] |
| | onSelect | | function | 搜尋下拉選單點擊事件<br>function(event,value,name){} <br> ※ 需注意這邊的event並非輸入框欄位的event |
| | setSearchValue | | function | 控制formControlOption.value的useState function |
| clearOptionItem | | | object | 在下拉選單項目中加入可以清空欄位的項目 |
| | isOpen | false | boolean | 是否開啟可以清空欄位的項目 |
| | text | | string | 該清空欄位項目要顯示的文字 |
| formControlOption | | | object | [Form.Control設定](https://react-bootstrap-v4.netlify.app/components/forms/#form-control-props) |
Demo：
```
const [selectValue, setSelectValue] = useState("");
<StyleInput
feedbackText="必填欄位"
colorType="dark"
appendContent="點"
appendContentColor="#000"
appendContentBgColor="#fff"
appendContentPadding={"0 4px 0 0"}
appendContentHaveBorder={false}
isFocusCocatAppend
size="sm"
prependContentOnClick={() => console.log("prependContent trigger")}
appendContentOnClick={() => console.log("appendContent trigger")}
onClick={() => console.log("input trigger")}
formControlOption={{
type: "text",
name: "input-demo",
value: selectValue,
// disabled: true,
}}
clearOptionItem={{
isOpen: true,
text: "請選擇",
}}
searchFeature={{
isOpen: true,
data: [{ text: "aaa" }, { text: "bbb" }],
onSelect: (e, value, name) => {
console.log(e, value, name);
setSelectValue(value);
},
setSearchValue: setSelectValue,
}}
/>
```
### --- Checkbox 元件
StyleCheckbox、Checkbox
Props參數：
| Name | Default | Type | Description |
| --------------- | -------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| colorType | | string | 文字顏色類型<br><b>Enums</b> : <br/> primary、secondary、success、danger、dark、white、gray、darkGray、darkerGray |
| colorAlpha | 1 | string number | 文字透明度 |
| size | md | string | 高度與label文字的尺寸 <br><b>Enums</b> : <br/> md、sm |
| name | | string | 欄位的name |
| label | | string | 欄位的標題 |
| checked | false | boolean | 欄位是否被選取 |
| type | checkbox | string | 元件變化類型<br>※此為react-bootstrap的prop，但為了元件整齊性，將radio類型移除，若要使用radio功能請使用這邊 StyleRadio 元件,這邊不會有作用<br><b>Enums</b> : <br/> checkbox、switch |
| isValid | false | boolean | 欄位狀態為驗證成功 |
| isInvalid | false | boolean | 欄位狀態為驗證失敗 |
| feedback | | node | 欄位驗證成功或失敗時，要顯示的HTML或JSX節點，也可以輸入文字 |
| feedbackTooltip | false | boolean | feedback的呈現方式是否使用tooltip來呈現 |
Demo：
```
<StyleCheckbox
name="type"
value={1}
label="Car"
checked={true}
inline
isValid
feedback={<span>sss</span>}
feedbackTooltip={true}
colorType="dark"
colorAlpha="1"
size="md"
/>
```
### --- Radio 元件
StyleRadio、Radio
Props參數：
| Name | Default | Type | Description |
| --------------- | ------- | ------------- | ------------------------------------------------------------------------------------------- |
| colorType | | string | 文字顏色類型<br><b>Enums</b> : <br/> primary、secondary、success、danger、dark、white、gray、darkGray、darkerGray |
| colorAlpha | 1 | string number | 文字透明度 |
| name | | string | 欄位的name |
| label | | string | 欄位的標題 |
| checked | false | boolean | 欄位是否被選取 |
| size | md | string | 高度與label文字的尺寸 <br><b>Enums</b> : <br/> md、sm |
| isValid | false | boolean | 欄位狀態為驗證成功 |
| isInvalid | false | boolean | 欄位狀態為驗證失敗 |
| feedback | | node | 欄位驗證成功或失敗時，要顯示的HTML或JSX節點，也可以輸入文字 |
| feedbackTooltip | false | boolean | feedback的呈現方式是否使用tooltip來呈現 |
Demo：
```
<StyleRadio
name="type"
label="Car"
checked={true}
isValid
feedback={<span>sss</span>}
feedbackTooltip={true}
colorType="dark"
colorAlpha="1"
/>
```
### --- Textarea 元件
StyleTextarea、Textarea
Props參數：
| Name | Default | Type | Description |
| ---------------- | ------- | ------------- | ----------------------------------------------------------------------------------------------------------------- |
| colorType | | string | 文字顏色類型<br><b>Enums</b> : <br/> primary、secondary、success、danger、dark、white、gray、darkGray、darkerGray |
| colorAlpha | 1 | string number | 文字透明度 |
| isValid | false | boolean | 欄位狀態為驗證成功 |
| isInvalid | false | boolean | 欄位狀態為驗證失敗 |
| feedbackText | | string | 欄位驗證成功或失敗時，要顯示的文字 |
| hideFeedbackText | | boolean | feedbackText是否隱藏文字 |
| feedbackTooltip | false | boolean | feedbackText的呈現方式是否使用tooltip來呈現 |
Demo：
```
<StyleTextarea
feedbackText="必填欄位"
isInvalid={true}
colorType="dark"
/>
```
### --- Dropdown 元件
StyleDropdown、Dropdown
Props參數：
| Name | Secondary Name | Default | Type | Description |
| -------------------- | ------------------ | ------- | ----------------- | ----------------------------------------------------------------------------------------------------------------- |
| colorType | | | string | 文字顏色類型<br><b>Enums</b> : <br/> primary、secondary、success、danger、dark、white、gray、darkGray、darkerGray |
| colorAlpha | | 1 | string number | 文字透明度 |
| html | | | node | HTML或JSX節點，也可以輸入文字 |
| menuItems | | | array with object | 展開的下拉選單項目: |
| | text | | string | 展開的下拉選單項目顯示的文字 |
| | title | | string | 展開的下拉選單項目的標題 |
| | divider | false | boolean | 展開的下拉選單項目的分隔線 |
| | dropdownItemOption | | object | [Dropdown.Item設定](https://react-bootstrap-v4.netlify.app/components/dropdowns/#dropdown-item-props) |
| dropdownOption | | | object | [Dropdown設定](https://react-bootstrap-v4.netlify.app/components/dropdowns/#dropdown-props) |
| dropdownToggleOption | | | object | [Dropdown.Toggle設定](https://react-bootstrap-v4.netlify.app/components/dropdowns/#dropdown-toggle-props) |
| dropdownMenuOption | | | object | [Dropdown.Menu設定](https://react-bootstrap-v4.netlify.app/components/dropdowns/#dropdown-menu-props) |
Demo：
```
<StyleDropdown
colorType="dark"
colorAlpha="0.5"
text="下拉選單(非select)"
menuItems={[
{
html: "link1",
title:"Title",
dropdownItemOption:{
eventKey:"link1"
}
},
{
html: "link2",
divider:true,
dropdownItemOption:{
href:"member",
eventKey:"reactRoute"
}
},
{
html: "link3",
dropdownItemOption:{
href:"https://google.com",
eventKey:"google"
}
}
]}
dropdownOption＝{{
onSelect:(eventKey,event)=>{
alert(eventKey)
}
}}
dropdownToggleOption={{
id:"custom-dropdown-toggle"
}}
dropdownMenuOption={{
show:false
}}
/>
```
### --- Select 元件
StyleSelect、Select
※為react-bootstrap的Dropdown跟Form.Control的混合體，ui畫面的顯示為Dropdowns元件，資料為react-bootstrap的Form.Control(前端中會隱藏這個select)
Props參數：
| Name | Secondary Name | Default | Type | Description |
| -------------------- | ------------------ | ------- | ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| colorType | | | string | 文字顏色類型<br><b>Enums</b> : <br/> primary、secondary、success、danger、dark、white、gray、darkGray、darkerGray |
| colorAlpha | | 1 | string number | 文字透明度 |
| size | | lg | string | 下拉選單的尺寸 <br><b>Enums</b> : <br/> lg、sm |
| selectedValue | | | string number | 下拉選單的初值 |
| isClearSelectedValue | | false | boolean | 是否清空selectedValue(不選取任何值) |
| clearOptionItem | | | object | 在下拉選單項目中加入可以清空欄位的項目 |
| | isOpen | false | boolean | 是否開啟可以清空欄位的項目 |
| | text | | string | 該清空欄位項目要顯示的文字 |
| optionItems | | | array with object | 展開的下拉選單項目: |
| | text | | string | 展開的下拉選單<option/>顯示的文字 |
| | value | | string | 展開的下拉選單<option/>的值 |
| | title | | string | 展開的下拉選單項目的標題 |
| | divider | false | boolean | 展開的下拉選單項目的分隔線 |
| | dropdownItemOption | | object | [Dropdown.Item設定](https://react-bootstrap-v4.netlify.app/components/dropdowns/#dropdown-item-props) |
| dropdownOption | | | object | [Dropdown設定](https://react-bootstrap-v4.netlify.app/components/dropdowns/#dropdown-props) |
| dropdownToggleOption | | | object | [Dropdown.Toggle設定](https://react-bootstrap-v4.netlify.app/components/dropdowns/#dropdown-toggle-props) |
| dropdownMenuOption | | | object | [Dropdown.Menu設定](https://react-bootstrap-v4.netlify.app/components/dropdowns/#dropdown-menu-props) |
| formControlOption | | | object | [Form.Control設定](https://react-bootstrap-v4.netlify.app/components/forms/#form-control-props) <br/>※需注意onChange此時這邊不適用，請使用下方客製化的onChange方法<br/>※ disabled 的控制請在dropdownToggleOption參數中使用 |
| feedbackText | | | string | 欄位驗證成功或失敗時，要顯示的文字 |
| hideFeedbackText | | | boolean | feedbackText是否隱藏文字 |
| onChange | | | function | 下拉選單切換事件<br/>function(event,value,formControlRef,eventKey,optionItems,isTriggerClearOptionItem){}<br/><br/>value取值的順序為optionItems.value > dropdownItemOption.eventKey > optionItems.text |
| searchFeature | | | object | 開啟欄位搜尋功能的設定: |
| | isOpen | false | boolean | 是否開啟欄位的搜尋功能 |
| | data | | array with object | 搜尋下拉選單的列表<br><b>Enums</b> : <br>[{text:"aaa"},{text:"bbb"}] |
| | onSelect | | function | 搜尋下拉選單點擊事件<br>function(event,value,name){} <br> ※ 需注意這邊的event並非輸入框欄位的event |
Demo：
```
<StyleSelect
selectedValue="456"
optionItems={[
{
text:"link1",
dropdownItemOption:{
eventKey:"key-link1"
}
},
{
text:"link2",
value:"456"
},
{
text:"link3"
}
]}
dropdownOption={{
flip:true
}}
dropdownToggleOption={{
id:"custom-dropdown-toggle",
disabled:false
}}
dropdownMenuOption={{
show:false
}}
formControlOption={{
isInvalid:true,
name:"name",
placeholder:"--請選擇--"
}}
onChange={(event,value)=>console.log(event,value)}
/>
```
### --- Card 元件
StyleCard、Card
Props參數：
| Name | Default | Type | Description |
| ------------ | ------- | ------- | ----------------------------------------------------------------------------------- |
| padding | | string | CSS的padding寫法 |
| size | md | string | 卡片尺寸 <br><b>Enums</b> : <br/> lg、md、sm <br>※這邊size的權限會大於padding的設定 |
| isLoading | | boolean | 是否顯示Loading畫面 |
| loaderOption | | object | 請參考 [Loader元件](#—-Loader-元件) 參數設定 |
Demo：
```
<StyleCard
className="w-100"
padding="32px 32px"
size="sm"
isLoading={false}
loaderOption={{
colorType: "dark",
}}
>
content
</StyleCard>
```
### --- Tooltip元件
StyleTooltip、Tooltip
※使用react-tooltip元件
https://www.npmjs.com/package/react-tooltip
>global與specific的設定有許多重複的部分，可擇一設定即可
Props參數：
| Name | Default | Type | Description |
| -------------- | ------- | ------ | ------------------------------------------------------------------------------ |
| triggerElement | | node | 要觸發tooltip的HTML或JSX節點，也可以輸入文字 |
| globalOption | | object | 請參考react-tooltip的[Global設定](https://www.npmjs.com/package/react-tooltip) |
| specificOption | | object | 請參考react-tooltip的[Specific設定](https://www.npmjs.com/package/react-tooltip)<br/>※這邊需注意的是須依照文件中的命名方式，不得用駝峰式命名(與global的命名不同)，否則會無效 |
Demo：
```
<StyleTooltip
triggerElement={
<img src={iconTooltip} alt="icon-tooltip" />
}
globalOption={{
effect: "solid",
}}
specificOption={{
"data-background-color": "red",
}}
>
未填則無折抵上限
</StyleTooltip>
```
### --- Loader 元件
StyleLoader、Loader
Props參數：
| Name | Secondary Name | Default | Type | Description |
| ------------ | -------------- | ------- | ------------- | ----------------------------------------------------------------------------------------------------- |
| colorType | | | string | loader顏色類型<br><b>Enums</b> : <br/> primary、secondary、success、danger、dark、white、gray、darkGray、darkerGray |
| colorAlpha | | 1 | string number | loader透明度 |
| bgColor | | white | string | loader容器背景顏色類型<br><b>Enums</b> : <br/> primary、secondary、success、danger、dark、white、gray、darkGray、darkerGray |
| bgColorAlpha | | 1 | string number | loader容器背景透明度 |
| className | | | string | loader容器class name<br>※此為作用在容器，而非loader本身 |
| size | | lg | string | loader的大小<br><b>Enums</b> : <br>lg、sm |
| isHide | | false | boolean | 是否隱藏loader |
| loadContent | html | | node | loading時要顯示的HTML或JSX節點，也可以輸入文字 |
| | className | | string | loadContent中html的容器class name |
Demo：
```
<StyleLoader
variant="primary"
colorType="primary"
colorAlpha="1"
size="lg"
isHide={false}
loadContent={{
html: <span>Loading</span>,
className: "load-html"
}}
/>
```
### --- Weekly 元件
Weekly
Props參數：
| Name | Default | Type | Description |
| --------- | ------- | -------- | ---------------------------------------- |
| className | | string | 作用在每個 checkbox 的容器.form-check上 |
| fieldName | | string | 輸出給後端api的object key名稱 |
| value | | string | 輸出給後端api的object value值 |
| isInit | | boolean | 是否reset 來清除已被checked的項目 |
| onChange | | function | 日期變動事件<br>function(event,index,data){} |
Demo：
```
<Weekly
onChange={(e, index, data) => {
console.log(e, index, data);
}}
fieldName="weekly"
value={{
sun: false,
sat: false,
fri: false,
thu: false,
wed: true,
tue: false,
mon: false,
}}
isInit={false}
/>
```
### --- MonthlyDay 元件
MonthlyDay
Props參數：
| Name | Default | Type | Description |
| --------- | ------- | -------- | ---------------------------------------- |
| className | | string | 作用在每個 checkbox 的容器.form-check上 |
| fieldName | | string | 輸出給後端api的object key名稱 |
| value | | string | 輸出給後端api的object value值 |
| isInit | | boolean | 是否reset 來清除已被checked的項目 |
| onChange | | function | 日期變動事件<br>function(event,index,data){} |
Demo：
```
<MonthlyDay
onChange={(e, index, data) => {
console.log(e, index, data);
}}
fieldName="monthlyDay"
value={{
days: [8],
lastDay: true,
}}
isInit={false}
/>
```
### --- MonthlyWeek 元件
MonthlyWeek
Props參數：
| Name | Default | Type | Description |
| --------- | ------- | -------- | ---------------------------------------- |
| className | | string | 作用在每個 checkbox 的容器.form-check上 |
| fieldName | | string | 輸出給後端api的object key名稱 |
| value | | string | 輸出給後端api的object value值 |
| isInit | | boolean | 是否reset 來清除已被checked的項目 |
| onChange | | function | 日期變動事件<br>function(event,index,data){} |
Demo：
```
<MonthlyWeek
onChange={(e, index, data) => {
console.log(e, index, data);
}}
fieldName="monthlyWeek"
value={{
first: false,
second: false,
third: true,
fourth: true,
last: false,
dayOfWeek: {
sun: false,
sat: false,
fri: false,
thu: false,
wed: true,
tue: false,
mon: false,
},
}}
isInit={false}
/>
```
### --- YearlyDay 元件
YearlyDay
Props參數：
| Name | Default | Type | Description |
| --------- | ------- | -------- | ------------------------------------------------ |
| className | | string | 作用在每一個日期欄位的容器.date-item-container上 |
| fieldName | | string | 輸出給後端api的object key名稱 |
| value | | string | 輸出給後端api的object value值 |
| isInit | | boolean | 是否reset 來清除已被checked的項目 |
| onChange | | function | 日期變動事件<br>function(value,index,data){} |
Demo：
```
<YearlyDay
onChange={(value, index, data) => {
console.log(value, index, data);
}}
fieldName="yearlyDay"
value={{
dates: [
{
year: 2022,
month: 10,
day: 21,
},
],
}}
isInit={false}
/>
```
### --- Breadcrumb 元件 •
Breadcrumb
示意圖：
※ 專案上的使用通常與專案資料夾中template資料夾的Basic.js元件搭配使用，使用方法即是將Basic.js中的navSection屬性帶入此Breadcrumb元件
Props參數：
| Name | Secondary Name | Default | Type | Description |
| ----------- | -------------- | ------- | ----------------- | ------------------------------------------------------------ |
| now | | | string | 當前頁面標題 |
| description | | | string | 標題旁的補充說明 |
| pathList | | | array with object | 麵包屑的路徑設定<br>※ 陣列中每個項目即為一個路徑 |
| | title | | string | 麵包屑的路徑標題 |
| | slash | | boolean | 麵包屑路徑標題後面是否要加上 "/" 符號 (表示路徑後面還有路徑) |
| | onClick | | function | 麵包屑路徑標題click事件 |
Demo：
```
<Breadcrumb
now="標題1"
description="標題描述"
pathList={[
{
title: "好禮贈送222",
slash: true,
},
{
title: "贈品兌換111",
onClick: () => {
alert("trigger");
},
},
]}
/>
```
### --- Calendar 元件 •
Calendar
Props參數：
| Name | Default | Type | Description |
| -------- | ------- | ------------------- | ------------------------------------- |
| value | | object(date format) | 欄位的值 |
| disabled | false | boolean | 欄位 disabled 設定 |
| minDate | | object(date format) | 欄位可選擇的日期從何時開始 |
| maxDate | | object(date format) | 欄位可選擇的日期從何時結束 |
| isValid | | boolean | 欄位驗證是否有錯(false會顯示紅框提醒) |
| onChange | | function | 日期變動事件<br>function(date){} |
| placeholder | | string | 尚未選擇日期時顯示文字 |
Demo：
```
<Calendar
value={new Date()}
disabled={false}
minDate={new Date("2022/10/15")}
maxDate={new Date("2022/10/17")}
onChange={(data) => {
console.log(data);
}}
isValid={false}
/>
```
### --- DateRange 元件 •
DateRange
Props參數：
| Name | Secondary Name | Default | Type | Description |
| ----------- | -------------- | ------- | ------------------- | ---------------------------------------------- |
| dateRanges | | | array with object | 日期區間設定<br>※ 需注意陣列長度只有1 |
| | startDate | | object(date format) | 日期區間的起始日<br>※ 未有初值時，必須給空字串 |
| | endDate | | object(date format) | 日期區間的結束日<br>※ 未有初值時，必須給空字串 |
| placeholder | | | string | 欄位的 placeholder |
| disabled | | false | boolean | 欄位的 disabled |
| minDate | | | object(date format) | 欄位可選擇的日期從何時開始 |
| maxDate | | | object(date format) | 欄位可選擇的日期從何時結束 |
| isValid | | | boolean | 欄位驗證是否有錯(false會顯示紅框提醒) |
| onChange | | | function | 日期變動事件<br>function(date){} |
Demo：
```
const [ranges, setRanges] = useState({
dateRanges: [
{
startDate: "",
endDate: "",
},
],
});
<DateRange
ranges={ranges}
onChange={(date) => {
setRanges((prevState) => {
return {
...prevState,
dateRanges: {
...prevState,
startDate: date.startDate,
endDate: date.endDate,
},
};
});
}}
placeholder={searchText.placeholderTime}
disabled={false}
isValid={false}
minDate={new Date("2022/10/15")}
maxDate={new Date("2022/10/17")}
/>
```
### --- Editor 元件 •
Editor
示意圖：
Props參數：
| Name | Default | Type | Description |
| ------------ | -------------------------------------------------------------------- | ----------------- | ---------------------------------------------------------------------------------------------------- |
| toolbar | [ { list: "ordered" }, { list: "bullet" }, "link", "clean", "bold" ] | array with Object | 文字編輯器要開啟哪些功能項設定 [modules的 toolbar 設定](https://www.npmjs.com/package/react-quilljs) |
| placeholder | | string | placeholder 設定 |
| className | | string | 元件 class name |
| width | 100% | string number | 元件寬度<br>※ 可設定如100px、100%...之類的css用法，也可以單純輸入數字自動轉成px |
| height | 100% | string number | 元件高度<br>※ 可設定如100px、100%...之類的css用法，也可以單純輸入數字自動轉成px |
| defaultValue | "" | string | 欄位文字初值 |
| disabled | false | boolean | 欄位 disabled 設定 |
| onChange | | function | 欄位變動事件 function(html){} |
Demo：
```
<Editor
toolbar={[
["bold", "italic", "underline", "strike"],
[{ align: [] }],
[{ list: "ordered" }, { list: "bullet" }],
[{ indent: "-1" }, { indent: "+1" }],
[{ size: ["small", false, "large", "huge"] }],
[{ header: [1, 2, 3, 4, 5, 6, false] }],
["link", "image", "video"],
[{ color: [] }, { background: [] }],
["clean"],
]}
className="custom-editor"
height="300"
width="100%"
defaultValue={"Hello Wrold!"}
disabled={false}
onChange={(html) => console.log(html)}
placeholder={"請輸入文字"}
/>
```
### --- IconButton 元件 •
Icon類型圖表：
| cancel | copy | delete |
| ------------------------------------ | ------------------------------------ | ------------------------------------ |
|  |  |  |
| edit | upload | download |
|  |  |  |
| save | seal | setting |
|  |  |  |
| view | stop | link |
|  |  |  |
| tableLink | tableDelete | tableQrcode |
|  |  |  |
| tableActive | tableExtend | |
|  |  | |
Props參數：
| Name | Default | Type | Description |
| --------- | ------- | ------ | -------------------------------------------------------------------------------------------------------------- |
| type | | string | 要選擇的icon類型<br>※ 請參照上表Icon類型圖表 |
| className | | string | 按鈕元件 class name |
| tooltip | | string | icon滑鼠游標移入後，要顯示的HTML或JSX節點，也可以輸入文字 |
| react-tooltip 的 Specific 屬性設定 | | | [react-tooltip 的 Specific 屬性設定](https://www.npmjs.com/package/react-tooltip)<br>例：data-effect = "solid" |
Demo：
```
<IconButton
type="delete"
className="icon-button"
tooltip="刪除"
data-effect="solid"
onClick={(e) =>
console.log(e.target)
}
/>
```
### --- ImageUploader 元件 •
ImageUploader
Props參數：
| Name | Default | Type | Description |
| ---------------------------------- | ---------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| defaultValue | | string | 圖檔路徑的初值(只會render一次) |
| value | | string | 圖檔路徑 |
| imageTypes | ["png", "jpg", "jpeg"] | array | 允許上傳的圖檔類型 |
| limit | {} | object | 檔案的大小、寬高限制<br>物件格式為{size:xx,width:xx,hight:xx}<br><br>size：檔案大小(單位為KB)<br>width:圖檔寬度<br>height:圖檔高度<br>※ 圖檔寬高限制的條件為寬度、高度皆小於限制的寬高，並且圖檔寬度/高度 ＝ 限制寬度/限制高度 (等比縮小)，否則皆視為resolution錯誤 |
| disabled | | boolean | disabled 設定 |
| required | | boolean | 欄位是否必填的提醒文字<br>false:(選填)、true:(必填) |
| onChange | | function | function(fileData){}<br><br>※ 當觸發onError時，則此fileData會得到空字串 |
| onError | | function | function(errorType){}<br><br>errorType為size:檔案大小超過限制 <br> errorType 為 resolution:檔案寬度或高度超過限制 |
| react-tooltip 的 Specific 屬性設定 | | | [react-tooltip 的 Specific 屬性設定](https://www.npmjs.com/package/react-tooltip)<br>例：data-effect = "solid" |
Demo：
```
<ImageUploader
value="https://i.imgur.com/rMEkFKK.png"
disabled={false}
required={true}
imageTypes={["png"]}
onChange={(fileData) => {
console.log(typeof fileData);
}}
onError={(errorType) => {
console.log(errorType);
}}
limit={{
width: 2000,
height: 2000,
}}
/>
```
### --- Mask 元件 •
Mask
Props參數：
| Name | Default | Type | Description |
| ---- | ------- | ------- | ------------ |
| show | false | boolean | 是否顯示元件 |
Demo：
```
<Mask show={true} />
```
### --- Modal 元件 •
Modal
Props參數：
| Name | Default | Type | Description |
| ----------------- | ------- | -------- | ----------------------------------------------------------------------------------------------------------------- |
| show | true | boolean | 是否顯示元件 |
| className | | string | modal 容器 class name |
| variant | primary | string | 按鈕顏色類型<br><b>Enums</b> : <br/> primary、secondary、success、danger、dark、white、gray、darkGray、darkerGray |
| titleText | | string | 標題文字 |
| closeBtnText | "取消" | string | 取消按鈕的文字 |
| closeBtnVisible | true | boolean | 取消按鈕是否顯示 |
| onClose | | function | 取消按鈕事件<br>※ 未設定時，預設會關閉 modal 視窗 |
| confirmBtnText | "確認" | string | 確認按鈕的文字 |
| confirmBtnVisible | true | boolean | 確認按鈕是否顯示 |
| isHideCloseButton | | boolean | Header是否顯示 X icon |
| onConfirm | | function | 確認按鈕事件<br>※ 未設定時，預設會關閉 modal 視窗 |
| customConfirm | | node | 客製的確認按鈕，為HTML或JSX節點，也可以輸入文字 <br>※ 此設定後，confirmBtnText、onConfirm會失效 |
| modalOption | | object | [react-bootstrap Modal元件的屬性設定](https://react-bootstrap-v4.netlify.app/components/modal/#modal-props) |
Demo：
```
const [isShow, setIsShow] = useState(false);
<Modal
show={isShow}
variant={"gray"}
className="modal-container"
titleText="標題"
closeBtnText="關閉"
closeBtnVisible={true}
confirmBtnText="OK"
confirmBtnVisible={true}
onClose={() => {
alert("關閉");
setIsShow(false);
}}
onConfirm={() => {
alert("OK");
setIsShow(false);
}}
modalOption={{
onEnter: () => {
alert("modal start");
},
}}
>
<h1>要顯示的內容</h1>
</Modal>
```
### --- Layout 元件 •
Container、Row、Col
※目前使用此元件的是為了讓margin、padding為0 !important使用,
參數設定請參考：
[Container](https://react-bootstrap-v4.netlify.app/layout/grid/#container-props)、[Row](https://react-bootstrap-v4.netlify.app/layout/grid/#row-props)、[Col](https://react-bootstrap-v4.netlify.app/layout/grid/#col-props)
### --- Toast 元件 •
提醒彈窗
Props參數：
| Name | Default | Type | Description |
| ---------------------------------- | ---------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| show | TRUE | Boolean | 提示訊息顯示
| status | | String <br>(現有success, error, loading，現無info, warn) | 提示訊息種類 |
| message | | String | 提示訊息內容
| duration | 4000 | Number | 提示訊息顯示時間
| customTitle | | String | 提示訊息客製化的標題文案
| customBody | | Array | 提示訊息客製化的內容文案
| customBodyJSX | | JXS | 提示訊息客製化的內容 (文案&樣式）
| cancelTxt | | String | 提示訊息關閉的文案，未輸入預設顯示Ｘicon
| onCancel | | Fn | 提示訊息取消或關閉＊與cancelTxt綁定
| linkTxt | | String | 額外操作（連結）的文字訊息
| onAction | | Fn | 提示訊息額外操作（連結）＊與linkTxt綁定
| customAll | | JXS | 提示訊息全客製
toastStyle | Default | String | 提示訊息客製樣式(Default、Migo)
| toastOption | | CSS(JSX) | 添加toast樣式，可傳入react-hot-toast可調整樣式，<br>詳見：https://react-hot-toast.com/docs/styling
Demo：
```
// 使用單行訊息
<Toast
show={true}
status={"success"}
message={"hello"}
onCancel={()=>handleClose()}
duration={4000}
/>
// 使用多行訊息、可以客製標題、訊息（可多行）、下載文字、額外操作
<Toast
show={true}
status={"success"}
onCancel={()=>handleClose()}
customTitle={"這是標題"}
customBody={["內容第一行", "內容第二行"]}
status={"success"}
toastStyle={"Migo"}
duration={500000}
linkTxt={"點我下載"}
onAction={()=>handleAction()}
/>
```
**注意事項**：
1. 樣式目前有兩種，react-hot-toast樣式和Migo樣式，預設為react-hot-toast。若需要 Migo 樣式，元件參數需傳入toastStyle="Migo"。
2. 需注意兩種樣式文字欄位的差異，兩者接受的參數不同：
（1) react-hot-toast樣式僅有一個內文欄位，由message傳入字串
（2) Migo樣式 可以調整 標題、內文、額外功能(超連結)
* 標題、內文由customTitle（字串）、customBody（陣列）設定。
* 額外功能由linkTxt提供錨點文字、onAction提供執行函式。
<br><br>
**其他使用方式**：<br>此元件有包裝react-hot-toast，提供兩種使用方式。一是一般import元件到需要的頁面，另外還有提供 toastCreator 函式。呼叫該函式將會執行包裝過react-hot-toast的程式碼，呈現彈窗效果，**不需在頁面再次引入react-hot-toast**。實際使用方式為import {toastCreator}，該函式接收4個參數，分別為config、status、customStyle、toastId，值的型別如下：
| 參數 | 預設 | 屬性 | 說明 |
| ------------------- | ------------------- | ------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- |
| config | | Object | 由 Toast 的參數組成的物件 |
| status | | String| 可傳入 success、error、loading | |
toastOption| {} | Object | 可傳入react-hot-toast可調整樣式，詳見：https://react-hot-toast.com/docs/styling | |
| toastId | | String| 可傳入toastId |
Demo：
```
// 呼叫 toastCreator - 單行訊息
toastCreator(
{
message: "錯誤代碼：" + `${status}` + `${err?.data?.msg ?? ""}`,
cancelTxt: "關閉",
},
"error"
);
// 呼叫 toastCreator - 多行訊息
toastCreator(
{
customTitle: "QRcode序號",
customBody: ["QRCode序號 生成序號中"], //需為陣列
style: true,
cancelTxt: "取消生成",
onCancel: () => {
setMask(false);
source.cancel();
},
},
"loading",
true
)
```
---
## Component (組件:多個單一元件組合)
### ButtonList 組件
StyleButtonList
Props參數：
| Name | Default | Type | Description |
| --------- | ------- | ------ | --------------------------------------------------- |
| direction | | string | 多個按鈕的排列方向<br><b>Enums</b> : <br/> vertical |
Demo：
```
<StyleButtonList
direction="vertical"
>
<StyleButton
variant="primary"
colorType="primary"
colorAlpha="1"
size="lg"
>
Button1
</StyleButton>
<StyleButton
variant="primary"
colorType="primary"
colorAlpha="1"
size="lg"
>
Button2
</StyleButton>
</StyleButtonList>
```
### FieldTypeSwitch 組件
StyleFieldTypeSwitch
※當欄位是由後端客製化決定需要什麼欄位時的情形使用此組件較為適合
(固定欄位、彈性欄位、客制欄位、擴充欄位)
※但一般欄位情況下，依然可以使用此組件
Props參數：
| Name | Secondary Name | Default | Type | Description |
| --------------------- | -------------- | ------- | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| type | | | string | 使用的表單類型(text、select、radio...等等) |
| formIsTriggerValidate | | | boolean | 有使用<Form>包起來的表單是否觸發了發送表單來進行驗證 |
| fieldType | | | string | fixFields、optionalFields、cutomerFields<br/><br/>fixFields(固定欄位)：<br/>不給予客製，叫什麼name值，就固定對應什麼欄位型態，且<span style="color: #4b8abf;">固定欄位一定得出現在頁面上</span><br/><b>Enums</b>: <br/>若後端回傳name為Shop，則必定是一個select的欄位<br/><br/>optionalFields(彈性欄位)：<br/>給予客製，name值、標題，都可以隨意改動，<span style="color: #4b8abf;">彈性欄位可自由選擇是否出現在頁面上</span><br/>※初期原先規劃彈性欄位不給予客制，只單純決定是否顯示或不顯示，目前已調整為可以客制<br/><br/>customFields(客制欄位)：<br/>給予客製，name值、標題，都可以隨意改動，<span style="color: #4b8abf;">客制欄位可自由選擇是否出現在頁面上</span><br/>※目前彈性欄位與客制欄位皆可以客制、及自由選擇是否顯示在頁面上，差別僅在於顯示的地方不同而已(客制欄位目前以頁籤的方式另外獨立顯示) |
| formControlOption | | | object | [Form.Control設定](https://react-bootstrap-v4.netlify.app/components/forms/#form-control-props)，或是舉凡一般input有的屬性，name、required等等... |
| options | | | object in array | radio、checkbox、select所需的參數 |
| | code | | string number | radio、checkbox、select的值 |
| | name | | string | radio、checkbox的 顯示名稱 <br/> select的 下拉選單單一項目顯示名稱 |
| inputOption | | | object | StyleInput元件的參數<br/>請參考 [Input元件](#—-Input-元件) 參數設定 |
| selectOption | | | object | StyleSelect元件的參數<br/>請參考 [Select元件](#—-Select-元件) 參數設定 |
| feedbackText | | | string | 欄位驗證失敗時，要顯示的文字 |
Sign in with Wallet
Connect another wallet