Skip to content

Commit 93981e9

Browse files
jaywcjlovejaywcjlove
committed
doc(Icon): 展示图标。(#244) #245 
1 parent fb9d449 commit 93981e9

File tree

7 files changed

+127
-46
lines changed

7 files changed

+127
-46
lines changed

‎packages/core/src/Icon/README.md

Lines changed: 32 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ Icon 图标
55

66
### 基础示例
77

8-
<!--DemoStart-->
98
```js
109
import { Icon } from '@uiw/react-native';
1110

@@ -20,11 +19,9 @@ class Demo extends Component {
2019
}
2120
}
2221
```
23-
<!--End-->
2422

2523
### 自定义按钮
2624

27-
<!--DemoStart-->
2825
```js
2926
import { Icon } from '@uiw/react-native';
3027

@@ -43,11 +40,9 @@ class Demo extends Component {
4340
}
4441
}
4542
```
46-
<!--End-->
4743

4844
### SVG 图标支持
4945

50-
<!--DemoStart-->
5146
```js
5247
import { Icon } from '@uiw/react-native';
5348

@@ -62,13 +57,41 @@ const xml = `
6257

6358
class Demo extends Component {
6459
render() {
65-
return (
66-
<Icon xml={xml} />
67-
)
60+
return <Icon xml={xml} />;
6861
}
6962
}
7063
```
71-
<!--End-->
64+
65+
### 包中集成的所有图标
66+
67+
⚠️ 此示例，只是在文档中预览 Icon 图标，并展示图标名称，也可以通过图标 web 官网，网站预览[所有的图标](https://uiwjs.github.io/icons)。
68+
69+
<!--rehype:bgWhite=true&codeSandbox=true&codePen=true&noCode=true-->
70+
```jsx
71+
import ReactDOM from 'react-dom';
72+
import svgPaths from '@uiw/icons/fonts/w-icon.json';
73+
74+
function Demo() {
75+
return (
76+
<div style={{ display: 'flex', flexDirection: 'row', flexWrap: 'wrap' }}>
77+
{Object.keys(svgPaths).map((keyname, idx) => {
78+
return (
79+
<div key={idx} style={{ display: 'flex', flexDirection: 'column', width: 180, paddingBottom: 14 }}>
80+
<svg viewBox="0 0 24 24" width="21">
81+
{svgPaths[keyname].map((path, pathIdx) => (
82+
<path d={path} key={pathIdx} fillRule="evenodd"/>
83+
))}
84+
</svg>
85+
<span style={{ color: '#757575' }}>{keyname}</span>
86+
</div>
87+
);
88+
})}
89+
</div>
90+
);
91+
}
92+
93+
ReactDOM.render(<Demo />, _mount_);
94+
```
7295

7396
## Props
7497

‎website/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
"react-native-web": "0.17.1",
2828
"react-redux": "7.2.5",
2929
"react-router-dom": "5.3.0",
30+
"rehype-rewrite": "2.1.2",
3031
"rehype-attr": "2.0.3",
3132
"uiw": "4.7.16"
3233
},

‎website/src/component/Markdown/SnackPlayer.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ export function SnackPlayer(props: SnackPlayerProps) {
3737
} = props;
3838

3939
return (
40-
<form action="https://snack.expo.dev" method="POST" target="_blank">
40+
<form action="https://snack.expo.dev" method="POST" target="_blank" className={styles.form}>
4141
<input type="hidden" name="platform" value={platform} />
4242
<input type="hidden" name="name" value={name} />
4343
{dependencies && <input type="hidden" name="dependencies" value={dependencies} />}

‎website/src/component/Markdown/index.module.less

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
border-radius: 4px;
1212
padding: 0 6px;
1313
height: 22px;
14-
margin: 18px 0 -8px 18px;
14+
margin: 12px 0 -8px 18px;
1515
text-decoration: none;
1616
background: #2196f3;
1717
color: #fff;
@@ -24,3 +24,11 @@
2424
color: #fff;
2525
}
2626
}
27+
28+
.form {
29+
padding-top: 1px;
30+
}
31+
32+
.rehyp {
33+
overflow: initial !important;
34+
}

‎website/src/component/Markdown/index.tsx

Lines changed: 46 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, { Component, Fragment } from 'react';
22
import MarkdownPreview from '@uiw/react-markdown-preview';
3-
// @ts-ignore
3+
import CodePreview from '@uiw/react-code-preview';
4+
import rehypeRewrite from 'rehype-rewrite';
45
import rehypeAttr from 'rehype-attr';
56
import Contributors from '../Contributors';
67
import Footer from '../Footer';
@@ -17,7 +18,7 @@ interface MarkdownState {
1718
message?: string;
1819
}
1920

20-
const getCodeStr = (data: any[] = [], code: string = '') => {
21+
function getCodeStr(data: any[] = [], code: string = '') {
2122
data.forEach((node) => {
2223
if (node.type === 'text') {
2324
code += node.value;
@@ -26,7 +27,7 @@ const getCodeStr = (data: any[] = [], code: string = '') => {
2627
}
2728
});
2829
return code;
29-
};
30+
}
3031

3132
// utilitary function to create a dictionary of packaged files
3233
// based on the output of require.context()
@@ -38,6 +39,7 @@ export const importAll = (r: any, cache: { [key: string]: string }) =>
3839

3940
export default class Markdown extends Component<MarkdownProps, MarkdownState> {
4041
path?: string;
42+
dependencies?: Record<string, any>;
4143
imageFiles: { [key: string]: string } = {};
4244
getMarkdown?: () => Promise<string>;
4345
constructor(props: MarkdownProps) {
@@ -85,13 +87,24 @@ export default class Markdown extends Component<MarkdownProps, MarkdownState> {
8587
<div className={styles.warpper} style={style}>
8688
<MarkdownPreview
8789
source={this.state.markdown}
88-
rehypePlugins={[[rehypeAttr as any, { properties: 'attr' }]]}
90+
rehypePlugins={[
91+
[rehypeAttr, { properties: 'attr' }],
92+
[
93+
rehypeRewrite,
94+
(node: any) => {
95+
if (node.type === 'element' && node.tagName === 'pre' && node.properties['data-type'] === 'rehyp') {
96+
node.properties['className'].push(styles.rehyp);
97+
}
98+
},
99+
],
100+
]}
89101
transformImageUri={this.transformImageUri.bind(this)}
90102
components={{
91103
/**
92104
* snack, https://snack.expo.dev
93105
*/
94106
code: ({
107+
node,
95108
snack,
96109
inline,
97110
platform,
@@ -109,7 +122,8 @@ export default class Markdown extends Component<MarkdownProps, MarkdownState> {
109122
...props
110123
}: any) => {
111124
if (snack && !inline) {
112-
let filesObj = { 'App.js': { type: 'CODE', contents: getCodeStr(props.node.children) || '' } };
125+
const content = node && node.children ? getCodeStr(node.children) : '';
126+
let filesObj = { 'App.js': { type: 'CODE', contents: content } };
113127
try {
114128
const fObj = JSON.parse(files || '{}');
115129
filesObj = { ...filesObj, ...fObj };
@@ -134,7 +148,33 @@ export default class Markdown extends Component<MarkdownProps, MarkdownState> {
134148
</Fragment>
135149
);
136150
}
137-
return <code {...props} />;
151+
const { noPreview, noScroll, bgWhite, noCode, codePen, codeSandbox } = props;
152+
const config: any = {
153+
noPreview,
154+
noScroll,
155+
bgWhite,
156+
noCode,
157+
codePen,
158+
codeSandbox,
159+
};
160+
if (Object.keys(config).filter((name) => config[name] !== undefined).length === 0) {
161+
return <code {...props} />;
162+
}
163+
164+
return (
165+
<CodePreview
166+
code={getCodeStr(node.children)}
167+
dependencies={{ ...this.dependencies, React, ...React }}
168+
{...{
169+
noPreview,
170+
noScroll,
171+
bgWhite,
172+
noCode,
173+
codePenOption: codePen,
174+
codeSandboxOption: codeSandbox,
175+
}}
176+
/>
177+
);
138178
},
139179
}}
140180
/>

‎website/src/pages/components/icon/index.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1+
import svgPaths from '@uiw/icons/fonts/w-icon.json';
12
import Markdown, { importAll } from '../../../component/Markdown';
23

34
export default class Page extends Markdown {
5+
dependencies = { svgPaths };
46
path = '/packages/core/src/Icon/README.md';
57
getMarkdown = async () => {
68
const md = await import('@uiw/react-native/lib/Icon/README.md');

‎yarn.lock

Lines changed: 36 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -3090,9 +3090,9 @@
30903090
"@lezer/lr" "^0.15.0"
30913091

30923092
"@lezer/lr@^0.15.0":
3093-
version "0.15.3"
3094-
resolved "https://registry.yarnpkg.com/@lezer/lr/-/lr-0.15.3.tgz#b4be187e772654ebe84665509efc2f7ad2cdce8c"
3095-
integrity sha512-ooTxk6IAoMh5iUvh4iCpg4lazmMHDjyJthBeM9oS1DGVpqueTSUGzk5j4IHGTmUbKKTIWVGoEm/AYEgJt0+wVA==
3093+
version "0.15.4"
3094+
resolved "https://registry.yarnpkg.com/@lezer/lr/-/lr-0.15.4.tgz#634670d7224040fddac1370af01211eecd9ac0a0"
3095+
integrity sha512-vwgG80sihEGJn6wJp6VijXrnzVai/KPva/OzYKaWvIx0IiXKjoMQ8UAwcgpSBwfS4Fbz3IKOX/cCNXU3r1FvpQ==
30963096
dependencies:
30973097
"@lezer/common" "^0.15.0"
30983098

@@ -3488,9 +3488,9 @@
34883488
integrity sha512-0jbp4RxjYopTsIdLl+/Fy2TiwVYHy4mgeu07DG4b/LyM0OS/+lPP5c9sbnt/AMlnF6qz2JRZpPpGw1eMNS6A4w==
34893489

34903490
"@react-navigation/core@^6.0.1":
3491-
version "6.0.1"
3492-
resolved "https://registry.yarnpkg.com/@react-navigation/core/-/core-6.0.1.tgz#4424ee1f83e2e305ef80d27c2778fb82fba852a0"
3493-
integrity sha512-mVdvBDYdz8uzLQHokmVdX/xC4rS7NIkD1FN/yaGdovVzYApAhM+UGd3w1zskjyCSyXaVHHOwV59ZGVew+84xfQ==
3491+
version "6.0.2"
3492+
resolved "https://registry.yarnpkg.com/@react-navigation/core/-/core-6.0.2.tgz#301be6c28211ae2571f3e9e3f74c8f077619ccdd"
3493+
integrity sha512-Omsb670qmNfO0KGiRrOE+KXpCYQ6jXxE5uCPnj5srW31s6YDGiFl/M5sRcMyBdDXLXp5HjkQTJpU9ilmjKtL5g==
34943494
dependencies:
34953495
"@react-navigation/routers" "^6.0.1"
34963496
escape-string-regexp "^4.0.0"
@@ -3499,9 +3499,9 @@
34993499
react-is "^16.13.0"
35003500

35013501
"@react-navigation/elements@^1.1.0":
3502-
version "1.1.0"
3503-
resolved "https://registry.yarnpkg.com/@react-navigation/elements/-/elements-1.1.0.tgz#483155ccf5a8f18d015db283bed34cc2255e2e9e"
3504-
integrity sha512-jZncciZPGuoP6B6f+Wpf6MYSSYy86B2HJDbFTCtT5xZV0w6V9GgCeqvSTOEAxifZrmKl8uDxsr0GrIxgQE8NxA==
3502+
version "1.1.2"
3503+
resolved "https://registry.yarnpkg.com/@react-navigation/elements/-/elements-1.1.2.tgz#82d8978489e47e7c54f67c453ba4a124046fe253"
3504+
integrity sha512-PbPCleC1HpUlXtuP0DFNCNTEhRLd6lmB0KxY0SGRGqCemS3HpG/PajEQ1LDe7S51M03a1tDby1MfKTkNanUXAg==
35053505

35063506
"@react-navigation/native@6.0.2":
35073507
version "6.0.2"
@@ -6765,7 +6765,7 @@ browserslist@4.14.2:
67656765
escalade "^3.0.2"
67666766
node-releases "^1.1.61"
67676767

6768-
browserslist@^4.0.0, browserslist@^4.12.0, browserslist@^4.16.6, browserslist@^4.17.0, browserslist@^4.6.2, browserslist@^4.6.4:
6768+
browserslist@^4.0.0, browserslist@^4.12.0, browserslist@^4.16.6, browserslist@^4.17.1, browserslist@^4.6.2, browserslist@^4.6.4:
67696769
version "4.17.1"
67706770
resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.17.1.tgz#a98d104f54af441290b7d592626dd541fa642eb9"
67716771
integrity sha512-aLD0ZMDSnF4lUt4ZDNgqi5BUn9BZ7YdQdI/cYlILrhdSSZJLU9aNZoD5/NBmM4SK34APB2e83MOsRt1EnkuyaQ==
@@ -7695,27 +7695,27 @@ copy-descriptor@^0.1.0:
76957695
integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=
76967696

76977697
core-js-compat@^3.16.0, core-js-compat@^3.16.2, core-js-compat@^3.6.2, core-js-compat@^3.8.1, core-js-compat@^3.9.0:
7698-
version "3.18.0"
7699-
resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.18.0.tgz#fb360652201e8ac8da812718c008cd0482ed9b42"
7700-
integrity sha512-tRVjOJu4PxdXjRMEgbP7lqWy1TWJu9a01oBkn8d+dNrhgmBwdTkzhHZpVJnEmhISLdoJI1lX08rcBcHi3TZIWg==
7698+
version "3.18.1"
7699+
resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.18.1.tgz#01942a0877caf9c6e5007c027183cf0bdae6a191"
7700+
integrity sha512-XJMYx58zo4W0kLPmIingVZA10+7TuKrMLPt83+EzDmxFJQUMcTVVmQ+n5JP4r6Z14qSzhQBRi3NSWoeVyKKXUg==
77017701
dependencies:
7702-
browserslist "^4.17.0"
7702+
browserslist "^4.17.1"
77037703
semver "7.0.0"
77047704

77057705
core-js-pure@^3.16.0:
7706-
version "3.18.0"
7707-
resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.18.0.tgz#e5187347bae66448c9e2d67c01c34c4df3261dc5"
7708-
integrity sha512-ZnK+9vyuMhKulIGqT/7RHGRok8RtkHMEX/BGPHkHx+ouDkq+MUvf9mfIgdqhpmPDu8+V5UtRn/CbCRc9I4lX4w==
7706+
version "3.18.1"
7707+
resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.18.1.tgz#097d34d24484be45cea700a448d1e74622646c80"
7708+
integrity sha512-kmW/k8MaSuqpvA1xm2l3TVlBuvW+XBkcaOroFUpO3D4lsTGQWBTb/tBDCf/PNkkPLrwgrkQRIYNPB0CeqGJWGQ==
77097709

77107710
core-js@^2.4.0:
77117711
version "2.6.12"
77127712
resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
77137713
integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==
77147714

77157715
core-js@^3.6.5:
7716-
version "3.18.0"
7717-
resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.18.0.tgz#9af3f4a6df9ba3428a3fb1b171f1503b3f40cc49"
7718-
integrity sha512-WJeQqq6jOYgVgg4NrXKL0KLQhi0CT4ZOCvFL+3CQ5o7I6J8HkT5wd53EadMfqTDp1so/MT1J+w2ujhWcCJtN7w==
7716+
version "3.18.1"
7717+
resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.18.1.tgz#289d4be2ce0085d40fc1244c0b1a54c00454622f"
7718+
integrity sha512-vJlUi/7YdlCZeL6fXvWNaLUPh/id12WXj3MbkMw5uOyF0PfWPBNOCNbs53YqgrvtujLNlt9JQpruyIKkUZ+PKA==
77197719

77207720
core-util-is@1.0.2:
77217721
version "1.0.2"
@@ -11147,9 +11147,9 @@ is-glob@^3.1.0:
1114711147
is-extglob "^2.1.0"
1114811148

1114911149
is-glob@^4.0.0, is-glob@^4.0.1, is-glob@~4.0.1:
11150-
version "4.0.1"
11151-
resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.1.tgz#7567dbe9f2f5e2467bc77ab83c4a29482407a5dc"
11152-
integrity sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==
11150+
version "4.0.2"
11151+
resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.2.tgz#859fc2e731e58c902f99fcabccb75a7dd07d29d8"
11152+
integrity sha512-ZZTOjRcDjuAAAv2cTBQP/lL59ZTArx77+7UzHdWW/XB1mrfp7DEaVpKmZ0XIzx+M7AxfhKcqV+nMetUQmFifwg==
1115311153
dependencies:
1115411154
is-extglob "^2.1.1"
1115511155

@@ -14092,9 +14092,9 @@ nanocolors@^0.1.0, nanocolors@^0.1.5:
1409214092
integrity sha512-2nMHqg1x5PU+unxX7PGY7AuYxl2qDx7PSrTRjizr8sxdd3l/3hBuWWaki62qmtYm2U5i4Z5E7GbjlyDFhs9/EQ==
1409314093

1409414094
nanocolors@^0.2.2, nanocolors@^0.2.8:
14095-
version "0.2.9"
14096-
resolved "https://registry.yarnpkg.com/nanocolors/-/nanocolors-0.2.9.tgz#319c5e7a73571abd60e4d273150c2cb95017ac5b"
14097-
integrity sha512-aymgS4Xe0LMqHOHl7jSUEkFh/6O/pcF0j61dBtreQZ1nmbyYdYjSYSJzz0iPLbKPkMtSmdRgyBGywNZGjKOEfw==
14095+
version "0.2.10"
14096+
resolved "https://registry.yarnpkg.com/nanocolors/-/nanocolors-0.2.10.tgz#a712df4d3c1bf12d9b4fb8b5aa61b5ba31337503"
14097+
integrity sha512-i+EDWGsJClQwR/bhLIG/CObZZwaYaS5qt+yjxZbfV+77QiNHNzE9nj4d9Ut1TGZ0R0eSwPcQWzReASzXuw/7oA==
1409814098

1409914099
nanoid@^3.1.23, nanoid@^3.1.25:
1410014100
version "3.1.28"
@@ -17010,6 +17010,13 @@ rehype-rewrite@2.1.1:
1701017010
dependencies:
1701117011
unified "10.1.0"
1701217012

17013+
rehype-rewrite@2.1.2:
17014+
version "2.1.2"
17015+
resolved "https://registry.yarnpkg.com/rehype-rewrite/-/rehype-rewrite-2.1.2.tgz#b64aca92e63b122b106b364bcb5bec1e75bf0f43"
17016+
integrity sha512-OstuGBiB3/j8X6vyKtTT2yaYun9bldku0p+rP3yZyeCwRyzouBaJd77kdvCDnNSuvpaRQI4y3qo8odbqhd4mNg==
17017+
dependencies:
17018+
unified "10.1.0"
17019+
1701317020
rehype-slug@5.0.0:
1701417021
version "5.0.0"
1701517022
resolved "https://registry.yarnpkg.com/rehype-slug/-/rehype-slug-5.0.0.tgz#dfafa1d11577e206970f2d0de023f8490a99dc31"
@@ -19377,9 +19384,9 @@ v8-to-istanbul@^7.0.0:
1937719384
source-map "^0.7.3"
1937819385

1937919386
v8-to-istanbul@^8.0.0:
19380-
version "8.0.0"
19381-
resolved "https://registry.yarnpkg.com/v8-to-istanbul/-/v8-to-istanbul-8.0.0.tgz#4229f2a99e367f3f018fa1d5c2b8ec684667c69c"
19382-
integrity sha512-LkmXi8UUNxnCC+JlH7/fsfsKr5AU110l+SYGJimWNkWhxbN5EyeOtm1MJ0hhvqMMOhGwBj1Fp70Yv9i+hX0QAg==
19387+
version "8.1.0"
19388+
resolved "https://registry.yarnpkg.com/v8-to-istanbul/-/v8-to-istanbul-8.1.0.tgz#0aeb763894f1a0a1676adf8a8b7612a38902446c"
19389+
integrity sha512-/PRhfd8aTNp9Ggr62HPzXg2XasNFGy5PBt0Rp04du7/8GNNSgxFL6WBTkgMKSL9bFjH+8kKEG3f37FmxiTqUUA==
1938319390
dependencies:
1938419391
"@types/istanbul-lib-coverage" "^2.0.1"
1938519392
convert-source-map "^1.6.0"

0 commit comments

Comments
 (0)