zmp-vue/cjs/zalo-ui-kits/picker.js

Build full featured iOS & Android apps using ZMP & Vue

"use strict";

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

var _vue = require("vue");

var _input = _interopRequireDefault(require("./input"));

var _zmp = require("../shared/zmp");

var _props;

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

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

var _hoisted_1 = {
  ref: "el"
};

function render(_ctx, _cache) {
  var _component_Input = (0, _vue.resolveComponent)("Input");

  return (0, _vue.openBlock)(), (0, _vue.createBlock)("div", _hoisted_1, [(0, _vue.createVNode)(_component_Input, (0, _vue.mergeProps)(_ctx.$props, {
    type: "text",
    readonly: ""
  }), null, 16)], 512);
}

var _default2 = {
  name: 'zmp-picker',
  render: render,
  components: {
    Input: _input.default
  },
  props: (_props = {
    label: String,
    placeholder: String,
    title: String
  }, _props["label"] = String, _props.errorMessage = String, _props.errorMessageForce = Boolean, _props.required = Boolean, _props.info = String, _props.style = [String, Object], _props.data = Array, _props.defaultSelect = Array, _props.selected = String, _props.actionText = String, _props.formatValue = {
    type: Function,
    default: function _default(values, displayValues) {
      return displayValues[0];
    }
  }, _props),
  emits: ['action', 'change', 'cancel'],
  setup: function setup(props, _ref) {
    var attrs = _ref.attrs,
        emit = _ref.emit;
    var pickerDevice = (0, _vue.ref)(null);
    var el = (0, _vue.ref)();
    (0, _vue.onMounted)(function () {
      var placeholder = props.placeholder,
          _props$title = props.title,
          title = _props$title === void 0 ? '' : _props$title,
          inputId = props.inputId,
          _props$data = props.data,
          data = _props$data === void 0 ? [] : _props$data,
          defaultSelect = props.defaultSelect,
          selected = props.selected,
          _props$actionText = props.actionText,
          actionText = _props$actionText === void 0 ? 'Done' : _props$actionText,
          onChange = props.onChange,
          onCancel = props.onCancel,
          onClickAction = props.onClickAction,
          label = props.label,
          errorMessage = props.errorMessage,
          errorMessageForce = props.errorMessageForce,
          required = props.required,
          info = props.info,
          style = props.style,
          restProps = _objectWithoutPropertiesLoose(props, ["placeholder", "title", "inputId", "data", "defaultSelect", "selected", "actionText", "onChange", "onCancel", "onClickAction", "label", "errorMessage", "errorMessageForce", "required", "info", "style"]);

      pickerDevice.value = _zmp.zmp.picker.create(_extends({}, restProps, attrs, {
        inputEl: el.value.querySelector('input'),
        rotateEffect: false,
        backdrop: true,
        value: selected || defaultSelect,
        render: function render() {
          var _this = this;

          var columns = this.cols.map(function (col) {
            return _this.renderColumn(col);
          });
          var toolbar = this.params.toolbar && this.renderToolbar();
          var classes = this.params.cssClass || '';
          var renderEl = "<div class=\"sheet-modal picker picker-sheet " + classes + "\">\n<div class=\"zmp-picker-sheet-header\">\n  <a class=\"zmp-picker-close-btn link sheet-close popover-close no-ripple\" ></a>\n  " + (title ? "<div class=\"zmp-picker-sheet-title\">" + title + "</div>" : '') + "\n</div>\n<div class=\"sheet-modal-inner picker-columns\">\n  " + columns + "\n  <div class=\"picker-center-highlight\"></div>\n</div>\n  " + toolbar + "\n</div>";
          return renderEl;
        },
        renderToolbar: function renderToolbar() {
          return '<div class="toolbar">' + '<div class="toolbar-inner">' + '<div class="zmp-toolbar-center">' + ("<a href=\"#\" class=\"zmp-picker-action-button\">" + actionText + "</a>") + '</div>' + '</div>' + '</div>';
        },
        cols: data,
        on: {
          open: function open(picker) {
            picker.$el.find('.zmp-picker-action-button').on('click', function () {
              if (attrs.onAction) {
                emit('action', picker);
              } else {
                picker.close();
              }
            });
          },
          change: function change(picker, value, displayValue) {
            emit('change', picker, value, displayValue);
          },
          close: function close(picker) {
            emit('cancel', picker);
          }
        }
      }));
    });
    (0, _vue.onUnmounted)(function () {
      if (pickerDevice.value) {
        if (pickerDevice.value.opened) {
          pickerDevice.value.close();
        }

        pickerDevice.value.destroy();
      }

      pickerDevice.value = null;
    });
    return {
      el: el
    };
  }
};
exports.default = _default2;