feat(DropdownMenuItem): support placement props (#3327)

Tencent · Dec 9, 2024 · cfd73e4 · cfd73e4
1 parent ff2684f
commit cfd73e4
Show file tree

Hide file tree

Showing 11 changed files with 56 additions and 23 deletions.
diff --git a/src/dropdown-item/dropdown-item.ts b/src/dropdown-item/dropdown-item.ts
@@ -24,9 +24,7 @@ export default class DropdownMenuItem extends SuperComponent {
     `${prefix}-class-footer`,
   ];
 
-  properties = {
-    ...props,
-  };
+  properties = props;
 
   data = {
     prefix,

diff --git a/src/dropdown-item/dropdown-item.wxml b/src/dropdown-item/dropdown-item.wxml
@@ -38,11 +38,11 @@
           t-class="{{classPrefix}}__radio-group"
           style="grid-template-columns: repeat({{optionsColumns}}, 1fr)"
           value="{{value}}"
-          placement="right"
           bind:change="handleRadioChange"
         >
           <view wx:for="{{options}}" wx:key="index" id="id_{{item[valueAlias]}}">
             <t-radio
+              placement="{{placement}}"
               tabindex="0"
               icon="line"
               class="{{classPrefix}}__radio-item {{prefix}}-class-column-item"

diff --git a/src/dropdown-item/props.ts b/src/dropdown-item/props.ts
@@ -39,6 +39,11 @@ const props: TdDropdownItemProps = {
     type: null,
     value: 1,
   },
+  /** 复选框和内容相对位置，仅单选菜单栏有效 */
+  placement: {
+    type: String,
+    value: 'left',
+  },
   /** 选中值 */
   value: {
     type: null,

diff --git a/src/dropdown-item/type.ts b/src/dropdown-item/type.ts
@@ -68,6 +68,14 @@ export interface TdDropdownItemProps {
     type: null;
     value?: string | number;
   };
+  /**
+   * 复选框和内容相对位置，仅单选菜单栏有效
+   * @default left
+   */
+  placement?: {
+    type: StringConstructor;
+    value?: 'left' | 'right';
+  };
   /**
    * 选中值
    */

diff --git a/src/dropdown-menu/README.en-US.md b/src/dropdown-menu/README.en-US.md
@@ -45,6 +45,7 @@ multiple | Boolean | false | \- | N
 options | Array | [] | Typescript：`Array<DropdownOption>` `interface DropdownOption { label: string; disabled: boolean; value: DropdownValue; }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/dropdown-item/type.ts) | N
 options-columns | String / Number | 1 | \- | N
 options-layout | String | columns | `deprecated` | N
+placement | String | left | options: left/right | N
 value | String / Number / Array | undefined | Typescript：`DropdownValue ` `type DropdownValue = string \| number \| Array<DropdownValue>;`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/dropdown-item/type.ts) | N
 default-value | String / Number / Array | undefined | uncontrolled property。Typescript：`DropdownValue ` `type DropdownValue = string \| number \| Array<DropdownValue>;`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/dropdown-item/type.ts) | N
 
@@ -73,18 +74,18 @@ t-class-footer | \-
 The component provides the following CSS variables, which can be used to customize styles.
 Name | Default Value | Description 
 -- | -- | --
---td-dropdown-body-max-height | 560rpx | - 
---td-dropdown-menu-bg-color | @bg-color-container | - 
---td-tree-bg-color | @bg-color-container | - 
---td-tree-item-active-color | @brand-color | - 
---td-tree-item-font-size | 32rpx | - 
---td-tree-item-height | 96rpx | - 
---td-tree-root-bg-color | @bg-color-secondarycontainer | - 
 --td-dropdown-menu-active-colorm | @brand-color | - 
 --td-dropdown-menu-bg-colorm | @bg-color-container | - 
 --td-dropdown-menu-border-width | 1px | - 
 --td-dropdown-menu-colorm | @text-color-primary | - 
 --td-dropdown-menu-disabled-colorm | @text-color-disabled | - 
 --td-dropdown-menu-font-sizem | 28rpx | - 
 --td-dropdown-menu-height | 96rpx | - 
---td-dropdown-menu-icon-sizem | 48rpx | -
+--td-dropdown-menu-icon-sizem | 40rpx | - 
+--td-dropdown-body-max-height | 560rpx | - 
+--td-dropdown-menu-bg-color | @bg-color-container | - 
+--td-tree-bg-color | @bg-color-container | - 
+--td-tree-item-active-color | @brand-color | - 
+--td-tree-item-font-size | 32rpx | - 
+--td-tree-item-height | 96rpx | - 
+--td-tree-root-bg-color | @bg-color-secondarycontainer | - 
diff --git a/src/dropdown-menu/README.md b/src/dropdown-menu/README.md
@@ -92,6 +92,7 @@ multiple | Boolean | false | 是否多选 | N
 options | Array | [] | 选项数据。TS 类型：`Array<DropdownOption>` `interface DropdownOption { label: string; disabled: boolean; value: DropdownValue; }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/dropdown-item/type.ts) | N
 options-columns | String / Number | 1 | 选项分栏（1-3） | N
 options-layout | String | columns | 已废弃。选项排列；不再支持 tree 布局，可与 treeSelect 配合使用 | N
+placement | String | left | 复选框和内容相对位置，仅单选菜单栏有效。可选项：left/right | N
 value | String / Number / Array | undefined | 选中值。TS 类型：`DropdownValue ` `type DropdownValue = string \| number \| Array<DropdownValue>;`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/dropdown-item/type.ts) | N
 default-value | String / Number / Array | undefined | 选中值。非受控属性。TS 类型：`DropdownValue ` `type DropdownValue = string \| number \| Array<DropdownValue>;`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/dropdown-item/type.ts) | N
 
