feat: Add copy code function.

jaywcjlove · jaywcjlove · commit 75c94ae629a8 · 2019-08-05T16:41:59.000+08:00
diff --git a/package.json b/package.json
@@ -58,6 +58,7 @@
   "dependencies": {
     "@babel/runtime": "^7.5.5",
     "@babel/standalone": "^7.5.5",
+    "@uiw/copy-to-clipboard": "^1.0.10",
     "@uiw/react-codemirror": "^1.0.26",
     "classnames": "^2.2.6",
     "uiw": "^3.2.0"
diff --git a/src/icon.tsx b/src/icon.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 
 const full = (
-  <svg viewBox="0 0 1024 1024" width="12" height="12">
-    <path d="M919.920093 725.414549q3.014188 26.122962 7.033105 58.776664t7.53547 66.814498 7.53547 67.819227 7.033105 60.786122q6.028376 47.222277-41.193901 44.208089-25.118232-2.009459-56.767205-5.526011t-64.805039-7.53547-65.809769-8.037834-59.781393-7.033105q-29.137149-3.014188-37.174984-16.578033t9.042564-30.644243q11.052022-10.047293 27.127691-27.630056t27.127691-28.634785q11.052022-12.056752 7.033105-22.104044t-16.075669-23.108774q-28.13242-27.127691-51.241194-49.231735t-51.241194-51.241194q-6.028376-6.028376-12.056752-13.061481t-9.042564-15.573304-1.004729-18.085127 13.061481-20.59695q6.028376-6.028376 10.047293-10.549658t8.037834-8.037834 8.540199-8.037834 11.554387-12.559116q20.094586-20.094586 37.174984-17.080398t37.174984 23.108774 41.193901 40.691536 47.222277 46.719912q19.089857 18.085127 32.653702 25.118232t26.625326-6.028376q9.042564-9.042564 22.606409-21.60168t23.611138-22.606409q17.080398-17.080398 30.644243-13.061481t16.578033 30.141879zM43.79615 383.80659q-3.014188-26.122962-7.033105-58.776664t-7.53547-66.814498-7.53547-67.819227-7.033105-60.786122q-3.014188-26.122962 6.53074-36.170255t33.658431-8.037834q25.118232 2.009459 56.767205 5.526011t64.805039 7.53547 65.809769 8.037834 59.781393 7.033105q30.141879 3.014188 37.677348 16.578033t-9.544928 30.644243q-10.047293 10.047293-24.615868 26.122962t-25.620597 27.127691q-12.056752 12.056752-8.037834 22.104044t17.080398 23.108774q13.061481 14.06621 24.615868 24.615868t22.606409 21.099315 23.108774 22.606409l25.118232 25.118232q6.028376 6.028376 11.554387 14.06621t8.037834 17.080398-0.502365 19.089857-13.061481 20.094586l-11.052022 11.052022q-4.018917 4.018917-7.53547 8.037834t-8.540199 8.037834l-11.052022 12.056752q-20.094586 20.094586-34.663161 15.070939t-34.663161-25.118232-38.179713-37.677348-44.208089-43.705724q-18.085127-18.085127-32.151337-25.118232t-27.127691 6.028376q-9.042564 10.047293-25.118232 24.615868t-26.122962 24.615868q-17.080398 17.080398-30.141879 13.061481t-16.075669-30.141879zM905.853883 84.397261q26.122962-3.014188 36.170255 6.53074t8.037834 34.663161-5.526011 56.767205-7.53547 64.805039-8.037834 65.809769-7.033105 59.781393q-3.014188 29.137149-16.578033 37.174984t-30.644243-10.047293q-10.047293-10.047293-26.122962-24.615868t-27.127691-25.620597q-12.056752-11.052022-22.104044-7.53547t-23.108774 16.578033q-27.127691 27.127691-47.724641 49.231735t-48.729371 50.236465q-6.028376 6.028376-14.06621 11.554387t-17.080398 8.037834-19.089857-0.502365-20.094586-14.06621q-6.028376-6.028376-10.549658-10.047293t-8.540199-8.037834-8.540199-8.037834-11.554387-12.056752q-20.094586-20.094586-16.075669-35.165525t25.118232-35.165525l38.179713-40.189172q19.089857-20.094586 45.212818-46.217547 19.089857-18.085127 26.122962-32.151337t-7.033105-26.122962q-9.042564-9.042564-23.108774-24.615868t-24.113503-25.620597q-17.080398-17.080398-13.061481-30.141879t30.141879-16.075669 58.776664-7.033105 67.316863-7.53547 67.819227-7.53547 60.283758-7.033105zM350.238584 640.012559q6.028376 6.028376 10.549658 10.047293t8.540199 8.037834l8.037834 9.042564 12.056752 11.052022q20.094586 20.094586 17.582763 36.672619t-23.611138 37.677348q-19.089857 19.089857-40.189172 40.691536t-47.222277 47.724641q-18.085127 18.085127-22.606409 29.639514t8.540199 24.615868q10.047293 9.042564 22.606409 22.606409t22.606409 23.611138q17.080398 17.080398 12.559116 30.141879t-30.644243 16.075669-58.274299 7.033105-66.814498 8.037834-68.321592 8.037834-60.786122 7.033105q-25.118232 2.009459-35.66789-7.53547t-8.540199-33.658431q2.009459-25.118232 5.526011-56.767205t7.53547-64.805039 8.037834-65.809769 7.033105-59.781393q3.014188-30.141879 16.578033-37.677348t30.644243 9.544928q10.047293 10.047293 27.630056 26.122962t28.634785 27.127691q12.056752 12.056752 20.094586 10.549658t20.094586-14.568575q13.061481-13.061481 25.118232-25.620597t24.113503-24.615868 24.615868-25.118232 26.625326-27.127691q6.028376-6.028376 13.061481-12.056752t15.573304-9.042564 18.085127-0.502365 20.59695 13.563845z" />
+  <svg viewBox="0 0 1024 1024">
+    <path d="M909 959H780a30 30 0 0 1 0-60h99a20 20 0 0 0 20-20v-99a30 30 0 0 1 60 0v129a50 50 0 0 1-50 50z m20-685a30 30 0 0 1-30-30v-99a20 20 0 0 0-20-20h-99a30 30 0 0 1 0-60h129a50 50 0 0 1 50 50v129a30 30 0 0 1-30 30z m-157 28v420a50 50 0 0 1-50 50H302a50 50 0 0 1-50-50V302a50 50 0 0 1 50-50h420a50 50 0 0 1 50 50z m-60 30a20 20 0 0 0-20-20H332a20 20 0 0 0-20 20v360a20 20 0 0 0 20 20h360a20 20 0 0 0 20-20V332zM244 125h-99a20 20 0 0 0-20 20v99a30 30 0 0 1-60 0V115a50 50 0 0 1 50-50h129a30 30 0 0 1 0 60zM95 750a30 30 0 0 1 30 30v99a20 20 0 0 0 20 20h99a30 30 0 0 1 0 60H115a50 50 0 0 1-50-50V780a30 30 0 0 1 30-30z" />
   </svg>
 );
 
@@ -16,7 +16,14 @@ const bgPlaid = (
   </svg>
 )
 
+const copy = (
+  <svg viewBox="0 0 1024 1024">
+    <path d="M869.865 46.545a107.706 107.706 0 0 1 107.59 107.567v599.412a107.706 107.706 0 0 1-107.59 107.567h-148.41v8.797a107.683 107.683 0 0 1-107.567 107.567H154.112A107.683 107.683 0 0 1 46.545 869.888V270.476a107.683 107.683 0 0 1 107.567-107.567h148.433v-8.797a107.706 107.706 0 0 1 107.59-107.567h459.73z m-715.73 861.091h459.73a37.841 37.841 0 0 0 37.771-37.748V270.476c0-20.806-16.942-37.749-37.748-37.749H154.135c-20.806 0-37.771 16.943-37.771 37.749v599.412c0 20.83 16.965 37.748 37.771 37.748z m753.501-154.112V154.112c0-20.806-16.965-37.748-37.771-37.748h-459.73c-20.806 0-37.771 16.942-37.771 37.748v8.797h241.524a107.683 107.683 0 0 1 107.567 107.567v520.797h148.41c20.806 0 37.771-16.92 37.771-37.749z m-384-381.16a34.91 34.91 0 0 1 0 69.818H244.364a34.91 34.91 0 0 1 0-69.818h279.272z m0 162.909a34.91 34.91 0 0 1 0 69.818H244.364a34.91 34.91 0 0 1 0-69.818h279.272z m-93.09 162.909a34.91 34.91 0 0 1 0 69.818H244.363a34.91 34.91 0 0 1 0-69.818h186.181z" />
+  </svg>
+);
+
 export default {
   full,
-  bgPlaid
+  bgPlaid,
+  copy,
 };
diff --git a/src/index.less b/src/index.less
@@ -75,13 +75,20 @@
         color: #000;
       }
     }
