首頁 探索 說明
註冊 登入
yf_nkx
/
agmp_iot_jetlinks_ui
1
0
複刻 0
Files 問題管理 0 合併請求 0 Wiki
瀏覽代碼

Add copy setting button look #1751

陈帅 7 年之前
父節點
1595c7d3e6
當前提交
85e9fa710a
共有 3 個文件被更改，包括 114 次插入 和 94 次删除
統一視圖 顯示文件統計
  1. 1 0
      package.json
  2. 104 94
      src/components/SettingDarwer/index.js
  3. 9 0
      src/components/SettingDarwer/index.less

+ 1 - 0
package.json
查看文件 

@@ -38,6 +38,7 @@
 
     "qs": "^6.5.2",
 
     "qs": "^6.5.2",
 
     "rc-drawer": "^1.5.2",
 
     "rc-drawer": "^1.5.2",
 
     "react-container-query": "^0.11.0",
 
     "react-container-query": "^0.11.0",
 
+    "react-copy-to-clipboard": "^5.0.1",
 
     "react-document-title": "^2.0.3",
 
     "react-document-title": "^2.0.3",
 
     "react-fittext": "^1.0.0",
 
     "react-fittext": "^1.0.0",
 
     "rollbar": "^2.3.4",
 
     "rollbar": "^2.3.4",

+ 104 - 94
src/components/SettingDarwer/index.js
查看文件 

@@ -1,6 +1,7 @@
 
 import React, { PureComponent } from 'react';
 
 import React, { PureComponent } from 'react';
 
 import { Select, message, List, Switch, Divider, Icon } from 'antd';
 
 import { Select, message, List, Switch, Divider, Icon } from 'antd';
 
 import DrawerMenu from 'rc-drawer';
 
 import DrawerMenu from 'rc-drawer';
 
+import { CopyToClipboard } from 'react-copy-to-clipboard';
 
 import { connect } from 'dva';
 
 import { connect } from 'dva';
 
 import styles from './index.less';
 
 import styles from './index.less';
 
 import ThemeColor from './ThemeColor';
 
 import ThemeColor from './ThemeColor';
 
@@ -145,108 +146,117 @@ class SettingDarwer extends PureComponent {
 
   };
 
   };
 
 
 
   render() {
 
   render() {
 
-    const {
 
-      setting: { collapse, silderTheme, themeColor, layout, colorWeak },
 
-    } = this.props;
 
+    const { setting } = this.props;
 
+    const { collapse, silderTheme, themeColor, layout, colorWeak } = setting;
 
     return (
 
     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>
 
     );
 
     );
 
   }
 
   }
 
 }
 
 }

+ 9 - 0
src/components/SettingDarwer/index.less
查看文件 

@@ -5,6 +5,15 @@
 
   min-height: 100%;
 
   min-height: 100%;
 
   padding: 24px;
 
   padding: 24px;
 
   background: #fff;
 
   background: #fff;
 
+  position: relative;
 
+  .clipboard {
 
+    position: absolute;
 
+    top: 10px;
 
+    right: 10px;
 
+    cursor: pointer;
 
+    width: 16px;
 
+    height: 16px;
 
+  }
 
 }
 
 }
 
 
 
 .blockChecbox {
 
 .blockChecbox {