パッケージの2つのシェル問い合わせフレームアセンブリ

インポートは、{コンポーネント}から「反応」リアクト
「プロパタイプ」からインポートPropTypesを
インポート_から「lodash」
インポート「は、オブジェクトの割り当て」から割り当てる

インポート「./index.less' 

」../NormalButton」からインポートNormalButton 
インポート'../CloseButton'からCloseButton 
'../CancelButton'からインポートCancelButton 
'../CheckBox'からインポートチェックボックス

クラスOperationConfirmは、コンポーネント{延び
  静的propTypes = { 
    PropTypes.object、：スタイル
    tipIconUrl：PropTypes.string、
    questionaryText：PropTypesを.string、
    possibleWarnText：PropTypes.stringは、
    OnCloseの：PropTypes.funcを、
    onConfirm：PropTypes.funcを、
    onCheckChange：PropTypes.func、
    showCheckBoxButton：PropTypes.bool、
  } 

  静的defaultProps = { 
    スタイル：{}、
    tipIconUrl：（ '〜/共有/資産/画像/アイコン警告-黄-白色60-60.png'）が必要、
    questionaryText： ''、
    possibleWarnText： ''、
    OnCloseの：_.noop、
    onConfirm：_.noop、
    onCheckChange：_.noop、
    showCheckBoxButton：偽
  } 

  状態= { 
  } 

  componentDidMount（）{ 
  } 

  componentWillUnmount（）{ 
  } 

  handleClickCloseButton =（）=> { 
    this.props.onClose（）
  } 

  handleClickCancelButton =（）=> { 
    this.props.onClose（）
  } 

  handleClickConfirmButton =（）=> {
    this.props.onConfirm（）
    this.props.onClose（）
  } 

  handleClickCheckBoxButton =（checkoutState）=> { 
    this.props.onCheckChange（checkoutState）
  } 

  （レンダリング）{ 
    CONST wrapStyles =割り当てる（{}、this.props.style）
    リターン（
      <DIVクラス名=「動作確認成分ラップ」スタイル= {wrapStyles}> 
        <DIVクラス名=「チップヘッダラップ」> 
          <DIVクラス名=「ヘッダ左ラップ」> 
            <IMGクラス名=」アイコン」SRC = {this.props.tipIconUrl} ALT = "" /> 
            <span>を提示</スパン> 
          </ div> 
          <CloseButton CloseButton 
            のonClick = {} this.handleClickCloseButton
          />
        </ div> 
        <divのクラス名= "spliter" /> 
        <DIVクラス名= "先端含むラップ"> 
          <DIVクラス名= "共通チップコンテナ"> 
            <Pクラス名= "アンケートテキスト"> {this.props.questionaryText} </ P> 
            <Pのクラス名= "可能-警告テキスト"> {this.props.possibleWarnText} </ P> 
          </ div> 
          { 
            this.props.showCheckBoxButton ===真&&（
              <DIVクラス名は= "カスタムチップコンテナ"> 
                <チェックボックス
                  スタイル= {{ 
                    のfontSize： '12ピクセル'、
                    marginLeft '44px'、
                    marginBottom '計6Px」、 
                    色： '＃364152'、
                    表示： 'インラインブロック'、 
                  }}
                  コンテンツ= "不再提示" 
                  チェック
                  のonChange = {this.handleClickCheckBoxButton} 
                /> 
              </ div> 
            ）
          } 
        </ div> 
        <DIVクラス名= "先端底ボタンラップ"> 
          < NormalButton 
            テキスト= "确定" 
            のonClick = {this.handleClickConfirmButton} 
            スタイル= {{ 
              marginLeft： '24ピクセル'、
            }} 
          /> 
          <CancelButton 
            テキスト= "取消"
            onClick = {} this.handleClickCancelButton
            スタイル= {{ 
              marginLeft 'は24px'、
            }} 
          />
        </ DIV> 
      </ DIV> 
    ）
  } 
} 

輸出デフォルトOperationConfirm

　　

.operation-確認成分ラップ { 
  幅：400ピクセル。
  国境半径：計6Px。
  国境：固体1pxのの＃e2e2e2。
  背景色：#FFFFFF ; 
  ボックスサイズ：ボーダーボックス ; 

  .tipヘッダラップ{ 
    幅：100％ 。
    表示：フレックス。
    ALIGN-アイテム：センター ; 
    -コンテンツが正当化：スペースの間 ; 
    パディング：8pxは24px 0PXは24px; 
    ボックスサイズ：ボーダーボックス ; 

    .header左ラップ{ 
      ディスプレイ：曲がります。
      ALIGN-アイテム：センター ; 

      .icon { 
        表示：インラインブロック。
        幅：18px ; 
        高さ：18px ; 
        オブジェクトフィット：含まれています。
      } 

      スパン { 
        マージン左：計6Px。
        色：＃3d4e67。
        フォントサイズ：12ピクセル ; 
      } 
    } 
  } 

  .spliter { 
    幅：352px ; 
    高さ：1ピクセル。
    背景色：＃f7f8f9 ; 
    マージン：0は24px ; 
  } 

  .tip-含むラップ { 
    幅：100％ 。
    ボックスサイズ：ボーダーボックス ; 

    .common先端容器{ 
      幅：100％ 。
      フォントサイズ：12ピクセル; 
      色：＃3d4e67。
      パディング：12ピクセル0PX。

      .questionaryテキスト{ 
        不透明：0.8。
        margin-left：44px ; 
      } 

      .possible-警告テキスト { 
        不透明：0.8。
        余白左：は50px ; 
      } 
    } 

    .custom先端容器 { 
      幅：100％ 。
    } 

  } 

  .tip底ボタンラップ {
    幅：100％ ; 
    高さ：48px ; 
    背景色：RGBA（57、119、246、0.05） 。
    表示：フレックス。
    ALIGN-アイテム：センター ; 
  } 

}