[[_TOC_]]

# forms.yaml - Input Component
下列的各個元件，可以單獨使用，也可以透過給 ElasticForm Spec 使用
某些 property 在單獨使用的時候是沒有作用的，比方說 dependOn，因為沒有統整的 Data，Child component 不知道要去哪裡取得資料。

**如果要單獨使用 component 的話，error 判斷需要自己額外處理**

**Component 之間有相同 Properties 的話，只在第一次提及時詳述，其它只單純列出，請善用 Ctrl + F 查詢。**

# 資料取得
最新的版本不再使用 reducer 來進行分流，意思是不再用 dispatch，而是用 handleChange 來取得資料
因為有用 debounce 的關係，所以不會 User 每次 change 都呼叫，而是 User 停止輸入一段時間 (300ms) 後才呼叫

// frontend/src/components/Form/utils/debounceHook.js
import { useMemo } from 'react';
import _ from 'lodash';

const useDebounce = (callback, wait = 300) => (
  useMemo(() => _.debounce(
    (...args) => {
      if (callback) callback(...args);
    },
    wait,
  ), [callback, wait])
);

export default useDebounce;

## 通用 Properties
所有的元件皆能使用下列的 Properties，不再於 Child component 中列出
| paramenter | description |
| ------ | ------ |
| autoValue | 當滿足 autoValue 的條件之後，component 會將特定的 value 填入指定的欄位，請參考下列範例 |
| dependOn | 此值為一 Object，component key 為 object key, object value 為一 value 陣列。當所有的 component key 及 value 符合 formData 裡的記錄時，此 component 才會顯示 |
| ignore | Elastic Form Submit 時忽略此 Componet 值 |
| key | 辨認 Component 的唯一值 |
| required | Elastic Form Submit 時此值不得為空 (空陣列、空物件、空字串、null、undefined) |
| type | Component 類型 |
| value | Component 的預設值 |
| handleChange | 當 Component Value Change 時觸發此 Function |

### AutoValue 範例
**Format**

// 當 <component key> 的 value 符合 data 中的 <other component value> 值時  
// 被設定 autoValue 的 componet 的 <specific field> 欄位的值將會被替換成 <value as string, object, array>
autoValue: {
  <component key>: {
    field: <specific field>,
    data: {
      <other component value>: <value as string, object, array>,
        // key pair as first one
    }
  }
}

// 範例 1: 自動填入 array 於 options
{
  key: 'secret',
  label: 'variable',
  type: 'select',
  options: [
    { label: 'testSecret1', value: 'testSecret1' },
    { label: 'testSecret2', value: 'testSecret2' },
  ],
},
{
  key: 'value',
  label: 'variable',
  type: 'select',
  autoValue: {
    secret: {
      field: 'options',
      data: {
        testSecret1: [
          { label: 'test1', value: 'value1' },
          { label: 'test2', value: 'value2' },
        ],
        testSecret2: [
          { label: 'test3', value: 'value3' },
          { label: 'test4', value: 'value4' },
        ],
      },
    },
  },
}

// 範例 2: 自動填入 string 於 value
{
  // ...
  autoValue: {
    secret: {
      field: 'value',
      data: {
        testSecret1: 'autoValue1',
        testSecret2: 'autoValue2'
      },
    },
  }
}

### dependOn 範例

(keyName 為參考的 component key)

- 陣列中只要一個數值 ('value1' 或 'value2') 符合即可
dependOn: { keyName: ['value1', 'value2'] } 

- 若寫為空陣列 []，代表只要有填入值即為符合
dependOn: { keyName: [] } 

- 可以多重組合，以下三個 key 的數值都要符合才算符合
dependOn: { keyName1: ['value1'], keyName2: ['value2'], keyName3: [] }  

- 若該 key 只有一個數值要判斷，數值可以寫成字串形式 (不用包在陣列裡)
dependOn: { keyName1: 'value1',  keyName2: 'value2' }

