/** @jsx createElement */
import { createElement, Component, render } from 'rax';
import Input from 'nuke-input';
import View from 'nuke-view';
import Text from 'nuke-text';
import Button from 'nuke-button';
import Mask from 'nuke-mask';
import Page from 'nuke-page';

const App = class NukeDemoIndex extends Component {
  constructor() {
    super();
    this.state = {
      maskVisible: false,
    };
  }
    showMask = () => {
      this.setState({
        maskVisible: true,
      });
    }
    hideMask =() => {
      this.setState({
        maskVisible: false,
      });
    }
    render() {
      return (
        <Page title="Mask">
          <Page.Intro main="普通用法" />
          <Button type="primary" onPress={this.showMask}>打开浮层</Button>
          {
            this.state.maskVisible ?
              <Mask style={styles.mask}>
                <View style={styles.bg}>
                  <View style={styles.dialogWrap}>
                    <Text style={styles.text}>遮罩层里的内容</Text>
                    <Button type="primary" onPress={this.hideMask}>点击关闭</Button>
                  </View>
                </View>
              </Mask>
              : null
          }
        </Page>
      );
    }
};
const styles = {
  textarea: {
    width: '750rem',
    height: '200rem',
    borderWidth: '1rem',
    borderStyle: 'solid',
    borderColor: '#cccccc',
  },

  bg: {
    flex: 1,
    width: '750rem',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'rgba(0,0,0,0.7)',
  },
  dialogWrap: {
    width: 600,
    height: 300,
    padding: 20,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#ffffff',

  },
  text: {
    marginBottom: 20,
    // color:'#ffffff'
  },
};
render(<App />);