Skip to content

Commit e7349fc

Browse files
Miles-hxyMiles-hxy
authored
feat(demoblock): code block scrolling behavior， CodesandBox function and copyCode styles (#3106)
* fix(demoblock): optimize code block scrolling behavior * fix: update demoBlock content * fix: update demoBlock content * fix: update demoBlock styles
1 parent 9a903a0 commit e7349fc

7 files changed

Lines changed: 3923 additions & 2455 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -115,6 +115,7 @@
115115
"@use-gesture/react": "10.2.20",
116116
"async-validator": "^4.2.5",
117117
"classnames": "^2.5.1",
118+
"codesandbox": "^2.2.3",
118119
"lodash.kebabcase": "^4.1.1",
119120
"lottie-miniprogram": "^1.0.12",
120121
"lottie-react": "^2.4.0",

‎pnpm-lock.yaml‎

Lines changed: 3823 additions & 2437 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/sites/sites-react/doc/components/demoblock/codesandbox/index.css‎

Whitespace-only changes.

‎src/sites/sites-react/doc/components/demoblock/codesandbox/index.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta name="theme-color" content="#000000" />
7+
</head>
8+
<body>
9+
<div id="container" style="padding: 24px" />
10+
<script>
11+
const mountNode = document.getElementById("container");
12+
</script>
13+
</body>
14+
</html>

‎src/sites/sites-react/doc/components/demoblock/codesandbox/package.json‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{
2+
"browserslist": [
3+
">0.2%",
4+
"not dead"
5+
],
6+
"dependencies": {
7+
"@types/react": "^18.0.0",
8+
"@types/react-dom": "^18.0.0",
9+
"@nutui/icons-react": "^3.0.1",
10+
"@nutui/nutui-react": "^3.0.4",
11+
"rc-util": "^5.44.4",
12+
"react": "^18.0.0",
13+
"react-dom": "^18.0.0",
14+
"react-scripts": "^5.0.0"
15+
},
16+
"devDependencies": {
17+
"typescript": "^5.0.2"
18+
},
19+
"main": "index.js",
20+
"scripts": {
21+
"build": "react-scripts build",
22+
"eject": "react-scripts eject",
23+
"start": "react-scripts start",
24+
"test": "react-scripts test --env=jsdom"
25+
},
26+
"title": "语法糖 - antd@5.24.4"
27+
}

‎src/sites/sites-react/doc/components/demoblock/demoblock.scss‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,3 +45,16 @@
4545
}
4646
}
4747
}
48+
.demo-block code {
49+
max-height: 580px;
50+
overflow-y: auto;
51+
&::-webkit-scrollbar {
52+
width: 6px;
53+
height: 6px;
54+
background: transparent;
55+
}
56+
&::-webkit-scrollbar-thumb {
57+
background: #ccc;
58+
border-radius: 4px;
59+
}
60+
}

‎src/sites/sites-react/doc/components/demoblock/demoblock.tsx‎

Lines changed: 45 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,68 @@
11
import React, { useEffect, useState } from 'react'
2-
import { compressText, copyCodeHtml } from './basedUtil'
2+
import { copyCodeHtml } from './basedUtil'
3+
import { getParameters } from 'codesandbox/lib/api/define'
34
import './demoblock.scss'
5+
import codesandboxPackage from './codesandbox/package.json?raw'
6+
import INDEX_HTML from './codesandbox/index.html?raw'
7+
import INDEX_CSS from './codesandbox/index.css?raw'
48
interface A {
59
text: string
610
scss: string
711
children?: React.ReactNode
812
}
913
const DemoBlock: React.FunctionComponent<A> = (props) => {
1014
const [onlineUrl, setOnlineUrl] = useState('')
15+
const [copyText, setCopyText] = useState('复制代码')
1116
useEffect(() => {
12-
const sourceMainReactJsStr = `//import VConsole from "vconsole";
13-
//var vConsole = new VConsole();
14-
import React from "react";
15-
import ReactDOM from "react-dom";
17+
const INDEX_TSX = `
18+
import React from 'react'
19+
import { createRoot } from 'react-dom/client'
20+
import Demo from './demo';
21+
import './index.css'
1622
import '@nutui/nutui-react/dist/style.css'
17-
import App from "./app.tsx";
18-
import "./app.scss";
19-
ReactDOM.render(
20-
<App/>,
21-
document.getElementById("app")
22-
);`
2323
24-
const sourceMainReactJs = compressText(sourceMainReactJsStr)
25-
const sourceReactJs = compressText(props.text)
26-
const sourceScss = compressText(props.scss || '')
27-
const onlineUrl = `https://codehouse.jd.com/?source=share&type=react&mainJs=${sourceMainReactJs}&appValue=${sourceReactJs}&scssValue=${sourceScss}`
24+
createRoot(document.getElementById('container')).render(<Demo />);
25+
`
26+
const sourceReactJs = props.text
27+
const parameters = getParameters({
28+
files: {
29+
'package.json': {
30+
content: codesandboxPackage as unknown as string,
31+
isBinary: false,
32+
},
33+
'index.css': {
34+
content: INDEX_CSS,
35+
isBinary: false,
36+
},
37+
'index.html': {
38+
content: INDEX_HTML,
39+
isBinary: false,
40+
},
41+
'index.tsx': {
42+
content: INDEX_TSX,
43+
isBinary: false,
44+
},
45+
'demo.tsx': {
46+
content: sourceReactJs,
47+
isBinary: false,
48+
},
49+
},
50+
})
51+
const onlineUrl = `https://codesandbox.io/api/v1/sandboxes/define?parameters=${parameters}`
2852
setOnlineUrl(onlineUrl)
2953
}, [])
3054
const copyCode = () => {
3155
const sourceValue = props.text
3256
copyCodeHtml(sourceValue, () => {
33-
alert('复制成功')
57+
setCopyText('复制成功')
58+
setTimeout(() => {
59+
setCopyText('复制代码')
60+
}, 2000)
3461
})
3562
}
3663
return (
3764
<>
38-
{props.children}
65+
<div className="demo-block">{props.children}</div>
3966

4067
<div className="online-part">
4168
<a className="list" target="_blank" href={onlineUrl} rel="noreferrer">
@@ -52,7 +79,7 @@ ReactDOM.render(
5279
className="online-icon"
5380
src="https://img10.360buyimg.com/imagetools/jfs/t1/142615/10/25537/3671/61c31e6eE3ba7fb90/d1953e2b47e40e86.png"
5481
/>
55-
<div className="online-tips">复制代码</div>
82+
<div className="online-tips">{copyText}</div>
5683
</div>
5784
</div>
5885
</>

0 commit comments

Comments
 (0)