- 反向判定  
  當 value 為 object 且 value's object key === `not` 時為反向判定。  
  即 key 的 value 符合 formData 記錄時，此 component 不顯示。  
 
  可接受以下幾種情形  
  - keyName 有任意值時，此 component 不顯示  
    dependOn: { keyName: { not: [] } }  

  - keyName 有特定值時，此 component 不顯示  
    dependOn: { keyName: { not: 'value1' } }  

  - keyName 符合陣列某個值時，此 component 不顯示
    dependOn: { keyName: { not: ['value1', 'value2' ] } }  

  - 多個 keyName 時，只要有一個符合，此 component 不顯示  
    dependOn: { keyName1: { not: ['value1'] }, keyName2: { not: ['value2'] } }  

  此功能預計於 v1.8.0 milestone2 開發 storage class & volume 時加入   

## TextInput
e.g. Elastic Form Spec

{
        key: 'name',
        type: 'text',
        label: `${lang.user}${lang.name}`,
        placeholder: `${lang.pleaseEnter} ${lang.user}${lang.name}`,
        format: /^[A-Za-z0-9]+[A-Za-z0-9._-]*[A-Za-z0-9]+$/,
        dependOn: { image: ['nginx'] },
        required: true,
        fullWidth: true,
        endAdornmentIcon: 'info',
        renderEndAdornmentIconHover: () => this.renderFlavorTable(),
        dialogTitle: lang.flavor,
        enforceFocus: false,
        clickEndAdornmentIcon: () => { console.log('click'); },
}

<TextInput
  disabled={disabled}
  error={error}
  fullWidth={fullWidth}
  handleChange={handleChange}
  inputProps={inputProps}
  itemKey={itemKey}
  key={key}
  label={label}
  maxLength={maxLength}
  placeholder={placeholder}
  readOnly={readOnly}
  required={required}
  type={type}
  value={value}
/>

**Properties**
| paramenter | description |
| ------ | ------ |
| disabled | Component disabled |
| format | 可對 TextInput 的 Value 做 regex 格式判斷 |
| fullWidth | Component use full width |
| jsonFormat | Value 如果不是 json 格式的話觸發 error |
| maxLength | TextInput 能輸入的字元限制 |
| placeholer | Component 的 範例值 |
| readOnly | 將 Componet 設定成 readOnly |
| endAdornmentIcon | string，可在 TextInput 的尾端顯示你要的 icon。<br/>目前支援 'info', 'help' 兩種。<br/>實作是用 HoverIcon，你可以自行在 HoverIcon 加入更多 icon，詳見 HoverIcon component |
| dialogTitle | Hover 顯示的 commonForm 的 title |
| renderEndAdornmentIconHover | render function，在 hover 過 endAdornment icon 的時候，會顯示在 common Form 的內容 |
| enforceFocus | 布林值，預設為 false。<br/>當此值為 true 時，hover 過 endAdornment icon 的時候，會強制把畫面 focus 在 common Form 上；<br/>當此值為 false 時，鼠標離開 endAdornment icon 的時候，會自動關閉 common Form。<br/>另外，當 enforceFocus 設定為 false 時，點擊 icon 會自動進入 focus 的狀態，此時就算滑鼠離開 icon，common Form 也不會被關閉。 |
| clickEndAdornmentIcon | click function，點擊 endAdornment icon 時會觸發此 function。|

## AmountInput
用來顯示金額的 input component

// elastic form spec
{
      key: 'cpu',
      type: 'amount',
      label: `${lang.cpu} (vcore) - ${lang.pricePerHour}`,
}

**Properties**
| paramenter | description |
| ------ | ------ |
| decimalScale | 限制可到小數幾位，預設 2 |
| disabled | Component disabled |
| error | 錯誤訊息 |
| fullWidth | Component use full width |

## AutoCompleteInput

