value can also be a number now

plantain-00 · Jun 10, 2017 · 500cf12 · 500cf12
1 parent 41d6f6c
commit 500cf12
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 23 deletions.
diff --git a/README.md b/README.md
@@ -94,13 +94,13 @@ the online demo: https://plantain-00.github.io/select2-component/demo/angular/in
 name | type | description
 --- | --- | ---
 data | [Select2Data](#select2-data-structure) | the data of the select2
-value | string? | initial value
+value | [Select2Value](#select2-data-structure)? | initial value
 disabled | boolean? | whether the component is disabled
 minCountForSearch | number? = 6 | hide search box if `options.length < minCountForSearch`
 placeholder | string? | the placeholder string if nothing selected
 customSearchEnabled | boolean? | will trigger `search` event, and disable inside filter
 multiple | boolean? | select multiple options
-update | (value: string | string[]) => void | triggered when user select an option
+update | (value: [Select2UpdateValue](#select2-data-structure)) => void | triggered when user select an option
 open | () => void | triggered when user open the options
 search | (text: string) => void | triggered when search text changed
 
@@ -115,11 +115,15 @@ type Select2Group = {
 };
 
 type Select2Option = {
-    value: string;
+    value: Select2Value;
     label: string;
     disabled?: boolean;
     component?: string | Function; // the component
 };
+
+type Select2Value = string | number;
+
+type Select2UpdateValue = Select2Value | Select2Value[];
 ```
 
 #### change log

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "select2-component",
-  "version": "2.5.0",
+  "version": "2.5.1",
   "description": "A vuejs, reactjs and angular select component.",
   "main": "index.js",
   "scripts": {

diff --git a/src/angular.ts b/src/angular.ts
@@ -10,7 +10,7 @@ export class Select2Component {
     @Input()
     data: common.Select2Data;
     @Input()
-    value?: string | string[];
+    value?: common.Select2UpdateValue;
     @Input()
     disabled?: boolean;
     @Input()
@@ -28,7 +28,7 @@ export class Select2Component {
     @Output()
     search = new EventEmitter();
 
-    hoveringValue: string | null | undefined = null;
+    hoveringValue: common.Select2Value | null | undefined = null;
     option: common.Select2Option | common.Select2Option[] | null = null;
     isOpen = false;
     focusoutTimer?: NodeJS.Timer;

diff --git a/src/common.ts b/src/common.ts
@@ -4,20 +4,24 @@ export type Select2Group = {
 };
 
 export type Select2Option = {
-    value: string;
+    value: Select2Value;
     label: string;
     disabled?: boolean;
     // tslint:disable-next-line:ban-types
     component?: string | Function;
 };
 
+export type Select2Value = string | number;
+
+export type Select2UpdateValue = Select2Value | Select2Value[];
+
 export type Select2Data = (Select2Group | Select2Option)[];
 
 export const timeout = 200;
 
 export const height = 28;
 
-function getScrollUpIndex(data: Select2Data, value: string) {
+function getScrollUpIndex(data: Select2Data, value: Select2Value) {
     let index = 0;
     for (const groupOrOption of data) {
         const options = (groupOrOption as Select2Group).options;
@@ -41,7 +45,7 @@ function getScrollUpIndex(data: Select2Data, value: string) {
     return 0;
 }
 
-export function getOptionByValue(data: Select2Data, value: string | null | undefined) {
+export function getOptionByValue(data: Select2Data, value: Select2Value | null | undefined) {
     for (const groupOrOption of data) {
         const options = (groupOrOption as Select2Group).options;
         if (options) {
@@ -59,9 +63,9 @@ export function getOptionByValue(data: Select2Data, value: string | null | undef
     return null;
 }
 
-export function getOptionsByValue(data: Select2Data, value: string | string[] | null | undefined, multiple: boolean | null | undefined) {
+export function getOptionsByValue(data: Select2Data, value: Select2UpdateValue | null | undefined, multiple: boolean | null | undefined) {
     if (multiple) {
-        const values: string[] = Array.isArray(value) ? value : [];
+        const values: Select2Value[] = Array.isArray(value) ? value : [];
         const result: Select2Option[] = [];
         for (const v of values) {
             const option = getOptionByValue(data, v);
@@ -71,7 +75,7 @@ export function getOptionsByValue(data: Select2Data, value: string | string[] |
         }
         return result;
     }
-    return getOptionByValue(data, value as string | null | undefined);
+    return getOptionByValue(data, value as Select2Value | null | undefined);
 }
 
 export function getFirstAvailableOption(data: Select2Data) {
@@ -106,7 +110,7 @@ function getOptionsCount(data: Select2Data) {
     return count;
 }
 
-export function valueIsNotInFilteredData(filteredData: Select2Data, value: string | null | undefined) {
+export function valueIsNotInFilteredData(filteredData: Select2Data, value: Select2Value | null | undefined) {
     if (value === null || value === undefined) {
         return true;
     }
@@ -127,7 +131,7 @@ export function valueIsNotInFilteredData(filteredData: Select2Data, value: strin
     return true;
 }
 
-export function getPreviousOption(filteredData: Select2Data, hoveringValue: string | null | undefined) {
+export function getPreviousOption(filteredData: Select2Data, hoveringValue: Select2Value | null | undefined) {
     let findIt = hoveringValue === null || hoveringValue === undefined;
     for (let i = filteredData.length - 1; i >= 0; i--) {
         const groupOrOption = filteredData[i];
@@ -154,7 +158,7 @@ export function getPreviousOption(filteredData: Select2Data, hoveringValue: stri
     }
     return findIt ? hoveringValue : null;
 }
-export function getNextOption(filteredData: Select2Data, hoveringValue: string | null | undefined) {
+export function getNextOption(filteredData: Select2Data, hoveringValue: Select2Value | null | undefined) {
     let findIt = hoveringValue === null || hoveringValue === undefined;
     for (const groupOrOption of filteredData) {
         const options = (groupOrOption as Select2Group).options;
@@ -182,7 +186,7 @@ export function getNextOption(filteredData: Select2Data, hoveringValue: string |
     return findIt ? hoveringValue : null;
 }
 
-export function getLastScrollTopIndex(hoveringValue: string | null | undefined, results: HTMLElement, filteredData: Select2Data, lastScrollTopIndex: number) {
+export function getLastScrollTopIndex(hoveringValue: Select2Value | null | undefined, results: HTMLElement, filteredData: Select2Data, lastScrollTopIndex: number) {
     if (hoveringValue === null || hoveringValue === undefined) {
         results.scrollTop = 0;
         return 0;
@@ -229,7 +233,7 @@ export function getFilteredData(data: Select2Data, searchText: string | null) {
     }
 }
 
-export function getOptionStyle(value: string, hoveringValue: string | null | undefined) {
+export function getOptionStyle(value: Select2Value, hoveringValue: Select2Value | null | undefined) {
     return value === hoveringValue
         ? "select2-results__option select2-results__option--highlighted"
         : "select2-results__option";

diff --git a/src/react.tsx b/src/react.tsx
@@ -4,17 +4,17 @@ import * as common from "./common";
 
 export class Select2 extends React.PureComponent<{
     data: common.Select2Data;
-    value?: string | string[];
+    value?: common.Select2UpdateValue;
     disabled?: boolean;
     minCountForSearch?: number;
     placeholder?: string;
     customSearchEnabled?: boolean;
     multiple?: boolean;
-    update?: (value: string | string[]) => void;
+    update?: (value: common.Select2UpdateValue) => void;
     open?: () => void;
     search?: (text: string) => void;
 }, {}> {
-    hoveringValue: string | null | undefined = null;
+    hoveringValue: common.Select2Value | null | undefined = null;
     option: common.Select2Option | common.Select2Option[] | null = null;
     isOpen = false;
     focusoutTimer?: NodeJS.Timer;
@@ -89,7 +89,7 @@ export class Select2 extends React.PureComponent<{
         this.resultsElement = ReactDOM.findDOMNode(this).childNodes[1].childNodes[0].childNodes[1].childNodes[0] as HTMLElement;
     }
 
-    getOptionStyle(value: string) {
+    getOptionStyle(value: common.Select2Value) {
         return common.getOptionStyle(value, this.hoveringValue);
     }
     mouseenter(option: common.Select2Option) {

diff --git a/src/vue.ts b/src/vue.ts
@@ -9,14 +9,14 @@ import { srcVueTemplateHtml } from "./vue-variables";
 })
 class Select2 extends Vue {
     data: common.Select2Data;
-    value?: string | string[];
+    value?: common.Select2UpdateValue;
     disabled?: boolean;
     minCountForSearch?: number;
     placeholder?: string;
     customSearchEnabled?: boolean;
     multiple?: boolean;
 
-    hoveringValue: string | null | undefined = null;
+    hoveringValue: common.Select2Value | null | undefined = null;
     option: common.Select2Option | common.Select2Option[] | null = null;
     isOpen = false;
     focusoutTimer?: NodeJS.Timer;