base.tsx 6.79 KB
Newer Older
陈帅's avatar
陈帅 committed
1
import React, { Component, Fragment } from 'react';
陈帅's avatar
陈帅 committed
2
import { formatMessage, FormattedMessage } from 'umi-plugin-react/locale';
3
import { Form, Input, Upload, Select, Button, message } from 'antd';
陈帅's avatar
陈帅 committed
4
import { FormComponentProps } from 'antd/es/form';
愚道's avatar
愚道 committed
5
import { connect } from 'dva';
陈帅's avatar
陈帅 committed
6 7 8
import styles from './BaseView.less';
import GeographicView from './GeographicView';
import PhoneView from './PhoneView';
陈帅's avatar
陈帅 committed
9
import { CurrentUser } from '../data';
陈帅's avatar
陈帅 committed
10

陈帅's avatar
陈帅 committed
11 12 13 14
const FormItem = Form.Item;
const { Option } = Select;

// 头像组件 方便以后独立,增加裁剪之类的功能
陈帅's avatar
陈帅 committed
15
const AvatarView = ({ avatar }: { avatar: string }) => (
陈帅's avatar
陈帅 committed
16
  <Fragment>
17
    <div className={styles.avatar_title}>
18
      <FormattedMessage id="BLOCK_NAME.basic.avatar" defaultMessage="Avatar" />
19
    </div>
陈帅's avatar
陈帅 committed
20 21 22 23 24
    <div className={styles.avatar}>
      <img src={avatar} alt="avatar" />
    </div>
    <Upload fileList={[]}>
      <div className={styles.button_view}>
张秀玲's avatar
张秀玲 committed
25
        <Button icon="upload">
26
          <FormattedMessage id="BLOCK_NAME.basic.change-avatar" defaultMessage="Change avatar" />
张秀玲's avatar
张秀玲 committed
27
        </Button>
陈帅's avatar
陈帅 committed
28 29 30 31
      </div>
    </Upload>
  </Fragment>
);
陈帅's avatar
陈帅 committed
32 33 34 35
interface SelectItem {
  label: string;
  key: string;
}
陈帅's avatar
陈帅 committed
36

陈帅's avatar
陈帅 committed
37 38 39 40 41 42
const validatorGeographic = (
  _: any,
  value: {
    province: SelectItem;
    city: SelectItem;
  },
陈帅's avatar
陈帅 committed
43
  callback: (message?: string) => void,
陈帅's avatar
陈帅 committed
44
) => {
陈帅's avatar
陈帅 committed
45 46 47 48 49 50 51 52 53 54
  const { province, city } = value;
  if (!province.key) {
    callback('Please input your province!');
  }
  if (!city.key) {
    callback('Please input your city!');
  }
  callback();
};

陈帅's avatar
陈帅 committed
55
const validatorPhone = (rule: any, value: string, callback: (message?: string) => void) => {
陈帅's avatar
陈帅 committed
56 57 58 59 60 61 62 63 64 65
  const values = value.split('-');
  if (!values[0]) {
    callback('Please input your area code!');
  }
  if (!values[1]) {
    callback('Please input your phone number!');
  }
  callback();
};

陈帅's avatar
陈帅 committed
66
interface BaseViewProps extends FormComponentProps {
67
  currentUser?: CurrentUser;
陈帅's avatar
陈帅 committed
68 69 70
}

