feat(Selector): change

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "antd-mini",
-  "version": "0.0.2-alpha.1",
+  "name": "antd-mini-rpx",
+  "version": "0.0.7-alpha.5",
   "scripts": {
     "dev": "minidev dev --less --typescript --no-source-map",
     "dev:site": "dumi dev",
@@ -13,7 +13,7 @@
     "lint:code": "eslint \"demo/pages/**/*.js\" \"scripts/*.js\" \"src/**/*.ts\"",
     "lint:code:fix": "eslint \"demo/pages/**/*.js\" \"scripts/*.js\" \"src/**/*.ts\" --fix",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
-    "prepublishOnly": "npm run build:component",
+    "prepublishOnly": "npm run build:component:rpx",
     "pub": "node scripts/publish.js",
     "test:less": "jest __tests__/less.spec.ts",
     "test:markdown": "jest __tests__/markdowns.spec.ts",
@@ -127,4 +127,4 @@
   ],
   "license": "MIT",
   "homepage": "https://github.com/ant-design/ant-design-mini"
-}
+}

src/Selector/index.axml

@@ -18,9 +18,8 @@
     <view class="amd-selector-content-container">
       <view a:for="{{items}}" class="amd-selector-content {{items.length <= 2 ? 'amd-selector-content-item2' : ''}}">
         <view
-          class="amd-selector-item {{item.disabled ? 'amd-selector-item-disabled' : ''}} {{selector.getIsCurItemSelected(cValue, multiple, item.value) ? selector.getSelectedClassName(activeItemClassName) :''}}"
+          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"

src/Selector/index.json

@@ -1,4 +1,6 @@
 {
   "component": true,
-  "usingComponents": {}
+  "usingComponents": {
+    "tap-modal":"../TapModal/index"
+  }
 }

src/Selector/index.md

@@ -4,37 +4,49 @@ nav:
 group:
   title: 信息输入
   order: 10
-toc: false
+toc: 'content'
 ---
 
 # Selector 选择组
 在一组选项中选择一个或多个
 ## 何时使用
 提供多个选项供用户选择，一般在筛选和表单中使用
+## 注意事项
+- 当作为表单组件，配合 `Form`/`FormItem` 组件使用时，需要设置 `mode` 的值为 `form`。
 
 ## 代码示例
 ### 基本使用
 <code src='../../demo/pages/Selector'></code>
-
-
-
 ## 属性
-| 属性 |  说明 | 类型 | 默认值 |
-| -----|-----|-----|-----|
-| value | 已选择项, items 每一项的 value, multiple=true时传value的数组 |  string &verbar; string[] | - |
-| items | 可选项  | {text:string; value:string; subText: string; disabled: boolean}[] | - |
-| multiple | 是否允许多选，标签栏显示的时候会显示当前单选/多选的状态  | boolean | false |
-| disabled |  是否禁用 | boolean | false |
-| activeItemClassName | 每一项激活时新加类名 | string| - |
-| title |   标签栏标题 | string | - |
-| desc |  标签栏说明 | string | - |
-| className | 类名 | string | - |
 
+```typescript
+type SelectorItem = {
+  text: string;
+  value: string|number;
+  subText?: srting;
+  disabled?: boolean;
+}
+```
+<hr />
+
+| 属性 | 类型 | 必填 | 默认值 | 说明 |
+| -----|-----|-----|-----|----- |
+| value | string &#124; number &#124; string[] &#124; number[]  | 否 | - | 已选择项, 取 items 每一项的 value |
+| items | SelectorItem[] | 是 | - | 可选项 |
+| activeItemClassName | string | 否 | - | 每一项激活时新加类名 |
+| multiple | boolean | 否 | false | 是否允许多选，标签栏显示的时候会显示当前单选/多选的状态 |
+| title | string | 否 | '' | 标签栏标题 |
+| desc | string | 否 | '' | 标签栏说明|
+| id | string | 否 | - | 表单元素 id |
+| name | string | 否 | - | 表单元素 name |
+| disabled | boolean | 否 | false | 是否禁用 |
+| mode | 'noraml' &verbar; 'form' | 否 | 'normal' | 配合From/FormItem组件使用时，需设置为 from |
+| className | string | 否 | - | 类名 |
 
 ## 事件
 | 事件名 | 说明 | 类型 |
 | -----|-----|-----|
