Add copy setting button look #1751

85e9fa71 · 陈帅 · 1595c7d3 · 85e9fa71 · 85e9fa71 · 85e9fa71
Commit 85e9fa71 authored Jul 04, 2018 by 陈帅
Showing with 114 additions and 94 deletions

package.json package.json +1 -0

src/components/SettingDarwer/index.js src/components/SettingDarwer/index.js +104 -94

src/components/SettingDarwer/index.less src/components/SettingDarwer/index.less +9 -0

No files found.
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
    "qs": "^6.5.2",
    "rc-drawer": "^1.5.2",
    "react-container-query": "^0.11.0",
+    "react-copy-to-clipboard": "^5.0.1",
    "react-document-title": "^2.0.3",
    "react-fittext": "^1.0.0",
    "rollbar": "^2.3.4",

--- a/src/components/SettingDarwer/index.js
+++ b/src/components/SettingDarwer/index.js
 import React, { PureComponent } from 'react';
 import { Select, message, List, Switch, Divider, Icon } from 'antd';
 import DrawerMenu from 'rc-drawer';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { connect } from 'dva';
 import styles from './index.less';
 import ThemeColor from './ThemeColor';
@@ -145,11 +146,9 @@ class SettingDarwer extends PureComponent {
  };

  render() {
-    const {
-      setting: { collapse, silderTheme, themeColor, layout, colorWeak },
-    } = this.props;
+    const { setting } = this.props;
+    const { collapse, silderTheme, themeColor, layout, colorWeak } = setting;
    return (
-      <div className={styles.settingDarwer}>
      <DrawerMenu
        parent={null}
        level={null}
@@ -185,6 +184,18 @@ class SettingDarwer extends PureComponent {
        onMaskClick={this.togglerContent}
      >
        <div className={styles.content}>
+          <CopyToClipboard
+            text={JSON.stringify(setting)}
+            onCopy={() => message.success('copy success')}
+          >
+            <div className={styles.clipboard}>
+              <img
+                src="https://gw.alipayobjects.com/zos/rmsportal/YuWymXLusbplhCwgZwMT.svg"
+                alt="Copy To Clipboard"
+                width={18}
+              />
+            </div>
+          </CopyToClipboard>
          <Body title="整体风格设置">
            <BlockChecbox
              list={[
@@ -246,7 +257,6 @@ class SettingDarwer extends PureComponent {
          </Body>
        </div>
      </DrawerMenu>
-      </div>
    );
  }
 }

--- a/src/components/SettingDarwer/index.less
+++ b/src/components/SettingDarwer/index.less
@@ -5,6 +5,15 @@
  min-height: 100%;
  padding: 24px;
  background: #fff;
+  position: relative;
+  .clipboard {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    cursor: pointer;
+    width: 16px;
+    height: 16px;
+  }
 }

 .blockChecbox {