chore(Selector): fix value dosen't work (#127)

* chore(Selector): fix value dosen't work * chore(Selector): removew export getFixedVlaue Co-authored-by: 陌缓 <[email protected]>
ant-design · Jun 2, 2022 · 20a56cf · 20a56cf
1 parent 4d9dabb
commit 20a56cf
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 42 deletions.
diff --git a/demo/pages/Selector/index.axml b/demo/pages/Selector/index.axml
@@ -1,6 +1,6 @@
 <selector 
   title="单选"
-  value="1"
+  value="11"
   items="{{items1}}"/>
 
 <selector 
@@ -40,7 +40,7 @@
     inline="{{true}}"
     inlineSize="larger"
     onTap="handleChangeValue"
-    data-value="3">
+    data-value="11">
     改变选中值为： 3
   </button>
 </view>
diff --git a/demo/pages/Selector/index.js b/demo/pages/Selector/index.js
@@ -3,7 +3,7 @@ Page({
     items1: [
       { text: '选项一', value: '1' },
       { text: '选项二', value: '2' },
-      { text: '选项三', value: '3' }],
+      { text: '选项三', value: '11' }],
     items2: [
       { text: '选项一', subText: '副标题一', value: '1' },
       { text: '选项二', subText: '副标题二', value: '2' },

diff --git a/src/Selector/index.axml b/src/Selector/index.axml
@@ -20,7 +20,6 @@
         <view
           class="amd-selector-item {{item.disabled ? 'amd-selector-item-disabled' : ''}} {{selector.getIsCurItemSelected(cValue, multiple, item.value) ? 'amd-selector-item-active' :''}}"
           data-value="{{item.value}}"
-          data-text="{{item.text}}"
           data-disabled="{{item.disabled}}"
           onTap="onChange">
           <view class="amd-selector-item-text"

diff --git a/src/Selector/index.md b/src/Selector/index.md
@@ -17,15 +17,22 @@ toc: false
 ## 代码示例
 ### 基本使用
 <code src='../../demo/pages/Selector'></code>
+## 属性
 
+```typescript
+type SelectorItem = {
+  text: string;
+  value: string|number;
+  subText?: srting;
+  disabled?: boolean;
+}
+```
+<hr />
 
-
-## 属性
 | 属性 | 类型 | 必填 | 默认值 | 说明 |
 | -----|-----|-----|-----|----- |
-| controlled | boolean | 否 | false | 是否受控 |
-| value | string[] | 否 | - | 已选择项, 取 items 每一项的 value |
-| items | {text:string; value:string; subText: string; disabled: boolean}[] | 是 | - | 可选项 |
+| value | string &#124; number &#124; string[] &#124; number[]  | 否 | - | 已选择项, 取 items 每一项的 value |
+| items | SelectorItem[] | 是 | - | 可选项 |
 | activeItemClassName | string | 否 | - | 每一项激活时新加类名 |
 | multiple | boolean | 否 | false | 是否允许多选，标签栏显示的时候会显示当前单选/多选的状态 |
 | title | string | 否 | '' | 标签栏标题 |
@@ -39,7 +46,7 @@ toc: false
 ## 事件
 | 事件名 | 说明 | 类型 |
 | -----|-----|-----|
-| onChange | 选中值发生变化，触发回调 | (v: string &#124; string[]) => void |
+| onChange | 选中值发生变化，触发回调 | (v: string &#124; string[], selectedItem: SelectItem &#124; SelectItem[] ) => void |
 
 ## 样式类
 | 类名 | 说明 |
@@ -55,14 +62,14 @@ toc: false
 | amd-selector-item-badge-active | 激活状态下徽标样式 |
 
 <style> 
-table th:first-of-type { width: 180px; } 
-.__dumi-default-layout-content article table:first-of-type th:nth-of-type(2)  {
-    width: 140px
-} 
-.__dumi-default-layout-content article table:first-of-type th:nth-of-type(3)  {
-    width: 30px
-} 
-.__dumi-default-layout-content article table:first-of-type th:nth-of-type(4)  {
-    width: 50px
-} 
+table th:first-of-type { width: 180px; }
+.__dumi-default-layout-content article table:first-of-type th:nth-of-type(2) {
+    width: 140px;
+}
+.__dumi-default-layout-content article table:first-of-type th:nth-of-type(3) {
+    width: 30px;
+}
+.__dumi-default-layout-content article table:first-of-type th:nth-of-type(4) {
+    width: 50px;
+}
 </style> 
diff --git a/src/Selector/index.sjs b/src/Selector/index.sjs
@@ -1,17 +1,13 @@
 const getFixedValue = (value, multiple) => {
-  let fixedValue;
-  if (multiple) {
-    fixedValue = value;
-  } else {
-    fixedValue = value && value.slice(0, 1);
+  let fixedValue = [];
+  if (value === null) {
+    fixedValue = []
+  } else if (multiple && value.constructor === 'Array') {
+    fixedValue = value
+  } else if (!(value.constructor === 'Array')) {
+    fixedValue =  [value]
   }
-
-  if (fixedValue) {
-    return fixedValue;
-  }
-
-  // 如果不是数组， 返回数组兜底
-  return [];
+  return fixedValue;
 };
 
 const getIsCurItemSelected = (value, multiple, itemValue) => {

diff --git a/src/Selector/index.ts b/src/Selector/index.ts
@@ -3,13 +3,14 @@ import controlled from '../mixins/controlled';
 import formMixin from '../mixins/form';
 
 const getFixedValue = (value, multiple) => {
-  let fixedValue;
-  if (multiple) {
-    fixedValue = value;
-  } else {
-    fixedValue = value?.slice(0, 1);
+  let fixedValue = [];
+  if (value === null) {
+    fixedValue = []
+  } else if (multiple && Array.isArray(value)) {
+    fixedValue = value
+  } else if (!Array.isArray(value)) {
+    fixedValue =  [value]
   }
-
   return fixedValue;
 };
 
@@ -18,11 +19,10 @@ Component({
   props: SelectorDefaultProps,
   data: {} as {
     cValue?: string[];
-    items: [];
   },
   methods: {
     onChange(e) {
-      const { disabled, value, text } = e.currentTarget.dataset;
+      const { disabled, value } = e.currentTarget.dataset;
       const { multiple, items } = this.props;
       if (!disabled && !this.props.disabled) {
         let nextValue: string[];
@@ -42,7 +42,8 @@ Component({
             return items.map((item) => item.value).filter((item) => v.indexOf(item) !== -1);
           };
           nextValue = sortValue(nextValue);
-          this.cOnChange(nextValue);
+          const selectedItems = nextValue.map(v => items.filter(item => item.value === v)?.[0])
+          this.cOnChange(nextValue, selectedItems);
         } else {
           // 单选
           // 取消选中
@@ -53,7 +54,8 @@ Component({
             // 选中
             nextValue = value;
           }
-          this.cOnChange(nextValue, text);
+          const selectedItem = items.filter(item => item.value === nextValue)?.[0] ||  null
+          this.cOnChange(nextValue,  selectedItem);
         }
       }
     },