mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-02 03:59:01 +08:00
chore: 🔧 fix codesandbox React.Fragment support (#22315)
* site: fix codesandbox React.Fragment support
* 💄 prettier site code
This commit is contained in:
偏右
GitHub
parent
f69ff7eff5
commit
8fa2252903
@ -193,7 +193,7 @@
|
||||
.markdown .anchor {
|
||||
margin-left: 8px;
|
||||
opacity: 0;
|
||||
transition: opacity .3s;
|
||||
transition: opacity 0.3s;
|
||||
|
||||
.ant-row-rtl & {
|
||||
margin-right: 8px;
|
||||
|
||||
@ -8,7 +8,7 @@ export default class ColorBlock extends Component {
|
||||
const colorMap = {
|
||||
default: ['#fff', 'unset'],
|
||||
dark: ['#314659', '#fff'],
|
||||
}
|
||||
};
|
||||
const [lastColor, firstColor] = dark ? colorMap.dark : colorMap.default;
|
||||
return {
|
||||
background: color,
|
||||
|
||||
@ -2,7 +2,7 @@ import React from 'react';
|
||||
import cls from 'classnames';
|
||||
import Palette from './Palette';
|
||||
|
||||
const ColorPalettes = (props) => {
|
||||
const ColorPalettes = props => {
|
||||
const { dark } = props;
|
||||
|
||||
const colors = [
|
||||
@ -81,7 +81,7 @@ const ColorPalettes = (props) => {
|
||||
];
|
||||
const colorCls = cls('color-palettes', {
|
||||
'color-palettes-dark': !!dark,
|
||||
})
|
||||
});
|
||||
return (
|
||||
<div className={colorCls}>
|
||||
{colors.map(color => (
|
||||
|
||||
@ -161,10 +161,18 @@ class Demo extends React.Component {
|
||||
new RegExp(`#${meta.id}\\s*`, 'g'),
|
||||
'',
|
||||
);
|
||||
const html = `<div id="container" style="padding: 24px"></div>
|
||||
<script>
|
||||
var mountNode = document.getElementById('container');
|
||||
</script>`;
|
||||
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>var mountNode = document.getElementById('container');</script>
|
||||
</body>
|
||||
</html>`;
|
||||
|
||||
const sourceCode = this.getSourceCode();
|
||||
|
||||
@ -173,7 +181,10 @@ class Demo extends React.Component {
|
||||
html,
|
||||
js: sourceCode
|
||||
.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\s+\{(\s+[^}]*\s+)\}\s+from\s+'@ant-design\/icons';/,
|
||||
'const { $1 } = icons;',
|
||||
)
|
||||
.replace("import moment from 'moment';", '')
|
||||
.replace(/import\s+\{\s+(.*)\s+\}\s+from\s+'react-router';/, 'const { $1 } = ReactRouter;')
|
||||
.replace(
|
||||
@ -218,7 +229,7 @@ class Demo extends React.Component {
|
||||
return acc;
|
||||
},
|
||||
// eslint-disable-next-line no-undef
|
||||
{ react: 'latest', 'react-dom': 'latest', antd: antdReproduceVersion },
|
||||
{ antd: antdReproduceVersion },
|
||||
);
|
||||
|
||||
dependencies['@ant-design/icons'] = 'latest';
|
||||
@ -242,9 +253,31 @@ import './index.css';
|
||||
${parsedSourceCode.replace('mountNode', "document.getElementById('container')")}
|
||||
`.trim();
|
||||
const indexCssContent = (style || '').replace(new RegExp(`#${meta.id}\\s*`, 'g'), '');
|
||||
|
||||
const codesandboxPackage = {
|
||||
name: `${localizedTitle} - Ant Design Demo`,
|
||||
version: '1.0.0',
|
||||
main: 'index.js',
|
||||
dependencies: {
|
||||
...dependencies,
|
||||
react: '^16.12.0',
|
||||
'react-dom': '^16.12.0',
|
||||
'react-scripts': '^3.0.1',
|
||||
},
|
||||
devDependencies: {
|
||||
typescript: '^3.8.2',
|
||||
},
|
||||
scripts: {
|
||||
start: 'react-scripts start',
|
||||
build: 'react-scripts build',
|
||||
test: 'react-scripts test --env=jsdom',
|
||||
eject: 'react-scripts eject',
|
||||
},
|
||||
browserslist: ['>0.2%', 'not dead', 'not ie <= 11', 'not op_mini all'],
|
||||
};
|
||||
const codesanboxPrefillConfig = {
|
||||
files: {
|
||||
'package.json': { content: { dependencies } },
|
||||
'package.json': { content: codesandboxPackage },
|
||||
'index.css': { content: indexCssContent },
|
||||
'index.js': { content: indexJsContent },
|
||||
'index.html': {
|
||||
@ -299,21 +332,6 @@ ${parsedSourceCode.replace('mountNode', "document.getElementById('container')")}
|
||||
/>
|
||||
</Tooltip>
|
||||
</form>
|
||||
<form
|
||||
action="https://codepen.io/pen/define"
|
||||
method="POST"
|
||||
target="_blank"
|
||||
onClick={() => this.track({ type: 'codepen', demo: meta.id })}
|
||||
>
|
||||
<input type="hidden" name="data" value={JSON.stringify(codepenPrefillConfig)} />
|
||||
<Tooltip title={<FormattedMessage id="app.demo.codepen" />}>
|
||||
<input
|
||||
type="submit"
|
||||
value="Create New Pen with Prefilled Data"
|
||||
className="code-box-codepen"
|
||||
/>
|
||||
</Tooltip>
|
||||
</form>
|
||||
<form
|
||||
action="https://codesandbox.io/api/v1/sandboxes/define"
|
||||
method="POST"
|
||||
@ -333,6 +351,24 @@ ${parsedSourceCode.replace('mountNode', "document.getElementById('container')")}
|
||||
/>
|
||||
</Tooltip>
|
||||
</form>
|
||||
<form
|
||||
action="https://codepen.io/pen/define"
|
||||
method="POST"
|
||||
target="_blank"
|
||||
onClick={() => this.track({ type: 'codepen', demo: meta.id })}
|
||||
style={{
|
||||
display: sourceCode ? '' : 'none',
|
||||
}}
|
||||
>
|
||||
<input type="hidden" name="data" value={JSON.stringify(codepenPrefillConfig)} />
|
||||
<Tooltip title={<FormattedMessage id="app.demo.codepen" />}>
|
||||
<input
|
||||
type="submit"
|
||||
value="Create New Pen with Prefilled Data"
|
||||
className="code-box-codepen"
|
||||
/>
|
||||
</Tooltip>
|
||||
</form>
|
||||
<Tooltip title={<FormattedMessage id="app.demo.stackblitz" />}>
|
||||
<span
|
||||
className="code-box-code-action"
|
||||
|
||||
@ -41,7 +41,8 @@ const LIST_CN: Recommend[] = [
|
||||
const LIST_EN: Recommend[] = [
|
||||
{
|
||||
title: 'Ant Design 4.0 is out!',
|
||||
description: '⚡️ Smaller, faster, prettier and more powerfull, finally Ant Design 4.0 right here.',
|
||||
description:
|
||||
'⚡️ Smaller, faster, prettier and more powerfull, finally Ant Design 4.0 right here.',
|
||||
img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*G0nDS5-aESoAAAAAAAAAAABkARQnAQ',
|
||||
href: 'https://github.com/ant-design/ant-design/issues/21656',
|
||||
popularize: true,
|
||||
@ -49,13 +50,16 @@ const LIST_EN: Recommend[] = [
|
||||
{
|
||||
title: 'Introduce AntV',
|
||||
description: '✨ New player of front-end data visualization',
|
||||
img: 'https://gw.alipayobjects.com/zos/antfincdn/Vb5TpaLRSn/089e332b-a54c-421e-a4f0-f2a3480e2f42.png',
|
||||
href: 'https://medium.com/ant-design/introduce-antv-a-new-player-in-data-visualization-90ca999cfb08',
|
||||
img:
|
||||
'https://gw.alipayobjects.com/zos/antfincdn/Vb5TpaLRSn/089e332b-a54c-421e-a4f0-f2a3480e2f42.png',
|
||||
href:
|
||||
'https://medium.com/ant-design/introduce-antv-a-new-player-in-data-visualization-90ca999cfb08',
|
||||
},
|
||||
{
|
||||
title: 'G2Plot: a charting library',
|
||||
description: '📊 A charting library based on the grammar of graphics',
|
||||
img: 'https://gw.alipayobjects.com/zos/antfincdn/NBwf%24mYoDf/d100a715-d763-4bc5-b801-23b7f56b665d.png',
|
||||
img:
|
||||
'https://gw.alipayobjects.com/zos/antfincdn/NBwf%24mYoDf/d100a715-d763-4bc5-b801-23b7f56b665d.png',
|
||||
href: 'https://github.com/antvis/G2Plot',
|
||||
},
|
||||
];
|
||||
|
||||
Loading…
Reference in New Issue
Block a user