Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import {
- Form,
- Input,
- Tooltip,
- Icon,
- Cascader,
- Select,
- Row,
- Col,
- Checkbox,
- Button,
- AutoComplete,
- } from 'antd';
- import 'antd/dist/antd.css';
- import * as React from "react";
- import NavBar from "./NavBar";
- import fire from '../config/Fire';
- import connect from "react-redux/es/connect/connect";
- import {setNameAction} from "../redux_stuff/actionTypes";
- import {withRouter} from "react-router";
- const {Option} = Select;
- const AutoCompleteOption = AutoComplete.Option;
- const mapStateToProps = state => {
- return { name: state.name }
- };
- const plainOptions = ['Ethiopian', 'Chinese', 'Indian', 'American'];
- class Profile extends React.Component {
- state = {
- confirmDirty: false,
- autoCompleteResult: [],
- };
- handleSubmit = e => {
- e.preventDefault();
- this.props.form.validateFieldsAndScroll((err, values) => {
- if (!err) {
- console.log('Received values of form: ', values);
- }
- });
- };
- handleConfirmBlur = e => {
- const {value} = e.target;
- this.setState({confirmDirty: this.state.confirmDirty || !!value});
- };
- render() {
- const {getFieldDecorator} = this.props.form;
- const {autoCompleteResult} = this.state;
- console.log("[Profile.js] .user: " + fire.auth().currentUser);
- const formItemLayout = {
- labelCol: {
- xs: {span: 24},
- sm: {span: 4},
- },
- wrapperCol: {
- xs: {span: 24},
- sm: {span: 16},
- },
- };
- const tailFormItemLayout = {
- wrapperCol: {
- xs: {
- span: 24,
- offset: 0,
- },
- sm: {
- span: 16,
- offset: 8,
- },
- },
- };
- const validate = () => {
- const {validateFieldsAndScroll} = this.props.form;
- validateFieldsAndScroll((err, values) => {
- console.log(values);
- });
- };
- return (
- <div>
- <NavBar/>
- <Form {...formItemLayout} onSubmit={this.handleSubmit}>
- <Form.Item
- label={
- <span>
- First Name
- </span>
- }
- >
- {getFieldDecorator('firstName', {
- rules: [{required: true, message: 'Please input your first name!', whitespace: true}],
- })(<Input/>)}
- </Form.Item>
- <Form.Item
- label={
- <span>
- Last Name
- </span>
- }
- >
- {getFieldDecorator('lasttName', {
- rules: [{required: true, message: 'Please input your last name!', whitespace: true}],
- })(<Input/>)}
- </Form.Item>
- <Form.Item
- label={
- <span>
- Nickname
- <Tooltip title="What do you want others to call you?">
- <Icon type="question-circle-o"/>
- </Tooltip>
- </span>
- }
- >
- {getFieldDecorator('nickname', {
- rules: [{required: false, message: 'Please input your nickname!', whitespace: true}],
- })(<Input/>)}
- </Form.Item>
- <Form.Item label="Habitual Residence">
- {getFieldDecorator('residence', {
- rules: [
- {required: true, message: 'Please select your habitual residence!'},
- ],
- })(<Input/>)}
- </Form.Item>
- <Form.Item {...tailFormItemLayout}>
- {getFieldDecorator('types', {
- valuePropName: 'checked',
- })(
- <Checkbox.Group options={plainOptions} defaultValue={['']}/>
- ,
- )}
- </Form.Item>
- <Form.Item {...tailFormItemLayout}>
- <Button type="primary" htmlType="submit" onClick={this.validate}>
- Save
- </Button>
- </Form.Item>
- </Form>
- {this.props.name}
- </div>
- );
- }
- }
- //export default Form.create({name: 'register'})(Profile);
- export default Form.create({name: 'register'})(connect(mapStateToProps, {setNameAction}))(Profile);
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement