mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-02 03:59:01 +08:00
github-actions[bot]
GitHub
commit
d4cdcefcfc
@ -1,11 +1,5 @@
|
||||
import React, { useContext, useEffect, useRef, useState } from 'react';
|
||||
import {
|
||||
CheckOutlined,
|
||||
LinkOutlined,
|
||||
SnippetsOutlined,
|
||||
ThunderboltOutlined,
|
||||
UpOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import { LinkOutlined, ThunderboltOutlined, UpOutlined } from '@ant-design/icons';
|
||||
import type { Project } from '@stackblitz/sdk';
|
||||
import stackblitzSdk from '@stackblitz/sdk';
|
||||
import { Alert, Badge, Space, Tooltip } from 'antd';
|
||||
@ -13,7 +7,6 @@ import { createStyles, css } from 'antd-style';
|
||||
import classNames from 'classnames';
|
||||
import { FormattedMessage, useSiteData } from 'dumi';
|
||||
import LZString from 'lz-string';
|
||||
import CopyToClipboard from 'react-copy-to-clipboard';
|
||||
|
||||
import type { AntdPreviewerProps } from '.';
|
||||
import useLocation from '../../../hooks/useLocation';
|
||||
@ -125,8 +118,6 @@ const CodePreviewer: React.FC<AntdPreviewerProps> = (props) => {
|
||||
const riddleIconRef = useRef<HTMLFormElement>(null);
|
||||
const codepenIconRef = useRef<HTMLFormElement>(null);
|
||||
const [codeExpand, setCodeExpand] = useState<boolean>(false);
|
||||
const [copyTooltipOpen, setCopyTooltipOpen] = useState<boolean>(false);
|
||||
const [copied, setCopied] = useState<boolean>(false);
|
||||
const [codeType, setCodeType] = useState<string>('tsx');
|
||||
const { theme } = useContext<SiteContextProps>(SiteContext);
|
||||
|
||||
@ -147,18 +138,6 @@ const CodePreviewer: React.FC<AntdPreviewerProps> = (props) => {
|
||||
track({ type: 'expand', demo });
|
||||
};
|
||||
|
||||
const handleCodeCopied = (demo: string) => {
|
||||
setCopied(true);
|
||||
track({ type: 'copy', demo });
|
||||
};
|
||||
|
||||
const onCopyTooltipOpenChange = (open: boolean) => {
|
||||
setCopyTooltipOpen(open);
|
||||
if (open) {
|
||||
setCopied(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (asset.id === hash.slice(1)) {
|
||||
anchorRef.current?.click();
|
||||
@ -483,17 +462,6 @@ createRoot(document.getElementById('container')).render(<Demo />);
|
||||
<ThunderboltOutlined className="code-box-stackblitz" />
|
||||
</span>
|
||||
</Tooltip>
|
||||
<CopyToClipboard text={parsedSourceCode} onCopy={() => handleCodeCopied(asset.id)}>
|
||||
<Tooltip
|
||||
open={copyTooltipOpen as boolean}
|
||||
onOpenChange={onCopyTooltipOpenChange}
|
||||
title={<FormattedMessage id={`app.demo.${copied ? 'copied' : 'copy'}`} />}
|
||||
>
|
||||
{React.createElement(copied && copyTooltipOpen ? CheckOutlined : SnippetsOutlined, {
|
||||
className: 'code-box-code-copy code-box-code-action',
|
||||
})}
|
||||
</Tooltip>
|
||||
</CopyToClipboard>
|
||||
<Tooltip title={<FormattedMessage id="app.demo.separate" />}>
|
||||
<a
|
||||
className="code-box-code-action"
|
||||
@ -564,10 +532,10 @@ createRoot(document.getElementById('container')).render(<Demo />);
|
||||
if (!style) {
|
||||
return;
|
||||
}
|
||||
const styleTag = document.createElement('style');
|
||||
const styleTag = document.createElement('style') as HTMLStyleElement;
|
||||
styleTag.type = 'text/css';
|
||||
styleTag.innerHTML = style;
|
||||
styleTag['data-demo-url'] = demoUrl;
|
||||
(styleTag as any)['data-demo-url'] = demoUrl;
|
||||
document.head.appendChild(styleTag);
|
||||
return () => {
|
||||
document.head.removeChild(styleTag);
|
||||
@ -576,7 +544,7 @@ createRoot(document.getElementById('container')).render(<Demo />);
|
||||
|
||||
if (version) {
|
||||
return (
|
||||
<Badge.Ribbon text={version} color={version.includes('<') ? 'red' : null}>
|
||||
<Badge.Ribbon text={version} color={version.includes('<') ? 'red' : undefined}>
|
||||
{codeBox}
|
||||
</Badge.Ribbon>
|
||||
);
|
||||
|
||||
@ -5,7 +5,7 @@ import { CheckOutlined, SketchOutlined } from '@ant-design/icons';
|
||||
import { nodeToGroup } from 'html2sketch';
|
||||
import copy from 'copy-to-clipboard';
|
||||
import { App } from 'antd';
|
||||
import type { AntdPreviewerProps } from '.';
|
||||
import type { AntdPreviewerProps } from './Previewer';
|
||||
|
||||
const useStyle = createStyles(({ token, css }) => ({
|
||||
wrapper: css`
|
||||
|
||||
@ -1,8 +1,43 @@
|
||||
import React, { useEffect, useMemo } from 'react';
|
||||
import { Tabs } from 'antd';
|
||||
import { Tabs, Typography, Button } from 'antd';
|
||||
import toReactElement from 'jsonml-to-react-element';
|
||||
import JsonML from 'jsonml.js/lib/utils';
|
||||
import Prism from 'prismjs';
|
||||
import { createStyles } from 'antd-style';
|
||||
|
||||
const useStyle = createStyles(({ token, css }) => {
|
||||
const { colorIcon, colorBgTextHover, antCls } = token;
|
||||
|
||||
return {
|
||||
code: css`
|
||||
position: relative;
|
||||
`,
|
||||
|
||||
copyButton: css`
|
||||
color: ${colorIcon};
|
||||
position: absolute;
|
||||
top: 0;
|
||||
inset-inline-end: 16px;
|
||||
width: 32px;
|
||||
text-align: center;
|
||||
background: ${colorBgTextHover};
|
||||
padding: 0;
|
||||
`,
|
||||
|
||||
copyIcon: css`
|
||||
${antCls}-typography-copy {
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
${antCls}-typography-copy:not(${antCls}-typography-copy-success) {
|
||||
color: ${colorIcon};
|
||||
|
||||
&:hover {
|
||||
color: ${colorIcon};
|
||||
}
|
||||
}
|
||||
`,
|
||||
};
|
||||
});
|
||||
|
||||
const LANGS = {
|
||||
tsx: 'TypeScript',
|
||||
@ -40,7 +75,7 @@ const CodePreview: React.FC<CodePreviewProps> = ({
|
||||
onCodeTypeChange,
|
||||
}) => {
|
||||
// 避免 Tabs 数量不稳定的闪动问题
|
||||
const initialCodes = {};
|
||||
const initialCodes = {} as Record<'tsx' | 'jsx' | 'style', string>;
|
||||
if (sourceCode) {
|
||||
initialCodes.tsx = '';
|
||||
}
|
||||
@ -51,7 +86,11 @@ const CodePreview: React.FC<CodePreviewProps> = ({
|
||||
initialCodes.style = '';
|
||||
}
|
||||
const [highlightedCodes, setHighlightedCodes] = React.useState(initialCodes);
|
||||
|
||||
const sourceCodes = {
|
||||
tsx: sourceCode,
|
||||
jsx: jsxCode,
|
||||
style: styleCode,
|
||||
} as Record<'tsx' | 'jsx' | 'style', string>;
|
||||
useEffect(() => {
|
||||
const codes = {
|
||||
tsx: Prism.highlight(sourceCode, Prism.languages.javascript, 'jsx'),
|
||||
@ -59,7 +98,7 @@ const CodePreview: React.FC<CodePreviewProps> = ({
|
||||
style: Prism.highlight(styleCode, Prism.languages.css, 'css'),
|
||||
};
|
||||
// 去掉空的代码类型
|
||||
Object.keys(codes).forEach((key) => {
|
||||
Object.keys(codes).forEach((key: keyof typeof codes) => {
|
||||
if (!codes[key]) {
|
||||
delete codes[key];
|
||||
}
|
||||
@ -68,12 +107,22 @@ const CodePreview: React.FC<CodePreviewProps> = ({
|
||||
}, [jsxCode, sourceCode, styleCode]);
|
||||
|
||||
const langList = Object.keys(highlightedCodes);
|
||||
|
||||
const { styles } = useStyle();
|
||||
|
||||
const items = useMemo(
|
||||
() =>
|
||||
langList.map((lang) => ({
|
||||
langList.map((lang: keyof typeof LANGS) => ({
|
||||
label: LANGS[lang],
|
||||
key: lang,
|
||||
children: toReactComponent(['pre', { lang, highlighted: highlightedCodes[lang] }]),
|
||||
children: (
|
||||
<div className={styles.code}>
|
||||
{toReactComponent(['pre', { lang, highlighted: highlightedCodes[lang] }])}
|
||||
<Button type="text" className={styles.copyButton}>
|
||||
<Typography.Text className={styles.copyIcon} copyable={{ text: sourceCodes[lang] }} />
|
||||
</Button>
|
||||
</div>
|
||||
),
|
||||
})),
|
||||
[JSON.stringify(highlightedCodes)],
|
||||
);
|
||||
@ -85,7 +134,11 @@ const CodePreview: React.FC<CodePreviewProps> = ({
|
||||
if (langList.length === 1) {
|
||||
return toReactComponent([
|
||||
'pre',
|
||||
{ lang: langList[0], highlighted: highlightedCodes[langList[0]], className: 'highlight' },
|
||||
{
|
||||
lang: langList[0],
|
||||
highlighted: highlightedCodes[langList[0] as keyof typeof LANGS],
|
||||
className: 'highlight',
|
||||
},
|
||||
]);
|
||||
}
|
||||
|
||||
|
||||
@ -56,6 +56,7 @@ const LoadingIcon: React.FC<LoadingIconProps> = (props) => {
|
||||
visible={visible}
|
||||
// We do not really use this motionName
|
||||
motionName={`${prefixCls}-loading-icon-motion`}
|
||||
motionLeave={visible}
|
||||
removeOnLeave
|
||||
onAppearStart={getCollapsedWidth}
|
||||
onAppearActive={getRealWidth}
|
||||
|
||||
@ -158,6 +158,20 @@ exports[`renders components/button/demo/chinese-chars-loading.tsx extend context
|
||||
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
|
||||
style="flex-wrap: wrap;"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-two-chinese-chars"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
<span>
|
||||
部署
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
|
||||
@ -154,6 +154,20 @@ exports[`renders components/button/demo/chinese-chars-loading.tsx correctly 1`]
|
||||
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
|
||||
style="flex-wrap:wrap"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
<span>
|
||||
部署
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { SearchOutlined } from '@ant-design/icons';
|
||||
import { resetWarned } from 'rc-util/lib/warning';
|
||||
import React, { useState } from 'react';
|
||||
import React, { Suspense, useRef, useState } from 'react';
|
||||
import { act } from 'react-dom/test-utils';
|
||||
import Button from '..';
|
||||
import mountTest from '../../../tests/shared/mountTest';
|
||||
@ -388,4 +388,44 @@ describe('Button', () => {
|
||||
expect(refHtml).toBeTruthy();
|
||||
expect(btnAttr).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should not display loading when not set', () => {
|
||||
function Suspender({ freeze }: { freeze: boolean }) {
|
||||
const promiseCache = useRef<{
|
||||
promise?: Promise<void>;
|
||||
resolve?: (value: void | PromiseLike<void>) => void;
|
||||
}>({}).current;
|
||||
if (freeze && !promiseCache.promise) {
|
||||
promiseCache.promise = new Promise((resolve) => {
|
||||
promiseCache.resolve = resolve;
|
||||
});
|
||||
throw promiseCache.promise;
|
||||
} else if (freeze) {
|
||||
throw promiseCache.promise;
|
||||
} else if (promiseCache.promise) {
|
||||
promiseCache.resolve?.();
|
||||
promiseCache.promise = undefined;
|
||||
}
|
||||
return <Button>button</Button>;
|
||||
}
|
||||
const MyCom: React.FC = () => {
|
||||
const [freeze, setFreeze] = useState(false);
|
||||
return (
|
||||
<div className="foo">
|
||||
<Button className="change-btn" onClick={() => setFreeze(!freeze)}>
|
||||
Change
|
||||
</Button>
|
||||
<Suspense fallback={<>frozen</>}>
|
||||
<Suspender freeze={freeze} />
|
||||
</Suspense>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
const { container } = render(<MyCom />);
|
||||
|
||||
fireEvent.click(container.querySelector('.change-btn')!);
|
||||
expect(container.querySelector('.foo')).toHaveTextContent('frozen');
|
||||
fireEvent.click(container.querySelector('.change-btn')!);
|
||||
expect(container.querySelectorAll('.ant-btn-loading-icon').length).toBe(0);
|
||||
});
|
||||
});
|
||||
|
||||
@ -9,6 +9,11 @@ const Text3 = () => 'Submit';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Space wrap>
|
||||
<Button>
|
||||
<span>
|
||||
<span>部署</span>
|
||||
</span>
|
||||
</Button>
|
||||
<Button loading>部署</Button>
|
||||
<Button loading>
|
||||
<Text1 />
|
||||
|
||||
@ -195,6 +195,15 @@ const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSS
|
||||
...genFocusStyle(token),
|
||||
},
|
||||
|
||||
[`&${componentCls}-two-chinese-chars::first-letter`]: {
|
||||
letterSpacing: '0.34em',
|
||||
},
|
||||
|
||||
[`&${componentCls}-two-chinese-chars > *:not(${iconCls})`]: {
|
||||
marginInlineEnd: '-0.34em',
|
||||
letterSpacing: '0.34em',
|
||||
},
|
||||
|
||||
// make `btn-icon-only` not too narrow
|
||||
[`&-icon-only${componentCls}-compact-item`]: {
|
||||
flex: 'none',
|
||||
|
||||
@ -1154,6 +1154,7 @@ const genPickerStyle: GenerateStyle<PickerToken> = (token) => {
|
||||
background: 'transparent',
|
||||
border: 0,
|
||||
borderRadius: 0,
|
||||
fontFamily: 'inherit',
|
||||
|
||||
'&:focus': {
|
||||
boxShadow: 'none',
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
## zh-CN
|
||||
|
||||
默认是移入触发菜单，可以点击鼠标右键触发。
|
||||
默认是移入触发菜单，可以点击鼠标右键触发。弹出菜单位置会跟随右键点击位置变动。
|
||||
|
||||
## en-US
|
||||
|
||||
The default trigger mode is `hover`, you can change it to `contextMenu`.
|
||||
The default trigger mode is `hover`, you can change it to `contextMenu`. The pop-up menu position will follow the right-click position.
|
||||
|
||||
@ -206,6 +206,7 @@ const getSearchInputWithoutBorderStyle: GenerateStyle<SelectToken, CSSObject> =
|
||||
border: 'none',
|
||||
outline: 'none',
|
||||
appearance: 'none',
|
||||
fontFamily: 'inherit',
|
||||
|
||||
'&::-webkit-search-cancel-button': {
|
||||
display: 'none',
|
||||
|
||||
@ -2,22 +2,26 @@
|
||||
|
||||
对某一列数据进行筛选，使用列的 `filters` 属性来指定需要筛选菜单的列，`onFilter` 用于筛选当前数据，`filterMultiple` 用于指定多选和单选。
|
||||
|
||||
使用 `defaultFilteredValue` 属性，设置列的默认筛选项。
|
||||
|
||||
对某一列数据进行排序，通过指定列的 `sorter` 函数即可启动排序按钮。`sorter: function(rowA, rowB) { ... }`， rowA、rowB 为比较的两个行数据。
|
||||
|
||||
`sortDirections: ['ascend' | 'descend']`改变每列可用的排序方式，切换排序时按数组内容依次切换，设置在 table props 上时对所有列生效。你可以通过设置 `['ascend', 'descend', 'ascend']` 禁止排序恢复到默认状态。
|
||||
|
||||
使用 `defaultSortOrder` 属性，设置列的默认排序顺序。
|
||||
|
||||
如果 `sortOrder` 或者 `defaultSortOrder` 的值为 `ascend` 或者 `descend`，则可以通过 `sorter` 的函数第三个参数获取当前排序的状态。该函数可以是 `function(a, b, sortOrder) { ... }` 的形式。
|
||||
|
||||
## en-US
|
||||
|
||||
Use `filters` to generate filter menu in columns, `onFilter` to determine filtered result, and `filterMultiple` to indicate whether it's multiple or single selection.
|
||||
|
||||
Uses `defaultFilteredValue` to make a column filtered by default.
|
||||
Use `defaultFilteredValue` to make a column filtered by default.
|
||||
|
||||
Use `sorter` to make a column sortable. `sorter` can be a function of the type `function(a, b) { ... }` for sorting data locally.
|
||||
Use `sorter` to make a column sortable. `sorter` can be a function of the type `sorter: function(rowA, rowB) { ... }` for sorting data locally.
|
||||
|
||||
`sortDirections: ['ascend' | 'descend']` defines available sort methods for each columns, effective for all columns when set on table props. You can set as `['ascend', 'descend', 'ascend']` to prevent sorter back to default status.
|
||||
|
||||
Uses `defaultSortOrder` to make a column sorted by default.
|
||||
Use `defaultSortOrder` to make a column sorted by default.
|
||||
|
||||
If a `sortOrder` or `defaultSortOrder` is specified with the value `ascend` or `descend`, you can access this value from within the function passed to the `sorter` as explained above. Such a function can take the form: `function(a, b, sortOrder) { ... }`.
|
||||
|
||||
@ -84,7 +84,7 @@ exports[`Tour Primary 1`] = `
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-tour-mask ant-tour-primary"
|
||||
class="ant-tour-mask"
|
||||
style="position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; z-index: 1001; pointer-events: none;"
|
||||
>
|
||||
<svg
|
||||
@ -157,7 +157,7 @@ exports[`Tour Primary 1`] = `
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-tour-primary ant-tour-target-placeholder"
|
||||
class="ant-tour-target-placeholder"
|
||||
style="left: -6px; top: -6px; width: 12px; height: 12px; position: fixed; pointer-events: none;"
|
||||
/>
|
||||
</div>
|
||||
@ -307,7 +307,7 @@ exports[`Tour controlled current 1`] = `
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-tour-mask ant-tour-primary"
|
||||
class="ant-tour-mask"
|
||||
style="position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; z-index: 1001; pointer-events: none;"
|
||||
>
|
||||
<svg
|
||||
@ -339,7 +339,7 @@ exports[`Tour controlled current 1`] = `
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-tour-primary ant-tour-target-placeholder"
|
||||
class="ant-tour-target-placeholder"
|
||||
style="left: 50%; top: 50%; width: 1px; height: 1px; position: fixed; pointer-events: none;"
|
||||
/>
|
||||
</div>
|
||||
@ -696,7 +696,7 @@ exports[`Tour step support Primary 1`] = `
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-tour-mask ant-tour-primary"
|
||||
class="ant-tour-mask"
|
||||
style="position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; z-index: 1001; pointer-events: none;"
|
||||
>
|
||||
<svg
|
||||
@ -769,7 +769,7 @@ exports[`Tour step support Primary 1`] = `
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-tour-primary ant-tour-target-placeholder"
|
||||
class="ant-tour-target-placeholder"
|
||||
style="left: -6px; top: -6px; width: 12px; height: 12px; position: fixed; pointer-events: none;"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -529,4 +529,38 @@ describe('Tour', () => {
|
||||
|
||||
resetIndex();
|
||||
});
|
||||
|
||||
it('first step should be primary', () => {
|
||||
const App: React.FC = () => {
|
||||
const coverBtnRef = useRef<HTMLButtonElement>(null);
|
||||
return (
|
||||
<>
|
||||
<button ref={coverBtnRef} type="button">
|
||||
target
|
||||
</button>
|
||||
|
||||
<Tour
|
||||
steps={[
|
||||
{
|
||||
title: '',
|
||||
description: '',
|
||||
target: () => coverBtnRef.current!,
|
||||
type: 'primary',
|
||||
className: 'should-be-primary',
|
||||
},
|
||||
{
|
||||
title: '',
|
||||
target: () => coverBtnRef.current!,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
render(<App />);
|
||||
fireEvent.click(screen.getByRole('button', { name: 'target' }));
|
||||
expect(document.querySelector('.should-be-primary')).toBeTruthy();
|
||||
expect(document.querySelector('.should-be-primary')).toHaveClass('ant-tour-primary');
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,60 +0,0 @@
|
||||
import { act, renderHook } from '../../../tests/utils';
|
||||
import useMergedType from '../useMergedType';
|
||||
|
||||
describe('useMergedType', () => {
|
||||
it('returns the merged type', () => {
|
||||
const { result } = renderHook(() =>
|
||||
useMergedType({
|
||||
defaultType: 'default',
|
||||
steps: [{ type: 'primary', title: 'Step 1' }],
|
||||
current: 0,
|
||||
}),
|
||||
);
|
||||
expect(result.current?.currentMergedType).toBe('primary');
|
||||
});
|
||||
|
||||
it('returns the default type', () => {
|
||||
const { result } = renderHook(() =>
|
||||
useMergedType({
|
||||
defaultType: 'default',
|
||||
steps: [],
|
||||
current: 0,
|
||||
}),
|
||||
);
|
||||
expect(result.current?.currentMergedType).toBe('default');
|
||||
});
|
||||
|
||||
it('returns the default type when index is invalid', () => {
|
||||
const { result } = renderHook(() =>
|
||||
useMergedType({
|
||||
defaultType: 'default',
|
||||
steps: [],
|
||||
current: 0,
|
||||
}),
|
||||
);
|
||||
expect(result.current?.currentMergedType).toBe('default');
|
||||
});
|
||||
|
||||
it('returns the default type when list is null', () => {
|
||||
const { result } = renderHook(() =>
|
||||
useMergedType({
|
||||
defaultType: 'default',
|
||||
}),
|
||||
);
|
||||
expect(result.current?.currentMergedType).toBe('default');
|
||||
});
|
||||
|
||||
it('returns type of new step after onChange from rc-tour', () => {
|
||||
const { result } = renderHook(() =>
|
||||
useMergedType({
|
||||
defaultType: 'default',
|
||||
steps: [{ title: 'Step 1' }, { type: 'primary', title: 'Step 1' }],
|
||||
}),
|
||||
);
|
||||
act(() => {
|
||||
result.current?.updateInnerCurrent?.(1);
|
||||
});
|
||||
|
||||
expect(result.current?.currentMergedType).toBe('primary');
|
||||
});
|
||||
});
|
||||
@ -1,4 +1,4 @@
|
||||
import React, { useContext } from 'react';
|
||||
import React, { useContext, useMemo } from 'react';
|
||||
import RCTour from '@rc-component/tour';
|
||||
import classNames from 'classnames';
|
||||
|
||||
@ -10,15 +10,12 @@ import type { TourProps, TourStepProps } from './interface';
|
||||
import TourPanel from './panelRender';
|
||||
import PurePanel from './PurePanel';
|
||||
import useStyle from './style';
|
||||
import useMergedType from './useMergedType';
|
||||
|
||||
const Tour: React.FC<TourProps> & { _InternalPanelDoNotUseOrYouWillBeFired: typeof PurePanel } = (
|
||||
props,
|
||||
) => {
|
||||
const {
|
||||
prefixCls: customizePrefixCls,
|
||||
current,
|
||||
defaultCurrent,
|
||||
type,
|
||||
rootClassName,
|
||||
indicatorsRender,
|
||||
@ -30,12 +27,16 @@ const Tour: React.FC<TourProps> & { _InternalPanelDoNotUseOrYouWillBeFired: type
|
||||
const [wrapSSR, hashId] = useStyle(prefixCls);
|
||||
const [, token] = useToken();
|
||||
|
||||
const { currentMergedType, updateInnerCurrent } = useMergedType({
|
||||
defaultType: type,
|
||||
steps,
|
||||
current,
|
||||
defaultCurrent,
|
||||
});
|
||||
const mergedSteps = useMemo(
|
||||
() =>
|
||||
steps?.map((step) => ({
|
||||
...step,
|
||||
className: classNames(step.className, {
|
||||
[`${prefixCls}-primary`]: (step.type ?? type) === 'primary',
|
||||
}),
|
||||
})),
|
||||
[steps, type],
|
||||
);
|
||||
|
||||
const builtinPlacements = getPlacements({
|
||||
arrowPointAtCenter: true,
|
||||
@ -47,7 +48,6 @@ const Tour: React.FC<TourProps> & { _InternalPanelDoNotUseOrYouWillBeFired: type
|
||||
|
||||
const customClassName = classNames(
|
||||
{
|
||||
[`${prefixCls}-primary`]: currentMergedType === 'primary',
|
||||
[`${prefixCls}-rtl`]: direction === 'rtl',
|
||||
},
|
||||
hashId,
|
||||
@ -63,23 +63,15 @@ const Tour: React.FC<TourProps> & { _InternalPanelDoNotUseOrYouWillBeFired: type
|
||||
/>
|
||||
);
|
||||
|
||||
const onStepChange = (stepCurrent: number) => {
|
||||
updateInnerCurrent(stepCurrent);
|
||||
props.onChange?.(stepCurrent);
|
||||
};
|
||||
|
||||
return wrapSSR(
|
||||
<RCTour
|
||||
{...restProps}
|
||||
rootClassName={customClassName}
|
||||
prefixCls={prefixCls}
|
||||
current={current}
|
||||
defaultCurrent={defaultCurrent}
|
||||
animated
|
||||
renderPanel={mergedRenderPanel}
|
||||
builtinPlacements={builtinPlacements}
|
||||
onChange={onStepChange}
|
||||
steps={steps}
|
||||
steps={mergedSteps}
|
||||
/>,
|
||||
);
|
||||
};
|
||||
|
||||
@ -43,7 +43,6 @@ const TourPanel: React.FC<TourPanelProps> = ({
|
||||
nextButtonProps,
|
||||
prevButtonProps,
|
||||
type: stepType,
|
||||
className,
|
||||
closeIcon: stepCloseIcon,
|
||||
} = stepProps;
|
||||
|
||||
@ -120,7 +119,7 @@ const TourPanel: React.FC<TourPanelProps> = ({
|
||||
const [contextLocale] = useLocale('Tour', defaultLocale.Tour);
|
||||
|
||||
return (
|
||||
<div className={classNames(className, `${prefixCls}-content`)}>
|
||||
<div className={`${prefixCls}-content`}>
|
||||
<div className={`${prefixCls}-inner`}>
|
||||
{closable && mergedDisplayCloseIcon}
|
||||
{coverNode}
|
||||
|
||||
@ -1,31 +0,0 @@
|
||||
import useMergedState from 'rc-util/lib/hooks/useMergedState';
|
||||
import { useLayoutEffect } from 'react';
|
||||
import type { TourProps } from './interface';
|
||||
|
||||
interface Props {
|
||||
defaultType?: string;
|
||||
steps?: TourProps['steps'];
|
||||
current?: number;
|
||||
defaultCurrent?: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* returns the merged type of a step or the default type.
|
||||
*/
|
||||
const useMergedType = ({ defaultType, steps = [], current, defaultCurrent }: Props) => {
|
||||
const [innerCurrent, updateInnerCurrent] = useMergedState<number | undefined>(defaultCurrent, {
|
||||
value: current,
|
||||
});
|
||||
|
||||
useLayoutEffect(() => {
|
||||
if (current === undefined) return;
|
||||
updateInnerCurrent(current);
|
||||
}, [current]);
|
||||
|
||||
const innerType = typeof innerCurrent === 'number' ? steps[innerCurrent]?.type : defaultType;
|
||||
const currentMergedType = innerType ?? defaultType;
|
||||
|
||||
return { currentMergedType, updateInnerCurrent };
|
||||
};
|
||||
|
||||
export default useMergedType;
|
||||
@ -38,7 +38,7 @@ author: zombieJ
|
||||
|
||||
|
||||
|
||||
也因此，我们发现可以复用这套机制，实现在在客户端侧感知组件样式是否已经注入过。
|
||||
也因此，我们发现可以复用这套机制，实现在客户端侧感知组件样式是否已经注入过。
|
||||
|
||||
## SSR HashMap
|
||||
|
||||
|
||||
@ -191,7 +191,7 @@ npm ls dayjs
|
||||
|
||||
你可以参照 [这篇文章](https://juejin.im/post/5cf65c366fb9a07eca6968f9) 或者 [这篇文章](https://www.cnblogs.com/zyl-Tara/p/10197177.html) 里的做法，利用 `mode` 和 `onPanelChange` 等方法去封装一个 `YearPicker` 等组件。
|
||||
|
||||
另外我们已经在在 [antd@4.0](https://github.com/ant-design/ant-design/issues/16911) 中直接[添加了更多相关日期组件](https://github.com/ant-design/ant-design/issues/4524#issuecomment-480576884)来支持这些需求，现在不再需要使用 `mode="year|month"`，而是直接可以用 `YearPicker` `MonthPicker`，并且 `disabledDate` 也可以正确作用于这些 Picker。
|
||||
另外我们已经在 [antd@4.0](https://github.com/ant-design/ant-design/issues/16911) 中直接[添加了更多相关日期组件](https://github.com/ant-design/ant-design/issues/4524#issuecomment-480576884)来支持这些需求，现在不再需要使用 `mode="year|month"`，而是直接可以用 `YearPicker` `MonthPicker`，并且 `disabledDate` 也可以正确作用于这些 Picker。
|
||||
|
||||
## ConfigProvider 设置 `prefixCls` 后，message/notification/Modal.confirm 生成的节点样式丢失了？
|
||||
|
||||
|
||||
@ -201,7 +201,7 @@ title: 导航
|
||||
|
||||
### 页内导航
|
||||
|
||||
信息架构中较低层级的内容导航可以使用页内导航，如果页面需要分享给他人，需在在 url 添加定位标记。
|
||||
信息架构中较低层级的内容导航可以使用页内导航，如果页面需要分享给他人，需在 url 添加定位标记。
|
||||
|
||||
#### 页头
|
||||
|
||||
|
||||
13
package.json
13
package.json
@ -147,7 +147,7 @@
|
||||
"rc-slider": "~10.3.0",
|
||||
"rc-steps": "~6.0.1",
|
||||
"rc-switch": "~4.1.0",
|
||||
"rc-table": "~7.34.0",
|
||||
"rc-table": "~7.34.4",
|
||||
"rc-tabs": "~12.12.1",
|
||||
"rc-textarea": "~1.4.0",
|
||||
"rc-tooltip": "~6.1.0",
|
||||
@ -161,7 +161,7 @@
|
||||
"devDependencies": {
|
||||
"@ant-design/compatible": "^5.1.2",
|
||||
"@ant-design/happy-work-theme": "^1.0.0",
|
||||
"@ant-design/tools": "^17.3.1",
|
||||
"@ant-design/tools": "^17.3.2",
|
||||
"@antv/g6": "^4.8.13",
|
||||
"@argos-ci/core": "^0.12.0",
|
||||
"@babel/eslint-plugin": "^7.19.1",
|
||||
@ -217,7 +217,7 @@
|
||||
"cross-fetch": "^4.0.0",
|
||||
"crypto": "^1.0.1",
|
||||
"dekko": "^0.2.1",
|
||||
"dumi": "^2.2.10",
|
||||
"dumi": "^2.3.0-alpha.4",
|
||||
"dumi-plugin-color-chunk": "^1.0.2",
|
||||
"duplicate-package-checker-webpack-plugin": "^3.0.0",
|
||||
"esbuild-loader": "^4.0.0",
|
||||
@ -237,7 +237,7 @@
|
||||
"fetch-jsonp": "^1.1.3",
|
||||
"fs-extra": "^11.0.0",
|
||||
"gh-pages": "^6.0.0",
|
||||
"glob": "10.3.6",
|
||||
"glob": "^10.3.7",
|
||||
"html2sketch": "^1.0.0",
|
||||
"http-server": "^14.0.0",
|
||||
"husky": "^8.0.1",
|
||||
@ -330,5 +330,10 @@
|
||||
"lint-staged": {
|
||||
"*.{ts,tsx,js,jsx}": "biome format --write",
|
||||
"*.{json,less,md}": "prettier --ignore-unknown --write"
|
||||
},
|
||||
"overrides": {
|
||||
"dumi-plugin-color-chunk": {
|
||||
"dumi": "^2.3.0-alpha.4"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
},
|
||||
"strictNullChecks": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"moduleResolution": "Bundler",
|
||||
"esModuleInterop": true,
|
||||
"experimentalDecorators": true,
|
||||
"jsx": "react",
|
||||
@ -22,7 +22,8 @@
|
||||
"target": "es6",
|
||||
"lib": ["dom", "es2017"],
|
||||
"skipLibCheck": true,
|
||||
"stripInternal": true
|
||||
"stripInternal": true,
|
||||
"resolvePackageJsonExports": true
|
||||
},
|
||||
"include": [".dumirc.ts", "**/*"],
|
||||
"exclude": ["node_modules", "lib", "es"]
|
||||
|
||||
Loading…
Reference in New Issue
Block a user