feat(dropdown-menu): support custom icon for arrow (#2240)

Author: LeeJim

src/dropdown-menu/README.en-US.md

@@ -5,6 +5,7 @@
 
 name | type | default | description | required
 -- | -- | -- | -- | --
+arrow-icon | String / Object | 'caret-down-small' | \- | N
 close-on-click-overlay | Boolean | true | \- | N
 duration | String / Number | 200 | \- | N
 external-classes | Array | - | `['t-class', 't-class-item', 't-class-label', 't-class-icon']` | N

src/dropdown-menu/README.md

@@ -46,6 +46,7 @@ isComponent: true
 
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
+arrow-icon | String / Object | 'caret-down-small' | 自定义箭头图标 | N
 close-on-click-overlay | Boolean | true | 是否在点击遮罩层后关闭菜单 | N
 duration | String / Number | 200 | 动画时长 | N
 show-overlay | Boolean | true | 是否显示遮罩层 | N

src/dropdown-menu/__test__/__snapshots__/index.test.js.snap

@@ -25,7 +25,9 @@ exports[`dropdown-menu :base 1`] = `
           菜单
         </wx-view>
         <t-icon
+          class=""
           tClass="t-dropdown-menu__icon t-dropdown-menu__icon--active t-class-icon"
+          bind:click=""
         >
           <wx-view
             ariaHidden="{{true}}"
@@ -56,7 +58,9 @@ exports[`dropdown-menu :base 1`] = `
           单列多选
         </wx-view>
         <t-icon
+          class=""
           tClass="t-dropdown-menu__icon t-dropdown-menu__icon-- t-class-icon"
+          bind:click=""
         >
           <wx-view
             ariaHidden="{{true}}"

src/dropdown-menu/dropdown-menu.ts

@@ -2,6 +2,7 @@ import { RelationsOptions, SuperComponent, wxComponent } from '../common/src/ind
 import config from '../common/config';
 import props from './props';
 import type { TdDropdownMenuProps } from './type';
+import { calcIcon } from '../common/utils';
 
 const { prefix } = config;
 const name = `${prefix}-dropdown-menu`;
@@ -22,6 +23,7 @@ export default class DropdownMenu extends SuperComponent {
     menus: null,
     activeIdx: -1,
     bottom: 0,
+    _arrowIcon: { name: props.arrowIcon.value },
   };
 
   relations: RelationsOptions = {
@@ -36,6 +38,14 @@ export default class DropdownMenu extends SuperComponent {
     },
   };
 
+  observers = {
+    arrowIcon(v) {
+      this.setData({
+        _arrowIcon: calcIcon(v),
+      });
+    },
+  };
+
   methods = {
     toggle(index: number) {
       const { activeIdx, duration } = this.data;

src/dropdown-menu/dropdown-menu.wxml

@@ -1,3 +1,4 @@
+<import src="../common/template/icon.wxml" />
 <wxs src="../common/utils.wxs" module="_" />
 
 <view style="{{_._style([style, customStyle])}}" class="{{ classPrefix }} class {{prefix}}-class" id="t-bar">
@@ -13,10 +14,9 @@
     aria-haspopup="menu"
   >
     <view class="{{classPrefix}}__title {{prefix}}-class-label">{{item.label}}</view>
-    <t-icon
-      name="caret-down-small"
-      t-class="{{classPrefix}}__icon {{classPrefix}}__icon--{{activeIdx == index ? 'active' : ''}} {{prefix}}-class-icon"
-      aria-hidden="{{true}}"
+    <template
+      is="icon"
+      data="{{..._arrowIcon, ariaHidden: true, tClass: classPrefix + '__icon ' + classPrefix + '__icon--' + (activeIdx == index ? 'active ' : ' ') + prefix + '-class-icon'}}"
     />
   </view>
   <slot />

src/dropdown-menu/props.ts

@@ -6,6 +6,11 @@
 
 import { TdDropdownMenuProps } from './type';
 const props: TdDropdownMenuProps = {
+  /** 自定义箭头图标 */
+  arrowIcon: {
+    type: null,
+    value: 'caret-down-small',
+  },
   /** 是否在点击遮罩层后关闭菜单 */
   closeOnClickOverlay: {
     type: Boolean,

src/dropdown-menu/type.ts

@@ -5,6 +5,14 @@
  * */
 
 export interface TdDropdownMenuProps {
+  /**
+   * 自定义箭头图标
+   * @default 'caret-down-small'
+   */
+  arrowIcon?: {
+    type: null;
+    value?: string | object;
+  };
   /**
    * 是否在点击遮罩层后关闭菜单
    * @default true
@@ -13,14 +21,6 @@ export interface TdDropdownMenuProps {
     type: BooleanConstructor;
     value?: boolean;
   };
-  /**
-   * 自定义组件样式
-   * @default ''
-   */
-  style?: {
-    type: StringConstructor;
-    value?: string;
-  };
   /**
    * 动画时长
    * @default 200