feat(Dropdown): Support separated layout & mask visibility control

src/components/dropdown/demos/demo1.tsx

@@ -89,6 +89,7 @@ export default () => {
           </Dropdown.Item>
         </Dropdown>
       </DemoBlock>
+
       <DemoBlock title='自定义arrow' padding={'0'}>
         <Dropdown arrow={<DownOutline />}>
           <Dropdown.Item key='sorter' title='排序'>
@@ -127,6 +128,41 @@ export default () => {
           </Dropdown.Item>
         </Dropdown>
       </DemoBlock>
+
+      <DemoBlock title='左右布局' padding={'0'}>
+        <Dropdown>
+          <Dropdown.Item key='sorter' title='排序'>
+            <div style={{ padding: 12 }}>
+              排序内容
+              <br />
+              排序内容
+              <br />
+              排序内容
+              <br />
+              排序内容
+              <br />
+            </div>
+          </Dropdown.Item>
+          <Dropdown.Item key='bizop' title='商机筛选'>
+            <div style={{ padding: 12 }}>
+              商机筛选内容
+              <br />
+              商机筛选内容
+              <br />
+              商机筛选内容
+              <br />
+            </div>
+          </Dropdown.Item>
+          <Dropdown.Item key='more' title='更选筛选' align='right'>
+            <div style={{ padding: 12 }}>
+              更多筛选内容
+              <br />
+              更多筛选内容
+              <br />
+            </div>
+          </Dropdown.Item>
+        </Dropdown>
+      </DemoBlock>
     </>
   )
 }

src/components/dropdown/demos/demo2.tsx

@@ -7,32 +7,60 @@ export default () => {
   const ref = useRef<DropdownRef>(null)
 
   return (
-    <DemoBlock title='点击内部按钮隐藏' padding={'0'}>
-      <Dropdown ref={ref}>
-        <Dropdown.Item key='sorter' title='排序'>
-          <div style={{ padding: 12 }}>
-            排序内容
-            <br />
-            排序内容
-            <br />
-            排序内容
-            <br />
-            排序内容
-            <br />
-          </div>
-          <div style={{ padding: '0 12px 12px' }}>
-            <Button
-              color='primary'
-              block
-              onClick={() => {
-                ref.current?.close()
-              }}
-            >
-              确定
-            </Button>
-          </div>
-        </Dropdown.Item>
-      </Dropdown>
-    </DemoBlock>
+    <>
+      <DemoBlock title='点击内部按钮隐藏' padding={'0'}>
+        <Dropdown ref={ref}>
+          <Dropdown.Item key='sorter' title='排序'>
+            <div style={{ padding: 12 }}>
+              排序内容
+              <br />
+              排序内容
+              <br />
+              排序内容
+              <br />
+              排序内容
+              <br />
+            </div>
+            <div style={{ padding: '0 12px 12px' }}>
+              <Button
+                color='primary'
+                block
+                onClick={() => {
+                  ref.current?.close()
+                }}
+              >
+                确定
+              </Button>
+            </div>
+          </Dropdown.Item>
+        </Dropdown>
+      </DemoBlock>
+      <DemoBlock title='不展示遮罩' padding={'0'}>
+        <Dropdown>
+          <Dropdown.Item key='sorter' title='排序'>
+            <div style={{ padding: 12 }}>
+              排序内容
+              <br />
+              排序内容
+              <br />
+              排序内容
+              <br />
+              排序内容
+              <br />
+            </div>
+          </Dropdown.Item>
+          <Dropdown.Item key='bizop' title='无遮罩筛选' mask={false}>
+            <div style={{ padding: 12 }}>
+              商机筛选内容
+              <br />
+              商机筛选内容
+              <br />
+              商机筛选内容
+              <br />
+            </div>
+          </Dropdown.Item>
+        </Dropdown>
+      </DemoBlock>
+    </>
   )
 }

src/components/dropdown/dropdown.less

@@ -9,6 +9,15 @@
     border-bottom: 1px solid transparent;
   }
 
