封装二级询问弹框组件

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import _ from 'lodash'
import assign from 'object-assign'

import './index.less'

import NormalButton from '../NormalButton'
import CloseButton from '../CloseButton'
import CancelButton from '../CancelButton'
import CheckBox from '../CheckBox'

class OperationConfirm extends Component {
  static propTypes = {
    style: PropTypes.object,
    tipIconUrl: PropTypes.string,
    questionaryText: PropTypes.string,
    possibleWarnText: PropTypes.string,
    onClose: PropTypes.func,
    onConfirm: PropTypes.func,
    onCheckChange: PropTypes.func,
    showCheckBoxButton: PropTypes.bool,
  }

  static defaultProps = {
    style: {},
    tipIconUrl: require('~/shared/assets/image/icon-warn-yellow-white-60-60.png'),
    questionaryText: '',
    possibleWarnText: '',
    onClose: _.noop,
    onConfirm: _.noop,
    onCheckChange: _.noop,
    showCheckBoxButton: false,
  }

  state = {
  }

  componentDidMount() {
  }

  componentWillUnmount() {
  }

  handleClickCloseButton = () => {
    this.props.onClose()
  }

  handleClickCancelButton = () => {
    this.props.onClose()
  }

  handleClickConfirmButton = () => {
    this.props.onConfirm()
    this.props.onClose()
  }

  handleClickCheckBoxButton = (checkoutState) => {
    this.props.onCheckChange(checkoutState)
  }

  render() {
    const wrapStyles = assign({}, this.props.style)
    return (
      <div className="operation-confirm-component-wrap" style={wrapStyles}>
        <div className="tip-header-wrap">
          <div className="header-left-wrap">
            <img className="icon" src={this.props.tipIconUrl} alt="" />
            <span>提示</span>
          </div>
          <CloseButton
            onClick={this.handleClickCloseButton}
          />
        </div>
        <div className="spliter" />
        <div className="tip-contain-wrap">
          <div className="common-tip-container">
            <p className="questionary-text">{this.props.questionaryText}</p>
            <p className="possible-warn-text">{this.props.possibleWarnText}</p>
          </div>
          {
            this.props.showCheckBoxButton === true && (
              <div className="custom-tip-container">
                <CheckBox
                  style={{
                    fontSize: '12px',
                    marginLeft: '44px',
                    marginBottom: '6px',
                    color: '#364152',
                    display: 'inline-block',
                  }}
                  content="不再提示"
                  checked
                  onChange={this.handleClickCheckBoxButton}
                />
              </div>
            )
          }
        </div>
        <div className="tip-bottom-button-wrap">
          <NormalButton
            text="确 定"
            onClick={this.handleClickConfirmButton}
            style={{
              marginLeft: '24px',
            }}
          />
          <CancelButton
            text="取 消"
            onClick={this.handleClickCancelButton}
            style={{
              marginLeft: '24px',
            }}
          />
        </div>
      </div>
    )
  }
}

export default OperationConfirm

　　

.operation-confirm-component-wrap {
  width: 400px;
  border-radius: 6px;
  border: solid 1px #e2e2e2;
  background-color: #ffffff;
  box-sizing: border-box;

  .tip-header-wrap {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 24px 0px 24px;
    box-sizing: border-box;

    .header-left-wrap {
      display: flex;
      align-items: center;

      .icon {
        display: inline-block;
        width: 18px;
        height: 18px;
        object-fit: contain;
      }

      span {
        margin-left: 6px;
        color: #3d4e67;
        font-size: 12px;
      }
    }
  }

  .spliter {
    width: 352px;
    height: 1px;
    background-color: #f7f8f9;
    margin: 0 24px;
  }

  .tip-contain-wrap {
    width: 100%;
    box-sizing: border-box;

    .common-tip-container {
      width: 100%;
      font-size: 12px;
      color: #3d4e67;
      padding: 12px 0px;

      .questionary-text {
        opacity: 0.8;
        margin-left: 44px;
      }

      .possible-warn-text {
        opacity: 0.8;
        margin-left: 50px;
      }
    }

    .custom-tip-container {
      width: 100%;
    }

  }

  .tip-bottom-button-wrap {
    width: 100%;
    height: 48px;
    background-color: rgba(57, 119, 246, 0.05);
    display: flex;
    align-items: center;
  }

}

 

转载于:https://www.cnblogs.com/chenbeibei520/p/11430485.html