choerodon-ui/lib/tabs/utils.js

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

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.toGroups = toGroups;
exports.toArray = toArray;
exports.getDefaultActiveKeyInGroup = getDefaultActiveKeyInGroup;
exports.getDefaultActiveKey = getDefaultActiveKey;
exports.getDefaultGroupKey = getDefaultGroupKey;
exports.getActiveKeyByGroupKey = getActiveKeyByGroupKey;
exports.generateKey = generateKey;
exports.getActiveIndex = getActiveIndex;
exports.setTransform = setTransform;
exports.isTransformSupported = isTransformSupported;
exports.setTransition = setTransition;
exports.getTransformPropValue = getTransformPropValue;
exports.isVertical = isVertical;
exports.getTransformByIndex = getTransformByIndex;
exports.getMarginStyle = getMarginStyle;
exports.getStyle = getStyle;
exports.setPxStyle = setPxStyle;
exports.getDataAttr = getDataAttr;
exports.getLeft = getLeft;
exports.getTop = getTop;
exports.getHeader = getHeader;
exports.normalizePanes = normalizePanes;

var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));

var _react = require("react");

var _reactIs = require("react-is");

var _isNil = _interopRequireDefault(require("lodash/isNil"));

var _enum = require("./enum");

var _TabGroup = require("./TabGroup");

function toGroups(children) {
  var c = [];

  _react.Children.forEach(children, function (child) {
    if (child) {
      if ((0, _reactIs.isFragment)(child)) {
        c.push.apply(c, (0, _toConsumableArray2["default"])(toGroups(child.props.children)));
      } else if ((0, _TabGroup.isTabGroup)(child)) {
        c.push(child);
      }
    }
  });

  return c;
}

function toArray(children) {
  var c = [];

  _react.Children.forEach(children, function (child) {
    if (child) {
      if ((0, _reactIs.isFragment)(child)) {
        c.push.apply(c, (0, _toConsumableArray2["default"])(toArray(child.props.children)));
      } else if ((0, _react.isValidElement)(child)) {
        c.push(child);
      }
    }
  });

  return c;
}

