yylib-quick-mobile/dist/yylib/button/YYButtonBar.js

yylib-quick-mobile

import React, {Component} from 'react';
import classnames from 'classnames';
import './YYButtonBar.css';
import {isFunction} from '../../utils/FunctionUtil';
import YYButton from './YYButton';
class YYButtonBar extends Component {
  onClick(e){
    if (isFunction(this.props.onClick)) {
        let itemIndex = e.target.parentNode.getAttribute('data-id')||e.target.parentNode.parentNode.getAttribute('data-id');
        if (e.target.parentNode.nodeName==='svg') {
          itemIndex = e.target.parentNode.parentNode.parentNode.getAttribute('data-id');
        }
        this.props.onClick(itemIndex);
    }
  }
  getChildren() {
    let {children} = this.props;
    children = (children&&children.constructor==Array)?children:[children];
    if (children) {
      return children.map((item,index)=>{
        let {...restProps} = item.props;
        return(
          <div key={index} className='yy-button-bar-item' data-id={index}>{item}</div>
        );
      });
    }
  }
  render() {
    let {visible} = this.props;
    let wrapClz = classnames('yy-button-bar',(!visible&&'hidden'),this.props.className);
    return (
      <div className={wrapClz} onClick={this.onClick.bind(this)}>
        {this.getChildren()}
      </div>
    );
  }
}
YYButtonBar.defaultProps = {
  visible: true
}
export default YYButtonBar;