@connect(({ BLOCK_NAME_CAMEL_CASE }: { BLOCK_NAME_CAMEL_CASE: { currentUser: CurrentUser } }) => ({
71
  currentUser: BLOCK_NAME_CAMEL_CASE.currentUser,
愚道's avatar
愚道 committed
72
}))
陈帅's avatar
陈帅 committed
73
class BaseView extends Component<BaseViewProps> {
陈帅's avatar
陈帅 committed
74
  view: HTMLDivElement | undefined;
陈帅's avatar
陈帅 committed
75

陈帅's avatar
陈帅 committed
76 77 78
  componentDidMount() {
    this.setBaseInfo();
  }
陈帅's avatar
陈帅 committed
79

陈帅's avatar
陈帅 committed
80
  setBaseInfo = () => {
陈帅's avatar
陈帅 committed
81
    const { currentUser, form } = this.props;
82 83 84 85 86 87 88
    if (currentUser) {
      Object.keys(form.getFieldsValue()).forEach(key => {
        const obj = {};
        obj[key] = currentUser[key] || null;
        form.setFieldsValue(obj);
      });
    }
陈帅's avatar
陈帅 committed
89
  };
陈帅's avatar
陈帅 committed
90

陈帅's avatar
陈帅 committed
91
  getAvatarURL() {
陈帅's avatar
陈帅 committed
92
    const { currentUser } = this.props;
93 94 95 96 97 98
    if (currentUser) {
      if (currentUser.avatar) {
        return currentUser.avatar;
      }
      const url = 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png';
      return url;
陈帅's avatar
陈帅 committed
99
    }
100
    return '';
陈帅's avatar
陈帅 committed
101
  }
陈帅's avatar
陈帅 committed
102

陈帅's avatar
陈帅 committed
103
  getViewDom = (ref: HTMLDivElement) => {
104 105
    this.view = ref;
  };
陈帅's avatar
陈帅 committed
106

107 108 109 110 111
  handlerSubmit = (event: Event) => {
    event.preventDefault();
    const { form } = this.props;
    form.validateFields((err, values) => {
      if (!err) {
112
        message.success(formatMessage({ id: 'BLOCK_NAME.basic.update.success' }));
113 114 115 116
      }
    });
  };

陈帅's avatar
陈帅 committed
117
  render() {
陈帅's avatar
陈帅 committed
118 119 120
    const {
      form: { getFieldDecorator },
    } = this.props;
陈帅's avatar
陈帅 committed
121
    return (
jim's avatar
jim committed
122
      <div className={styles.baseView} ref={this.getViewDom}>
陈帅's avatar
陈帅 committed
123
        <div className={styles.left}>
陈帅's avatar
陈帅 committed
124
          <Form layout="vertical" hideRequiredMark>
125
            <FormItem label={formatMessage({ id: 'BLOCK_NAME.basic.email' })}>
陈帅's avatar
陈帅 committed
126
              {getFieldDecorator('email', {
张秀玲's avatar
张秀玲 committed
127 128 129
                rules: [
                  {
                    required: true,
130
                    message: formatMessage({ id: 'BLOCK_NAME.basic.email-message' }, {}),
张秀玲's avatar
张秀玲 committed
131 132
                  },
                ],
陈帅's avatar
陈帅 committed
133 134
              })(<Input />)}
            </FormItem>
135
            <FormItem label={formatMessage({ id: 'BLOCK_NAME.basic.nickname' })}>
陈帅's avatar
陈帅 committed
136
              {getFieldDecorator('name', {
张秀玲's avatar
张秀玲 committed
137 138 139
                rules: [
                  {
                    required: true,
140
                    message: formatMessage({ id: 'BLOCK_NAME.basic.nickname-message' }, {}),
张秀玲's avatar
张秀玲 committed
141 142
                  },
                ],
陈帅's avatar
陈帅 committed
143 144
              })(<Input />)}
            </FormItem>
145
            <FormItem label={formatMessage({ id: 'BLOCK_NAME.basic.profile' })}>
陈帅's avatar
陈帅 committed
146
              {getFieldDecorator('profile', {
张秀玲's avatar
张秀玲 committed
147 148 149
                rules: [
                  {
                    required: true,
150
                    message: formatMessage({ id: 'BLOCK_NAME.basic.profile-message' }, {}),
张秀玲's avatar
张秀玲 committed
151 152 153 154
                  },
                ],
              })(
                <Input.TextArea
155
                  placeholder={formatMessage({ id: 'BLOCK_NAME.basic.profile-placeholder' })}
张秀玲's avatar
张秀玲 committed
156
                  rows={4}
陈帅's avatar
陈帅 committed
157
                />,
张秀玲's avatar
张秀玲 committed
158
              )}
陈帅's avatar
陈帅 committed
159
            </FormItem>
160
            <FormItem label={formatMessage({ id: 'BLOCK_NAME.basic.country' })}>
陈帅's avatar
陈帅 committed
161
              {getFieldDecorator('country', {
张秀玲's avatar
张秀玲 committed
162 163 164
                rules: [
                  {
                    required: true,
165
                    message: formatMessage({ id: 'BLOCK_NAME.basic.country-message' }, {}),
张秀玲's avatar
张秀玲 committed
166 167
                  },
                ],
陈帅's avatar
陈帅 committed
168
              })(
169
                <Select style={{ maxWidth: 220 }}>
陈帅's avatar
陈帅 committed
170
                  <Option value="China">中国</Option>
陈帅's avatar
陈帅 committed
171
                </Select>,
陈帅's avatar
陈帅 committed
172 173
              )}
            </FormItem>
174
            <FormItem label={formatMessage({ id: 'BLOCK_NAME.basic.geographic' })}>
陈帅's avatar
陈帅 committed
175 176 177 178
              {getFieldDecorator('geographic', {
                rules: [
                  {
                    required: true,
179
                    message: formatMessage({ id: 'BLOCK_NAME.basic.geographic-message' }, {}),
陈帅's avatar
陈帅 committed
180 181 182 183 184 185 186
                  },
                  {
                    validator: validatorGeographic,
                  },
                ],
              })(<GeographicView />)}
            </FormItem>
187
            <FormItem label={formatMessage({ id: 'BLOCK_NAME.basic.address' })}>
陈帅's avatar
陈帅 committed
188
              {getFieldDecorator('address', {
张秀玲's avatar
张秀玲 committed
189 190 191
                rules: [
                  {
                    required: true,
192
                    message: formatMessage({ id: 'BLOCK_NAME.basic.address-message' }, {}),
张秀玲's avatar
张秀玲 committed
193 194
                  },
                ],
陈帅's avatar
陈帅 committed
195 196
              })(<Input />)}
            </FormItem>
197
            <FormItem label={formatMessage({ id: 'BLOCK_NAME.basic.phone' })}>
陈帅's avatar
陈帅 committed
198 199
              {getFieldDecorator('phone', {
                rules: [
张秀玲's avatar
张秀玲 committed
200 201
                  {
                    required: true,
202
                    message: formatMessage({ id: 'BLOCK_NAME.basic.phone-message' }, {}),
张秀玲's avatar
张秀玲 committed
203
                  },
陈帅's avatar
陈帅 committed
204 205 206 207
                  { validator: validatorPhone },
                ],
              })(<PhoneView />)}
            </FormItem>
208
            <Button type="primary" onClick={this.handlerSubmit}>
xiaohuoni's avatar
xiaohuoni committed
209
              <FormattedMessage id="BLOCK_NAME.basic.update" defaultMessage="Update Information" />
张秀玲's avatar
张秀玲 committed
210
            </Button>
陈帅's avatar
陈帅 committed
211 212 213 214 215 216 217 218 219
          </Form>
        </div>
        <div className={styles.right}>
          <AvatarView avatar={this.getAvatarURL()} />
        </div>
      </div>
    );
  }
}
lijiehua's avatar
lijiehua committed
220

陈帅's avatar
陈帅 committed
221
export default Form.create<BaseViewProps>()(BaseView);