Radio & Rate & Selector & Switch & TabBar & Checkbox & Checklist & Collapse & ImageUpload 组件去掉hook相关的实现

compiled/alipay/src/Checkbox/CheckboxGroup/index.ts

@@ -1,43 +1,40 @@
-import { useEvent } from 'functional-mini/component';
-import { mountComponent } from '../../_util/component';
-import { useComponentEvent } from '../../_util/hooks/useComponentEvent';
-import { useMixState } from '../../_util/hooks/useMixState';
-import { CheckboxGroupFunctionalProps, ICheckboxGroupProps } from './props';
+import { Component, triggerEvent, getValueFromProps } from '../../_util/simply';
+import { CheckboxGroupDefaultProps } from './props';
+import mixinValue from '../../mixins/value';
 
-const CheckboxGroup = (props: ICheckboxGroupProps) => {
-  const [value, { isControlled, update }] = useMixState(props.defaultValue, {
-    value: props.value,
-    postState(value) {
-      return {
-        valid: true,
-        value: value || [],
-      };
+Component(
+  CheckboxGroupDefaultProps,
+  {
+    onChange(args, e) {
+      if (getValueFromProps(this, 'disabled')) {
+        return;
+      }
+      let event;
+      event = e;
+      let currentValue = this.getValue();
+      const { index } = event.currentTarget.dataset;
+      const selectValue = getValueFromProps(this, 'options')[index].value;
+      if (currentValue.indexOf(selectValue) > -1) {
+        currentValue = currentValue.filter((v) => v !== selectValue);
+      } else {
+        currentValue = [...currentValue, selectValue];
+      }
+      if (!this.isControlled()) {
+        this.update(currentValue);
+      }
+      triggerEvent(this, 'change', currentValue, e);
     },
-  });
-  const { triggerEvent } = useComponentEvent(props);
-  useEvent('onChange', (args, e) => {
-    if (props.disabled) {
-      return;
-    }
-    let event;
-    event = e;
-
-    let currentValue = value;
-    const { index } = event.currentTarget.dataset;
-    const selectValue = props.options[index].value;
-    if (currentValue.indexOf(selectValue) > -1) {
-      currentValue = currentValue.filter((v) => v !== selectValue);
-    } else {
-      currentValue = [...currentValue, selectValue];
-    }
-    if (!isControlled) {
-      update(currentValue);
-    }
-    triggerEvent('change', currentValue, e);
-  });
-  return {
-    mixin: { value },
-  };
-};
-
-mountComponent(CheckboxGroup, CheckboxGroupFunctionalProps);
+  },
+  null,
+  [
+    mixinValue({
+      transformValue(val) {
+        const value = val || [];
+        return {
+          needUpdate: true,
+          value,
+        };
+      },
+    }),
+  ]
+);

compiled/alipay/src/Checkbox/CheckboxGroup/props.ts

@@ -15,12 +15,6 @@ export interface ICheckboxGroupProps extends IBaseProps {
 }
 
 export const CheckboxGroupDefaultProps: Partial<ICheckboxGroupProps> = {
-  options: [],
-  position: 'vertical',
-  defaultValue: [],
-};
-
-export const CheckboxGroupFunctionalProps: Partial<ICheckboxGroupProps> = {
   value: null,
   defaultValue: [],
   disabled: false,

compiled/alipay/src/Checkbox/index.ts

@@ -1,34 +1,23 @@
-import { useEvent } from 'functional-mini/component';
-import '../_util/assert-component2';
-import { mountComponent } from '../_util/component';
-import { useComponentEvent } from '../_util/hooks/useComponentEvent';
-import { useMixState } from '../_util/hooks/useMixState';
-import { ICheckboxProps } from './props';
+import { CheckboxDefaultProps } from './props';
+import { Component, triggerEvent } from '../_util/simply';
+import mixinValue from '../mixins/value';
 
-const Checkbox = (props: ICheckboxProps) => {
-  const [value, { isControlled, update }] = useMixState(props.defaultChecked, {
-    value: props.checked,
-  });
-  const { triggerEvent } = useComponentEvent(props);
-  useEvent('onChange', (e) => {
-    const newValue = !value;
-    if (!isControlled) {
-      update(newValue);
-    }
-    triggerEvent('change', newValue, e);
-  });
-
-  return {
-    mixin: {
-      value,
+Component(
+  CheckboxDefaultProps,
+  {
+    onChange(e) {
+      const value = !this.getValue();
+      if (!this.isControlled()) {
+        this.update(value);
+      }
+      triggerEvent(this, 'change', value, e);
     },
-  };
-};
-
-mountComponent(Checkbox, {
-  value: null,
-  checked: null,
-  defaultChecked: null,
-  disabled: false,
-  color: '',
-});
+  },
+  null,
+  [
+    mixinValue({
+      valueKey: 'checked',
+      defaultValueKey: 'defaultChecked',
+    }),
+  ]
+);

compiled/alipay/src/Checkbox/props.ts

@@ -12,4 +12,10 @@ export interface ICheckboxProps extends IBaseProps {
   onChange?: (checked: boolean, e: any) => void;
 }
 
-export const CheckboxDefaultProps: Partial<ICheckboxProps> = {};
+export const CheckboxDefaultProps: Partial<ICheckboxProps> = {
+  value: null,
+  checked: null,
+  defaultChecked: null,
+  disabled: false,
+  color: '',
+};

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

@@ -1,9 +1,8 @@
-import { Component, triggerEvent } from '../../_util/simply';
+import { Component, triggerEvent, getValueFromProps } from '../../_util/simply';
 import { ChecklistItemDefaultProps } from './props';
 
 Component(ChecklistItemDefaultProps, {
   onChecklistItemClick() {
-    triggerEvent(this, 'change', this.props.item);
-
-  }
-})
+    triggerEvent(this, 'change', getValueFromProps(this, 'item'));
+  },
+});