+  .@{class-prefix-dropdown}-separated {
+    .@{class-prefix-dropdown-item} {
+      flex: unset;
+    }
+    .@{class-prefix-dropdown-item}-gap {
+      flex: 1;
+    }
+  }
+
   &-open {
     .@{class-prefix-dropdown}-nav {
       border-bottom-color: var(--adm-color-border);

src/components/dropdown/dropdown.tsx

@@ -16,7 +16,9 @@
 import { NativeProps, withNativeProps } from '../../utils/native-props'
 import { mergeProps } from '../../utils/with-default-props'
 import { usePropsValue } from '../../utils/use-props-value'
+import { isPropValueConsecutive } from '../../utils/is-prop-value-consecutive'
 import { defaultPopupBaseProps } from '../popup/popup-base-props'
+import { devWarning } from '../../utils/dev-log'
 
 const classPrefix = `adm-dropdown`
 
@@ -27,10 +29,12 @@
   closeOnClickAway?: boolean
   onChange?: (key: string | null) => void
   arrow?: React.ReactNode
+  mask?: boolean
   getContainer?: PopupProps['getContainer']
 } & NativeProps
 
 const defaultProps = {
+  mask: true,
   defaultActiveKey: null,
   closeOnMaskClick: true,
   closeOnClickAway: false,
@@ -46,6 +50,7 @@
   React.PropsWithChildren<DropdownProps>
 >((p, ref) => {
   const props = mergeProps(defaultProps, p)
+  const [showMask, setShowMask] = useState(true)
   const [value, setValue] = usePropsValue({
     value: props.activeKey,
     defaultValue: props.defaultActiveKey,
@@ -78,30 +83,48 @@
       setValue(null)
     } else {
       setValue(key)
+      key && setShowMask(maskPopMap[key])
     }
   }
 
   let popupForceRender = false
+  let separated = false
   const items: ReactElement<ComponentProps<typeof Item>>[] = []
-  const navs = React.Children.map(props.children, child => {
+  const leftNavs: React.ReactNode[] = []
+  const rightNavs: React.ReactNode[] = []
+  const maskPopMap: Record<string, boolean> = {}
+  React.Children.forEach(props.children, child => {
     if (isValidElement<ComponentProps<typeof Item>>(child)) {
       const childProps = {
         ...child.props,
         onClick: () => {
           changeActive(child.key as string)
+          child.props.onClick?.()
         },
         active: child.key === value,
         arrow:
           child.props.arrow === undefined ? props.arrow : child.props.arrow,
       }
       items.push(child)
+      if (child.key) {
+        maskPopMap[child.key] =
+          child.props.mask === undefined ? props.mask : child.props.mask
+      }
       if (child.props.forceRender) popupForceRender = true
-      return cloneElement(child, childProps)
+      if (child.props.align) separated = true
+      const cloneChild = cloneElement(child, childProps)
+      child.props.align === 'right'
+        ? rightNavs.push(cloneChild)
+        : leftNavs.push(cloneChild)
     } else {
-      return child
+      leftNavs.push(child)
     }
   })
 
+  if (!isPropValueConsecutive(props.children, 'align')) {
+    devWarning('Dropdown.Item', `'align' prop should be consecutive.`)
+  }
+
   useImperativeHandle(
     ref,
     () => ({
@@ -120,8 +143,15 @@
       })}
       ref={containerRef}
     >
-      <div className={`${classPrefix}-nav`} ref={navRef}>
-        {navs}
+      <div
+        className={classNames(`${classPrefix}-nav`, {
+          [`${classPrefix}-separated`]: separated,
+        })}
+        ref={navRef}
+      >
+        {leftNavs}
+        {separated && <div className={`${classPrefix}-item-gap`} role='grid' />}
+        {rightNavs}
       </div>
       <Popup
         visible={!!value}
@@ -131,6 +161,7 @@
         maskClassName={`${classPrefix}-popup-mask`}
         bodyClassName={`${classPrefix}-popup-body`}
         style={{ top }}
+        mask={showMask}
         forceRender={popupForceRender}
         onMaskClick={
           props.closeOnMaskClick

src/components/dropdown/index.en.md

@@ -18,6 +18,7 @@ It is suitable for filtering, sorting and changing the display range or order of
 | --- | --- | --- | --- |
 | activeKey | Active `Item` key | `string \| null` | - |
 | arrow | Custom arrow | `React.ReactNode` | - |
+| mask | Whether to show mask when expended | `React.ReactNode` | `true` |
 | closeOnClickAway | Whether to automatically hide after clicking outside area | `boolean` | `false` |
 | closeOnMaskClick | Whether to automatically close after clicking on the mask | `boolean` | `true` |
 | defaultActiveKey | The default active `Item` key | `string \| null` | `null` |
@@ -36,9 +37,14 @@ It is suitable for filtering, sorting and changing the display range or order of
 
 | Name | Description | Type | Default |
 | --- | --- | --- | --- |
+| align | The alignment of Item. | `'left' \| 'right' \| undefined` | - |
 | arrow | Custom arrow | `React.ReactNode` | - |
+| mask | Whether to show mask when expended | `boolean` | 父级 Dropdown 的 `mask` |
 | destroyOnClose | Destroy `dom` when not visible | `boolean` | `false` |
 | forceRender | Whether to render the content even if it is not active | `boolean` | `false` |
 | highlight | Highlight | `boolean` | `false` |
 | key | The unique value | `string` | - |
+| onClick | Triggered on click | `() => void` | - |
 | title | Title | `ReactNode` | - |
+
+If the `align` prop of any `Dropdown.Item` is not `undefined`, all `Dropdown.Item` are displayed separately according to the `align` value. At this time, the `Dropdown.Item` without the `align` prop is on the left by default.

src/components/dropdown/index.zh.md

@@ -18,6 +18,7 @@
 | --- | --- | --- | --- |
 | activeKey | 激活的 `Item` `key` | `string \| null` | - |
 | arrow | 自定义 arrow | `React.ReactNode` | - |
+| mask | 展开时是否展示遮罩 | `boolean` | `true` |
 | closeOnClickAway | 是否在点击外部区域后自动隐藏 | `boolean` | `false` |
 | closeOnMaskClick | 是否在点击遮罩后自动隐藏 | `boolean` | `true` |
 | defaultActiveKey | 默认激活的 `Item` `key` | `string \| null` | `null` |
@@ -34,11 +35,16 @@
 
 ### 属性
 
-| 属性           | 说明                        | 类型              | 默认值  |
-| -------------- | --------------------------- | ----------------- | ------- |
-| arrow          | 自定义 arrow                | `React.ReactNode` | -       |
-| destroyOnClose | 不可见时是否销毁 `DOM` 结构 | `boolean`         | `false` |
-| forceRender    | 被隐藏时是否渲染 `DOM` 结构 | `boolean`         | `false` |
-| highlight      | 高亮                        | `boolean`         | `false` |
-| key            | 唯一值                      | `string`          | -       |
-| title          | 标题                        | `ReactNode`       | -       |
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| align | 对齐方式 | `'left' \| 'right' \| undefined` | - |
+| arrow | 自定义 arrow | `React.ReactNode` | - |
+| mask | 展开时是否展示遮罩 | `boolean` | 父级 Dropdown 的 `mask` |
+| destroyOnClose | 不可见时是否销毁 `DOM` 结构 | `boolean` | `false` |
+| forceRender | 被隐藏时是否渲染 `DOM` 结构 | `boolean` | `false` |
+| highlight | 高亮 | `boolean` | `false` |
+| key | 唯一值 | `string` | - |
+| onClick | 点击时触发 | `() => void` | - |
+| title | 标题 | `ReactNode` | - |
+
+若有任一`Dropdown.Item`的`align`属性非`undefined`时，所有`Dropdown.Item`按`align`配置左右分开展示，此时未配置`align`属性的`Dropdown.Item`默认居左。

src/components/dropdown/item.tsx

@@ -8,12 +8,14 @@ const classPrefix = `adm-dropdown-item`
 
 export type DropdownItemProps = {
   key: string
+  mask?: boolean
   title: React.ReactNode
+  align?: 'left' | 'right'
   active?: boolean
   highlight?: boolean
   forceRender?: boolean
   destroyOnClose?: boolean
-  onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
+  onClick?: () => void
   arrow?: React.ReactNode
   children?: React.ReactNode
 } & NativeProps

src/components/dropdown/tests/dropdown.test.tsx

@@ -83,4 +83,27 @@ describe('Dropdown', () => {
     )
     expect(screen.getByText('content')).toBeInTheDocument()
   })
+
+  test('item with align', () => {
+    const { getByTestId, container } = render(
+      <Dropdown data-testid='dropdown'>
+        <Dropdown.Item title='item1' key='item1' data-testid='item1'>
+          content1
+        </Dropdown.Item>
+        <Dropdown.Item
+          title='item2'
+          key='item2'
+          data-testid='item2'
+          align='right'
+        >
+          content2
+        </Dropdown.Item>
+      </Dropdown>
+    )
+
+    expect(getByTestId('item1')).toHaveStyle('flex: unset')
+    expect(container.querySelector(`.${classPrefix}-nav`)).toHaveClass(
+      `${classPrefix}-nav ${classPrefix}-separated`
+    )
+  })
 })

src/utils/is-prop-value-consecutive.ts

@@ -0,0 +1,21 @@
+import React, { ReactNode, isValidElement } from 'react'
+
+type CheckedValueType = string | number | undefined | null | boolean
+
+export function isPropValueConsecutive(children: ReactNode, propName: string) {
+  let isConsistant = true
+  let prevValue: CheckedValueType = undefined
+  const knownPropValue = new Set<CheckedValueType>()
+  React.Children.forEach(children, child => {
+    if (!isValidElement(child)) return
+
+    const value = child.props[propName]
+    if (value !== prevValue && knownPropValue.has(value)) {
+      isConsistant = false
+    } else {
+      knownPropValue.add(value)
+      prevValue = value
+    }
+  })
+  return isConsistant
+}