import React, { PureComponent } from 'react';
import { Select, message, List, Switch, Divider } from 'antd';
import DrawerMenu from 'rc-drawer-menu';
import { connect } from 'dva';
import styles from './index.less';
import ThemeColor from './ThemeColor';
import BlockChecbox from './BlockChecbox';
const Body = ({ children, title, style }) => (
{title}
{children}
);
@connect(({ setting }) => ({ setting }))
class SettingDarwer extends PureComponent {
componentDidMount() {
const { themeColor } = this.props.setting;
if (themeColor !== '#1890FF') {
this.colorChange(themeColor);
}
}
getLayOutSetting = () => {
const { grid, fixedHeader, autoHideHeader, fixSiderbar } = this.props.setting;
return [
{
title: '栅格模式',
action: [
,
],
},
{
title: 'Fixed Header',
action: [
this.changeSetting('fixedHeader', checked)}
/>,
],
},
{
title: '下滑时隐藏 Header',
action: [
this.changeSetting('autoHideHeader', checked)}
/>,
],
},
{
title: 'Fix Siderbar',
action: [
this.changeSetting('fixSiderbar', checked)}
/>,
],
},
];
};
changeSetting = (key, value) => {
const nextState = { ...this.props.setting };
nextState[key] = value;
if (key === 'layout') {
if (value === 'topmenu') {
nextState.grid = 'Wide';
} else {
nextState.grid = 'Fluid';
}
}
this.setState(nextState, () => {
this.props.dispatch({
type: 'setting/changeSetting',
payload: this.state,
});
});
};
togglerContent = () => {
this.changeSetting('collapse', !this.props.setting.collapse);
};
colorChange = color => {
this.changeSetting('themeColor', color);
const hideMessage = message.loading('正在编译主题！', 0);
setTimeout(() => {
window.less
.modifyVars({
'@primary-color': color,
})
.then(() => {
hideMessage();
})
.catch(() => {
message.error(`Failed to update theme`);
});
}, 200);
};
render() {
const { collapse, silderTheme, themeColor, layout } = this.props.setting;
return (
this.changeSetting('silderTheme', value)}
/>
this.changeSetting('layout', value)}
/>
{item.title}}
/>
);
}
}
export default SettingDarwer;
