feat: add bottom arrow

ant-design · Oct 10, 2023 · d5aa698 · d5aa698
1 parent 9f71892
commit d5aa698
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 0 deletions.
diff --git a/src/components/popover/popover-menu.tsx b/src/components/popover/popover-menu.tsx
@@ -88,6 +88,9 @@ export const PopoverMenu = forwardRef<PopoverRef, PopoverMenuProps>(
         {...props}
         className={classNames(classPrefix, props.className)}
         content={overlay}
+        bottomArrow={
+          !!(props?.maxCount && props.actions.length > props?.maxCount)
+        }
       >
         {props.children}
       </Popover>

diff --git a/src/components/popover/popover.less b/src/components/popover/popover.less
@@ -73,4 +73,17 @@
   .adm-popover-arrow {
     color: var(--background);
   }
+
+  &-bottom-arrow {
+    position: absolute;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    &::after {
+      content: ' ';
+      border: var(--arrow-size) solid transparent;
+      border-color: #fff transparent transparent transparent;
+    }
+  }
 }
diff --git a/src/components/popover/popover.tsx b/src/components/popover/popover.tsx
@@ -35,6 +35,7 @@ import { useClickAway, useIsomorphicLayoutEffect } from 'ahooks'
 import { DeprecatedPlacement, Placement } from './index'
 import { normalizePlacement } from './normalize-placement'
 import { convertPx } from '../../utils/convert-px'
+
 const classPrefix = `adm-popover`
 
 export type PopoverProps = {
@@ -49,6 +50,7 @@ export type PopoverProps = {
   placement?: Placement | DeprecatedPlacement
   stopPropagation?: PropagationEvent[]
   content: ReactNode
+  bottomArrow?: boolean
 } & NativeProps<'--z-index' | '--arrow-size'>
 
 export type PopoverRef = {
@@ -107,6 +109,9 @@ export const Popover = forwardRef<PopoverRef, PopoverProps>((p, ref) => {
         <div className={`${classPrefix}-inner`}>
           <div className={`${classPrefix}-inner-content`}>{props.content}</div>
         </div>
+        {props.bottomArrow && (
+          <div className={`${classPrefix}-bottom-arrow`}></div>
+        )}
       </div>
     )
   )