Cacher is the code snippet organizer for pro developers

import React from 'react'
import _ from 'lodash'
import { NewBack } from '../layout/Template'
import Clipboard from 'clipboard';
import { doBeforeUnmount, doBeforeMount, doAfterMount, API_URL, refreshPattern, ajaxErrorHandler, secretAjax } from '../util/util'


const Modal = () => (
  <div className="ui modal">
      <i className="close icon"></i>
      <div className="header">
          设置说明123
      </div>
      <div className="content">
          <div className="description order">
              <ol className="instruction">
                  <li>一键返点设置完成后，页面下方将会显示自主注册链接地址，请注意链接地址会不定期的进行更新。</li>
                  <li>自身保留返点为给您自己预留各彩种的统一返点。</li>
              </ol>
          </div>
      </div>
  </div>
)

class PrizeTable extends React.Component {
  // constructor(props) {
  //   super(props)
  //   this.state = {
  //       rows: [],
  //   }
  // this.getDetailFromServer = ::this.getDetailFromServer
  // }

  // // get 遊戲記錄過濾器 data from server
  // getDetailFromServer (page) {
  //   var me = this
  //   secretAjax({
  //     url:API_URL.PRIZE_DATA,
  //     dataType:'text'
  //   }, {success:(data) => {
  //     me.setState({
  //     rows: data.app_data.prizegroup
  //     });
  //   }, fail:() => {
  //     console.log('failed')
  //   }});
  // };
  
  // componentWillMount() {
  //   this.getDetailFromServer()
  // }

  // FIXME: 1952+0% 1800+7.6
  renderList(){
    let prizeArray = [];
      this.props.rows.map((item, i)=>{
        prizeArray.push(
        <tr key={i}>
        <td>{item.cnname}</td>
        <td className="text_center">0-{item.pg_max}</td>
        <td className="text_center">1952+0%</td>
        <td className="text_center">1800+7.6%</td>
      </tr>
        )
      })
    return prizeArray;
  }
  
  render() {
    return (
        <div id="mainSegment" ref="mainSegment" className="ui bottom attached fixnewloder">
          <table id="mainTable" className="ui  unstackable table fixmargin">
            <thead>
              <tr>
                <th>彩种</th>
                <th>返点范围</th>
                <th style={{width: "23%"}}>高奖金</th>
                <th style={{width: "27%"}}>高返点</th>
              </tr>
            </thead>
            <tbody>
              {this.renderList()}
            </tbody>
          </table>
        </div>
    );
  }
}

class UrlInfo extends React.Component {
  constructor(props) {
    super(props)
    this.handleCopyWapUrl = ::this.handleCopyWapUrl
    this.handleCopyWebUrl = ::this.handleCopyWebUrl
    this.openWebUrl = ::this.openWebUrl
    this.openWapUrl = ::this.openWapUrl
  }
  copyUrl (url) {
    swal({
        title: "请复制以下网址:",
        type: "info",
        showCancelButton: false,
        confirmButtonText: "复制",
        animation: "slide-from-top",
        text: url
      }, function() {
        // assign style setting
        //assign value
        let clipboard = new Clipboard('.confirm', {
          text: trigger => {
            return this.text
          }
        });
        // success remove dom
        clipboard.on('success', function(e) {
          e.clearSelection();
          clipboard.destroy();
        });
    });
  }
  handleCopyWapUrl() {
    this.copyUrl(this.props.mobile_url_short)
  }
  handleCopyWebUrl() {
    this.copyUrl(this.props.url_short)
  }
  openWebUrl() {
    window.open(this.props.url_short)
  }
  openWapUrl() {
    window.open(this.props.mobile_url_short)
  }
  render() {
    const isShow = this.props.nowpoint == "0.0" ? "none" : "block";
    const isShowMUrl = (this.props.mobile_url_short == "ERROR" || (typeof this.props.mobile_url_short == "boolean" && !this.props.mobile_url_short)) ?
      false : true;
    const isShowUrl = (this.props.url_short == "ERROR" || (typeof this.props.url_short == "boolean" && !this.props.url_short)) ?
      false : true;
    return (
      <div className="urladd-block optional short_url" style={{display: isShow}}>          
          <div className="field">
            {isShowUrl ?
            <div>
                <strong>电脑注册短链接：</strong><br/>
                <div id="url_reg_short" className="green1 url" style={{"color": "#FF8F00"}}>
                  <a style={{color: "#fbb03b"}} href="javascript:;" target="_blank" onClick={this.openWebUrl}>{this.props.url_short}</a>
                </div>
                <a id="pc_copy" onClick={this.handleCopyWebUrl} className="btn_radius bg_grey rightfloat" style={{width:"20%"}} title="复制网址">
                  复制
                </a>
            </div> : null}
            {isShowMUrl ?
            <div>
                <strong>手机注册短链接：</strong><br/>
                <div id="mobile_url_reg_short" className="green1 url">
                  <a href="javascript:;"  target="_blank" style={{color: "#fbb03b"}} onClick={this.openWapUrl}>{this.props.mobile_url_short}</a>
                </div>
                <a id="m_copy" onClick={this.handleCopyWapUrl} className="btn_radius bg_grey rightfloat" style={{width:"20%"}} title="复制网址">
                  复制
                </a>
            </div> : null}
          </div>
        </div>
      )
    }
}

