feat: check list 适配 functional

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: [],
+};

demo/pages/FormCustom/checklist/index.ts

@@ -1,6 +1,5 @@
 import { createForm } from '../../../../src/Form/form';
 
-
 Component({
   mixins: [createForm()],
   data: {
@@ -20,5 +19,5 @@ Component({
     onChange(value, e) {
       this.emit('onChange', value);
     },
-  }
+  },
 });

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);

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,
+};

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);

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: [],
+};

tests/alipay/Checklist/__tests__/index.test.ts

@@ -1,4 +1,4 @@
-import { getInstance } from 'tests/utils';
+import { getInstance, sleep } from 'tests/utils';
 import fmtEvent from 'compiled-alipay/_util/fmtEvent';
 import { describe, it, expect, vi } from 'vitest';
 
@@ -11,7 +11,7 @@ describe('checklist onChange', () => {
     instance.callMethod('onChecklistItemClick');
     expect(onChange).toBeCalled();
   });
-  it('check with multiple false', () => {
+  it('check with multiple false', async () => {
     const my = {
       canIUse() {
         return true;
@@ -29,9 +29,10 @@ describe('checklist onChange', () => {
     );
     instance.callMethod('onChange', { value: 1 });
     expect(onChange).toBeCalledWith(1, { value: 1 }, fmtEvent({}));
+    await sleep(20);
     expect(instance.getData().mixin.value).toBe(1);
   });
-  it('check with multiple true', () => {
+  it('check with multiple true', async () => {
     const my = {
       canIUse() {
         return true;
@@ -49,10 +50,11 @@ describe('checklist onChange', () => {
       my
     );
     instance.callMethod('onChange', { value: 1 });
+    await sleep(20);
     expect(onChange).toBeCalledWith([1], [{ value: 1 }], fmtEvent({}));
     expect(instance.getData().mixin.value).toEqual([1]);
   });
-  it('uncheck with multiple true', () => {
+  it('uncheck with multiple true', async () => {
     const my = {
       canIUse() {
         return true;
@@ -70,7 +72,9 @@ describe('checklist onChange', () => {
       my
     );
     instance.callMethod('onChange', { value: 1 });
+    await sleep(20);
     instance.callMethod('onChange', { value: 1 });
+    await sleep(20);
     expect(onChange).toBeCalledWith([], [], fmtEvent({}));
     expect(instance.getData().mixin.value).toEqual([]);
   });