mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-07 09:26:06 +08:00
lijianan
GitHub
parent
46d733447a
commit
e4dd7096af
@ -4,7 +4,7 @@ import type { Project } from '@stackblitz/sdk';
|
|||||||
import { Alert, Badge, Tooltip, Space } from 'antd';
|
import { Alert, Badge, Tooltip, Space } from 'antd';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
import LZString from 'lz-string';
|
import LZString from 'lz-string';
|
||||||
import React from 'react';
|
import React, { useContext, useEffect, useRef, useState } from 'react';
|
||||||
import CopyToClipboard from 'react-copy-to-clipboard';
|
import CopyToClipboard from 'react-copy-to-clipboard';
|
||||||
import ReactDOM from 'react-dom';
|
import ReactDOM from 'react-dom';
|
||||||
import { FormattedMessage } from 'dumi';
|
import { FormattedMessage } from 'dumi';
|
||||||
@ -29,500 +29,440 @@ function compress(string: string): string {
|
|||||||
.replace(/=+$/, ''); // Remove ending '='
|
.replace(/=+$/, ''); // Remove ending '='
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const track = ({ type, demo }: { type: string; demo: string }) => {
|
||||||
|
if (!window.gtag) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
window.gtag('event', 'demo', { event_category: type, event_label: demo });
|
||||||
|
};
|
||||||
|
|
||||||
interface DemoProps {
|
interface DemoProps {
|
||||||
meta: any;
|
meta: any;
|
||||||
|
intl: any;
|
||||||
|
utils?: any;
|
||||||
src: string;
|
src: string;
|
||||||
content: string;
|
content: string;
|
||||||
preview: (react: typeof React, reactDOM: typeof ReactDOM) => React.ReactNode;
|
|
||||||
highlightedCodes: Record<PropertyKey, string>;
|
highlightedCodes: Record<PropertyKey, string>;
|
||||||
style: string;
|
style: string;
|
||||||
highlightedStyle: string;
|
highlightedStyle: string;
|
||||||
expand: boolean;
|
expand: boolean;
|
||||||
intl: any;
|
|
||||||
sourceCodes: Record<'jsx' | 'tsx', string>;
|
sourceCodes: Record<'jsx' | 'tsx', string>;
|
||||||
location: Location;
|
location: Location;
|
||||||
showRiddleButton: boolean;
|
showRiddleButton: boolean;
|
||||||
utils?: any;
|
preview: (react: typeof React, reactDOM: typeof ReactDOM) => React.ReactNode;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface DemoState {
|
const Demo: React.FC<DemoProps> = (props) => {
|
||||||
codeType?: string;
|
const {
|
||||||
copied?: boolean;
|
location,
|
||||||
codeExpand?: boolean;
|
sourceCodes,
|
||||||
copyTooltipOpen?: boolean | string;
|
meta,
|
||||||
}
|
src,
|
||||||
|
utils,
|
||||||
|
content,
|
||||||
|
highlightedCodes,
|
||||||
|
style,
|
||||||
|
highlightedStyle,
|
||||||
|
expand,
|
||||||
|
intl: { locale },
|
||||||
|
showRiddleButton,
|
||||||
|
preview,
|
||||||
|
} = props;
|
||||||
|
|
||||||
class Demo extends React.Component<DemoProps, DemoState> {
|
const liveDemo = useRef<React.ReactNode>(null);
|
||||||
static contextType = SiteContext;
|
const anchorRef = useRef<HTMLAnchorElement>(null);
|
||||||
|
const codeSandboxIconRef = useRef<HTMLFormElement>(null);
|
||||||
|
const riddleIconRef = useRef<HTMLFormElement>(null);
|
||||||
|
const codepenIconRef = useRef<HTMLFormElement>(null);
|
||||||
|
const [codeExpand, setCodeExpand] = useState<boolean>(false);
|
||||||
|
const [copyTooltipOpen, setCopyTooltipOpen] = useState<boolean>(false);
|
||||||
|
const [copied, setCopied] = useState<boolean>(false);
|
||||||
|
const [codeType, setCodeType] = useState<string>('tsx');
|
||||||
|
|
||||||
declare context: SiteContextProps;
|
const { theme } = useContext<SiteContextProps>(SiteContext);
|
||||||
|
|
||||||
liveDemo: any;
|
const handleCodeExpand = (demo: string) => {
|
||||||
|
setCodeExpand(!codeExpand);
|
||||||
iframeRef = React.createRef<HTMLIFrameElement>();
|
track({ type: 'expand', demo });
|
||||||
|
|
||||||
anchorRef = React.createRef<HTMLAnchorElement>();
|
|
||||||
|
|
||||||
codeSandboxIconRef = React.createRef<HTMLFormElement>();
|
|
||||||
|
|
||||||
riddleIconRef = React.createRef<HTMLFormElement>();
|
|
||||||
|
|
||||||
codepenIconRef = React.createRef<HTMLFormElement>();
|
|
||||||
|
|
||||||
state: DemoState = {
|
|
||||||
codeExpand: false,
|
|
||||||
copied: false,
|
|
||||||
copyTooltipOpen: false,
|
|
||||||
codeType: 'tsx',
|
|
||||||
};
|
};
|
||||||
|
|
||||||
componentDidMount() {
|
const handleCodeCopied = (demo: string) => {
|
||||||
const { meta, location } = this.props;
|
setCopied(true);
|
||||||
if (meta.id === location.hash.slice(1)) {
|
track({ type: 'copy', demo });
|
||||||
this.anchorRef.current?.click();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
shouldComponentUpdate(nextProps: DemoProps, nextState: DemoState) {
|
|
||||||
const { codeExpand, copied, copyTooltipOpen, codeType } = this.state;
|
|
||||||
const { expand, showRiddleButton } = this.props;
|
|
||||||
return (
|
|
||||||
(codeExpand || expand) !== (nextState.codeExpand || nextProps.expand) ||
|
|
||||||
copied !== nextState.copied ||
|
|
||||||
copyTooltipOpen !== nextState.copyTooltipOpen ||
|
|
||||||
codeType !== nextState.copyTooltipOpen ||
|
|
||||||
nextProps.showRiddleButton !== showRiddleButton
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
getSourceCode = () => {
|
|
||||||
const { sourceCodes } = this.props;
|
|
||||||
return [sourceCodes.jsx, sourceCodes.tsx];
|
|
||||||
};
|
};
|
||||||
|
|
||||||
handleCodeExpand = (demo: string) => {
|
const onCopyTooltipOpenChange = (open: boolean) => {
|
||||||
const { codeExpand } = this.state;
|
setCopyTooltipOpen(open);
|
||||||
this.setState({ codeExpand: !codeExpand });
|
|
||||||
this.track({ type: 'expand', demo });
|
|
||||||
};
|
|
||||||
|
|
||||||
handleCodeCopied = (demo: string) => {
|
|
||||||
this.setState({ copied: true });
|
|
||||||
this.track({ type: 'copy', demo });
|
|
||||||
};
|
|
||||||
|
|
||||||
onCopyTooltipOpenChange = (open: boolean) => {
|
|
||||||
if (open) {
|
if (open) {
|
||||||
this.setState({ copyTooltipOpen: open, copied: false });
|
setCopied(false);
|
||||||
return;
|
|
||||||
}
|
}
|
||||||
this.setState({ copyTooltipOpen: open });
|
|
||||||
};
|
};
|
||||||
|
|
||||||
track = ({ type, demo }: { type: string; demo: string }) => {
|
useEffect(() => {
|
||||||
if (!window.gtag) {
|
if (meta.id === location.hash.slice(1)) {
|
||||||
return;
|
anchorRef.current?.click();
|
||||||
}
|
}
|
||||||
window.gtag('event', 'demo', {
|
}, []);
|
||||||
event_category: type,
|
|
||||||
event_label: demo,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
render() {
|
if (!liveDemo.current) {
|
||||||
const { state } = this;
|
liveDemo.current = meta.iframe ? (
|
||||||
const { props } = this;
|
<BrowserFrame>
|
||||||
const site = this.context;
|
<iframe src={src} height={meta.iframe} title="demo" className="iframe-demo" />
|
||||||
const {
|
</BrowserFrame>
|
||||||
meta,
|
) : (
|
||||||
src,
|
preview(React, ReactDOM)
|
||||||
content,
|
|
||||||
preview,
|
|
||||||
highlightedCodes,
|
|
||||||
style,
|
|
||||||
highlightedStyle,
|
|
||||||
expand,
|
|
||||||
intl: { locale },
|
|
||||||
showRiddleButton,
|
|
||||||
} = props;
|
|
||||||
const { copied, copyTooltipOpen, codeType } = state;
|
|
||||||
if (!this.liveDemo) {
|
|
||||||
this.liveDemo = meta.iframe ? (
|
|
||||||
<BrowserFrame>
|
|
||||||
<iframe
|
|
||||||
ref={this.iframeRef}
|
|
||||||
src={src}
|
|
||||||
height={meta.iframe}
|
|
||||||
title="demo"
|
|
||||||
className="iframe-demo"
|
|
||||||
/>
|
|
||||||
</BrowserFrame>
|
|
||||||
) : (
|
|
||||||
preview(React, ReactDOM)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
const codeExpand = this.state.codeExpand || expand;
|
|
||||||
const codeBoxClass = classNames('code-box', {
|
|
||||||
expand: codeExpand,
|
|
||||||
'code-box-debug': meta.debug,
|
|
||||||
});
|
|
||||||
const localizedTitle = meta?.title[locale] || meta?.title;
|
|
||||||
const localizeIntro = content[locale] || content;
|
|
||||||
const introChildren = <div dangerouslySetInnerHTML={{ __html: localizeIntro }} />;
|
|
||||||
|
|
||||||
const highlightClass = classNames('highlight-wrapper', {
|
|
||||||
'highlight-wrapper-expand': codeExpand,
|
|
||||||
});
|
|
||||||
const html = `<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
||||||
<meta name="theme-color" content="#000000">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="container" style="padding: 24px" />
|
|
||||||
<script>const mountNode = document.getElementById('container');</script>
|
|
||||||
</body>
|
|
||||||
</html>`;
|
|
||||||
|
|
||||||
const tsconfig = `{
|
|
||||||
"compilerOptions": {
|
|
||||||
"jsx": "react-jsx",
|
|
||||||
"target": "esnext",
|
|
||||||
"module": "esnext",
|
|
||||||
"esModuleInterop": true,
|
|
||||||
"moduleResolution": "node",
|
|
||||||
}
|
|
||||||
}`;
|
|
||||||
|
|
||||||
const [sourceCode, sourceCodeTyped] = this.getSourceCode();
|
|
||||||
const suffix = codeType === 'tsx' ? 'tsx' : 'js';
|
|
||||||
|
|
||||||
const dependencies: Record<PropertyKey, string> = sourceCode.split('\n').reduce(
|
|
||||||
(acc: Record<string, string>, line) => {
|
|
||||||
const matches = line.match(/import .+? from '(.+)';$/);
|
|
||||||
if (matches && matches[1] && !line.includes('antd')) {
|
|
||||||
const paths = matches[1].split('/');
|
|
||||||
|
|
||||||
if (paths.length) {
|
|
||||||
const dep = paths[0].startsWith('@') ? `${paths[0]}/${paths[1]}` : paths[0];
|
|
||||||
acc[dep] = 'latest';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return acc;
|
|
||||||
},
|
|
||||||
{ antd: version },
|
|
||||||
);
|
);
|
||||||
|
}
|
||||||
|
|
||||||
dependencies['@ant-design/icons'] = 'latest';
|
const codeBoxClass = classNames('code-box', {
|
||||||
if (suffix === 'tsx') {
|
expand: codeExpand || expand,
|
||||||
dependencies['@types/react'] = '^18.0.0';
|
'code-box-debug': meta.debug,
|
||||||
dependencies['@types/react-dom'] = '^18.0.0';
|
});
|
||||||
|
|
||||||
|
const localizedTitle = meta?.title[locale] || meta?.title;
|
||||||
|
const localizeIntro = content[locale] || content;
|
||||||
|
const introChildren = <div dangerouslySetInnerHTML={{ __html: localizeIntro }} />;
|
||||||
|
const highlightClass = classNames('highlight-wrapper', {
|
||||||
|
'highlight-wrapper-expand': codeExpand,
|
||||||
|
});
|
||||||
|
|
||||||
|
const html = `
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||||
|
<meta name="theme-color" content="#000000">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="container" style="padding: 24px" />
|
||||||
|
<script>const mountNode = document.getElementById('container');</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
`;
|
||||||
|
|
||||||
|
const tsconfig = `
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
"target": "esnext",
|
||||||
|
"module": "esnext",
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"moduleResolution": "node",
|
||||||
|
}
|
||||||
}
|
}
|
||||||
dependencies.react = '^18.0.0';
|
`;
|
||||||
dependencies['react-dom'] = '^18.0.0';
|
|
||||||
|
|
||||||
const codepenPrefillConfig = {
|
const suffix = codeType === 'tsx' ? 'tsx' : 'js';
|
||||||
title: `${localizedTitle} - antd@${dependencies.antd}`,
|
|
||||||
html,
|
|
||||||
js: `${'const { createRoot } = ReactDOM;\n'}${sourceCode
|
|
||||||
.replace(/import\s+(?:React,\s+)?{(\s+[^}]*\s+)}\s+from\s+'react'/, `const { $1 } = React;`)
|
|
||||||
.replace(/import\s+{(\s+[^}]*\s+)}\s+from\s+'antd';/, 'const { $1 } = antd;')
|
|
||||||
.replace(/import\s+{(\s+[^}]*\s+)}\s+from\s+'@ant-design\/icons';/, 'const { $1 } = icons;')
|
|
||||||
.replace("import moment from 'moment';", '')
|
|
||||||
.replace("import React from 'react';", '')
|
|
||||||
.replace(/import\s+{\s+(.*)\s+}\s+from\s+'react-router';/, 'const { $1 } = ReactRouter;')
|
|
||||||
.replace(
|
|
||||||
/import\s+{\s+(.*)\s+}\s+from\s+'react-router-dom';/,
|
|
||||||
'const { $1 } = ReactRouterDOM;',
|
|
||||||
)
|
|
||||||
.replace(/([A-Za-z]*)\s+as\s+([A-Za-z]*)/, '$1:$2')
|
|
||||||
.replace(
|
|
||||||
/export default/,
|
|
||||||
'const ComponentDemo =',
|
|
||||||
)}\n\ncreateRoot(mountNode).render(<ComponentDemo />);\n`,
|
|
||||||
editors: '001',
|
|
||||||
css: '',
|
|
||||||
js_external: [
|
|
||||||
'react@18/umd/react.development.js',
|
|
||||||
'react-dom@18/umd/react-dom.development.js',
|
|
||||||
'dayjs@1/dayjs.min.js',
|
|
||||||
`antd@${version}/dist/antd-with-locales.js`,
|
|
||||||
`@ant-design/icons/dist/index.umd.js`,
|
|
||||||
'react-router-dom/dist/umd/react-router-dom.production.min.js',
|
|
||||||
'react-router/dist/umd/react-router.production.min.js',
|
|
||||||
]
|
|
||||||
.map((url) => `https://unpkg.com/${url}`)
|
|
||||||
.join(';'),
|
|
||||||
js_pre_processor: 'typescript',
|
|
||||||
};
|
|
||||||
|
|
||||||
const riddlePrefillConfig = {
|
const dependencies: Record<PropertyKey, string> = sourceCodes?.jsx.split('\n').reduce(
|
||||||
title: `${localizedTitle} - antd@${dependencies.antd}`,
|
(acc, line) => {
|
||||||
js: `${
|
const matches = line.match(/import .+? from '(.+)';$/);
|
||||||
/import React(\D*)from 'react';/.test(sourceCode) ? '' : `import React from 'react';\n`
|
if (matches && matches[1] && !line.includes('antd')) {
|
||||||
}import { createRoot } from 'react-dom/client';\n${sourceCode.replace(
|
const paths = matches[1].split('/');
|
||||||
|
if (paths.length) {
|
||||||
|
const dep = paths[0].startsWith('@') ? `${paths[0]}/${paths[1]}` : paths[0];
|
||||||
|
acc[dep] = 'latest';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return acc;
|
||||||
|
},
|
||||||
|
{ antd: version },
|
||||||
|
);
|
||||||
|
|
||||||
|
dependencies['@ant-design/icons'] = 'latest';
|
||||||
|
|
||||||
|
if (suffix === 'tsx') {
|
||||||
|
dependencies['@types/react'] = '^18.0.0';
|
||||||
|
dependencies['@types/react-dom'] = '^18.0.0';
|
||||||
|
}
|
||||||
|
|
||||||
|
dependencies.react = '^18.0.0';
|
||||||
|
dependencies['react-dom'] = '^18.0.0';
|
||||||
|
|
||||||
|
const codepenPrefillConfig = {
|
||||||
|
title: `${localizedTitle} - antd@${dependencies.antd}`,
|
||||||
|
html,
|
||||||
|
js: `${'const { createRoot } = ReactDOM;\n'}${sourceCodes?.jsx
|
||||||
|
.replace(/import\s+(?:React,\s+)?{(\s+[^}]*\s+)}\s+from\s+'react'/, `const { $1 } = React;`)
|
||||||
|
.replace(/import\s+{(\s+[^}]*\s+)}\s+from\s+'antd';/, 'const { $1 } = antd;')
|
||||||
|
.replace(/import\s+{(\s+[^}]*\s+)}\s+from\s+'@ant-design\/icons';/, 'const { $1 } = icons;')
|
||||||
|
.replace("import moment from 'moment';", '')
|
||||||
|
.replace("import React from 'react';", '')
|
||||||
|
.replace(/import\s+{\s+(.*)\s+}\s+from\s+'react-router';/, 'const { $1 } = ReactRouter;')
|
||||||
|
.replace(
|
||||||
|
/import\s+{\s+(.*)\s+}\s+from\s+'react-router-dom';/,
|
||||||
|
'const { $1 } = ReactRouterDOM;',
|
||||||
|
)
|
||||||
|
.replace(/([A-Za-z]*)\s+as\s+([A-Za-z]*)/, '$1:$2')
|
||||||
|
.replace(
|
||||||
/export default/,
|
/export default/,
|
||||||
'const ComponentDemo =',
|
'const ComponentDemo =',
|
||||||
)}\n\ncreateRoot(mountNode).render(<ComponentDemo />);\n`,
|
)}\n\ncreateRoot(mountNode).render(<ComponentDemo />);\n`,
|
||||||
css: '',
|
editors: '001',
|
||||||
json: JSON.stringify(
|
css: '',
|
||||||
{
|
js_external: [
|
||||||
name: 'antd-demo',
|
'react@18/umd/react.development.js',
|
||||||
dependencies,
|
'react-dom@18/umd/react-dom.development.js',
|
||||||
},
|
'dayjs@1/dayjs.min.js',
|
||||||
null,
|
`antd@${version}/dist/antd-with-locales.js`,
|
||||||
2,
|
`@ant-design/icons/dist/index.umd.js`,
|
||||||
),
|
'react-router-dom/dist/umd/react-router-dom.production.min.js',
|
||||||
};
|
'react-router/dist/umd/react-router.production.min.js',
|
||||||
|
]
|
||||||
|
.map((url) => `https://unpkg.com/${url}`)
|
||||||
|
.join(';'),
|
||||||
|
js_pre_processor: 'typescript',
|
||||||
|
};
|
||||||
|
|
||||||
// Reorder source code
|
const riddlePrefillConfig = {
|
||||||
let parsedSourceCode = suffix === 'tsx' ? sourceCodeTyped : sourceCode;
|
title: `${localizedTitle} - antd@${dependencies.antd}`,
|
||||||
let importReactContent = "import React from 'react';";
|
js: `${
|
||||||
|
/import React(\D*)from 'react';/.test(sourceCodes?.jsx) ? '' : `import React from 'react';\n`
|
||||||
|
}import { createRoot } from 'react-dom/client';\n${sourceCodes?.jsx.replace(
|
||||||
|
/export default/,
|
||||||
|
'const ComponentDemo =',
|
||||||
|
)}\n\ncreateRoot(mountNode).render(<ComponentDemo />);\n`,
|
||||||
|
css: '',
|
||||||
|
json: JSON.stringify({ name: 'antd-demo', dependencies }, null, 2),
|
||||||
|
};
|
||||||
|
|
||||||
const importReactReg = /import React(\D*)from 'react';/;
|
// Reorder source code
|
||||||
const matchImportReact = parsedSourceCode.match(importReactReg);
|
let parsedSourceCode = suffix === 'tsx' ? sourceCodes?.tsx : sourceCodes?.jsx;
|
||||||
if (matchImportReact) {
|
let importReactContent = "import React from 'react';";
|
||||||
[importReactContent] = matchImportReact;
|
const importReactReg = /import React(\D*)from 'react';/;
|
||||||
parsedSourceCode = parsedSourceCode.replace(importReactReg, '').trim();
|
const matchImportReact = parsedSourceCode.match(importReactReg);
|
||||||
}
|
if (matchImportReact) {
|
||||||
|
[importReactContent] = matchImportReact;
|
||||||
const demoJsContent = `
|
parsedSourceCode = parsedSourceCode.replace(importReactReg, '').trim();
|
||||||
${importReactContent}
|
|
||||||
import './index.css';
|
|
||||||
${parsedSourceCode}
|
|
||||||
`.trim();
|
|
||||||
const indexCssContent = (style || '')
|
|
||||||
.trim()
|
|
||||||
.replace(new RegExp(`#${meta.id}\\s*`, 'g'), '')
|
|
||||||
.replace('</style>', '')
|
|
||||||
.replace('<style>', '');
|
|
||||||
|
|
||||||
const indexJsContent = `
|
|
||||||
import React from 'react';
|
|
||||||
import { createRoot } from 'react-dom/client';
|
|
||||||
import Demo from './demo';
|
|
||||||
|
|
||||||
createRoot(document.getElementById('container')).render(<Demo />);
|
|
||||||
`;
|
|
||||||
|
|
||||||
const codesandboxPackage = {
|
|
||||||
title: `${localizedTitle} - antd@${dependencies.antd}`,
|
|
||||||
main: 'index.js',
|
|
||||||
dependencies: {
|
|
||||||
...dependencies,
|
|
||||||
react: '^18.0.0',
|
|
||||||
'react-dom': '^18.0.0',
|
|
||||||
'react-scripts': '^4.0.0',
|
|
||||||
},
|
|
||||||
devDependencies: {
|
|
||||||
typescript: '^4.0.5',
|
|
||||||
},
|
|
||||||
scripts: {
|
|
||||||
start: 'react-scripts start',
|
|
||||||
build: 'react-scripts build',
|
|
||||||
test: 'react-scripts test --env=jsdom',
|
|
||||||
eject: 'react-scripts eject',
|
|
||||||
},
|
|
||||||
browserslist: ['>0.2%', 'not dead'],
|
|
||||||
};
|
|
||||||
const codesanboxPrefillConfig = {
|
|
||||||
files: {
|
|
||||||
'package.json': { content: codesandboxPackage },
|
|
||||||
'index.css': { content: indexCssContent },
|
|
||||||
[`index.${suffix}`]: { content: indexJsContent },
|
|
||||||
[`demo.${suffix}`]: { content: demoJsContent },
|
|
||||||
'index.html': {
|
|
||||||
content: html,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
const stackblitzPrefillConfig: Project = {
|
|
||||||
title: `${localizedTitle} - antd@${dependencies.antd}`,
|
|
||||||
template: 'create-react-app',
|
|
||||||
dependencies,
|
|
||||||
description: '',
|
|
||||||
files: {
|
|
||||||
'index.css': indexCssContent,
|
|
||||||
[`index.${suffix}`]: indexJsContent,
|
|
||||||
[`demo.${suffix}`]: demoJsContent,
|
|
||||||
'index.html': html,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
if (suffix === 'tsx') {
|
|
||||||
stackblitzPrefillConfig.files['tsconfig.json'] = tsconfig;
|
|
||||||
}
|
|
||||||
|
|
||||||
const backgroundGrey = site.theme.includes('dark') ? '#303030' : '#f0f2f5';
|
|
||||||
const codeBoxDemoStyle: React.CSSProperties = {
|
|
||||||
padding: meta.iframe || meta.compact ? 0 : undefined,
|
|
||||||
overflow: meta.iframe || meta.compact ? 'hidden' : undefined,
|
|
||||||
background: meta.background === 'grey' ? backgroundGrey : undefined,
|
|
||||||
};
|
|
||||||
|
|
||||||
const codeBox = (
|
|
||||||
<section className={codeBoxClass} id={meta.id}>
|
|
||||||
<section className="code-box-demo" style={codeBoxDemoStyle}>
|
|
||||||
<ErrorBoundary>
|
|
||||||
<React.StrictMode>{this.liveDemo}</React.StrictMode>
|
|
||||||
</ErrorBoundary>
|
|
||||||
{style ? <style dangerouslySetInnerHTML={{ __html: style }} /> : null}
|
|
||||||
</section>
|
|
||||||
<section className="code-box-meta markdown">
|
|
||||||
<div className="code-box-title">
|
|
||||||
<Tooltip title={meta.debug ? <FormattedMessage id="app.demo.debug" /> : ''}>
|
|
||||||
<a href={`#${meta.id}`} ref={this.anchorRef}>
|
|
||||||
{localizedTitle}
|
|
||||||
</a>
|
|
||||||
</Tooltip>
|
|
||||||
<EditButton
|
|
||||||
title={<FormattedMessage id="app.content.edit-demo" />}
|
|
||||||
filename={meta.filename}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="code-box-description">{introChildren}</div>
|
|
||||||
<Space wrap size="middle" className="code-box-actions">
|
|
||||||
{showRiddleButton ? (
|
|
||||||
<form
|
|
||||||
className="code-box-code-action"
|
|
||||||
action="//riddle.alibaba-inc.com/riddles/define"
|
|
||||||
method="POST"
|
|
||||||
target="_blank"
|
|
||||||
ref={this.riddleIconRef}
|
|
||||||
onClick={() => {
|
|
||||||
this.track({ type: 'riddle', demo: meta.id });
|
|
||||||
this.riddleIconRef.current?.submit();
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<input type="hidden" name="data" value={JSON.stringify(riddlePrefillConfig)} />
|
|
||||||
<Tooltip title={<FormattedMessage id="app.demo.riddle" />}>
|
|
||||||
<RiddleIcon className="code-box-riddle" />
|
|
||||||
</Tooltip>
|
|
||||||
</form>
|
|
||||||
) : null}
|
|
||||||
<form
|
|
||||||
className="code-box-code-action"
|
|
||||||
action="https://codesandbox.io/api/v1/sandboxes/define"
|
|
||||||
method="POST"
|
|
||||||
target="_blank"
|
|
||||||
ref={this.codeSandboxIconRef}
|
|
||||||
onClick={() => {
|
|
||||||
this.track({ type: 'codesandbox', demo: meta.id });
|
|
||||||
this.codeSandboxIconRef.current?.submit();
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
type="hidden"
|
|
||||||
name="parameters"
|
|
||||||
value={compress(JSON.stringify(codesanboxPrefillConfig))}
|
|
||||||
/>
|
|
||||||
<Tooltip title={<FormattedMessage id="app.demo.codesandbox" />}>
|
|
||||||
<CodeSandboxIcon className="code-box-codesandbox" />
|
|
||||||
</Tooltip>
|
|
||||||
</form>
|
|
||||||
<form
|
|
||||||
className="code-box-code-action"
|
|
||||||
action="https://codepen.io/pen/define"
|
|
||||||
method="POST"
|
|
||||||
target="_blank"
|
|
||||||
ref={this.codepenIconRef}
|
|
||||||
onClick={() => {
|
|
||||||
this.track({ type: 'codepen', demo: meta.id });
|
|
||||||
this.codepenIconRef.current?.submit();
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<input type="hidden" name="data" value={JSON.stringify(codepenPrefillConfig)} />
|
|
||||||
<Tooltip title={<FormattedMessage id="app.demo.codepen" />}>
|
|
||||||
<CodePenIcon className="code-box-codepen" />
|
|
||||||
</Tooltip>
|
|
||||||
</form>
|
|
||||||
<Tooltip title={<FormattedMessage id="app.demo.stackblitz" />}>
|
|
||||||
<span
|
|
||||||
className="code-box-code-action"
|
|
||||||
onClick={() => {
|
|
||||||
this.track({ type: 'stackblitz', demo: meta.id });
|
|
||||||
stackblitzSdk.openProject(stackblitzPrefillConfig, {
|
|
||||||
openFile: [`demo.${suffix}`],
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<ThunderboltOutlined className="code-box-stackblitz" />
|
|
||||||
</span>
|
|
||||||
</Tooltip>
|
|
||||||
<CopyToClipboard text={sourceCodeTyped} onCopy={() => this.handleCodeCopied(meta.id)}>
|
|
||||||
<Tooltip
|
|
||||||
open={copyTooltipOpen as boolean}
|
|
||||||
onOpenChange={this.onCopyTooltipOpenChange}
|
|
||||||
title={<FormattedMessage id={`app.demo.${copied ? 'copied' : 'copy'}`} />}
|
|
||||||
>
|
|
||||||
{React.createElement(copied && copyTooltipOpen ? CheckOutlined : SnippetsOutlined, {
|
|
||||||
className: 'code-box-code-copy code-box-code-action',
|
|
||||||
})}
|
|
||||||
</Tooltip>
|
|
||||||
</CopyToClipboard>
|
|
||||||
<Tooltip title={<FormattedMessage id="app.demo.separate" />}>
|
|
||||||
<a className="code-box-code-action" target="_blank" rel="noreferrer" href={src}>
|
|
||||||
<ExternalLinkIcon className="code-box-separate" />
|
|
||||||
</a>
|
|
||||||
</Tooltip>
|
|
||||||
|
|
||||||
<Tooltip
|
|
||||||
title={<FormattedMessage id={`app.demo.code.${codeExpand ? 'hide' : 'show'}`} />}
|
|
||||||
>
|
|
||||||
<div className="code-expand-icon code-box-code-action">
|
|
||||||
<img
|
|
||||||
alt="expand code"
|
|
||||||
src={
|
|
||||||
site.theme.includes('dark')
|
|
||||||
? 'https://gw.alipayobjects.com/zos/antfincdn/btT3qDZn1U/wSAkBuJFbdxsosKKpqyq.svg'
|
|
||||||
: 'https://gw.alipayobjects.com/zos/antfincdn/Z5c7kzvi30/expand.svg'
|
|
||||||
}
|
|
||||||
className={codeExpand ? 'code-expand-icon-hide' : 'code-expand-icon-show'}
|
|
||||||
onClick={() => this.handleCodeExpand(meta.id)}
|
|
||||||
/>
|
|
||||||
<img
|
|
||||||
alt="expand code"
|
|
||||||
src={
|
|
||||||
site.theme.includes('dark')
|
|
||||||
? 'https://gw.alipayobjects.com/zos/antfincdn/CjZPwcKUG3/OpROPHYqWmrMDBFMZtKF.svg'
|
|
||||||
: 'https://gw.alipayobjects.com/zos/antfincdn/4zAaozCvUH/unexpand.svg'
|
|
||||||
}
|
|
||||||
className={codeExpand ? 'code-expand-icon-show' : 'code-expand-icon-hide'}
|
|
||||||
onClick={() => this.handleCodeExpand(meta.id)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</Tooltip>
|
|
||||||
</Space>
|
|
||||||
</section>
|
|
||||||
<section className={highlightClass} key="code">
|
|
||||||
<CodePreview
|
|
||||||
codes={highlightedCodes}
|
|
||||||
toReactComponent={props.utils?.toReactComponent}
|
|
||||||
onCodeTypeChange={(type) => this.setState({ codeType: type })}
|
|
||||||
/>
|
|
||||||
{highlightedStyle ? (
|
|
||||||
<div key="style" className="highlight">
|
|
||||||
<pre>
|
|
||||||
<code className="css" dangerouslySetInnerHTML={{ __html: highlightedStyle }} />
|
|
||||||
</pre>
|
|
||||||
</div>
|
|
||||||
) : null}
|
|
||||||
</section>
|
|
||||||
</section>
|
|
||||||
);
|
|
||||||
|
|
||||||
if (meta.version) {
|
|
||||||
return (
|
|
||||||
<Badge.Ribbon text={meta.version} color={meta.version.includes('<') ? 'red' : undefined}>
|
|
||||||
{codeBox}
|
|
||||||
</Badge.Ribbon>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return codeBox;
|
|
||||||
}
|
}
|
||||||
}
|
const demoJsContent = `
|
||||||
|
${importReactContent}
|
||||||
|
import './index.css';
|
||||||
|
${parsedSourceCode}
|
||||||
|
`.trim();
|
||||||
|
const indexCssContent = (style || '')
|
||||||
|
.trim()
|
||||||
|
.replace(new RegExp(`#${meta.id}\\s*`, 'g'), '')
|
||||||
|
.replace('</style>', '')
|
||||||
|
.replace('<style>', '');
|
||||||
|
|
||||||
|
const indexJsContent = `
|
||||||
|
import React from 'react';
|
||||||
|
import { createRoot } from 'react-dom/client';
|
||||||
|
import Demo from './demo';
|
||||||
|
|
||||||
|
createRoot(document.getElementById('container')).render(<Demo />);
|
||||||
|
`;
|
||||||
|
|
||||||
|
const codesandboxPackage = {
|
||||||
|
title: `${localizedTitle} - antd@${dependencies.antd}`,
|
||||||
|
main: 'index.js',
|
||||||
|
dependencies: {
|
||||||
|
...dependencies,
|
||||||
|
react: '^18.0.0',
|
||||||
|
'react-dom': '^18.0.0',
|
||||||
|
'react-scripts': '^4.0.0',
|
||||||
|
},
|
||||||
|
devDependencies: {
|
||||||
|
typescript: '^4.0.5',
|
||||||
|
},
|
||||||
|
scripts: {
|
||||||
|
start: 'react-scripts start',
|
||||||
|
build: 'react-scripts build',
|
||||||
|
test: 'react-scripts test --env=jsdom',
|
||||||
|
eject: 'react-scripts eject',
|
||||||
|
},
|
||||||
|
browserslist: ['>0.2%', 'not dead'],
|
||||||
|
};
|
||||||
|
|
||||||
|
const codesanboxPrefillConfig = {
|
||||||
|
files: {
|
||||||
|
'package.json': { content: codesandboxPackage },
|
||||||
|
'index.css': { content: indexCssContent },
|
||||||
|
[`index.${suffix}`]: { content: indexJsContent },
|
||||||
|
[`demo.${suffix}`]: { content: demoJsContent },
|
||||||
|
'index.html': {
|
||||||
|
content: html,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const stackblitzPrefillConfig: Project = {
|
||||||
|
title: `${localizedTitle} - antd@${dependencies.antd}`,
|
||||||
|
template: 'create-react-app',
|
||||||
|
dependencies,
|
||||||
|
description: '',
|
||||||
|
files: {
|
||||||
|
'index.css': indexCssContent,
|
||||||
|
[`index.${suffix}`]: indexJsContent,
|
||||||
|
[`demo.${suffix}`]: demoJsContent,
|
||||||
|
'index.html': html,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
if (suffix === 'tsx') {
|
||||||
|
stackblitzPrefillConfig.files['tsconfig.json'] = tsconfig;
|
||||||
|
}
|
||||||
|
let codeBox: React.ReactNode = (
|
||||||
|
<section className={codeBoxClass} id={meta.id}>
|
||||||
|
<section className="code-box-demo" data-compact={meta.compact}>
|
||||||
|
<ErrorBoundary>
|
||||||
|
<React.StrictMode>{liveDemo.current}</React.StrictMode>
|
||||||
|
</ErrorBoundary>
|
||||||
|
{style ? <style dangerouslySetInnerHTML={{ __html: style }} /> : null}
|
||||||
|
</section>
|
||||||
|
<section className="code-box-meta markdown">
|
||||||
|
<div className="code-box-title">
|
||||||
|
<Tooltip title={meta.debug ? <FormattedMessage id="app.demo.debug" /> : ''}>
|
||||||
|
<a href={`#${meta.id}`} ref={anchorRef}>
|
||||||
|
{localizedTitle}
|
||||||
|
</a>
|
||||||
|
</Tooltip>
|
||||||
|
<EditButton
|
||||||
|
title={<FormattedMessage id="app.content.edit-demo" />}
|
||||||
|
filename={meta.filename}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="code-box-description">{introChildren}</div>
|
||||||
|
<Space wrap size="middle" className="code-box-actions">
|
||||||
|
{showRiddleButton ? (
|
||||||
|
<form
|
||||||
|
className="code-box-code-action"
|
||||||
|
action="//riddle.alibaba-inc.com/riddles/define"
|
||||||
|
method="POST"
|
||||||
|
target="_blank"
|
||||||
|
ref={riddleIconRef}
|
||||||
|
onClick={() => {
|
||||||
|
track({ type: 'riddle', demo: meta.id });
|
||||||
|
riddleIconRef.current?.submit();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<input type="hidden" name="data" value={JSON.stringify(riddlePrefillConfig)} />
|
||||||
|
<Tooltip title={<FormattedMessage id="app.demo.riddle" />}>
|
||||||
|
<RiddleIcon className="code-box-riddle" />
|
||||||
|
</Tooltip>
|
||||||
|
</form>
|
||||||
|
) : null}
|
||||||
|
<form
|
||||||
|
className="code-box-code-action"
|
||||||
|
action="https://codesandbox.io/api/v1/sandboxes/define"
|
||||||
|
method="POST"
|
||||||
|
target="_blank"
|
||||||
|
ref={codeSandboxIconRef}
|
||||||
|
onClick={() => {
|
||||||
|
track({ type: 'codesandbox', demo: meta.id });
|
||||||
|
codeSandboxIconRef.current?.submit();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="hidden"
|
||||||
|
name="parameters"
|
||||||
|
value={compress(JSON.stringify(codesanboxPrefillConfig))}
|
||||||
|
/>
|
||||||
|
<Tooltip title={<FormattedMessage id="app.demo.codesandbox" />}>
|
||||||
|
<CodeSandboxIcon className="code-box-codesandbox" />
|
||||||
|
</Tooltip>
|
||||||
|
</form>
|
||||||
|
<form
|
||||||
|
className="code-box-code-action"
|
||||||
|
action="https://codepen.io/pen/define"
|
||||||
|
method="POST"
|
||||||
|
target="_blank"
|
||||||
|
ref={codepenIconRef}
|
||||||
|
onClick={() => {
|
||||||
|
track({ type: 'codepen', demo: meta.id });
|
||||||
|
codepenIconRef.current?.submit();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<input type="hidden" name="data" value={JSON.stringify(codepenPrefillConfig)} />
|
||||||
|
<Tooltip title={<FormattedMessage id="app.demo.codepen" />}>
|
||||||
|
<CodePenIcon className="code-box-codepen" />
|
||||||
|
</Tooltip>
|
||||||
|
</form>
|
||||||
|
<Tooltip title={<FormattedMessage id="app.demo.stackblitz" />}>
|
||||||
|
<span
|
||||||
|
className="code-box-code-action"
|
||||||
|
onClick={() => {
|
||||||
|
track({ type: 'stackblitz', demo: meta.id });
|
||||||
|
stackblitzSdk.openProject(stackblitzPrefillConfig, {
|
||||||
|
openFile: [`demo.${suffix}`],
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<ThunderboltOutlined className="code-box-stackblitz" />
|
||||||
|
</span>
|
||||||
|
</Tooltip>
|
||||||
|
<CopyToClipboard text={sourceCodes?.tsx} onCopy={() => handleCodeCopied(meta.id)}>
|
||||||
|
<Tooltip
|
||||||
|
open={copyTooltipOpen as boolean}
|
||||||
|
onOpenChange={onCopyTooltipOpenChange}
|
||||||
|
title={<FormattedMessage id={`app.demo.${copied ? 'copied' : 'copy'}`} />}
|
||||||
|
>
|
||||||
|
{React.createElement(copied && copyTooltipOpen ? CheckOutlined : SnippetsOutlined, {
|
||||||
|
className: 'code-box-code-copy code-box-code-action',
|
||||||
|
})}
|
||||||
|
</Tooltip>
|
||||||
|
</CopyToClipboard>
|
||||||
|
<Tooltip title={<FormattedMessage id="app.demo.separate" />}>
|
||||||
|
<a className="code-box-code-action" target="_blank" rel="noreferrer" href={src}>
|
||||||
|
<ExternalLinkIcon className="code-box-separate" />
|
||||||
|
</a>
|
||||||
|
</Tooltip>
|
||||||
|
|
||||||
|
<Tooltip
|
||||||
|
title={<FormattedMessage id={`app.demo.code.${codeExpand ? 'hide' : 'show'}`} />}
|
||||||
|
>
|
||||||
|
<div className="code-expand-icon code-box-code-action">
|
||||||
|
<img
|
||||||
|
alt="expand code"
|
||||||
|
src={
|
||||||
|
theme?.includes('dark')
|
||||||
|
? 'https://gw.alipayobjects.com/zos/antfincdn/btT3qDZn1U/wSAkBuJFbdxsosKKpqyq.svg'
|
||||||
|
: 'https://gw.alipayobjects.com/zos/antfincdn/Z5c7kzvi30/expand.svg'
|
||||||
|
}
|
||||||
|
className={codeExpand ? 'code-expand-icon-hide' : 'code-expand-icon-show'}
|
||||||
|
onClick={() => handleCodeExpand(meta.id)}
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
alt="expand code"
|
||||||
|
src={
|
||||||
|
theme?.includes('dark')
|
||||||
|
? 'https://gw.alipayobjects.com/zos/antfincdn/CjZPwcKUG3/OpROPHYqWmrMDBFMZtKF.svg'
|
||||||
|
: 'https://gw.alipayobjects.com/zos/antfincdn/4zAaozCvUH/unexpand.svg'
|
||||||
|
}
|
||||||
|
className={codeExpand ? 'code-expand-icon-show' : 'code-expand-icon-hide'}
|
||||||
|
onClick={() => handleCodeExpand(meta.id)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</Tooltip>
|
||||||
|
</Space>
|
||||||
|
</section>
|
||||||
|
<section className={highlightClass} key="code">
|
||||||
|
<CodePreview
|
||||||
|
codes={highlightedCodes}
|
||||||
|
toReactComponent={utils?.toReactComponent}
|
||||||
|
onCodeTypeChange={(type) => setCodeType(type)}
|
||||||
|
/>
|
||||||
|
{highlightedStyle ? (
|
||||||
|
<div key="style" className="highlight">
|
||||||
|
<pre>
|
||||||
|
<code className="css" dangerouslySetInnerHTML={{ __html: highlightedStyle }} />
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
|
||||||
|
if (meta.version) {
|
||||||
|
codeBox = (
|
||||||
|
<Badge.Ribbon text={meta.version} color={meta.version.includes('<') ? 'red' : null}>
|
||||||
|
{codeBox}
|
||||||
|
</Badge.Ribbon>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return codeBox;
|
||||||
|
};
|
||||||
|
|
||||||
export default fromDumiProps(Demo);
|
export default fromDumiProps(Demo);
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user