feat: checklist controlled (#378)

Co-authored-by: wyj <wb-wyj631405@antfin.com>
ant-design · Nov 28, 2022 · 3c61a5b · 3c61a5b
1 parent 8c282b8
commit 3c61a5b
Show file tree

Hide file tree

Showing 10 changed files with 100 additions and 140 deletions.
diff --git a/demo/pages/Checklist/index.axml b/demo/pages/Checklist/index.axml
@@ -1,6 +1,6 @@
 <container title="简单布局-单选">
   <checklist 
-    value="{{1}}"
+    defaultValue="{{1}}"
     options="{{options_1}}"
     data-options="{{options_1}}"
     onChange="onChange"
@@ -9,15 +9,23 @@
 
 <container title="复杂布局-多选">
   <checklist 
-    value="{{value}}" 
+    defaultValue="{{[1,2]}}" 
     options="{{options_2}}"
     multiple
     onChange="onChange"
   />
 </container>
+<container title="受控模式">
+  <checklist 
+    value="{{value}}"
+    options="{{options_2}}"
+    multiple
+    onChange="onChangeControlled"
+  />
+</container>
 <container title="禁用状态">
   <checklist 
-    value="{{[2]}}"
+    defaultValue="{{[2]}}"
     options="{{options_3}}"
     multiple
     onChange="onChange"
@@ -26,15 +34,15 @@
 
 <container title="只读状态" >
   <checklist 
-    value="{{[2]}}"
+    defaultValue="{{[2]}}"
     options="{{options_4}}"
     multiple
     onChange="onChange"
   />
 </container>
 <container title="自定义勾选图标&&组件内容" >
   <checklist 
-    value="{{[2]}}"
+    defaultValue="{{[2]}}"
     options="{{options_3}}"
     multiple
     onChange="onChange"

diff --git a/demo/pages/Checklist/index.js b/demo/pages/Checklist/index.js
@@ -4,69 +4,75 @@ Page({
     options_1: [
       {
         value: 1,
-        title: '可勾选列表项1'
+        title: '可勾选列表项1',
       },
       {
         value: 2,
-        title: '可勾选列表项2'
+        title: '可勾选列表项2',
       },
       {
         value: 3,
-        title: '可勾选列表项3'
-      }
+        title: '可勾选列表项3',
+      },
     ],
     options_2: [
       {
         value: 1,
-        image: 'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*5m0ZQYhxhjEAAAAAAAAAAAAAARQnAQ',
-        description: "这里是描述信息",
-        title: '可勾选列表项1'
+        image:
+          'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*5m0ZQYhxhjEAAAAAAAAAAAAAARQnAQ',
+        description: '这里是描述信息',
+        title: '可勾选列表项1',
       },
       {
         value: 2,
-        image: 'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*5m0ZQYhxhjEAAAAAAAAAAAAAARQnAQ',
-        description: "这里是描述信息",
-        title: '可勾选列表项2'
+        image:
+          'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*5m0ZQYhxhjEAAAAAAAAAAAAAARQnAQ',
+        description: '这里是描述信息',
+        title: '可勾选列表项2',
       },
       {
         value: 3,
-        image: 'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*5m0ZQYhxhjEAAAAAAAAAAAAAARQnAQ',
-        description: "这里是描述信息",
-        title: '可勾选列表项3'
-      }
+        image:
+          'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*5m0ZQYhxhjEAAAAAAAAAAAAAARQnAQ',
+        description: '这里是描述信息',
+        title: '可勾选列表项3',
+      },
     ],
     options_3: [
       {
         value: 1,
-        title: '可勾选列表项1'
+        title: '可勾选列表项1',
       },
       {
         value: 2,
         title: '禁用列表项2',
-        disabled: true
+        disabled: true,
       },
       {
         value: 3,
-        title: '可勾选列表项3'
-      }
+        title: '可勾选列表项3',
+      },
     ],
     options_4: [
       {
         value: 1,
-        title: '可勾选列表项1'
+        title: '可勾选列表项1',
       },
       {
         value: 2,
         title: '只读列表项2',
-        readonly: true
+        readonly: true,
       },
       {
         value: 3,
-        title: '可勾选列表项3'
-      }
-    ]
+        title: '可勾选列表项3',
+      },
+    ],
+  },
+  onChange(v, items, e) {
+    console.log('当前选中的值为：', v, items, e);
+  },
+  onChangeControlled(value) {
+    this.setData({ value });
   },
-  onChange(v,items,e) {
-    console.log('当前选中的值为：', v,items , e);
-  }
-})
+});
diff --git a/src/Checklist/ChecklistItem/index.ts b/src/Checklist/ChecklistItem/index.ts
@@ -1,72 +1,10 @@
-import equal from 'fast-deep-equal';
 import { ChecklistItemDefaultProps } from './props';
 
 Component({
   props: ChecklistItemDefaultProps,
-
-  data: {
-    checked: false
-  },
-
-  didMount() {
-    const checked = this.getChecked()
-    this.setData({
-      checked
-    });
-  },
-
-  didUpdate(prevProps) {
-    const { value, item, multiple } = prevProps;
-    if (equal(this.props.value, value) &&
-      equal(this.props.item, item) &&
-      equal(this.props.multiple, multiple)) return;
-    const checked = this.getChecked()
-    this.setData({
-      checked
-    });
-  },
-
   methods: {
     onChecklistItemClick() {
-      const { checked } = this.data;
-      const { onChange } = this.props;
-      this.setData({
-        checked: !checked
-      });
-      const value = this.getValues(!checked)
-      onChange && onChange.call(this.props, value);
-    },
-
-    getChecked() {
-      const { multiple, item, value } = this.props;
-      if (!multiple) {
-        return value === item.value
-      }
-      let valueArr = []
-      if (!Array.isArray(value)) {
-        valueArr = [value]
-      } else {
-        valueArr  = value.slice()
-      }
-      return valueArr.indexOf(item.value) > -1
+      this.props.onChange(this.props.item);
     },
-
-    getValues(checked) {
-      const {  multiple, item, value } = this.props;
-      if (!multiple) {
-        return checked ? item.value : '';
-      }
-      let valueArr = value
-      if (!Array.isArray(value)) {
-        valueArr = [value]
-      } else {
-        valueArr  = value.slice()
-      }
-      if (checked && valueArr.indexOf(item.value) === -1) {
-        return valueArr.concat([item.value]);
-      } else {
-        return valueArr.filter(v => v !== item.value);
-      }
-    }
   },
 });
