Skip to content

GitLab

A
ant-design-pro
Switch branch/tag
Find file Normal viewHistoryPermalink
index.js 6.12 KB
Newer Older
jim's avatar
add top_meun and siderbar  
jim committed
1 2 
import React, { PureComponent, Fragment } from 'react';
import { Select, List, Switch, Divider, Radio } from 'antd';
jim's avatar
Modify the style  
jim committed
3 
import DrawerMenu from 'rc-drawer-menu';
jim's avatar
add top_meun and siderbar  
jim committed
4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 
import styles from './index.less';
import ThemeColor from './ThemeColor';
import LayoutSeting from './LayoutSetting';

const RadioGroup = Radio.Group;

const ColorBlock = ({ color, title }) => (
  <Fragment>
    <div
      className={styles.color_block}
      style={{
        backgroundColor: color,
      }}
    />
    <div className={styles.color_block_title}>{title}</div>
  </Fragment>
);

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

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: [
          <Select
            value={this.state.grid}
            onSelect={value => this.changeSetting('grid', value)}
            style={{ width: 120 }}
          >
            <Select.Option value="Wide">Wide</Select.Option>
            <Select.Option value="Fluid">Fluid</Select.Option>
          </Select>,
        ],
      },
      {
        title: 'Fixed Header',
        isShow: true,
        action: [
          <Switch
            checked={!!this.state.fixedHeader}
            onChange={checked => this.changeSetting('fixedHeader', checked)}
          />,
        ],
      },
      {
        title: '↳ 下滑时隐藏 Header',
        isShow: true,
        action: [
          <Switch
            checked={!!this.state.autoHideHeader}
            onChange={checked => this.changeSetting('autoHideHeader', checked)}
          />,
        ],
      },
      {
        title: 'Fix Siderbar',
        isShow: layout === 'sidemenu',
jim's avatar
Modify the style  
jim committed
94 
        action: [<Switch checked={!!this.state.fixSiderbar} onChange={this.fixSiderbar} />],
jim's avatar
add top_meun and siderbar  
jim committed
95 96 97 
      },
    ].filter(item => item.isShow);
  };
jim's avatar
Modify the style  
jim committed
98 
  fixSiderbar = checked => {
jim's avatar
add top_meun and siderbar  
jim committed
99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 
    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);
      }
    });
  };
jim's avatar
Modify the style  
jim committed
117 
  propsToState = props => {
jim's avatar
add top_meun and siderbar  
jim committed
118 
    const nextState = {};
jim's avatar
Modify the style  
jim committed
119 
    Object.keys(props).forEach(key => {
jim's avatar
add top_meun and siderbar  
jim committed
120 121 122 123 124 125 126 127 128 129 130 131 132 133 
      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 (
jim's avatar
Modify the style  
jim committed
134 135 136 137 138 139 
      <>
        <div className={styles.sidebar}>
          <div className={styles.mini_bar} onClick={this.togglerContent}>
            <img
              alt="logo"
              src="https://gw.alipayobjects.com/zos/rmsportal/ApQgLmeZDNJMomKNvavq.svg"
jim's avatar
add top_meun and siderbar  
jim committed
140 
            />
jim's avatar
Modify the style  
jim committed
141 
          </div>
jim's avatar
add top_meun and siderbar  
jim committed
142 
        </div>
jim's avatar
Modify the style  
jim committed
143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 
        <DrawerMenu
          parent={null}
          level={null}
          iconChild={null}
          open={this.state.collapse}
          placement="right"
          width="336px"
          onMaskClick={this.togglerContent}
        >
          <div className={styles.content}>
            <Body
              title="整体风格设置"
              style={{
                paddingBottom: 10,
              }}
            >
              <RadioGroup
                onChange={({ target }) => this.changeSetting('silderTheme', target.value)}
                value={this.state.silderTheme}
              >
                <Radio style={radioStyle} value="dark">
                  <ColorBlock color="#002140" title="深色导航" />
                </Radio>
                <Radio style={radioStyle} value="ligth">
                  <ColorBlock color="#E9E9E9" title="浅色导航" />
                </Radio>
              </RadioGroup>
              <ThemeColor
                value={this.state.themeColor}
                onChange={color => this.changeSetting('themeColor', color)}
              />
            </Body>
            <Divider style={{ margin: 0 }} />
            <Body title="导航设置 ">
              <LayoutSeting
                value={this.state.layout}
                onChange={layout => this.changeSetting('layout', layout)}
              />
              <List
                split={false}
                dataSource={this.getLayOutSetting()}
                renderItem={item => <List.Item actions={item.action}>{item.title}</List.Item>}
              />
            </Body>
            <Divider style={{ margin: 0 }} />
            <Body title="其他设置">
              <List
                split={false}
                dataSource={[
                  {
                    title: '色弱模式',
                    action: [
                      <Select
                        value={this.state.colorWeak}
                        onSelect={value => this.changeSetting('colorWeak', value)}
                        style={{ width: 120 }}
                      >
                        <Select.Option value="open">打开</Select.Option>
                        <Select.Option value="colse">关闭</Select.Option>
                      </Select>,
                    ],
                  },
                ]}
                renderItem={item => <List.Item actions={item.action}>{item.title}</List.Item>}
              />
            </Body>
          </div>
        </DrawerMenu>
      </>
jim's avatar
add top_meun and siderbar  
jim committed
212 213 214 215 216 
    );
  }
}

export default Sidebar;