+
-
+ (
+
+ )}
+ />
)
}
}
-
-ReactDOM.render(
+const container = document.getElementById('container')
+const root = createRoot(container)
+root.render(
- ,
- document.getElementById('container')
+
)
diff --git a/packages/taro-ui-docs/assets/dark.svg b/packages/taro-ui-docs/assets/dark.svg
new file mode 100644
index 000000000..da13b504c
--- /dev/null
+++ b/packages/taro-ui-docs/assets/dark.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/taro-ui-docs/assets/light.svg b/packages/taro-ui-docs/assets/light.svg
new file mode 100644
index 000000000..babe88e9f
--- /dev/null
+++ b/packages/taro-ui-docs/assets/light.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/taro-ui-docs/assets/style/dark.scss b/packages/taro-ui-docs/assets/style/dark.scss
new file mode 100644
index 000000000..5546a4346
--- /dev/null
+++ b/packages/taro-ui-docs/assets/style/dark.scss
@@ -0,0 +1,27 @@
+h1, h2, h3, h4, h5, h6 {
+ color: #fff;
+}
+
+.dark-style-docs-20140517 {
+ color: '#fff';
+}
+
+p {
+ color: #fff;
+}
+
+li {
+ color: #fff;
+}
+
+code {
+ color: #3F536E;
+}
+
+span {
+ color: #3F536E;
+}
+
+a {
+ color: #fff;
+}
\ No newline at end of file
diff --git a/packages/taro-ui-docs/assets/style/docs.scss b/packages/taro-ui-docs/assets/style/docs.scss
index 8826a5882..ff18dfcdc 100644
--- a/packages/taro-ui-docs/assets/style/docs.scss
+++ b/packages/taro-ui-docs/assets/style/docs.scss
@@ -54,6 +54,13 @@ $drop-shadow: 0 4px 30px 0 rgba(223, 225, 230, 0.5);
overflow: hidden;
}
+.darkbox {
+ background-color: #23272f;
+ &.at-container {
+ box-shadow: none;
+ }
+}
+
/**
* Component - Preview & Code sample
*/
@@ -106,6 +113,16 @@ $drop-shadow: 0 4px 30px 0 rgba(223, 225, 230, 0.5);
background-color: $bg-color-base;
cursor: pointer;
}
+ &__caution {
+ background-color: #fff8e6;
+ border: 1px solid #ffe58f;
+ border-radius: 4px;
+ padding: 16px;
+ margin: 16px 0;
+ color: #faad14;
+ font-size: 14px;
+ border-left: 4px solid #ffe58f;
+ }
}
.at-markdown {
@@ -433,7 +450,7 @@ $drop-shadow: 0 4px 30px 0 rgba(223, 225, 230, 0.5);
&::after {
display: none;
- content: "";
+ content: '';
z-index: 11;
position: absolute;
width: 15px;
@@ -484,7 +501,7 @@ $drop-shadow: 0 4px 30px 0 rgba(223, 225, 230, 0.5);
/**
* Resource
*/
- .at-resource {
+.at-resource {
margin: 24px 0;
&__item {
@@ -497,12 +514,12 @@ $drop-shadow: 0 4px 30px 0 rgba(223, 225, 230, 0.5);
border: 1px solid $border-color-lighter;
border-radius: $border-radius-base;
overflow: hidden;
- transition: all .3s;
+ transition: all 0.3s;
&:hover {
border-color: $border-color-lightest;
background-color: #fff;
- box-shadow: 0 4px 30px 0 rgba(223, 225, 230, .5);
+ box-shadow: 0 4px 30px 0 rgba(223, 225, 230, 0.5);
}
a {
width: 100%;
diff --git a/packages/taro-ui-docs/build/addImportLoader.js b/packages/taro-ui-docs/build/addImportLoader.js
index 3e2bf3bb3..2c7d773af 100644
--- a/packages/taro-ui-docs/build/addImportLoader.js
+++ b/packages/taro-ui-docs/build/addImportLoader.js
@@ -2,6 +2,7 @@ const highlight = require('highlight.js')
const loaderUtils = require('loader-utils')
const frontMatter = require('front-matter')
const mdContainer = require('markdown-it-container')
+const humps = require('humps')
let md = require('markdown-it')
@@ -57,6 +58,7 @@ md = md({
})
const formatModule = (imports, js, jsx, state, method) => {
+
const moduleText = `
${imports}
@@ -160,11 +162,51 @@ module.exports = function (source) {
}
})
+ // warning
+ md.use(mdContainer, 'caution', {
+ validate: params => params.trim().match(/^caution\s*(.*)$/),
+ render: (tokens, idx) => {
+ // container 从开头到结尾把之间的token跑一遍，其中idx定位到具体的位置
+
+ // 获取描述
+ const m = tokens[idx].info.trim().match(/^caution\s*(.*)$/)
+
+ // 有此标记代表 ::: 开始
+ if (tokens[idx].nesting === 1) {
+ return `
${md.render(m[1])}`
+ }
+ return '
'
+ }
+ })
+
// md 处理过后的字符串含有 class 和 style ，需要再次处理给到react
+ const htmlStyleToReactStyle = (htmlStyle) => {
+ const reactStyle = {}
+
+ const stylePairs = htmlStyle.split(';')
+ stylePairs.forEach((stylePair) => {
+ if (stylePair) {
+ const [key, value] = stylePair.split(':')
+ if (key && value) {
+ const reactKey = humps.camelize(key.trim())
+ reactStyle[reactKey] = value.trim()
+ }
+ }
+ })
+
+ return reactStyle
+ }
+
const content = md
.render(body)
.replace(/
/g, '
')
.replace(/
/g, '
')
.replace(/class=/g, 'className=')
+ // style="color: red" => style={{color: 'red'}}
+ .replace(/style="(.*?)"/g, (_, style) => {
+ const reactStyle = htmlStyleToReactStyle(style)
+ return `style={${JSON.stringify(reactStyle)}}`
+ })
+
return formatModule(imports, moduleJS.join('\n'), content, state)
}
diff --git a/packages/taro-ui-docs/build/build-static.js b/packages/taro-ui-docs/build/build-static.js
index 8e58ab536..5a839381c 100644
--- a/packages/taro-ui-docs/build/build-static.js
+++ b/packages/taro-ui-docs/build/build-static.js
@@ -9,12 +9,38 @@ spinner.start()
// packages/taro-ui-docs/dist/h5
fs.emptyDirSync(path.resolve(__dirname, '../dist/h5'))
-fs.copy(
- // packages/taro-ui-demo/dist
- path.resolve(__dirname, '../../taro-ui-demo/dist'),
- path.resolve(__dirname, '../dist/h5')
-)
- .then(() => {
+function mergeDemoH5AndDist() {
+ const demoH5Path = path.resolve(__dirname, '../../taro-ui-demo/dist')
+ if (!fs.existsSync(demoH5Path)) {
+ console.log('Please run `npm run build:demo` first')
spinner.stop()
+ return
+ }
+
+ const distH5Path = path.resolve(__dirname, '../dist/h5')
+ const distPath = path.resolve(__dirname, '../dist')
+ const files = fs.readdirSync(demoH5Path)
+
+ const promises = []
+ files.forEach(file => {
+ if (file !== 'index.html') {
+ promises.push(
+ fs.copy(path.resolve(demoH5Path, file), path.resolve(distPath, file))
+ )
+ } else {
+ promises.push(
+ fs.copy(path.resolve(demoH5Path, file), path.resolve(distH5Path, file))
+ )
+ }
})
- .catch(err => console.error(err))
+
+ Promise.all(promises)
+ .then(() => {
+ spinner.stop()
+ })
+ .catch(err => {
+ console.log('build static error:', err)
+ })
+}
+
+mergeDemoH5AndDist()
diff --git a/packages/taro-ui-docs/components/footer/index.jsx b/packages/taro-ui-docs/components/footer/index.jsx
index 26983a117..14e18d798 100644
--- a/packages/taro-ui-docs/components/footer/index.jsx
+++ b/packages/taro-ui-docs/components/footer/index.jsx
@@ -24,7 +24,7 @@ const Footer = () => (
@@ -87,33 +87,27 @@ const Footer = () => (
微信
diff --git a/packages/taro-ui-docs/components/header/index.jsx b/packages/taro-ui-docs/components/header/index.jsx
index 154e2b63b..c7ff1f8d0 100644
--- a/packages/taro-ui-docs/components/header/index.jsx
+++ b/packages/taro-ui-docs/components/header/index.jsx
@@ -1,16 +1,40 @@
import React from 'react'
import classnames from 'classnames'
import { Link, NavLink, withRouter } from 'react-router-dom'
+import { DARK_KEY_SINGLE } from '../../utils/const'
import taroUILogo from '../../assets/logo-taro.png'
+import darkImg from '../../assets/dark.svg'
+import lightImg from '../../assets/light.svg'
import './style.scss'
class PageHeader extends React.Component {
constructor(...args) {
super(...args)
this.state = {
- toggle: true
+ toggle: true,
+ mode: 'light',
}
}
+
+ componentDidMount() {
+ const _mode = localStorage.getItem('mode')
+ const style = localStorage.getItem('dark-style');
+ const isCurrentStyle = style && ~style.indexOf(DARK_KEY_SINGLE) && !~style.indexOf(' {
+ if (~style.outerHTML.indexOf(DARK_KEY_SINGLE)) {
+ const newStyle = style.outerHTML.replace(/