zmp-vue/cjs/zalo-ui-kits/date-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 _listInput = _interopRequireDefault(require("./list-input"));

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

var _dateTime = _interopRequireDefault(require("../../common/date-time"));

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); }

var _hoisted_1 = {
  ref: "el"
};

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

  var _component_Input = (0, _vue.resolveComponent)("Input");

  return (0, _vue.openBlock)(), (0, _vue.createBlock)("div", _hoisted_1, [_ctx.listInput ? ((0, _vue.openBlock)(), (0, _vue.createBlock)(_component_ListInput, (0, _vue.mergeProps)({
    key: 0
  }, _extends({}, _ctx.$props, _ctx.$attrs), {
    type: "text",
    readonly: "",
    placeholder: _ctx.inputPlaceHolder
  }), null, 16, ["placeholder"])) : ((0, _vue.openBlock)(), (0, _vue.createBlock)(_component_Input, (0, _vue.mergeProps)({
    key: 1
  }, _extends({}, _ctx.$props, _ctx.$attrs), {
    type: "text",
    readonly: "",
    placeholder: _ctx.inputPlaceHolder
  }), null, 16, ["placeholder"]))], 512);
}

var _default = {
  name: 'zmp-date-picker',
  render: render,
  components: {
    Input: _input.default,
    ListInput: _listInput.default
  },
  props: {
    actionText: String,
    title: String,
    inputId: String,
    name: String,
    locale: String,
    dateFormat: String,
    dateTimePicker: Boolean,
    datePicker: Boolean,
    startYear: Number,
    endYear: Number,
    minStep: Number,
    listInput: Boolean,
    is24Hours: Boolean,
    label: String,
    value: Date,
    defaultValue: Date,
    inputmode: String,
    placeholder: String,
    autofocus: Boolean,
    autosave: String,
    disabled: Boolean,
    readonly: Boolean,
    required: Boolean,
    pattern: String,
    validate: [Boolean, String],
    validateOnBlur: Boolean,
    onValidate: Function,
    clearButton: Boolean,
    noFormStoreData: Boolean,
    noStoreData: Boolean,
    ignoreStoreData: Boolean,
    errorMessage: String,
    errorMessageForce: Boolean,
    info: String,
    wrap: Boolean,
    inputStyle: [String, Object]
  },
  emits: ['action', 'change', 'close', 'open'],
  setup: function setup(props, _ref) {
    var emit = _ref.emit,
        attrs = _ref.attrs;
    var el = (0, _vue.ref)();
    var pickerRef = (0, _vue.ref)();
    var dateTimeInstance = (0, _vue.ref)();
    (0, _vue.onMounted)(function () {
      (0, _zmp.zmpready)(function () {
        var actionText = props.actionText,
            title = props.title,
            value = props.value,
            defaultValue = props.defaultValue,
            locale = props.locale,
            dateFormat = props.dateFormat,
            dateTimePicker = props.dateTimePicker,
            datePicker = props.datePicker,
            startYear = props.startYear,
            endYear = props.endYear,
            minStep = props.minStep,
            placeholder = props.placeholder,
            is24Hours = props.is24Hours;
        var pickerTitle = '';
        var actionButtonText = actionText || 'Done';

        if (title) {
          pickerTitle = title;
        } else if (dateTimePicker) {
          pickerTitle = 'Date Time Picker';
        } else {
          pickerTitle = 'Date Picker';
        }

        dateTimeInstance.value = new _dateTime.default({
          locale: locale,
          dateTimePicker: dateTimePicker,
          datePicker: datePicker,
          dateFormat: dateFormat,
          startYear: Number(startYear),
          endYear: Number(endYear),
          minStep: minStep,
          defaultValue: defaultValue,
          value: value,
          is24Hours: is24Hours
        });
        var instance = dateTimeInstance.value;
        var initDate = defaultValue || value || new Date();
        var cols = instance.columns || [];
        pickerRef.value = _zmp.zmp.picker.create(_extends({}, props, {
          value: undefined,
          inputEl: el.value.querySelector('input'),
          rotateEffect: false,
          backdrop: true,
          formatValue: function formatValue() {
            var date = instance.getValue();
            return instance.formatDate(date);
          },
          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                              " + (pickerTitle ? "<div class=\"zmp-picker-sheet-title\">" + pickerTitle + "</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\">" + actionButtonText + "</a>") + '</div>' + '</div>' + '</div>';
          },
          cols: cols,
          on: {
            init: function init(picker) {
              instance.setInitializing(true);
              instance.setDate(initDate);

              if (defaultValue || value) {
                var values = instance.getPickerValues();
                picker.setValue(values);
              }
            },
            open: function open(picker) {
              emit('open', picker);

              if (!value && !defaultValue) {
                var values = instance.getPickerValues();
                picker.setValue(values);
              }

              instance.setInitializing(false);
              picker.emit('change', picker, instance.getPickerValues());
              picker.$el.find('.zmp-picker-action-button').on('click', function () {
                if (attrs.onAction) {
                  emit('action', picker);
                } else {
                  picker.close();
                }
              });
            },
            change: function change(_ref2) {
              var value = _ref2.value;

              if (instance.isUpdating || instance.initializing) {
                return;
              }

              instance.setValue(value);
              emit('change', value, pickerRef.value, instance.getPickerValues());
            },
            close: function close(picker) {
              emit('close', picker);
            }
          }
        }));
      });
    });
    (0, _vue.onUnmounted)(function () {
      pickerRef.value.destroy();
    });
    var inputPlaceHolder = (0, _vue.computed)(function () {
      var inputPlaceHolder = props.dateTimePicker ? 'dd/mm/yyyy hh:mm' : 'dd/mm/yyyy';

      if (props.dateFormat) {
        inputPlaceHolder = props.dateFormat;
      }

      if (props.placeholder) {
        inputPlaceHolder = props.placeholder;
      }

      return inputPlaceHolder;
    });
    return {
      el: el,
      inputPlaceHolder: inputPlaceHolder
    };
  }
};
exports.default = _default;