@@ -120,18 +121,18 @@ t-class-footer | 底部样式类
 组件提供了下列 CSS 变量，可用于自定义样式。
 名称 | 默认值 | 描述 
 -- | -- | --
---td-dropdown-body-max-height | 560rpx | - 
---td-dropdown-menu-bg-color | @bg-color-container | - 
---td-tree-bg-color | @bg-color-container | - 
---td-tree-item-active-color | @brand-color | - 
---td-tree-item-font-size | 32rpx | - 
---td-tree-item-height | 96rpx | - 
---td-tree-root-bg-color | @bg-color-secondarycontainer | - 
 --td-dropdown-menu-active-colorm | @brand-color | - 
 --td-dropdown-menu-bg-colorm | @bg-color-container | - 
 --td-dropdown-menu-border-width | 1px | - 
 --td-dropdown-menu-colorm | @text-color-primary | - 
 --td-dropdown-menu-disabled-colorm | @text-color-disabled | - 
 --td-dropdown-menu-font-sizem | 28rpx | - 
 --td-dropdown-menu-height | 96rpx | - 
---td-dropdown-menu-icon-sizem | 48rpx | -
+--td-dropdown-menu-icon-sizem | 40rpx | - 
+--td-dropdown-body-max-height | 560rpx | - 
+--td-dropdown-menu-bg-color | @bg-color-container | - 
+--td-tree-bg-color | @bg-color-container | - 
+--td-tree-item-active-color | @brand-color | - 
+--td-tree-item-font-size | 32rpx | - 
+--td-tree-item-height | 96rpx | - 
+--td-tree-root-bg-color | @bg-color-secondarycontainer | - 
diff --git a/src/dropdown-menu/__test__/__snapshots__/demo.test.js.snap b/src/dropdown-menu/__test__/__snapshots__/demo.test.js.snap
@@ -225,8 +225,14 @@ exports[`DropdownMenu DropdownMenu single demo works fine 1`] = `
             "label": "最火产品",
             "value": "hot",
           },
+          Object {
+            "disabled": true,
+            "label": "禁用选项",
+            "value": "disabled",
+          },
         ]
       }}"
+      placement="right"
       value="all"
       bind:change="onChange"
     />
@@ -244,6 +250,7 @@ exports[`DropdownMenu DropdownMenu single demo works fine 1`] = `
           },
         ]
       }}"
+      placement="right"
     />
   </t-dropdown-menu>
 </single>

diff --git a/src/dropdown-menu/_example/dropdown-menu.wxml b/src/dropdown-menu/_example/dropdown-menu.wxml
@@ -20,4 +20,6 @@
       <t-dropdown-item disabled label="禁用菜单" />
     </t-dropdown-menu>
   </t-demo>
+
+  <view style="height: 600rpx"></view>
 </view>
diff --git a/src/dropdown-menu/_example/single/index.js b/src/dropdown-menu/_example/single/index.js
@@ -15,6 +15,11 @@ Component({
           value: 'hot',
           label: '最火产品',
         },
+        {
+          value: 'disabled',
+          label: '禁用选项',
+          disabled: true,
+        },
       ],
     },
     sorter: {

diff --git a/src/dropdown-menu/_example/single/index.wxml b/src/dropdown-menu/_example/single/index.wxml
@@ -1,4 +1,4 @@
 <t-dropdown-menu>
-  <t-dropdown-item options="{{product.options}}" value="{{product.value}}" bindchange="onChange" />
-  <t-dropdown-item options="{{sorter.options}}" default-value="{{sorter.value}}" />
+  <t-dropdown-item options="{{product.options}}" placement="right" value="{{product.value}}" bindchange="onChange" />
+  <t-dropdown-item options="{{sorter.options}}" placement="right" default-value="{{sorter.value}}" />
 </t-dropdown-menu>
diff --git a/src/dropdown-menu/dropdown-menu.less b/src/dropdown-menu/dropdown-menu.less
@@ -6,7 +6,7 @@
 @dropdown-menu-active-color: var(--td-dropdown-menu-active-colorm, @brand-color);
 @dropdown-menu-disabled-color: var(--td-dropdown-menu-disabled-colorm, @text-color-disabled);
 @dropdown-menu-font-size: var(--td-dropdown-menu-font-sizem, 28rpx);
-@dropdown-menu-icon-size: var(--td-dropdown-menu-icon-sizem, 48rpx);
+@dropdown-menu-icon-size: var(--td-dropdown-menu-icon-sizem, 40rpx);
 @dropdown-menu-border-width: var(--td-dropdown-menu-border-width, 1px);
 
 @dropdownMenu: ~'@{prefix}-dropdown-menu';
@@ -43,11 +43,17 @@
 
   &__icon {
     font-size: @dropdown-menu-icon-size;
+    padding: 4rpx;
+    box-sizing: border-box;
     transition: transform 240ms ease;
 
     &--active {
       transform: rotate(180deg);
     }
+
+    &:not(:empty) {
+      margin-left: 8rpx;
+    }
   }
 
   &__title {