feat(Dropdown): add Component Dropdown #1106

JunIce · 2023-05-26T09:29:16Z

vercel · 2023-05-26T09:29:20Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
zarm	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 12, 2023 3:08am

github-actions · 2023-05-26T09:29:29Z

🎊 PR Preview has been successfully built and deployed to https://zarm-preview-pr-1106.surge.sh

codecov · 2023-05-26T09:35:34Z

Codecov Report

Merging #1106 (1ba949a) into master (2e6df07) will decrease coverage by 0.15%.
The diff coverage is 87.50%.

@@            Coverage Diff             @@
##           master    #1106      +/-   ##
==========================================
- Coverage   90.33%   90.19%   -0.15%     
==========================================
  Files         237      240       +3     
  Lines        5245     5373     +128     
  Branches     1194     1265      +71     
==========================================
+ Hits         4738     4846     +108     
- Misses        497      517      +20     
  Partials       10       10

Impacted Files	Coverage Δ
packages/zarm/src/use-scroll/index.ts	`100.00% <ø> (+7.69%)`	⬆️
packages/zarm/src/dropdown/DropdownItem.tsx	`85.71% <85.71%> (ø)`
packages/zarm/src/dropdown/Dropdown.tsx	`87.15% <87.15%> (ø)`
packages/zarm/src/dropdown/index.tsx	`100.00% <100.00%> (ø)`
packages/zarm/src/index.ts	`100.00% <100.00%> (ø)`

... and 7 files with indirect coverage changes

JeromeLin · 2023-05-26T09:43:12Z

@JunIce
1.展开的时候需要下拉动画，看看能不能用 Transition 组件传入自定义动画来实现
2.支持箭头自定义图标及翻转动画

…output

JeromeLin · 2023-05-29T02:37:12Z

还需要改进一下：

不同 Dropdown.Item 的 Popup 弹层内容需要共用，而不是每个 Dropdown.Item 都有一个Popup，这样在切换的时候不会重新执行下拉动画。
默认展示内置的箭头图标，且由 arrow 包裹（默认带动画），arrow 属性仅替换图标内容。
direction 属性似乎逻辑反了，“向上展开” 例子为何是 direction="bottom"

JunIce · 2023-05-31T07:29:07Z

还需要改进一下：

不同 Dropdown.Item 的 Popup 弹层内容需要共用，而不是每个 Dropdown.Item 都有一个Popup，这样在切换的时候不会重新执行下拉动画。

默认展示内置的箭头图标，且由 arrow 包裹（默认带动画），arrow 属性仅替换图标内容。

direction 属性似乎逻辑反了，“向上展开” 例子为何是 direction="bottom"

direction 重新赋值为up 和 down，这样语义比较清楚
Popup提升到Dropdown内部， Transition实现切换动画，你看看是否符合预期

JeromeLin · 2023-06-01T08:39:54Z

还需要改进一下：

不同 Dropdown.Item 的 Popup 弹层内容需要共用，而不是每个 Dropdown.Item 都有一个Popup，这样在切换的时候不会重新执行下拉动画。

默认展示内置的箭头图标，且由 arrow 包裹（默认带动画），arrow 属性仅替换图标内容。

direction 属性似乎逻辑反了，“向上展开” 例子为何是 direction="bottom"

direction 重新赋值为up 和 down，这样语义比较清楚 Popup提升到Dropdown内部， Transition实现切换动画，你看看是否符合预期

1.箭头方向反了，默认朝下
2.例子的内容再丰富一点，比如带多行文本、表单、列表项等，支持内部按钮关闭Dropdown弹层

JeromeLin · 2023-06-05T06:33:04Z

层叠顺序有点问题，先打开的内容要被后打开的遮盖

JeromeLin · 2023-06-06T06:13:37Z

这样处理层级会有问题，内部的Picker组件的弹层就在Dropdown下面了。
看起来和Picker类似，只需要定义Dropdown的 z-index 为一个固定值，靠堆叠顺序，节点在后的，盖在前一个上面就行了，不需要额外操作，参考下Picker吧

JunIce · 2023-06-07T01:20:37Z

