mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-18 22:36:31 +08:00
Code Issues Actions 26 Packages Projects Releases Wiki Activity

修复localstorage在ssr过程中的报错

Browse Source
This commit is contained in:
天可 2019-08-23 14:49:11 +08:00
parent 382882247b
commit 5d5b001d48
2 changed files with 35 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
site/theme/static/icon-pic-searcher.less
View File

@ -29,7 +29,7 @@
}
.icon-pic-search-result {
margin-top: 20px;
min-height: 50px;
padding: 0 10px;
> .result-tip {
padding: 10px 0;

57
site/theme/template/IconDisplay/IconPicSearcher.tsx
View File

@ -12,6 +12,7 @@ interface PicSearcherProps {
interface PicSearcherState {
loading: Boolean;
modalVisible: Boolean;
popoverVisible: Boolean;
icons: Array<string>;
fileList: Array<any>;
}
@ -25,12 +26,14 @@ class PicSearcher extends Component<PicSearcherProps, PicSearcherState> {
state = {
loading: false,
modalVisible: false,
popoverVisible: false,
icons: [],
fileList: [],
};
componentDidMount() {
document.addEventListener('paste', this.onPaste);
this.setState({ popoverVisible: !localStorage.getItem('disableIconTip') });
}
componentWillUnmount() {
@ -91,10 +94,11 @@ class PicSearcher extends Component<PicSearcherProps, PicSearcherState> {
toggleModal = () => {
this.setState(prev => ({
modalVisible: !prev.modalVisible,
popoverVisible: false,
fileList: [],
icons: [],
}));
if (localStorage && !localStorage.getItem('disableIconTip')) {
if (!localStorage.getItem('disableIconTip')) {
localStorage.setItem('disableIconTip', 'true');
}
};
@ -111,12 +115,12 @@ class PicSearcher extends Component<PicSearcherProps, PicSearcherState> {
const {
intl: { messages },
} = this.props;
const { modalVisible, icons, fileList, loading } = this.state;
const { modalVisible, popoverVisible, icons, fileList, loading } = this.state;
return (
<div className="icon-pic-searcher">
<Popover
content={messages[`app.docs.components.icon.pic-searcher.intro`]}
visible={!(localStorage && localStorage.getItem('disableIconTip'))}
visible={popoverVisible}
>
<Icon type="camera" className="icon-pic-btn" onClick={this.toggleModal} />
</Popover>
@ -152,27 +156,34 @@ class PicSearcher extends Component<PicSearcherProps, PicSearcherState> {
)}
<table>
{icons.length > 0 && (
<tr>
<th className="col-icon">
{messages['app.docs.components.icon.pic-searcher.th-icon']}
</th>
<th>{messages['app.docs.components.icon.pic-searcher.th-score']}</th>
</tr>
<thead>
<tr>
<th className="col-icon">
{messages['app.docs.components.icon.pic-searcher.th-icon']}
</th>
<th>{messages['app.docs.components.icon.pic-searcher.th-score']}</th>
</tr>
</thead>
)}
{icons.map((icon: iconObject) => (
<tr key={icon.type}>
<td className="col-icon">
<CopyToClipboard text={`<Icon type="${icon.type}" />`} onCopy={this.onCopied}>
<Tooltip title={icon.type} placement="right">
<Icon type={icon.type} />
</Tooltip>
</CopyToClipboard>
</td>
<td>
<Progress percent={Math.ceil(icon.score * 100)} />
</td>
</tr>
))}
<tbody>
{icons.map((icon: iconObject) => (
<tr key={icon.type}>
<td className="col-icon">
<CopyToClipboard
text={`<Icon type="${icon.type}" />`}
onCopy={this.onCopied}
>
<Tooltip title={icon.type} placement="right">
<Icon type={icon.type} />
</Tooltip>
</CopyToClipboard>
</td>
<td>
<Progress percent={Math.ceil(icon.score * 100)} />
</td>
</tr>
))}
</tbody>
</table>
</div>
</Spin>