trunk/pc4public/portal/wea-menu/index.js

import { Icon } from 'antd';
import MenuInline from './MenuInline';
import MenuVertical from './MenuVertical';
import cloneDeep from 'lodash/cloneDeep';
import { WeaNewScroll, WeaIntro } from 'ecCom';

const { Step } = WeaIntro;

class WeaMenu extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      mode: props.mode || 'inline',
      defaultSelectedKey: props.defaultSelectedKey || '',
      datas: props.datas || [],
      verticalWidth: props.verticalWidth || 50,
      inlineWidth: props.inlineWidth || 190,
      menuHeight: jQuery(document.body).height() - 55 - props.translatepageheight,
      fontSize: props.fontSize,
      translatepage: props.translatepage || '',
    };
  }
  resetHeigth() {
    const { portalThemeStore } = this.props;
    const { translatepage } = portalThemeStore;
    let transheight = translatepage == '1' ? 30 : 0;
    this.setState({ menuHeight: jQuery(document.body).height() - 55 - transheight });
  }
  componentDidMount() {
    jQuery(window).resize(() => {
      this._reactInternalInstance !== undefined && this.resetHeigth();
    });
  }
  componentWillReceiveProps(nextProps) {
    if (
      JSON.stringify(this.props.datas) !== JSON.stringify(nextProps.datas) ||
      (this.props.defaultSelectedKey !== nextProps.defaultSelectedKey && this.state.defaultSelectedKey !== nextProps.defaultSelectedKey)
    ) {
      // 计算出openKeys
      this.setState({
        datas: nextProps.datas || [],
        defaultSelectedKey: nextProps.defaultSelectedKey || '',
      });
    }

    if (this.props.mode != nextProps.mode) {
      this.setState({
        mode: nextProps.mode,
      });
    }
  }
  render() {
    const { mode, datas, verticalWidth, inlineWidth, defaultSelectedKey, menuHeight, fontSize, translatepage } = this.state;
    const newDatas = this.setTreeKey('', datas);
    const { addonBefore, addonAfter, addonBeforeHeight, addonAfterHeight, clickBlock, needSwitch } = this.props;
    let style = { width: mode == 'vertical' ? verticalWidth : inlineWidth };
    let conHeightNum =
      (needSwitch ? 40 : 0) +
      (!!addonBeforeHeight && mode == 'inline' ? addonBeforeHeight : 0) +
      (!!addonAfterHeight && mode == 'inline' ? addonAfterHeight : 0);
    return (
      <div style={{ height: '100%' }}>
        <div className={`wea-menu wea-menu-${mode}`} style={style}>
          {needSwitch ? (
            <Step ecId={`${this && this.props && this.props.ecId || ''}_Step@mdptnf`} id={'portal-intro2'}>
              <div id="portal-intro2" className="wea-menu-switch" onClick={this.onModeChange.bind(this, mode)}>
                <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@8pl7bj`} type={mode == 'vertical' ? 'menu-unfold' : 'menu-fold'} />
              </div>
            </Step>
          ) : (
            ''
          )}
          {!!addonBefore && mode == 'inline' ? addonBefore : ''}
          <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@gzghth`} height={menuHeight - conHeightNum} scrollId={'menuScrollWrapper'}>
            {mode === 'inline' ? (
              <MenuInline ecId={`${this && this.props && this.props.ecId || ''}_MenuInline@7m6crn`}
                mode={mode}
                datas={newDatas}
                inlineWidth={inlineWidth}
                verticalWidth={verticalWidth}
                fontSize={fontSize}
                clickBlock={clickBlock}
                defaultSelectedKey={defaultSelectedKey}
                onSelect={this.onSelect.bind(this)}
                onModeChange={this.onModeChange.bind(this)}
              />
            ) : (
              <MenuVertical ecId={`${this && this.props && this.props.ecId || ''}_MenuVertical@kt2bfx`}
                mode={mode}
                datas={this.getVerticalDatas(newDatas)}
                inlineWidth={inlineWidth}
                verticalWidth={verticalWidth}
                fontSize={fontSize}
                clickBlock={clickBlock}
                defaultSelectedKey={defaultSelectedKey}
                onSelect={this.onSelect.bind(this)}
                onModeChange={this.onModeChange.bind(this)}
                translatepage={translatepage}
              />
            )}
          </WeaNewScroll>
          {!!addonAfter && mode == 'inline' ? addonAfter : ''}
        </div>
      </div>
    );
  }
  onModeChange(mode) {
    // console.log("mode:",mode);
    const { inlineWidth, verticalWidth } = this.state;
    const newMode = mode == 'inline' ? 'vertical' : 'inline';
    const newWidth = newMode == 'inline' ? inlineWidth : verticalWidth;
    this.setState({
      mode: newMode,
    });
    if (typeof this.props.onModeChange == 'function') {
      this.props.onModeChange(newMode, newWidth);
    }
  }
  onSelect(key, data, type) {
    // console.log("key:",key," data:",data,"type",type);

    this.setState({
      defaultSelectedKey: key,
    });
    if (typeof this.props.onSelect == 'function') {
      this.props.onSelect(key, data, type);
    }
  }
  setTreeKey(pKey, datas) {
    // console.log("datas:",datas);
    let that = this;
    let newDatas = new Array();
    for (let i = 0; i < datas.length; i++) {
      let data = datas[i];
      data.treeKey = pKey != '' ? `${pKey}{$}${data.id}` : data.id;
      if (data.child && data.child.length > 0) {
        data.child = that.setTreeKey(data.treeKey, data.child);
      }
      newDatas.push(data);
    }
    return newDatas;
  }
  getVerticalDatas(datas) {
    // console.log("datas:",datas);
    let newDatas = new Array();
    for (let i = 0; i < datas.length; i++) {
      const data = datas[i];
      let newData = cloneDeep(data);
      newData.child = [];
      let newDataNoChild = cloneDeep(newData);
      newDataNoChild.id = `verTop_${newDataNoChild.id}`;
      if (data.child) {
        newData.child = [newDataNoChild].concat(data.child);
      } else {
        newData.child = [newDataNoChild];
      }
      newDatas.push(newData);
      // newDataNoChild.child = [cloneDeep(datas[i])];
      // newDatas.push(newDataNoChild);
    }
    // console.log("newDatas:",newDatas);
    return newDatas;
  }
}

export default WeaMenu;