mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-27 20:49:53 +08:00
github-actions[bot]
GitHub
commit
05d107ce4d
@ -9,22 +9,22 @@ function use<T>(promise: PromiseLike<T>): T {
|
||||
}
|
||||
if (internal.status === 'rejected') {
|
||||
throw internal.reason;
|
||||
} else if (internal.status === 'pending') {
|
||||
throw internal;
|
||||
} else {
|
||||
internal.status = 'pending';
|
||||
internal.then(
|
||||
(result) => {
|
||||
internal.status = 'fulfilled';
|
||||
internal.value = result;
|
||||
},
|
||||
(reason) => {
|
||||
internal.status = 'rejected';
|
||||
internal.reason = reason;
|
||||
},
|
||||
);
|
||||
}
|
||||
if (internal.status === 'pending') {
|
||||
throw internal;
|
||||
}
|
||||
internal.status = 'pending';
|
||||
internal.then(
|
||||
(result) => {
|
||||
internal.status = 'fulfilled';
|
||||
internal.value = result;
|
||||
},
|
||||
(reason) => {
|
||||
internal.status = 'rejected';
|
||||
internal.reason = reason;
|
||||
},
|
||||
);
|
||||
throw internal;
|
||||
}
|
||||
|
||||
export default use;
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import fetch from 'cross-fetch';
|
||||
|
||||
import use from '../use';
|
||||
import FetchCache from './cache';
|
||||
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import { useLocation as useDumiLocation } from 'dumi';
|
||||
import * as React from 'react';
|
||||
import { useLocation as useDumiLocation } from 'dumi';
|
||||
|
||||
import useLocale from './useLocale';
|
||||
|
||||
function clearPath(path: string) {
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
import { HomeOutlined } from '@ant-design/icons';
|
||||
import { useLocation } from 'dumi';
|
||||
import React, { useEffect } from 'react';
|
||||
import { HomeOutlined } from '@ant-design/icons';
|
||||
import { Button, Result } from 'antd';
|
||||
import * as utils from '../../theme/utils';
|
||||
import { useLocation } from 'dumi';
|
||||
|
||||
import Link from '../../theme/common/Link';
|
||||
import * as utils from '../../theme/utils';
|
||||
|
||||
export interface NotFoundProps {
|
||||
router: {
|
||||
|
||||
@ -5,9 +5,9 @@ import { useLocation } from 'dumi';
|
||||
|
||||
import useDark from '../../../hooks/useDark';
|
||||
import useLocale from '../../../hooks/useLocale';
|
||||
import Link from '../../../theme/common/Link';
|
||||
import SiteContext from '../../../theme/slots/SiteContext';
|
||||
import * as utils from '../../../theme/utils';
|
||||
import Link from '../../../theme/common/Link';
|
||||
|
||||
const SECONDARY_LIST = [
|
||||
{
|
||||
|
||||
@ -4,9 +4,9 @@ import { createStyles } from 'antd-style';
|
||||
import { useLocation } from 'dumi';
|
||||
|
||||
import useLocale from '../../../../hooks/useLocale';
|
||||
import Link from '../../../../theme/common/Link';
|
||||
import SiteContext from '../../../../theme/slots/SiteContext';
|
||||
import * as utils from '../../../../theme/utils';
|
||||
import Link from '../../../../theme/common/Link';
|
||||
import GroupMaskLayer from '../GroupMaskLayer';
|
||||
|
||||
const ComponentsBlock = React.lazy(() => import('./ComponentsBlock'));
|
||||
|
||||
@ -5,8 +5,8 @@ import { createStyles, css } from 'antd-style';
|
||||
import useDark from '../../hooks/useDark';
|
||||
import useLocale from '../../hooks/useLocale';
|
||||
import BannerRecommends from './components/BannerRecommends';
|
||||
import PreviewBanner from './components/PreviewBanner';
|
||||
import Group from './components/Group';
|
||||
import PreviewBanner from './components/PreviewBanner';
|
||||
|
||||
const ComponentsList = React.lazy(() => import('./components/ComponentsList'));
|
||||
const DesignFramework = React.lazy(() => import('./components/DesignFramework'));
|
||||
|
||||
@ -74,7 +74,7 @@ function rehypeAntd(): UnifiedTransformer<HastRoot> {
|
||||
const code = (node.children[0] as any).value as string;
|
||||
const configRegx = /^const sandpackConfig = ([\S\s]*?});/;
|
||||
const [configString] = code.match(configRegx) || [];
|
||||
// eslint-disable-next-line no-eval
|
||||
/* biome-ignore lint/security/noGlobalEval: used in documentation */ /* eslint-disable-next-line no-eval */
|
||||
const config = configString && eval(`(${configString.replace(configRegx, '$1')})`);
|
||||
Object.keys(config || {}).forEach((key) => {
|
||||
if (typeof config[key] === 'object') {
|
||||
|
||||
@ -81,7 +81,7 @@ const IconSearch: React.FC = () => {
|
||||
if (searchKey) {
|
||||
const matchKey = searchKey
|
||||
// eslint-disable-next-line prefer-regex-literals
|
||||
.replace(new RegExp(`^<([a-zA-Z]*)\\s/>$`, 'gi'), (_, name) => name)
|
||||
.replace(/^<([a-z]*)\s\/>$/gi, (_, name) => name)
|
||||
.replace(/(Filled|Outlined|TwoTone)$/, '')
|
||||
.toLowerCase();
|
||||
iconList = iconList.filter((iconName) => iconName.toLowerCase().includes(matchKey));
|
||||
|
||||
@ -12,6 +12,7 @@ export const FilledIcon: CustomIconComponent = (props) => {
|
||||
'0c0-53-43-96-96-96z';
|
||||
return (
|
||||
<svg {...props} viewBox="0 0 1024 1024">
|
||||
<title>Filled Icon</title>
|
||||
<path d={path} />
|
||||
</svg>
|
||||
);
|
||||
@ -26,6 +27,7 @@ export const OutlinedIcon: CustomIconComponent = (props) => {
|
||||
' 12 12v680c0 6.6-5.4 12-12 12z';
|
||||
return (
|
||||
<svg {...props} viewBox="0 0 1024 1024">
|
||||
<title>Outlined Icon</title>
|
||||
<path d={path} />
|
||||
</svg>
|
||||
);
|
||||
@ -39,6 +41,7 @@ export const TwoToneIcon: CustomIconComponent = (props) => {
|
||||
'68 368 0 203.41-164.622 368-368 368z';
|
||||
return (
|
||||
<svg {...props} viewBox="0 0 1024 1024">
|
||||
<title>TwoTone Icon</title>
|
||||
<path d={path} />
|
||||
</svg>
|
||||
);
|
||||
|
||||
@ -117,6 +117,7 @@ const ImagePreview: React.FC<React.PropsWithChildren<ImagePreviewProps>> = (prop
|
||||
<div className="preview-image-title">{coverMeta.alt}</div>
|
||||
<div
|
||||
className="preview-image-description"
|
||||
// biome-ignore lint/security/noDangerouslySetInnerHtml: it's for markdown
|
||||
dangerouslySetInnerHTML={{ __html: coverMeta.description ?? '' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import { PictureOutlined } from '@ant-design/icons';
|
||||
import React from 'react';
|
||||
import { PictureOutlined } from '@ant-design/icons';
|
||||
import { Image, Tooltip, Typography } from 'antd';
|
||||
|
||||
import useLocale from '../../../hooks/useLocale';
|
||||
|
||||
const locales = {
|
||||
|
||||
@ -3,10 +3,10 @@ import { ConfigProvider, Tabs } from 'antd';
|
||||
import SourceCode from 'dumi/theme-default/builtins/SourceCode';
|
||||
import type { Tab } from 'rc-tabs/lib/interface';
|
||||
|
||||
import BunLogo from './bun';
|
||||
import NpmLogo from './npm';
|
||||
import PnpmLogo from './pnpm';
|
||||
import YarnLogo from './yarn';
|
||||
import BunLogo from './bun';
|
||||
|
||||
interface InstallProps {
|
||||
npm?: string;
|
||||
|
||||
@ -31,6 +31,7 @@ const NpmIcon: React.FC<IconProps> = (props) => {
|
||||
viewBox="0 0 16 16"
|
||||
width="1em"
|
||||
>
|
||||
<title>npm icon</title>
|
||||
<path d="M0 0v16h16v-16h-16zM13 13h-2v-8h-3v8h-5v-10h10v10z" />
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
@ -33,6 +33,7 @@ const PnpmIcon: React.FC<IconProps> = (props) => {
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
>
|
||||
<title>pnpm icon</title>
|
||||
<path d="M0 0v7.5h7.5V0zm8.25 0v7.5h7.498V0zm8.25 0v7.5H24V0zM8.25 8.25v7.5h7.498v-7.5zm8.25 0v7.5H24v-7.5zM0 16.5V24h7.5v-7.5zm8.25 0V24h7.498v-7.5zm8.25 0V24H24v-7.5z" />
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
@ -32,6 +32,7 @@ const YarnIcon: React.FC<IconProps> = (props) => {
|
||||
viewBox="0 0 496 512"
|
||||
width="1em"
|
||||
>
|
||||
<title>yarn icon</title>
|
||||
<path d="M393.9 345.2c-39 9.3-48.4 32.1-104 47.4 0 0-2.7 4-10.4 5.8-13.4 3.3-63.9 6-68.5 6.1-12.4.1-19.9-3.2-22-8.2-6.4-15.3 9.2-22 9.2-22-8.1-5-9-9.9-9.8-8.1-2.4 5.8-3.6 20.1-10.1 26.5-8.8 8.9-25.5 5.9-35.3.8-10.8-5.7.8-19.2.8-19.2s-5.8 3.4-10.5-3.6c-6-9.3-17.1-37.3 11.5-62-1.3-10.1-4.6-53.7 40.6-85.6 0 0-20.6-22.8-12.9-43.3 5-13.4 7-13.3 8.6-13.9 5.7-2.2 11.3-4.6 15.4-9.1 20.6-22.2 46.8-18 46.8-18s12.4-37.8 23.9-30.4c3.5 2.3 16.3 30.6 16.3 30.6s13.6-7.9 15.1-5c8.2 16 9.2 46.5 5.6 65.1-6.1 30.6-21.4 47.1-27.6 57.5-1.4 2.4 16.5 10 27.8 41.3 10.4 28.6 1.1 52.7 2.8 55.3.8 1.4 13.7.8 36.4-13.2 12.8-7.9 28.1-16.9 45.4-17 16.7-.5 17.6 19.2 4.9 22.2zM496 256c0 136.9-111.1 248-248 248S0 392.9 0 256 111.1 8 248 8s248 111.1 248 248zm-79.3 75.2c-1.7-13.6-13.2-23-28-22.8-22 .3-40.5 11.7-52.8 19.2-4.8 3-8.9 5.2-12.4 6.8 3.1-44.5-22.5-73.1-28.7-79.4 7.8-11.3 18.4-27.8 23.4-53.2 4.3-21.7 3-55.5-6.9-74.5-1.6-3.1-7.4-11.2-21-7.4-9.7-20-13-22.1-15.6-23.8-1.1-.7-23.6-16.4-41.4 28-12.2.9-31.3 5.3-47.5 22.8-2 2.2-5.9 3.8-10.1 5.4h.1c-8.4 3-12.3 9.9-16.9 22.3-6.5 17.4.2 34.6 6.8 45.7-17.8 15.9-37 39.8-35.7 82.5-34 36-11.8 73-5.6 79.6-1.6 11.1 3.7 19.4 12 23.8 12.6 6.7 30.3 9.6 43.9 2.8 4.9 5.2 13.8 10.1 30 10.1 6.8 0 58-2.9 72.6-6.5 6.8-1.6 11.5-4.5 14.6-7.1 9.8-3.1 36.8-12.3 62.2-28.7 18-11.7 24.2-14.2 37.6-17.4 12.9-3.2 21-15.1 19.4-28.2z" />
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
@ -401,6 +401,7 @@ createRoot(document.getElementById('container')).render(<Demo />);
|
||||
{description && (
|
||||
<div
|
||||
className="code-box-description"
|
||||
// biome-ignore lint/security/noDangerouslySetInnerHtml: it's for markdown
|
||||
dangerouslySetInnerHTML={{ __html: description }}
|
||||
/>
|
||||
)}
|
||||
|
||||
@ -80,6 +80,7 @@ const DesignPreviewer: FC<AntdPreviewerProps> = ({ children, title, description,
|
||||
{title}
|
||||
</a>
|
||||
{description && (
|
||||
// biome-ignore lint/security/noDangerouslySetInnerHtml: description is from markdown
|
||||
<div className={styles.description} dangerouslySetInnerHTML={{ __html: description }} />
|
||||
)}
|
||||
<div className={styles.copy}>
|
||||
@ -89,10 +90,10 @@ const DesignPreviewer: FC<AntdPreviewerProps> = ({ children, title, description,
|
||||
<span style={{ marginInlineStart: 8 }}>已复制，使用 Kitchen 插件即可粘贴</span>
|
||||
</div>
|
||||
) : (
|
||||
<div onClick={handleCopy} className={styles.copyTip}>
|
||||
<button type="button" onClick={handleCopy} className={styles.copyTip}>
|
||||
<SketchOutlined />
|
||||
<span style={{ marginInlineStart: 8 }}>复制 Sketch JSON</span>
|
||||
</div>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<div className={styles.demo} ref={demoRef}>
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
import React from 'react';
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons';
|
||||
import { Col, Row, Tooltip, Card, Typography } from 'antd';
|
||||
import { Card, Col, Row, Tooltip, Typography } from 'antd';
|
||||
import { createStyles } from 'antd-style';
|
||||
|
||||
import useLocale from '../../../hooks/useLocale';
|
||||
|
||||
const { Paragraph } = Typography;
|
||||
@ -22,19 +23,19 @@ const useStyle = createStyles(({ token, css }) => ({
|
||||
transform: scale(1.3);
|
||||
`,
|
||||
badge: css`
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
padding: ${token.paddingXXS}px ${token.paddingXS}px;
|
||||
color: #fff;
|
||||
font-size: ${token.fontSizeSM}px;
|
||||
line-height: 1;
|
||||
background: rgba(0, 0, 0, 0.65);
|
||||
border-radius: ${token.borderRadiusLG}px;
|
||||
box-shadow: 0 0 2px rgba(255, 255, 255, 0.2);
|
||||
display: inline-flex;
|
||||
column-gap: ${token.paddingXXS}px;
|
||||
`,
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
padding: ${token.paddingXXS}px ${token.paddingXS}px;
|
||||
color: #fff;
|
||||
font-size: ${token.fontSizeSM}px;
|
||||
line-height: 1;
|
||||
background: rgba(0, 0, 0, 0.65);
|
||||
border-radius: ${token.borderRadiusLG}px;
|
||||
box-shadow: 0 0 2px rgba(255, 255, 255, 0.2);
|
||||
display: inline-flex;
|
||||
column-gap: ${token.paddingXXS}px;
|
||||
`,
|
||||
}));
|
||||
|
||||
export type Resource = {
|
||||
|
||||
@ -3,6 +3,7 @@ import Icon from '@ant-design/icons';
|
||||
|
||||
const SVGIcon: React.FC = () => (
|
||||
<svg viewBox="0 0 15 15" fill="currentColor">
|
||||
<title>codepen icon</title>
|
||||
<path d="M14.777304,4.75062256 L7.77734505,0.0839936563 C7.60939924,-0.0279665065 7.39060662,-0.0279665065 7.22266081,0.0839936563 L0.222701813,4.75062256 C0.0836082937,4.84334851 5.66973453e-05,4.99945222 4.6875e-05,5.16662013 L4.6875e-05,9.83324903 C4.6875e-05,10.0004355 0.0836088906,10.1565596 0.222701812,10.2492466 L7.22266081,14.9158755 C7.30662908,14.9718752 7.403316,14.999875 7.50000292,14.999875 C7.59668984,14.999875 7.69337678,14.9718752 7.77734505,14.9158755 L14.777304,10.2492466 C14.9163976,10.1565206 14.9999492,10.0004169 14.999959,9.83324903 L14.999959,5.16662013 C14.9999492,4.99945222 14.9163976,4.84334851 14.777304,4.75062256 Z M7.50000292,9.23237755 L4.90139316,7.4999502 L7.50000292,5.76755409 L10.0986127,7.4999502 L7.50000292,9.23237755 Z M8,4.89905919 L8,1.43423573 L13.598561,5.16665138 L10.9999824,6.89904747 L8,4.89905919 Z M7.00000586,4.89905919 L4.00002344,6.89904747 L1.40141366,5.16665138 L7.00000586,1.43423573 L7.00000586,4.89905919 Z M3.09865372,7.4999502 L1.00004102,8.89903575 L1.00004102,6.10089589 L3.09865372,7.4999502 Z M4.00002344,8.10085292 L7.00000586,10.1008412 L7.00000586,13.5656334 L1.40141366,9.83328028 L4.00002344,8.10085292 Z M8,10.1008412 L10.9999824,8.10085292 L13.5985922,9.83328028 L8,13.5656647 L8,10.1008412 L8,10.1008412 Z M11.9013521,7.4999502 L13.9999648,6.10089589 L13.9999648,8.899067 L11.9013521,7.4999502 Z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
@ -79,6 +79,7 @@ function toReactComponent(jsonML: any[]) {
|
||||
const attr = JsonML.getAttributes(node);
|
||||
return (
|
||||
<pre key={index} className={`language-${attr.lang}`}>
|
||||
{/* biome-ignore lint/security/noDangerouslySetInnerHtml: it's for markdown */}
|
||||
<code dangerouslySetInnerHTML={{ __html: attr.highlighted }} />
|
||||
</pre>
|
||||
);
|
||||
|
||||
@ -3,6 +3,7 @@ import Icon from '@ant-design/icons';
|
||||
|
||||
const SVGIcon: React.FC = () => (
|
||||
<svg viewBox="0 0 1024 1024" fill="currentColor">
|
||||
<title>CodeSandbox Icon</title>
|
||||
<path d="M755 140.3l0.5-0.3h0.3L512 0 268.3 140h-0.3l0.8 0.4L68.6 256v512L512 1024l443.4-256V256L755 140.3z m-30 506.4v171.2L548 920.1V534.7L883.4 341v215.7l-158.4 90z m-584.4-90.6V340.8L476 534.4v385.7L300 818.5V646.7l-159.4-90.6zM511.7 280l171.1-98.3 166.3 96-336.9 194.5-337-194.6 165.7-95.7L511.7 280z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React, { useMemo } from 'react';
|
||||
import CopyToClipboard from 'react-copy-to-clipboard';
|
||||
import { message } from 'antd';
|
||||
import CopyToClipboard from 'react-copy-to-clipboard';
|
||||
|
||||
interface ColorBlockProps {
|
||||
color: string;
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import { FormattedMessage } from 'dumi';
|
||||
import React, { useMemo, useState } from 'react';
|
||||
import { Col, ColorPicker, Row } from 'antd';
|
||||
import ColorPatterns from './ColorPatterns';
|
||||
import { FormattedMessage } from 'dumi';
|
||||
|
||||
import useLocale from '../../../hooks/useLocale';
|
||||
import ColorPatterns from './ColorPatterns';
|
||||
|
||||
const primaryMinSaturation = 70; // 主色推荐最小饱和度
|
||||
const primaryMinBrightness = 70; // 主色推荐最小亮度
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import classNames from 'classnames';
|
||||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import Palette from './Palette';
|
||||
|
||||
const colors = [
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import React from 'react';
|
||||
import { generate } from '@ant-design/colors';
|
||||
import uniq from 'lodash/uniq';
|
||||
|
||||
import ColorBlock from './ColorBlock';
|
||||
|
||||
interface ColorPatternsProps {
|
||||
|
||||
@ -21,7 +21,7 @@ const gray: { [key: number]: string } = {
|
||||
const ColorStyle: React.FC = () => {
|
||||
const token = useTheme();
|
||||
|
||||
const makePalette = (color: string, index: number = 1): string => {
|
||||
const makePalette = (color: string, index = 1): string => {
|
||||
if (index <= 10) {
|
||||
return `
|
||||
.palette-${color}-${index} {
|
||||
@ -33,7 +33,7 @@ ${makePalette(color, index + 1)}
|
||||
return '';
|
||||
};
|
||||
|
||||
const makeGrayPalette = (index: number = 1): string => {
|
||||
const makeGrayPalette = (index = 1): string => {
|
||||
if (index <= 13) {
|
||||
return `
|
||||
.palette-gray-${index} {
|
||||
|
||||
@ -28,16 +28,6 @@ function matchDeprecated(v: string): MatchDeprecatedResult {
|
||||
}
|
||||
|
||||
const useStyle = createStyles(({ token, css }) => ({
|
||||
history: css`
|
||||
position: absolute;
|
||||
top: 0;
|
||||
inset-inline-end: ${token.marginXS}px;
|
||||
`,
|
||||
|
||||
li: css`
|
||||
// white-space: pre;
|
||||
`,
|
||||
|
||||
ref: css`
|
||||
margin-inline-start: ${token.marginXS}px;
|
||||
`,
|
||||
@ -75,7 +65,7 @@ export interface ComponentChangelogProps {
|
||||
|
||||
const locales = {
|
||||
cn: {
|
||||
full: '完整更新日志',
|
||||
full: '查看完整日志',
|
||||
changelog: '更新日志',
|
||||
loading: '加载中...',
|
||||
empty: '暂无更新',
|
||||
@ -213,7 +203,7 @@ const ComponentChangelog: React.FC<ComponentChangelogProps> = (props) => {
|
||||
</Typography.Title>
|
||||
<ul>
|
||||
{changelogList.map<React.ReactNode>((info, index) => (
|
||||
<li key={index} className={styles.li}>
|
||||
<li key={index}>
|
||||
<ParseChangelog {...info} styles={styles} />
|
||||
</li>
|
||||
))}
|
||||
@ -234,7 +224,6 @@ const ComponentChangelog: React.FC<ComponentChangelogProps> = (props) => {
|
||||
return (
|
||||
<>
|
||||
<Button
|
||||
className={styles.history}
|
||||
icon={<HistoryOutlined />}
|
||||
onClick={() => {
|
||||
setShow(true);
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import React from 'react';
|
||||
|
||||
import type { ComponentChangelogProps } from './ComponentChangelog';
|
||||
import ComponentChangelog from './ComponentChangelog';
|
||||
|
||||
|
||||
@ -15,6 +15,7 @@ const DirectionSvg: React.FC<DirectionIconProps> = ({ direction }) => (
|
||||
fill="currentColor"
|
||||
style={{ transform: `scaleX(${direction === 'ltr' ? '1' : '-1'})` }}
|
||||
>
|
||||
<title>Direction Icon</title>
|
||||
<path d="m14.6961816 11.6470802.0841184.0726198 2 2c.2662727.2662727.2904793.682876.0726198.9764816l-.0726198.0841184-2 2c-.2929.2929-.7677.2929-1.0606 0-.2662727-.2662727-.2904793-.682876-.0726198-.9764816l.0726198-.0841184.7196-.7197h-10.6893c-.41421 0-.75-.3358-.75-.75 0-.3796833.28215688-.6934889.64823019-.7431531l.10176981-.0068469h10.6893l-.7196-.7197c-.2929-.2929-.2929-.7677 0-1.0606.2662727-.2662727.682876-.2904793.9764816-.0726198zm-8.1961616-8.6470802c.30667 0 .58246.18671.69635.47146l3.00003 7.50004c.1538.3845-.0333.821-.41784.9749-.38459.1538-.82107-.0333-.9749-.4179l-.81142-2.0285h-2.98445l-.81142 2.0285c-.15383.3846-.59031.5717-.9749.4179-.38458-.1539-.57165-.5904-.41781-.9749l3-7.50004c.1139-.28475.38968-.47146.69636-.47146zm8.1961616 1.14705264.0841184.07261736 2 2c.2662727.26626364.2904793.68293223.0726198.97654222l-.0726198.08411778-2 2c-.2929.29289-.7677.29289-1.0606 0-.2662727-.26626364-.2904793-.68293223-.0726198-.97654222l.0726198-.08411778.7196-.7196675h-3.6893c-.4142 0-.75-.3357925-.75-.7500025 0-.3796925.2821653-.69348832.6482323-.74315087l.1017677-.00684663h3.6893l-.7196-.7196725c-.2929-.29289-.2929-.76777 0-1.06066.2662727-.26626364.682876-.29046942.9764816-.07261736zm-8.1961616 1.62238736-.89223 2.23056h1.78445z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
@ -3,6 +3,7 @@ import Icon from '@ant-design/icons';
|
||||
|
||||
const SVGIcon: React.FC<{ color?: string }> = ({ color = 'currentColor' }) => (
|
||||
<svg viewBox="0 0 1024 1024" width="1em" height="1em" fill={color}>
|
||||
<title>External Link Icon</title>
|
||||
<path d="M853.333 469.333A42.667 42.667 0 0 0 810.667 512v256A42.667 42.667 0 0 1 768 810.667H256A42.667 42.667 0 0 1 213.333 768V256A42.667 42.667 0 0 1 256 213.333h256A42.667 42.667 0 0 0 512 128H256a128 128 0 0 0-128 128v512a128 128 0 0 0 128 128h512a128 128 0 0 0 128-128V512a42.667 42.667 0 0 0-42.667-42.667z" />
|
||||
<path d="M682.667 213.333h67.413L481.707 481.28a42.667 42.667 0 0 0 0 60.587 42.667 42.667 0 0 0 60.586 0L810.667 273.92v67.413A42.667 42.667 0 0 0 853.333 384 42.667 42.667 0 0 0 896 341.333V170.667A42.667 42.667 0 0 0 853.333 128H682.667a42.667 42.667 0 0 0 0 85.333z" />
|
||||
</svg>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import type { MouseEvent, MouseEventHandler } from 'react';
|
||||
import React, { forwardRef, useLayoutEffect, useTransition } from 'react';
|
||||
import { useLocation, useNavigate, Link as DumiLink } from 'dumi';
|
||||
import { Link as DumiLink, useLocation, useNavigate } from 'dumi';
|
||||
import nprogress from 'nprogress';
|
||||
|
||||
export interface LinkProps {
|
||||
|
||||
@ -3,6 +3,7 @@ import Icon from '@ant-design/icons';
|
||||
|
||||
const SVGIcon: React.FC = () => (
|
||||
<svg viewBox="0 0 14 14" fill="currentColor">
|
||||
<title>Riddle logo</title>
|
||||
<path d="M13.8875145,13.1234844 C13.8687399,13.0691875 13.8499977,13.0329687 13.8312555,12.9786562 L11.3687445,8.83296875 C12.9187468,8.05754687 13.9640694,6.49009375 13.9640694,4.68728125 C13.9624994,2.09095312 11.7968694,0 9.10938728,0 L3.86404855,0 C3.04217572,0 2.37028902,0.648703125 2.37028902,1.44223437 L2.37028902,1.82090625 L0.746871676,1.82090625 C0.33593526,1.82090625 0,2.14526562 0,2.54203125 L0,13.4478437 C0,13.7540937 0.242191908,13.9879375 0.559368786,13.9879375 C0.615627746,13.9879375 0.67187052,13.9698281 0.72812948,13.9517187 L13.440615,13.9517187 C13.7578081,13.9517187 14,13.7178906 14,13.4116406 C14,13.321125 13.9624994,13.2125 13.8875145,13.1234844 Z M3.49061272,8.0394375 L3.49061272,2.9206875 L8.71719306,2.9206875 C9.74375723,2.9206875 10.5843723,3.73232812 10.5843723,4.7235 C10.5843723,5.71465625 9.76249942,6.5081875 8.71719306,6.5081875 L6.53280462,6.5081875 L6.53280462,6.52629688 C6.45781965,6.52629688 6.3828185,6.5625 6.3093711,6.59870313 C6.04843699,6.74354688 5.95469364,7.08598438 6.10467977,7.33792188 L8.3078104,11.0325469 L3.4906289,11.0325469 L3.4906289,8.0394375 L3.49061272,8.0394375 Z M1.1203237,12.8881406 L1.1203237,2.9206875 L2.3703052,2.9206875 L2.3703052,11.5545313 C2.3703052,11.8607813 2.61249711,12.0946094 2.92969017,12.0946094 L2.94843237,12.0946094 C2.98593295,12.1127188 3.04219191,12.1127188 3.09843468,12.1127188 L9.16563006,12.1127188 C9.48280694,12.1127188 9.72499884,11.878875 9.72499884,11.572625 L9.72499884,11.5364219 C9.76249942,11.3915938 9.74375723,11.2482813 9.66875607,11.1215469 L7.5593526,7.58835938 L8.6984185,7.58835938 C10.3406104,7.58835938 11.6843514,6.29095313 11.6843514,4.703875 C11.6843514,3.1168125 10.3406104,1.81939063 8.6984185,1.81939063 L3.4906289,1.81939063 L3.4906289,1.44073437 C3.4906289,1.24310937 3.65937341,1.08017187 3.86406474,1.08017187 L9.09061272,1.08017187 C11.143741,1.08017187 12.8234173,2.7019375 12.8234173,4.68578125 C12.8234173,6.21853125 11.8343538,7.5340625 10.4343538,8.05603125 C10.378111,8.07414063 10.3406104,8.09223438 10.2843514,8.11034375 C10.0234173,8.25517188 9.92967399,8.597625 10.0796763,8.8495625 L12.5062405,12.8881563 L1.12030751,12.8881563 L1.1203237,12.8881406 Z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
@ -5,6 +5,7 @@ const ThemeIcon: React.FC<{ className?: string }> = (props) => {
|
||||
const SVGIcon = React.useCallback(
|
||||
() => (
|
||||
<svg width={20} height={20} viewBox="0 0 24 24" fill="currentColor" {...props}>
|
||||
<title>Theme icon</title>
|
||||
<g fillRule="evenodd">
|
||||
<g fillRule="nonzero">
|
||||
<path d="M7.02 3.635l12.518 12.518a1.863 1.863 0 010 2.635l-1.317 1.318a1.863 1.863 0 01-2.635 0L3.068 7.588A2.795 2.795 0 117.02 3.635zm2.09 14.428a.932.932 0 110 1.864.932.932 0 010-1.864zm-.043-9.747L7.75 9.635l9.154 9.153 1.318-1.317-9.154-9.155zM3.52 12.473c.514 0 .931.417.931.931v.932h.932a.932.932 0 110 1.864h-.932v.931a.932.932 0 01-1.863 0l-.001-.931h-.93a.932.932 0 010-1.864h.93v-.932c0-.514.418-.931.933-.931zm15.374-3.727a1.398 1.398 0 110 2.795 1.398 1.398 0 010-2.795zM4.385 4.953a.932.932 0 000 1.317l2.046 2.047L7.75 7 5.703 4.953a.932.932 0 00-1.318 0zM14.701.36a.932.932 0 01.931.932v.931h.932a.932.932 0 010 1.864h-.933l.001.932a.932.932 0 11-1.863 0l-.001-.932h-.93a.932.932 0 110-1.864h.93v-.931a.932.932 0 01.933-.932z" />
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { css, Global } from '@emotion/react';
|
||||
import React from 'react';
|
||||
import { css, Global } from '@emotion/react';
|
||||
import { useTheme } from 'antd-style';
|
||||
|
||||
export default () => {
|
||||
@ -11,7 +11,8 @@ export default () => {
|
||||
@font-face {
|
||||
font-weight: normal;
|
||||
font-family: AlibabaPuHuiTi;
|
||||
src: url('//at.alicdn.com/t/webfont_6e11e43nfj.woff2') format('woff2'),
|
||||
src:
|
||||
url('//at.alicdn.com/t/webfont_6e11e43nfj.woff2') format('woff2'),
|
||||
url('//at.alicdn.com/t/webfont_6e11e43nfj.woff') format('woff'),
|
||||
/* chrome、firefox */ url('//at.alicdn.com/t/webfont_6e11e43nfj.ttf') format('truetype'); /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
|
||||
font-display: swap;
|
||||
@ -20,7 +21,8 @@ export default () => {
|
||||
@font-face {
|
||||
font-weight: bold;
|
||||
font-family: AlibabaPuHuiTi;
|
||||
src: url('//at.alicdn.com/t/webfont_exesdog9toj.woff2') format('woff2'),
|
||||
src:
|
||||
url('//at.alicdn.com/t/webfont_exesdog9toj.woff2') format('woff2'),
|
||||
url('//at.alicdn.com/t/webfont_exesdog9toj.woff') format('woff'),
|
||||
/* chrome、firefox */ url('//at.alicdn.com/t/webfont_exesdog9toj.ttf')
|
||||
format('truetype'); /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
|
||||
@ -32,7 +34,8 @@ export default () => {
|
||||
@font-face {
|
||||
font-weight: 900;
|
||||
font-family: 'AliPuHui';
|
||||
src: url('//at.alicdn.com/wf/webfont/exMpJIukiCms/Gsw2PSKrftc1yNWMNlXgw.woff2')
|
||||
src:
|
||||
url('//at.alicdn.com/wf/webfont/exMpJIukiCms/Gsw2PSKrftc1yNWMNlXgw.woff2')
|
||||
format('woff2'),
|
||||
url('//at.alicdn.com/wf/webfont/exMpJIukiCms/vtu73by4O2gEBcvBuLgeu.woff') format('woff');
|
||||
font-display: swap;
|
||||
|
||||
@ -153,6 +153,7 @@ const GlobalLayout: React.FC = () => {
|
||||
plain: true,
|
||||
types: 'style',
|
||||
});
|
||||
// biome-ignore lint/security/noDangerouslySetInnerHtml: only used in .dumi
|
||||
return <style data-type="antd-cssinjs" dangerouslySetInnerHTML={{ __html: styleText }} />;
|
||||
});
|
||||
|
||||
@ -166,6 +167,7 @@ const GlobalLayout: React.FC = () => {
|
||||
data-type="antd-css-var"
|
||||
data-rc-order="prepend"
|
||||
data-rc-priority="-9999"
|
||||
// biome-ignore lint/security/noDangerouslySetInnerHtml: only used in .dumi
|
||||
dangerouslySetInnerHTML={{ __html: styleText }}
|
||||
/>
|
||||
);
|
||||
@ -175,6 +177,7 @@ const GlobalLayout: React.FC = () => {
|
||||
<style
|
||||
data-sandpack="true"
|
||||
id="sandpack"
|
||||
// biome-ignore lint/security/noDangerouslySetInnerHtml: only used in .dumi
|
||||
dangerouslySetInnerHTML={{ __html: getSandpackCssText() }}
|
||||
/>
|
||||
));
|
||||
|
||||
@ -10,7 +10,7 @@ import EditButton from '../../common/EditButton';
|
||||
import Footer from '../../slots/Footer';
|
||||
import AffixTabs from './AffixTabs';
|
||||
|
||||
export type ResourceLayoutProps = PropsWithChildren<{}>;
|
||||
export type ResourceLayoutProps = PropsWithChildren<NonNullable<any>>;
|
||||
|
||||
const resourcePadding = 40;
|
||||
const articleMaxWidth = 1208;
|
||||
|
||||
@ -17,6 +17,7 @@ const JuejinLogo: React.FC<Props> = (props) => {
|
||||
viewBox="0 0 36 28"
|
||||
fill="none"
|
||||
>
|
||||
<title>Juejin logo</title>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React, { useContext, useLayoutEffect, useMemo, useState } from 'react';
|
||||
import { Col, Flex, Typography } from 'antd';
|
||||
import { Col, Flex, Space, Typography } from 'antd';
|
||||
import { createStyles } from 'antd-style';
|
||||
import classNames from 'classnames';
|
||||
import { FormattedMessage, useRouteMeta } from 'dumi';
|
||||
@ -70,25 +70,27 @@ const Content: React.FC<React.PropsWithChildren> = ({ children }) => {
|
||||
</InViewSuspense>
|
||||
<article className={classNames(styles.articleWrapper, { rtl: isRTL })}>
|
||||
{meta.frontmatter?.title ? (
|
||||
<Typography.Title style={{ fontSize: 30, position: 'relative' }}>
|
||||
<Flex gap="small">
|
||||
<div>{meta.frontmatter?.title}</div>
|
||||
<div>{meta.frontmatter?.subtitle}</div>
|
||||
{!pathname.startsWith('/components/overview') && (
|
||||
<InViewSuspense fallback={null}>
|
||||
<EditButton
|
||||
title={<FormattedMessage id="app.content.edit-page" />}
|
||||
filename={meta.frontmatter.filename}
|
||||
/>
|
||||
</InViewSuspense>
|
||||
)}
|
||||
</Flex>
|
||||
<Flex justify="space-between">
|
||||
<Typography.Title style={{ fontSize: 32, position: 'relative' }}>
|
||||
<Space>
|
||||
<span>{meta.frontmatter?.title}</span>
|
||||
<span>{meta.frontmatter?.subtitle}</span>
|
||||
{!pathname.startsWith('/components/overview') && (
|
||||
<InViewSuspense fallback={null}>
|
||||
<EditButton
|
||||
title={<FormattedMessage id="app.content.edit-page" />}
|
||||
filename={meta.frontmatter.filename}
|
||||
/>
|
||||
</InViewSuspense>
|
||||
)}
|
||||
</Space>
|
||||
</Typography.Title>
|
||||
{pathname.startsWith('/components/') && (
|
||||
<InViewSuspense fallback={null}>
|
||||
<ComponentChangelog pathname={pathname} />
|
||||
</InViewSuspense>
|
||||
)}
|
||||
</Typography.Title>
|
||||
</Flex>
|
||||
) : null}
|
||||
<InViewSuspense fallback={null}>
|
||||
<DocMeta />
|
||||
|
||||
@ -2,8 +2,8 @@ import * as React from 'react';
|
||||
import { createStyles } from 'antd-style';
|
||||
import { useLocation } from 'dumi';
|
||||
|
||||
import * as utils from '../../utils';
|
||||
import Link from '../../common/Link';
|
||||
import * as utils from '../../utils';
|
||||
|
||||
const useStyle = createStyles(({ token, css }) => {
|
||||
const { headerHeight, colorTextHeading, fontFamily, mobileMaxWidth } = token;
|
||||
|
||||
@ -11,7 +11,7 @@ export interface LangBtnProps {
|
||||
value: 1 | 2;
|
||||
pure?: boolean;
|
||||
onClick?: React.MouseEventHandler;
|
||||
['aria-label']?: string;
|
||||
'aria-label'?: string;
|
||||
}
|
||||
|
||||
const BASE_SIZE = '1.2em';
|
||||
@ -95,7 +95,13 @@ const LangBtn: React.FC<LangBtnProps> = (props) => {
|
||||
} = useStyle();
|
||||
|
||||
const node = (
|
||||
<button onClick={onClick} className={btn} key="lang-button" aria-label={props['aria-label']}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClick}
|
||||
className={btn}
|
||||
key="lang-button"
|
||||
aria-label={props['aria-label']}
|
||||
>
|
||||
<div className="btn-inner">
|
||||
{pure && (value === 1 ? label1 : label2)}
|
||||
{!pure && (
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import * as React from 'react';
|
||||
import type { DirectionType } from 'antd/es/config-provider';
|
||||
|
||||
import type { ThemeName } from '../common/ThemeSwitch';
|
||||
|
||||
export interface SiteContextProps {
|
||||
|
||||
27
.dumirc.ts
27
.dumirc.ts
@ -11,17 +11,12 @@ export default defineConfig({
|
||||
manifest: {},
|
||||
conventionRoutes: {
|
||||
// to avoid generate routes for .dumi/pages/index/components/xx
|
||||
exclude: [new RegExp('index/components/')],
|
||||
exclude: [/index\/components\//],
|
||||
},
|
||||
ssr:
|
||||
process.env.NODE_ENV === 'production'
|
||||
? {
|
||||
builder: 'mako',
|
||||
}
|
||||
: false,
|
||||
ssr: process.env.NODE_ENV === 'production' ? {} : false,
|
||||
hash: true,
|
||||
mfsu: false,
|
||||
mako: {},
|
||||
// mako: {},
|
||||
crossorigin: {},
|
||||
outputPath: '_site',
|
||||
favicons: ['https://gw.alipayobjects.com/zos/rmsportal/rlpTLlbMzTNYuZGGCVYM.png'],
|
||||
@ -65,56 +60,56 @@ export default defineConfig({
|
||||
as: 'font',
|
||||
href: '//at.alicdn.com/t/webfont_6e11e43nfj.woff2',
|
||||
type: 'font/woff2',
|
||||
crossorigin: true,
|
||||
crossorigin: 'anonymous',
|
||||
},
|
||||
{
|
||||
rel: 'prefetch',
|
||||
as: 'font',
|
||||
href: '//at.alicdn.com/t/webfont_6e11e43nfj.woff',
|
||||
type: 'font/woff',
|
||||
crossorigin: true,
|
||||
crossorigin: 'anonymous',
|
||||
},
|
||||
{
|
||||
rel: 'prefetch',
|
||||
as: 'font',
|
||||
href: '//at.alicdn.com/t/webfont_6e11e43nfj.ttf',
|
||||
type: 'font/ttf',
|
||||
crossorigin: true,
|
||||
crossorigin: 'anonymous',
|
||||
},
|
||||
{
|
||||
rel: 'prefetch',
|
||||
as: 'font',
|
||||
href: '//at.alicdn.com/t/webfont_exesdog9toj.woff2',
|
||||
type: 'font/woff2',
|
||||
crossorigin: true,
|
||||
crossorigin: 'anonymous',
|
||||
},
|
||||
{
|
||||
rel: 'prefetch',
|
||||
as: 'font',
|
||||
href: '//at.alicdn.com/t/webfont_exesdog9toj.woff',
|
||||
type: 'font/woff',
|
||||
crossorigin: true,
|
||||
crossorigin: 'anonymous',
|
||||
},
|
||||
{
|
||||
rel: 'prefetch',
|
||||
as: 'font',
|
||||
href: '//at.alicdn.com/t/webfont_exesdog9toj.ttf',
|
||||
type: 'font/ttf',
|
||||
crossorigin: true,
|
||||
crossorigin: 'anonymous',
|
||||
},
|
||||
{
|
||||
rel: 'preload',
|
||||
as: 'font',
|
||||
href: '//at.alicdn.com/wf/webfont/exMpJIukiCms/Gsw2PSKrftc1yNWMNlXgw.woff2',
|
||||
type: 'font/woff2',
|
||||
crossorigin: true,
|
||||
crossorigin: 'anonymous',
|
||||
},
|
||||
{
|
||||
rel: 'preload',
|
||||
as: 'font',
|
||||
href: '//at.alicdn.com/wf/webfont/exMpJIukiCms/vtu73by4O2gEBcvBuLgeu.woff',
|
||||
type: 'font/woff2',
|
||||
crossorigin: true,
|
||||
crossorigin: 'anonymous',
|
||||
},
|
||||
],
|
||||
headScripts: [
|
||||
|
||||
4
.lintstagedrc.json
Normal file
4
.lintstagedrc.json
Normal file
@ -0,0 +1,4 @@
|
||||
{
|
||||
"*.{ts,tsx,js,jsx,json,css}": ["biome check --write"],
|
||||
"*.{md,yml}": ["prettier --ignore-unknown --write"]
|
||||
}
|
||||
@ -5,13 +5,13 @@ CODEOWNERS
|
||||
Dockerfile.ui-test
|
||||
.dumi/tmp
|
||||
.dumi/tmp-production
|
||||
!dumi
|
||||
AUTHORS.txt
|
||||
lib/
|
||||
es/
|
||||
dist/
|
||||
_site/
|
||||
server
|
||||
.dumi/tmp
|
||||
coverage/
|
||||
CNAME
|
||||
LICENSE
|
||||
@ -30,4 +30,4 @@ components/*/*.jsx
|
||||
.eslintignore
|
||||
.history
|
||||
**/*.yml
|
||||
*.html
|
||||
*.html
|
||||
|
||||
@ -1,42 +0,0 @@
|
||||
module.exports = {
|
||||
extends: [
|
||||
'stylelint-config-standard',
|
||||
'stylelint-prettier/recommended',
|
||||
'stylelint-config-rational-order',
|
||||
],
|
||||
// 使用 stylelint 来 lint css in js? https://github.com/emotion-js/emotion/discussions/2694
|
||||
rules: {
|
||||
'function-name-case': ['lower'],
|
||||
'function-no-unknown': [
|
||||
true,
|
||||
{
|
||||
ignoreFunctions: [
|
||||
'fade',
|
||||
'fadeout',
|
||||
'tint',
|
||||
'darken',
|
||||
'ceil',
|
||||
'fadein',
|
||||
'floor',
|
||||
'unit',
|
||||
'shade',
|
||||
'lighten',
|
||||
'percentage',
|
||||
'-',
|
||||
],
|
||||
},
|
||||
],
|
||||
'import-notation': null,
|
||||
'no-descending-specificity': null,
|
||||
'no-invalid-position-at-import-rule': null,
|
||||
'declaration-empty-line-before': null,
|
||||
'keyframes-name-pattern': null,
|
||||
'custom-property-pattern': null,
|
||||
'number-max-precision': 8,
|
||||
'alpha-value-notation': 'number',
|
||||
'color-function-notation': 'legacy',
|
||||
'selector-class-pattern': null,
|
||||
'selector-id-pattern': null,
|
||||
'selector-not-notation': null,
|
||||
},
|
||||
};
|
||||
16
README.md
16
README.md
@ -6,20 +6,11 @@
|
||||
|
||||
An enterprise-class UI design language and React UI library.
|
||||
|
||||
[![CI status][github-action-image]][github-action-url]
|
||||
[![codecov][codecov-image]][codecov-url]
|
||||
[![NPM version][npm-image]][npm-url]
|
||||
[![NPM downloads][download-image]][download-url]
|
||||
[![CI status][github-action-image]][github-action-url] [![codecov][codecov-image]][codecov-url] [![NPM version][npm-image]][npm-url] [![NPM downloads][download-image]][download-url]
|
||||
|
||||
[![][bundlephobia-image]][bundlephobia-url]
|
||||
[![][bundlesize-js-image]][unpkg-js-url]
|
||||
[![FOSSA Status][fossa-image]][fossa-url]
|
||||
[![][bundlephobia-image]][bundlephobia-url] [![][bundlesize-js-image]][unpkg-js-url] [![FOSSA Status][fossa-image]][fossa-url]
|
||||
|
||||
[![Follow Twitter][twitter-image]][twitter-url]
|
||||
[![Renovate status][renovate-image]][renovate-dashboard-url]
|
||||
[![][issues-helper-image]][issues-helper-url]
|
||||
[![dumi][dumi-image]][dumi-url]
|
||||
[![Issues need help][help-wanted-image]][help-wanted-url]
|
||||
[![Follow Twitter][twitter-image]][twitter-url] [![Renovate status][renovate-image]][renovate-dashboard-url] [![][issues-helper-image]][issues-helper-url] [![dumi][dumi-image]][dumi-url] [![Issues need help][help-wanted-image]][help-wanted-url]
|
||||
|
||||
[Changelog](./CHANGELOG.en-US.md) · [Report Bug][github-issues-url] · [Request Feature][github-issues-url] · English · [中文](./README-zh_CN.md)
|
||||
|
||||
@ -50,6 +41,7 @@ An enterprise-class UI design language and React UI library.
|
||||
[dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square
|
||||
[dumi-url]: https://github.com/umijs/dumi
|
||||
[github-issues-url]: https://new-issue.ant.design
|
||||
|
||||
</div>
|
||||
|
||||
[](https://ant.design)
|
||||
|
||||
92
biome.json
92
biome.json
@ -1,8 +1,19 @@
|
||||
{
|
||||
"$schema": "https://biomejs.dev/schemas/1.0.0/schema.json",
|
||||
"files": {
|
||||
"ignore": [
|
||||
".dumi/tmp*",
|
||||
".dumi/scripts/clarity.js",
|
||||
"dist/*",
|
||||
"es/**/*",
|
||||
"lib/**/*",
|
||||
"_site/**/*",
|
||||
"node_modules",
|
||||
"server",
|
||||
"scripts/previewEditor/**/*"
|
||||
]
|
||||
},
|
||||
"formatter": {
|
||||
"enabled": true,
|
||||
"ignore": ["./dist/*", "./es/**/*", "./lib/**/*", "_site/**/*"],
|
||||
"indentStyle": "space",
|
||||
"lineWidth": 100,
|
||||
"indentWidth": 2
|
||||
@ -11,5 +22,80 @@
|
||||
"formatter": {
|
||||
"quoteStyle": "single"
|
||||
}
|
||||
}
|
||||
},
|
||||
"organizeImports": {
|
||||
"enabled": false
|
||||
},
|
||||
"linter": {
|
||||
"rules": {
|
||||
"style": {
|
||||
"useImportType": "off",
|
||||
"useNumberNamespace": "off",
|
||||
"useNodejsImportProtocol": "off",
|
||||
"noNonNullAssertion": "off",
|
||||
"noUnusedTemplateLiteral": "off"
|
||||
},
|
||||
"complexity": {
|
||||
"noUselessTypeConstraint": "off",
|
||||
"noForEach": "off"
|
||||
},
|
||||
"correctness": {
|
||||
"useExhaustiveDependencies": "off"
|
||||
},
|
||||
"suspicious": {
|
||||
"noGlobalIsNan": "off",
|
||||
"noGlobalIsFinite": "off",
|
||||
"noExplicitAny": "off",
|
||||
"noArrayIndexKey": "off",
|
||||
"noConfusingVoidType": "off",
|
||||
"noThenProperty": "off"
|
||||
},
|
||||
"performance": {
|
||||
"noDelete": "off",
|
||||
"noAccumulatingSpread": "off"
|
||||
},
|
||||
"a11y": {
|
||||
"useKeyWithClickEvents": "off"
|
||||
}
|
||||
}
|
||||
},
|
||||
"overrides": [
|
||||
{
|
||||
"include": ["**/*.test.ts", "**/*.test.tsx", "tests/**/*", "scripts/**/*", ".dumi/**/*"],
|
||||
"linter": {
|
||||
"rules": {
|
||||
"style": {
|
||||
"noParameterAssign": "off"
|
||||
},
|
||||
"suspicious": {
|
||||
"noThenProperty": "off",
|
||||
"noImplicitAnyLet": "off"
|
||||
},
|
||||
"complexity": {
|
||||
"noUselessFragments": "off"
|
||||
},
|
||||
"a11y": {
|
||||
"useValidAnchor": "off",
|
||||
"useAnchorContent": "off",
|
||||
"useKeyWithClickEvents": "off"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"include": ["components/*/demo/*"],
|
||||
"linter": {
|
||||
"rules": {
|
||||
"correctness": {
|
||||
"noVoidTypeReturn": "off"
|
||||
},
|
||||
"a11y": {
|
||||
"useValidAnchor": "off",
|
||||
"useAnchorContent": "off",
|
||||
"useKeyWithClickEvents": "off"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -8,7 +8,7 @@ import { convertLegacyProps } from '../button/buttonHelpers';
|
||||
export interface ActionButtonProps {
|
||||
type?: LegacyButtonType;
|
||||
actionFn?: (...args: any[]) => any | PromiseLike<any>;
|
||||
close?: Function;
|
||||
close?: (...args: any[]) => void;
|
||||
autoFocus?: boolean;
|
||||
prefixCls: string;
|
||||
buttonProps?: ButtonProps;
|
||||
@ -22,8 +22,8 @@ export interface ActionButtonProps {
|
||||
isSilent?: () => boolean;
|
||||
}
|
||||
|
||||
function isThenable<T extends any>(thing?: PromiseLike<T>): boolean {
|
||||
return !!(thing && thing.then);
|
||||
function isThenable<T>(thing?: PromiseLike<T>): boolean {
|
||||
return !!thing?.then;
|
||||
}
|
||||
|
||||
const ActionButton: React.FC<ActionButtonProps> = (props) => {
|
||||
|
||||
27
components/_util/ContextIsolator.tsx
Normal file
27
components/_util/ContextIsolator.tsx
Normal file
@ -0,0 +1,27 @@
|
||||
import React from 'react';
|
||||
|
||||
import { NoFormStyle } from '../form/context';
|
||||
import { NoCompactStyle } from '../space/Compact';
|
||||
|
||||
const ContextIsolator: React.FC<
|
||||
Readonly<React.PropsWithChildren<Partial<Record<'space' | 'form', boolean>>>>
|
||||
> = (props) => {
|
||||
const { space, form, children } = props;
|
||||
if (children === undefined || children === null) {
|
||||
return null;
|
||||
}
|
||||
let result: React.ReactNode = children;
|
||||
if (form) {
|
||||
result = (
|
||||
<NoFormStyle override status>
|
||||
{result}
|
||||
</NoFormStyle>
|
||||
);
|
||||
}
|
||||
if (space) {
|
||||
result = <NoCompactStyle>{result}</NoCompactStyle>;
|
||||
}
|
||||
return result;
|
||||
};
|
||||
|
||||
export default ContextIsolator;
|
||||
@ -1,15 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import { NoFormStyle } from '../form/context';
|
||||
import { NoCompactStyle } from '../space/Compact';
|
||||
|
||||
const getInputAddon = (addon: React.ReactNode): React.ReactNode =>
|
||||
addon ? (
|
||||
<NoCompactStyle>
|
||||
<NoFormStyle override status>
|
||||
{addon}
|
||||
</NoFormStyle>
|
||||
</NoCompactStyle>
|
||||
) : null;
|
||||
|
||||
export default getInputAddon;
|
||||
14
components/_util/__tests__/ContextIsolator.test.tsx
Normal file
14
components/_util/__tests__/ContextIsolator.test.tsx
Normal file
@ -0,0 +1,14 @@
|
||||
import React from 'react';
|
||||
|
||||
import { render } from '../../../tests/utils';
|
||||
import ContextIsolator from '../ContextIsolator';
|
||||
|
||||
describe('ContextIsolator component', () => {
|
||||
it('ContextIsolator should work when Children is null', () => {
|
||||
[undefined, null].forEach((item) => {
|
||||
expect(() => {
|
||||
render(<ContextIsolator>{item}</ContextIsolator>);
|
||||
}).not.toThrow();
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -1,10 +1,11 @@
|
||||
// eslint-disable-next-line import/prefer-default-export
|
||||
/* eslint-disable */
|
||||
export function easeInOutCubic(t: number, b: number, c: number, d: number) {
|
||||
const cc = c - b;
|
||||
// biome-ignore lint: it is a common easing function
|
||||
t /= d / 2;
|
||||
if (t < 1) {
|
||||
return (cc / 2) * t * t * t + b;
|
||||
}
|
||||
// eslint-disable-next-line no-return-assign
|
||||
// biome-ignore lint: it is a common easing function
|
||||
return (cc / 2) * ((t -= 2) * t * t + 2) + b;
|
||||
}
|
||||
|
||||
@ -19,7 +19,7 @@ const getScroll = (target: HTMLElement | Window | Document | null): number => {
|
||||
// `{ documentElement: { scrollLeft: 200, scrollTop: 400 } }`,
|
||||
// the program may falls into this branch.
|
||||
// Check the corresponding tests for details. Don't sure what is the real scenario this happens.
|
||||
// eslint-disable-next-line dot-notation
|
||||
/* biome-ignore lint/complexity/useLiteralKeys: target is a never type */ /* eslint-disable-next-line dot-notation */
|
||||
result = target['scrollTop'];
|
||||
}
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@ import * as React from 'react';
|
||||
|
||||
export default function usePatchElement(): [
|
||||
React.ReactElement[],
|
||||
(element: React.ReactElement) => Function,
|
||||
(element: React.ReactElement) => () => void,
|
||||
] {
|
||||
const [elements, setElements] = React.useState<React.ReactElement[]>([]);
|
||||
|
||||
|
||||
@ -11,7 +11,7 @@ const getCurrentHeight: MotionEventHandler = (node) => ({ height: node ? node.of
|
||||
const skipOpacityTransition: MotionEndEventHandler = (_, event: MotionEvent) =>
|
||||
event?.deadline === true || (event as TransitionEvent).propertyName === 'height';
|
||||
|
||||
const initCollapseMotion = (rootCls: string = 'ant'): CSSMotionProps => ({
|
||||
const initCollapseMotion = (rootCls = 'ant'): CSSMotionProps => ({
|
||||
motionName: `${rootCls}-motion-collapse`,
|
||||
onAppearStart: getCollapsedHeight,
|
||||
onEnterStart: getCollapsedHeight,
|
||||
|
||||
@ -6,7 +6,7 @@ export function isFragment(child: any): boolean {
|
||||
return child && React.isValidElement(child) && child.type === React.Fragment;
|
||||
}
|
||||
|
||||
type RenderProps = AnyObject | ((originProps: AnyObject) => AnyObject | void);
|
||||
type RenderProps = AnyObject | ((originProps: AnyObject) => AnyObject | undefined);
|
||||
|
||||
export const replaceElement = <P>(
|
||||
element: React.ReactNode,
|
||||
|
||||
@ -67,7 +67,7 @@ export default function useResponsiveObserver() {
|
||||
|
||||
// To avoid repeat create instance, we add `useMemo` here.
|
||||
return React.useMemo(() => {
|
||||
const subscribers = new Map<Number, SubscribeFunc>();
|
||||
const subscribers = new Map<number, SubscribeFunc>();
|
||||
let subUid = -1;
|
||||
let screens = {};
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import { genComponentStyleHook } from '../../theme/internal';
|
||||
import type { FullToken, GenerateStyle } from '../../theme/internal';
|
||||
|
||||
// biome-ignore lint/suspicious/noEmptyInterface: ComponentToken need to be empty by default
|
||||
export interface ComponentToken {}
|
||||
|
||||
export interface WaveToken extends FullToken<'Wave'> {}
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
export function isNotGrey(color: string) {
|
||||
// eslint-disable-next-line no-useless-escape
|
||||
const match = (color || '').match(/rgba?\((\d*), (\d*), (\d*)(, [\d.]*)?\)/);
|
||||
// biome-ignore lint/complexity/useOptionalChain: this is way is more simple
|
||||
if (match && match[1] && match[2] && match[3]) {
|
||||
return !(match[1] === match[2] && match[2] === match[3]);
|
||||
}
|
||||
|
||||
@ -7,8 +7,8 @@ import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled';
|
||||
import InfoCircleFilled from '@ant-design/icons/InfoCircleFilled';
|
||||
import classNames from 'classnames';
|
||||
import CSSMotion from 'rc-motion';
|
||||
import { composeRef } from 'rc-util/lib/ref';
|
||||
import pickAttrs from 'rc-util/lib/pickAttrs';
|
||||
import { composeRef } from 'rc-util/lib/ref';
|
||||
|
||||
import type { ClosableType } from '../_util/hooks/useClosable';
|
||||
import { replaceElement } from '../_util/reactNode';
|
||||
|
||||
@ -31,7 +31,7 @@ class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundarySta
|
||||
render() {
|
||||
const { message, description, id, children } = this.props;
|
||||
const { error, info } = this.state;
|
||||
const componentStack = info && info.componentStack ? info.componentStack : null;
|
||||
const componentStack = info?.componentStack || null;
|
||||
const errorMessage = typeof message === 'undefined' ? (error || '').toString() : message;
|
||||
const errorDescription = typeof description === 'undefined' ? componentStack : description;
|
||||
if (error) {
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -2,7 +2,7 @@ import React from 'react';
|
||||
import { Alert, Button, Space } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Space direction="vertical" style={{ width: '100%' }}>
|
||||
<>
|
||||
<Alert
|
||||
message="Success Tips"
|
||||
type="success"
|
||||
@ -14,6 +14,7 @@ const App: React.FC = () => (
|
||||
}
|
||||
closable
|
||||
/>
|
||||
<br />
|
||||
<Alert
|
||||
message="Error Text"
|
||||
showIcon
|
||||
@ -25,6 +26,7 @@ const App: React.FC = () => (
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
<br />
|
||||
<Alert
|
||||
message="Warning Text"
|
||||
type="warning"
|
||||
@ -37,6 +39,7 @@ const App: React.FC = () => (
|
||||
}
|
||||
closable
|
||||
/>
|
||||
<br />
|
||||
<Alert
|
||||
message="Info Text"
|
||||
description="Info Description Info Description Info Description Info Description"
|
||||
@ -53,7 +56,7 @@ const App: React.FC = () => (
|
||||
}
|
||||
closable
|
||||
/>
|
||||
</Space>
|
||||
</>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -1,17 +1,20 @@
|
||||
import React from 'react';
|
||||
import { Alert, Space } from 'antd';
|
||||
import { Alert } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Space direction="vertical" style={{ width: '100%' }}>
|
||||
<>
|
||||
<Alert message="Warning text" banner />
|
||||
<br />
|
||||
<Alert
|
||||
message="Very long warning text warning text text text text text text text"
|
||||
banner
|
||||
closable
|
||||
/>
|
||||
<br />
|
||||
<Alert showIcon={false} message="Warning text without icon" banner />
|
||||
<br />
|
||||
<Alert type="error" message="Error text" banner />
|
||||
</Space>
|
||||
</>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -1,19 +1,20 @@
|
||||
import React from 'react';
|
||||
import { CloseSquareFilled } from '@ant-design/icons';
|
||||
import { Alert, Space } from 'antd';
|
||||
import { Alert } from 'antd';
|
||||
|
||||
const onClose = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
|
||||
console.log(e, 'I was closed.');
|
||||
};
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Space direction="vertical" style={{ width: '100%' }}>
|
||||
<>
|
||||
<Alert
|
||||
message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
|
||||
type="warning"
|
||||
closable
|
||||
onClose={onClose}
|
||||
/>
|
||||
<br />
|
||||
<Alert
|
||||
message="Error Text"
|
||||
description="Error Description Error Description Error Description Error Description Error Description Error Description"
|
||||
@ -21,6 +22,7 @@ const App: React.FC = () => (
|
||||
closable
|
||||
onClose={onClose}
|
||||
/>
|
||||
<br />
|
||||
<Alert
|
||||
message="Error Text"
|
||||
description="Error Description Error Description Error Description Error Description Error Description Error Description"
|
||||
@ -31,7 +33,7 @@ const App: React.FC = () => (
|
||||
}}
|
||||
onClose={onClose}
|
||||
/>
|
||||
</Space>
|
||||
</>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -1,16 +1,21 @@
|
||||
import React from 'react';
|
||||
import { SmileOutlined } from '@ant-design/icons';
|
||||
import { Alert, Space } from 'antd';
|
||||
import { Alert } from 'antd';
|
||||
|
||||
const icon = <SmileOutlined />;
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Space direction="vertical" style={{ width: '100%' }}>
|
||||
<>
|
||||
<Alert icon={icon} message="showIcon = false" type="success" />
|
||||
<br />
|
||||
<Alert icon={icon} message="Success Tips" type="success" showIcon />
|
||||
<br />
|
||||
<Alert icon={icon} message="Informational Notes" type="info" showIcon />
|
||||
<br />
|
||||
<Alert icon={icon} message="Warning" type="warning" showIcon />
|
||||
<br />
|
||||
<Alert icon={icon} message="Error" type="error" showIcon />
|
||||
<br />
|
||||
<Alert
|
||||
icon={icon}
|
||||
message="Success Tips"
|
||||
@ -18,6 +23,7 @@ const App: React.FC = () => (
|
||||
type="success"
|
||||
showIcon
|
||||
/>
|
||||
<br />
|
||||
<Alert
|
||||
icon={icon}
|
||||
message="Informational Notes"
|
||||
@ -25,6 +31,7 @@ const App: React.FC = () => (
|
||||
type="info"
|
||||
showIcon
|
||||
/>
|
||||
<br />
|
||||
<Alert
|
||||
icon={icon}
|
||||
message="Warning"
|
||||
@ -32,6 +39,7 @@ const App: React.FC = () => (
|
||||
type="warning"
|
||||
showIcon
|
||||
/>
|
||||
<br />
|
||||
<Alert
|
||||
icon={icon}
|
||||
message="Error"
|
||||
@ -39,7 +47,7 @@ const App: React.FC = () => (
|
||||
type="error"
|
||||
showIcon
|
||||
/>
|
||||
</Space>
|
||||
</>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -1,29 +1,32 @@
|
||||
import React from 'react';
|
||||
import { Alert, Space } from 'antd';
|
||||
import { Alert } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Space direction="vertical" style={{ width: '100%' }}>
|
||||
<>
|
||||
<Alert
|
||||
message="Success Text"
|
||||
description="Success Description Success Description Success Description"
|
||||
type="success"
|
||||
/>
|
||||
<br />
|
||||
<Alert
|
||||
message="Info Text"
|
||||
description="Info Description Info Description Info Description Info Description"
|
||||
type="info"
|
||||
/>
|
||||
<br />
|
||||
<Alert
|
||||
message="Warning Text"
|
||||
description="Warning Description Warning Description Warning Description Warning Description"
|
||||
type="warning"
|
||||
/>
|
||||
<br />
|
||||
<Alert
|
||||
message="Error Text"
|
||||
description="Error Description Error Description Error Description Error Description"
|
||||
type="error"
|
||||
/>
|
||||
</Space>
|
||||
</>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -1,24 +1,30 @@
|
||||
import React from 'react';
|
||||
import { Alert, Space } from 'antd';
|
||||
import { Alert } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Space direction="vertical" style={{ width: '100%' }}>
|
||||
<>
|
||||
<Alert message="Success Tips" type="success" showIcon />
|
||||
<br />
|
||||
<Alert message="Informational Notes" type="info" showIcon />
|
||||
<br />
|
||||
<Alert message="Warning" type="warning" showIcon closable />
|
||||
<br />
|
||||
<Alert message="Error" type="error" showIcon />
|
||||
<br />
|
||||
<Alert
|
||||
message="Success Tips"
|
||||
description="Detailed description and advice about successful copywriting."
|
||||
type="success"
|
||||
showIcon
|
||||
/>
|
||||
<br />
|
||||
<Alert
|
||||
message="Informational Notes"
|
||||
description="Additional description and information about copywriting."
|
||||
type="info"
|
||||
showIcon
|
||||
/>
|
||||
<br />
|
||||
<Alert
|
||||
message="Warning"
|
||||
description="This is a warning notice about copywriting."
|
||||
@ -26,13 +32,14 @@ const App: React.FC = () => (
|
||||
showIcon
|
||||
closable
|
||||
/>
|
||||
<br />
|
||||
<Alert
|
||||
message="Error"
|
||||
description="This is an error message about copywriting."
|
||||
type="error"
|
||||
showIcon
|
||||
/>
|
||||
</Space>
|
||||
</>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Alert, Space, Switch } from 'antd';
|
||||
import { Alert, Switch } from 'antd';
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [visible, setVisible] = useState(true);
|
||||
@ -9,13 +9,13 @@ const App: React.FC = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<Space direction="vertical" style={{ width: '100%' }}>
|
||||
<>
|
||||
{visible && (
|
||||
<Alert message="Alert Message Text" type="success" closable afterClose={handleClose} />
|
||||
)}
|
||||
<p>click the close button to see the effect</p>
|
||||
<Switch onChange={setVisible} checked={visible} disabled={visible} />
|
||||
</Space>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -1,13 +1,16 @@
|
||||
import React from 'react';
|
||||
import { Alert, Space } from 'antd';
|
||||
import { Alert } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Space direction="vertical" style={{ width: '100%' }}>
|
||||
<>
|
||||
<Alert message="Success Text" type="success" />
|
||||
<br />
|
||||
<Alert message="Info Text" type="info" />
|
||||
<br />
|
||||
<Alert message="Warning Text" type="warning" />
|
||||
<br />
|
||||
<Alert message="Error Text" type="error" />
|
||||
</Space>
|
||||
</>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -85,7 +85,7 @@ export const genBaseStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSO
|
||||
lineHeight: 0,
|
||||
},
|
||||
|
||||
[`&-description`]: {
|
||||
'&-description': {
|
||||
display: 'none',
|
||||
fontSize,
|
||||
lineHeight,
|
||||
@ -204,7 +204,7 @@ export const genActionStyle: GenerateStyle<AlertToken> = (token: AlertToken): CS
|
||||
|
||||
return {
|
||||
[componentCls]: {
|
||||
[`&-action`]: {
|
||||
'&-action': {
|
||||
marginInlineStart: marginXS,
|
||||
},
|
||||
|
||||
|
||||
@ -36,8 +36,7 @@ function getOffsetTop(element: HTMLElement, container: AnchorContainer): number
|
||||
|
||||
if (rect.width || rect.height) {
|
||||
if (container === window) {
|
||||
container = element.ownerDocument!.documentElement!;
|
||||
return rect.top - container.clientTop;
|
||||
return rect.top - element.ownerDocument!.documentElement!.clientTop;
|
||||
}
|
||||
return rect.top - (container as HTMLElement).getBoundingClientRect().top;
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import { SmileOutlined } from '@ant-design/icons';
|
||||
import type { NotificationConfig } from 'antd/es/notification/interface';
|
||||
import ConfigProvider from 'antd/es/config-provider';
|
||||
import type { NotificationConfig } from 'antd/es/notification/interface';
|
||||
|
||||
import App from '..';
|
||||
import mountTest from '../../../tests/shared/mountTest';
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
|
||||
import { genStyleHooks } from '../../theme/internal';
|
||||
|
||||
export type ComponentToken = {};
|
||||
// biome-ignore lint/suspicious/noEmptyInterface: ComponentToken need to be empty by default
|
||||
export interface ComponentToken {}
|
||||
|
||||
interface AppToken extends FullToken<'App'> {}
|
||||
|
||||
|
||||
@ -757,6 +757,9 @@ exports[`renders components/auto-complete/demo/form-debug.tsx extend context cor
|
||||
width="64"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>
|
||||
Simple Empty
|
||||
</title>
|
||||
<g
|
||||
fill="none"
|
||||
fill-rule="evenodd"
|
||||
@ -905,6 +908,9 @@ exports[`renders components/auto-complete/demo/form-debug.tsx extend context cor
|
||||
width="64"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>
|
||||
Simple Empty
|
||||
</title>
|
||||
<g
|
||||
fill="none"
|
||||
fill-rule="evenodd"
|
||||
@ -1191,6 +1197,9 @@ exports[`renders components/auto-complete/demo/form-debug.tsx extend context cor
|
||||
width="64"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>
|
||||
Simple Empty
|
||||
</title>
|
||||
<g
|
||||
fill="none"
|
||||
fill-rule="evenodd"
|
||||
@ -1407,6 +1416,9 @@ exports[`renders components/auto-complete/demo/form-debug.tsx extend context cor
|
||||
width="64"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>
|
||||
Simple Empty
|
||||
</title>
|
||||
<g
|
||||
fill="none"
|
||||
fill-rule="evenodd"
|
||||
@ -1636,6 +1648,9 @@ exports[`renders components/auto-complete/demo/form-debug.tsx extend context cor
|
||||
width="64"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>
|
||||
Simple Empty
|
||||
</title>
|
||||
<g
|
||||
fill="none"
|
||||
fill-rule="evenodd"
|
||||
|
||||
@ -45,8 +45,8 @@ export interface AutoCompleteProps<
|
||||
popupMatchSelectWidth?: boolean | number;
|
||||
}
|
||||
|
||||
function isSelectOptionOrSelectOptGroup(child: any): Boolean {
|
||||
return child && child.type && (child.type.isSelectOption || child.type.isSelectOptGroup);
|
||||
function isSelectOptionOrSelectOptGroup(child: any): boolean {
|
||||
return child?.type && (child.type.isSelectOption || child.type.isSelectOptGroup);
|
||||
}
|
||||
|
||||
const AutoComplete: React.ForwardRefRenderFunction<RefSelectProps, AutoCompleteProps> = (
|
||||
|
||||
@ -112,7 +112,7 @@ const genBaseStyle: GenerateStyle<AvatarToken> = (token) => {
|
||||
background: avatarBg,
|
||||
border: `${unit(lineWidth)} ${lineType} transparent`,
|
||||
|
||||
[`&-image`]: {
|
||||
'&-image': {
|
||||
background: 'transparent',
|
||||
},
|
||||
|
||||
@ -122,11 +122,11 @@ const genBaseStyle: GenerateStyle<AvatarToken> = (token) => {
|
||||
|
||||
...avatarSizeStyle(containerSize, textFontSize, borderRadius),
|
||||
|
||||
[`&-lg`]: {
|
||||
'&-lg': {
|
||||
...avatarSizeStyle(containerSizeLG, textFontSizeLG, borderRadiusLG),
|
||||
},
|
||||
|
||||
[`&-sm`]: {
|
||||
'&-sm': {
|
||||
...avatarSizeStyle(containerSizeSM, textFontSizeSM, borderRadiusSM),
|
||||
},
|
||||
|
||||
@ -151,7 +151,7 @@ const genGroupStyle: GenerateStyle<AvatarToken> = (token) => {
|
||||
borderColor: groupBorderColor,
|
||||
},
|
||||
|
||||
[`> *:not(:first-child)`]: {
|
||||
'> *:not(:first-child)': {
|
||||
marginInlineStart: groupOverlapping,
|
||||
},
|
||||
},
|
||||
|
||||
@ -40,7 +40,7 @@ const BackTop: React.FC<BackTopProps> = (props) => {
|
||||
const ref = React.useRef<HTMLDivElement>(null);
|
||||
|
||||
const getDefaultTarget = (): HTMLElement | Document | Window =>
|
||||
ref.current && ref.current.ownerDocument ? ref.current.ownerDocument : window;
|
||||
ref.current?.ownerDocument || window;
|
||||
|
||||
const handleScroll = throttleByAnimationFrame(
|
||||
(e: React.UIEvent<HTMLElement, UIEvent> | { target: any }) => {
|
||||
|
||||
@ -70,7 +70,7 @@ const ScrollNumber = React.forwardRef<HTMLElement, ScrollNumberProps>((props, re
|
||||
// allow specify the border
|
||||
// mock border-color by box-shadow for compatible with old usage:
|
||||
// <Badge count={4} style={{ backgroundColor: '#fff', color: '#999', borderColor: '#d9d9d9' }} />
|
||||
if (style && style.borderColor) {
|
||||
if (style?.borderColor) {
|
||||
newProps.style = {
|
||||
...style,
|
||||
boxShadow: `0 0 0 1px ${style.borderColor} inset`,
|
||||
|
||||
@ -83,7 +83,7 @@ const genBreadcrumbStyle: GenerateStyle<BreadcrumbToken, CSSObject> = (token) =>
|
||||
...genFocusStyle(token),
|
||||
},
|
||||
|
||||
[`li:last-child`]: {
|
||||
'li:last-child': {
|
||||
color: token.lastItemColor,
|
||||
},
|
||||
|
||||
|
||||
@ -401,9 +401,11 @@ describe('Button', () => {
|
||||
promiseCache.resolve = resolve;
|
||||
});
|
||||
throw promiseCache.promise;
|
||||
} else if (freeze) {
|
||||
}
|
||||
if (freeze) {
|
||||
throw promiseCache.promise;
|
||||
} else if (promiseCache.promise) {
|
||||
}
|
||||
if (promiseCache.promise) {
|
||||
promiseCache.resolve?.();
|
||||
promiseCache.promise = undefined;
|
||||
}
|
||||
|
||||
@ -33,7 +33,6 @@ const ButtonGroup: React.FC<ButtonGroupProps> = (props) => {
|
||||
case 'small':
|
||||
sizeCls = 'sm';
|
||||
break;
|
||||
case 'middle':
|
||||
default:
|
||||
// Do nothing
|
||||
}
|
||||
|
||||
@ -53,7 +53,7 @@ function splitCNCharsBySpace(child: React.ReactElement | string | number, needIn
|
||||
}
|
||||
|
||||
export function spaceChildren(children: React.ReactNode, needInserted: boolean) {
|
||||
let isPrevChildPure: boolean = false;
|
||||
let isPrevChildPure = false;
|
||||
const childList: React.ReactNode[] = [];
|
||||
|
||||
React.Children.forEach(children, (child) => {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
## zh-CN
|
||||
|
||||
按钮组合使用时，推荐使用 1 个主操作 + n 个次操作，3 个以上操作时把更多操作放到 [Dropdown.Button](/components/dropdown/#components-dropdown-demo-dropdown-button) 中组合使用。
|
||||
按钮组合使用时，推荐使用 1 个主操作 + n 个次操作，3 个以上操作时把更多操作放到 [Dropdown.Button](/components/dropdown-cn/#components-dropdown-demo-dropdown-button) 中组合使用。
|
||||
|
||||
## en-US
|
||||
|
||||
|
||||
@ -54,9 +54,7 @@ const genGroupStyle: GenerateStyle<ButtonToken> = (token) => {
|
||||
position: 'relative',
|
||||
zIndex: 1,
|
||||
|
||||
[`&:hover,
|
||||
&:focus,
|
||||
&:active`]: {
|
||||
'&:hover, &:focus, &:active': {
|
||||
zIndex: 2,
|
||||
},
|
||||
|
||||
|
||||
@ -386,7 +386,7 @@ const genTypeButtonStyle: GenerateStyle<ButtonToken> = (token) => {
|
||||
};
|
||||
|
||||
// =============================== Size ===============================
|
||||
const genButtonStyle = (token: ButtonToken, prefixCls: string = ''): CSSInterpolation => {
|
||||
const genButtonStyle = (token: ButtonToken, prefixCls = ''): CSSInterpolation => {
|
||||
const {
|
||||
componentCls,
|
||||
controlHeight,
|
||||
|
||||
@ -85,7 +85,7 @@ const useStyle = createStyles(({ token, css, cx }) => {
|
||||
weekend: css`
|
||||
color: ${token.colorError};
|
||||
&.gray {
|
||||
opacity: .4
|
||||
opacity: 0.4;
|
||||
}
|
||||
`,
|
||||
};
|
||||
|
||||
@ -4,7 +4,7 @@ import { Badge, Calendar } from 'antd';
|
||||
import type { Dayjs } from 'dayjs';
|
||||
|
||||
const getListData = (value: Dayjs) => {
|
||||
let listData;
|
||||
let listData: { type: string; content: string }[] = []; // Specify the type of listData
|
||||
switch (value.date()) {
|
||||
case 8:
|
||||
listData = [
|
||||
|
||||
@ -182,7 +182,7 @@ function generateCalendar<DateType extends AnyObject>(generateConfig: GenerateCo
|
||||
};
|
||||
result.lang = {
|
||||
...result.lang,
|
||||
...(locale || {}).lang,
|
||||
...locale?.lang,
|
||||
};
|
||||
return result;
|
||||
};
|
||||
@ -207,7 +207,7 @@ function generateCalendar<DateType extends AnyObject>(generateConfig: GenerateCo
|
||||
{String(generateConfig.getDate(date)).padStart(2, '0')}
|
||||
</div>
|
||||
<div className={`${calendarPrefixCls}-date-content`}>
|
||||
{cellRender ? cellRender(date, info) : dateCellRender && dateCellRender(date)}
|
||||
{cellRender ? cellRender(date, info) : dateCellRender?.(date)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@ -237,7 +237,7 @@ function generateCalendar<DateType extends AnyObject>(generateConfig: GenerateCo
|
||||
{months[generateConfig.getMonth(date)]}
|
||||
</div>
|
||||
<div className={`${calendarPrefixCls}-date-content`}>
|
||||
{cellRender ? cellRender(date, info) : monthCellRender && monthCellRender(date)}
|
||||
{cellRender ? cellRender(date, info) : monthCellRender?.(date)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -148,7 +148,7 @@ const Card = React.forwardRef<HTMLDivElement, CardProps>((props, ref) => {
|
||||
const isContainGrid = React.useMemo<boolean>(() => {
|
||||
let containGrid = false;
|
||||
React.Children.forEach(children as React.ReactElement, (element: JSX.Element) => {
|
||||
if (element && element.type && element.type === Grid) {
|
||||
if (element?.type === Grid) {
|
||||
containGrid = true;
|
||||
}
|
||||
});
|
||||
@ -229,14 +229,13 @@ const Card = React.forwardRef<HTMLDivElement, CardProps>((props, ref) => {
|
||||
);
|
||||
|
||||
const actionClasses = classNames(`${prefixCls}-actions`, moduleClass('actions'));
|
||||
const actionDom =
|
||||
actions && actions.length ? (
|
||||
<ActionNode
|
||||
actionClasses={actionClasses}
|
||||
actionStyle={moduleStyle('actions')}
|
||||
actions={actions}
|
||||
/>
|
||||
) : null;
|
||||
const actionDom = actions?.length ? (
|
||||
<ActionNode
|
||||
actionClasses={actionClasses}
|
||||
actionStyle={moduleStyle('actions')}
|
||||
actions={actions}
|
||||
/>
|
||||
) : null;
|
||||
|
||||
const divProps = omit(others, ['onTabChange']);
|
||||
|
||||
@ -248,7 +247,7 @@ const Card = React.forwardRef<HTMLDivElement, CardProps>((props, ref) => {
|
||||
[`${prefixCls}-bordered`]: bordered,
|
||||
[`${prefixCls}-hoverable`]: hoverable,
|
||||
[`${prefixCls}-contain-grid`]: isContainGrid,
|
||||
[`${prefixCls}-contain-tabs`]: tabList && tabList.length,
|
||||
[`${prefixCls}-contain-tabs`]: tabList?.length,
|
||||
[`${prefixCls}-${mergedSize}`]: mergedSize,
|
||||
[`${prefixCls}-type-${type}`]: !!type,
|
||||
[`${prefixCls}-rtl`]: direction === 'rtl',
|
||||
|
||||
@ -49,7 +49,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*5WDvQp_H7LUAAA
|
||||
| loading | 当卡片内容还在加载中时，可以用 loading 展示一个占位 | boolean | false | |
|
||||
| size | card 的尺寸 | `default` \| `small` | `default` | |
|
||||
| tabBarExtraContent | tab bar 上额外的元素 | ReactNode | - | |
|
||||
| tabList | 页签标题列表 | [TabItemType](/components/tabs#tabitemtype)[] | - | |
|
||||
| tabList | 页签标题列表 | [TabItemType](/components/tabs-cn#tabitemtype)[] | - | |
|
||||
| tabProps | [Tabs](/components/tabs-cn#tabs) | - | - | |
|
||||
| title | 卡片标题 | ReactNode | - | |
|
||||
| type | 卡片类型，可设置为 `inner` 或 不设置 | string | - | |
|
||||
|
||||
@ -152,7 +152,7 @@ const genCarouselStyle: GenerateStyle<CarouselToken> = (token) => {
|
||||
|
||||
const genArrowsStyle: GenerateStyle<CarouselToken> = (token) => {
|
||||
const { componentCls, motionDurationSlow, arrowSize, arrowOffset } = token;
|
||||
const arrowLength = token.calc(arrowSize).div(1.414).equal();
|
||||
const arrowLength = token.calc(arrowSize).div(Math.SQRT2).equal();
|
||||
|
||||
return [
|
||||
{
|
||||
|
||||
@ -1922,6 +1922,9 @@ exports[`renders components/cascader/demo/panel.tsx extend context correctly 1`]
|
||||
width="64"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>
|
||||
Simple Empty
|
||||
</title>
|
||||
<g
|
||||
fill="none"
|
||||
fill-rule="evenodd"
|
||||
@ -3471,6 +3474,9 @@ exports[`renders components/cascader/demo/status.tsx extend context correctly 1`
|
||||
width="64"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>
|
||||
Simple Empty
|
||||
</title>
|
||||
<g
|
||||
fill="none"
|
||||
fill-rule="evenodd"
|
||||
@ -3621,6 +3627,9 @@ exports[`renders components/cascader/demo/status.tsx extend context correctly 1`
|
||||
width="64"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>
|
||||
Simple Empty
|
||||
</title>
|
||||
<g
|
||||
fill="none"
|
||||
fill-rule="evenodd"
|
||||
|
||||
@ -903,6 +903,9 @@ exports[`renders components/cascader/demo/panel.tsx correctly 1`] = `
|
||||
width="64"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>
|
||||
Simple Empty
|
||||
</title>
|
||||
<g
|
||||
fill="none"
|
||||
fill-rule="evenodd"
|
||||
|
||||
@ -1703,6 +1703,9 @@ exports[`Cascader should render not found content 1`] = `
|
||||
width="64"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>
|
||||
Simple Empty
|
||||
</title>
|
||||
<g
|
||||
fill="none"
|
||||
fill-rule="evenodd"
|
||||
@ -1778,6 +1781,9 @@ exports[`Cascader should show not found content when options.length is 0 1`] = `
|
||||
width="64"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>
|
||||
Simple Empty
|
||||
</title>
|
||||
<g
|
||||
fill="none"
|
||||
fill-rule="evenodd"
|
||||
|
||||
@ -91,7 +91,7 @@ const getColumnsStyle: GenerateStyle<CascaderToken> = (token: CascaderToken): CS
|
||||
},
|
||||
|
||||
[`&-active:not(${cascaderMenuItemCls}-disabled)`]: {
|
||||
[`&, &:hover`]: {
|
||||
'&, &:hover': {
|
||||
fontWeight: token.optionSelectedFontWeight,
|
||||
backgroundColor: token.optionSelectedBg,
|
||||
},
|
||||
|
||||
@ -4,6 +4,7 @@ import { genFocusOutline, resetComponent } from '../../style';
|
||||
import type { FullToken, GenerateStyle } from '../../theme/internal';
|
||||
import { genStyleHooks, mergeToken } from '../../theme/internal';
|
||||
|
||||
// biome-ignore lint/suspicious/noEmptyInterface: ComponentToken need to be empty by default
|
||||
export interface ComponentToken {}
|
||||
|
||||
interface CheckboxToken extends FullToken<'Checkbox'> {
|
||||
|
||||
@ -77,13 +77,13 @@ export const genBaseStyle: GenerateStyle<CollapseToken> = (token) => {
|
||||
border: borderBase,
|
||||
borderRadius: collapsePanelBorderRadius,
|
||||
|
||||
[`&-rtl`]: {
|
||||
'&-rtl': {
|
||||
direction: 'rtl',
|
||||
},
|
||||
|
||||
[`& > ${componentCls}-item`]: {
|
||||
borderBottom: borderBase,
|
||||
[`&:last-child`]: {
|
||||
'&:last-child': {
|
||||
[`
|
||||
&,
|
||||
& > ${componentCls}-header`]: {
|
||||
@ -155,12 +155,12 @@ export const genBaseStyle: GenerateStyle<CollapseToken> = (token) => {
|
||||
padding: contentPadding,
|
||||
},
|
||||
|
||||
[`&-hidden`]: {
|
||||
'&-hidden': {
|
||||
display: 'none',
|
||||
},
|
||||
},
|
||||
|
||||
[`&-small`]: {
|
||||
'&-small': {
|
||||
[`> ${componentCls}-item`]: {
|
||||
[`> ${componentCls}-header`]: {
|
||||
padding: collapseHeaderPaddingSM,
|
||||
@ -177,7 +177,7 @@ export const genBaseStyle: GenerateStyle<CollapseToken> = (token) => {
|
||||
},
|
||||
},
|
||||
|
||||
[`&-large`]: {
|
||||
'&-large': {
|
||||
[`> ${componentCls}-item`]: {
|
||||
fontSize: fontSizeLG,
|
||||
lineHeight: lineHeightLG,
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user