diff --git a/src/Checklist/ChecklistItem/props.d.ts b/src/Checklist/ChecklistItem/props.d.ts
@@ -1,29 +1,17 @@
 import { IBaseProps } from '../../_base';
-import { ChecklistItem } from '../props'
+import { ChecklistItem } from '../props';
 
 /**
  * @description 可勾选列表单项
  */
 
 interface IChecklistItemProps extends IBaseProps {
-  /**
-   * @description 是否支持多选
-   * @default false
-   */
-  multiple: boolean;
-
-
-  item: ChecklistItem
-
-  /**
-   * @description 可勾选列表的值
-   */
-  value: Array<string | number>| string| number;
-
+  item: ChecklistItem;
+  checked: boolean;
   /**
    * @description 当项选项值改变时触发
    */
-  onChange: (v: string | number) => any
+  onChange: (item: ChecklistItem) => void;
 }
 
 export declare const ChecklistItemDefaultProps: Partial<IChecklistItemProps>;
diff --git a/src/Checklist/ChecklistItem/props.js b/src/Checklist/ChecklistItem/props.js
@@ -1,5 +1 @@
-export const ChecklistItemDefaultProps = {
-  multiple: false,
-  item: {}
-};
-
+export const ChecklistItemDefaultProps = {};
diff --git a/src/Checklist/index.axml b/src/Checklist/index.axml
@@ -1,10 +1,10 @@
+<import-sjs from="./index.sjs" name="{getChecked}" />
 <view class="amd-checklist {{className ? className : ''}}" style="{{style || ''}}">
   <view class="amd-checklist-body">
     <checklist-item
       a:for="{{options}}"
-      value="{{cValue}}"
+      checked="{{getChecked(item.value,mixin.value,multiple)}}"
       item="{{item}}"
-      multiple="{{multiple}}"
       onChange="onChange"
     >
       <view slot="content" class="amd-checklist-item-content-box-nut">

diff --git a/src/Checklist/index.sjs b/src/Checklist/index.sjs
@@ -0,0 +1,8 @@
+function getChecked(value, values, multiple) {
+  if (!multiple) {
+    return value === values;
+  }
+  return (values || []).indexOf(value) > -1;
+}
+
+export default { getChecked };
diff --git a/src/Checklist/index.ts b/src/Checklist/index.ts
@@ -1,30 +1,43 @@
 import { ChecklistDefaultProps } from './props';
-import controlled from '../mixins/controlled'
+import mixinValue from '../mixins/value';
 import fmtEvent from '../_util/fmtEvent';
 
 Component({
   props: ChecklistDefaultProps,
-  mixins: [controlled()],
-  didMount() {
-    const { multiple, value } = this.props
-    if (multiple && !Array.isArray(value)) {
-      this.setData({
-        cValue: []
-      })
-    }
-  },
+  mixins: [mixinValue()],
   methods: {
-    onChange(value) {
-      const { multiple, options } = this.props
-      let items = null
-      if (multiple && Array.isArray(value)) {
-        items = value.map(v => {
-          return options.filter(o => o.value === v)?.[0]
-        })
+    onChange(item) {
+      const { multiple, options, onChange } = this.props;
+      const value = item.value;
+      if (multiple) {
+        let currentValue = this.getValue() || [];
+        if (currentValue.indexOf(value) > -1) {
+          currentValue = currentValue.filter((v) => v !== value);
+        } else {
+          currentValue = [...currentValue, value];
+        }
+        if (!this.isControlled()) {
+          this.update(currentValue);
+        }
+        if (onChange) {
+          onChange(
+            currentValue,
+            options.filter((v) => currentValue.indexOf(v.value) > -1) as any,
+            fmtEvent(this.props)
+          );
+        }
       } else {
-        items =  options.filter(o => o.value === value)?.[0];
+        if (!this.isControlled()) {
+          this.update(value);
+        }
+        if (onChange) {
+          onChange(
+            value,
+            options.find((v) => v.value === value) as any,
+            fmtEvent(this.props)
+          );
+        }
       }
-      this.cOnChange(value, items, fmtEvent(this.props));
-    }
+    },
   },
 });
diff --git a/src/Checklist/props.d.ts b/src/Checklist/props.d.ts
@@ -47,7 +47,11 @@ interface IChecklistProps extends IBaseProps {
   /**
    * @description 可勾选列表值改变时触发
    */
-  onChange: (v: Array<string | number>| string| number,  item: ChecklistItem| Array<ChecklistItem>) => void;
+  onChange: (
+    v: Array<string | number> | string | number,
+    item: ChecklistItem | Array<ChecklistItem>,
+    e: Record<string, any>
+  ) => void;
 }
 
 export declare const ChecklistDefaultProps: Partial<IChecklistProps>;
diff --git a/src/Checklist/props.js b/src/Checklist/props.js
@@ -1,5 +1,4 @@
 export const ChecklistDefaultProps = {
-  value: '',
   multiple: false,
   options: []
 };