From 75df10fc0750169087e55cabdf510d454338813a Mon Sep 17 00:00:00 2001 From: Wanpan Date: Fri, 27 Sep 2024 09:33:55 +0800 Subject: [PATCH 1/7] fix: Splitter.Panel style is invalid (#51032) --- components/splitter/style/index.ts | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/components/splitter/style/index.ts b/components/splitter/style/index.ts index 1da3b577b2..c558d268c4 100644 --- a/components/splitter/style/index.ts +++ b/components/splitter/style/index.ts @@ -80,6 +80,8 @@ const genSplitterStyle: GenerateStyle = (token: SplitterToken): C } = token; const splitBarCls = `${componentCls}-bar`; + const splitMaskCls = `${componentCls}-mask`; + const splitPanelCls = `${componentCls}-panel`; const halfTriggerSize = token.calc(splitTriggerSize).div(2).equal(); @@ -186,7 +188,7 @@ const genSplitterStyle: GenerateStyle = (token: SplitterToken): C // =========================== Mask ========================= // Util dom for handle cursor - '&-mask': { + [splitMaskCls]: { position: 'fixed', zIndex: token.zIndexPopupBase, inset: 0, @@ -302,13 +304,13 @@ const genSplitterStyle: GenerateStyle = (token: SplitterToken): C }, // ========================= Panels ========================= - '&-panel': { + [splitPanelCls]: { overflow: 'auto', padding: '0 1px', scrollbarWidth: 'thin', boxSizing: 'border-box', }, - '&-panel-hidden': { + [`${splitPanelCls}-hidden`]: { padding: 0, }, From 36573e23027956c8eeed12fec1a0ae1699e21a41 Mon Sep 17 00:00:00 2001 From: ice <49827327+coding-ice@users.noreply.github.com> Date: Fri, 27 Sep 2024 18:49:49 +0800 Subject: [PATCH 2/7] fix(select): Incorrect activeBorderColor token when variant is filled (#51054) --- components/select/style/variants.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/select/style/variants.ts b/components/select/style/variants.ts index 1a1868526f..d1e21b813d 100644 --- a/components/select/style/variants.ts +++ b/components/select/style/variants.ts @@ -146,7 +146,7 @@ const genFilledStyle = (token: SelectToken): CSSObject => ({ ...genBaseFilledStyle(token, { bg: token.colorFillTertiary, hoverBg: token.colorFillSecondary, - activeBorderColor: token.colorPrimary, + activeBorderColor: token.activeBorderColor, color: token.colorText, }), From d0bcb188ee74b942e1fdf8fbd9fa33d777398559 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Sat, 28 Sep 2024 09:15:07 +0800 Subject: [PATCH 3/7] chore: upgrade deps (#51056) Co-authored-by: afc163 <507615+afc163@users.noreply.github.com> --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 5c394f7cc0..173ae251d0 100644 --- a/package.json +++ b/package.json @@ -129,7 +129,7 @@ "rc-mentions": "~2.16.1", "rc-menu": "~9.15.1", "rc-motion": "^2.9.3", - "rc-notification": "~5.6.1", + "rc-notification": "~5.6.2", "rc-pagination": "~4.3.0", "rc-picker": "~4.6.15", "rc-progress": "~4.0.0", From 7d296090db893eaf0c772a59c14e79b0e4b7fd1b Mon Sep 17 00:00:00 2001 From: gennadiipel <67027002+gennadiipel@users.noreply.github.com> Date: Sat, 28 Sep 2024 14:43:04 +0300 Subject: [PATCH 4/7] type: Remove unused className from Tour props (#51059) --- components/tour/interface.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/components/tour/interface.ts b/components/tour/interface.ts index 8690dd4305..83a1d0b14c 100644 --- a/components/tour/interface.ts +++ b/components/tour/interface.ts @@ -6,7 +6,6 @@ import type { export interface TourProps extends Omit { steps?: TourStepProps[]; - className?: string; prefixCls?: string; current?: number; indicatorsRender?: (current: number, total: number) => ReactNode; From 05fe556c984403d7dc2e2f66f987283a8e1c3202 Mon Sep 17 00:00:00 2001 From: sakuraee <56988719+sakuraee@users.noreply.github.com> Date: Sat, 28 Sep 2024 19:43:46 +0800 Subject: [PATCH 5/7] fix: add touch listener to Splitter (#51060) Co-authored-by: root --- components/splitter/SplitBar.tsx | 28 ++++++++++++++ components/splitter/__tests__/index.test.tsx | 40 ++++++++++++++++++++ 2 files changed, 68 insertions(+) diff --git a/components/splitter/SplitBar.tsx b/components/splitter/SplitBar.tsx index bd1af5b165..0884668013 100644 --- a/components/splitter/SplitBar.tsx +++ b/components/splitter/SplitBar.tsx @@ -52,6 +52,14 @@ const SplitBar: React.FC = (props) => { } }; + const onTouchStart: React.TouchEventHandler = (e) => { + if (resizable && e.touches.length === 1) { + const touch = e.touches[0]; + setStartPos([touch.pageX, touch.pageY]); + onOffsetStart(index); + } + }; + React.useEffect(() => { if (startPos) { const onMouseMove = (e: MouseEvent) => { @@ -67,12 +75,31 @@ const SplitBar: React.FC = (props) => { onOffsetEnd(); }; + const handleTouchMove = (e: TouchEvent) => { + if (e.touches.length === 1) { + const touch = e.touches[0]; + const offsetX = touch.pageX - startPos[0]; + const offsetY = touch.pageY - startPos[1]; + + onOffsetUpdate(index, offsetX, offsetY); + } + }; + + const handleTouchEnd = () => { + setStartPos(null); + onOffsetEnd(); + }; + + window.addEventListener('touchmove', handleTouchMove); + window.addEventListener('touchend', handleTouchEnd); window.addEventListener('mousemove', onMouseMove); window.addEventListener('mouseup', onMouseUp); return () => { window.removeEventListener('mousemove', onMouseMove); window.removeEventListener('mouseup', onMouseUp); + window.removeEventListener('touchmove', handleTouchMove); + window.removeEventListener('touchend', handleTouchEnd); }; } }, [startPos]); @@ -95,6 +122,7 @@ const SplitBar: React.FC = (props) => { [`${splitBarPrefixCls}-dragger-active`]: active, })} onMouseDown={onMouseDown} + onTouchStart={onTouchStart} /> {/* Start Collapsible */} diff --git a/components/splitter/__tests__/index.test.tsx b/components/splitter/__tests__/index.test.tsx index e3e029095c..42f7d8635c 100644 --- a/components/splitter/__tests__/index.test.tsx +++ b/components/splitter/__tests__/index.test.tsx @@ -113,6 +113,27 @@ describe('Splitter', () => { fireEvent.mouseUp(draggerEle); } + function mockTouchDrag(draggerEle: HTMLElement, offset: number) { + // Down + const touchStart = createEvent.touchStart(draggerEle, { + touches: [{}], + }); + (touchStart as any).touches[0].pageX = 0; + (touchStart as any).touches[0].pageY = 0; + fireEvent(draggerEle, touchStart); + + // Move + const touchMove = createEvent.touchMove(draggerEle, { + touches: [{}], + }); + (touchMove as any).touches[0].pageX = offset; + (touchMove as any).touches[0].pageY = offset; + fireEvent(draggerEle, touchMove); + + // Up + fireEvent.touchEnd(draggerEle); + } + it('The mousemove should work fine', async () => { const onResize = jest.fn(); const onResizeEnd = jest.fn(); @@ -132,6 +153,25 @@ describe('Splitter', () => { expect(onResizeEnd).toHaveBeenCalledWith([0, 100]); }); + it('The touchMove should work fine', async () => { + const onResize = jest.fn(); + const onResizeEnd = jest.fn(); + + const { container } = render( + , + ); + + // Right + mockTouchDrag(container.querySelector('.ant-splitter-bar-dragger')!, 40); + expect(onResize).toHaveBeenCalledWith([90, 10]); + expect(onResizeEnd).toHaveBeenCalledWith([90, 10]); + + // Left + mockTouchDrag(container.querySelector('.ant-splitter-bar-dragger')!, -200); + expect(onResize).toHaveBeenCalledWith([0, 100]); + expect(onResizeEnd).toHaveBeenCalledWith([0, 100]); + }); + it('with min', () => { const onResize = jest.fn(); const onResizeEnd = jest.fn(); From bcdd10b72c50bcd584cb047e0fd0bd92d8c66263 Mon Sep 17 00:00:00 2001 From: thinkasany <480968828@qq.com> Date: Sat, 28 Sep 2024 19:56:10 +0800 Subject: [PATCH 6/7] site: improve component change docs (#51040) --- .../ComponentChangelog/ComponentChangelog.tsx | 67 +++++++++++++------ 1 file changed, 47 insertions(+), 20 deletions(-) diff --git a/.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx b/.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx index e3c0cc1393..fa0888527b 100644 --- a/.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx +++ b/.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx @@ -15,6 +15,12 @@ interface MatchDeprecatedResult { reason: string[]; } +interface ChangelogInfo { + version: string; + changelog: string; + refs: string[]; +} + function matchDeprecated(v: string): MatchDeprecatedResult { const match = Object.keys(deprecatedVersions).find((depreciated) => semver.satisfies(v, depreciated), @@ -89,8 +95,8 @@ const locales = { }, }; -const ParseChangelog: React.FC<{ changelog: string; refs: string[]; styles: any }> = (props) => { - const { changelog = '', refs = [], styles } = props; +const ParseChangelog: React.FC<{ changelog: string }> = (props) => { + const { changelog = '' } = props; const parsedChangelog = React.useMemo(() => { const nodes: React.ReactNode[] = []; @@ -124,21 +130,48 @@ const ParseChangelog: React.FC<{ changelog: string; refs: string[]; styles: any <> {/* Changelog */} {parsedChangelog} - {/* Refs */} - {refs?.map((ref) => ( - - #{ref.match(/^.*\/(\d+)$/)?.[1]} - - ))} ); }; -interface ChangelogInfo { - version: string; - changelog: string; - refs: string[]; -} +const RenderChangelogList: React.FC<{ changelogList: ChangelogInfo[]; styles: any }> = ({ + changelogList, + styles, +}) => { + const elements = []; + for (let i = 0; i < changelogList.length; i += 1) { + const { refs, changelog } = changelogList[i]; + // Check if the next line is an image link and append it to the current line + if (i + 1 < changelogList.length && changelogList[i + 1].changelog.trim().startsWith(' + + {refs?.map((ref) => ( + + #{ref.match(/^.*\/(\d+)$/)?.[1]} + + ))} +
+ {imgElement?.getAttribute('alt') + , + ); + i += 1; // Skip the next line + } else { + elements.push( +
  • + +
    • , + ); + } + } + return
      {elements}
    ; +}; const useChangelog = (componentPath: string, lang: 'cn' | 'en'): ChangelogInfo[] => { const logFileName = `components-changelog-${lang}.json`; @@ -210,13 +243,7 @@ const ComponentChangelog: React.FC = (props) => { )} -
      - {changelogList.map((info, index) => ( -
    • - -
      • - ))} -
    + ), }; From f6f126b5f59e7c8b539300543a1168cad0c3b5f8 Mon Sep 17 00:00:00 2001 From: NathanLao <75557717+nathanlao@users.noreply.github.com> Date: Sat, 28 Sep 2024 05:12:24 -0700 Subject: [PATCH 7/7] fix: search component inconsistent height of button and input (#50926) Co-authored-by: nathanlao11 Co-authored-by: afc163 --- components/input/style/index.ts | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/components/input/style/index.ts b/components/input/style/index.ts index 76ddabc5a8..065c2580b3 100644 --- a/components/input/style/index.ts +++ b/components/input/style/index.ts @@ -659,6 +659,7 @@ const genSearchInputStyle: GenerateStyle = (token: InputToken) => { }, [`${componentCls}-affix-wrapper`]: { + height: token.controlHeight, borderRadius: 0, }, @@ -713,12 +714,16 @@ const genSearchInputStyle: GenerateStyle = (token: InputToken) => { }, }, - [`&-large ${searchPrefixCls}-button`]: { - height: token.controlHeightLG, + '&-large': { + [`${componentCls}-affix-wrapper, ${searchPrefixCls}-button`]: { + height: token.controlHeightLG, + }, }, - [`&-small ${searchPrefixCls}-button`]: { - height: token.controlHeightSM, + '&-small': { + [`${componentCls}-affix-wrapper, ${searchPrefixCls}-button`]: { + height: token.controlHeightSM, + }, }, '&-rtl': {