mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-04 00:49:39 +08:00
chore: lint (#39102)
* chore: enable tsc for demos * chore: site lint * chore: fix lint
This commit is contained in:
parent
02e2104b45
commit
ffbb19e090
@ -1,4 +1,3 @@
|
|||||||
import * as React from 'react';
|
|
||||||
import { useLocale as useDumiLocale } from 'dumi';
|
import { useLocale as useDumiLocale } from 'dumi';
|
||||||
|
|
||||||
export interface LocaleMap<Key extends string> {
|
export interface LocaleMap<Key extends string> {
|
||||||
|
@ -1,5 +1,6 @@
|
|||||||
import React, { ReactNode, useMemo } from 'react';
|
import type { ReactNode } from 'react';
|
||||||
import { MenuProps } from 'antd';
|
import React, { useMemo } from 'react';
|
||||||
|
import type { MenuProps } from 'antd';
|
||||||
import { Link, useFullSidebarData, useSidebarData } from 'dumi';
|
import { Link, useFullSidebarData, useSidebarData } from 'dumi';
|
||||||
import useLocation from './useLocation';
|
import useLocation from './useLocation';
|
||||||
|
|
||||||
@ -115,7 +116,7 @@ const useMenu = (options: UseMenuOptions = {}): [MenuProps['items'], string] =>
|
|||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
result.push(
|
result.push(
|
||||||
...group.children?.map((item) => ({
|
...(group.children?.map((item) => ({
|
||||||
label: (
|
label: (
|
||||||
<Link to={`${item.link}${search}`}>
|
<Link to={`${item.link}${search}`}>
|
||||||
{before}
|
{before}
|
||||||
@ -124,7 +125,7 @@ const useMenu = (options: UseMenuOptions = {}): [MenuProps['items'], string] =>
|
|||||||
</Link>
|
</Link>
|
||||||
),
|
),
|
||||||
key: item.link.replace(/(-cn$)/g, ''),
|
key: item.link.replace(/(-cn$)/g, ''),
|
||||||
})),
|
})) ?? []),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
return result;
|
return result;
|
||||||
|
@ -1 +1,3 @@
|
|||||||
export { default } from '../index/index';
|
import Homepage from '../index/index';
|
||||||
|
|
||||||
|
export default Homepage;
|
||||||
|
@ -1,9 +1,9 @@
|
|||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import { Button, Space, Typography } from 'antd';
|
import { Button, Space, Typography } from 'antd';
|
||||||
|
import { Link, useLocation } from 'dumi';
|
||||||
import useLocale from '../../../hooks/useLocale';
|
import useLocale from '../../../hooks/useLocale';
|
||||||
import useSiteToken from '../../../hooks/useSiteToken';
|
import useSiteToken from '../../../hooks/useSiteToken';
|
||||||
import { GroupMask } from './Group';
|
import { GroupMask } from './Group';
|
||||||
import { Link, useLocation } from 'dumi';
|
|
||||||
import * as utils from '../../../theme/utils';
|
import * as utils from '../../../theme/utils';
|
||||||
|
|
||||||
const locales = {
|
const locales = {
|
||||||
@ -25,7 +25,7 @@ export interface BannerProps {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export default function Banner({ children }: BannerProps) {
|
export default function Banner({ children }: BannerProps) {
|
||||||
const [locale, lang] = useLocale(locales);
|
const [locale] = useLocale(locales);
|
||||||
const { pathname, search } = useLocation();
|
const { pathname, search } = useLocation();
|
||||||
const { token } = useSiteToken();
|
const { token } = useSiteToken();
|
||||||
|
|
||||||
@ -82,6 +82,7 @@ export default function Banner({ children }: BannerProps) {
|
|||||||
<img
|
<img
|
||||||
style={{ position: 'absolute', right: 0, top: 240, width: 240 }}
|
style={{ position: 'absolute', right: 0, top: 240, width: 240 }}
|
||||||
src="https://gw.alipayobjects.com/zos/bmw-prod/b3b8dc41-dce8-471f-9d81-9a0204f27d03.svg"
|
src="https://gw.alipayobjects.com/zos/bmw-prod/b3b8dc41-dce8-471f-9d81-9a0204f27d03.svg"
|
||||||
|
alt="Ant Design"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<GroupMask
|
<GroupMask
|
||||||
@ -95,11 +96,13 @@ export default function Banner({ children }: BannerProps) {
|
|||||||
<img
|
<img
|
||||||
style={{ position: 'absolute', left: 0, top: 0, width: 240 }}
|
style={{ position: 'absolute', left: 0, top: 0, width: 240 }}
|
||||||
src="https://gw.alipayobjects.com/zos/bmw-prod/49f963db-b2a8-4f15-857a-270d771a1204.svg"
|
src="https://gw.alipayobjects.com/zos/bmw-prod/49f963db-b2a8-4f15-857a-270d771a1204.svg"
|
||||||
|
alt="bg"
|
||||||
/>
|
/>
|
||||||
{/* Image Left Top */}
|
{/* Image Left Top */}
|
||||||
<img
|
<img
|
||||||
style={{ position: 'absolute', right: 120, top: 0, width: 240 }}
|
style={{ position: 'absolute', right: 120, top: 0, width: 240 }}
|
||||||
src="https://gw.alipayobjects.com/zos/bmw-prod/e152223c-bcae-4913-8938-54fda9efe330.svg"
|
src="https://gw.alipayobjects.com/zos/bmw-prod/e152223c-bcae-4913-8938-54fda9efe330.svg"
|
||||||
|
alt="bg"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<Typography.Title
|
<Typography.Title
|
||||||
|
@ -1,8 +1,8 @@
|
|||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
|
import { Skeleton, Typography } from 'antd';
|
||||||
|
import { css } from '@emotion/react';
|
||||||
import type { Extra, Icon } from './util';
|
import type { Extra, Icon } from './util';
|
||||||
import useSiteToken from '../../../hooks/useSiteToken';
|
import useSiteToken from '../../../hooks/useSiteToken';
|
||||||
import { Col, Row, Card, Typography, Skeleton } from 'antd';
|
|
||||||
import { css } from '@emotion/react';
|
|
||||||
|
|
||||||
const useStyle = () => {
|
const useStyle = () => {
|
||||||
const { token } = useSiteToken();
|
const { token } = useSiteToken();
|
||||||
@ -52,20 +52,20 @@ export default function BannerRecommends({ extras = [], icons = [] }: BannerReco
|
|||||||
textAlign: 'start',
|
textAlign: 'start',
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{first3.map((extra, index) => {
|
{first3.map((extra) => {
|
||||||
if (!extra) {
|
if (!extra) {
|
||||||
return <Skeleton key={index} />;
|
return <Skeleton key={extra.title} />;
|
||||||
}
|
}
|
||||||
const icon = icons.find((icon) => icon.name === extra.source);
|
const icon = icons.find((i) => i.name === extra.source);
|
||||||
return (
|
return (
|
||||||
<a key={index} href={extra.href} target="_blank" css={style.card}>
|
<a key={extra.title} href={extra.href} target="_blank" css={style.card} rel="noreferrer">
|
||||||
<Typography.Title level={5}>{extra.title}</Typography.Title>
|
<Typography.Title level={5}>{extra.title}</Typography.Title>
|
||||||
<Typography.Paragraph type="secondary" style={{ flex: 'auto' }}>
|
<Typography.Paragraph type="secondary" style={{ flex: 'auto' }}>
|
||||||
{extra.description}
|
{extra.description}
|
||||||
</Typography.Paragraph>
|
</Typography.Paragraph>
|
||||||
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
||||||
<Typography.Text>{extra.date}</Typography.Text>
|
<Typography.Text>{extra.date}</Typography.Text>
|
||||||
{icon && <img src={icon.href} style={{ height: token.fontSize }} />}
|
{icon && <img src={icon.href} style={{ height: token.fontSize }} alt="banner" />}
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
);
|
);
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import useSiteToken from '../../../hooks/useSiteToken';
|
/* eslint-disable react/jsx-pascal-case */
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import {
|
import {
|
||||||
Space,
|
Space,
|
||||||
@ -14,6 +14,7 @@ import {
|
|||||||
import dayjs from 'dayjs';
|
import dayjs from 'dayjs';
|
||||||
import { CustomerServiceOutlined, QuestionCircleOutlined, SyncOutlined } from '@ant-design/icons';
|
import { CustomerServiceOutlined, QuestionCircleOutlined, SyncOutlined } from '@ant-design/icons';
|
||||||
import { css } from '@emotion/react';
|
import { css } from '@emotion/react';
|
||||||
|
import useSiteToken from '../../../hooks/useSiteToken';
|
||||||
import useLocale from '../../../hooks/useLocale';
|
import useLocale from '../../../hooks/useLocale';
|
||||||
|
|
||||||
const SAMPLE_CONTENT_EN =
|
const SAMPLE_CONTENT_EN =
|
||||||
|
@ -1,9 +1,9 @@
|
|||||||
import useSiteToken from '../../../hooks/useSiteToken';
|
|
||||||
import { Col, Row, Typography } from 'antd';
|
import { Col, Row, Typography } from 'antd';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { css } from '@emotion/react';
|
import { css } from '@emotion/react';
|
||||||
import useLocale from '../../../hooks/useLocale';
|
|
||||||
import { Link, useLocation } from 'dumi';
|
import { Link, useLocation } from 'dumi';
|
||||||
|
import useLocale from '../../../hooks/useLocale';
|
||||||
|
import useSiteToken from '../../../hooks/useSiteToken';
|
||||||
import * as utils from '../../../theme/utils';
|
import * as utils from '../../../theme/utils';
|
||||||
|
|
||||||
const SECONDARY_LIST = [
|
const SECONDARY_LIST = [
|
||||||
@ -150,7 +150,7 @@ export default function DesignFramework() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<Col key={index} span={8}>
|
<Col key={index} span={8}>
|
||||||
<a css={style.cardMini} target="_blank" href={url}>
|
<a css={style.cardMini} target="_blank" href={url} rel="noreferrer">
|
||||||
<img alt={title} src={img} style={{ transform: `scale(${imgScale})` }} />
|
<img alt={title} src={img} style={{ transform: `scale(${imgScale})` }} />
|
||||||
|
|
||||||
<Typography.Title
|
<Typography.Title
|
||||||
|
@ -58,7 +58,7 @@ export default function Group(props: GroupProps) {
|
|||||||
boxSizing: 'border-box',
|
boxSizing: 'border-box',
|
||||||
paddingInline: token.marginXXL,
|
paddingInline: token.marginXXL,
|
||||||
};
|
};
|
||||||
let childNode = (
|
const childNode = (
|
||||||
<>
|
<>
|
||||||
<div style={{ textAlign: 'center' }}>
|
<div style={{ textAlign: 'center' }}>
|
||||||
<Typography.Title
|
<Typography.Title
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import { Row, Col, Typography } from 'antd';
|
import { Row, Col, Typography } from 'antd';
|
||||||
import type { Recommendation } from './util';
|
|
||||||
import { css } from '@emotion/react';
|
import { css } from '@emotion/react';
|
||||||
|
import type { Recommendation } from './util';
|
||||||
import useSiteToken from '../../../hooks/useSiteToken';
|
import useSiteToken from '../../../hooks/useSiteToken';
|
||||||
|
|
||||||
const useStyle = () => {
|
const useStyle = () => {
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import useSiteToken from '../../../../hooks/useSiteToken';
|
import useSiteToken from '../../../../hooks/useSiteToken';
|
||||||
import { COLOR_IMAGES, DEFAULT_COLOR, getClosetColor } from './colorUtil';
|
import { COLOR_IMAGES, getClosetColor } from './colorUtil';
|
||||||
|
|
||||||
export interface BackgroundImageProps {
|
export interface BackgroundImageProps {
|
||||||
colorPrimary?: string;
|
colorPrimary?: string;
|
||||||
@ -38,6 +38,7 @@ export default function BackgroundImage({ colorPrimary, isLight }: BackgroundIma
|
|||||||
objectPosition: 'right top',
|
objectPosition: 'right top',
|
||||||
}}
|
}}
|
||||||
src={url}
|
src={url}
|
||||||
|
alt=""
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
|
@ -1,10 +1,12 @@
|
|||||||
import useSiteToken from '../../../../hooks/useSiteToken';
|
|
||||||
import { Input, Space, Popover } from 'antd';
|
import { Input, Space, Popover } from 'antd';
|
||||||
import React, { FC, useEffect, useState } from 'react';
|
import type { FC } from 'react';
|
||||||
|
import React, { useEffect, useState } from 'react';
|
||||||
import { css } from '@emotion/react';
|
import { css } from '@emotion/react';
|
||||||
import { TinyColor } from '@ctrl/tinycolor';
|
import { TinyColor } from '@ctrl/tinycolor';
|
||||||
|
import type { ColorPanelProps } from 'antd-token-previewer/es/ColorPanel';
|
||||||
|
import ColorPanel from 'antd-token-previewer/es/ColorPanel';
|
||||||
import { PRESET_COLORS } from './colorUtil';
|
import { PRESET_COLORS } from './colorUtil';
|
||||||
import ColorPanel, { ColorPanelProps } from 'antd-token-previewer/es/ColorPanel';
|
import useSiteToken from '../../../../hooks/useSiteToken';
|
||||||
|
|
||||||
const useStyle = () => {
|
const useStyle = () => {
|
||||||
const { token } = useSiteToken();
|
const { token } = useSiteToken();
|
||||||
@ -109,10 +111,7 @@ export default function ColorPicker({ value, onChange }: RadiusPickerProps) {
|
|||||||
key={color}
|
key={color}
|
||||||
overlayInnerStyle={{ padding: 0 }}
|
overlayInnerStyle={{ padding: 0 }}
|
||||||
content={
|
content={
|
||||||
<DebouncedColorPanel
|
<DebouncedColorPanel color={value || ''} onChange={(c) => onChange?.(c)} />
|
||||||
color={value || ''}
|
|
||||||
onChange={(color) => onChange?.(color)}
|
|
||||||
/>
|
|
||||||
}
|
}
|
||||||
trigger="click"
|
trigger="click"
|
||||||
showArrow={false}
|
showArrow={false}
|
||||||
|
@ -85,6 +85,7 @@ export default function ThemePicker({ value, onChange }: ThemePickerProps) {
|
|||||||
onClick={() => {
|
onClick={() => {
|
||||||
onChange?.(theme);
|
onChange?.(theme);
|
||||||
}}
|
}}
|
||||||
|
alt=""
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<span>{locale[theme as keyof typeof locale]}</span>
|
<span>{locale[theme as keyof typeof locale]}</span>
|
||||||
|
@ -52,9 +52,9 @@ export function getClosetColor(colorPrimary?: string | null) {
|
|||||||
const distance = COLOR_IMAGES.map(({ color }) => {
|
const distance = COLOR_IMAGES.map(({ color }) => {
|
||||||
const colorObj = new TinyColor(color).toRgb();
|
const colorObj = new TinyColor(color).toRgb();
|
||||||
const dist = Math.sqrt(
|
const dist = Math.sqrt(
|
||||||
Math.pow(colorObj.r - colorPrimaryRGB.r, 2) +
|
(colorObj.r - colorPrimaryRGB.r) ** 2 +
|
||||||
Math.pow(colorObj.g - colorPrimaryRGB.g, 2) +
|
(colorObj.g - colorPrimaryRGB.g) ** 2 +
|
||||||
Math.pow(colorObj.b - colorPrimaryRGB.b, 2),
|
(colorObj.b - colorPrimaryRGB.b) ** 2,
|
||||||
);
|
);
|
||||||
|
|
||||||
return { color, dist };
|
return { color, dist };
|
||||||
|
@ -2,33 +2,34 @@ import * as React from 'react';
|
|||||||
import { css } from '@emotion/react';
|
import { css } from '@emotion/react';
|
||||||
import { TinyColor } from '@ctrl/tinycolor';
|
import { TinyColor } from '@ctrl/tinycolor';
|
||||||
import {
|
import {
|
||||||
HomeOutlined,
|
|
||||||
FolderOutlined,
|
|
||||||
BellOutlined,
|
BellOutlined,
|
||||||
|
FolderOutlined,
|
||||||
|
HomeOutlined,
|
||||||
QuestionCircleOutlined,
|
QuestionCircleOutlined,
|
||||||
} from '@ant-design/icons';
|
} from '@ant-design/icons';
|
||||||
import useLocale from '../../../../hooks/useLocale';
|
import type { MenuProps } from 'antd';
|
||||||
import useSiteToken from '../../../../hooks/useSiteToken';
|
|
||||||
import {
|
import {
|
||||||
Typography,
|
Breadcrumb,
|
||||||
|
Button,
|
||||||
|
Card,
|
||||||
|
ConfigProvider,
|
||||||
|
Form,
|
||||||
Layout,
|
Layout,
|
||||||
Menu,
|
Menu,
|
||||||
Breadcrumb,
|
|
||||||
MenuProps,
|
|
||||||
Space,
|
|
||||||
ConfigProvider,
|
|
||||||
Card,
|
|
||||||
Form,
|
|
||||||
Radio,
|
Radio,
|
||||||
|
Space,
|
||||||
theme,
|
theme,
|
||||||
Button,
|
Typography,
|
||||||
} from 'antd';
|
} from 'antd';
|
||||||
import ThemePicker, { THEME } from './ThemePicker';
|
import useLocale from '../../../../hooks/useLocale';
|
||||||
|
import useSiteToken from '../../../../hooks/useSiteToken';
|
||||||
|
import type { THEME } from './ThemePicker';
|
||||||
|
import ThemePicker from './ThemePicker';
|
||||||
import ColorPicker from './ColorPicker';
|
import ColorPicker from './ColorPicker';
|
||||||
import RadiusPicker from './RadiusPicker';
|
import RadiusPicker from './RadiusPicker';
|
||||||
import Group from '../Group';
|
import Group from '../Group';
|
||||||
import BackgroundImage from './BackgroundImage';
|
import BackgroundImage from './BackgroundImage';
|
||||||
import { getClosetColor, DEFAULT_COLOR, getAvatarURL, PINK_COLOR } from './colorUtil';
|
import { DEFAULT_COLOR, getAvatarURL, getClosetColor, PINK_COLOR } from './colorUtil';
|
||||||
|
|
||||||
const { Header, Content, Sider } = Layout;
|
const { Header, Content, Sider } = Layout;
|
||||||
|
|
||||||
@ -179,10 +180,6 @@ const useStyle = () => {
|
|||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
interface PickerProps {
|
|
||||||
title: React.ReactNode;
|
|
||||||
}
|
|
||||||
|
|
||||||
// ========================== Menu Config ==========================
|
// ========================== Menu Config ==========================
|
||||||
const subMenuItems: MenuProps['items'] = [
|
const subMenuItems: MenuProps['items'] = [
|
||||||
{
|
{
|
||||||
@ -403,6 +400,7 @@ export default function Theme() {
|
|||||||
? undefined
|
? undefined
|
||||||
: `drop-shadow(30px 0 0 ${logoColor})`,
|
: `drop-shadow(30px 0 0 ${logoColor})`,
|
||||||
}}
|
}}
|
||||||
|
alt=""
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<h1>Ant Design 5.0</h1>
|
<h1>Ant Design 5.0</h1>
|
||||||
@ -517,6 +515,7 @@ export default function Theme() {
|
|||||||
height: 500,
|
height: 500,
|
||||||
}}
|
}}
|
||||||
src="https://gw.alipayobjects.com/zos/bmw-prod/bd71b0c6-f93a-4e52-9c8a-f01a9b8fe22b.svg"
|
src="https://gw.alipayobjects.com/zos/bmw-prod/bd71b0c6-f93a-4e52-9c8a-f01a9b8fe22b.svg"
|
||||||
|
alt=""
|
||||||
/>
|
/>
|
||||||
{/* Image Right Bottom */}
|
{/* Image Right Bottom */}
|
||||||
<img
|
<img
|
||||||
@ -528,6 +527,7 @@ export default function Theme() {
|
|||||||
height: 287,
|
height: 287,
|
||||||
}}
|
}}
|
||||||
src="https://gw.alipayobjects.com/zos/bmw-prod/84ad805a-74cb-4916-b7ba-9cdc2bdec23a.svg"
|
src="https://gw.alipayobjects.com/zos/bmw-prod/84ad805a-74cb-4916-b7ba-9cdc2bdec23a.svg"
|
||||||
|
alt=""
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -542,11 +542,13 @@ export default function Theme() {
|
|||||||
<img
|
<img
|
||||||
style={{ ...posStyle, left: 0, top: -100, height: 500 }}
|
style={{ ...posStyle, left: 0, top: -100, height: 500 }}
|
||||||
src="https://gw.alipayobjects.com/zos/bmw-prod/a213184a-f212-4afb-beec-1e8b36bb4b8a.svg"
|
src="https://gw.alipayobjects.com/zos/bmw-prod/a213184a-f212-4afb-beec-1e8b36bb4b8a.svg"
|
||||||
|
alt=""
|
||||||
/>
|
/>
|
||||||
{/* Image Right Bottom */}
|
{/* Image Right Bottom */}
|
||||||
<img
|
<img
|
||||||
style={{ ...posStyle, right: 0, bottom: -100, height: 287 }}
|
style={{ ...posStyle, right: 0, bottom: -100, height: 287 }}
|
||||||
src="https://gw.alipayobjects.com/zos/bmw-prod/bb74a2fb-bff1-4d0d-8c2d-2ade0cd9bb0d.svg"
|
src="https://gw.alipayobjects.com/zos/bmw-prod/bb74a2fb-bff1-4d0d-8c2d-2ade0cd9bb0d.svg"
|
||||||
|
alt=""
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -1,29 +1,14 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { useLocale as useDumiLocale } from 'dumi';
|
import { useLocale as useDumiLocale } from 'dumi';
|
||||||
import { css } from '@emotion/react';
|
import { ConfigProvider } from 'antd';
|
||||||
import useLocale from '../../hooks/useLocale';
|
import useLocale from '../../hooks/useLocale';
|
||||||
import Banner from './components/Banner';
|
import Banner from './components/Banner';
|
||||||
import Group from './components/Group';
|
import Group from './components/Group';
|
||||||
import { useSiteData } from './components/util';
|
import { useSiteData } from './components/util';
|
||||||
import useSiteToken from '../../hooks/useSiteToken';
|
|
||||||
import Theme from './components/Theme';
|
import Theme from './components/Theme';
|
||||||
import BannerRecommends from './components/BannerRecommends';
|
import BannerRecommends from './components/BannerRecommends';
|
||||||
import ComponentsList from './components/ComponentsList';
|
import ComponentsList from './components/ComponentsList';
|
||||||
import DesignFramework from './components/DesignFramework';
|
import DesignFramework from './components/DesignFramework';
|
||||||
import { ConfigProvider } from 'antd';
|
|
||||||
|
|
||||||
const useStyle = () => {
|
|
||||||
const { token } = useSiteToken();
|
|
||||||
|
|
||||||
return {
|
|
||||||
container: css`
|
|
||||||
// padding: 0 116px;
|
|
||||||
|
|
||||||
// background: url(https://gw.alipayobjects.com/zos/bmw-prod/5741382d-cc22-4ede-b962-aea287a1d1a1/l4nq43o8_w2646_h1580.png);
|
|
||||||
// background-size: 20% 10%;
|
|
||||||
`,
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
const locales = {
|
const locales = {
|
||||||
cn: {
|
cn: {
|
||||||
@ -47,9 +32,7 @@ const Homepage: React.FC = () => {
|
|||||||
const { id: localeId } = useDumiLocale();
|
const { id: localeId } = useDumiLocale();
|
||||||
const localeStr = localeId === 'zh-CN' ? 'cn' : 'en';
|
const localeStr = localeId === 'zh-CN' ? 'cn' : 'en';
|
||||||
|
|
||||||
const [siteData, loading] = useSiteData();
|
const [siteData] = useSiteData();
|
||||||
|
|
||||||
const style = useStyle();
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ConfigProvider theme={{ algorithm: undefined }}>
|
<ConfigProvider theme={{ algorithm: undefined }}>
|
||||||
@ -58,7 +41,7 @@ const Homepage: React.FC = () => {
|
|||||||
<BannerRecommends extras={siteData?.extras?.[localeStr]} icons={siteData?.icons} />
|
<BannerRecommends extras={siteData?.extras?.[localeStr]} icons={siteData?.icons} />
|
||||||
</Banner>
|
</Banner>
|
||||||
|
|
||||||
<div css={style.container}>
|
<div>
|
||||||
<Theme />
|
<Theme />
|
||||||
<Group
|
<Group
|
||||||
background="#fff"
|
background="#fff"
|
||||||
@ -79,6 +62,7 @@ const Homepage: React.FC = () => {
|
|||||||
<img
|
<img
|
||||||
style={{ position: 'absolute', left: 0, top: -50, height: 160 }}
|
style={{ position: 'absolute', left: 0, top: -50, height: 160 }}
|
||||||
src="https://gw.alipayobjects.com/zos/bmw-prod/ba37a413-28e6-4be4-b1c5-01be1a0ebb1c.svg"
|
src="https://gw.alipayobjects.com/zos/bmw-prod/ba37a413-28e6-4be4-b1c5-01be1a0ebb1c.svg"
|
||||||
|
alt=""
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
}
|
}
|
||||||
|
@ -1 +1,3 @@
|
|||||||
export { default } from '../theme-editor/index';
|
import ThemeEditor from '../theme-editor';
|
||||||
|
|
||||||
|
export default ThemeEditor;
|
||||||
|
@ -1,20 +1,9 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
import { ThemeEditor } from 'antd-token-previewer';
|
import { ThemeEditor } from 'antd-token-previewer';
|
||||||
import { useState } from 'react';
|
|
||||||
import useLocale from '../../hooks/useLocale';
|
|
||||||
import { ConfigProvider } from 'antd';
|
import { ConfigProvider } from 'antd';
|
||||||
import { ThemeConfig } from 'antd/es/config-provider/context';
|
import type { ThemeConfig } from 'antd/es/config-provider/context';
|
||||||
|
|
||||||
const locales = {
|
|
||||||
cn: {
|
|
||||||
title: '主题编辑器',
|
|
||||||
},
|
|
||||||
en: {
|
|
||||||
title: 'Theme Editor',
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
const CustomTheme = () => {
|
const CustomTheme = () => {
|
||||||
const [locale] = useLocale(locales);
|
|
||||||
const [theme, setTheme] = useState<ThemeConfig>({});
|
const [theme, setTheme] = useState<ThemeConfig>({});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -6,7 +6,7 @@ import { type HastRoot, type UnifiedTransformer, unistUtilVisit } from 'dumi';
|
|||||||
*/
|
*/
|
||||||
function rehypeAntd(): UnifiedTransformer<HastRoot> {
|
function rehypeAntd(): UnifiedTransformer<HastRoot> {
|
||||||
return (tree, vFile) => {
|
return (tree, vFile) => {
|
||||||
const filename = (vFile.data.frontmatter as any).filename;
|
const { filename } = vFile.data.frontmatter as any;
|
||||||
|
|
||||||
unistUtilVisit.visit(tree, 'element', (node) => {
|
unistUtilVisit.visit(tree, 'element', (node) => {
|
||||||
if (node.tagName === 'DumiDemoGrid') {
|
if (node.tagName === 'DumiDemoGrid') {
|
||||||
|
@ -1,8 +1,8 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
const APITable: React.FC = () => {
|
const APITable: React.FC = () => (
|
||||||
// TODO: implement api table, depend on the new markdown data structure passed
|
// TODO: implement api table, depend on the new markdown data structure passed
|
||||||
return <>API Table</>;
|
<>API Table</>
|
||||||
};
|
);
|
||||||
|
|
||||||
export default APITable;
|
export default APITable;
|
||||||
|
@ -1,8 +1,10 @@
|
|||||||
import { Alert, AlertProps } from 'antd';
|
import type { AlertProps } from 'antd';
|
||||||
import React, { FC } from 'react';
|
import { Alert } from 'antd';
|
||||||
|
import type { FC } from 'react';
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
const MdAlert: FC<AlertProps> = ({ style, ...props }) => {
|
const MdAlert: FC<AlertProps> = ({ style, ...props }) => (
|
||||||
return <Alert {...props} style={{ margin: '24px 0', ...style }} />;
|
<Alert {...props} style={{ margin: '24px 0', ...style }} />
|
||||||
};
|
);
|
||||||
|
|
||||||
export default MdAlert;
|
export default MdAlert;
|
||||||
|
@ -1,11 +1,11 @@
|
|||||||
import React, { useState, memo, useMemo } from 'react';
|
import React, { memo, useMemo, useState } from 'react';
|
||||||
import { Link, useRouteMeta, useIntl, useSidebarData, Helmet } from 'dumi';
|
import { Link, useIntl, useSidebarData } from 'dumi';
|
||||||
import { css } from '@emotion/react';
|
import { css } from '@emotion/react';
|
||||||
import debounce from 'lodash/debounce';
|
import debounce from 'lodash/debounce';
|
||||||
import { Input, Divider, Row, Col, Card, Typography, Tag, Space } from 'antd';
|
import { Card, Col, Divider, Input, Row, Space, Tag, Typography } from 'antd';
|
||||||
import { SearchOutlined } from '@ant-design/icons';
|
import { SearchOutlined } from '@ant-design/icons';
|
||||||
import proComponentsList from './ProComponentsList';
|
|
||||||
import type { Component } from './ProComponentsList';
|
import type { Component } from './ProComponentsList';
|
||||||
|
import proComponentsList from './ProComponentsList';
|
||||||
import useSiteToken from '../../../hooks/useSiteToken';
|
import useSiteToken from '../../../hooks/useSiteToken';
|
||||||
|
|
||||||
const useStyle = () => {
|
const useStyle = () => {
|
||||||
@ -80,11 +80,9 @@ const { Title } = Typography;
|
|||||||
|
|
||||||
const Overview: React.FC = () => {
|
const Overview: React.FC = () => {
|
||||||
const style = useStyle();
|
const style = useStyle();
|
||||||
const meta = useRouteMeta();
|
|
||||||
const data = useSidebarData();
|
const data = useSidebarData();
|
||||||
|
|
||||||
const { locale, formatMessage } = useIntl();
|
const { locale, formatMessage } = useIntl();
|
||||||
const documentTitle = `${meta.frontmatter.title} - Ant Design`;
|
|
||||||
|
|
||||||
const [search, setSearch] = useState<string>('');
|
const [search, setSearch] = useState<string>('');
|
||||||
|
|
||||||
@ -96,11 +94,11 @@ const Overview: React.FC = () => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const groups = useMemo<{ title: string; children: Component[] }[]>(() => {
|
const groups = useMemo<{ title: string; children: Component[] }[]>(
|
||||||
return data
|
() =>
|
||||||
|
data
|
||||||
.filter((item) => item.title)
|
.filter((item) => item.title)
|
||||||
.map<{ title: string; children: Component[] }>((item) => {
|
.map<{ title: string; children: Component[] }>((item) => ({
|
||||||
return {
|
|
||||||
title: item.title!,
|
title: item.title!,
|
||||||
children: item.children.map((child) => ({
|
children: item.children.map((child) => ({
|
||||||
title: child.frontmatter.title,
|
title: child.frontmatter.title,
|
||||||
@ -108,8 +106,7 @@ const Overview: React.FC = () => {
|
|||||||
cover: child.frontmatter.cover,
|
cover: child.frontmatter.cover,
|
||||||
link: child.link,
|
link: child.link,
|
||||||
})),
|
})),
|
||||||
};
|
}))
|
||||||
})
|
|
||||||
.concat([
|
.concat([
|
||||||
{
|
{
|
||||||
title: locale === 'zh-CN' ? '重型组件' : 'Others',
|
title: locale === 'zh-CN' ? '重型组件' : 'Others',
|
||||||
@ -118,8 +115,9 @@ const Overview: React.FC = () => {
|
|||||||
? proComponentsList
|
? proComponentsList
|
||||||
: proComponentsList.map((component) => ({ ...component, subtitle: '' })),
|
: proComponentsList.map((component) => ({ ...component, subtitle: '' })),
|
||||||
},
|
},
|
||||||
]);
|
]),
|
||||||
}, [data, locale]);
|
[data, locale],
|
||||||
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section className="markdown" ref={sectionRef}>
|
<section className="markdown" ref={sectionRef}>
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import React, { useContext, useLayoutEffect, useState } from 'react';
|
import React, { useContext, useState } from 'react';
|
||||||
import { DumiDemoGrid, FormattedMessage } from 'dumi';
|
import { DumiDemoGrid, FormattedMessage } from 'dumi';
|
||||||
import { Tooltip } from 'antd';
|
import { Tooltip } from 'antd';
|
||||||
import { BugFilled, BugOutlined, CodeFilled, CodeOutlined } from '@ant-design/icons';
|
import { BugFilled, BugOutlined, CodeFilled, CodeOutlined } from '@ant-design/icons';
|
||||||
@ -55,7 +55,7 @@ const DemoWrapper: typeof DumiDemoGrid = ({ items }) => {
|
|||||||
</Tooltip>
|
</Tooltip>
|
||||||
</span>
|
</span>
|
||||||
{/* FIXME: find a new way instead of `key` to trigger re-render */}
|
{/* FIXME: find a new way instead of `key` to trigger re-render */}
|
||||||
<DumiDemoGrid items={filteredItems} key={expandAll + '' + showDebug} />
|
<DumiDemoGrid items={filteredItems} key={`${expandAll}${showDebug}`} />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -5,10 +5,8 @@ import JsonML from 'jsonml.js/lib/utils';
|
|||||||
import toReactComponent from 'jsonml-to-react-element';
|
import toReactComponent from 'jsonml-to-react-element';
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
import Prism from 'prismjs';
|
import Prism from 'prismjs';
|
||||||
import { useLocation } from 'dumi';
|
import { useLocation, useIntl, type IPreviewerProps } from 'dumi';
|
||||||
import { useIntl, type IPreviewerProps } from 'dumi';
|
|
||||||
import { ping } from '../../utils';
|
import { ping } from '../../utils';
|
||||||
import sylvanas from 'sylvanas';
|
|
||||||
|
|
||||||
let pingDeferrer: PromiseLike<boolean>;
|
let pingDeferrer: PromiseLike<boolean>;
|
||||||
|
|
||||||
@ -56,13 +54,11 @@ export default function fromDumiProps<P extends object>(
|
|||||||
toReactComponent(jsonML: any) {
|
toReactComponent(jsonML: any) {
|
||||||
return toReactComponent(jsonML, [
|
return toReactComponent(jsonML, [
|
||||||
[
|
[
|
||||||
function (node: any) {
|
(node: any) => JsonML.isElement(node) && JsonML.getTagName(node) === 'pre',
|
||||||
return JsonML.isElement(node) && JsonML.getTagName(node) === 'pre';
|
(node: any, index: any) => {
|
||||||
},
|
|
||||||
function (node: any, index: any) {
|
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
// ref: https://github.com/benjycui/bisheng/blob/master/packages/bisheng/src/bisheng-plugin-highlight/lib/browser.js#L7
|
// ref: https://github.com/benjycui/bisheng/blob/master/packages/bisheng/src/bisheng-plugin-highlight/lib/browser.js#L7
|
||||||
var attr = JsonML.getAttributes(node);
|
const attr = JsonML.getAttributes(node);
|
||||||
return React.createElement(
|
return React.createElement(
|
||||||
'pre',
|
'pre',
|
||||||
{
|
{
|
||||||
|
@ -120,13 +120,6 @@ class Demo extends React.Component {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
handleIframeReady = () => {
|
|
||||||
const { theme, setIframeTheme } = this.props;
|
|
||||||
if (this.iframeRef.current) {
|
|
||||||
// setIframeTheme(this.iframeRef.current, theme);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { state } = this;
|
const { state } = this;
|
||||||
const { props } = this;
|
const { props } = this;
|
||||||
@ -167,7 +160,7 @@ class Demo extends React.Component {
|
|||||||
});
|
});
|
||||||
const localizedTitle = meta.title[locale] || meta.title;
|
const localizedTitle = meta.title[locale] || meta.title;
|
||||||
const localizeIntro = content[locale] || content;
|
const localizeIntro = content[locale] || content;
|
||||||
const introChildren = <div dangerouslySetInnerHTML={{ __html: localizeIntro }}></div>;
|
const introChildren = <div dangerouslySetInnerHTML={{ __html: localizeIntro }} />;
|
||||||
|
|
||||||
const highlightClass = classNames('highlight-wrapper', {
|
const highlightClass = classNames('highlight-wrapper', {
|
||||||
'highlight-wrapper-expand': codeExpand,
|
'highlight-wrapper-expand': codeExpand,
|
||||||
@ -458,7 +451,7 @@ createRoot(document.getElementById('container')).render(<Demo />);
|
|||||||
</Tooltip>
|
</Tooltip>
|
||||||
</CopyToClipboard>
|
</CopyToClipboard>
|
||||||
<Tooltip title={<FormattedMessage id="app.demo.separate" />}>
|
<Tooltip title={<FormattedMessage id="app.demo.separate" />}>
|
||||||
<a className="code-box-code-action" target="_blank" rel="noreferer" href={src}>
|
<a className="code-box-code-action" target="_blank" rel="noreferrer" href={src}>
|
||||||
<ExternalLinkIcon className="code-box-separate" />
|
<ExternalLinkIcon className="code-box-separate" />
|
||||||
</a>
|
</a>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
|
@ -3,9 +3,9 @@ import * as React from 'react';
|
|||||||
import dayjs from 'dayjs';
|
import dayjs from 'dayjs';
|
||||||
import { FormattedMessage, useIntl } from 'dumi';
|
import { FormattedMessage, useIntl } from 'dumi';
|
||||||
import { Tabs, Skeleton, Avatar, Divider, Empty } from 'antd';
|
import { Tabs, Skeleton, Avatar, Divider, Empty } from 'antd';
|
||||||
|
import { css } from '@emotion/react';
|
||||||
import { useSiteData } from '../../../pages/index/components/util';
|
import { useSiteData } from '../../../pages/index/components/util';
|
||||||
import type { Article, Authors } from '../../../pages/index/components/util';
|
import type { Article, Authors } from '../../../pages/index/components/util';
|
||||||
import { css } from '@emotion/react';
|
|
||||||
import useSiteToken from '../../../hooks/useSiteToken';
|
import useSiteToken from '../../../hooks/useSiteToken';
|
||||||
|
|
||||||
const useStyle = () => {
|
const useStyle = () => {
|
||||||
|
@ -86,7 +86,7 @@ const ResourceCard: React.FC<ResourceCardProps> = ({ resource }) => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<Col xs={24} sm={12} md={8} lg={6} style={{ padding: 12 }}>
|
<Col xs={24} sm={12} md={8} lg={6} style={{ padding: 12 }}>
|
||||||
<a css={styles.card} target="_blank" href={src}>
|
<a css={styles.card} target="_blank" href={src} rel="noreferrer">
|
||||||
<img
|
<img
|
||||||
css={styles.image}
|
css={styles.image}
|
||||||
src={cover}
|
src={cover}
|
||||||
@ -105,14 +105,12 @@ export type ResourceCardsProps = {
|
|||||||
resources: Resource[];
|
resources: Resource[];
|
||||||
};
|
};
|
||||||
|
|
||||||
const ResourceCards: React.FC<ResourceCardsProps> = ({ resources }) => {
|
const ResourceCards: React.FC<ResourceCardsProps> = ({ resources }) => (
|
||||||
return (
|
|
||||||
<Row style={{ margin: '-12px -12px 0 -12px' }}>
|
<Row style={{ margin: '-12px -12px 0 -12px' }}>
|
||||||
{resources.map((item) => (
|
{resources.map((item) => (
|
||||||
<ResourceCard resource={item} key={item.title} />
|
<ResourceCard resource={item} key={item.title} />
|
||||||
))}
|
))}
|
||||||
</Row>
|
</Row>
|
||||||
);
|
);
|
||||||
};
|
|
||||||
|
|
||||||
export default ResourceCards;
|
export default ResourceCards;
|
||||||
|
@ -1,10 +1,14 @@
|
|||||||
import React, { FC, useMemo } from 'react';
|
import type { FC } from 'react';
|
||||||
|
import React, { useMemo } from 'react';
|
||||||
|
/* eslint import/no-unresolved: 0 */
|
||||||
|
// @ts-ignore
|
||||||
import tokenMeta from 'antd/es/version/token-meta.json';
|
import tokenMeta from 'antd/es/version/token-meta.json';
|
||||||
import { getDesignToken } from 'antd-token-previewer';
|
import { getDesignToken } from 'antd-token-previewer';
|
||||||
import { Table, TableProps, Tag } from 'antd';
|
import type { TableProps } from 'antd';
|
||||||
|
import { Table } from 'antd';
|
||||||
|
import { css } from '@emotion/react';
|
||||||
import useLocale from '../../../hooks/useLocale';
|
import useLocale from '../../../hooks/useLocale';
|
||||||
import useSiteToken from '../../../hooks/useSiteToken';
|
import useSiteToken from '../../../hooks/useSiteToken';
|
||||||
import { css } from '@emotion/react';
|
|
||||||
|
|
||||||
type TokenTableProps = {
|
type TokenTableProps = {
|
||||||
type: 'seed' | 'map' | 'alias';
|
type: 'seed' | 'map' | 'alias';
|
||||||
@ -89,7 +93,7 @@ const TokenTable: FC<TokenTableProps> = ({ type }) => {
|
|||||||
boxShadow: 'inset 0 0 0 1px rgba(0, 0, 0, 0.06)',
|
boxShadow: 'inset 0 0 0 1px rgba(0, 0, 0, 0.06)',
|
||||||
marginRight: 4,
|
marginRight: 4,
|
||||||
}}
|
}}
|
||||||
></span>
|
/>
|
||||||
)}
|
)}
|
||||||
{typeof record.value !== 'string' ? JSON.stringify(record.value) : record.value}
|
{typeof record.value !== 'string' ? JSON.stringify(record.value) : record.value}
|
||||||
</span>
|
</span>
|
||||||
@ -97,16 +101,16 @@ const TokenTable: FC<TokenTableProps> = ({ type }) => {
|
|||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const data = useMemo<TokenData[]>(() => {
|
const data = useMemo<TokenData[]>(
|
||||||
return tokenMeta[type].map((token) => {
|
() =>
|
||||||
return {
|
tokenMeta[type].map((token) => ({
|
||||||
name: token.name,
|
name: token.name,
|
||||||
desc: lang === 'cn' ? token.desc : token.descEn,
|
desc: lang === 'cn' ? token.desc : token.descEn,
|
||||||
type: token.type,
|
type: token.type,
|
||||||
value: (defaultToken as any)[token.name],
|
value: (defaultToken as any)[token.name],
|
||||||
};
|
})),
|
||||||
});
|
[type, lang],
|
||||||
}, [type, lang]);
|
);
|
||||||
|
|
||||||
return <Table dataSource={data} columns={columns} pagination={false} bordered />;
|
return <Table dataSource={data} columns={columns} pagination={false} bordered />;
|
||||||
};
|
};
|
||||||
|
@ -1,3 +1,4 @@
|
|||||||
|
import React from 'react';
|
||||||
import { Global, css } from '@emotion/react';
|
import { Global, css } from '@emotion/react';
|
||||||
import useSiteToken from '../../../hooks/useSiteToken';
|
import useSiteToken from '../../../hooks/useSiteToken';
|
||||||
|
|
||||||
|
@ -6,7 +6,7 @@ const CommonHelmet = () => {
|
|||||||
|
|
||||||
const [title, description] = useMemo(() => {
|
const [title, description] = useMemo(() => {
|
||||||
const helmetTitle = `${meta.frontmatter.subtitle || ''} ${meta.frontmatter.title} - Ant Design`;
|
const helmetTitle = `${meta.frontmatter.subtitle || ''} ${meta.frontmatter.title} - Ant Design`;
|
||||||
let helmetDescription = meta.frontmatter.description;
|
const helmetDescription = meta.frontmatter.description;
|
||||||
return [helmetTitle, helmetDescription];
|
return [helmetTitle, helmetDescription];
|
||||||
}, [meta]);
|
}, [meta]);
|
||||||
|
|
||||||
|
@ -1,8 +1,8 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { Global, css } from '@emotion/react';
|
import { Global, css } from '@emotion/react';
|
||||||
import useSiteToken from '../../hooks/useSiteToken';
|
|
||||||
import { TinyColor } from '@ctrl/tinycolor';
|
import { TinyColor } from '@ctrl/tinycolor';
|
||||||
import ColorStyle from '../common/Color/ColorStyle';
|
import useSiteToken from '../../hooks/useSiteToken';
|
||||||
|
import ColorStyle from './Color/ColorStyle';
|
||||||
|
|
||||||
const GlobalStyles = () => {
|
const GlobalStyles = () => {
|
||||||
const { token } = useSiteToken();
|
const { token } = useSiteToken();
|
||||||
|
@ -1,10 +1,11 @@
|
|||||||
import React, { ReactElement, useMemo } from 'react';
|
import type { ReactElement } from 'react';
|
||||||
|
import React, { useMemo } from 'react';
|
||||||
import { ClassNames, css } from '@emotion/react';
|
import { ClassNames, css } from '@emotion/react';
|
||||||
import useSiteToken from '../../hooks/useSiteToken';
|
import type { MenuProps } from 'antd';
|
||||||
import { Menu, MenuProps, Typography } from 'antd';
|
import type { MenuItemType } from 'antd/es/menu/hooks/useItems';
|
||||||
import useMenu from '../../hooks/useMenu';
|
|
||||||
import { MenuItemType } from 'antd/es/menu/hooks/useItems';
|
|
||||||
import { LeftOutlined, RightOutlined } from '@ant-design/icons';
|
import { LeftOutlined, RightOutlined } from '@ant-design/icons';
|
||||||
|
import useMenu from '../../hooks/useMenu';
|
||||||
|
import useSiteToken from '../../hooks/useSiteToken';
|
||||||
|
|
||||||
const useStyle = () => {
|
const useStyle = () => {
|
||||||
const { token } = useSiteToken();
|
const { token } = useSiteToken();
|
||||||
@ -114,9 +115,10 @@ const PrevAndNext = () => {
|
|||||||
activeMenuItemIndex = i;
|
activeMenuItemIndex = i;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
const prev = flatMenu[activeMenuItemIndex - 1];
|
return [
|
||||||
const next = flatMenu[activeMenuItemIndex + 1];
|
flatMenu[activeMenuItemIndex - 1] as MenuItemType,
|
||||||
return [prev as MenuItemType, next as MenuItemType];
|
flatMenu[activeMenuItemIndex + 1] as MenuItemType,
|
||||||
|
];
|
||||||
}, [menuItems, selectedKey]);
|
}, [menuItems, selectedKey]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -1,7 +1,8 @@
|
|||||||
import React, { FC } from 'react';
|
import type { FC } from 'react';
|
||||||
|
import React from 'react';
|
||||||
import { FloatButton, theme } from 'antd';
|
import { FloatButton, theme } from 'antd';
|
||||||
import ThemeIcon from './ThemeIcon';
|
|
||||||
import { DarkTheme, Light, CompactTheme } from 'antd-token-previewer/es/icons';
|
import { DarkTheme, Light, CompactTheme } from 'antd-token-previewer/es/icons';
|
||||||
|
import ThemeIcon from './ThemeIcon';
|
||||||
|
|
||||||
const { defaultAlgorithm, darkAlgorithm, compactAlgorithm } = theme;
|
const { defaultAlgorithm, darkAlgorithm, compactAlgorithm } = theme;
|
||||||
|
|
||||||
|
@ -1,17 +1,18 @@
|
|||||||
import React, { useEffect, useMemo, useRef, useLayoutEffect } from 'react';
|
import React, { useEffect, useLayoutEffect, useMemo, useRef } from 'react';
|
||||||
import 'dayjs/locale/zh-cn';
|
import 'dayjs/locale/zh-cn';
|
||||||
import dayjs from 'dayjs';
|
import dayjs from 'dayjs';
|
||||||
import { useOutlet, useSearchParams, Helmet } from 'dumi';
|
import { Helmet, useOutlet, useSearchParams } from 'dumi';
|
||||||
import Header from 'dumi/theme/slots/Header';
|
|
||||||
import Footer from 'dumi/theme/slots/Footer';
|
|
||||||
import '../../static/style';
|
import '../../static/style';
|
||||||
import useLocation from '../../../hooks/useLocation';
|
import type { DirectionType } from 'antd/es/config-provider';
|
||||||
import SiteContext from '../../slots/SiteContext';
|
import ConfigProvider from 'antd/es/config-provider';
|
||||||
import ConfigProvider, { DirectionType } from 'antd/es/config-provider';
|
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
import useLocale from '../../../hooks/useLocale';
|
|
||||||
import zhCN from 'antd/es/locale/zh_CN';
|
import zhCN from 'antd/es/locale/zh_CN';
|
||||||
import { createCache, StyleProvider } from '@ant-design/cssinjs';
|
import { createCache, StyleProvider } from '@ant-design/cssinjs';
|
||||||
|
import Header from '../../slots/Header';
|
||||||
|
import Footer from '../../slots/Footer';
|
||||||
|
import useLocale from '../../../hooks/useLocale';
|
||||||
|
import SiteContext from '../../slots/SiteContext';
|
||||||
|
import useLocation from '../../../hooks/useLocation';
|
||||||
import ResourceLayout from '../ResourceLayout';
|
import ResourceLayout from '../ResourceLayout';
|
||||||
import GlobalStyles from '../../common/GlobalStyles';
|
import GlobalStyles from '../../common/GlobalStyles';
|
||||||
import SidebarLayout from '../SidebarLayout';
|
import SidebarLayout from '../SidebarLayout';
|
||||||
@ -94,9 +95,9 @@ const DocLayout: React.FC = () => {
|
|||||||
}
|
}
|
||||||
}, [location]);
|
}, [location]);
|
||||||
|
|
||||||
const changeDirection = (direction: DirectionType): void => {
|
const changeDirection = (dir: DirectionType): void => {
|
||||||
setDirection(direction);
|
setDirection(dir);
|
||||||
if (direction === 'ltr') {
|
if (dir === 'ltr') {
|
||||||
searchParams.delete('direction');
|
searchParams.delete('direction');
|
||||||
} else {
|
} else {
|
||||||
searchParams.set('direction', 'rtl');
|
searchParams.set('direction', 'rtl');
|
||||||
@ -115,17 +116,27 @@ const DocLayout: React.FC = () => {
|
|||||||
<Footer />
|
<Footer />
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
} else if (pathname.startsWith('/docs/resource')) {
|
}
|
||||||
|
if (pathname.startsWith('/docs/resource')) {
|
||||||
return <ResourceLayout>{outlet}</ResourceLayout>;
|
return <ResourceLayout>{outlet}</ResourceLayout>;
|
||||||
} else if (pathname.startsWith('/theme-editor')) {
|
}
|
||||||
return <>{outlet}</>;
|
if (pathname.startsWith('/theme-editor')) {
|
||||||
|
return outlet;
|
||||||
}
|
}
|
||||||
return <SidebarLayout>{outlet}</SidebarLayout>;
|
return <SidebarLayout>{outlet}</SidebarLayout>;
|
||||||
}, [pathname, outlet]);
|
}, [pathname, outlet]);
|
||||||
|
|
||||||
|
const siteContextValue = useMemo(
|
||||||
|
() => ({
|
||||||
|
isMobile,
|
||||||
|
direction,
|
||||||
|
}),
|
||||||
|
[isMobile, direction],
|
||||||
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<StyleProvider cache={styleCache}>
|
<StyleProvider cache={styleCache}>
|
||||||
<SiteContext.Provider value={{ isMobile, direction }}>
|
<SiteContext.Provider value={siteContextValue}>
|
||||||
<Helmet encodeSpecialCharacters={false}>
|
<Helmet encodeSpecialCharacters={false}>
|
||||||
<html
|
<html
|
||||||
lang={lang}
|
lang={lang}
|
||||||
|
@ -1,8 +1,9 @@
|
|||||||
import React, { useLayoutEffect } from 'react';
|
import React, { useLayoutEffect } from 'react';
|
||||||
import { useOutlet } from 'dumi';
|
import { useOutlet } from 'dumi';
|
||||||
import { ConfigProvider, theme as antdTheme } from 'antd';
|
import { ConfigProvider, theme as antdTheme } from 'antd';
|
||||||
import { ThemeConfig } from 'antd/es/config-provider/context';
|
import type { ThemeConfig } from 'antd/es/config-provider/context';
|
||||||
import ThemeContext, { ThemeContextProps } from '../slots/ThemeContext';
|
import type { ThemeContextProps } from '../slots/ThemeContext';
|
||||||
|
import ThemeContext from '../slots/ThemeContext';
|
||||||
import ThemeSwitch from '../common/ThemeSwitch';
|
import ThemeSwitch from '../common/ThemeSwitch';
|
||||||
import useLocation from '../../hooks/useLocation';
|
import useLocation from '../../hooks/useLocation';
|
||||||
|
|
||||||
|
@ -1,10 +1,9 @@
|
|||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import classNames from 'classnames';
|
|
||||||
import throttle from 'lodash/throttle';
|
import throttle from 'lodash/throttle';
|
||||||
import { Tabs } from 'antd';
|
import { Tabs } from 'antd';
|
||||||
|
import { css } from '@emotion/react';
|
||||||
import scrollTo from '../../../../components/_util/scrollTo';
|
import scrollTo from '../../../../components/_util/scrollTo';
|
||||||
import useSiteToken from '../../../hooks/useSiteToken';
|
import useSiteToken from '../../../hooks/useSiteToken';
|
||||||
import { css } from '@emotion/react';
|
|
||||||
|
|
||||||
const useStyle = () => {
|
const useStyle = () => {
|
||||||
const { token } = useSiteToken();
|
const { token } = useSiteToken();
|
||||||
|
@ -1,8 +1,9 @@
|
|||||||
import React, { FC, PropsWithChildren } from 'react';
|
import type { FC, PropsWithChildren } from 'react';
|
||||||
|
import React from 'react';
|
||||||
import { useRouteMeta, FormattedMessage } from 'dumi';
|
import { useRouteMeta, FormattedMessage } from 'dumi';
|
||||||
import Footer from 'dumi/theme/slots/Footer';
|
|
||||||
import { Layout, Typography, ConfigProvider } from 'antd';
|
import { Layout, Typography, ConfigProvider } from 'antd';
|
||||||
import { css } from '@emotion/react';
|
import { css } from '@emotion/react';
|
||||||
|
import Footer from '../../slots/Footer';
|
||||||
import AffixTabs from './AffixTabs';
|
import AffixTabs from './AffixTabs';
|
||||||
import EditButton from '../../common/EditButton';
|
import EditButton from '../../common/EditButton';
|
||||||
import useSiteToken from '../../../hooks/useSiteToken';
|
import useSiteToken from '../../../hooks/useSiteToken';
|
||||||
|
@ -1,16 +1,15 @@
|
|||||||
import React, { FC, PropsWithChildren } from 'react';
|
import type { FC, PropsWithChildren } from 'react';
|
||||||
|
import React from 'react';
|
||||||
import Sidebar from '../../slots/Sidebar';
|
import Sidebar from '../../slots/Sidebar';
|
||||||
import Content from '../../slots/Content';
|
import Content from '../../slots/Content';
|
||||||
import CommonHelmet from '../../common/CommonHelmet';
|
import CommonHelmet from '../../common/CommonHelmet';
|
||||||
|
|
||||||
const SidebarLayout: FC<PropsWithChildren<{}>> = ({ children }) => {
|
const SidebarLayout: FC<PropsWithChildren<{}>> = ({ children }) => (
|
||||||
return (
|
|
||||||
<main style={{ display: 'flex', marginTop: 40 }}>
|
<main style={{ display: 'flex', marginTop: 40 }}>
|
||||||
<CommonHelmet />
|
<CommonHelmet />
|
||||||
<Sidebar />
|
<Sidebar />
|
||||||
<Content>{children}</Content>
|
<Content>{children}</Content>
|
||||||
</main>
|
</main>
|
||||||
);
|
);
|
||||||
};
|
|
||||||
|
|
||||||
export default SidebarLayout;
|
export default SidebarLayout;
|
||||||
|
@ -81,7 +81,7 @@ const RoutesPlugin = (api: IApi) => {
|
|||||||
let styles = '';
|
let styles = '';
|
||||||
|
|
||||||
// extract all emotion style tags from body
|
// extract all emotion style tags from body
|
||||||
file.content = file.content.replace(/<style data-emotion[\s\S\n]+?<\/style>/g, (s) => {
|
file.content = file.content.replace(/<style data-emotion[\S\s]+?<\/style>/g, (s) => {
|
||||||
styles += s;
|
styles += s;
|
||||||
|
|
||||||
return '';
|
return '';
|
||||||
|
@ -1,16 +1,17 @@
|
|||||||
import React, { ReactNode, useMemo, useState, useLayoutEffect, useContext } from 'react';
|
import type { ReactNode } from 'react';
|
||||||
import { useIntl, useRouteMeta } from 'dumi';
|
import React, { useMemo, useState, useLayoutEffect, useContext } from 'react';
|
||||||
import Footer from 'dumi/theme/slots/Footer';
|
import { useIntl, useRouteMeta, FormattedMessage } from 'dumi';
|
||||||
import { Col, Typography, Avatar, Tooltip, Affix, Anchor } from 'antd';
|
import { Col, Typography, Avatar, Tooltip, Affix, Anchor } from 'antd';
|
||||||
import EditButton from '../../common/EditButton';
|
|
||||||
import { FormattedMessage } from 'dumi';
|
|
||||||
import useLocation from '../../../hooks/useLocation';
|
|
||||||
import ContributorsList from '@qixian.cs/github-contributors-list';
|
import ContributorsList from '@qixian.cs/github-contributors-list';
|
||||||
import useSiteToken from '../../../hooks/useSiteToken';
|
|
||||||
import { css } from '@emotion/react';
|
import { css } from '@emotion/react';
|
||||||
import PrevAndNext from '../../common/PrevAndNext';
|
|
||||||
import DemoContext, { DemoContextProps } from '../DemoContext';
|
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
|
import Footer from '../Footer';
|
||||||
|
import EditButton from '../../common/EditButton';
|
||||||
|
import useLocation from '../../../hooks/useLocation';
|
||||||
|
import useSiteToken from '../../../hooks/useSiteToken';
|
||||||
|
import PrevAndNext from '../../common/PrevAndNext';
|
||||||
|
import type { DemoContextProps } from '../DemoContext';
|
||||||
|
import DemoContext from '../DemoContext';
|
||||||
import SiteContext from '../SiteContext';
|
import SiteContext from '../SiteContext';
|
||||||
|
|
||||||
const useStyle = () => {
|
const useStyle = () => {
|
||||||
@ -120,8 +121,9 @@ const Content: React.FC<{ children: ReactNode }> = ({ children }) => {
|
|||||||
[showDebug, debugDemos],
|
[showDebug, debugDemos],
|
||||||
);
|
);
|
||||||
|
|
||||||
const anchorItems = useMemo(() => {
|
const anchorItems = useMemo(
|
||||||
return meta.toc.reduce<AnchorItem[]>((result, item) => {
|
() =>
|
||||||
|
meta.toc.reduce<AnchorItem[]>((result, item) => {
|
||||||
if (item.depth === 2) {
|
if (item.depth === 2) {
|
||||||
result.push({ ...item });
|
result.push({ ...item });
|
||||||
} else if (item.depth === 3) {
|
} else if (item.depth === 3) {
|
||||||
@ -132,8 +134,9 @@ const Content: React.FC<{ children: ReactNode }> = ({ children }) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
return result;
|
return result;
|
||||||
}, []);
|
}, []),
|
||||||
}, [meta.toc]);
|
[meta.toc],
|
||||||
|
);
|
||||||
|
|
||||||
const isRTL = direction === 'rtl';
|
const isRTL = direction === 'rtl';
|
||||||
|
|
||||||
|
@ -17,12 +17,12 @@ import {
|
|||||||
ZhihuOutlined,
|
ZhihuOutlined,
|
||||||
YuqueFilled,
|
YuqueFilled,
|
||||||
} from '@ant-design/icons';
|
} from '@ant-design/icons';
|
||||||
import useLocation from '../../../hooks/useLocation';
|
|
||||||
import { css } from '@emotion/react';
|
import { css } from '@emotion/react';
|
||||||
import useLocale from '../../../hooks/useLocale';
|
|
||||||
import useSiteToken from '../../../hooks/useSiteToken';
|
|
||||||
import { TinyColor } from '@ctrl/tinycolor';
|
import { TinyColor } from '@ctrl/tinycolor';
|
||||||
import getAlphaColor from 'antd/es/theme/util/getAlphaColor';
|
import getAlphaColor from 'antd/es/theme/util/getAlphaColor';
|
||||||
|
import useLocation from '../../../hooks/useLocation';
|
||||||
|
import useLocale from '../../../hooks/useLocale';
|
||||||
|
import useSiteToken from '../../../hooks/useSiteToken';
|
||||||
import AdditionalInfo from './AdditionalInfo';
|
import AdditionalInfo from './AdditionalInfo';
|
||||||
|
|
||||||
const locales = {
|
const locales = {
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import { Link, useLocation } from 'dumi';
|
import { Link, useLocation } from 'dumi';
|
||||||
import * as utils from '../../utils';
|
|
||||||
import { css } from '@emotion/react';
|
import { css } from '@emotion/react';
|
||||||
|
import * as utils from '../../utils';
|
||||||
import useSiteToken from '../../../hooks/useSiteToken';
|
import useSiteToken from '../../../hooks/useSiteToken';
|
||||||
|
|
||||||
const useStyle = () => {
|
const useStyle = () => {
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import type { MenuProps } from 'antd';
|
import type { MenuProps } from 'antd';
|
||||||
import { Dropdown, Menu, Button } from 'antd';
|
import { Button, Dropdown } from 'antd';
|
||||||
import { FormattedMessage } from 'dumi';
|
import { FormattedMessage } from 'dumi';
|
||||||
import { DownOutlined } from '@ant-design/icons';
|
import { DownOutlined } from '@ant-design/icons';
|
||||||
import type { SharedProps } from './interface';
|
import type { SharedProps } from './interface';
|
||||||
|
@ -1,15 +1,15 @@
|
|||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
import { Link, useLocation, FormattedMessage, useFullSidebarData } from 'dumi';
|
import { FormattedMessage, Link, useFullSidebarData, useLocation } from 'dumi';
|
||||||
import { MenuProps, Tooltip } from 'antd';
|
import type { MenuProps } from 'antd';
|
||||||
import { MenuOutlined } from '@ant-design/icons';
|
|
||||||
import { Menu } from 'antd';
|
import { Menu } from 'antd';
|
||||||
|
import { MenuOutlined } from '@ant-design/icons';
|
||||||
|
import { css } from '@emotion/react';
|
||||||
import { getEcosystemGroup } from './More';
|
import { getEcosystemGroup } from './More';
|
||||||
import * as utils from '../../utils';
|
import * as utils from '../../utils';
|
||||||
import type { SharedProps } from './interface';
|
import type { SharedProps } from './interface';
|
||||||
import useSiteToken from '../../../hooks/useSiteToken';
|
import useSiteToken from '../../../hooks/useSiteToken';
|
||||||
import useLocale from '../../../hooks/useLocale';
|
import useLocale from '../../../hooks/useLocale';
|
||||||
import { css } from '@emotion/react';
|
|
||||||
|
|
||||||
// ============================= Theme =============================
|
// ============================= Theme =============================
|
||||||
const locales = {
|
const locales = {
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import { Button, Tooltip } from 'antd';
|
import { Tooltip } from 'antd';
|
||||||
import useSiteToken from '../../../hooks/useSiteToken';
|
|
||||||
import { css } from '@emotion/react';
|
import { css } from '@emotion/react';
|
||||||
|
import useSiteToken from '../../../hooks/useSiteToken';
|
||||||
|
|
||||||
export interface LangBtnProps {
|
export interface LangBtnProps {
|
||||||
label1: React.ReactNode;
|
label1: React.ReactNode;
|
||||||
@ -110,13 +110,8 @@ export default function LangBtn({
|
|||||||
let node = (
|
let node = (
|
||||||
<button onClick={onClick} css={[style.btn]} key="lang-button">
|
<button onClick={onClick} css={[style.btn]} key="lang-button">
|
||||||
<div className="btn-inner">
|
<div className="btn-inner">
|
||||||
{pure ? (
|
{pure && (value === 1 ? label1 : label2)}
|
||||||
value === 1 ? (
|
{!pure && (
|
||||||
label1
|
|
||||||
) : (
|
|
||||||
label2
|
|
||||||
)
|
|
||||||
) : (
|
|
||||||
<div style={{ position: 'relative', width: BASE_SIZE, height: BASE_SIZE }}>
|
<div style={{ position: 'relative', width: BASE_SIZE, height: BASE_SIZE }}>
|
||||||
<span
|
<span
|
||||||
style={{
|
style={{
|
||||||
|
@ -1,21 +1,19 @@
|
|||||||
import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
|
import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
|
||||||
import { FormattedMessage, useIntl } from 'dumi';
|
import { useLocation } from 'dumi';
|
||||||
import DumiSearchBar from 'dumi/theme-default/slots/SearchBar';
|
import DumiSearchBar from 'dumi/theme-default/slots/SearchBar';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
import { Col, Modal, Popover, Row, Select, Typography } from 'antd';
|
import { Col, Modal, Popover, Row, Select, Typography } from 'antd';
|
||||||
import { MenuOutlined, GithubOutlined } from '@ant-design/icons';
|
import { GithubOutlined, MenuOutlined } from '@ant-design/icons';
|
||||||
import type { DirectionType } from 'antd/es/config-provider';
|
import type { DirectionType } from 'antd/es/config-provider';
|
||||||
|
import { ClassNames, css } from '@emotion/react';
|
||||||
import * as utils from '../../utils';
|
import * as utils from '../../utils';
|
||||||
import { getThemeConfig, ping } from '../../utils';
|
import { getThemeConfig, ping } from '../../utils';
|
||||||
import packageJson from '../../../../package.json';
|
import packageJson from '../../../../package.json';
|
||||||
import Logo from './Logo';
|
import Logo from './Logo';
|
||||||
import More from './More';
|
import More from './More';
|
||||||
import Navigation from './Navigation';
|
import Navigation from './Navigation';
|
||||||
import Github from './Github';
|
|
||||||
import type { SiteContextProps } from '../SiteContext';
|
import type { SiteContextProps } from '../SiteContext';
|
||||||
import SiteContext from '../SiteContext';
|
import SiteContext from '../SiteContext';
|
||||||
import { useLocation, useNavigate } from 'dumi';
|
|
||||||
import { ClassNames, css } from '@emotion/react';
|
|
||||||
import useSiteToken from '../../../hooks/useSiteToken';
|
import useSiteToken from '../../../hooks/useSiteToken';
|
||||||
import useLocale from '../../../hooks/useLocale';
|
import useLocale from '../../../hooks/useLocale';
|
||||||
import SwitchBtn from './SwitchBtn';
|
import SwitchBtn from './SwitchBtn';
|
||||||
@ -135,18 +133,6 @@ export interface HeaderProps {
|
|||||||
changeDirection: (direction: DirectionType) => void;
|
changeDirection: (direction: DirectionType) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
let docsearch: any;
|
|
||||||
const triggerDocSearchImport = () => {
|
|
||||||
if (docsearch) {
|
|
||||||
return Promise.resolve();
|
|
||||||
}
|
|
||||||
|
|
||||||
// @ts-ignore
|
|
||||||
return import('docsearch.js').then((ds) => {
|
|
||||||
docsearch = ds.default;
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const V5_NOTIFICATION = 'antd@4.0.0-notification-sent';
|
const V5_NOTIFICATION = 'antd@4.0.0-notification-sent';
|
||||||
const SHOULD_OPEN_ANT_DESIGN_MIRROR_MODAL = 'ANT_DESIGN_DO_NOT_OPEN_MIRROR_MODAL';
|
const SHOULD_OPEN_ANT_DESIGN_MIRROR_MODAL = 'ANT_DESIGN_DO_NOT_OPEN_MIRROR_MODAL';
|
||||||
|
|
||||||
@ -166,7 +152,6 @@ interface HeaderState {
|
|||||||
|
|
||||||
// ================================= Header =================================
|
// ================================= Header =================================
|
||||||
const Header: React.FC<HeaderProps> = (props) => {
|
const Header: React.FC<HeaderProps> = (props) => {
|
||||||
const intl = useIntl();
|
|
||||||
const { changeDirection } = props;
|
const { changeDirection } = props;
|
||||||
const [isClient, setIsClient] = React.useState(false);
|
const [isClient, setIsClient] = React.useState(false);
|
||||||
const [locale, lang] = useLocale(locales);
|
const [locale, lang] = useLocale(locales);
|
||||||
@ -207,7 +192,6 @@ const Header: React.FC<HeaderProps> = (props) => {
|
|||||||
const pingTimer = useRef<NodeJS.Timeout | null>(null);
|
const pingTimer = useRef<NodeJS.Timeout | null>(null);
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
const { pathname, search } = location;
|
const { pathname, search } = location;
|
||||||
const navigate = useNavigate();
|
|
||||||
|
|
||||||
const style = useStyle();
|
const style = useStyle();
|
||||||
|
|
||||||
@ -217,9 +201,6 @@ const Header: React.FC<HeaderProps> = (props) => {
|
|||||||
const onWindowResize = useCallback(() => {
|
const onWindowResize = useCallback(() => {
|
||||||
setHeaderState((prev) => ({ ...prev, windowWidth: window.innerWidth }));
|
setHeaderState((prev) => ({ ...prev, windowWidth: window.innerWidth }));
|
||||||
}, []);
|
}, []);
|
||||||
const onTriggerSearching = useCallback((searching: boolean) => {
|
|
||||||
setHeaderState((prev) => ({ ...prev, searching }));
|
|
||||||
}, []);
|
|
||||||
const handleShowMenu = useCallback(() => {
|
const handleShowMenu = useCallback(() => {
|
||||||
setHeaderState((prev) => ({ ...prev, menuVisible: true }));
|
setHeaderState((prev) => ({ ...prev, menuVisible: true }));
|
||||||
}, []);
|
}, []);
|
||||||
@ -358,6 +339,7 @@ const Header: React.FC<HeaderProps> = (props) => {
|
|||||||
let menu: (React.ReactElement | null)[] = [
|
let menu: (React.ReactElement | null)[] = [
|
||||||
navigationNode,
|
navigationNode,
|
||||||
<Popover
|
<Popover
|
||||||
|
key="version"
|
||||||
open={!!notify}
|
open={!!notify}
|
||||||
title={locale.title}
|
title={locale.title}
|
||||||
content={
|
content={
|
||||||
@ -422,24 +404,28 @@ const Header: React.FC<HeaderProps> = (props) => {
|
|||||||
onClick={onDirectionChange}
|
onClick={onDirectionChange}
|
||||||
value={direction === 'rtl' ? 2 : 1}
|
value={direction === 'rtl' ? 2 : 1}
|
||||||
label1={
|
label1={
|
||||||
<img src="https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*6k0CTJA-HxUAAAAAAAAAAAAADrJ8AQ/original" />
|
<img
|
||||||
|
src="https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*6k0CTJA-HxUAAAAAAAAAAAAADrJ8AQ/original"
|
||||||
|
alt="direction"
|
||||||
|
/>
|
||||||
}
|
}
|
||||||
tooltip1="LTR"
|
tooltip1="LTR"
|
||||||
label2={
|
label2={
|
||||||
<img src="https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*SZoaQqm2hwsAAAAAAAAAAAAADrJ8AQ/original" />
|
<img
|
||||||
|
src="https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*SZoaQqm2hwsAAAAAAAAAAAAADrJ8AQ/original"
|
||||||
|
alt="LTR"
|
||||||
|
/>
|
||||||
}
|
}
|
||||||
tooltip2="RTL"
|
tooltip2="RTL"
|
||||||
pure
|
pure
|
||||||
/>,
|
/>,
|
||||||
<a href="https://github.com/ant-design/ant-design" target="_blank">
|
<a
|
||||||
<SwitchBtn
|
|
||||||
key="github"
|
key="github"
|
||||||
value={1}
|
href="https://github.com/ant-design/ant-design"
|
||||||
label1={<GithubOutlined />}
|
target="_blank"
|
||||||
tooltip1="Github"
|
rel="noreferrer"
|
||||||
label2={null}
|
>
|
||||||
pure
|
<SwitchBtn value={1} label1={<GithubOutlined />} tooltip1="Github" label2={null} pure />
|
||||||
/>
|
|
||||||
</a>,
|
</a>,
|
||||||
];
|
];
|
||||||
|
|
||||||
@ -460,9 +446,9 @@ const Header: React.FC<HeaderProps> = (props) => {
|
|||||||
<header css={style.header} className={headerClassName}>
|
<header css={style.header} className={headerClassName}>
|
||||||
{isMobile && (
|
{isMobile && (
|
||||||
<ClassNames>
|
<ClassNames>
|
||||||
{({ css }) => (
|
{({ css: cssFn }) => (
|
||||||
<Popover
|
<Popover
|
||||||
overlayClassName={css(style.popoverMenu)}
|
overlayClassName={cssFn(style.popoverMenu)}
|
||||||
placement="bottomRight"
|
placement="bottomRight"
|
||||||
content={menu}
|
content={menu}
|
||||||
trigger="click"
|
trigger="click"
|
||||||
|
@ -2,10 +2,10 @@ import React, { useContext } from 'react';
|
|||||||
import { useSidebarData } from 'dumi';
|
import { useSidebarData } from 'dumi';
|
||||||
import { Affix, Col, Menu } from 'antd';
|
import { Affix, Col, Menu } from 'antd';
|
||||||
import MobileMenu from 'rc-drawer';
|
import MobileMenu from 'rc-drawer';
|
||||||
|
import { css } from '@emotion/react';
|
||||||
import SiteContext from '../SiteContext';
|
import SiteContext from '../SiteContext';
|
||||||
import useMenu from '../../../hooks/useMenu';
|
import useMenu from '../../../hooks/useMenu';
|
||||||
import useSiteToken from '../../../hooks/useSiteToken';
|
import useSiteToken from '../../../hooks/useSiteToken';
|
||||||
import { css } from '@emotion/react';
|
|
||||||
|
|
||||||
const useStyle = () => {
|
const useStyle = () => {
|
||||||
const { token } = useSiteToken();
|
const { token } = useSiteToken();
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import { createContext } from 'react';
|
import { createContext } from 'react';
|
||||||
import { ThemeConfig } from 'antd/es/config-provider/context';
|
import type { ThemeConfig } from 'antd/es/config-provider/context';
|
||||||
|
|
||||||
export type ThemeContextProps = {
|
export type ThemeContextProps = {
|
||||||
theme: ThemeConfig;
|
theme: ThemeConfig;
|
||||||
|
@ -3,6 +3,8 @@
|
|||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"jsx": "react-jsx",
|
"jsx": "react-jsx",
|
||||||
"jsxImportSource": "@emotion/react",
|
"jsxImportSource": "@emotion/react",
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"resolveJsonModule": true,
|
||||||
"baseUrl": "../",
|
"baseUrl": "../",
|
||||||
"paths": {
|
"paths": {
|
||||||
"@@/*": [".dumi/tmp/*"],
|
"@@/*": [".dumi/tmp/*"],
|
||||||
|
@ -11,6 +11,8 @@ lib/**/*
|
|||||||
locale
|
locale
|
||||||
server
|
server
|
||||||
.dumi/tmp
|
.dumi/tmp
|
||||||
|
.dumi/tmp-production
|
||||||
|
!.dumi/
|
||||||
node_modules
|
node_modules
|
||||||
_site
|
_site
|
||||||
dist
|
dist
|
||||||
|
16
.eslintrc.js
16
.eslintrc.js
@ -98,6 +98,22 @@ module.exports = {
|
|||||||
'react/no-access-state-in-setstate': 0,
|
'react/no-access-state-in-setstate': 0,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
files: ['.dumi/**/*.ts', '.dumi/**/*.tsx', '.dumi/**/*.js', '.dumi/**/*.jsx'],
|
||||||
|
rules: {
|
||||||
|
'import/no-extraneous-dependencies': 0,
|
||||||
|
'no-console': 0,
|
||||||
|
'compat/compat': 0,
|
||||||
|
'react/no-unstable-nested-components': 0,
|
||||||
|
'jsx-a11y/control-has-associated-label': 0,
|
||||||
|
'class-methods-use-this': 0,
|
||||||
|
'react/no-access-state-in-setstate': 0,
|
||||||
|
'react/no-unknown-property': ['error', { ignore: ['css'] }],
|
||||||
|
'react/no-array-index-key': 0,
|
||||||
|
'react/button-has-type': 0,
|
||||||
|
'react/no-danger': 0,
|
||||||
|
},
|
||||||
|
},
|
||||||
],
|
],
|
||||||
rules: {
|
rules: {
|
||||||
'react/jsx-one-expression-per-line': 0,
|
'react/jsx-one-expression-per-line': 0,
|
||||||
|
@ -1,3 +1,4 @@
|
|||||||
|
// @ts-nocheck
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { PoweroffOutlined } from '@ant-design/icons';
|
import { PoweroffOutlined } from '@ant-design/icons';
|
||||||
import { Button, Space } from 'antd';
|
import { Button, Space } from 'antd';
|
||||||
|
@ -4,14 +4,14 @@ import type {
|
|||||||
TourStepProps as RCTourStepProps,
|
TourStepProps as RCTourStepProps,
|
||||||
} from '@rc-component/tour';
|
} from '@rc-component/tour';
|
||||||
|
|
||||||
export type TourProps = Omit<RCTourProps, 'renderPanel'> & {
|
export interface TourProps extends Omit<RCTourProps, 'renderPanel'> {
|
||||||
steps?: TourStepProps[];
|
steps?: TourStepProps[];
|
||||||
className?: string;
|
className?: string;
|
||||||
prefixCls?: string;
|
prefixCls?: string;
|
||||||
current?: number;
|
current?: number;
|
||||||
stepRender?: (current: number, total: number) => ReactNode;
|
stepRender?: (current: number, total: number) => ReactNode;
|
||||||
type?: 'default' | 'primary'; // default 类型,影响底色与文字颜色
|
type?: 'default' | 'primary'; // default 类型,影响底色与文字颜色
|
||||||
};
|
}
|
||||||
|
|
||||||
export interface TourStepProps extends RCTourStepProps {
|
export interface TourStepProps extends RCTourStepProps {
|
||||||
cover?: ReactNode; // 展示的图片或者视频
|
cover?: ReactNode; // 展示的图片或者视频
|
||||||
|
@ -23,5 +23,5 @@
|
|||||||
"skipLibCheck": true,
|
"skipLibCheck": true,
|
||||||
"stripInternal": true
|
"stripInternal": true
|
||||||
},
|
},
|
||||||
"exclude": ["node_modules", "lib", "es", "components/*/demo"]
|
"exclude": ["node_modules", "lib", "es"]
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user