wot-design/lib/mixins/picker.js

Mobile UI components built on vue.js

"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 _pickerViewProps = _interopRequireDefault(require("wot-design/lib/picker-view/src/pickerViewProps"));

var _pickerProps = _interopRequireDefault(require("wot-design/lib/picker/src/pickerProps"));

var _locale = _interopRequireDefault(require("wot-design/lib/mixins/locale"));

var _default = {
  mixins: [_locale.default],
  data: function data() {
    return {
      currentTarget: this,
      showValue: '',
      lastColumns: [],
      popupShow: false
    };
  },
  props: (0, _extends2.default)({}, _pickerViewProps.default, _pickerProps.default),
  components: {
    CustomCell: {
      render: function render(h) {
        var parent = this.$parent;
        var disabled = parent.disabled,
            readonly = parent.readonly,
            labelWidth = parent.labelWidth,
            label = parent.label,
            value = parent.value,
            placeholder = parent.placeholder,
            showValue = parent.showValue,
            showPopup = parent.showPopup,
            required = parent.required,
            t = parent.t,
            arrowHtml = parent.arrowHtml,
            ellipsis = parent.ellipsis;
        var fieldClass = ['wd-picker__field']; // 右箭头

        var arrow = !disabled && !readonly ? h("i", {
          "class": 'wd-picker__arrow wd-icon-arrow-right'
        }) : '';
        var noValue = !value || value instanceof Array && !value.length; // 右侧展示值

        var valueLabel = (noValue ? placeholder : arrowHtml ? '' : showValue) || t('wd.picker.placeholder');
        var valueDiv;

        if (arrowHtml && !noValue) {
          valueDiv = h("div", {
            "class": ['wd-picker__value ', noValue ? 'wd-picker__placeholder' : ''],
            "domProps": {
              "innerHTML": showValue
            }
          }, [valueLabel]);
        } else {
          valueDiv = h("div", {
            "class": ['wd-picker__value ', noValue ? 'wd-picker__placeholder' : '', ellipsis ? 'is-ellipsis' : '']
          }, [valueLabel]);
        } // 左侧label


        var labelWrapper = label || parent.$slots.label ? h("div", {
          "class": ['wd-picker__label', required ? 'is-required' : ''],
          "style": labelWidth ? "min-width: " + labelWidth + "; max-width: " + labelWidth : ''
        }, [parent.$slots.label || h("div", [label])]) : ''; // 自定义cell

        var cell = parent.$slots.default || h("div", {
          "class": fieldClass
        }, [labelWrapper, valueDiv, arrow]);
        return h("div", {
          "on": {
            "click": showPopup
          }
        }, [cell]);
      }
    },
    toolbar: {
      props: {
        target: Object
      },
      render: function render(h) {
        var _this$target = this.target,
            onCancel = _this$target.onCancel,
            onConfirm = _this$target.onConfirm,
            cancelButtonText = _this$target.cancelButtonText,
            confirmButtonText = _this$target.confirmButtonText,
            title = _this$target.title,
            loading = _this$target.loading,
            t = _this$target.t;
        var cancelButton = h("span", {
          "class": "wd-picker__action wd-picker__action--cancel",
          "on": {
            "click": onCancel
          }
        }, [cancelButtonText || t('wd.picker.cancel')]);
        var confirmButton = h("span", {
          "on": {
            "click": loading ? function () {} : onConfirm
          },
          "class": ['wd-picker__action', loading ? 'is-loading' : '']
        }, [confirmButtonText || t('wd.picker.done')]);
        var titleBlock = title ? h("span", {
          "class": "wd-picker__title"
        }, [title]) : '';
        return h("div", {
          "class": "wd-picker__toolbar"
        }, [cancelButton, titleBlock, confirmButton]);
      }
    }
  },
  computed: {
    customClass: function customClass() {
      var rootClass = ['wd-picker'];
      this.error && rootClass.push('is-error');
      this.alignRight && rootClass.push('is-align-right');
      this.disabled && rootClass.push('is-disabled');
      this.size && rootClass.push("is-" + this.size);
      this.label | this.$slots.default && rootClass.push('is-cell');
      return rootClass.join(' ');
    }
  },
  methods: {
    showPopup: function showPopup() {
      if (this.disabled || this.readonly) return;
      this.showPopInit && this.showPopInit();
      this.popupShow = true;
    },
    closePopup: function closePopup() {
      this.popupShow = false;
    },
    getPickerView: function getPickerView() {
      return this.$refs.pickerView;
    }
  }
};
exports.default = _default;