import React, { PureComponent } from 'react';
import { Select, message, Drawer, List, Switch, Divider, Icon, Button, Alert } from 'antd';
import { formatMessage } from 'umi/locale';
import { CopyToClipboard } from 'react-copy-to-clipboard';
import { connect } from 'dva';
import omit from 'omit.js';
import styles from './index.less';
import ThemeColor from './ThemeColor';
import BlockChecbox from './BlockChecbox';
const Body = ({ children, title, style }) => (
{title}
{children}
);
@connect(({ setting }) => ({ setting }))
class SettingDrawer extends PureComponent {
state = {
collapse: false,
};
getLayoutSetting = () => {
const {
setting: { contentWidth, fixedHeader, layout, autoHideHeader, fixSiderbar },
} = this.props;
return [
{
title: formatMessage({ id: 'app.setting.content-width' }),
action: [
,
],
},
{
title: formatMessage({ id: 'app.setting.fixedheader' }),
action: [
this.changeSetting('fixedHeader', checked)}
/>,
],
},
{
title: formatMessage({ id: 'app.setting.hideheader' }),
hide: !fixedHeader,
action: [
this.changeSetting('autoHideHeader', checked)}
/>,
],
},
{
title: formatMessage({ id: 'app.setting.fixedsidebar' }),
hide: layout === 'topmenu',
action: [
this.changeSetting('fixSiderbar', checked)}
/>,
],
},
].filter(item => !item.hide);
};
changeSetting = (key, value) => {
const { setting } = this.props;
const nextState = { ...setting };
nextState[key] = value;
if (key === 'layout') {
nextState.contentWidth = value === 'topmenu' ? 'Fixed' : 'Fluid';
} else if (key === 'fixedHeader' && !value) {
nextState.autoHideHeader = false;
}
this.setState(nextState, () => {
const { dispatch } = this.props;
dispatch({
type: 'setting/changeSetting',
payload: this.state,
});
});
};
togglerContent = () => {
const { collapse } = this.state;
this.setState({ collapse: !collapse });
};
render() {
const { setting } = this.props;
const { navTheme, primaryColor, layout, colorWeak } = setting;
const { collapse } = this.state;
return (
}
onHandleClick={this.togglerContent}
style={{
zIndex: 999,
}}
>
this.changeSetting('navTheme', value)}
/>
this.changeSetting('primaryColor', color)}
/>
this.changeSetting('layout', value)}
/>
{item.title}}
/>
this.changeSetting('colorWeak', checked)}
/>,
]}
>
{formatMessage({ id: 'app.setting.weakmode' })}
message.success(formatMessage({ id: 'app.setting.copyinfo' }))}
>
{formatMessage({ id: 'app.setting.production.hint' })}{' '}
src/defaultSettings.js
}
/>
);
}
}
export default SettingDrawer;