class ContainerDOM extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      isDropDown: false,
    }
    this.renderOptions = ::this.renderOptions
    this.handleSubmit = ::this.handleSubmit
    this.dropdown = null;
  }
  componentDidMount() {
     this.dropdown = $(this.refs.point).dropdown();
  }
  componentWillUnmount() {
    $(".ui.modal").remove()
  }
  handleSubmit(e) {
        const me = this
        const point = this.dropdown.dropdown("get value")
        if (parseFloat(point) < 0.1) {
          sweetAlert({
            title: "糟糕",
            text: "当前自身保留返点不能低于0.1",
            type: "error",
            confirmButtonText: "确定"
          });
        } else {
          secretAjax({
            url: API_URL.URLADDUSER_UPDATA,
            data: {
              flagTag: "insert",
              point: point
            },
            dataType: 'text'
          }, {
            success: ({web_url_short, wap_url_short, message}) => {
              sweetAlert({
                  title: "恭喜",
                  text: message,
                  type: "success",
                  confirmButtonText: "确定"
                }, (isConfirm) => {
                  if(isConfirm) {
                      me.props.setStates({
                      url_short: web_url_short,
                      mobile_url_short: wap_url_short,
                      nowpoint: point,
                    })
                  }
              });
            },
            errorAlert: (res) => {
              if(res.status === 0 && res.errorCode) {
                sweetErrorAlert(res)
                return
              }
              let state = me.state;
              state.checkFinish = true;

              swal({
                  title:'糟糕',
                  text: res.message,
                  type:'error',
                  confirmButtonText:'确定'
                })
            }
          });
        }
  }
  handleClick() {
    $(".ui.modal").modal("show");
  }
  // renderOption() {
  //   return this.props.point.map((item, key) => {
  //     return <option key={key} value={item}>{item}</option>
  //   })
  // }

  renderOptions(){
    let optionsArray = []
    let pointerToArrayList = []
    // conver 2.2 to [0.1, 0.2, 0.3 ..., 2.2]
    pointerToArrayList = Array(this.props.point*10).fill(0).map((e,i)=>(i+1)/10)
    pointerToArrayList.map((item, i)=>{
      optionsArray.push(
        <option key={i} value={item}>{item}</option>
      )
    })
    return optionsArray
  }

  render() {
    console.log('props', this.props)
    // const loading = this.props.nowpoint ? null : "loading"
    const loading = null
    return (
        <div className="ui">
            <form className={"ui form " + loading} >
                <input type="hidden" name="pag" value="insert" />
                <div className="urladd default_form user_form">
                  <div className="urladd-block">
                    <div className="urladd-field optional">
                      <h4 className="input_title">当前自身保留返点为：<span id="self" style={{color:"#fbb03b"}}>{this.props.nowpoint}</span></h4>
                    </div>
                  </div>
                  <div className="field">
                      <h4 className="input_title">自身保留返点</h4>
                      <div className="ui form" style={{"display": "inline-block",width:"35%",marginLeft:"0.5em"}}>
                        <select ref="point"  id="point" className="ui dropdown select-pointr select needsclick" name="point" defaultValue={this.props.nowpoint}>
                            <option value="0.0">请选择</option>
                            {/*this.props.nowpoint ? this.renderOptions() : null*/}
                            {this.renderOptions()}
                        </select>
                      </div>
                      <div id="urlAddBtn" className="rightfloat" style={{display: "inline-block", verticalAlign: "middle",width:"30%"}}>
                          <input type="button" className="ui small positive button btn-success" value="一键设置" onClick={this.handleSubmit} />
                      </div>
                  </div>
                  <div className="field">
                    <h4 className="input_title" style={{marginBottom:"0.5em"}}>设置说明</h4>
                    <ol style={{paddingLeft:"1.5em",marginTop:"0"}}>
                        <li>一键返点设置完成后，页面下方将会显示自主注册链接地址，请注意链接地址会不定期的进行更新。</li>
                        <li>自身保留返点为给您自己预留各彩种的统一返点。</li>
                    </ol>
                  </div>
                {this.props.nowpoint ? <UrlInfo {...this.props} /> : null}
                </div>
            </form>
            <Modal />
        </div>
      )
  }
}

export default class UrlAddUser extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      nowpoint: "",
      url_short: "",
      mobile_url_short: "",
      point: "",
      rows: [],
    }
    this.setStates = ::this.setStates
  }
  componentDidMount() {
    const me = this;
      secretAjax({
        url: API_URL.PRIZE_DATA,
        dataType: 'text'
      }, {
        success: (data) => {
          me.setState({
            nowpoint: data.app_data.nowpoint,
            url_short: data.app_data.web_url_short,
            mobile_url_short: data.app_data.wap_url_short,
            point: data.app_data.maxpoint,
            rows: data.app_data.prizegroup,
          }, () => $.getScript('http://v3.jiathis.com/code/jiathis_m.js'))
        }
    });
  }
  setStates(state) {
    this.setState(state, () => {
      $("iframe, .jiathis_style, link[href='http://v3.jiathis.com/code/css/jiathis_share.css']").remove();
      $.getScript('http://v3.jiathis.com/code/jia.js');
    });
  }
  render() {
    console.log(this.state)
    return (
      <NewBack sideTitle="user" sideSubTitle="urladduser" title="自助开户" showClass={true} isBack={true}>
        <ContainerDOM {...this.state} setStates={this.setStates} />
        <PrizeTable rows={this.state.rows}/>
      </NewBack>
    );
  }
}