@ant-design/icons#SnippetsOutlined JavaScript Examples
The following examples show how to use
@ant-design/icons#SnippetsOutlined.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: index.jsx From stack-labs-site with MIT License | 4 votes |
|
render() {
const { state } = this;
const { props } = this;
const {
meta,
src,
content,
preview,
highlightedCodes,
style,
highlightedStyle,
expand,
utils,
intl: { locale },
theme,
} = props;
const { copied, copyTooltipVisible } = state;
if (!this.liveDemo) {
this.liveDemo = meta.iframe ? (
<BrowserFrame>
<iframe
ref={this.iframeRef}
onLoad={this.handleIframeReady}
src={src}
height={meta.iframe}
title="demo"
className="iframe-demo"
/>
</BrowserFrame>
) : (
preview(React, ReactDOM)
);
}
const codeExpand = this.state.codeExpand || expand;
const codeBoxClass = classNames('code-box', {
expand: codeExpand,
'code-box-debug': meta.debug,
});
const localizedTitle = meta.title[locale] || meta.title;
const localizeIntro = content[locale] || content;
const introChildren = utils.toReactComponent(['div'].concat(localizeIntro));
const highlightClass = classNames({
'highlight-wrapper': true,
'highlight-wrapper-expand': codeExpand,
});
const prefillStyle = `@import 'antd/dist/antd.css';\n\n${style || ''}`.replace(
new RegExp(`#${meta.id}\\s*`, 'g'),
'',
);
const html = `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
</head>
<body>
<div id="container" style="padding: 24px" />
<script>var mountNode = document.getElementById('container');</script>
</body>
</html>`;
const sourceCode = this.getSourceCode();
const codepenPrefillConfig = {
title: `${localizedTitle} - Micro 中国 Demo`,
html,
js: sourceCode
.replace(/import\s+{(\s+[^}]*\s+)}\s+from\s+'antd';/, 'const { $1 } = antd;')
.replace(
/import\s+{(\s+[^}]*\s+)}\s+from\s+'@ant-design\/icons';/,
'const { $1 } = icons;',
)
.replace("import moment from 'moment';", '')
.replace(/import\s+{\s+(.*)\s+}\s+from\s+'react-router';/, 'const { $1 } = ReactRouter;')
.replace(
/import\s+{\s+(.*)\s+}\s+from\s+'react-router-dom';/,
'const { $1 } = ReactRouterDOM;',
)
.replace(/([A-Za-z]*)\s+as\s+([A-Za-z]*)/, '$1:$2'),
css: prefillStyle,
editors: '001',
// eslint-disable-next-line no-undef
css_external: `https://unpkg.com/antd@${antdReproduceVersion}/dist/antd.css`,
js_external: [
'[email protected]/umd/react.development.js',
'[email protected]/umd/react-dom.development.js',
'moment/min/moment-with-locales.js',
// eslint-disable-next-line no-undef
`antd@${antdReproduceVersion}/dist/antd-with-locales.js`,
`@ant-design/icons/dist/index.umd.js`,
'react-router-dom/umd/react-router-dom.min.js',
'[email protected]/umd/ReactRouter.min.js',
]
.map(url => `https://unpkg.com/${url}`)
.join(';'),
js_pre_processor: 'typescript',
};
const riddlePrefillConfig = {
title: `${localizedTitle} - Micro 中国 Demo`,
js: sourceCode,
css: prefillStyle,
};
const dependencies = sourceCode.split('\n').reduce(
(acc, line) => {
const matches = line.match(/import .+? from '(.+)';$/);
if (matches && matches[1] && !line.includes('antd')) {
const paths = matches[1].split('/');
if (paths.length) {
const dep = paths[0].startsWith('@') ? `${paths[0]}/${paths[1]}` : paths[0];
acc[dep] = 'latest';
}
}
return acc;
},
// eslint-disable-next-line no-undef
{ antd: antdReproduceVersion },
);
dependencies['@ant-design/icons'] = 'latest';
// Reorder source code
let parsedSourceCode = sourceCode;
let importReactContent = "import React from 'react';";
const importReactReg = /import(\D*)from 'react';/;
const matchImportReact = parsedSourceCode.match(importReactReg);
if (matchImportReact) {
importReactContent = matchImportReact[0];
parsedSourceCode = parsedSourceCode.replace(importReactReg, '').trim();
}
const indexJsContent = `
${importReactContent}
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
${parsedSourceCode.replace('mountNode', "document.getElementById('container')")}
`.trim();
const indexCssContent = (style || '').replace(new RegExp(`#${meta.id}\\s*`, 'g'), '');
const codesandboxPackage = {
name: `${localizedTitle} - Micro 中国 Demo`,
version: '1.0.0',
main: 'index.js',
dependencies: {
...dependencies,
react: '^16.12.0',
'react-dom': '^16.12.0',
'react-scripts': '^3.0.1',
},
devDependencies: {
typescript: '^3.8.2',
},
scripts: {
start: 'react-scripts start',
build: 'react-scripts build',
test: 'react-scripts test --env=jsdom',
eject: 'react-scripts eject',
},
browserslist: ['>0.2%', 'not dead', 'not ie <= 11', 'not op_mini all'],
};
const codesanboxPrefillConfig = {
files: {
'package.json': { content: codesandboxPackage },
'index.css': { content: indexCssContent },
'index.js': { content: indexJsContent },
'index.html': {
content: html,
},
},
};
const stackblitzPrefillConfig = {
title: `${localizedTitle} - Micro 中国 Demo`,
template: 'create-react-app',
dependencies,
files: {
'index.css': indexCssContent,
'index.js': indexJsContent,
'index.html': html,
},
};
return (
<section className={codeBoxClass} id={meta.id}>
<section className="code-box-demo">
<ErrorBoundary>{this.liveDemo}</ErrorBoundary>
{style ? (
<style dangerouslySetInnerHTML={{ __html: style }} />
) : null}
</section>
<section className="code-box-meta markdown">
<div className="code-box-title">
<Tooltip title={meta.debug ? <FormattedMessage id="app.demo.debug" /> : ''}>
<a href={`#${meta.id}`} ref={this.saveAnchor}>
{localizedTitle}
</a>
</Tooltip>
<EditButton
title={<FormattedMessage id="app.content.edit-demo" />}
filename={meta.filename}
/>
</div>
<div className="code-box-description">{introChildren}</div>
<div className="code-box-actions">
<form
action="//riddle.alibaba-inc.com/riddles/define"
method="POST"
target="_blank"
onClick={() => this.track({ type: 'riddle', demo: meta.id })}
>
<input type="hidden" name="data" value={JSON.stringify(riddlePrefillConfig)} />
<Tooltip title={<FormattedMessage id="app.demo.riddle" />}>
<input
type="submit"
value="Create New Riddle with Prefilled Data"
className="code-box-riddle"
/>
</Tooltip>
</form>
<form
action="https://codesandbox.io/api/v1/sandboxes/define"
method="POST"
target="_blank"
onClick={() => this.track({ type: 'codesandbox', demo: meta.id })}
>
<input
type="hidden"
name="parameters"
value={compress(JSON.stringify(codesanboxPrefillConfig))}
/>
<Tooltip title={<FormattedMessage id="app.demo.codesandbox" />}>
<input
type="submit"
value="Create New Sandbox with Prefilled Data"
className="code-box-codesandbox"
/>
</Tooltip>
</form>
<form
action="https://codepen.io/pen/define"
method="POST"
target="_blank"
onClick={() => this.track({ type: 'codepen', demo: meta.id })}
style={{
display: sourceCode ? '' : 'none',
}}
>
<input type="hidden" name="data" value={JSON.stringify(codepenPrefillConfig)} />
<Tooltip title={<FormattedMessage id="app.demo.codepen" />}>
<input
type="submit"
value="Create New Pen with Prefilled Data"
className="code-box-codepen"
/>
</Tooltip>
</form>
<Tooltip title={<FormattedMessage id="app.demo.stackblitz" />}>
<span
className="code-box-code-action"
onClick={() => {
this.track({ type: 'stackblitz', demo: meta.id });
stackblitzSdk.openProject(stackblitzPrefillConfig);
}}
>
<ThunderboltOutlined />
</span>
</Tooltip>
<CopyToClipboard text={sourceCode} onCopy={() => this.handleCodeCopied(meta.id)}>
<Tooltip
visible={copyTooltipVisible}
onVisibleChange={this.onCopyTooltipVisibleChange}
title={<FormattedMessage id={`app.demo.${copied ? 'copied' : 'copy'}`} />}
>
{React.createElement(
copied && copyTooltipVisible ? CheckOutlined : SnippetsOutlined,
{
className: 'code-box-code-copy',
},
)}
</Tooltip>
</CopyToClipboard>
<Tooltip
title={<FormattedMessage id={`app.demo.code.${codeExpand ? 'hide' : 'show'}`} />}
>
<span className="code-expand-icon">
<img
alt="expand code"
src={
theme === 'dark'
? 'https://gw.alipayobjects.com/zos/antfincdn/btT3qDZn1U/wSAkBuJFbdxsosKKpqyq.svg'
: 'https://gw.alipayobjects.com/zos/rmsportal/wSAkBuJFbdxsosKKpqyq.svg'
}
className={codeExpand ? 'code-expand-icon-hide' : 'code-expand-icon-show'}
onClick={() => this.handleCodeExpand(meta.id)}
/>
<img
alt="expand code"
src={
theme === 'dark'
? 'https://gw.alipayobjects.com/zos/antfincdn/CjZPwcKUG3/OpROPHYqWmrMDBFMZtKF.svg'
: 'https://gw.alipayobjects.com/zos/rmsportal/OpROPHYqWmrMDBFMZtKF.svg'
}
className={codeExpand ? 'code-expand-icon-show' : 'code-expand-icon-hide'}
onClick={() => this.handleCodeExpand(meta.id)}
/>
</span>
</Tooltip>
</div>
</section>
<section className={highlightClass} key="code">
<CodePreview toReactComponent={props.utils.toReactComponent} codes={highlightedCodes} />
{highlightedStyle ? (
<div key="style" className="highlight">
<pre>
<code className="css" dangerouslySetInnerHTML={{ __html: highlightedStyle }} />
</pre>
</div>
) : null}
</section>
</section>
);
}
