joywok-material-components/components/tips/toolTips.js

<h1 align="center"> Joywok Material Components </h1>

/*
用途：用来hover展示文本的提醒信息

参数说明：
placement:Tooltip placement.
 title：弹框显示的文本内容
 i:鼠标放在这个上面会出现弹框

 demo：
    <ToolTips title="SomeS Some" placement="top"
      title={'展现当前技能下所有模型及其状态。注：上限 5 个，超限须手动删除，删除后无法恢复。'}>
      <i className="icon-notice"></i>
    </ToolTips>
*/
/**
 *
 * @api {} Tooltip
 * @apiName   Tooltip
 * @apiGroup 组件使用
 *
 * 所有数据请参考https://material-ui.com/zh/components/tooltips/
 *
 * @apiSuccessExample {json} 使用案例:
 * import ToolTips from 'joywok-material-components/lib/tips/toolTips';
 * <ToolTips title={i18n('label.appset.after.open.mobile.entry')} placement="top" title={i18n('label.appset.after.open.mobile.entry')}>
                      <i className="icon-tooltip"></i>
                    </ToolTips>
 *
 *
 */

import React, { Component } from 'react';
import { connect } from 'dva';
import { withStyles, makeStyles } from '@material-ui/core/styles';
import Tooltip from '@material-ui/core/Tooltip';
import Button from '@material-ui/core/Button';
require('./style/toolTips.css');
function arrowGenerator(color) {
  return {
    '&': {
      // top: '-105px!important',
      overflowX: 'hidden'
    },
    '&[x-placement*="bottom"] $arrow': {
      top: 0,
      // left: 0,
      // left: '50%',
      left: '50px',
      // marginLeft: '-0.5em',
      marginTop: '-0.95em',
      width: '2em',
      height: '1em',
      '&::before': {
        // borderWidth: '0 1em 1em 1em',
        borderWidth: '0 1.5em 1em 0',
        borderColor: `transparent transparent ${color} transparent`,
      },
    },
    '&[x-placement*="top"] $arrow': {
      bottom: 0,
      // left: '50%',
      // marginLeft: '-0.5em',
      left: '50px',
      // marginLeft: '-1em',
      marginBottom: '-0.95em',
      width: '2em',
      height: '1em',
      position: 'absolute',
      '&::before': {
        // borderWidth: '1em 1em 0 1em',
        borderWidth: '1em 1.5em 0 0em',
        borderColor: `${color} transparent transparent transparent`,
      },
    },
  };
}

const styles = theme => ({
  tooltip: {
    position: 'relative',
    // padding: '30px',
    padding: '20px 15px',
    lineHeight: '17px',
    backgroundColor: '#404A53',
    // backgroundColor: '#fff',
    fontSize: '12px',
    // maxWidth: '311px',
    width: '311px',
    maxWidth: '311px',
    // maxWidth: '570px',
    // width: '500px',
    boxShadow: '0px 0px 10px 0px rgba(0,0,0,0.15)',
    marginLeft: '200px',
  },
  arrow: {
    position: 'absolute',
    fontSize: 6,
    '&::before': {
      content: '""',
      margin: 'auto',
      display: 'block',
      width: 0,
      height: 0,
      borderStyle: 'solid',
      position: 'absolute',
      left: '-190px'
    },
  },
  // popper: arrowGenerator('#fff'),
  popper: arrowGenerator('#404A53'),
  root: {
    display: 'inline-block'
  },
})
class ToolTips extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      arrowRef: false
    };
  }
  handleArrowRef = node => {
    this.setState({
      arrowRef: node,
    });
  };
  render() {
    let { classes } = this.props;
    let self = this;
    let props = this.props;
    let { arrowRef } = this.state;
    let title = this.props.title;
    return (
      <div className={classes.root +' tool-tips'}>
        <Tooltip  {...this.props} placement={this.props.placement} ref={this.handleArrowRef}
          classes={classes}
          title={
            <React.Fragment>
              {this.props.title || 'wer'}
              <span className={classes.arrow} ref={self.handleArrowRef} />
            </React.Fragment>
          }
          PopperProps={{
            popperOptions: {
              modifiers: {
                arrow: {
                  enabled: Boolean(this.state.arrowRef),
                  element: this.state.arrowRef,
                },
              },
            },
          }}
        >{this.props.children || <i className="tooltips-question-icon" style={{marginLeft: '8px'}}></i>}</Tooltip>
      </div>
    )
  }
}




export default withStyles(styles)(ToolTips);