wetrade-design/lib/collapse/CollapseCondition.js

一款多语言支持Vue3的UI框架

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
Object.defineProperty(exports, "collapseConditionProps", {
  enumerable: true,
  get: function get() {
    return _commonProps.collapseConditionProps;
  }
});
exports.default = void 0;
var _vue = require("vue");
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _propsUtil = require("../_util/props-util");
var _commonProps = require("./commonProps");
var _classNames2 = _interopRequireDefault(require("../_util/classNames"));
var _useConfigInject2 = _interopRequireDefault(require("../_util/hooks/useConfigInject"));
var _icon = _interopRequireDefault(require("../icon"));
var _button = _interopRequireDefault(require("../button"));
var _vcResizeObserver = _interopRequireDefault(require("../vc-resize-observer"));
var _LocaleReceiver = _interopRequireDefault(require("../locale-provider/LocaleReceiver"));
var _isValid = _interopRequireDefault(require("../_util/isValid"));
var _default2 = (0, _vue.defineComponent)({
  compatConfig: {
    MODE: 3
  },
  name: 'WdCollapseCondition',
  inheritAttrs: false,
  props: (0, _propsUtil.initDefaultProps)((0, _commonProps.collapseConditionProps)(), {
    open: false
  }),
  slots: ['suffixButton'],
  setup: function setup(props, _ref) {
    var attrs = _ref.attrs,
      slots = _ref.slots,
      emit = _ref.emit;
    var RenderConditionRef = (0, _vue.ref)();
    var RenderContentRef = (0, _vue.ref)();
    var RenderExpandRef = (0, _vue.ref)();
    var RenderButtonRef = (0, _vue.ref)();
    var _useConfigInject = (0, _useConfigInject2.default)('collapse-condition', props),
      prefixCls = _useConfigInject.prefixCls;
    var expandNodes = (0, _vue.ref)([]);
    var expandActive = (0, _vue.ref)(false);
    var getItems = function getItems() {
      var _slots$default;
      return (_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots);
    };
    (0, _vue.onMounted)(function () {
      initActive();
    });
    (0, _vue.watch)(function () {
      return props.open;
    }, function (val) {
      RenderContentRef.value.style.height = val ? 'auto' : '32px';
    });
    (0, _vue.watch)(function () {
      return getItems();
    }, function () {
      initActive();
    }, {
      flush: 'post' // https://cn.vuejs.org/guide/essentials/watchers.html#callback-flush-timing
    });

    var initActive = function initActive() {
      var vnodes = getItems();
      var itemVnodes = vnodes.filter(function (item) {
        var _item$children;
        return (_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.default;
      });
      var renderConditionRect = RenderConditionRef.value.getBoundingClientRect();
      var renderButtonRect = RenderButtonRef.value.getBoundingClientRect();
      var renderExpandRect = RenderExpandRef.value.getBoundingClientRect();
      var suffixWidth = renderButtonRect.width + renderExpandRect.width;
      var contentMaxWidth = renderConditionRect.width - suffixWidth;
      var totalWidth = 0;
      expandActive.value = false;
      Array.prototype.forEach.call(itemVnodes, function (item, i) {
        var childrenNode = RenderContentRef.value.children[i];
        var _childrenNode$getBoun = childrenNode.getBoundingClientRect(),
          width = _childrenNode$getBoun.width;
        totalWidth += width;
        if (totalWidth > contentMaxWidth) {
          if (Array.isArray(item.props.value)) {
            expandActive.value = item.props.value.length > 0 || expandActive.value;
          } else if (Object.prototype.toString.call(item.props.value) === '[object Object]') {
            expandActive.value = Object.keys(item.props.value).length > 0 || expandActive.value;
          } else if ((0, _isValid.default)(item.props.value)) {
            expandActive.value = (0, _isValid.default)(item.props.value) || expandActive.value;
          }
        }
      });
      if (expandActive.value) {
        emit('update:open', true);
      }
    };
    var onClick = function onClick() {
      var open = props.open;
      emit('update:open', !open);
    };
    var renderExpand = function renderExpand(locale) {
      var open = props.open;
      return (0, _vue.createVNode)("div", {
        "ref": RenderExpandRef,
        "class": "".concat(prefixCls.value, "-expand")
      }, [(0, _vue.createVNode)(_button.default, {
        "type": expandActive.value ? 'link' : 'text',
        "onClick": onClick
      }, {
        default: function _default() {
          return [(0, _vue.createVNode)("span", null, [open ? locale.collaspe : locale.expand]), (0, _vue.createVNode)(_icon.default, {
            "iconClass": open ? 'wd-icon-direction_up' : 'wd-icon-direction_down'
          }, null)];
        }
      })]);
    };
    var renderButton = function renderButton() {
      var _props$suffixButton = props.suffixButton,
        suffixButton = _props$suffixButton === void 0 ? slots === null || slots === void 0 ? void 0 : slots.suffixButton : _props$suffixButton;
      var items = getItems();
      var vnodes = items.filter(function (item) {
        var _item$children2;
        return (_item$children2 = item.children) === null || _item$children2 === void 0 ? void 0 : _item$children2.default;
      });
      var itemLen = vnodes === null || vnodes === void 0 ? void 0 : vnodes.length;
      var button = suffixButton && itemLen > 1 ? suffixButton() : null;
      return (0, _vue.withDirectives)((0, _vue.createVNode)("div", {
        "ref": RenderButtonRef,
        "class": "".concat(prefixCls.value, "-button")
      }, [button]), [[_vue.vShow, !!button]]);
    };
    var handleResize = function handleResize(size) {
      if (!RenderButtonRef.value || !RenderExpandRef.value) return;
      var renderButtonRect = RenderButtonRef.value.getBoundingClientRect();
      var renderExpandRect = RenderExpandRef.value.getBoundingClientRect();
      var suffixWidth = renderButtonRect.width + renderExpandRect.width;
      var contentMaxWidth = size.width - suffixWidth;
      RenderContentRef.value.style.maxWidth = contentMaxWidth + 'px';
      var totalWidth = 0;
      expandActive.value = false;
      var items = getItems();
      var vnodes = items.filter(function (item) {
        var _item$children3;
        return (_item$children3 = item.children) === null || _item$children3 === void 0 ? void 0 : _item$children3.default;
      });
      expandNodes.value = [];
      Array.prototype.forEach.call(vnodes, function (item, i) {
        var childrenNode = RenderContentRef.value.children[i];
        var _childrenNode$getBoun2 = childrenNode.getBoundingClientRect(),
          width = _childrenNode$getBoun2.width;
        totalWidth += width;
        if (totalWidth > contentMaxWidth) {
          expandNodes.value.push(childrenNode);
          childrenNode.classList.remove("".concat(prefixCls.value, "-panel-item-normal"));
          childrenNode.classList.add("".concat(prefixCls.value, "-panel-item-expand"));
          childrenNode.style.visibility = 'hidden';
          if (Array.isArray(item.props.value)) {
            expandActive.value = item.props.value.length > 0 || expandActive.value;
          } else if (Object.prototype.toString.call(item.props.value) === '[object Object]') {
            expandActive.value = Object.keys(item.props.value).length > 0 || expandActive.value;
          } else if ((0, _isValid.default)(item.props.value)) {
            expandActive.value = (0, _isValid.default)(item.props.value) || expandActive.value;
          }
        } else {
          childrenNode.classList.remove("".concat(prefixCls.value, "-panel-item-expand"));
          childrenNode.classList.add("".concat(prefixCls.value, "-panel-item-normal"));
          childrenNode.style.visibility = 'visible';
        }
        if (props.open) {
          childrenNode.style.visibility = 'visible';
        }
      });
      var normalNodes = RenderContentRef.value.querySelectorAll(".".concat(prefixCls.value, "-panel-item-normal"));
      var width = Array.prototype.reduce.call(normalNodes, function (prev, cur) {
        return prev + cur.offsetWidth;
      }, 0);
      RenderContentRef.value.style.width = width + 'px';
      if (expandNodes.value.length > 0) {
        RenderExpandRef.value.style.visibility = 'visible';
      } else {
        RenderExpandRef.value.style.visibility = 'hidden';
      }
    };
    return function () {
      var _classNames;
      var open = props.open;
      var collapseClassName = (0, _classNames2.default)((_classNames = {}, (0, _defineProperty2.default)(_classNames, prefixCls.value, true), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls.value, "-open"), open), _classNames));
      var contentStyle = {
        height: open ? 'auto' : '32px'
      };
      return (0, _vue.createVNode)(_LocaleReceiver.default, {
        "componentName": "CollaspeCondition",
        "children": function children(locale) {
          return (0, _vue.createVNode)(_vcResizeObserver.default, {
            "onResize": handleResize
          }, {
            default: function _default() {
              return [(0, _vue.createVNode)("div", {
                "ref": RenderConditionRef,
                "class": collapseClassName,
                "style": attrs.style
              }, [(0, _vue.createVNode)("div", {
                "ref": RenderContentRef,
                "class": "".concat(prefixCls.value, "-content"),
                "style": contentStyle
              }, [getItems()]), renderButton(), renderExpand(locale)])];
            }
          });
        }
      }, null);
    };
  }
});
exports.default = _default2;