Skip to content

Commit c98d24e

Browse files
author
zhaozhiwen
committed
chore: a)移除antd;b)支持文档路径别名
a)移除antd,避免其全局样式污染文档样式,导致组件样式异常;b)使用tsconfig.build.json出去demo和__tests__文件夹内容,tsconfig.json则包含,避免alias提示失效
1 parent 2bde2f8 commit c98d24e

10 files changed

+470
-911
lines changed

‎doc-comps/happy-box/index.less

-129
This file was deleted.

‎doc-comps/happy-box/index.tsx

+20-17
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,19 @@
11
import React from 'react';
22
import Editor from 'react-simple-code-editor';
33
import CopyToClipboard from 'react-copy-to-clipboard';
4-
import useToggle from 'react-use/esm/useToggle';
5-
import { Divider, Typography, Icon, Tooltip, message } from 'antd';
4+
import { useToggle } from 'react-use';
5+
import ReactTooltip from 'react-tooltip';
6+
import IconCopy from 'react-feather/dist/icons/clipboard';
7+
import IconCode from 'react-feather/dist/icons/code';
68
import { highlight, languages } from 'prismjs/components/prism-core';
9+
import { StyledContainer, StyledIconWrapper } from './style';
710

811
import 'prismjs/components/prism-clike';
912
import 'prismjs/components/prism-javascript';
1013
import 'prismjs/components/prism-markup';
11-
import './index.less';
1214

1315
require('prismjs/components/prism-jsx');
1416

