CheckList 适配微信

compiled/alipay/demo/pages/Checklist/index.axml

@@ -1,56 +1,59 @@
 <container title="简单布局-单选">
   <checklist
-    defaultValue="{{1}}"
-    options="{{options_1}}"
-    data-options="{{options_1}}"
+    defaultValue="{{ defaultValue }}"
+    options="{{ options_1 }}"
+    data-options="{{ options_1 }}"
     onChange="onChange" />
 </container>
 
 <container title="复杂布局-多选">
   <checklist
-    defaultValue="{{[1,2]}}"
-    options="{{options_2}}"
+    defaultValue="{{ [1, 2] }}"
+    options="{{ options_2 }}"
     multiple
     onChange="onChange" />
 </container>
+
 <container title="受控模式">
   <checklist
-    value="{{value}}"
-    options="{{options_2}}"
+    value="{{ value }}"
+    options="{{ options_2 }}"
     multiple
     onChange="onChangeControlled" />
 </container>
+
 <container title="禁用状态">
   <checklist
-    defaultValue="{{[2]}}"
-    options="{{options_3}}"
+    defaultValue="{{ [2] }}"
+    options="{{ options_3 }}"
     multiple
     onChange="onChange" />
 </container>
 
 <container title="只读状态">
   <checklist
-    defaultValue="{{[2]}}"
-    options="{{options_4}}"
+    defaultValue="{{ [2] }}"
+    options="{{ options_4 }}"
     multiple
     onChange="onChange" />
 </container>
+
 <container title="自定义勾选图标&&组件内容">
   <checklist
-    defaultValue="{{[2]}}"
-    options="{{options_3}}"
+    defaultValue="{{ [2] }}"
+    options="{{ options_3 }}"
     multiple
     onChange="onChange">
     <view slot="icon">
       <icon
         style="color: red"
         type="LikeOutline"
-        class="demo-checklist-checked-icon" />
+        className="demo-checklist-checked-icon" />
     </view>
     <view
       slot="content"
       slot-scope="props">
-      title: {{props.item.title}}
+      title: {{ item.title }}
     </view>
   </checklist>
 </container>

compiled/alipay/demo/pages/Checklist/index.js

@@ -1,78 +1,75 @@
 Page({
-  data: {
-    value: [1, 2],
-    options_1: [
-      {
-        value: 1,
-        title: '可勾选列表项1',
-      },
-      {
-        value: 2,
-        title: '可勾选列表项2',
-      },
-      {
-        value: 3,
-        title: '可勾选列表项3',
-      },
-    ],
-    options_2: [
-      {
-        value: 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',
-      },
-      {
-        value: 3,
-        image:
-          'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*5m0ZQYhxhjEAAAAAAAAAAAAAARQnAQ',
-        description: '这里是描述信息',
-        title: '可勾选列表项3',
-      },
-    ],
-    options_3: [
-      {
-        value: 1,
-        title: '可勾选列表项1',
-      },
-      {
-        value: 2,
-        title: '禁用列表项2',
-        disabled: true,
-      },
-      {
-        value: 3,
-        title: '可勾选列表项3',
-      },
-    ],
-    options_4: [
-      {
-        value: 1,
-        title: '可勾选列表项1',
-      },
-      {
-        value: 2,
-        title: '只读列表项2',
-        readonly: true,
-      },
-      {
-        value: 3,
-        title: '可勾选列表项3',
-      },
-    ],
-  },
-  onChange(v, items, e) {
-    console.log('当前选中的值为：', v, items, e);
-  },
-  onChangeControlled(value) {
-    this.setData({ value });
-  },
+    data: {
+        value: [1, 2],
+        options_1: [
+            {
+                value: 1,
+                title: '可勾选列表项1',
+            },
+            {
+                value: 2,
+                title: '可勾选列表项2',
+            },
+            {
+                value: 3,
+                title: '可勾选列表项3',
+            },
+        ],
+        options_2: [
+            {
+                value: 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',
+            },
+            {
+                value: 3,
+                image: 'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*5m0ZQYhxhjEAAAAAAAAAAAAAARQnAQ',
+                description: '这里是描述信息',
+                title: '可勾选列表项3',
+            },
+        ],
+        options_3: [
+            {
+                value: 1,
+                title: '可勾选列表项1',
+            },
+            {
+                value: 2,
+                title: '禁用列表项2',
+                disabled: true,
+            },
+            {
+                value: 3,
+                title: '可勾选列表项3',
+            },
+        ],
+        options_4: [
+            {
+                value: 1,
+                title: '可勾选列表项1',
+            },
+            {
+                value: 2,
+                title: '只读列表项2',
+                readonly: true,
+            },
+            {
+                value: 3,
+                title: '可勾选列表项3',
+            },
+        ],
+    },
+    onChange(v, items, e) {
+        console.log('当前选中的值为：', v, items, e);
+    },
+    onChangeControlled(value) {
+        this.setData({ value });
+    },
 });

