elephant-com/RoleUserPicker.js

the general component for elephant washing shoes

import React, { Component } from 'react';
import { connect } from 'dva';
import { TouchableOpacity, View, Text } from 'react-native';
import { Picker, Icon } from 'antd-mobile';
import PropTypes from 'prop-types';

import { createAction } from './utils';

const CustomChildren = ({ onClick, extra }) => {
  return (
    <TouchableOpacity onPress={onClick}>
      <View style={{ flexDirection: 'row', justifyContent: 'flex-start' }}>
        <Text style={{ color: '#FF9900', marginRight: 5 }}>{extra}</Text>
        <Icon type={'\ue606'} color="#ccc" size={15} />
      </View>
    </TouchableOpacity>
  );
};

class RoleUserPicker extends Component {

  state = {};

  componentWillReceiveProps(nextProps) {
    const { roleUsers } = nextProps;
    if (roleUsers) {
      const { loadRole, list } = roleUsers;
      if (loadRole) {
        this.setState({ data: list });
      } else if (this.state.data) {
        this.state.data.find(d => d.value === this.state.selectedRoleId).children = list;
        if (list.length > 0) {
          this.state.currentValue.push(list[0].value);
        }
        this.setState({ data: this.state.data, currentValue: this.state.currentValue });
      }
    }
  }

  /* eslint-disable no-unused-expressions */
  render() {
    return (<Picker
      data={this.state.data} cols={2}
      onChange={(value) => {
        this.setState({ currentValue: value });
        this.props.onChange && this.props.onChange({
          roleId: value[0],
          userId: value.length > 1 ? value[1] : null,
        });
      }}
      onPickerChange={(value) => {
        this.setState({ currentValue: value });
        const roleId = value[0];
        this.state.selectedRoleId = roleId;
        if (!this.state.data.find(d => d.value === roleId).children) {
          this.props.dispatch(createAction('com/loadRoleUsers')({ loadRole: false, roleId }));
        }
      }}
      value={this.state.currentValue}
    >
      <CustomChildren
        onClick={() => {
          if (!this.state.data) {
            this.props.dispatch(createAction('com/loadRoleUsers')({ loadRole: true }));
          }
        }}
      />
    </Picker>);
  }
}

RoleUserPicker.propsTypes = {
  onChange: PropTypes.func.isRequired,
};

export default connect(({ com }) => ({ ...com }))(RoleUserPicker);