vant-fork/lib/address-edit/index.js

Lightweight Mobile UI Components built on Vue

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _create = _interopRequireDefault(require("../utils/create"));

var _utils = require("../utils");

var _field = _interopRequireDefault(require("../field"));

var _button = _interopRequireDefault(require("../button"));

var _popup = _interopRequireDefault(require("../popup"));

var _toast = _interopRequireDefault(require("../toast"));

var _dialog = _interopRequireDefault(require("../dialog"));

var _area = _interopRequireDefault(require("../area"));

var _Detail = _interopRequireDefault(require("./Detail"));

var _switchCell = _interopRequireDefault(require("../switch-cell"));

var _mobile = _interopRequireDefault(require("../utils/validate/mobile"));

/* eslint-disable camelcase */
var defaultData = {
  name: '',
  tel: '',
  province: '',
  city: '',
  county: '',
  areaCode: '',
  postalCode: '',
  addressDetail: '',
  isDefault: false
};

var _default2 = (0, _create.default)({
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

    var _c = _vm._self._c || _h;

    return _c('div', {
      class: _vm.b()
    }, [_c('cell-group', [_c('field', {
      attrs: {
        "clearable": "",
        "maxlength": "15",
        "label": _vm.$t('name'),
        "placeholder": _vm.$t('namePlaceholder'),
        "error": _vm.errorInfo.name
      },
      on: {
        "focus": function focus($event) {
          _vm.onFocus('name');
        }
      },
      model: {
        value: _vm.data.name,
        callback: function callback($$v) {
          _vm.$set(_vm.data, "name", $$v);
        },
        expression: "data.name"
      }
    }), _c('field', {
      attrs: {
        "clearable": "",
        "type": "tel",
        "label": _vm.$t('tel'),
        "placeholder": _vm.$t('telPlaceholder'),
        "error": _vm.errorInfo.tel
      },
      on: {
        "focus": function focus($event) {
          _vm.onFocus('tel');
        }
      },
      model: {
        value: _vm.data.tel,
        callback: function callback($$v) {
          _vm.$set(_vm.data, "tel", $$v);
        },
        expression: "data.tel"
      }
    }), _c('field', {
      directives: [{
        name: "show",
        rawName: "v-show",
        value: _vm.showArea,
        expression: "showArea"
      }],
      attrs: {
        "readonly": "",
        "label": _vm.$t('area'),
        "placeholder": _vm.$t('areaPlaceholder'),
        "value": _vm.areaText
      },
      on: {
        "click": function click($event) {
          _vm.showAreaPopup = true;
        }
      }
    }), _c('address-edit-detail', {
      directives: [{
        name: "show",
        rawName: "v-show",
        value: _vm.showDetail,
        expression: "showDetail"
      }],
      attrs: {
        "focused": _vm.detailFocused,
        "value": _vm.data.addressDetail,
        "error": _vm.errorInfo.addressDetail,
        "detail-rows": _vm.detailRows,
        "search-result": _vm.searchResult,
        "show-search-result": _vm.showSearchResult
      },
      on: {
        "focus": function focus($event) {
          _vm.onFocus('addressDetail');
        },
        "blur": function blur($event) {
          _vm.detailFocused = false;
        },
        "input": _vm.onChangeDetail,
        "select-search": function selectSearch($event) {
          _vm.$emit('select-search', $event);
        }
      }
    }), _vm.showPostal ? _c('field', {
      directives: [{
        name: "show",
        rawName: "v-show",
        value: !_vm.hideBottomFields,
        expression: "!hideBottomFields"
      }],
      attrs: {
        "type": "tel",
        "maxlength": "6",
        "label": _vm.$t('postal'),
        "placeholder": _vm.$t('postal'),
        "error": _vm.errorInfo.postalCode
      },
      on: {
        "focus": function focus($event) {
          _vm.onFocus('postalCode');
        }
      },
      model: {
        value: _vm.data.postalCode,
        callback: function callback($$v) {
          _vm.$set(_vm.data, "postalCode", $$v);
        },
        expression: "data.postalCode"
      }
    }) : _vm._e(), _vm._t("default"), _vm.showSetDefault ? _c('switch-cell', {
      directives: [{
        name: "show",
        rawName: "v-show",
        value: !_vm.hideBottomFields,
        expression: "!hideBottomFields"
      }],
      attrs: {
        "title": _vm.$t('defaultAddress')
      },
      model: {
        value: _vm.data.isDefault,
        callback: function callback($$v) {
          _vm.$set(_vm.data, "isDefault", $$v);
        },
        expression: "data.isDefault"
      }
    }) : _vm._e()], 2), _c('div', {
      directives: [{
        name: "show",
        rawName: "v-show",
        value: !_vm.hideBottomFields,
        expression: "!hideBottomFields"
      }],
      class: _vm.b('buttons')
    }, [_c('van-button', {
      attrs: {
        "block": "",
        "loading": _vm.isSaving,
        "type": "danger"
      },
      on: {
        "click": _vm.onSave
      }
    }, [_vm._v("\n      " + _vm._s(_vm.saveButtonText || _vm.$t('save')) + "\n    ")]), _vm.showDelete ? _c('van-button', {
      attrs: {
        "block": "",
        "loading": _vm.isDeleting
      },
      on: {
        "click": _vm.onDelete
      }
    }, [_vm._v("\n      " + _vm._s(_vm.deleteButtonText || _vm.$t('delete')) + "\n    ")]) : _vm._e()], 1), _c('popup', {
      attrs: {
        "position": "bottom",
        "lazy-render": false,
        "get-container": _vm.getAreaContainer
      },
      model: {
        value: _vm.showAreaPopup,
        callback: function callback($$v) {
          _vm.showAreaPopup = $$v;
        },
        expression: "showAreaPopup"
      }
    }, [_c('van-area', {
      ref: "area",
      attrs: {
        "loading": !_vm.areaListLoaded,
        "value": _vm.data.areaCode,
        "area-list": _vm.areaList
      },
      on: {
        "confirm": _vm.onAreaConfirm,
        "cancel": function cancel($event) {
          _vm.showAreaPopup = false;
        }
      }
    })], 1)], 1);
  },
  name: 'address-edit',
  components: {
    Field: _field.default,
    Popup: _popup.default,
    VanArea: _area.default,
    VanButton: _button.default,
    SwitchCell: _switchCell.default,
    AddressEditDetail: _Detail.default
  },
  props: {
    areaList: Object,
    isSaving: Boolean,
    isDeleting: Boolean,
    showDelete: Boolean,
    showPostal: Boolean,
    showSetDefault: Boolean,
    showSearchResult: Boolean,
    saveButtonText: String,
    deleteButtonText: String,
    showArea: {
      type: Boolean,
      default: true
    },
    showDetail: {
      type: Boolean,
      default: true
    },
    detailRows: {
      type: Number,
      default: 1
    },
    addressInfo: {
      type: Object,
      default: function _default() {
        return (0, _extends2.default)({}, defaultData);
      }
    },
    searchResult: {
      type: Array,
      default: function _default() {
        return [];
      }
    },
    telValidator: {
      type: Function,
      default: _mobile.default
    }
  },
  data: function data() {
    return {
      data: {},
      showAreaPopup: false,
      detailFocused: false,
      errorInfo: {
        tel: false,
        name: false,
        postalCode: false,
        addressDetail: false
      }
    };
  },
  computed: {
    // hide bottom field when use search && detail get focused
    hideBottomFields: function hideBottomFields() {
      return this.searchResult.length && this.detailFocused;
    },
    areaListLoaded: function areaListLoaded() {
      return (0, _utils.isObj)(this.areaList) && Object.keys(this.areaList).length;
    },
    areaText: function areaText() {
      var _this$data = this.data,
          province = _this$data.province,
          city = _this$data.city,
          county = _this$data.county,
          areaCode = _this$data.areaCode;

      if (areaCode) {
        var arr = [province, city, county].filter(function (text) {
          return text;
        });

        if (province === city) {
          arr.shift();
        }

        return arr.join('/');
      }

      return '';
    }
  },
  watch: {
    addressInfo: {
      handler: function handler(val) {
        this.data = (0, _extends2.default)({}, defaultData, val);
        this.setAreaCode(val.areaCode);
      },
      deep: true,
      immediate: true
    },
    areaList: function areaList() {
      this.setAreaCode(this.data.areaCode);
    }
  },
  methods: {
    onFocus: function onFocus(key) {
      this.errorInfo[key] = false;
      this.detailFocused = key === 'addressDetail';
      this.$emit('focus', key);
    },
    onChangeDetail: function onChangeDetail(val) {
      this.data.addressDetail = val;
      this.$emit('change-detail', val);
    },
    onAreaConfirm: function onAreaConfirm(values) {
      var areaCode = (values[2] || values[1] || values[0]).code;
      this.showAreaPopup = false;
      this.data.areaCode = areaCode;
      this.assignAreaValues(values);
      this.$emit('change-area', values);
    },
    assignAreaValues: function assignAreaValues(values) {
      (0, _extends2.default)(this.data, {
        province: values[0] ? values[0].name : '',
        city: values[1] ? values[1].name : '',
        county: values[2] ? values[2].name : ''
      });
    },
    onSave: function onSave() {
      var _this = this;

      var items = ['name', 'tel', 'areaCode', 'addressDetail'];

      if (this.showPostal) {
        items.push('postalCode');
      }

      var isValid = items.every(function (item) {
        var msg = _this.getErrorMessage(item);

        if (msg) {
          _this.errorInfo[item] = true;
          (0, _toast.default)(msg);
        }

        return !msg;
      });

      if (isValid && !this.isSaving) {
        this.$emit('save', this.data);
      }
    },
    getErrorMessage: function getErrorMessage(key) {
      var value = String(this.data[key]).trim();
      var $t = this.$t;

      switch (key) {
        case 'name':
          return value ? '' : $t('nameEmpty');

        case 'tel':
          return this.telValidator(value) ? '' : $t('telInvalid');

        case 'areaCode':
          return value ? '' : $t('areaEmpty');

        case 'addressDetail':
          return value ? '' : $t('addressEmpty');

        case 'postalCode':
          return value && !/^\d{6}$/.test(value) ? $t('postalEmpty') : '';
      }
    },
    onDelete: function onDelete() {
      var _this2 = this;

      _dialog.default.confirm({
        title: this.$t('confirmDelete')
      }).then(function () {
        _this2.$emit('delete', _this2.data);
      }).catch(function () {
        _this2.$emit('cancel-delete', _this2.data);
      });
    },
    // get values of area component
    getArea: function getArea() {
      return this.$refs.area ? this.$refs.area.getValues() : [];
    },
    // set area code to area component
    setAreaCode: function setAreaCode(code) {
      var _this3 = this;

      this.data.areaCode = code || '';
      this.$nextTick(function () {
        var area = _this3.$refs.area;

        if (area) {
          _this3.assignAreaValues(area.getValues());
        }
      });
    },
    setAddressDetail: function setAddressDetail(value) {
      this.data.addressDetail = value;
    },
    getAreaContainer: function getAreaContainer() {
      return document.body;
    }
  }
});

exports.default = _default2;