compiled/alipay/demo/pages/FormCustom/checklist/index.js

@@ -18,5 +18,5 @@ Component({
         onChange(value, e) {
             this.emit('onChange', value);
         },
-    }
+    },
 });

compiled/alipay/src/Checklist/ChecklistItem/index.ts

@@ -1,10 +1,13 @@
-import { ChecklistItemDefaultProps } from './props';
+import { useEvent } from 'functional-mini/component';
+import { mountComponent } from '../../_util/component';
+import { useComponentEvent } from '../../_util/hooks/useComponentEvent';
+import { ChecklistItemDefaultProps, IChecklistItemProps } from './props';
 
-Component({
-  props: ChecklistItemDefaultProps,
-  methods: {
-    onChecklistItemClick() {
-      this.props.onChange(this.props.item);
-    },
-  },
-});
+const CheckListItem = (props: IChecklistItemProps) => {
+  const { triggerEvent } = useComponentEvent(props);
+  useEvent('onChecklistItemClick', () => {
+    triggerEvent('change', props.item);
+  });
+};
+
+mountComponent(CheckListItem, ChecklistItemDefaultProps);

compiled/alipay/src/Checklist/ChecklistItem/props.ts

@@ -14,4 +14,7 @@ export interface IChecklistItemProps extends IBaseProps {
   onChange: (item: ChecklistItem) => void;
 }
 
-export const ChecklistItemDefaultProps: Partial<IChecklistItemProps> = {};
+export const ChecklistItemDefaultProps: Partial<IChecklistItemProps> = {
+  item: null,
+  checked: false,
+};

compiled/alipay/src/Checklist/index.ts

@@ -1,54 +1,61 @@
-import { ChecklistDefaultProps } from './props';
-import mixinValue from '../mixins/value';
-import fmtEvent from '../_util/fmtEvent';
-import '../_util/assert-component2';
+import { mountComponent } from '../_util/component';
+import { useComponentEvent } from '../_util/hooks/useComponentEvent';
+import { useHandleCustomEvent } from '../_util/hooks/useHandleCustomEvent';
+import { useMixState } from '../_util/hooks/useMixState';
+import {
+  ChecklistFunctionalProps,
+  ChecklistItem,
+  IChecklistProps,
+} from './props';
 
-Component({
-  props: ChecklistDefaultProps,
-  mixins: [
-    mixinValue({
-      transformValue(val) {
-        const value = val || [];
-        return {
-          needUpdate: true,
-          value,
-        };
-      },
-    }),
-  ],
-  methods: {
-    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)
-          );
-        }
+const Checkbox = (props: IChecklistProps) => {
+  const [state, { isControlled, update }] = useMixState<
+    Array<string | number> | string | number
+  >(props.defaultValue, {
+    value: props.value,
+    postState(val) {
+      const value = val || [];
+      return {
+        valid: true,
+        value,
+      };
+    },
+  });
+
+  const { triggerEventValues } = useComponentEvent(props);
+  useHandleCustomEvent<ChecklistItem>('onChange', (item) => {
+    const { multiple, options } = props;
+    const value = item.value;
+    if (multiple) {
+      let currentValue = state as Array<string | number>;
+      if (currentValue.indexOf(value) > -1) {
+        currentValue = currentValue.filter((v) => v !== value);
       } else {
-        if (!this.isControlled()) {
-          this.update(value);
-        }
-        if (onChange) {
-          onChange(
-            value,
-            options.find((v) => v.value === value) as any,
-            fmtEvent(this.props)
-          );
-        }
+        currentValue = [...currentValue, value];
+      }
+      if (!isControlled) {
+        update(currentValue);
       }
+      triggerEventValues('change', [
+        currentValue,
+        options.filter((v) => currentValue.indexOf(v.value) > -1),
+      ]);
+    } else {
+      if (!isControlled) {
+        update(value);
+      }
+      triggerEventValues('change', [
+        value,
+        options.find((v) => v.value === value),
+      ]);
+    }
+  });
+
+  return {
+    mixin: {
+      value: state,
     },
-  },
-});
+  };
+};
+
+mountComponent(Checkbox, ChecklistFunctionalProps);

compiled/alipay/src/Checklist/props.ts

@@ -64,3 +64,10 @@ export const ChecklistDefaultProps: Partial<IChecklistProps> = {
   multiple: false,
   options: [],
 };
+
+export const ChecklistFunctionalProps: Partial<IChecklistProps> = {
+  value: null,
+  defaultValue: null,
+  multiple: false,
+  options: [],
+};

compiled/wechat/app.json

@@ -1,5 +1,6 @@
 {
   "pages": [
+    "demo/pages/Checklist/index",
     "demo/pages/Modal/index",
     "demo/pages/GuideTour/index",
     "demo/pages/Skeleton/index",