vue-ant-patterns/lib/d-login/Form.js

vue-ant-patterns

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _defineProperty2 = require('babel-runtime/helpers/defineProperty');

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _antDesignVue = require('ant-design-vue');

var _defaultProps = require('./defaultProps');

var _defaultProps2 = _interopRequireDefault(_defaultProps);

var _en_US = require('./locale/en_US');

var _en_US2 = _interopRequireDefault(_en_US);

var _zh_CN = require('./locale/zh_CN');

var _zh_CN2 = _interopRequireDefault(_zh_CN);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

var langType = {
  'zh-cn': _zh_CN2['default'],
  cn: _zh_CN2['default'],
  'en-us': _en_US2['default'],
  en: _en_US2['default']
};

var FormItem = _antDesignVue.Form.Item;


var InputIcon = {
  name: 'input-icon',
  functional: true,
  render: function render(h, context) {
    return h(_antDesignVue.Icon, (0, _extends3['default'])({}, context, {
      'class': 'input-icon',
      slot: 'prefix'
    }));
  }
};

var LoginForm = _antDesignVue.Form.create()({
  props: (0, _extends3['default'])({}, _defaultProps2['default']),
  components: (0, _defineProperty3['default'])({}, InputIcon.name, InputIcon),
  data: function data() {
    return {};
  },

  computed: {},
  watch: {
    locale: function locale(v, nv) {
      if (v.locale !== nv.locale) {
        this.$props.form.resetFields();
      }
      // this.$props.form.resetFields();
    }
  },
  methods: {
    handleSubmit: function handleSubmit(e) {
      e.preventDefault();
      var _$props = this.$props,
          form = _$props.form,
          onSubmit = _$props.onSubmit,
          success = _$props.success,
          error = _$props.error;

      this.$props.form.validateFields(null, { force: true }, function (err, values) {
        if (!err) {
          onSubmit({ values: values });
          return;
        }
        // if (err) {
        //   console.log('err::', err);
        //   error({err});
        // }
      });
    }
  },
  mounted: function mounted() {
    this.$emit('formCreated', this.$props.form);
  },
  render: function render() {
    var h = arguments[0];
    var $props = this.$props,
        handleSubmit = this.handleSubmit;
    var prefixCls = $props.prefixCls,
        locale = $props.locale,
        form = $props.form,
        nameRule = $props.nameRule,
        passRule = $props.passRule,
        isLoading = $props.isLoading;
    var getFieldDecorator = form.getFieldDecorator;


    var cls = (0, _classnames2['default'])((0, _defineProperty3['default'])({}, prefixCls, 1));

    var formProps = {
      'class': cls,
      on: {
        submit: handleSubmit
      }
    };
    var buttonProps = {
      props: {
        loading: isLoading,
        type: 'primary',
        htmlType: 'submit'
      },
      'class': 'login-form-button'
    };
    var lang = locale.locale || 'zh-cn';

    var ruleLang = langType[lang];

    var userNameRule = (0, _extends3['default'])({}, ruleLang.rules.username || {}, nameRule);

    var passwordRule = (0, _extends3['default'])({}, ruleLang.rules.password || {}, passRule);

    return h(
      _antDesignVue.Form,
      formProps,
      [h(FormItem, [getFieldDecorator('username', {
        rules: [(0, _extends3['default'])({}, userNameRule)]
      })(h(
        _antDesignVue.Input,
        {
          attrs: { placeholder: locale.username, autocomplete: 'off' }
        },
        [h(InputIcon, {
          attrs: { type: 'user' }
        })]
      ))]), h(FormItem, [getFieldDecorator('password', {
        rules: [(0, _extends3['default'])({}, passwordRule)]
      })(h(
        _antDesignVue.Input,
        {
          attrs: { type: 'password', placeholder: locale.password, autocomplete: 'off' }
        },
        [h(InputIcon, {
          attrs: { type: 'lock' }
        })]
      ))]), h(FormItem, [h(
        _antDesignVue.Button,
        buttonProps,
        [locale.ok]
      )])]
    );
  }
});
exports['default'] = LoginForm;