import React, { PureComponent, Fragment } from 'react';
import { Select, List, Switch, Divider, Radio } from 'antd';
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}
);
class Sidebar extends PureComponent {
constructor(props) {
super(props);
this.defaultstate = {
collapse: false,
silderTheme: 'dark',
themeColor: '#1890FF',
layout: 'sidemenu',
grid: 'Fluid',
fixedHeader: false,
autoHideHeader: false,
fixSiderbar: false,
colorWeak: 'close',
};
const propsState = this.propsToState(props);
this.state = { ...this.defaultstate, ...propsState };
}
componentWillReceiveProps(props) {
this.setState(this.propsToState(props));
}
getLayOutSetting = () => {
const { layout } = this.state;
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, () => {
if (this.props.onChange) {
this.props.onChange(this.state);
}
});
};
propsToState = (props) => {
const nextState = {};
Object.keys(props).forEach((key) => {
if (props[key] && this.defaultstate[key] !== undefined) {
nextState[key] = props[key];
}
});
return nextState;
};
togglerContent = () => {
this.changeSetting('collapse', !this.state.collapse);
};
render() {
const radioStyle = {
display: 'block',
};
return (
this.changeSetting('silderTheme', target.value)
}
value={this.state.silderTheme}
>
this.changeSetting('themeColor', color)}
/>
this.changeSetting('layout', layout)}
/>
(
{item.title}
)}
/>
this.changeSetting('colorWeak', value)}
style={{ width: 120 }}
>
打开
关闭
,
],
},
]}
renderItem={item => (
{item.title}
)}
/>
);
}
}
export default Sidebar;