compiled/alipay/src/Checklist/index.ts

@@ -1,61 +1,56 @@
-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,
+  triggerEventValues,
+  getValueFromProps,
+} from '../_util/simply';
+import { ChecklistDefaultProps } from './props';
+import mixinValue from '../mixins/value';
 
-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 {
-        currentValue = [...currentValue, value];
-      }
-      if (!isControlled) {
-        update(currentValue);
-      }
-      triggerEventValues('change', [
-        currentValue,
-        options.filter((v) => currentValue.indexOf(v.value) > -1),
+Component(
+  ChecklistDefaultProps,
+  {
+    onChange(item) {
+      const [multiple, options] = getValueFromProps(this, [
+        'multiple',
+        'options',
       ]);
-    } else {
-      if (!isControlled) {
-        update(value);
+      let value;
+      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);
+        }
+        triggerEventValues(this, 'change', [
+          currentValue,
+          options.filter((v) => currentValue.indexOf(v.value) > -1),
+        ]);
+      } else {
+        if (!this.isControlled()) {
+          this.update(value);
+        }
+        triggerEventValues(this, 'change', [
+          value,
+          options.find((v) => v.value === value),
+        ]);
       }
-      triggerEventValues('change', [
-        value,
-        options.find((v) => v.value === value),
-      ]);
-    }
-  });
-
-  return {
-    mixin: {
-      value: state,
     },
-  };
-};
-
-mountComponent(Checkbox, ChecklistFunctionalProps);
+  },
+  null,
+  [
+    mixinValue({
+      transformValue(val) {
+        const value = val || [];
+        return {
+          needUpdate: true,
+          value,
+        };
+      },
+    }),
+  ]
+);

compiled/alipay/src/Checklist/props.ts

@@ -61,13 +61,8 @@ export interface IChecklistProps extends IBaseProps {
 }
 
 export const ChecklistDefaultProps: Partial<IChecklistProps> = {
-  multiple: false,
-  options: [],
-};
-
-export const ChecklistFunctionalProps: Partial<IChecklistProps> = {
   value: null,
   defaultValue: null,
-  multiple: false,
   options: [],
+  multiple: false,
 };