@fe6/water-pro/lib/form-pro/src/hooks/use-advanced.js

An enterprise-class UI design language and Vue-based implementation

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = _default;

var _vue = require("vue");

var _shared = require("@fe6/shared");

var _useBreakpoint2 = require("./use-breakpoint");

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 _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

var BASIC_COL_LEN = 24;

function _default(_ref) {
  var advanceState = _ref.advanceState,
      emit = _ref.emit,
      getProps = _ref.getProps,
      getSchema = _ref.getSchema,
      formModel = _ref.formModel,
      defaultValueRef = _ref.defaultValueRef;

  var _useBreakpoint = (0, _useBreakpoint2.useBreakpoint)(),
      realWidthRef = _useBreakpoint.realWidthRef,
      screenEnum = _useBreakpoint.screenEnum,
      screenRef = _useBreakpoint.screenRef;

  var getEmptySpan = (0, _vue.computed)(function () {
    if (!advanceState.isAdvanced) {
      return 0;
    } // For some special cases, you need to manually specify additional blank lines


    var emptySpan = (0, _vue.unref)(getProps).emptySpan || 0;

    if ((0, _shared.isNumber)(emptySpan)) {
      return emptySpan;
    }

    if ((0, _shared.isPlainObject)(emptySpan)) {
      var _emptySpan$span = emptySpan.span,
          span = _emptySpan$span === void 0 ? 0 : _emptySpan$span;
      var screen = (0, _vue.unref)(screenRef);
      var screenSpan = emptySpan[screen.toLowerCase()];
      return screenSpan || span || 0;
    }

    return 0;
  });
  (0, _vue.watch)([function () {
    return (0, _vue.unref)(getSchema);
  }, function () {
    return advanceState.isAdvanced;
  }, function () {
    return (0, _vue.unref)(realWidthRef);
  }], function () {
    var _unref = (0, _vue.unref)(getProps),
        showAdvancedButton = _unref.showAdvancedButton;

    if (showAdvancedButton) {
      updateAdvanced();
    }
  }, {
    immediate: true
  });

  function getAdvanced(itemCol) {
    var itemColSum = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
    var isLastAction = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
    var width = (0, _vue.unref)(realWidthRef);
    var mdWidth = parseInt(itemCol.md) || parseInt(itemCol.xs) || parseInt(itemCol.sm) || itemCol.span || BASIC_COL_LEN;
    var lgWidth = parseInt(itemCol.lg) || mdWidth;
    var xlWidth = parseInt(itemCol.xl) || lgWidth;
    var xxlWidth = parseInt(itemCol.xxl) || xlWidth;

    if (width <= screenEnum.LG) {
      itemColSum += mdWidth;
    } else if (width < screenEnum.XL) {
      itemColSum += lgWidth;
    } else if (width < screenEnum.XXL) {
      itemColSum += xlWidth;
    } else {
      itemColSum += xxlWidth;
    }

    if (isLastAction) {
      advanceState.hideAdvanceBtn = false;

      if (itemColSum <= BASIC_COL_LEN * 2) {
        // When less than or equal to 2 lines, the collapse and expand buttons are not displayed
        advanceState.hideAdvanceBtn = true;
        advanceState.isAdvanced = true;
      } else if (itemColSum > BASIC_COL_LEN * 2 && itemColSum <= BASIC_COL_LEN * ((0, _vue.unref)(getProps).autoAdvancedLine || 3)) {
        advanceState.hideAdvanceBtn = false; // More than 3 lines collapsed by default
      } else if (!advanceState.isLoad) {
        advanceState.isLoad = true;
        advanceState.isAdvanced = !advanceState.isAdvanced;
      }

      return {
        isAdvanced: advanceState.isAdvanced,
        itemColSum: itemColSum
      };
    }

    if (itemColSum > BASIC_COL_LEN) {
      return {
        isAdvanced: advanceState.isAdvanced,
        itemColSum: itemColSum
      };
    } else {
      // The first line is always displayed
      return {
        isAdvanced: true,
        itemColSum: itemColSum
      };
    }
  }

  function updateAdvanced() {
    var itemColSum = 0;
    var realItemColSum = 0;

    var _unref2 = (0, _vue.unref)(getProps),
        _unref2$baseColProps = _unref2.baseColProps,
        baseColProps = _unref2$baseColProps === void 0 ? {} : _unref2$baseColProps;

    var _iterator = _createForOfIteratorHelper((0, _vue.unref)(getSchema)),
        _step;

    try {
      for (_iterator.s(); !(_step = _iterator.n()).done;) {
        var schema = _step.value;
        var show = schema.show,
            colProps = schema.colProps;
        var isShow = true;

        if ((0, _shared.isBoolean)(show)) {
          isShow = show;
        }

        if ((0, _shared.isFunction)(show)) {
          isShow = show({
            schema: schema,
            model: formModel,
            field: schema.field,
            values: _extends(_extends({}, (0, _vue.unref)(defaultValueRef)), formModel)
          });
        }

        if (isShow && (colProps || baseColProps)) {
          var _getAdvanced = getAdvanced(_extends(_extends({}, baseColProps), colProps), itemColSum),
              sum = _getAdvanced.itemColSum,
              isAdvanced = _getAdvanced.isAdvanced;

          itemColSum = sum || 0;

          if (isAdvanced) {
            realItemColSum = itemColSum;
          }

          schema.isAdvanced = isAdvanced;
        }
      }
    } catch (err) {
      _iterator.e(err);
    } finally {
      _iterator.f();
    }

    advanceState.actionSpan = realItemColSum % BASIC_COL_LEN + (0, _vue.unref)(getEmptySpan);
    getAdvanced((0, _vue.unref)(getProps).actionColOptions || {
      span: BASIC_COL_LEN
    }, itemColSum, true);
    emit('advanced-change');
  }

  function handleToggleAdvanced() {
    advanceState.isAdvanced = !advanceState.isAdvanced;
  }

  return {
    handleToggleAdvanced: handleToggleAdvanced
  };
}