From 99453ebed7f21981921829ee57a0c2ab4a10a312 Mon Sep 17 00:00:00 2001 From: yoyo837 Date: Sun, 16 Apr 2023 00:23:10 +0800 Subject: [PATCH 1/9] feat: arrow add arrowClassName support --- src/Popup/Arrow.tsx | 6 ++++-- src/Popup/index.tsx | 3 +++ src/index.tsx | 3 +++ tests/arrow.test.jsx | 22 ++++++++++++++++++++++ 4 files changed, 32 insertions(+), 2 deletions(-) diff --git a/src/Popup/Arrow.tsx b/src/Popup/Arrow.tsx index 8a2d6a34..bb682d96 100644 --- a/src/Popup/Arrow.tsx +++ b/src/Popup/Arrow.tsx @@ -1,4 +1,5 @@ import * as React from 'react'; +import classNames from 'classnames'; import type { AlignType } from '../interface'; export interface ArrowProps { @@ -6,10 +7,11 @@ export interface ArrowProps { align: AlignType; arrowX?: number; arrowY?: number; + className?: string; } export default function Arrow(props: ArrowProps) { - const { prefixCls, align, arrowX = 0, arrowY = 0 } = props; + const { prefixCls, className, align, arrowX = 0, arrowY = 0 } = props; const arrowRef = React.useRef(); @@ -51,6 +53,6 @@ export default function Arrow(props: ArrowProps) { } return ( -
+
); } diff --git a/src/Popup/index.tsx b/src/Popup/index.tsx index 5162bd32..7cf7ce70 100644 --- a/src/Popup/index.tsx +++ b/src/Popup/index.tsx @@ -27,6 +27,7 @@ export interface PopupProps { // Arrow align?: AlignType; arrow?: boolean; + arrowClassName?: string; arrowX?: number; arrowY?: number; @@ -83,6 +84,7 @@ const Popup = React.forwardRef((props, ref) => { // Arrow arrow, + arrowClassName, align, arrowX, arrowY, @@ -225,6 +227,7 @@ const Popup = React.forwardRef((props, ref) => { {arrow && ( { expect(style.top).toBeFalsy(); expect(style.bottom).toBeFalsy(); }); + + it('arrow classname', async () => { + render( + trigger} + arrow + arrowClassName='abc' + > +
+ , + ); + + await awaitFakeTimer(); + + const arrowDom = document.querySelector('.rc-trigger-popup-arrow'); + expect(arrowDom.classList.contains('abc')).toBeTruthy(); + }); }); }); From 814bf73487350903152fd4578c89dccffb6e673b Mon Sep 17 00:00:00 2001 From: yoyo837 Date: Sun, 16 Apr 2023 14:19:17 +0800 Subject: [PATCH 2/9] =?UTF-8?q?feat:=20=E6=94=B6=E8=B5=B7=E5=88=B0?= =?UTF-8?q?=E5=AF=B9=E8=B1=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Popup/Arrow.tsx | 10 +++++----- src/Popup/index.tsx | 14 +++----------- src/index.tsx | 28 +++++++++++++++++++++------- src/interface.ts | 8 +++++++- 4 files changed, 36 insertions(+), 24 deletions(-) diff --git a/src/Popup/Arrow.tsx b/src/Popup/Arrow.tsx index bb682d96..c95d44c8 100644 --- a/src/Popup/Arrow.tsx +++ b/src/Popup/Arrow.tsx @@ -1,17 +1,17 @@ import * as React from 'react'; import classNames from 'classnames'; -import type { AlignType } from '../interface'; +import type { AlignType, ArrowType } from '../interface'; export interface ArrowProps { prefixCls: string; align: AlignType; - arrowX?: number; - arrowY?: number; - className?: string; + arrow: ArrowType; } export default function Arrow(props: ArrowProps) { - const { prefixCls, className, align, arrowX = 0, arrowY = 0 } = props; + const { prefixCls, align, arrow } = props; + + const {arrowX = 0, arrowY = 0, className } = arrow || {} const arrowRef = React.useRef(); diff --git a/src/Popup/index.tsx b/src/Popup/index.tsx index 7cf7ce70..d20a6ff9 100644 --- a/src/Popup/index.tsx +++ b/src/Popup/index.tsx @@ -6,7 +6,7 @@ import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect'; import { composeRef } from 'rc-util/lib/ref'; import * as React from 'react'; import type { TriggerProps } from '../'; -import type { AlignType } from '../interface'; +import type { AlignType, ArrowType } from '../interface'; import Arrow from './Arrow'; import Mask from './Mask'; import PopupContent from './PopupContent'; @@ -26,10 +26,7 @@ export interface PopupProps { // Arrow align?: AlignType; - arrow?: boolean; - arrowClassName?: string; - arrowX?: number; - arrowY?: number; + arrow?: ArrowType; // Open open: boolean; @@ -84,10 +81,7 @@ const Popup = React.forwardRef((props, ref) => { // Arrow arrow, - arrowClassName, align, - arrowX, - arrowY, // Motion motion, @@ -227,10 +221,8 @@ const Popup = React.forwardRef((props, ref) => { {arrow && ( )} {childNode} diff --git a/src/index.tsx b/src/index.tsx index a8899d7b..455532f9 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -17,6 +17,7 @@ import useWatch from './hooks/useWatch'; import type { ActionType, AlignType, + ArrowType, AnimationType, BuildInPlacements, TransitionNameType, @@ -37,6 +38,10 @@ export interface TriggerRef { // New version will not wrap popup with `rc-trigger-popup-content` when multiple children +export interface Arrow { + className?: string +} + export interface TriggerProps { children: React.ReactElement; action?: ActionType | ActionType[]; @@ -104,8 +109,7 @@ export interface TriggerProps { alignPoint?: boolean; // Maybe we can support user pass position in the future // ==================== Arrow ==================== - arrow?: boolean; - arrowClassName?: string; + arrow?: boolean | Arrow; // ================= Deprecated ================== /** @deprecated Add `className` on `children`. Please add `className` directly instead. */ @@ -179,7 +183,6 @@ export function generateTrigger( // Arrow arrow, - arrowClassName, // Motion popupMotion, @@ -627,6 +630,20 @@ export function generateTrigger( ...passedProps, }); + let innerArrow: ArrowType = null + + if (arrow) { + innerArrow = { + arrowX, + arrowY + } + if (arrow === true) { + // + } else { + Object.assign(innerArrow, arrow) + } + } + // Render return ( <> @@ -669,14 +686,11 @@ export function generateTrigger( getPopupContainer={getPopupContainer} // Arrow align={alignInfo} - arrow={arrow} - arrowClassName={arrowClassName} + arrow={innerArrow} // Align ready={ready} offsetX={offsetX} offsetY={offsetY} - arrowX={arrowX} - arrowY={arrowY} onAlign={triggerAlign} // Stretch stretch={stretch} diff --git a/src/interface.ts b/src/interface.ts index 90dcb483..7fbfbb9e 100644 --- a/src/interface.ts +++ b/src/interface.ts @@ -70,6 +70,12 @@ export interface AlignType { ignoreShake?: boolean; } +export interface ArrowType { + className?: string; + arrowX?: number; + arrowY?: number; +} + export type BuildInPlacements = Record; export type StretchType = string; @@ -95,4 +101,4 @@ export interface MobileConfig { popupClassName?: string; popupStyle?: React.CSSProperties; popupRender?: (originNode: React.ReactNode) => React.ReactNode; -} +} \ No newline at end of file From 0d403905395653f5b9593652dd31d67b79f7f857 Mon Sep 17 00:00:00 2001 From: yoyo837 Date: Sun, 16 Apr 2023 14:20:00 +0800 Subject: [PATCH 3/9] test: fix test --- tests/arrow.test.jsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/tests/arrow.test.jsx b/tests/arrow.test.jsx index 9840539f..9947b268 100644 --- a/tests/arrow.test.jsx +++ b/tests/arrow.test.jsx @@ -173,8 +173,9 @@ describe('Trigger.Arrow', () => { autoArrow: false, }} popup={trigger} - arrow - arrowClassName='abc' + arrow={{ + className: 'abc', + }} >
, From ff58609ae8a60772ca7308ca412eb577fae162b9 Mon Sep 17 00:00:00 2001 From: yoyo837 Date: Sun, 16 Apr 2023 14:25:22 +0800 Subject: [PATCH 4/9] chore: semicolon --- src/Popup/Arrow.tsx | 2 +- src/index.tsx | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/Popup/Arrow.tsx b/src/Popup/Arrow.tsx index c95d44c8..5b6d9866 100644 --- a/src/Popup/Arrow.tsx +++ b/src/Popup/Arrow.tsx @@ -11,7 +11,7 @@ export interface ArrowProps { export default function Arrow(props: ArrowProps) { const { prefixCls, align, arrow } = props; - const {arrowX = 0, arrowY = 0, className } = arrow || {} + const {arrowX = 0, arrowY = 0, className } = arrow || {}; const arrowRef = React.useRef(); diff --git a/src/index.tsx b/src/index.tsx index 455532f9..da9872e4 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -630,17 +630,17 @@ export function generateTrigger( ...passedProps, }); - let innerArrow: ArrowType = null + let innerArrow: ArrowType; if (arrow) { innerArrow = { arrowX, arrowY - } + }; if (arrow === true) { // } else { - Object.assign(innerArrow, arrow) + Object.assign(innerArrow, arrow); } } From 91776427a9004fbc3a91c20a6a27c38ba29d0a04 Mon Sep 17 00:00:00 2001 From: yoyo837 Date: Sun, 16 Apr 2023 23:15:49 +0800 Subject: [PATCH 5/9] chore: x and y --- src/Popup/Arrow.tsx | 6 +++--- src/index.tsx | 13 +++++-------- src/interface.ts | 9 ++++++--- 3 files changed, 14 insertions(+), 14 deletions(-) diff --git a/src/Popup/Arrow.tsx b/src/Popup/Arrow.tsx index 5b6d9866..1e80f7e9 100644 --- a/src/Popup/Arrow.tsx +++ b/src/Popup/Arrow.tsx @@ -11,7 +11,7 @@ export interface ArrowProps { export default function Arrow(props: ArrowProps) { const { prefixCls, align, arrow } = props; - const {arrowX = 0, arrowY = 0, className } = arrow || {}; + const {x = 0, y = 0, className } = arrow || {}; const arrowRef = React.useRef(); @@ -35,7 +35,7 @@ export default function Arrow(props: ArrowProps) { // Top & Bottom if (popupTB === targetTB || !['t', 'b'].includes(popupTB)) { - alignStyle.top = arrowY; + alignStyle.top = y; } else if (popupTB === 't') { alignStyle.top = 0; } else { @@ -44,7 +44,7 @@ export default function Arrow(props: ArrowProps) { // Left & Right if (popupLR === targetLR || !['l', 'r'].includes(popupLR)) { - alignStyle.left = arrowX; + alignStyle.left = x; } else if (popupLR === 'l') { alignStyle.left = 0; } else { diff --git a/src/index.tsx b/src/index.tsx index da9872e4..b6b784ef 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -18,6 +18,7 @@ import type { ActionType, AlignType, ArrowType, + ArrowTypeOuter, AnimationType, BuildInPlacements, TransitionNameType, @@ -26,7 +27,7 @@ import Popup from './Popup'; import TriggerWrapper from './TriggerWrapper'; import { getAlignPopupClassName, getMotion, getWin } from './util'; -export type { BuildInPlacements, AlignType, ActionType }; +export type { BuildInPlacements, AlignType, ActionType, ArrowTypeOuter as ArrowType }; export interface TriggerRef { forceAlign: VoidFunction; @@ -38,10 +39,6 @@ export interface TriggerRef { // New version will not wrap popup with `rc-trigger-popup-content` when multiple children -export interface Arrow { - className?: string -} - export interface TriggerProps { children: React.ReactElement; action?: ActionType | ActionType[]; @@ -109,7 +106,7 @@ export interface TriggerProps { alignPoint?: boolean; // Maybe we can support user pass position in the future // ==================== Arrow ==================== - arrow?: boolean | Arrow; + arrow?: boolean | ArrowTypeOuter; // ================= Deprecated ================== /** @deprecated Add `className` on `children`. Please add `className` directly instead. */ @@ -634,8 +631,8 @@ export function generateTrigger( if (arrow) { innerArrow = { - arrowX, - arrowY + x: arrowX, + y: arrowY }; if (arrow === true) { // diff --git a/src/interface.ts b/src/interface.ts index 7fbfbb9e..6edf17fb 100644 --- a/src/interface.ts +++ b/src/interface.ts @@ -70,10 +70,13 @@ export interface AlignType { ignoreShake?: boolean; } -export interface ArrowType { +export interface ArrowTypeOuter { className?: string; - arrowX?: number; - arrowY?: number; +} + +export type ArrowType = ArrowTypeOuter & { + x?: number; + y?: number; } export type BuildInPlacements = Record; From b4b75aa97286e604c4711658bb4cdc8f444a09e5 Mon Sep 17 00:00:00 2001 From: Amumu Date: Mon, 17 Apr 2023 10:44:56 +0800 Subject: [PATCH 6/9] Update src/Popup/Arrow.tsx Co-authored-by: afc163 --- src/Popup/Arrow.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Popup/Arrow.tsx b/src/Popup/Arrow.tsx index 1e80f7e9..324e9ef1 100644 --- a/src/Popup/Arrow.tsx +++ b/src/Popup/Arrow.tsx @@ -11,7 +11,7 @@ export interface ArrowProps { export default function Arrow(props: ArrowProps) { const { prefixCls, align, arrow } = props; - const {x = 0, y = 0, className } = arrow || {}; + const { x = 0, y = 0, className } = arrow || {}; const arrowRef = React.useRef(); From 71541b1506b9e5c001c04749f6fc4eb173ba9bae Mon Sep 17 00:00:00 2001 From: yoyo837 Date: Mon, 17 Apr 2023 16:08:39 +0800 Subject: [PATCH 7/9] chore: if --- src/index.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/index.tsx b/src/index.tsx index b6b784ef..2096e9f0 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -629,14 +629,13 @@ export function generateTrigger( let innerArrow: ArrowType; + // true and Object likely if (arrow) { innerArrow = { x: arrowX, y: arrowY }; - if (arrow === true) { - // - } else { + if (arrow !== true) { Object.assign(innerArrow, arrow); } } From f7d1e0c10736ddcfa9e46338ba43a89242172cf2 Mon Sep 17 00:00:00 2001 From: yoyo837 Date: Mon, 17 Apr 2023 17:49:42 +0800 Subject: [PATCH 8/9] chore: improve --- src/index.tsx | 18 ++++++------------ 1 file changed, 6 insertions(+), 12 deletions(-) diff --git a/src/index.tsx b/src/index.tsx index 2096e9f0..9a5c9cf1 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -627,18 +627,12 @@ export function generateTrigger( ...passedProps, }); - let innerArrow: ArrowType; - - // true and Object likely - if (arrow) { - innerArrow = { - x: arrowX, - y: arrowY - }; - if (arrow !== true) { - Object.assign(innerArrow, arrow); - } - } + const innerArrow: ArrowType = arrow ? { + // true and Object likely + ...(arrow !== true ? arrow : {}), + x: arrowX, + y: arrowY + }: null // Render return ( From 7992af7943ab985d1375c4043a99cbfc60fe9390 Mon Sep 17 00:00:00 2001 From: yoyo837 Date: Mon, 17 Apr 2023 18:04:50 +0800 Subject: [PATCH 9/9] Semicolon --- src/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.tsx b/src/index.tsx index 9a5c9cf1..1e2c254f 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -632,7 +632,7 @@ export function generateTrigger( ...(arrow !== true ? arrow : {}), x: arrowX, y: arrowY - }: null + }: null; // Render return (