15-
const { Text } = Typography;
1617
interface Props {
1718
code: string;
1819
title?: React.ReactNode;
@@ -23,27 +24,29 @@ export const HappyBox: React.FC<Props> = ({ code, title, desc, children }) => {
2324
const [isEditVisible, toggleEditVisible] = useToggle(false);
2425

2526
return (
26-
<div className="code-box">
27+
<StyledContainer>
2728
<section className="code-box-demo"> {children}</section>
2829
<section className="code-box-meta">
29-
<Divider orientation="left">{title || '示例'}</Divider>
30+
<div className="text-divider">
31+
<span>{title || '示例'}</span>
32+
</div>
3033
<div className="code-box-description">
31-
<Text>{desc || '暂无描述'}</Text>
34+
<p>{desc || '暂无描述'}</p>
3235
</div>
33-
<Divider dashed></Divider>
36+
<div className="divider" />
3437
<div className="code-box-action">
35-
<Tooltip placement="top" title="复制代码">
36-
<CopyToClipboard text={code} onCopy={() => message.success('复制成功')}>
37-
<Icon type="copy" />
38-
</CopyToClipboard>
39-
</Tooltip>
40-
<Tooltip placement="top" title={isEditVisible ? '收起代码' : '显示代码'}>
41-
<Icon type="code" onClick={toggleEditVisible} />
42-
</Tooltip>
38+
<CopyToClipboard text={code} onCopy={() => alert('复制成功')}>
39+
<IconCopy data-place="top" data-tip="复制代码" />
40+
</CopyToClipboard>
41+
42+
<StyledIconWrapper onClick={toggleEditVisible}>
43+
<IconCode data-place="top" data-tip={isEditVisible ? '收起代码' : '显示代码'} />
44+
</StyledIconWrapper>
4345
</div>
4446
</section>
4547
{renderEditor()}
46-
</div>
48+
<ReactTooltip />
49+
</StyledContainer>
4750
);
4851

4952
function renderEditor() {

‎doc-comps/happy-box/style.ts

+193
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,193 @@
1+
import styled from 'styled-components';
2+
3+
export const StyledIconWrapper = styled.div`
4+
display: flex;
5+
align-items: center;
6+
margin-left: 10px;
7+
`;
8+
9+
export const StyledContainer = styled.div`
10+
position: relative;
11+
display: inline-block;
12+
width: 100%;
13+
margin: 0 0 16px;
14+
border: 1px solid #ebedf0;
15+
border-radius: 2px;
16+
transition: all 0.2s;
17+
18+
.text-divider {
19+
display: table;
20+
21+
&::before,
22+
&::after {
23+
content: '';
24+
position: relative;
25+
display: table-cell;
26+
transform: translateY(50%);
27+
content: '';
28+
border-top: 1px solid #e8e8e8;
29+
}
30+
31+
&::before {
32+
top: 50%;
33+
width: 5%;
34+
}
35+
36+
&::after {
37+
width: 95%;
38+
top: 50%;
39+
width: 95%;
40+
}
41+
42+
& > span {
43+
display: inline-block;
44+
padding: 0 10px;
45+
font-weight: 500;
46+
font-size: 16px;
47+
white-space: nowrap;
48+
text-align: center;
49+
font-variant: tabular-nums;
50+
line-height: 1.5;
51+
}
52+
}
53+
54+
.divider {
55+
margin: 0;
56+
background: none;
57+
border: dashed #e8e8e8;
58+
border-width: 1px 0 0;
59+
display: block;
60+
clear: both;
61+
width: 100%;
62+
min-width: 100%;
63+
height: 1px;
64+
position: relative;
65+
top: -0.06em;
66+
box-sizing: border-box;
67+
padding: 0;
68+
font-size: 14px;
69+
font-variant: tabular-nums;
70+
line-height: 1.5;
71+
list-style: none;
72+
font-feature-settings: 'tnum';
73+
}
74+
75+
.code-box-demo {
76+
transition: all 0.2s;
77+
padding: 42px 24px 50px;
78+
}
79+
80+
.code-box-meta {
81+
font-size: 14px;
82+
line-height: 2;
83+
}
84+
85+
.code-box .ant-divider {
86+
margin: 0;
87+
}
88+
89+
.code-box-description {
90+
padding: 18px 24px 12px;
91+
}
92+
93+
.code-box-action {
94+
height: 40px;
95+
display: flex;
96+
align-items: center;
97+
justify-content: center;
98+
font-size: 16px;
99+
}
100+
101+
.code-box-action .anticon {
102+
margin: 0 8px;
103+
cursor: pointer;
104+
}
105+
106+
.container_editor_area {
107+
border-top: 1px solid rgb(232, 232, 232);
108+
padding: 16px;
109+
}
110+
111+
.container__editor {
112+
font-variant-ligatures: common-ligatures;
113+
border-radius: 3px;
114+
}
115+
116+
.container__editor textarea {
117+
outline: 0;
118+
background-color: none;
119+
}
120+
121+
.button {
122+
display: inline-block;
123+
padding: 0 6px;
124+
text-decoration: none;
125+
background: #000;
126+
color: #fff;
127+
}
128+
129+
.button:hover {
130+
background: linear-gradient(45deg, #e42b66, #e2433f);
131+
}
132+
133+
/* Syntax highlighting */
134+
.token.comment,
135+
.token.prolog,
136+
.token.doctype,
137+
.token.cdata {
138+
color: #90a4ae;
139+
}
140+
.token.punctuation {
141+
color: #9e9e9e;
142+
}
143+
.namespace {
144+
opacity: 0.7;
145+
}
146+
.token.property,
147+
.token.tag,
148+
.token.boolean,
149+
.token.number,
150+
.token.constant,
151+
.token.symbol,
152+
.token.deleted {
153+
color: #e91e63;
154+
}
155+
.token.selector,
156+
.token.attr-name,
157+
.token.string,
158+
.token.char,
159+
.token.builtin,
160+
.token.inserted {
161+
color: #4caf50;
162+
}
163+
.token.operator,
164+
.token.entity,
165+
.token.url,
166+
.language-css .token.string,
167+
.style .token.string {
168+
color: #795548;
169+
}
170+
.token.atrule,
171+
.token.attr-value,
172+
.token.keyword {
173+
color: #3f51b5;
174+
}
175+
.token.function {
176+
color: #f44336;
177+
}
178+
.token.regex,
179+
.token.important,
180+
.token.variable {
181+
color: #ff9800;
182+
}
183+
.token.important,
184+
.token.bold {
185+
font-weight: bold;
186+
}
187+
.token.italic {
188+
font-style: italic;
189+
}
190+
.token.entity {
191+
cursor: help;
192+
}
193+
`;

0 commit comments

Comments
 (0)