import React, { PureComponent, Fragment } from 'react';
import { Select, message, List, Switch, Divider, Radio } from 'antd';
import DrawerMenu from 'rc-drawer-menu';
import { connect } from 'dva';
import styles from './index.less';
import ThemeColor from './ThemeColor';
import LayoutSeting from './LayoutSetting';
const RadioGroup = Radio.Group;
const ColorBlock = ({ color, title }) => (
{title}
);
const Body = ({ children, title, style }) => (
{title}
{children}
);
@connect(({ setting }) => ({ setting }))
class Sidebar extends PureComponent {
componentDidMount() {
const { themeColor } = this.props.setting;
if (themeColor !== '#1890FF') {
this.colorChange(themeColor);
}
}
getLayOutSetting = () => {
const { grid, fixedHeader, autoHideHeader, fixSiderbar, layout } = this.props.setting;
return [
{
title: '栅格模式',
isShow: true,
action: [
,
],
},
{
title: 'Fixed Header',
isShow: true,
action: [
this.changeSetting('fixedHeader', checked)}
/>,
],
},
{
title: '↳ 下滑时隐藏 Header',
isShow: true,
action: [
this.changeSetting('autoHideHeader', checked)}
/>,
],
},
{
title: 'Fix Siderbar',
isShow: layout === 'sidemenu',
action: [],
},
].filter(item => item.isShow);
};
fixSiderbar = checked => {
this.changeSetting('fixSiderbar', checked);
};
changeSetting = (key, value) => {
const nextState = {};
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);
window.less
.modifyVars({
'@primary-color': color,
})
.then(() => {
hideMessage();
})
.catch(() => {
message.error(`Failed to update theme`);
});
};
render() {
const radioStyle = {
display: 'block',
};
const { collapse, silderTheme, themeColor, layout, colorWeak } = this.props.setting;
return (
this.changeSetting('silderTheme', target.value)}
value={silderTheme}
>
this.changeSetting('layout', value)}
/>
{item.title}}
/>
this.changeSetting('colorWeak', value)}
style={{ width: 120 }}
>
打开
关闭
,
],
},
]}
renderItem={item => {item.title}}
/>
);
}
}
export default Sidebar;
