xdesign-vue-next/cjs/date-picker/hooks/useRange.js

XDesign Component for vue-next

/**
 * xdesign v1.0.6
 * (c) 2023 xdesign
 * @license MIT
 */

'use strict';

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

var calendarLine = require('../../_chunks/dep-d7d47496.js');
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var vue = require('vue');
var hooks_tnode = require('../../hooks/tnode.js');
var hooks_useConfig = require('../../hooks/useConfig.js');
var _common_js_datePicker_format = require('../../_common/js/date-picker/format.js');
var datePicker_hooks_useRangeValue = require('./useRangeValue.js');
var configProvider_useConfig = require('../../config-provider/useConfig.js');
require('lodash/isFunction');
require('lodash/camelCase');
require('lodash/kebabCase');
require('../../utils/render-tnode.js');
require('lodash/isEmpty');
require('lodash/isString');
require('lodash/isObject');
require('lodash/cloneDeep');
require('../../config-provider/context.js');
require('lodash/mergeWith');
require('lodash/merge');
require('../../_common/js/global-config/default-config.js');
require('../../_common/js/global-config/locale/en_US.js');
require('../../_chunks/dep-8d10b59f.js');
require('lodash/isArray');
require('dayjs');
require('../../_common/js/date-picker/utils.js');
require('@babel/runtime/helpers/slicedToArray');
require('@babel/runtime/helpers/objectDestructuringEmpty');
require('@babel/runtime/helpers/extends');
require('../../_chunks/dep-10196b34.js');
require('lodash/chunk');
require('../../_common/js/log/log.js');
require('../../hooks/useVModel.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var PARTIAL_MAP = {
  first: "start",
  second: "end"
};
function useRange(props) {
  var COMPONENT_NAME = hooks_useConfig.usePrefixClass("date-range-picker");
  var _useConfig = configProvider_useConfig.useConfig("datePicker"),
    globalConfig = _useConfig.globalConfig;
  var renderTNodeJSX = hooks_tnode.useTNodeJSX();
  var isMountedRef = vue.ref(false);
  var inputRef = vue.ref();
  var _useRangeValue = datePicker_hooks_useRangeValue["default"](props),
    value = _useRangeValue.value,
    onChange = _useRangeValue.onChange,
    time = _useRangeValue.time,
    month = _useRangeValue.month,
    year = _useRangeValue.year,
    cacheValue = _useRangeValue.cacheValue,
    isFirstValueSelected = _useRangeValue.isFirstValueSelected;
  var formatRef = vue.computed(function () {
    return _common_js_datePicker_format.getDefaultFormat({
      mode: props.mode,
      format: props.format,
      valueType: props.valueType,
      enableTimePicker: props.enableTimePicker
    });
  });
  var popupVisible = vue.ref(false);
  var isHoverCell = vue.ref(false);
  var activeIndex = vue.ref(0);
  var inputValue = vue.ref(_common_js_datePicker_format.formatDate(props.value, {
    format: formatRef.value.format
  }));
  var rangeInputProps = vue.computed(function () {
    return _objectSpread(_objectSpread({}, props.rangeInputProps), {}, {
      size: props.size,
      ref: inputRef,
      clearable: props.clearable,
      prefixIcon: function prefixIcon() {
        return renderTNodeJSX("prefixIcon");
      },
      readonly: !props.allowInput,
      separator: props.separator || globalConfig.value.rangeSeparator,
      placeholder: props.placeholder || globalConfig.value.placeholder[props.mode],
      activeIndex: popupVisible.value ? activeIndex.value : void 0,
      suffixIcon: function suffixIcon() {
        return renderTNodeJSX("suffixIcon") || vue.createVNode(calendarLine.__unplugin_components_0, null, null);
      },
      "class": _defineProperty__default["default"]({}, "".concat(COMPONENT_NAME.value, "__input--placeholder"), isHoverCell.value),
      onClick: function onClick(_ref) {
        var position = _ref.position;
        activeIndex.value = position === "first" ? 0 : 1;
      },
      onClear: function onClear(_ref2) {
        var e = _ref2.e;
        e.stopPropagation();
        popupVisible.value = false;
        onChange === null || onChange === void 0 ? void 0 : onChange([], {
          dayjsValue: [],
          trigger: "clear"
        });
      },
      onBlur: function onBlur(newVal, _ref3) {
        var _props$onBlur;
        var e = _ref3.e,
          position = _ref3.position;
        (_props$onBlur = props.onBlur) === null || _props$onBlur === void 0 ? void 0 : _props$onBlur.call(props, {
          value: newVal,
          partial: PARTIAL_MAP[position],
          e: e
        });
      },
      onFocus: function onFocus(newVal, _ref4) {
        var _props$onFocus;
        var e = _ref4.e,
          position = _ref4.position;
        (_props$onFocus = props.onFocus) === null || _props$onFocus === void 0 ? void 0 : _props$onFocus.call(props, {
          value: newVal,
          partial: PARTIAL_MAP[position],
          e: e
        });
        activeIndex.value = position === "first" ? 0 : 1;
      },
      onChange: function onChange(newVal, _ref5) {
        _ref5.e;
          _ref5.position;
        inputValue.value = newVal;
        if (!_common_js_datePicker_format.isValidDate(newVal, formatRef.value.format)) return;
        cacheValue.value = newVal;
        var newYear = [];
        var newMonth = [];
        var newTime = [];
        newVal.forEach(function (v) {
          newYear.push(_common_js_datePicker_format.parseToDayjs(v, formatRef.value.format).year());
          newMonth.push(_common_js_datePicker_format.parseToDayjs(v, formatRef.value.format).month());
          newTime.push(_common_js_datePicker_format.parseToDayjs(v, formatRef.value.format).format(formatRef.value.timeFormat));
        });
        year.value = newYear;
        month.value = newMonth;
        time.value = newTime;
      },
      onEnter: function onEnter(newVal) {
        if (!_common_js_datePicker_format.isValidDate(newVal, formatRef.value.format) && !_common_js_datePicker_format.isValidDate(value.value, formatRef.value.format)) return;
        popupVisible.value = false;
        if (_common_js_datePicker_format.isValidDate(newVal, formatRef.value.format)) {
          onChange === null || onChange === void 0 ? void 0 : onChange(_common_js_datePicker_format.formatDate(newVal, {
            format: formatRef.value.format,
            targetFormat: formatRef.value.valueType,
            autoSwap: true
          }), {
            dayjsValue: newVal.map(function (v) {
              return _common_js_datePicker_format.parseToDayjs(v, formatRef.value.format);
            }),
            trigger: "enter"
          });
        } else if (_common_js_datePicker_format.isValidDate(value.value, formatRef.value.format)) {
          inputValue.value = _common_js_datePicker_format.formatDate(value.value, {
            format: formatRef.value.format
          });
        } else {
          inputValue.value = [];
        }
      }
    });
  });
  var popupProps = vue.computed(function () {
    var _props$popupProps$ove, _props$popupProps, _props$popupProps2;
    return _objectSpread(_objectSpread({
      expandAnimation: true
    }, props.popupProps), {}, {
      overlayInnerStyle: (_props$popupProps$ove = (_props$popupProps = props.popupProps) === null || _props$popupProps === void 0 ? void 0 : _props$popupProps.overlayInnerStyle) !== null && _props$popupProps$ove !== void 0 ? _props$popupProps$ove : {
        width: "auto"
      },
      overlayClassName: [(_props$popupProps2 = props.popupProps) === null || _props$popupProps2 === void 0 ? void 0 : _props$popupProps2.overlayClassName, "".concat(COMPONENT_NAME.value, "__panel-container")],
      onVisibleChange: function onVisibleChange(visible, context) {
        var _props$popupProps3, _props$popupProps3$on;
        (_props$popupProps3 = props.popupProps) === null || _props$popupProps3 === void 0 || (_props$popupProps3$on = _props$popupProps3.onVisibleChange) === null || _props$popupProps3$on === void 0 ? void 0 : _props$popupProps3$on.call(_props$popupProps3, visible, context);
        if (context.trigger === "trigger-element-click") {
          var indexMap = {
            0: "first",
            1: "second"
          };
          inputRef.value.focus({
            position: indexMap[activeIndex.value]
          });
          popupVisible.value = true;
          return;
        }
        popupVisible.value = visible;
      }
    });
  });
  vue.watch(value, function (value2) {
    if (!value2) {
      inputValue.value = [];
      return;
    }
    if (!_common_js_datePicker_format.isValidDate(value2, formatRef.value.format)) return;
    inputValue.value = _common_js_datePicker_format.formatDate(value2, {
      format: formatRef.value.format
    });
  }, {
    immediate: true
  });
  vue.watch(activeIndex, function (index) {
    var _inputRef$value, _inputRef$value$focus;
    if (!isMountedRef.value) {
      isMountedRef.value = true;
      return;
    }
    if (!popupVisible.value) return;
    var indexMap = {
      0: "first",
      1: "second"
    };
    (_inputRef$value = inputRef.value) === null || _inputRef$value === void 0 || (_inputRef$value$focus = _inputRef$value.focus) === null || _inputRef$value$focus === void 0 ? void 0 : _inputRef$value$focus.call(_inputRef$value, {
      position: indexMap[index]
    });
  }, {
    immediate: true
  });
  return {
    year: year,
    month: month,
    value: value,
    time: time,
    inputValue: inputValue,
    popupVisible: popupVisible,
    rangeInputProps: rangeInputProps,
    popupProps: popupProps,
    isHoverCell: isHoverCell,
    activeIndex: activeIndex,
    isFirstValueSelected: isFirstValueSelected,
    cacheValue: cacheValue,
    onChange: onChange
  };
}

exports.PARTIAL_MAP = PARTIAL_MAP;
exports["default"] = useRange;
//# sourceMappingURL=useRange.js.map