index.js 6.28 KB
Newer Older
jim's avatar
jim committed
1
import React, { PureComponent } from 'react';
afc163's avatar
afc163 committed
2
import { Select, message, Drawer, List, Switch, Divider, Icon, Button, Alert } from 'antd';
陈帅's avatar
陈帅 committed
3
import { formatMessage } from 'umi/locale';
陈帅's avatar
陈帅 committed
4
import { CopyToClipboard } from 'react-copy-to-clipboard';
jim's avatar
jim committed
5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
import { connect } from 'dva';
import styles from './index.less';
import ThemeColor from './ThemeColor';
import BlockChecbox from './BlockChecbox';

const Body = ({ children, title, style }) => (
  <div
    style={{
      ...style,
      marginBottom: 24,
    }}
  >
    <h3 className={styles.title}>{title}</h3>
    {children}
  </div>
);

@connect(({ setting }) => ({ setting }))
23
class SettingDrawer extends PureComponent {
afc163's avatar
afc163 committed
24 25 26 27
  state = {
    collapse: false,
  };

jim's avatar
jim committed
28
  getLayOutSetting = () => {
陈帅's avatar
陈帅 committed
29
    const {
30
      setting: { grid, fixedHeader, layout, autoHideHeader, fixSiderbar },
陈帅's avatar
陈帅 committed
31
    } = this.props;
jim's avatar
jim committed
32 33
    return [
      {
陈帅's avatar
陈帅 committed
34
        title: formatMessage({ id: 'app.setting.gridmode' }),
jim's avatar
jim committed
35 36 37 38 39 40 41
        action: [
          <Select
            value={grid}
            size="small"
            onSelect={value => this.changeSetting('grid', value)}
            style={{ width: 80 }}
          >
陈帅's avatar
陈帅 committed
42 43 44 45 46 47
            <Select.Option value="Wide">
              {formatMessage({ id: 'app.setting.gridmode.wide' })}
            </Select.Option>
            <Select.Option value="Fluid">
              {formatMessage({ id: 'app.setting.gridmode.fluid' })}
            </Select.Option>
jim's avatar
jim committed
48 49 50 51
          </Select>,
        ],
      },
      {
陈帅's avatar
陈帅 committed
52
        title: formatMessage({ id: 'app.setting.fixedheader' }),
jim's avatar
jim committed
53 54 55 56 57 58 59 60 61
        action: [
          <Switch
            size="small"
            checked={!!fixedHeader}
            onChange={checked => this.changeSetting('fixedHeader', checked)}
          />,
        ],
      },
      {
陈帅's avatar
陈帅 committed
62
        title: formatMessage({ id: 'app.setting.hideheader' }),
63
        hide: !fixedHeader,
jim's avatar
jim committed
64 65 66 67 68 69 70 71 72
        action: [
          <Switch
            size="small"
            checked={!!autoHideHeader}
            onChange={checked => this.changeSetting('autoHideHeader', checked)}
          />,
        ],
      },
      {
陈帅's avatar
陈帅 committed
73
        title: formatMessage({ id: 'app.setting.fixedsidebar' }),
74
        hide: layout === 'topmenu',
jim's avatar
jim committed
75 76 77 78 79 80 81 82
        action: [
          <Switch
            size="small"
            checked={!!fixSiderbar}
            onChange={checked => this.changeSetting('fixSiderbar', checked)}
          />,
        ],
      },
83
    ].filter(item => !item.hide);
jim's avatar
jim committed
84
  };
陈帅's avatar
陈帅 committed
85

jim's avatar
jim committed
86
  changeSetting = (key, value) => {
陈帅's avatar
陈帅 committed
87 88
    const { setting } = this.props;
    const nextState = { ...setting };
jim's avatar
jim committed
89 90
    nextState[key] = value;
    if (key === 'layout') {
afc163's avatar
afc163 committed
91 92 93
      nextState.grid = value === 'topmenu' ? 'Wide' : 'Fluid';
    } else if (key === 'fixedHeader' && !value) {
      nextState.autoHideHeader = false;
jim's avatar
jim committed
94
    }
jim's avatar
jim committed
95
    this.setState(nextState, () => {
陈帅's avatar
陈帅 committed
96 97
      const { dispatch } = this.props;
      dispatch({
jim's avatar
jim committed
98 99 100 101 102
        type: 'setting/changeSetting',
        payload: this.state,
      });
    });
  };
陈帅's avatar
陈帅 committed
103

jim's avatar
jim committed
104
  togglerContent = () => {
afc163's avatar
afc163 committed
105 106
    const { collapse } = this.state;
    this.setState({ collapse: !collapse });
jim's avatar
jim committed
107
  };
陈帅's avatar
陈帅 committed
108

jim's avatar
jim committed
109
  render() {
陈帅's avatar
陈帅 committed
110
    const { setting } = this.props;
afc163's avatar
afc163 committed
111 112
    const { navTheme, primaryColor, layout, colorWeak } = setting;
    const { collapse } = this.state;
jim's avatar
jim committed
113
    return (
陈帅's avatar
陈帅 committed
114 115
      <Drawer
        visible={collapse}
116
        width={300}
陈帅's avatar
陈帅 committed
117
        onClose={this.togglerContent}
陈帅's avatar
陈帅 committed
118
        placement="right"
陈帅's avatar
陈帅 committed
119 120
        handler={
          <div className={styles.handle}>
afc163's avatar
afc163 committed
121 122 123 124 125 126 127
            <Icon
              type={collapse ? 'close' : 'setting'}
              style={{
                color: '#fff',
                fontSize: 20,
              }}
            />
陈帅's avatar
陈帅 committed
128 129 130
          </div>
        }
        onHandleClick={this.togglerContent}
陈帅's avatar
陈帅 committed
131 132 133 134 135
        style={{
          zIndex: 999,
        }}
      >
        <div className={styles.content}>
陈帅's avatar
陈帅 committed
136
          <Body title={formatMessage({ id: 'app.setting.pagestyle' })}>
陈帅's avatar
陈帅 committed
137 138 139 140 141 142 143 144 145 146 147
            <BlockChecbox
              list={[
                {
                  key: 'dark',
                  url: 'https://gw.alipayobjects.com/zos/rmsportal/LCkqqYNmvBEbokSDscrm.svg',
                },
                {
                  key: 'light',
                  url: 'https://gw.alipayobjects.com/zos/rmsportal/jpRkZQMyYRryryPNtyIC.svg',
                },
              ]}
afc163's avatar
afc163 committed
148 149
              value={navTheme}
              onChange={value => this.changeSetting('navTheme', value)}
陈帅's avatar
陈帅 committed
150 151
            />
          </Body>
jim's avatar
jim committed
152

153
          <ThemeColor
陈帅's avatar
陈帅 committed
154
            title={formatMessage({ id: 'app.setting.themecolor' })}
afc163's avatar
afc163 committed
155 156
            value={primaryColor}
            onChange={color => this.changeSetting('primaryColor', color)}
157
          />
jim's avatar
jim committed
158

陈帅's avatar
陈帅 committed
159
          <Divider />
jim's avatar
jim committed
160

陈帅's avatar
陈帅 committed
161
          <Body title={formatMessage({ id: 'app.setting.navigationmode' })}>
陈帅's avatar
陈帅 committed
162 163 164 165 166 167 168 169 170 171 172 173 174
            <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)}
jim's avatar
jim committed
175
            />
陈帅's avatar
陈帅 committed
176
          </Body>
jim's avatar
jim committed
177

陈帅's avatar
陈帅 committed
178 179 180 181 182
          <List
            split={false}
            dataSource={this.getLayOutSetting()}
            renderItem={item => <List.Item actions={item.action}>{item.title}</List.Item>}
          />
jim's avatar
jim committed
183

陈帅's avatar
陈帅 committed
184 185
          <Divider />

陈帅's avatar
陈帅 committed
186
          <Body title={formatMessage({ id: 'app.setting.othersettings' })}>
陈帅's avatar
陈帅 committed
187 188 189 190 191 192 193 194 195
            <List.Item
              actions={[
                <Switch
                  size="small"
                  checked={!!colorWeak}
                  onChange={checked => this.changeSetting('colorWeak', checked)}
                />,
              ]}
            >
陈帅's avatar
陈帅 committed
196
              {formatMessage({ id: 'app.setting.weakmode' })}
陈帅's avatar
陈帅 committed
197 198
            </List.Item>
          </Body>
陈帅's avatar
陈帅 committed
199 200 201
          <Divider />
          <CopyToClipboard
            text={JSON.stringify(setting)}
陈帅's avatar
陈帅 committed
202
            onCopy={() => message.success(formatMessage({ id: 'app.setting.copyinfo' }))}
陈帅's avatar
陈帅 committed
203
          >
afc163's avatar
afc163 committed
204
            <Button block icon="copy">
陈帅's avatar
陈帅 committed
205
              {formatMessage({ id: 'app.setting.copy' })}
陈帅's avatar
陈帅 committed
206 207
            </Button>
          </CopyToClipboard>
afc163's avatar
afc163 committed
208 209 210 211 212
          <Alert
            type="warning"
            className={styles.productionHint}
            message={formatMessage({ id: 'app.setting.production.hint' })}
          />
陈帅's avatar
陈帅 committed
213
        </div>
陈帅's avatar
陈帅 committed
214
      </Drawer>
jim's avatar
jim committed
215 216 217 218
    );
  }
}

219
export default SettingDrawer;