yylib-quick-mobile/dist/yylib/modal/YYModalDemo.js

yylib-quick-mobile

import React, {Component} from 'react';
import YYModal from'./YYModal';
const prompt = YYModal.prompt;
import {Button,List,Toast} from 'antd-mobile';
class YYModalDemo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      modal: false,
    };
  }
  showModal = key => (e) => {
    e.preventDefault(); // 修复 Android 上点击穿透
    this.setState({
      [key]: true,
    });
  }
  onClose = key => () => {
    this.setState({
      [key]: false,
    });
  }

  onWrapTouchStart = (e) => {
    // fix touch to scroll background page on iOS
    if (!/iPhone|iPod|iPad/i.test(navigator.userAgent)) {
      return;
    }
    const pNode = closest(e.target, '.am-modal-content');
    if (!pNode) {
      e.preventDefault();
    }
  }
  getPopUp() {
    return (<List renderHeader={() => <div>委托买入</div>} className="popup-list">
              {['股票名称', '股票代码', '买入价格'].map((i, index) => (
                <List.Item key={index}>{i}</List.Item>
              ))}
              <List.Item>
                <Button type="primary" onClick={this.onClose('modal2')}>买入</Button>
              </List.Item>
            </List>);
  }
  getContent() {
    return (
      <div style={{ height: 100, overflow: 'scroll' }}>
        scoll content...<br />
        scoll content...<br />
        scoll content...<br />
        scoll content...<br />
        scoll content...<br />
        scoll content...<br />
      </div>
    );
  }
  componentDidMount() {

  }
  render() {
    let modalContent = this.getContent();
    let modal2Content = this.getPopUp();
    return (
        <div>
          <Button onClick={this.showModal('modal')}>basic</Button>
          <Button onClick={this.showModal('modal2')}>popup</Button>
           <Button onClick={() => prompt('input name', 'please input your name',
      [
        {
          text: 'Close',
          onPress: value => new Promise((resolve) => {
            Toast.info('onPress promise resolve', 1);
            setTimeout(() => {
              resolve();
              console.log(`value:${value}`);
            }, 1000);
          }),
        },
        {
          text: 'Hold on',
          onPress: value => new Promise((resolve, reject) => {
            Toast.info('onPress promise reject', 1);
            setTimeout(() => {
              reject();
              console.log(`value:${value}`);
            }, 1000);
          }),
        },
      ], 'default', null, ['input your name'])}
    >promise</Button>
          <YYModal
            visible={this.state.modal}
            transparent={true}
            maskClosable={false}
            onClose={this.onClose('modal')}
            title={'我得模块'}
            footer={[{ text: 'Ok', onPress: () => { console.log('ok'); this.onClose('modal')(); } }]}
            modalContent={modalContent}
          />
          <YYModal
            popup
            visible={this.state.modal2}
            maskClosable={false}
            animationType="slide-up"
            modalContent={modal2Content}
          />
        </div>
    );
  }
}
YYModalDemo.defaultProps = {}
export default YYModalDemo;