DSRInfoDetailScreen.js

/**
 * Created by zhouhuan on 2017/10/30.
 */
import React from 'react';
import { createForm } from 'rc-form';
import { View, ScrollView } from 'react-native';
import { List, InputItem, Toast, WhiteSpace, WingBlank } from 'antd-mobile';
import Icon from 'react-native-vector-icons/FontAwesome';
import { connect } from 'react-redux';
import { createAction } from '../../../utils';

@connect(({ DSRInfoDetail }) => ({ DSRInfoDetail }))
class DSRInfoDetailScreen extends React.Component {
  componentDidMount() {
    const { id } = this.props.navigation.state.params;
    this.props.dispatch(createAction('DSRInfoDetail/getDSRInfoDetail')(id));
  }
  onEdit =() => {
    // this.props.dispatch(createAction('DSRInfoDetail/setEnable')(true));
    this.props.navigation.navigate('CameraPhoto', { pID: this.props.navigation.state.params });
  };
  onSubmit = () => {
    this.props.form.validateFields({ force: true }, (error, value) => {
      if (!error) {
        this.props.dispatch(createAction('DSRInfoDetail/updateDSRInfoDetail')({ id: this.props.DSRInfoDetail.DSRID, singularData: value }));
      } else {
        Toast.show('Validation failed');
      }
    });
  };
  validateNoNull = (rule, value, callback) => {
    if (value) {
      callback();
    } else {
      callback(new Error('At least four charactors for account'));
    }
  };
  render() {
    const { singularData, metas, enableEdit } = this.props.DSRInfoDetail;
    const { getFieldProps } = this.props.form;
    if (this.props.DSRInfoDetail.enableEdit === true) {
      return (
        <ScrollView>
          <WhiteSpace />
          <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
            <Icon.Button
              name="id-card"
              backgroundColor="#08BBF9"
              onPress={() => {
                this.props.dispatch({ type: 'DSRInfoDetail/DuKa' });
              }}
            >
              读卡
            </Icon.Button>
          </View>
          <WhiteSpace />
          <List>
            {
              metas.map((m) => {
                if (m.required === true) {
                  return (
                    <InputItem
                      {...getFieldProps(m.key, {
                        initialValue: singularData[m.key],
                        rules: [
                          { required: true, message: '不允许为空' },
                          { validator: this.validateNoNull },
                        ],
                      })}
                      clear
                      placeholder="请输入"
                      editable={enableEdit}
                      ref={(el) => {
                        this.customFocusInst = el;
                      }}
                    >
                      姓名
                    </InputItem>
                  );
                } else {
                  return (
                    <InputItem
                      {...getFieldProps(m.key, {
                        initialValue: singularData[m.key],
                      })}
                      clear
                      placeholder="请输入"
                      editable={enableEdit}
                      ref={(el) => {
                        this.customFocusInst = el;
                      }}
                    >
                      {m.label}
                    </InputItem>
                  );
                }
              })}
            {[1].map(() => {
              return (
                <List.Item>
                  <View style={{ flexDirection: 'row', justifyContent: 'center' }}>
                    <Icon.Button
                      name="save"
                      backgroundColor="#08BBF9"
                      onPress={this.onSubmit}
                    >
                      保存
                    </Icon.Button>
                  </View>
                </List.Item>
              );
            })
            }
          </List>
        </ScrollView>
      );
    } else {
      return (
        <ScrollView>
          <WhiteSpace />
          <WhiteSpace />
          <WingBlank>
            <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
              <Icon.Button
                name="edit"
                backgroundColor="#08BBF9"
                onPress={this.onEdit}
              >
                资料上传
              </Icon.Button>
            </View>
            <WhiteSpace />
            <List>
              {
              metas.map((m) => {
                  return (
                    <List.Item
                      key={m.key}
                      extra={singularData[m.key]}
                      wrap
                    >
                      {m.label}
                    </List.Item>
                  );
                })
              }
            </List>
          </WingBlank>
        </ScrollView>
      );
    }
  }
}

export default createForm()(DSRInfoDetailScreen);