+    &-iconbtns {
+      margin-top: 8px;
+      height: 15px;
+    }
     svg {
       transition: all .3s;
       fill: #9c9c9c;
       &:hover {
         fill: #000;
       }
     }
+    &-copied svg, &-copied svg:hover {
+      fill: #28a745;
+    }
   }
   &-OneItem &-bar {
     cursor: inherit;
diff --git a/src/index.tsx b/src/index.tsx
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
 import classnames from 'classnames';
 import CodeMirror from '@uiw/react-codemirror';
+import copyTextToClipboard from '@uiw/copy-to-clipboard';
 import { Split } from 'uiw';
 import icon from './icon';
 import { BabelTransform } from './transform';
@@ -40,6 +41,7 @@ export interface ICodePreviewState {
   errorMessage: string;
   fullScreen: boolean;
   width: number | string;
+  copied: boolean;
 }
 
 export default class CodePreview extends React.PureComponent<ICodePreviewProps, ICodePreviewState> {
@@ -48,6 +50,7 @@ export default class CodePreview extends React.PureComponent<ICodePreviewProps,
   public state: ICodePreviewState = {
     errorMessage: '',
     fullScreen: false,
+    copied: false,
     width: 1
   }
   public static defaultProps: ICodePreviewProps = {
@@ -91,6 +94,18 @@ export default class CodePreview extends React.PureComponent<ICodePreviewProps,
       this.setState({ errorMessage: message });
     }
   }
+  /**
+   * onCopyCode
+   */
+  public onCopyCode() {
+    const { code } = this.props;
+    copyTextToClipboard(code || '', (isCopy) => {
+      this.setState({ copied: isCopy });
+    });
+    setTimeout(() => {
+      this.setState({ copied: false });
+    }, 2000);
+  }
   /**
    * onFullScreen
    */
@@ -164,7 +179,15 @@ export default class CodePreview extends React.PureComponent<ICodePreviewProps,
         {!isOneItem && !(noCode && noPreview) && (
           <div style={{ flex: 1, width: 29 }} className={`${prefixCls}-bar`}>
             <div className={`${prefixCls}-bar-btn`} onClick={this.onSwitchSource.bind(this)}>{this.state.width === 1 ? '源码' : '隐藏编辑器'}</div>
-            <div className={`${prefixCls}-bar-fullScreen`} onClick={this.onFullScreen.bind(this)}>
+            <div
+              className={classnames(`${prefixCls}-bar-iconbtns`, {
+                [`${prefixCls}-bar-copied`]: this.state.copied,
+              })}
+              onClick={this.onCopyCode.bind(this)}
+            >
+              {icon.copy}
+            </div>
+            <div className={`${prefixCls}-bar-iconbtns`} onClick={this.onFullScreen.bind(this)}>
               {icon.full}
             </div>
           </div>
diff --git a/website/App.less b/website/App.less
@@ -7,4 +7,10 @@ body, html {
 .warpper {
   padding: 20px;
   height: 300px;
+}
+
+.title {
+  font-weight: bold;
+  font-size: 26px;
+  margin-bottom: 26px;
 }
diff --git a/website/App.tsx b/website/App.tsx
@@ -11,7 +11,7 @@ ReactDOM.render(
   </div>,
   _mount_
 );
-`
+`;
 
 interface IAppState {
   bgWhite: boolean;
@@ -32,7 +32,7 @@ export default class App extends React.PureComponent<{}, IAppState> {
   render () {
     return (
       <div className="warpper">
-        <h1>React Code Preview</h1>
+        <h1 className="title">React Code Preview</h1>
         <CodePreview
           code={code}
           dependencies={{ Button }}
@@ -49,7 +49,7 @@ export default class App extends React.PureComponent<{}, IAppState> {
             checked={this.state.bgWhite}
             onChange={this.handleChange.bind(this, 'bgWhite')}
           >
-            背景
+            背景 `bgWhite`
           </Switch>
           <Divider type="vertical" />
           <Switch
@@ -58,7 +58,7 @@ export default class App extends React.PureComponent<{}, IAppState> {
             checked={this.state.noCode}
             onChange={this.handleChange.bind(this, 'noCode')}
           >
-            是否显示代码
+            是否显示代码 `noCode`
           </Switch>
           <Divider type="vertical" />
           <Switch
@@ -67,7 +67,7 @@ export default class App extends React.PureComponent<{}, IAppState> {
             checked={this.state.noPreview}
             onChange={this.handleChange.bind(this, 'noPreview')}
           >
-            是否显示实例预览
+            是否显示实例预览 `noPreview`
           </Switch>
         </div>
       </div>

Original file line number	Diff line number	Diff line change
`@@ -75,13 +75,20 @@`
`75`	`75`	`color: #000;`
`76`	`76`	`}`
`77`	`77`	`}`
	`78`	`+ &-iconbtns {`
	`79`	`+ margin-top: 8px;`
	`80`	`+ height: 15px;`
	`81`	`+ }`
`78`	`82`	`svg {`
`79`	`83`	`transition: all .3s;`
`80`	`84`	`fill: #9c9c9c;`
`81`	`85`	`&:hover {`
`82`	`86`	`fill: #000;`
`83`	`87`	`}`
`84`	`88`	`}`
	`89`	`+ &-copied svg, &-copied svg:hover {`
	`90`	`+ fill: #28a745;`
	`91`	`+ }`
`85`	`92`	`}`
`86`	`93`	`&-OneItem &-bar {`
`87`	`94`	`cursor: inherit;`