SHARE
TWEET

Untitled

a guest Aug 26th, 2019 76 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import {
  2.     Form,
  3.     Input,
  4.     Tooltip,
  5.     Icon,
  6.     Cascader,
  7.     Select,
  8.     Row,
  9.     Col,
  10.     Checkbox,
  11.     Button,
  12.     AutoComplete,
  13. } from 'antd';
  14. import 'antd/dist/antd.css';
  15. import * as React from "react";
  16. import NavBar from "./NavBar";
  17. import fire from '../config/Fire';
  18. import connect from "react-redux/es/connect/connect";
  19. import {setNameAction} from "../redux_stuff/actionTypes";
  20. import {withRouter} from "react-router";
  21.  
  22. const {Option} = Select;
  23. const AutoCompleteOption = AutoComplete.Option;
  24.  
  25. const mapStateToProps = state => {
  26.     return { name: state.name }
  27. };
  28.  
  29. const plainOptions = ['Ethiopian', 'Chinese', 'Indian', 'American'];
  30.  
  31. class Profile extends React.Component {
  32.     state = {
  33.         confirmDirty: false,
  34.         autoCompleteResult: [],
  35.     };
  36.  
  37.     handleSubmit = e => {
  38.         e.preventDefault();
  39.         this.props.form.validateFieldsAndScroll((err, values) => {
  40.             if (!err) {
  41.                 console.log('Received values of form: ', values);
  42.             }
  43.         });
  44.     };
  45.  
  46.     handleConfirmBlur = e => {
  47.         const {value} = e.target;
  48.         this.setState({confirmDirty: this.state.confirmDirty || !!value});
  49.     };
  50.  
  51.  
  52.     render() {
  53.         const {getFieldDecorator} = this.props.form;
  54.         const {autoCompleteResult} = this.state;
  55.         console.log("[Profile.js] .user: " + fire.auth().currentUser);
  56.  
  57.         const formItemLayout = {
  58.             labelCol: {
  59.                 xs: {span: 24},
  60.                 sm: {span: 4},
  61.             },
  62.             wrapperCol: {
  63.                 xs: {span: 24},
  64.                 sm: {span: 16},
  65.             },
  66.         };
  67.         const tailFormItemLayout = {
  68.             wrapperCol: {
  69.                 xs: {
  70.                     span: 24,
  71.                     offset: 0,
  72.                 },
  73.                 sm: {
  74.                     span: 16,
  75.                     offset: 8,
  76.                 },
  77.             },
  78.         };
  79.  
  80.         const validate = () => {
  81.             const {validateFieldsAndScroll} = this.props.form;
  82.             validateFieldsAndScroll((err, values) => {
  83.                 console.log(values);
  84.             });
  85.         };
  86.  
  87.         return (
  88.             <div>
  89.                 <NavBar/>
  90.                 <Form {...formItemLayout} onSubmit={this.handleSubmit}>
  91.                     <Form.Item
  92.                         label={
  93.                             <span>
  94.               First Name&nbsp;
  95.             </span>
  96.                         }
  97.                     >
  98.                         {getFieldDecorator('firstName', {
  99.                             rules: [{required: true, message: 'Please input your first name!', whitespace: true}],
  100.                         })(<Input/>)}
  101.                     </Form.Item>
  102.                     <Form.Item
  103.                         label={
  104.                             <span>
  105.              Last Name&nbsp;
  106.             </span>
  107.                         }
  108.                     >
  109.                         {getFieldDecorator('lasttName', {
  110.                             rules: [{required: true, message: 'Please input your last name!', whitespace: true}],
  111.                         })(<Input/>)}
  112.                     </Form.Item>
  113.                     <Form.Item
  114.                         label={
  115.                             <span>
  116.               Nickname&nbsp;
  117.                                 <Tooltip title="What do you want others to call you?">
  118.                 <Icon type="question-circle-o"/>
  119.               </Tooltip>
  120.             </span>
  121.                         }
  122.                     >
  123.                         {getFieldDecorator('nickname', {
  124.                             rules: [{required: false, message: 'Please input your nickname!', whitespace: true}],
  125.                         })(<Input/>)}
  126.                     </Form.Item>
  127.                     <Form.Item label="Habitual Residence">
  128.                         {getFieldDecorator('residence', {
  129.                             rules: [
  130.                                 {required: true, message: 'Please select your habitual residence!'},
  131.                             ],
  132.                         })(<Input/>)}
  133.                     </Form.Item>
  134.                     <Form.Item {...tailFormItemLayout}>
  135.                         {getFieldDecorator('types', {
  136.                             valuePropName: 'checked',
  137.                         })(
  138.                             <Checkbox.Group options={plainOptions} defaultValue={['']}/>
  139.                             ,
  140.                         )}
  141.                     </Form.Item>
  142.                     <Form.Item {...tailFormItemLayout}>
  143.                         <Button type="primary" htmlType="submit" onClick={this.validate}>
  144.                             Save
  145.                         </Button>
  146.                     </Form.Item>
  147.                 </Form>
  148.                 {this.props.name}
  149.             </div>
  150.         );
  151.     }
  152. }
  153.  
  154. //export default Form.create({name: 'register'})(Profile);
  155. export default Form.create({name: 'register'})(connect(mapStateToProps, {setNameAction}))(Profile);
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top