feat(Dropdown): add Component Dropdown

[JunIce]

#986

[vercel[bot]]

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[bot]]

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

[codecov[bot]]

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%)	:arrow_up:
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]

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

[JeromeLin]

还需要改进一下：

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

[JunIce]

还需要改进一下：

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

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

[JeromeLin]

还需要改进一下：

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

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

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

[JeromeLin]

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

[JeromeLin]

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

[JunIce]

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

[JeromeLin]

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

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

[JeromeLin]

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

[JeromeLin]

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

[JunIce]

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

收到