yylib-quick-mobile/dist/yylib/menu/YYMenu.js

yylib-quick-mobile

import React, {Component} from 'react';
import { Menu,ActivityIndicator } from 'antd-mobile';
import './YYMenu.less';
const designData = [
  {
    value: '1',
    label: 'Food',
    children: [
      {
        label: 'All Foods',
        value: '1',
        disabled: false,
      },
      {
        label: 'Chinese Food',
        value: '2',
      }, {
        label: 'Hot Pot',
        value: '3',
      }, {
        label: 'Buffet',
        value: '4',
      }, {
        label: 'Fast Food',
        value: '5',
      }, {
        label: 'Snack',
        value: '6',
      }, {
        label: 'Bread',
        value: '7',
      }, {
        label: 'Fruit',
        value: '8',
      }, {
        label: 'Noodle',
        value: '9',
      }, {
        label: 'Leisure Food',
        value: '10',
      }],
  }, {
    value: '2',
    label: 'Supermarket',
    children: [
      {
        label: 'All Supermarkets',
        value: '1',
      }, {
        label: 'Supermarket',
        value: '2',
        disabled: true,
      }, {
        label: 'C-Store',
        value: '3',
      }, {
        label: 'Personal Care',
        value: '4',
      }],
  },
  {
    value: '3',
    label: 'Extra',
    isLeaf: true,
    children: [
      {
        label: 'you can not see',
        value: '1',
      },
    ],
  },
];
class YYMenu extends Component {
  constructor(props) {
    super(props);
  }
  onChange = (value) => {
    let {data} = this.props;
    if (this.props.RunInDesign) {
      data = designData;
    }
    let label = '';
    data.forEach((dataItem) => {
      if (dataItem.value === value[0]) {
        label = dataItem.label;
        if (dataItem.children && value[1]) {
          dataItem.children.forEach((cItem) => {
            if (cItem.value === value[1]) {
              label += ` ${cItem.label}`;
            }
          });
        }
      }
    });
    if (this.props.onChange) {
      this.props.onChange(value,label);
    }
  }
  onMaskClick = () => {
    this.props.onClose&&this.props.onClose();
  }
  onOk=(value)=>{
    this.props.onOk&&this.props.onOk(value);
  }
  onCancel=()=>{
    this.props.onCancel&&this.props.onCancel();
  }
  render() {
    let { data, show, RunInDesign,value,height,multiSelect,level } = this.props;
    if(RunInDesign){
     if(window.ModelID&&this.props.nid==window.ModelID){
        data = designData;
        show=true;
      }
    }
    let menuEl = (
      <Menu
        className="foo-menu"
        data={data}
        value={value}
        level={level?parseInt(level):2}
        onChange={this.onChange}
        onOk={this.onOk}
        onCancel={this.onCancel}
        height={height}
        multiSelect={multiSelect}/>
    );
    let loadingEl = (
      <div style={{ position: 'absolute', width: '100%', height: document.documentElement.clientHeight * 0.6, display: 'flex', justifyContent: 'center' }}>
        <ActivityIndicator size="large" />
      </div>
    );
    return (
      <div className={show ? 'menu-active' : ''}>
        {show ? data ? menuEl : loadingEl : null}
        {show ? <div className="menu-mask" onClick={this.onMaskClick} /> : null}
      </div>
    );
  }
}
YYMenu.defaultProps = {
    data:[],
    value:[],
    height: document.documentElement.clientHeight * 0.6,
    multiSelect:false
}
export default YYMenu;