feat: listitem组件写法优化 (#1124)

ant-design · Mar 27, 2024 · 21304ea · 21304ea
1 parent d5cbd61
commit 21304ea
Show file tree

Hide file tree

Showing 13 changed files with 161 additions and 116 deletions.
diff --git a/compiled/alipay/demo/pages/List/index.axml b/compiled/alipay/demo/pages/List/index.axml
@@ -19,7 +19,7 @@
     <ant-list-item
       image="SetOutline"
       arrow="right"
-      onTap="handleTap"
+      catchTap="catchTap"
       data-info="设置">
       设置
     </ant-list-item>

diff --git a/compiled/alipay/demo/pages/List/index.js b/compiled/alipay/demo/pages/List/index.js
@@ -9,6 +9,13 @@ Page({
         });
         console.log(e);
     },
+    catchTap(e) {
+        my.alert({
+            title: 'catchTap',
+            content: e.currentTarget.dataset.info,
+        });
+        console.log(e);
+    },
     handleSetRadius(checked) {
         this.setData({
             radius: checked,

diff --git a/compiled/alipay/src/List/ListItem/index.ts b/compiled/alipay/src/List/ListItem/index.ts
@@ -1,35 +1,33 @@
-import { useEvent } from 'functional-mini/component';
-import { ISwitchProps } from '../../Switch/props';
-import { mountComponent } from '../../_util/component';
-import { useComponentEvent } from '../../_util/hooks/useComponentEvent';
+import {
+  Component,
+  triggerEventOnly,
+  triggerCatchEvent,
+} from '../../_util/simply';
 import { IListItemProps } from './props';
 
-const ListItem = (props: ISwitchProps) => {
-  const { alipayForwardCatchEvent, alipayForwardEvent } =
-    useComponentEvent(props);
-
-  useEvent('onTap', (e) => {
-    if (props.disabled) {
-      return;
-    }
-    alipayForwardEvent('tap', e);
-  });
-  useEvent('catchTap', (e) => {
-    if (props.disabled) {
-      return;
-    }
-    alipayForwardCatchEvent('tap', e);
-  });
-  return {};
-};
-
-mountComponent<IListItemProps>(ListItem, {
-  image: '',
-  title: '',
-  brief: '',
-  arrow: null,
-  extra: '',
-  extraBrief: '',
-  disabled: false,
-  showDivider: true,
-});
+Component<IListItemProps>(
+  {
+    image: '',
+    title: '',
+    brief: '',
+    arrow: false,
+    extra: '',
+    extraBrief: '',
+    disabled: false,
+    showDivider: true,
+  },
+  {
+    onTap(e) {
+      if (this.props.disabled) {
+        return;
+      }
+      triggerEventOnly(this, 'tap', e);
+    },
+    catchTap(e) {
+      if (this.props.disabled) {
+        return;
+      }
+      triggerCatchEvent(this, 'catchTap', e);
+    },
+  }
+);
diff --git a/compiled/alipay/src/_util/simply.ts b/compiled/alipay/src/_util/simply.ts
@@ -1,4 +1,4 @@
-import fmtEvent from "./fmtEvent";
+import fmtEvent from './fmtEvent';
 
 function removeNullProps(props) {
   const newProps = {};
@@ -27,7 +27,7 @@ function buildProperties(props) {
     }
     newProperties[key] = {
       type,
-      value: props[key]
+      value: props[key],
     };
   }
   return newProperties;
@@ -39,15 +39,16 @@ function mergeDefaultProps(defaultProps: Record<string, any> = {}) {
   };
 }
 
-type ComponentInstance<Props, Methods> = {
+type ComponentInstance<Props, Methods> = {};
 
-};
-
-function ComponentImpl<Props, Methods = unknown>(defaultProps: Props, methods?: (Methods & ThisType<ComponentInstance<Props, Methods>>)) {
+function ComponentImpl<Props, Methods = unknown>(
+  defaultProps: Props,
+  methods?: Methods & ThisType<ComponentInstance<Props, Methods>>
+) {
 
   Component({
     props: removeNullProps(mergeDefaultProps(defaultProps)),
-    methods
+    methods,
   });
 }
 
@@ -57,10 +58,15 @@ export interface IPlatformEvent {
   };
   target: {
     dataset: Record<string, unknown>;
-  }
+  };
 }
 
-export function triggerEvent(instance: any, eventName: string, value: unknown, e?: any) {
+export function triggerEvent(
+  instance: any,
+  eventName: string,
+  value: unknown,
+  e?: any
+) {
   // 首字母大写，然后加上 on
 
   const alipayCallbackName =
@@ -84,7 +90,12 @@ export function triggerEventOnly(instance: any, eventName: string, e?: any) {
 
 }
 
-export function triggerEventValues(instance: any, eventName: string, values: any[], e?: any) {
+export function triggerEventValues(
+  instance: any,
+  eventName: string,
+  values: any[],
+  e?: any
+) {
   // 首字母大写，然后加上 on
 
   const alipayCallbackName =
@@ -96,6 +107,12 @@ export function triggerEventValues(instance: any, eventName: string, values: any
 
 }
 
-export {
-  ComponentImpl as Component
-}
+export function triggerCatchEvent(instance: any, eventName: string, e?: any) {
+  const props = instance.props;
+  if (props[eventName]) {
+    props[eventName](fmtEvent(props, e));
+  }
+
+}
+
+export { ComponentImpl as Component };
diff --git a/compiled/wechat/demo/pages/List/index.js b/compiled/wechat/demo/pages/List/index.js
@@ -5,6 +5,9 @@ Page({
     handleTap(e) {
         console.log(e);
     },
+    catchTap(e) {
+        console.log(e);
+    },
     handleSetRadius(checked) {
         this.setData({
             radius: checked,

diff --git a/compiled/wechat/demo/pages/List/index.wxml b/compiled/wechat/demo/pages/List/index.wxml
@@ -19,7 +19,7 @@
     <ant-list-item
       image="SetOutline"
       arrow="right"
-      bind:tap="handleTap"
+      catch:tap="catchTap"
       data-info="设置">
       设置
     </ant-list-item>

diff --git a/compiled/wechat/src/List/ListItem/index.js b/compiled/wechat/src/List/ListItem/index.js
@@ -1,16 +1,11 @@
-import { mountComponent } from '../../_util/component';
-import { useComponentEvent } from '../../_util/hooks/useComponentEvent';
-var ListItem = function (props) {
-    var _a = useComponentEvent(props), alipayForwardCatchEvent = _a.alipayForwardCatchEvent, alipayForwardEvent = _a.alipayForwardEvent;
-    return {};
-};
-mountComponent(ListItem, {
+import { Component, } from '../../_util/simply';
+Component({
     image: '',
     title: '',
     brief: '',
-    arrow: null,
+    arrow: false,
     extra: '',
     extraBrief: '',
     disabled: false,
     showDivider: true,
-});
+}, {});
diff --git a/compiled/wechat/src/_util/simply.js b/compiled/wechat/src/_util/simply.js
@@ -35,7 +35,7 @@ function buildProperties(props) {
         }
         newProperties[key] = {
             type: type,
-            value: props[key]
+            value: props[key],
         };
     }
     return newProperties;
@@ -67,4 +67,7 @@ export function triggerEventValues(instance, eventName, values, e) {
     // 首字母大写，然后加上 on
     instance.triggerEvent(eventName.toLocaleLowerCase(), values);
 }
+export function triggerCatchEvent(instance, eventName, e) {
+    instance.triggerEvent(eventName.toLocaleLowerCase());
+}
 export { ComponentImpl as Component };
diff --git a/demo/pages/List/index.axml.tsx b/demo/pages/List/index.axml.tsx
@@ -23,7 +23,7 @@ export default (_, { item, radius }: InternalData) => (
       <AntListItem
         image="SetOutline"
         arrow="right"
-        onTap="handleTap"
+        catchTap="catchTap"
         data-info="设置"
       >
         设置

diff --git a/demo/pages/List/index.ts b/demo/pages/List/index.ts
@@ -12,6 +12,16 @@ Page({
 
     console.log(e);
   },
+  catchTap(e) {
+    /// #if ALIPAY
+    my.alert({
+      title: 'catchTap',
+      content: e.currentTarget.dataset.info,
+    });
+    /// #endif
+
+    console.log(e);
+  },
   handleSetRadius(checked) {
     this.setData({
       radius: checked,

diff --git a/src/List/ListItem/index.ts b/src/List/ListItem/index.ts
@@ -1,37 +1,35 @@
-import { useEvent } from 'functional-mini/component';
-import { ISwitchProps } from '../../Switch/props';
-import { mountComponent } from '../../_util/component';
-import { useComponentEvent } from '../../_util/hooks/useComponentEvent';
+import {
+  Component,
+  triggerEventOnly,
+  triggerCatchEvent,
+} from '../../_util/simply';
 import { IListItemProps } from './props';
 
-const ListItem = (props: ISwitchProps) => {
-  const { alipayForwardCatchEvent, alipayForwardEvent } =
-    useComponentEvent(props);
-
-  /// #if ALIPAY
-  useEvent('onTap', (e) => {
-    if (props.disabled) {
-      return;
-    }
-    alipayForwardEvent('tap', e);
-  });
-  useEvent('catchTap', (e) => {
-    if (props.disabled) {
-      return;
-    }
-    alipayForwardCatchEvent('tap', e);
-  });
-  /// #endif
-  return {};
-};
-
-mountComponent<IListItemProps>(ListItem, {
-  image: '',
-  title: '',
-  brief: '',
-  arrow: null,
-  extra: '',
-  extraBrief: '',
-  disabled: false,
-  showDivider: true,
-});
+Component<IListItemProps>(
+  {
+    image: '',
+    title: '',
+    brief: '',
+    arrow: false,
+    extra: '',
+    extraBrief: '',
+    disabled: false,
+    showDivider: true,
+  },
+  {
+    /// #if ALIPAY
+    onTap(e) {
+      if (this.props.disabled) {
+        return;
+      }
+      triggerEventOnly(this, 'tap', e);
+    },
+    catchTap(e) {
+      if (this.props.disabled) {
+        return;
+      }
+      triggerCatchEvent(this, 'catchTap', e);
+    },
+    /// #endif
+  }
+);