base.tsx 6.8 KB
Newer Older
陈帅's avatar
陈帅 committed
1 2
import { Button, Form, Input, Select, Upload, message } from 'antd';
import { FormattedMessage, formatMessage } from 'umi-plugin-react/locale';
陈帅's avatar
陈帅 committed
3
import React, { Component, Fragment } from 'react';
陈帅's avatar
陈帅 committed
4

陈帅's avatar
陈帅 committed
5
import { FormComponentProps } from 'antd/es/form';
愚道's avatar
愚道 committed
6
import { connect } from 'dva';
陈帅's avatar
陈帅 committed
7
import { CurrentUser } from '../data.d';
陈帅's avatar
陈帅 committed
8 9
import GeographicView from './GeographicView';
import PhoneView from './PhoneView';
陈帅's avatar
陈帅 committed
10
import styles from './BaseView.less';
陈帅's avatar
陈帅 committed
11

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

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

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

陈帅's avatar
陈帅 committed
56
const validatorPhone = (rule: any, value: string, callback: (message?: string) => void) => {
陈帅's avatar
陈帅 committed
57 58 59 60 61 62 63 64 65 66
  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
67
interface BaseViewProps extends FormComponentProps {
68
  currentUser?: CurrentUser;
陈帅's avatar
陈帅 committed
69 70 71
}

@connect(({ BLOCK_NAME_CAMEL_CASE }: { BLOCK_NAME_CAMEL_CASE: { currentUser: CurrentUser } }) => ({
72
  currentUser: BLOCK_NAME_CAMEL_CASE.currentUser,
愚道's avatar
愚道 committed
73
}))
陈帅's avatar
陈帅 committed
74
class BaseView extends Component<BaseViewProps> {
陈帅's avatar
陈帅 committed
75 76 77
  componentDidMount() {
    this.setBaseInfo();
  }
陈帅's avatar
陈帅 committed
78

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

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

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

陈帅's avatar
陈帅 committed
106
  handlerSubmit = (event: React.MouseEvent) => {
107 108
    event.preventDefault();
    const { form } = this.props;
陈帅's avatar
陈帅 committed
109
    form.validateFields(err => {
110
      if (!err) {
111
        message.success(formatMessage({ id: 'BLOCK_NAME.basic.update.success' }));
112 113 114 115
      }
    });
  };

陈帅's avatar
陈帅 committed
116 117
  view: HTMLDivElement | undefined;

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

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