function getDefaultActiveKeyInGroup(panelMap) {
  var _iteratorNormalCompletion = true;
  var _didIteratorError = false;
  var _iteratorError = undefined;

  try {
    for (var _iterator = panelMap[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
      var _step$value = (0, _slicedToArray2["default"])(_step.value, 2),
          key = _step$value[0],
          panel = _step$value[1];

      if (!panel.disabled) {
        return key;
      }
    }
  } catch (err) {
    _didIteratorError = true;
    _iteratorError = err;
  } finally {
    try {
      if (!_iteratorNormalCompletion && _iterator["return"] != null) {
        _iterator["return"]();
      }
    } finally {
      if (_didIteratorError) {
        throw _iteratorError;
      }
    }
  }
}

function getDefaultActiveKey(totalPanelsMap, groupedPanelsMap, option) {
  var activeKey = option.activeKey,
      defaultActiveKey = option.defaultActiveKey;

  if (activeKey !== undefined) {
    return activeKey;
  }

  if (defaultActiveKey !== undefined) {
    return defaultActiveKey;
  }

  var _groupedPanelsMap$val = groupedPanelsMap.values().next(),
      value = _groupedPanelsMap$val.value;

  if (value) {
    var groupDefaultActiveKey = value.group.defaultActiveKey;

    if (groupDefaultActiveKey !== undefined) {
      return groupDefaultActiveKey;
    }
  }

  return getDefaultActiveKeyInGroup(totalPanelsMap);
}

function getDefaultGroupKey(groupedPanelsMap) {
  var _iteratorNormalCompletion2 = true;
  var _didIteratorError2 = false;
  var _iteratorError2 = undefined;

  try {
    for (var _iterator2 = groupedPanelsMap[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
      var _step2$value = (0, _slicedToArray2["default"])(_step2.value, 2),
          key = _step2$value[0],
          panelsMap = _step2$value[1].panelsMap;

      var _iteratorNormalCompletion3 = true;
      var _didIteratorError3 = false;
      var _iteratorError3 = undefined;

      try {
        for (var _iterator3 = panelsMap[Symbol.iterator](), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = true) {
          var _step3$value = (0, _slicedToArray2["default"])(_step3.value, 2),
              panel = _step3$value[1];

          if (!panel.disabled) {
            return key;
          }
        }
      } catch (err) {
        _didIteratorError3 = true;
        _iteratorError3 = err;
      } finally {
        try {
          if (!_iteratorNormalCompletion3 && _iterator3["return"] != null) {
            _iterator3["return"]();
          }
        } finally {
          if (_didIteratorError3) {
            throw _iteratorError3;
          }
        }
      }
    }
  } catch (err) {
    _didIteratorError2 = true;
    _iteratorError2 = err;
  } finally {
    try {
      if (!_iteratorNormalCompletion2 && _iterator2["return"] != null) {
        _iterator2["return"]();
      }
    } finally {
      if (_didIteratorError2) {
        throw _iteratorError2;
      }
    }
  }
}

function getActiveKeyByGroupKey(groupedPanelsMap, key) {
  var map = groupedPanelsMap.get(key);

  if (map) {
    var group = map.group,
        panelsMap = map.panelsMap,
        lastActiveKey = map.lastActiveKey;

    if (lastActiveKey) {
      return lastActiveKey;
    }

    if ('defaultActiveKey' in group) {
      return group.defaultActiveKey;
    }

    return getDefaultActiveKeyInGroup(panelsMap);
  }
}

function generateKey(key, index) {
  return String((0, _isNil["default"])(key) ? index : key);
}

function getActiveIndex(map, activeKey) {
  return activeKey === undefined ? -1 : (0, _toConsumableArray2["default"])(map.keys()).findIndex(function (key) {
    return key === activeKey;
  });
}

function setTransform(style) {
  var v = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
  style.transform = v;
  style.webkitTransform = v;
}

function isTransformSupported(style) {
  return 'transform' in style || 'webkitTransform' in style;
}

function setTransition(style) {
  var v = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
  style.transition = v;
  style.webkitTransition = v;
}

function getTransformPropValue(v) {
  return {
    transform: v,
    WebkitTransform: v
  };
}

function isVertical(tabBarPosition) {
  return tabBarPosition === _enum.TabsPosition.left || tabBarPosition === _enum.TabsPosition.right;
}

function getTransformByIndex(index, tabBarPosition) {
  var translate = isVertical(tabBarPosition) ? 'translateY' : 'translateX';
  return "".concat(translate, "(").concat(-index * 100, "%) translateZ(0)");
}

function getMarginStyle(index, tabBarPosition) {
  var marginDirection = isVertical(tabBarPosition) ? 'marginTop' : 'marginLeft';
  return (0, _defineProperty2["default"])({}, marginDirection, "".concat(-index * 100, "%"));
}

function getStyle(el, property) {
  return +getComputedStyle(el).getPropertyValue(property).replace('px', '');
}

function setPxStyle(el, value, vertical) {
  value = vertical ? "0px, ".concat(value, "px, 0px") : "".concat(value, "px, 0px, 0px");
  setTransform(el.style, "translate3d(".concat(value, ")"));
}

function getDataAttr(props) {
  return Object.keys(props).reduce(function (prev, key) {
    if (key === 'role' || key.startsWith('aria-') || key.startsWith('data-')) {
      prev[key] = props[key];
    }

    return prev;
  }, {});
}

function toNum(style, property) {
  return +style.getPropertyValue(property).replace('px', '');
}

function getTypeValue(start, current, end, tabNode, wrapperNode) {
  var total = getStyle(wrapperNode, "padding-".concat(start));
  var parentNode = tabNode.parentNode;

  if (parentNode) {
    (0, _toConsumableArray2["default"])(parentNode.childNodes).some(function (node) {
      if (node !== tabNode) {
        // 此处对代码进行了修改 取自rc-tabs@9.4.2 这版本进行了计算方式的调整,避免了在类似modal等有动画的内容中使用的时候，计算出现错误的问题，因为在动画过程中的计算，会有一次Height width为0的情况
        // 在 9.4.2版本中 因为前几个版本的修改 refactor: rm mixin and react-create-class
        // 对dom结构进行了调整 bar不与item在一个父元素中,因此有如下代码，在c7n中暂时不进行dom结构调整
        if (node.className.includes('ink-bar')) {
          return false;
        }

        var style = getComputedStyle(node);
        total += toNum(style, "margin-".concat(start));
        total += toNum(style, "margin-".concat(end));
        total += toNum(style, current);

        if (style.boxSizing === 'content-box') {
          total += toNum(style, "border-".concat(start, "-width")) + toNum(style, "padding-".concat(start)) + toNum(style, "border-".concat(end, "-width")) + toNum(style, "padding-".concat(end));
        }

        return false;
      }

      return true;
    });
  }

  return total;
}

function getLeft(tabNode, wrapperNode) {
  return getTypeValue('left', 'width', 'right', tabNode, wrapperNode);
}

function getTop(tabNode, wrapperNode) {
  return getTypeValue('top', 'height', 'bottom', tabNode, wrapperNode);
}

function getHeader(props) {
  var tab = props.tab,
      title = props.title;

  if (typeof tab === 'function') {
    return tab(title);
  }

  if (title !== undefined) {
    return title;
  }

  if (tab !== undefined) {
    return tab;
  }
}

function normalizePanes(children, customized) {
  var groups = toGroups(children);
  var groupedPanels = new Map();
  var panelList = [];
  var panes = customized && customized.panes;

  var getCustomizedPane = function getCustomizedPane(key) {
    if (panes) {
      return panes[key];
    }
  };

  var sorter = function sorter(item1, item2) {
    var _item1$1$sort = item1[1].sort,
        sort = _item1$1$sort === void 0 ? 0 : _item1$1$sort;
    var _item2$1$sort = item2[1].sort,
        sort2 = _item2$1$sort === void 0 ? 0 : _item2$1$sort;
    return sort - sort2;
  };

  if (groups.length) {
    var index = 0;
    groups.forEach(function (group, i) {
      var groupPanelList = [];
      toArray(group.props.children).forEach(function (child, j) {
        var panelKey = generateKey(child.key, index);
        index += 1;
        groupPanelList.push([panelKey, (0, _objectSpread2["default"])({
          type: child.type,
          sort: j
        }, child.props, {}, getCustomizedPane(panelKey))]);
      });
      groupPanelList.sort(sorter);
      panelList.push.apply(panelList, groupPanelList);
      var groupKey = generateKey(group.key, i);
      groupedPanels.set(groupKey, {
        group: (0, _objectSpread2["default"])({}, group.props),
        panelsMap: new Map(groupPanelList)
      });
    });
  } else {
    toArray(children).sort().forEach(function (child, index) {
      var key = generateKey(child.key, index);
      panelList.push([key, (0, _objectSpread2["default"])({
        type: child.type,
        sort: index
      }, child.props, {}, getCustomizedPane(key))]);
    });
    panelList.sort(sorter);
  }

  return [new Map(panelList), groupedPanels];
}
//# sourceMappingURL=utils.js.map