-| onChange | 选中值发生变化，触发回调 | (v: string &#124; string[]) => void |
+| onChange | 选中值发生变化，触发回调 | (v: string &#124; string[], selectedItem: SelectItem &#124; SelectItem[] ) => void |
 
 ## 样式类
 | 类名 | 说明 |
@@ -47,4 +59,4 @@ toc: false
 | amd-selector-item-disabled | 禁用状态下单个选项样式 |
 | amd-selector-item-text | 文本样式 |
 | amd-selector-item-subtext | 副文本样式 |
-| amd-selector-item-badge-active | 激活状态下徽标样式 |
+| amd-selector-item-badge-active | 激活状态下徽标样式 |

src/Selector/index.sjs

@@ -1,28 +1,22 @@
-function getFixedValue (value, multiple) {
-  let fixedValue;
-  if (multiple) {
-    fixedValue = value;
-  }
- else {
-    fixedValue = value && value.slice(0, 1)
+const getFixedValue = (value, multiple) => {
+  let fixedValue = [];
+  if (value === null) {
+    fixedValue = []
+  } else if (multiple && value.constructor === 'Array') {
+    fixedValue = value
+  } else if (!(value.constructor === 'Array')) {
+    fixedValue =  [value]
   }
+  return fixedValue;
+};
 
-  if (fixedValue) {
-    return fixedValue;
-  }
-  // 如果不是数组， 返回数组兜底
-  return []
-}
+const getIsCurItemSelected = (value, multiple, itemValue) => {
+  const fixedValue = getFixedValue(value, multiple);
 
-function getIsCurItemSelected(value, multiple, itemValue) {
-  const fixedValue = getFixedValue(value, multiple)
-  return fixedValue.indexOf(itemValue) !== -1
+  return fixedValue.indexOf(itemValue) !== -1;
 }
 
-function getSelectedClassName(activeItemClassName) {
-  return 'amd-selector-item-active ' + activeItemClassName
-}
+
 export default {
   getIsCurItemSelected,
-  getSelectedClassName
-}
+};

src/Selector/index.ts

@@ -1,31 +1,33 @@
 import { SelectorDefaultProps } from './props';
-import formed from '../Form/mixin';
+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;
 };
 
 Component({
-  mixins: [formed({
-    defaultPropsValue: []
-  })],
+  mixins: [controlled(), formMixin()],
   props: SelectorDefaultProps,
-  data: {},
+  data: {} as {
+    cValue?: string[];
+  },
   methods: {
     onChange(e) {
       const { disabled, value } = e.currentTarget.dataset;
       const { multiple, items } = this.props;
       if (!disabled && !this.props.disabled) {
+        let nextValue: string[];
         const fixedValue = getFixedValue(this.data.cValue, multiple);
         if (multiple) {
-          let nextValue: string[];
           // 之前已经选中，删除它
           if (fixedValue?.indexOf(value) !== -1) {
             nextValue = fixedValue?.filter((item) => {
@@ -37,14 +39,12 @@ Component({
           }
           // 将 value 重新按 options 排序
           const sortValue = (v: string[]) => {
-            return items
-              .map((item) => item.value)
-              .filter((item) => v.indexOf(item) !== -1);
+            return items.map((item) => item.value).filter((item) => v.indexOf(item) !== -1);
           };
           nextValue = sortValue(nextValue);
-          this.triggerChange(nextValue);
+          const selectedItems = nextValue.map(v => items.filter(item => item.value === v)?.[0])
+          this.triggerChange(nextValue, selectedItems);
         } else {
-          let nextValue = '';
           // 单选
           // 取消选中
           // eslint-disable-next-line no-lonely-if
@@ -54,7 +54,8 @@ Component({
             // 选中
             nextValue = value;
           }
-          this.triggerChange(nextValue);
+          const selectedItem = items.filter(item => item.value === nextValue)?.[0] ||  null
+          this.triggerChange(nextValue,  selectedItem);
         }
       }
     },