yylib-quick-mobile/dist/yylib/library/YYLibraryNavBar.js

yylib-quick-mobile

import React from 'react';
import {Icon,NavBar,Popover,Toast} from 'antd-mobile';
import ProTypes from 'prop-types';
const Item = Popover.Item;
import './YYLibrary.less';
class YYLibraryNavBar extends React.Component {
  onVisibleChange=(visible)=>{
     this.props.onVisibleChange&&this.props.onVisibleChange(visible);
  }
  onSelect=(opt,index)=>{
    this.props.onSelect&&this.props.onSelect(opt,index);
  }
  onSelectAll=()=>{
    this.props.onSelectAll&&this.props.onSelectAll();
  }
  onCancelSelectAll=()=>{
    this.props.onCancelSelectAll&&this.props.onCancelSelectAll();
  }
  onCancel=()=>{
    this.props.onCancel&&this.props.onCancel();
  }
  backGo(){
    this.context.router.goBack();
  }
  onfileChange(e){
    var files = e.currentTarget.files;
    this.props.onChange(files);
  }
  render() {
    let {multi,selectAll,visible,buttonAuth} = this.props;
    let rightContent = [
        (<Item key="1" value="upload" >上传{(buttonAuth.upload&&!window.YYPlugin)&&<input type="file" value='' style={{opacity:'0',position:'relative',left:'-30px',width:'50px'}} onChange={this.onfileChange.bind(this)}/>}</Item>),
        (<Item key="2" value="add"  style={{ whiteSpace: 'nowrap' }}>新建文件夹</Item>),
        // (<Item key="3" value="multi">多选</Item>)
    ];
    return (
        <NavBar mode="light"
          leftContent={multi?selectAll?<span onClick={this.onCancelSelectAll}>取消全选</span>:<span onClick={this.onSelectAll}>全选</span>:<Icon  onClick={this.backGo.bind(this)} type="left"/>}
          rightContent={!multi?
          <Popover
            overlayClassName="fortest"
            overlayStyle={{ color: 'currentColor' }}
            visible={visible}
            overlay={rightContent}
            align={{
              overflow: { adjustY: 0, adjustX: 0 },
              offset: [-10, 0],
            }}
            onVisibleChange={this.onVisibleChange}
            onSelect={this.onSelect}
          >
            <div style={{
              height: '100%',
              padding: '0 15px',
              marginRight: '-15px',
              display: 'flex',
              alignItems: 'center',
            }}
            >
              <Icon type="plus"/>
            </div>
          </Popover>:<span onClick={this.onCancel}>取消</span>
        }
        >
        文库
        </NavBar>
    );
  }
}
YYLibraryNavBar.contextTypes={
  router:ProTypes.object.isRequired
}
module.exports = YYLibraryNavBar;