{
        key: 'image',
        type: 'autocomplete',
        label: lang.image,
        options: [
          { label: 'label1', value: 'label1' },
          { label: 'label2', value: 'label2' },
        ],
        fullWidth: true,
        required: true,
}

**Properties**
disabled, fullWidth
| Properties | Description |
| --------- | ----------- |
| options | Select 的下拉選單選項 |

## CheckboxInput
提供可勾選的項目，比較特別的是它在 formData 裡是以個別 option 的項目做記錄
e.g. `formData: { regen_key: false, test2: true }`

{
        key: 'checkBoxGroup',
        type: 'checkbox',
        label: 'Test key',
        fullWidth: true,
        options: [
          {
            label: lang.recreateKey,
            value: false,
            key: 'regen_key',
          },
          {
            label: 'test2',
            value: true,
            key: 'test2',
          },
        ],
        required: true,
}

**Properties**
fullWidth
| Properties | Description |
| --------- | ----------- |
| options | 可勾選的選項 |

## DatePickerInput

{
        key: 'expiredTime',
        type: 'date',
        label: lang.extendDays,
        showTime: true,
        placeholder: 'Default: 180 days later from now.',
        fullWidth: true,
        value: moment('2021-04-15 09:35:10'),
        required: true,

}

**Properties**
fullWidth, placeholder
| Properties | Description |
| --------- | ----------- |
| showTime | 顯示時間選項 |

## DependOnSelectInput
此 Component 可以根據其它 Component 所選的值不同，而呈現不同的 Options 供使用者選擇

{
        key: 'selectPlatform',
        type: 'dependOnSelect',
        label: 'Select Platform',
        wholeOptions: {
          label2: [{ label: 'default_k8s', value: 'default_k8s' }],
          label3: [{ label: 'default_k8s', value: 'default_k8s' }, { label: 'k8s2', value: 'k8s2' }],
        },
        dependOnSelect: 'image',
        handleChange: () => { console.log('handle change'); },
        fullWidth: true,
        required: true,
}

**Properties**
format, jsonFormat, maxLength, options, readOnly
| Properties | Description |
| --------- | ----------- |
| dependOnSelect | 此值為一 component key，當此 component key 所屬 component 的值等於 wholeOptions Object 中的任一 key 時，DependOnSelect 的 Options 會等於 wholeOptions 中的 key 的 value |
| wholeOptions | 完整的 Options 物件，以 component value 區分 |