@JeromeLin 看了一下仅靠生成节点的顺序可能还不行，现在popup不是强制destroy，会出现之前的节点被再次打开，所以会出现盖不住的情况
和Picker还不太一样，Picker同时只会有一个打开
如果改成强制destroy可以解决，你看行不行

JeromeLin · 2023-06-07T02:43:26Z

@JeromeLin 看了一下仅靠生成节点的顺序可能还不行，现在popup不是强制destroy，会出现之前的节点被再次打开，所以会出现盖不住的情况和Picker还不太一样，Picker同时只会有一个打开如果改成强制destroy可以解决，你看行不行

干脆限制只允许同时打开一个吧，把之前开的都关了

JeromeLin · 2023-06-08T02:04:05Z

@JunIce 激活菜单的例子有点问题

JeromeLin · 2023-06-08T02:29:26Z

packages/zarm/src/dropdown/demo.md

+| :--------------- | :-------------------- | :----- | :--------------------------- |
+| activeKey        | number \| string      | -      | 激活的 Item Key |
+| defaultActiveKey | number \| string      | -      | 默认激活的 Item Key |
+| direction        | 'up' \| 'down'     | 'down'  | 默认下拉方向  |


默认下拉方向 => 下拉方向

JeromeLin · 2023-06-08T02:30:38Z

packages/zarm/src/dropdown/demo.md

+| animationType    | string                | -      | 菜单动画类型，可选值 `fade`、`door`、`flip`、`rotate`、`zoom`、`zoom-fade`、`move-up`、 `move-down`、`move-left`、`move-right`、`slide-up`、`slide-down`、`slide-left`、`slide-right` |
+| animationDuration    | number                | -      | 动画执行时间（单位：毫秒） |
+| popupClassName    | string                | -      | 弹出层样式名 |
+| zIndex    | number                | -      | 下拉层级，默认从1200开始累加 |


删除 zIndex 属性

JeromeLin · 2023-06-08T02:30:54Z

packages/zarm/src/dropdown/Dropdown.tsx

