feat: GuideTour、Tabbar、Picker、DatePicker、Selector、Checkbox controlled (…

…#379) Co-authored-by: wyj <wb-wyj631405@antfin.com>
ant-design · Dec 8, 2022 · caa54f6 · caa54f6
1 parent 9b40e6e
commit caa54f6
Show file tree

Hide file tree

Showing 57 changed files with 374 additions and 509 deletions.
diff --git a/demo/pages/GuideTour/index.axml b/demo/pages/GuideTour/index.axml
@@ -1,21 +1,19 @@
-<view class="demo">
-  <demo-block title="基础用法">
-    <view class="btn-list">
-      <button onTap="openBaseTour">单图模式</button>
-      <button onTap="openMoreTour">多图模式</button>
-      <button onTap="openSwiperTour">滑动模式</button>
+<container title="基础用法">
+  <view class="btn-list">
+    <button onTap="openBaseTour">单图模式</button>
+    <button onTap="openMoreTour">多图模式</button>
+    <button onTap="openSwiperTour">滑动模式</button>
+  </view>
+  <guide-tour items="{{[list[0]]}}" visible="{{baseVisible}}" onCancel="closeBaseTour" onChange="onChange" />
+  <guide-tour items="{{list}}" visible="{{moreVisible}}" onCancel="closeMoreTour" onChange="onChange" />
+  <guide-tour items="{{list}}" visible="{{swiperVisible}}" onCancel="closeSwiperTour" onChange="onChange" 
+    swiperable="{{true}}" />
+</container>
+<container title="插槽用法">
+  <button onTap="openSlotTour">开始</button>
+  <guide-tour items="{{list}}"  visible="{{slotVisible}}" onCancel="closeSlotTour" onChange="onChange">
+    <view class="step-box"  slot="step" slot-scope="props">
+      step-{{props.index}}
     </view>
-    <guide-tour steps="{{[list[0]]}}" visible="{{baseVisible}}" onCancel="closeBaseTour" onChange="onChange" />
-    <guide-tour steps="{{list}}" visible="{{moreVisible}}" onCancel="closeMoreTour" onChange="onChange" />
-    <guide-tour steps="{{list}}" visible="{{swiperVisible}}" onCancel="closeSwiperTour" onChange="onChange" 
-      swiperable="{{true}}" />
-  </demo-block>
-  <demo-block title="插槽用法">
-    <button onTap="openSlotTour">开始</button>
-    <guide-tour steps="{{list}}"  visible="{{slotVisible}}" onCancel="closeSlotTour" onChange="onChange">
-      <view class="step-box" a:for="{{list}}" slot="step-{{index}}">
-        step-{{index}}
-      </view>
-    </guide-tour>
-  </demo-block>
-</view>
+  </guide-tour>
+</container>
diff --git a/demo/pages/GuideTour/index.js b/demo/pages/GuideTour/index.js
@@ -4,7 +4,6 @@ Page({
     moreVisible: false,
     swiperVisible: false,
     slotVisible: false,
-    index: 0,
     list: [
       {
         left: 20,
@@ -34,7 +33,7 @@ Page({
     this.setData({ visible: true });
   },
   onChange(index) {
-    console.log('index', index)
+    console.log('index', index);
   },
 
   openBaseTour() {
@@ -68,7 +67,6 @@ Page({
   commonShow(prop) {
     this.setData({
       [prop]: true,
-      index: 0,
     });
   },
   commonHide(prop) {

diff --git a/demo/pages/GuideTour/index.json b/demo/pages/GuideTour/index.json
@@ -2,7 +2,7 @@
   "defaultTitle": "GuideTour",
   "usingComponents": {
     "button": "../../../src/Button/index",
-    "demo-block": "../../components/DemoBlock/index",
+    "container": "../../../src/Container/index",
     "guide-tour": "../../../src/GuideTour/index"
   }
 }
diff --git a/demo/pages/Input/index.axml b/demo/pages/Input/index.axml
@@ -14,7 +14,7 @@
   <input
     placeholder="请输入内容"
     allowClear
-  />
+  >
   </input>
 </container>
 

diff --git a/demo/pages/Selector/index.acss b/demo/pages/Selector/index.acss
@@ -1,12 +0,0 @@
-page {
-  padding: 12px;
-}
-
-page .amd-container {
-  margin-bottom: 12px;
-}
-
-.valueBox {
-  margin-top: 24rpx;
-}
-

diff --git a/demo/pages/Selector/index.axml b/demo/pages/Selector/index.axml
@@ -1,67 +1,61 @@
 <container title="单选">
   <selector 
-    value="11"
-    items="{{items1}}"
+    options="{{items1}}"
   />
 </container>
 
 <container title="单选-选项带有副标题">
   <selector 
-    value="2"
-    items="{{items2}}"
+    defaultValue="2"
+    options="{{items2}}"
   />
 
 </container>
 
 <container title="多选">
   <selector 
-    value="{{['1','2']}}"
-    items="{{items1}}"
-    multiple="{{true}}"
+    defaultValue="{{['1','2']}}"
+    options="{{items1}}"
+    multiple
   />
 </container>
 
 <container title="全禁用">
   <selector 
     value="{{['1','2']}}"
-    items="{{items1}}"
-    disabled="{{true}}"
-    multiple="{{true}}"
+    options="{{items1}}"
+    disabled
+    multiple
   />
 </container>
 
 <container title="部分禁用">
   <selector 
-    value="{{['1','2']}}"
-    items="{{items3}}"
-    multiple="{{true}}"
+    defaultValue="{{['1','2']}}"
+    options="{{items3}}"
+    multiple
   />
 </container>
 
-<container title="更改值">
+<container title="受控模式">
   <selector 
     value="{{value}}"
-    items="{{items1}}"
-    data-value="value"
+    options="{{items1}}"
     onChange="handleChange"
   />
   <button 
-    class="valueBox"
-    type="danger-ghost"
-    inline="{{true}}"
     inlineSize="larger"
-    onTap="handleChangeValue"
-    data-value="11">
-    改变选中值为： 3
+    onTap="handleChangeValue">
+    改变选中值为选项三
   </button>
 </container>
 
 <container title="单选-不允许清空">
   <selector 
-    value="11"
+    defaultValue="11"
     minSelectedCount="{{1}}"
     onSelectMin="onSelectMin"
-    items="{{items1}}"
+    options="{{items1}}"
   />
 </container>
 

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: '11' },
+      { text: '选项三', value: '3' },
     ],
     items2: [
       { text: '选项一', subText: '描述文案一', value: '1' },
@@ -17,10 +17,9 @@ Page({
     ],
     value: '1',
   },
-  handleChangeValue(e) {
-    const { value } = e.currentTarget.dataset;
+  handleChangeValue() {
     this.setData({
-      value,
+      value: '3',
     });
   },
   handleChange(value, items, e) {

diff --git a/src/Checkbox/CheckboxGroup/index.axml b/src/Checkbox/CheckboxGroup/index.axml
@@ -1,21 +1,19 @@
-<import-sjs from="../../_util/getValue.sjs" name="utils" />
 <import-sjs from="../index.sjs" name="componentUtils" />
 
 <list 
   className="amd-checkbox-group {{className ? className : ''}} amd-checkbox-group-{{position}}" style="{{style}}">
   <checkbox-group
-    value="{{utils.getValue(value, selfValue, defaultValue, [])}}"
+    value="{{ mixin.value }}"
   >
     <view class="amd-checkbox-group-body">
       <block a:if="{{position === 'vertical'}}">
         <list-item stopPropagation a:for="{{options}}">
           <checkbox
             color="{{color}}"
-            checked="{{componentUtils.getChecked(item, utils.getValue(value, selfValue, defaultValue,[]))}}"
+            checked="{{componentUtils.getCheckboxChecked(item, mixin.value)}}"
             data-index="{{index}}"
             value="{{item.value}}"
             disabled="{{disabled || item.disabled}}"
-            data-currentValue="{{utils.getValue(value, selfValue, defaultValue,[])}}"
             onChange="onChange"
           > 
             <slot name="label" value="{{item}}" index="{{index}}">
@@ -28,10 +26,9 @@
         <checkbox
           a:for="{{options}}"
           color="{{color}}"
-          checked="{{componentUtils.getChecked(item, utils.getValue(value, selfValue, defaultValue,[]))}}"
+          checked="{{componentUtils.getCheckboxChecked(item, mixin.value)}}"
           data-index="{{index}}"
           value="{{item.value}}"
-          data-currentValue="{{utils.getValue(value, selfValue, defaultValue,[])}}"
           disabled="{{disabled || item.disabled}}"
           onChange="onChange"
         >

diff --git a/src/Checkbox/CheckboxGroup/index.ts b/src/Checkbox/CheckboxGroup/index.ts
@@ -1,28 +1,25 @@
 import { CheckboxGroupDefaultProps } from './props';
 import fmtEvent from '../../_util/fmtEvent';
+import mixinValue from '../../mixins/value';
 
 Component({
   props: CheckboxGroupDefaultProps,
-  data: {
-    selfValue: undefined,
-  },
+  mixins: [mixinValue()],
   methods: {
     onChange(_, e) {
       if (this.props.disabled) {
         return;
       }
-      let { currentValue } = e.currentTarget.dataset;
+      let currentValue = this.getValue();
       const { index } = e.currentTarget.dataset;
       const value = this.props.options[index].value;
       if (currentValue.indexOf(value) > -1) {
         currentValue = currentValue.filter((v) => v !== value);
       } else {
         currentValue = [...currentValue, value];
       }
-      if (typeof this.props.value === 'undefined') {
-        this.setData({
-          selfValue: currentValue,
-        });
+      if (!this.isControlled()) {
+        this.update(currentValue);
       }
       if (this.props.onChange) {
         this.props.onChange(currentValue, fmtEvent(this.props, e));

diff --git a/src/Checkbox/CheckboxGroup/props.js b/src/Checkbox/CheckboxGroup/props.js
@@ -1,4 +1,5 @@
 export const CheckboxGroupDefaultProps = {
   options: [],
   position: 'vertical',
+  defaultValue: [],
 };
diff --git a/src/Checkbox/index.axml b/src/Checkbox/index.axml
@@ -1,21 +1,17 @@
-<import-sjs from="../_util/getValue.sjs" name="utils" />
 <import-sjs from="./index.sjs" name="componentUtils" />
-
-
 <label class="amd-checkbox-item {{class || ''}}"  style="{{style || ''}}">
   <view class="amd-checkbox-item-container">
     <view class="amd-checkbox-item-wrap">
       <checkbox 
         class="amd-checkbox-item-base"
         value="{{value}}"
         onChange="onChange"
-        checked="{{utils.getValue(checked, selfChecked, defaultChecked)}}"
-        controlled="{{typeof checked !== 'undefined'}}"
+        checked="{{mixin.value}}"
         disabled="{{disabled}}"
       />
       <view class="amd-checkbox-item-fake">
-        <view class="amd-checkbox-item-fake-{{componentUtils.getClassName(utils.getValue(checked, selfChecked, defaultChecked), disabled)}}" style="{{utils.getValue(checked, selfChecked, defaultChecked) && !disabled && color ? 'background:' + color : ''}}">
-          <icon a:if="{{utils.getValue(checked, selfChecked, defaultChecked)}}" type="CheckOutline" class="amd-checkbox-item-fake-{{componentUtils.getClassName(utils.getValue(checked, selfChecked, defaultChecked), disabled)}}-icon" />
+        <view class="amd-checkbox-item-fake-{{componentUtils.getClassName(mixin.value, disabled)}}" style="{{mixin.value && !disabled && color ? 'background:' + color : ''}}">
+          <icon a:if="{{mixin.value}}" type="CheckOutline" class="amd-checkbox-item-fake-{{componentUtils.getClassName(mixin.value, disabled)}}-icon" />
         </view>
       </view>
     </view>

diff --git a/src/Checkbox/index.sjs b/src/Checkbox/index.sjs
@@ -13,8 +13,8 @@ function getClassName(checked, disabled) {
   }
 }
 
-function getChecked(item, value) {
+function getCheckboxChecked(item, value) {
   return (value || []).indexOf(item.value) > -1;
 }
 
-export default { getClassName, getChecked };
+export default { getClassName, getCheckboxChecked };
diff --git a/src/Checkbox/index.ts b/src/Checkbox/index.ts
@@ -1,22 +1,24 @@
 import { CheckboxDefaultProps } from './props';
 import fmtEvent from '../_util/fmtEvent';
+import mixinValue from '../mixins/value';
 
 Component({
   props: CheckboxDefaultProps,
-  data: {
-    selfChecked: undefined,
-  },
+  mixins: [
+    mixinValue({
+      valueKey: 'checked',
+      defaultValueKey: 'defaultChecked',
+    }),
+  ],
   methods: {
     onChange(e) {
-      const value = e.detail.value;
-      if (typeof this.props.checked === 'undefined') {
-        this.setData({
-          selfChecked: value,
-        });
+      const value = !this.getValue();
+      if (!this.isControlled()) {
+        this.update(value);
       }
       if (this.props.onChange) {
         this.props.onChange(value, fmtEvent(this.props, e));
       }
-    }
-  }
+    },
+  },
 });
diff --git a/src/Collapse/index.sjs b/src/Collapse/index.sjs
@@ -19,14 +19,5 @@ function getStyleHeight(index, contentHeight, disabled) {
   return 'height: 0px';
 }
 
-function getValue(value, selfValue, defaultValue) {
-  if (typeof value !== 'undefined') {
-    return value;
-  }
-  if (typeof selfValue !== 'undefined') {
-    return selfValue;
-  }
-  return defaultValue || [];
-}
 
-export default { isActive, getStyleHeight, getValue };
+export default { isActive, getStyleHeight };