## DynamicSelectInput
以前寫的很複雜，但我在重構的時候發現，根本不需要這麼複雜，純粹是對 react life cycle 不熟造成的冗餘程式，可以參考 [MR-745](https://gitlab.com/geminiopencloud/engineering/portal/xportal/-/merge_requests/745)
重構完成後的 component 其實與 selectInput 非常相似，只是多了幫 option value === 'btn' 的 MenuItem 加上 border，日後說不定可以跟 selectInput 合併

{
        key: 'autoScaling',
        type: 'dynamicSelect',
        label: lang.autoScaling,
        required: true,
        fullWidth: true,
        options: autoOptions,
        handleChange: this.openCreateASPForm.bind(this),
}

**Properties**
disabled, error, fullWidth, label, options, readOnly, required

## FileInput

{
        key: 'imageFile',
        label: `${lang.uploadImage} (${lang.chooseTar})`,
        type: 'file',
        customValidation: (file) => {
          // 回傳錯誤訊息表示沒通過驗證，回傳 null 通過驗證
          if (file && !file.name.includes('.svg')) return 'error format';
          return null;
        },
        required: true,
        fullWidth: true,
}

**Properties**
fullWidth
| Properties | Description |
| --------- | ----------- |
| customValidation | 對 File 的 格式進行判斷，回傳錯誤訊息表示沒通過驗證，回傳 null 通過驗證。錯誤訊息會顯示在欄位下方|

## FileNameInput
因應 FileInput 使用內建 input (type="file")，不支援 FormSteps 回上一頁填充 input (type="file") 的值，
而建立該 component。

{
        key: 'jsonFile',
        label: lang.jsonFile,
        type: 'fileNameInput',
        required: true,
        fullWidth: true,
}

**Properties**
fullWidth

## FileReaderInput
與 `<FileInput>` 差別在於 `<FileReaderInput>` 讀取檔案後會將檔案名稱＆內容顯示在textArea

{
        key: '',
        label: 'fileReaderInput',
        type: 'fileReaderInput',
        handleChange: (file) => {
          console.log(file) // file information: name, size, type...
        },
        required: true,
        fullWidth: true,
}

**Properties**
error, fullWidth, itemKey, label, handleChange, required, value,

## MultiColEntryInput
提供多行的資料輸入

{
  key: 'env',
  type: 'multicolentry',
  label: lang.environment,
  addMoreOptions: { label: `+ ${lang.addMore}` },
  colSpec: [
    {
      key: 'variableName',
      label: lang.variableName,
      type: 'text',
      fullWidth: true,
    },
    {
      key: 'valueOrSecret',
      label: lang.valueOrSecret,
      type: 'autocomplete',
      fullWidth: true,
      options: envSecretListOptions,
    },
    {
      key: 'key',
      label: lang.key,
      type: 'select',
      fullWidth: true,
      dependOn: {
        valueOrSecret: envSecretListOptions.map(option => option.value),
      },
      autoValue: {
        valueOrSecret: {
          field: 'options',
          data: autoKeyOptions,
        },
      },
    },
  ],
  fullWidth: true,
  value: envValue,
}

**Properties**
| Properties | Description |
| --------- | ----------- |
| addMoreOptions | 設定有關 addMore 的參數 <br/>**label**: addMore 要顯示的文字內容 <br/> **diabled**: 不顯示 addMore |
| colSpec | 每行要顯示的 Component Spec，可使用的參數與 ElasticForm 的設定相同 |
| customBtnOptions | 設定行尾的客製化 Button <br/><br/>**onClick** 點擊會觸發的 function <br/><br/>**disabled** disabled === true 時，只顯示，不可點擊|
| displayDeletedBtn | 預設 true。如果值為 false 的話，不顯示後方的刪除按鈕 |
| enableMultiLine | - 是否啟用多行模式，在多行模式下，colSpec 的每個 spec 都會獨立一行 |
| enableNumbered | 在每個項目的前端顯示編號，從 A-Z，目前不支援超過 Z 的情況 <br/><br/>  |
| rowLimit | rowLimit 為一 Object，內含： <br/><br/> **rowMaximum**: MCE 最多接受幾筆資料，不給值的話就是沒有上限<br/><br/> **rowMinimum**: MCE 最少需要幾筆資料，不給值的話就是 0 |
| value | 預設值，與 formData 裡的格式相同 [{ colSpec[key]: value }, ...] |

## PlainTextInput
單純顯示文字，不回傳值

{
          key: 'projectGPU',
          label: 'Project GPU Quota',
          type: 'plaintext',
          content: 'Plain Text Content',
          dynamicContent: lang.usageCondition,
          color: 'red',

}

**Properties**
size, marginTop, marginBottom,
| Properties | Description |
| --------- | ----------- |
| content | 要顯示的文字內容 |
| dynamicContent | 要顯示的動態文字內容。內容中有關 {{ }} 裡的 key 如果與同 step 的其中一個 spec 的 key 相符，則 {{key}} 替換成該 spec 的 value |
| color | 可給 css 支援的 顏色格式， e.g. 'rgb(255, 99, 71)' |
| size | 文字大小，目前只支援 'medium' 值 |
| marginTop | 設定 component 離上一個 component 的距離， e.g. '10px' |
| marginBottom | 設定 component 離下一個 component 的距離，e.g. '10px' |

## PasswordInput
作為密碼欄位輸入使用，PasswordInput 會在後端多一個 icon，點擊可切換密碼的明文密文顯示

e.g. Elastic Form Spec

{
        key: 'password',
        type: 'password',
        label: `${lang.password}`,
        required: true,
        fullWidth: true,
}

<PasswordInput
      disabled={disabled}
      error={!!error}
      fullWidth={fullWidth}
      inputProps={inputProps}
      itemKey={inputProps}
      handleChange={handleChange}
      label={label}
      maxLength={maxLength}
      placeholder={placeholder}
      required={required}
      readOnly={readOnly}
      value={pwValues}

/>

**Properties**
| paramenter | description |
| ------ | ------ |
| fullWidth | Component use full width |
| readOnly | 將 Componet 設定成 readOnly |

## RadioInput
當選項只能擇一時使用

{
        key: 'open_port',
        type: 'radio',
        label: lang.openPort,
        value: 'portRange',
        options: [
          {
            label: lang.portRange,
            value: 'portRange',
            disabled: true,
          },
          {
            label: lang.singlePort,
            value: 'singlePort',
          },
          {
            label: lang.allPorts,
            value: 'allPorts',
          },
        ],
        required: true,
        ignore: true,
        fullWidth: true,
        dependOn: { name: ['test'] },
}

**Properties**
fullWidth, options

## SwitchInput
當選項是 二擇一 時使用
注意！舊寫法是用 checked 表示勾選，新版為統一都採用 value 來表示

{
        key: 'isSystemUser',
        type: 'switch',
        label: 'System Admin Auth',
        value: true,
        fullWidth: true,
}

**Properties**
disabled
| Properties | Description |
| --------- | ----------- |
| checked | 設定預設值， true / false |

## SelectInput

{
        key: 'volumeType',
        type: 'select',
        label: lang.networkStorage,
        options: [
          { label: 'None', value: 'None', info: 'info1' },
          { label: 'NFS', value: 'NFS', info: 'info2' },
        ],
        fullWidth: true,
        required: true,
        showOptionInfo: true,
        endAdornmentIcon: 'info',
        renderEndAdornmentIconHover: () => this.renderFlavorTable(),
        dialogTitle: lang.flavor,
        enforceFocus: false,
        clickEndAdornmentIcon: () => { console.log('click'); },
}

**Properties**
format, jsonFormat, maxLength, options, readOnly
| Properties | Description |
| --------- | ----------- |
| showOptionInfo | 布林值，預設為 false。<br/>當此值為 true 時，options 可以多夾帶 info 資訊如下：<br/> [ { label: 'None', value: 'None', info: 'info1' }, { label: 'NFS', value: 'NFS', info: 'info2' } ]<br/> 夾帶的 info 會在選到對應的 option 時於下方顯示 |
| endAdornmentIcon | string，可在 selectInput 的尾端顯示你要的 icon。<br/>目前支援 'info', 'help' 兩種。<br/>實作是用 HoverIcon，你可以自行在 HoverIcon 加入更多 icon，詳見 HoverIcon component |
| dialogTitle | Hover 顯示的 commonForm 的 title |
| renderEndAdornmentIconHover | render function，在 hover 過 endAdornment icon 的時候，會顯示在 common Form 的內容 |
| enforceFocus | 布林值，預設為 false。<br/>當此值為 true 時，hover 過 endAdornment icon 的時候，會強制把畫面 focus 在 common Form 上；<br/>當此值為 false 時，鼠標離開 endAdornment icon 的時候，會自動關閉 common Form。<br/>另外，當 enforceFocus 設定為 false 時，點擊 icon 會自動進入 focus 的狀態，此時就算滑鼠離開 icon，common Form 也不會被關閉。 |
| clickEndAdornmentIcon | click function，點擊 endAdornment icon 時會觸發此 function。|

### renderEndAdornmentIconHover
renderEndAdornmentIconHover 在 SelectInput 有兩種寫法
1. 直接給 function 回傳出要 render 的 element
2. 給一個 Object，此 object 可以根據 SelectInput 的 value，給出不同 render element

// case 1
{
          key: 'flavor',
          type: 'select',
          label: lang.flavor,
          options: flavorOptions,
          fullWidth: true,
          required: true,
          showOptionInfo: true,
          endAdornmentIconType: 'info',
          renderEndAdornmentIconHover: () => (
            <FlavorInfoTable flavorList={RespListFlavor?.data ?? []} />
          ),
          dialogTitle: lang.flavor,
          enforceFocus: false,
}

// case 2
{
          key: 'type',
          type: 'select',
          label: lang.type,
          options: [
                   { label: lang.usageTime, value: 'time' },
                   { label: lang.usageAmount, value: 'usage' }
          ],
          endAdornmentIconType: 'info',
          renderEndAdornmentIconHover: { time: lang.timeInfo, usage: lang.usageInfo },
          dialogTitle: {
                   time: `${lang.usageTime} ${lang.info}`,
                   usage: `${lang.usageAmount} ${lang.info}`,
          },
          required: true,
        }

## TextAreaInput
多行文字輸入

{
        key: 'metadata',
        type: 'textarea',
        rows: 2,
        label: 'Metadata',
        placeholder: 'Example: {"schedule-policy": "affinity"}',
        jsonFormat: true,
        fullWidth: true,
        required: true,
}

disabled, fullWidth, format, jsonFormat, readOnly
| Properties | Description |
| --------- | ----------- |
| rows | 最少要顯示幾行的高度 |

## TimePickerInput

{
        key: 'launchCreate',
        type: 'time',
        label: 'Create Time',
        timeFormat: 'HH:mm',
        minuteStep: 5,
        value: moment('00:00', 'HH:mm'),
        placeholder: 'Default: 180 days later from now.',
        required: true,
}

**Properties**
fullWidth, placeholder
| Properties | Description |
| --------- | ----------- |
| hourStep | hour 的增加值 |
| minuteStep | minute 的增加值 |
| timeFormat | 時間格式 |

## TransferInput

{
        key: 'hostList',
        type: 'transfer',
        label: lang.selectHost,
        transferTitles: [lang.availableHosts, lang.hostsInZone],
        fullWidth: true,
        showSearch: true,
        dataSource: [
          { key: 'host1', hostname: 'host1' },
          { key: 'host2', hostname: 'host2' },
          { key: 'host3', hostname: 'host3' },
        ],
        selectedKeys: ['host1', 'host2'],
        value: ['host2'],
        render: item => item.hostname,
        required: true,
 }

**Properties**
dataSource, disabled, fullWidth, render
| Properties | Description |
| --------- | ----------- |
| filterOption | Search 時會套用此 function 來判斷結果。 格式: filterOption = (searchValue, itemList) => {...} |
| handleSearch | Search 時觸發此 Function |
| handleSelectChange | 勾選 Item 時觸發此 Function |
| operations | 客製化中間的兩個按鈕 e.g. ['>', '<'] |
| selectedKeys | 預設一開始要勾選哪些 item，為一 key 值陣列 |
| showSearch | 是否顯示 Search 功能 |
| TransferTitles | 客製化兩個框框上面的 title e.g. ['Not Selected', 'Selected'] |

# 其它 Component
## HoverIcon
HoverIcon 是一個當 Hover 事件觸發時，會顯示 commonForm 的 icon component
目前 NewElasticForm 中無法使用它 (意思是你無法在 formSpec 中像這樣定義 `{ type: 'HoverIcon' }`)，不過你可以在 XPortal 中有需要的頁面自行使用，selectInput 也有整合進 HoverIcon

        <HoverIcon
          dialogTitle={dialogTitle}
          enforceFocus={enforceFocus}
          handleClick={clickEndAdornmentIcon}
          iconType={endAdornmentIconType}
          renderIconHover={renderEndAdornmentIconHover}
          size="small"
        />

你可以在 HoverIcon 中的 renderIcon Function 加入你想要支援的 icon，目前支援 'info', 'help'，加完之後記得更新這個頁面
你可以在 [material icon](https://material-ui.com/components/material-icons/) 搜尋你要加的 icon，iconType 的規則為小寫 \<import icon\> 去掉後面的 icon 四個字母

  const renderIcon = () => {
    switch (iconType) {
      case 'help': return <HelpIcon />;
      default: return <InfoIcon />;
    }
  };

# History
以下特性因改寫後廢棄

#### dependOnAC 範例
目前只支援在 MultiColEntryInput 中的元件能使用下列的 Properties，不再於 Child component 中列出
| paramenter | description |
| ------ | ------ |
| dependOnAC | 主要使用於 depend 在 AutoCompleteInput，不過 SelectInput (type: 'select') 也可以 depend。 <br/><br/>此值為一 object，key 為 'fields', value 為一 value 陣列。<br/><br/> 如果 value 陣列的任一個 value 與同一個 MultiColEntryInput 裡的某個 AutoCompleteInput 的 key 相同，且 user 選擇了 AutoCompleteInput options 的內建項目，則此 component 顯示;<br/>反之，則此 component 隱藏。 |

(value1 和 value2 為參考的 component key)

- 陣列中只要一個數值 ('value1' 或 'value2') 符合即可 depend
dependOnAC: { fields: ['value1', 'value2'] } 

- 目前不支援空陣列 []

- 目前不支援多重組合

- 目前不支援數值寫成字串形式 (不用包在陣列裡)

#### dependOnSelect 範例
目前只支援在 MultiColEntryInput 中的元件能使用下列的 Properties，不再於 Child component 中列出
| paramenter | description |
| ------ | ------ |
| dependOnSelect | 主要使用於 depend 在 SelectInput，另外需與 valueSource 一起搭配使用。<br/><br/>此值為一 object，key 為 'fields', value 為一 value 陣列，雖然為 value 陣列，目前支援一個 value。<br/><br/>如果 value 陣列的第一個 value 與同一個 MultiColEntryInput 裡的某個 SelectInput 的 key 相同，且 user 選擇了 SelectInput 的 option，則此 component 從 valueSource 獲取並顯示相對應 data。 |

(value 為參考的 component key)

- 陣列中只要第一個數值 ('value') 符合即可 depend (第一個數值後的數值會被忽略)
dependOnSelect: { fields: ['value'] }

- 目前不支援空陣列 []

- 目前不支援多重組合

- 目前不支援數值寫成字串形式 (不用包在陣列裡)

#### TextInput
**properties**

| valueSource | 目前只支援在 MultiColEntryInput 中使用。<br/> 需與 dependOnSelect 搭配使用，否則會有空的 value。<br/><br/> 依據 depend 在同一個 MultiColEntryInput 裡的第一個 component (適用 depend 對象為 SelectInput (type: 'select')) 選擇的 option，來動態從值中，依據是否 id 一致挑選 data，並用挑選的 data 來填充此 component 的 value。

valueSource 值的格式如下:

[
  { id: 'idValue', data: 'dataValue' }, 
  ..., 
  { ... }, // The same data structure as the first one.
]

#### SelectInput
**properties**

| optionsSource | 目前只支援在 MultiColEntryInput 中使用。<br/> 需與 dependOnAC 搭配使用，否則會有空的 options。<br/><br/> 依據 depend 在同一個 MultiColEntryInput 裡的各 components (適用 depend 對象為 AutoCompleteInput 和 SelectInput (type: 'select')) 選擇的 options，來動態從值中，依據是否 name 一致挑選 data，並用挑選的 data 來填充此 component 的 options。|

optionsSource 值的格式如下:

[
  { ..., name: 'nameValue', ..., data: { key_1: 'value_1', ..., key_n: 'value_n' }, ... }, 
  ..., 
  { ... }, // The same data structure as the first one.
]