+interface CompoundedComponent
+  extends React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<DropdownInstance>> {
+  Item: typeof DropdownItem;
+  _zIndex: number;


删除 zIndex 属性

JeromeLin · 2023-06-15T02:30:39Z

@JunIce 默认激活的示例有问题。
另外分支切到next吧，发布到V4

dominicleo · 2023-06-15T02:53:06Z

packages/zarm/src/dropdown/Dropdown.tsx

+    if (direction === 'down') {
+      styleOffset.top = `${offset.current}px`;
+    } else {
+      styleOffset.bottom = `${offset.current}px`;
+      styleOffset.height = `auto`;


resize/orientationchange 后，容器位置可以重新计算下

JunIce · 2023-06-15T05:55:00Z

@JunIce 默认激活的示例有问题。另外分支切到next吧，发布到V4

收到

feat(Dropdown): add Component Dropdown

aa4ee1a

vercel bot temporarily deployed to Preview – zarm May 26, 2023 09:32 Inactive

JeromeLin added the PR: draft label May 26, 2023

JunIce added 5 commits May 27, 2023 09:42

fix(Dropdown): fix Dropdown arrow animation

b8ee5cd

fix(Dropdown): fix Dropdown animationType

33b3b32

fix(Dropdown): fix Dropdown defaultActiveKey active menu && onChange …

c640ec3

…output

refactor(Dropdown): remove onClose Event & optimize change event

975cb2a

fix(Dropdown): fix Dropdown css type declare

2b2f5db

vercel bot temporarily deployed to Preview – zarm May 28, 2023 06:58 Inactive

docs(Dropdown): update Dropdown doc

8a47f6f

vercel bot temporarily deployed to Preview – zarm May 29, 2023 02:00 Inactive

refactor(Dropdown): refactor Dropdown

9e72493

vercel bot temporarily deployed to Preview – zarm May 31, 2023 07:27 Inactive

test(Dropdown): test case

18bcd4d

vercel bot temporarily deployed to Preview – zarm May 31, 2023 09:24 Inactive

JunIce added 2 commits June 4, 2023 15:14

fix(Dropdown): fix Dropdown scroll event

50df1f6

docs(Dropdown): doc complete

c6a6175

vercel bot temporarily deployed to Preview – zarm June 4, 2023 07:17 Inactive

test(Dropdown): update snapshot

3accd1f

vercel bot temporarily deployed to Preview – zarm June 4, 2023 09:44 Inactive

vercel bot had a problem deploying to Preview June 6, 2023 03:02 Failure

fix(Dropdown): fix multi Dropdown stack level of position

b7bc4fc

JunIce force-pushed the feature-dropdown branch from 17db9ec to b7bc4fc Compare June 6, 2023 03:05

vercel bot had a problem deploying to Preview June 6, 2023 03:06 Failure

vercel bot had a problem deploying to Preview June 6, 2023 03:08 Failure

JunIce force-pushed the feature-dropdown branch from 7943b07 to b7bc4fc Compare June 6, 2023 03:08

fix(Dropdown): fix Dropdown only one instance can be visible

0fe66fa

vercel bot deployed to Preview June 8, 2023 01:57 View deployment

JeromeLin reviewed Jun 8, 2023

View reviewed changes

refactor(Dropdown): fix Dropdown clickaway issue

1ba949a

vercel bot deployed to Preview June 12, 2023 03:08 View deployment

dominicleo reviewed Jun 15, 2023

View reviewed changes

JunIce closed this Jun 16, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(Dropdown): add Component Dropdown #1106

feat(Dropdown): add Component Dropdown #1106

JunIce commented May 26, 2023

vercel bot commented May 26, 2023 •

edited

Loading

github-actions bot commented May 26, 2023 •

edited

Loading

codecov bot commented May 26, 2023 •

edited

Loading

JeromeLin commented May 26, 2023 •

edited

Loading

JeromeLin commented May 29, 2023

JunIce commented May 31, 2023

JeromeLin commented Jun 1, 2023 •

edited

Loading

JeromeLin commented Jun 5, 2023

JeromeLin commented Jun 6, 2023

JunIce commented Jun 7, 2023

JeromeLin commented Jun 7, 2023

JeromeLin commented Jun 8, 2023

JeromeLin Jun 8, 2023

JeromeLin Jun 8, 2023

JeromeLin Jun 8, 2023

JeromeLin commented Jun 15, 2023 •

edited

Loading

dominicleo Jun 15, 2023

JunIce Jun 15, 2023

JunIce commented Jun 15, 2023

feat(Dropdown): add Component Dropdown #1106

feat(Dropdown): add Component Dropdown #1106

Conversation

JunIce commented May 26, 2023

vercel bot commented May 26, 2023 • edited Loading

github-actions bot commented May 26, 2023 • edited Loading

codecov bot commented May 26, 2023 • edited Loading

Codecov Report

JeromeLin commented May 26, 2023 • edited Loading

JeromeLin commented May 29, 2023

JunIce commented May 31, 2023

JeromeLin commented Jun 1, 2023 • edited Loading

JeromeLin commented Jun 5, 2023

JeromeLin commented Jun 6, 2023

JunIce commented Jun 7, 2023

JeromeLin commented Jun 7, 2023

JeromeLin commented Jun 8, 2023

JeromeLin Jun 8, 2023

Choose a reason for hiding this comment

JeromeLin Jun 8, 2023

Choose a reason for hiding this comment

JeromeLin Jun 8, 2023

Choose a reason for hiding this comment

JeromeLin commented Jun 15, 2023 • edited Loading

dominicleo Jun 15, 2023

Choose a reason for hiding this comment

JunIce Jun 15, 2023

Choose a reason for hiding this comment

JunIce commented Jun 15, 2023

vercel bot commented May 26, 2023 •

edited

Loading

github-actions bot commented May 26, 2023 •

edited

Loading

codecov bot commented May 26, 2023 •

edited

Loading

JeromeLin commented May 26, 2023 •

edited

Loading

JeromeLin commented Jun 1, 2023 •

edited

Loading

JeromeLin commented Jun 15, 2023 •

edited

Loading