Add copy setting button look #1751

8 years ago · 85e9fa710a
3 changed files with 114 additions and 94 deletions
--- 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
@ -1,6 +1,7 @@
 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,108 +146,117 @@ 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}
-          open={collapse}
-          mask={false}
-          onHandleClick={this.togglerContent}
-          handler={
-            <div className="drawer-handle">
-              {!collapse ? (
-                <Icon
-                  type="setting"
-                  style={{
-                    color: '#FFF',
-                    fontSize: 20,
-                  }}
-                />
-              ) : (
-                <Icon
-                  type="close"
-                  style={{
-                    color: '#FFF',
-                    fontSize: 20,
-                  }}
-                />
-              )}
-            </div>
-          }
-          placement="right"
-          width="336px"
-          style={{
-            zIndex: 999,
-          }}
-          onMaskClick={this.togglerContent}
-        >
-          <div className={styles.content}>
-            <Body title="整体风格设置">
-              <BlockChecbox
-                list={[
-                  {
-                    key: 'dark',
-                    url: 'https://gw.alipayobjects.com/zos/rmsportal/LCkqqYNmvBEbokSDscrm.svg',
-                  },
-                  {
-                    key: 'light',
-                    url: 'https://gw.alipayobjects.com/zos/rmsportal/jpRkZQMyYRryryPNtyIC.svg',
-                  },
-                ]}
-                value={silderTheme}
-                onChange={value => this.changeSetting('silderTheme', value)}
+      <DrawerMenu
+        parent={null}
+        level={null}
+        open={collapse}
+        mask={false}
+        onHandleClick={this.togglerContent}
+        handler={
+          <div className="drawer-handle">
+            {!collapse ? (
+              <Icon
+                type="setting"
+                style={{
+                  color: '#FFF',
+                  fontSize: 20,
+                }}
              />
-            </Body>
-
-            <ThemeColor value={themeColor} onChange={this.colorChange} />
+            ) : (
+              <Icon
+                type="close"
+                style={{
+                  color: '#FFF',
+                  fontSize: 20,
+                }}
+              />
+            )}
+          </div>
+        }
+        placement="right"
+        width="336px"
+        style={{
+          zIndex: 999,
+        }}
+        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={[
+                {
+                  key: 'dark',
+                  url: 'https://gw.alipayobjects.com/zos/rmsportal/LCkqqYNmvBEbokSDscrm.svg',
+                },
+                {
+                  key: 'light',
+                  url: 'https://gw.alipayobjects.com/zos/rmsportal/jpRkZQMyYRryryPNtyIC.svg',
+                },
+              ]}
+              value={silderTheme}
+              onChange={value => this.changeSetting('silderTheme', value)}
+            />
+          </Body>

-            <Divider />
+          <ThemeColor value={themeColor} onChange={this.colorChange} />

-            <Body title="导航设置 ">
-              <BlockChecbox
-                list={[
-                  {
-                    key: 'sidemenu',
-                    url: 'https://gw.alipayobjects.com/zos/rmsportal/JopDzEhOqwOjeNTXkoje.svg',
-                  },
-                  {
-                    key: 'topmenu',
-                    url: 'https://gw.alipayobjects.com/zos/rmsportal/KDNDBbriJhLwuqMoxcAr.svg',
-                  },
-                ]}
-                value={layout}
-                onChange={value => this.changeSetting('layout', value)}
-              />
-            </Body>
+          <Divider />

-            <List
-              split={false}
-              dataSource={this.getLayOutSetting()}
-              renderItem={item => <List.Item actions={item.action}>{item.title}</List.Item>}
+          <Body title="导航设置 ">
+            <BlockChecbox
+              list={[
+                {
+                  key: 'sidemenu',
+                  url: 'https://gw.alipayobjects.com/zos/rmsportal/JopDzEhOqwOjeNTXkoje.svg',
+                },
+                {
+                  key: 'topmenu',
+                  url: 'https://gw.alipayobjects.com/zos/rmsportal/KDNDBbriJhLwuqMoxcAr.svg',
+                },
+              ]}
+              value={layout}
+              onChange={value => this.changeSetting('layout', value)}
            />
+          </Body>

-            <Divider />
+          <List
+            split={false}
+            dataSource={this.getLayOutSetting()}
+            renderItem={item => <List.Item actions={item.action}>{item.title}</List.Item>}
+          />

-            <Body title="其他设置 ">
-              <List.Item
-                actions={[
-                  <Switch
-                    size="small"
-                    checked={!!colorWeak}
-                    onChange={checked => this.changeSetting('colorWeak', checked)}
-                  />,
-                ]}
-              >
-                色弱模式
-              </List.Item>
-            </Body>
-          </div>
-        </DrawerMenu>
-      </div>
+          <Divider />
+
+          <Body title="其他设置 ">
+            <List.Item
+              actions={[
+                <Switch
+                  size="small"
+                  checked={!!colorWeak}
+                  onChange={checked => this.changeSetting('colorWeak', checked)}
+                />,
+              ]}
+            >
+              色弱模式
+            </List.Item>
+          </Body>
+        </div>
+      </DrawerMenu>
    );
  }
 }
--- 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 {