Commit 043017c3 authored by 邓晓峰's avatar 邓晓峰

fix: document code preview

parent 84678965
...@@ -2,13 +2,36 @@ import React from 'react'; ...@@ -2,13 +2,36 @@ import React from 'react';
import PreView from 'dumi-theme-default/src/builtins/Previewer'; import PreView from 'dumi-theme-default/src/builtins/Previewer';
import LazyLoad from 'react-lazyload'; import LazyLoad from 'react-lazyload';
import ProSkeleton from '@ant-design/pro-skeleton'; import ProSkeleton from '@ant-design/pro-skeleton';
import { Spin } from 'antd';
export default ({ children, ...rest }) => { export default ({ children, ...rest }) => {
return ( return (
<LazyLoad height={500} offset={300} placeholder={<ProSkeleton type="descriptions" />} once> <LazyLoad
<PreView {...rest}>{children}</PreView> height={`calc(${rest.length} + 128px)` || 500}
offset={500}
placeholder={
parseInt(rest.length) > 300 ? (
<div
className="__dumi-default-previewer"
style={{
padding: 24,
background: 'rgb(245, 245, 245)',
}}
>
<ProSkeleton type="descriptions"></ProSkeleton>
</div>
) : (
<div style={{ paddingTop: 100, textAlign: 'center' }}>
<Spin size="large"></Spin>
</div>
)
}
once
>
<PreView {...rest}>
<div style={{ minHeight: rest.height }}>{children}</div>
</PreView>
</LazyLoad> </LazyLoad>
); );
}; };
import './global.less'; import React, { useEffect, useState } from 'react';
import 'moment/locale/zh-cn'; import Layout from 'dumi-theme-default/src/layout';
import React, { useEffect } from 'react';
import { ConfigProvider } from 'antd'; import { ConfigProvider } from 'antd';
import zhCN from 'antd/es/locale/zh_CN'; import zhCN from 'antd/es/locale/zh_CN';
import Layout from 'dumi-theme-default/src/layout';
import moment from 'moment'; import moment from 'moment';
import Darkreader from 'react-darkreader';
import 'moment/locale/zh-cn';
import './layout.less';
moment.locale('zh-cn'); moment.locale('zh-cn');
export default ({ children, ...props }) => { export default ({ children, ...props }) => {
const colorScheme = window.matchMedia('(prefers-color-scheme: dark)').matches && 'dark';
const defaultDarken = localStorage.getItem('procomponents_dark_theme') || colorScheme;
useEffect(() => { useEffect(() => {
(function (h, o, t, j, a, r) { (function (h, o, t, j, a, r) {
// @ts-ignore
h.hj = h.hj =
// @ts-ignore
h.hj || h.hj ||
function () { function () {
// @ts-ignore
(h.hj.q = h.hj.q || []).push(arguments); (h.hj.q = h.hj.q || []).push(arguments);
}; };
// @ts-ignore
h._hjSettings = { hjid: 2036108, hjsv: 6 }; h._hjSettings = { hjid: 2036108, hjsv: 6 };
a = o.getElementsByTagName('head')[0]; a = o.getElementsByTagName('head')[0];
r = o.createElement('script'); r = o.createElement('script');
r.async = 1; r.async = 1;
// @ts-ignore
r.src = t + h._hjSettings.hjid + j + h._hjSettings.hjsv; r.src = t + h._hjSettings.hjid + j + h._hjSettings.hjsv;
a.appendChild(r); a.appendChild(r);
})(window, document, 'https://static.hotjar.com/c/hotjar-', '.js?sv='); })(window, document, 'https://static.hotjar.com/c/hotjar-', '.js?sv=');
}, []); }, []);
return ( return (
<ConfigProvider locale={zhCN}> <>
<Layout {...props}>{children}</Layout> <div
</ConfigProvider> style={{
position: 'fixed',
right: 8,
top: 20,
zIndex: 999,
}}
>
<Darkreader
defaultDarken={defaultDarken === 'dark'}
onChange={(check) => {
if (!check) {
localStorage.setItem('procomponents_dark_theme', 'light');
return;
}
localStorage.setItem('procomponents_dark_theme', 'dark');
}}
/>
</div>
<ConfigProvider locale={zhCN}>
<Layout {...props}>{children}</Layout>
</ConfigProvider>
</>
); );
}; };
.__dumi-default-menu .__dumi-default-menu-list > li > a {
padding-left: 24px !important;
~ ul {
margin-left: 24px !important;
}
}
html,
.__dumi-default-layout-toc,
.__dumi-default-menu-inner {
&::-webkit-scrollbar {
width: 6px;
height: 6px;
}
&::-webkit-scrollbar-thumb {
background-color: rgba(50, 50, 50, 0.3);
border-radius: 1em;
}
&::-webkit-scrollbar-track {
background-color: rgba(50, 50, 50, 0.1);
border-radius: 1em;
}
}
.__dumi-default-locale-select {
margin-right: 16px;
margin-left: 16px !important;
}
html {
&::-webkit-scrollbar {
width: 8px;
height: 6px;
}
}
.__dumi-default-layout-hero {
background-image: url(https://gw.alipayobjects.com/zos/basement_prod/5edc7f4d-3302-4710-963b-7b6c77ea8d06.svg);
background-position-y: -10px;
background-size: cover;
transition: 0.3s all;
&:hover {
background-position-y: -20px;
}
h1 {
color: #fff !important;
}
div > p {
color: #fff;
}
}
...@@ -2,7 +2,16 @@ import { readdirSync } from 'fs'; ...@@ -2,7 +2,16 @@ import { readdirSync } from 'fs';
import { join } from 'path'; import { join } from 'path';
// utils must build before core // utils must build before core
const headPkgs = ['Empty']; const headPkgs = [
'DeviceTree',
'Empty',
'HistoryInfo',
'ImageSelect',
'MqttView',
'QuotaSelect',
'RealTimeInfo',
'TimeRangePicker',
];
const tailPkgs = readdirSync(join(__dirname, 'packages')).filter( const tailPkgs = readdirSync(join(__dirname, 'packages')).filter(
(pkg) => pkg.charAt(0) !== '.' && !headPkgs.includes(pkg), (pkg) => pkg.charAt(0) !== '.' && !headPkgs.includes(pkg),
); );
...@@ -16,5 +25,6 @@ export default { ...@@ -16,5 +25,6 @@ export default {
pkgs: [...headPkgs, ...tailPkgs], pkgs: [...headPkgs, ...tailPkgs],
extraBabelPlugins: [ extraBabelPlugins: [
['babel-plugin-import', { libraryName: 'antd', libraryDirectory: 'es', style: true }, 'antd'], ['babel-plugin-import', { libraryName: 'antd', libraryDirectory: 'es', style: true }, 'antd'],
[require('./scripts/replaceLib')],
], ],
}; };
...@@ -3,8 +3,6 @@ import { readdirSync } from 'fs'; ...@@ -3,8 +3,6 @@ import { readdirSync } from 'fs';
import { join } from 'path'; import { join } from 'path';
const headPkgList = []; const headPkgList = [];
// utils must build before core
// runtime must build before renderer-react
const pkgList = readdirSync(join(__dirname, 'packages')).filter( const pkgList = readdirSync(join(__dirname, 'packages')).filter(
(pkg) => pkg.charAt(0) !== '.' && !headPkgList.includes(pkg), (pkg) => pkg.charAt(0) !== '.' && !headPkgList.includes(pkg),
); );
...@@ -47,27 +45,10 @@ export default { ...@@ -47,27 +45,10 @@ export default {
path: 'https://g.civnet.cn:8443/test/winsdom-components', path: 'https://g.civnet.cn:8443/test/winsdom-components',
}, },
], ],
analytics: isProduction
? {
ga: 'UA-173569162-1',
}
: false,
hash: true, hash: true,
ssr: { ssr: {
devServerRender: false, devServerRender: false,
}, },
dynamicImport: {
loading: '@ant-design/pro-skeleton',
},
externals:
process.env.NODE_ENV === 'development'
? {
react: 'window.React',
'react-dom': 'window.ReactDOM',
moment: 'window.moment',
antd: 'window.antd',
}
: {},
targets: { targets: {
chrome: 80, chrome: 80,
firefox: false, firefox: false,
...@@ -82,15 +63,6 @@ export default { ...@@ -82,15 +63,6 @@ export default {
process.env.NODE_ENV === 'development' process.env.NODE_ENV === 'development'
? ['https://gw.alipayobjects.com/os/lib/antd/4.6.6/dist/antd.css'] ? ['https://gw.alipayobjects.com/os/lib/antd/4.6.6/dist/antd.css']
: [], : [],
scripts:
process.env.NODE_ENV === 'development'
? [
'https://gw.alipayobjects.com/os/lib/react/16.13.1/umd/react.development.js',
'https://gw.alipayobjects.com/os/lib/react-dom/16.13.1/umd/react-dom.development.js',
'https://gw.alipayobjects.com/os/lib/moment/2.29.0/min/moment-with-locales.js',
'https://gw.alipayobjects.com/os/lib/antd/4.6.6/dist/antd-with-locales.js',
]
: [],
menus: { menus: {
'/components': [ '/components': [
{ {
...@@ -111,4 +83,5 @@ export default { ...@@ -111,4 +83,5 @@ export default {
}, },
], ],
}, },
webpack5: {},
}; };
...@@ -17,6 +17,7 @@ ...@@ -17,6 +17,7 @@
"size:build": "cross-env PRO_COMPONENTS_CI='CI' webpack", "size:build": "cross-env PRO_COMPONENTS_CI='CI' webpack",
"start": "dumi dev", "start": "dumi dev",
"site": "dumi build", "site": "dumi build",
"size": "npm run build && size-limit",
"tsc:duplicate": "tsc -p ./tests/tsconfig.duplicate.json", "tsc:duplicate": "tsc -p ./tests/tsconfig.duplicate.json",
"sync:tnpm": "node -e 'require(\"./scripts/syncTNPM\")()'", "sync:tnpm": "node -e 'require(\"./scripts/syncTNPM\")()'",
"test": "umi-test", "test": "umi-test",
...@@ -32,30 +33,47 @@ ...@@ -32,30 +33,47 @@
"ie >= 11" "ie >= 11"
], ],
"devDependencies": { "devDependencies": {
"@ant-design/compatible": "^1.0.4",
"@ant-design/pro-skeleton": "^1.0.0-beta.2", "@ant-design/pro-skeleton": "^1.0.0-beta.2",
"@babel/core": "^7.8.3", "@babel/core": "^7.8.3",
"@babel/plugin-proposal-object-rest-spread": "^7.8.3", "@babel/plugin-proposal-object-rest-spread": "^7.8.3",
"@babel/preset-env": "^7.8.3", "@babel/preset-env": "^7.8.3",
"@babel/preset-react": "^7.8.3", "@babel/preset-react": "^7.8.3",
"@babel/preset-typescript": "^7.8.3", "@babel/preset-typescript": "^7.8.3",
"@octokit/core": "^3.2.5",
"@size-limit/preset-big-lib": "^4.5.5", "@size-limit/preset-big-lib": "^4.5.5",
"@testing-library/react": "^10.0.2", "@testing-library/react": "^10.0.2",
"@testing-library/react-hooks": "^3.2.1", "@testing-library/react-hooks": "^3.2.1",
"@types/classnames": "^2.2.7",
"@types/enzyme": "^3.10.3",
"@types/history": "^4.7.7",
"@types/jest": "^26.0.0",
"@types/memoize-one": "^5.1.2",
"@types/mockjs": "^1.0.3",
"@types/node": "^14.0.26",
"@types/react": "^16.9.17",
"@types/react-dom": "^16.9.1",
"@types/react-helmet": "^6.0.0",
"@types/react-intl": "^3.0.0",
"@types/react-responsive": "^8.0.1",
"@types/react-router-dom": "^5.1.0",
"@types/warning": "^3.0.0",
"@types/xhr-mock": "^2.0.0",
"@umijs/babel-preset-umi": "^3.0.14", "@umijs/babel-preset-umi": "^3.0.14",
"@umijs/fabric": "^2.0.0", "@umijs/fabric": "^2.0.0",
"@umijs/plugin-analytics": "^0.2.2", "@umijs/plugin-analytics": "^0.2.2",
"@umijs/plugin-antd": "^0.9.0",
"@umijs/test": "^3.2.10", "@umijs/test": "^3.2.10",
"@umijs/test-utils": "^3.2.10", "@umijs/test-utils": "^3.2.10",
"@umijs/utils": "^3.2.11", "@umijs/utils": "^3.2.11",
"antd": "^4.7.0", "antd": "^4.13.1",
"babel-loader": "^8.1.0", "babel-loader": "^8.1.0",
"babel-plugin-import": "^1.12.2", "babel-plugin-import": "^1.12.2",
"body-parser": "^1.18.2", "body-parser": "^1.18.2",
"chalk": "^4.1.0", "chalk": "^4.1.0",
"cross-env": "^7.0.0", "cross-env": "^7.0.2",
"css-loader": "^3.4.2", "css-loader": "^5.0.2",
"dumi": "next", "css-minimizer-webpack-plugin": "^1.2.0",
"dumi": "^1.1.6",
"enzyme": "^3.11.0", "enzyme": "^3.11.0",
"enzyme-to-json": "^3.4.3", "enzyme-to-json": "^3.4.3",
"eslint": "^7.2.0", "eslint": "^7.2.0",
...@@ -63,53 +81,51 @@ ...@@ -63,53 +81,51 @@
"gh-pages": "^3.1.0", "gh-pages": "^3.1.0",
"github": "^9.2.0", "github": "^9.2.0",
"glob": "^7.1.6", "glob": "^7.1.6",
"html-webpack-plugin": "^4.5.0",
"jest": "^26.2.2", "jest": "^26.2.2",
"jest-canvas-mock": "^2.3.1",
"jest-fetch-mock": "^3.0.3", "jest-fetch-mock": "^3.0.3",
"jsdom": "^16.4.0", "jsdom": "^16.4.0",
"jsdom-global": "^3.0.2", "jsdom-global": "^3.0.2",
"lerna": "^3.20.2", "lerna": "^3.20.2",
"lerna-changelog": "^1.0.1", "lerna-changelog": "^1.0.1",
"less-loader": "^6.0.0", "less-loader": "^8.0.0",
"lint-staged": "^10.0.2", "lint-staged": "^10.0.2",
"mini-css-extract-plugin": "^0.9.0", "mini-css-extract-plugin": "^1.3.8",
"mockdate": "^3.0.2", "mockdate": "^3.0.2",
"mockjs": "^1.1.0",
"moment": "^2.27.0", "moment": "^2.27.0",
"moment-timezone": "^0.5.31", "moment-timezone": "^0.5.31",
"np": "^6.1.0", "np": "^6.1.0",
"npm-run-all": "^4.1.5", "npm-run-all": "^4.1.5",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"pify": "^5.0.0", "pify": "^5.0.0",
"prettier": "^2.1.2", "prettier": "^2.2.1",
"pretty-quick": "^2.0.1", "prettier-plugin-jsdoc": "^0.2.13",
"prettier-plugin-style-order": "^0.2.2",
"pretty-quick": "^3.0.1",
"pro-changelog": "^1.0.0", "pro-changelog": "^1.0.0",
"progress-bar-webpack-plugin": "^2.1.0", "progress-bar-webpack-plugin": "^2.1.0",
"query-string": "^6.11.1", "query-string": "^6.13.6",
"react": "^16.11.0", "react": "^16.0.0",
"react-dom": "^16.11.0", "react-darkreader": "^1.3.3",
"react-dom": "^16.0.0",
"react-lazyload": "^3.0.0", "react-lazyload": "^3.0.0",
"react-markdown": "^4.3.0", "react-markdown": "^4.3.0",
"react-test-renderer": "^16.9.0", "react-test-renderer": "^16.9.0",
"size-limit": "^4.5.5", "size-limit": "^4.6.2",
"slash2": "^2.0.0", "slash2": "^2.0.0",
"style-loader": "^1.1.3", "style-loader": "^2.0.0",
"stylelint": "^13.0.0", "stylelint": "^13.0.0",
"terser-webpack-plugin": "^3.0.2", "typescript": "^4.1.2",
"typescript": "^3.9.7", "umi": "^3.4.0",
"umi": "^3.2.10",
"umi-plugin-githubpages": "^2.0.0",
"umi-request": "^1.3.5", "umi-request": "^1.3.5",
"umi-test": "^1.9.6", "umi-test": "^1.9.6",
"umi-types": "^0.5.11", "umi-types": "^0.5.11",
"webpack-bundle-analyzer": "^3.6.0", "webpack": "^5.24.2",
"webpack-cli": "^3.3.12", "webpack-bundle-analyzer": "^4.4.0",
"webpack-dev-server": "^3.11.0", "webpack-cli": "^4.5.0",
"write-pkg": "^4.0.0", "write-pkg": "^4.0.0",
"xhr-mock": "^2.5.1", "xhr-mock": "^2.5.1",
"yorkie": "^2.0.0", "yorkie": "^2.0.0"
"express": "^4.16.4",
"webpack-dev-middleware": "^3.5.0",
"webpack-hot-middleware": "^2.24.3"
}, },
"gitHooks": { "gitHooks": {
"pre-commit": "pretty-quick --staged", "pre-commit": "pretty-quick --staged",
...@@ -118,14 +134,6 @@ ...@@ -118,14 +134,6 @@
"publishConfig": { "publishConfig": {
"registry": "https://g.civnet.cn:4873" "registry": "https://g.civnet.cn:4873"
}, },
"size-limit": [
{
"path": "packages/Empty/dist/**/*.js",
"limit": "100 s",
"webpack": false,
"running": false
}
],
"dependencies": { "dependencies": {
"@wisdom-components/Empty": "^1.0.1", "@wisdom-components/Empty": "^1.0.1",
"classnames": "^2.2.6", "classnames": "^2.2.6",
...@@ -133,5 +141,103 @@ ...@@ -133,5 +141,103 @@
"highcharts": "^9.0.1", "highcharts": "^9.0.1",
"highcharts-react-official": "^3.0.0", "highcharts-react-official": "^3.0.0",
"mqtt-client": "^1.0.11" "mqtt-client": "^1.0.11"
} },
"size-limit": [
{
"path": "packages/DeviceTree/lib/**/*.js",
"limit": "2 s",
"webpack": false,
"running": false
},
{
"path": "packages/DeviceTree/es/**/*.js",
"limit": "2 s",
"webpack": false,
"running": false
},
{
"path": "packages/Empty/lib/**/*.js",
"limit": "2 s",
"webpack": false,
"running": false
},
{
"path": "packages/Empty/es/**/*.js",
"limit": "2 s",
"webpack": false,
"running": false
},
{
"path": "packages/HistoryInfo/lib/**/*.js",
"limit": "2 s",
"webpack": false,
"running": false
},
{
"path": "packages/HistoryInfo/es/**/*.js",
"limit": "2 s",
"webpack": false,
"running": false
},
{
"path": "packages/ImageSelect/lib/**/*.js",
"limit": "2 s",
"webpack": false,
"running": false
},
{
"path": "packages/ImageSelect/es/**/*.js",
"limit": "2 s",
"webpack": false,
"running": false
},
{
"path": "packages/MqttView/lib/**/*.js",
"limit": "2 s",
"webpack": false,
"running": false
},
{
"path": "packages/MqttView/es/**/*.js",
"limit": "2 s",
"webpack": false,
"running": false
},
{
"path": "packages/QuotaSelect/lib/**/*.js",
"limit": "2 s",
"webpack": false,
"running": false
},
{
"path": "packages/QuotaSelect/es/**/*.js",
"limit": "2 s",
"webpack": false,
"running": false
},
{
"path": "packages/RealTimeInfo/lib/**/*.js",
"limit": "2 s",
"webpack": false,
"running": false
},
{
"path": "packages/RealTimeInfo/es/**/*.js",
"limit": "2 s",
"webpack": false,
"running": false
},
{
"path": "packages/TimeRangePicker/lib/**/*.js",
"limit": "2 s",
"webpack": false,
"running": false
},
{
"path": "packages/TimeRangePicker/es/**/*.js",
"limit": "2 s",
"webpack": false,
"running": false
}
]
} }
...@@ -21,7 +21,7 @@ group: ...@@ -21,7 +21,7 @@ group:
## 代码演示 ## 代码演示
<code src="./demos/Basic.js"> <code src="./demos/basic.js"></code>
## API ## API
......
...@@ -10,7 +10,8 @@ const Demo = () => { ...@@ -10,7 +10,8 @@ const Demo = () => {
const [autoExpandParent, setAutoExpandParent] = useState(true); const [autoExpandParent, setAutoExpandParent] = useState(true);
const fetchData = (params = {}) => { const fetchData = (params = {}) => {
request(baseUrl + '/Publish/Monitor/Device/DeviceTree', { // eslint-disable-next-line no-use-before-define
request(`${baseUrl}/Publish/Monitor/Device/DeviceTree`, {
method: 'post', method: 'post',
data: { data: {
PageIndex: 1, PageIndex: 1,
...@@ -24,19 +25,25 @@ const Demo = () => { ...@@ -24,19 +25,25 @@ const Demo = () => {
isTop: true, isTop: true,
}, },
}).then(function (response) { }).then(function (response) {
let data = response.data // eslint-disable-next-line no-nested-ternary
const data = response.data
? response.data.list && response.data.list.length > 0 ? response.data.list && response.data.list.length > 0
? response.data.list[0].DeviceList ? response.data.list[0].DeviceList
: [] : []
: []; : [];
// eslint-disable-next-line no-use-before-define
setTreeData(handleData(data)); setTreeData(handleData(data));
}); });
}; };
const handleData = (data) => { const handleData = (data) => {
// eslint-disable-next-line array-callback-return
data.map((item) => { data.map((item) => {
// eslint-disable-next-line no-param-reassign
item.title = item.DeviceName; item.title = item.DeviceName;
// eslint-disable-next-line no-param-reassign
item.key = item.StationID; item.key = item.StationID;
// eslint-disable-next-line no-param-reassign
item.children = handleData(item.children); item.children = handleData(item.children);
}); });
return data; return data;
......
{ {
"name": "@wisdom-components/empty", "name": "@wisdom-components/empty",
"version": "1.0.1", "version": "1.0.1",
"description": "> TODO: description", "description": "@wisdom-components/empty",
"author": "tuqian <webtuqian@163.com>", "author": "tuqian <webtuqian@163.com>",
"homepage": "", "homepage": "",
"license": "ISC", "license": "ISC",
"main": "lib/index.js", "main": "lib/index.js",
"module": "es/index.js",
"directories": { "directories": {
"lib": "lib", "lib": "lib",
"test": "__tests__" "test": "__tests__"
......
...@@ -18,7 +18,7 @@ group: ...@@ -18,7 +18,7 @@ group:
## 代码演示 ## 代码演示
<code src="./demos/Basic.js"> <code src="./demos/basic.tsx">
## API ## API
......
...@@ -22,7 +22,7 @@ group: ...@@ -22,7 +22,7 @@ group:
## 代码演示 ## 代码演示
<code src="./demos/Basic.js"> <code src="./demos/basic.js">
## API ## API
......
...@@ -22,7 +22,7 @@ group: ...@@ -22,7 +22,7 @@ group:
## 代码演示 ## 代码演示
<code src="./demos/Basic.js"> <code src="./demos/basic.js">
## API ## API
......
...@@ -21,7 +21,7 @@ group: ...@@ -21,7 +21,7 @@ group:
## 代码演示 ## 代码演示
<code src="./demos/Basic.js"> <code src="./demos/basic.js">
## API ## API
......
...@@ -21,7 +21,7 @@ group: ...@@ -21,7 +21,7 @@ group:
## 代码演示 ## 代码演示
<code src="./demos/Basic.js"> <code src="./demos/basic.js">
## API ## API
......
...@@ -21,7 +21,7 @@ group: ...@@ -21,7 +21,7 @@ group:
## 代码演示 ## 代码演示
<code src="./demos/Basic.js"> <code src="./demos/basic.js">
## API ## API
......
const { join, dirname } = require('path');
const fs = require('fs');
const cwd = process.cwd();
function replacePath(path) {
if (path.node.source && /\/lib\//.test(path.node.source.value)) {
const esModule = path.node.source.value.replace('/lib/', '/es/');
const esPath = dirname(join(cwd, `node_modules/${esModule}`));
if (fs.existsSync(esPath)) {
console.log(`[es build] replace ${path.node.source.value} with ${esModule}`);
path.node.source.value = esModule;
}
}
}
function replaceLib() {
return {
visitor: {
ImportDeclaration: replacePath,
ExportNamedDeclaration: replacePath,
},
};
}
module.exports = replaceLib;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment