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")["default"];

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

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 _isNil = _interopRequireDefault(require("lodash/isNil"));

var _omit = _interopRequireDefault(require("lodash/omit"));

var _isFragment = _interopRequireDefault(require("../../pro/lib/_util/isFragment"));

var _iteratorUtils = require("../../pro/lib/_util/iteratorUtils");

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

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

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

  _react.Children.forEach(children, function (child) {
    if (child) {
      if ((0, _isFragment["default"])(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, _isFragment["default"])(child)) {
        c.push.apply(c, (0, _toConsumableArray2["default"])(toArray(child.props.children)));
      } else if ( /*#__PURE__*/(0, _react.isValidElement)(child)) {
        c.push(child);
      }
    }
  });

  return c;
}

function getDefaultActiveKeyInGroup(panelMap) {
  var activeKey;
  (0, _iteratorUtils.iteratorSome)(panelMap.entries(), function (_ref) {
    var _ref2 = (0, _slicedToArray2["default"])(_ref, 2),
        key = _ref2[0],
        panel = _ref2[1];

    if (!panel.disabled) {
      activeKey = key;
      return true;
    }

    return false;
  });
  return activeKey;
}

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 groupKey;
  (0, _iteratorUtils.iteratorSome)(groupedPanelsMap.entries(), function (_ref3) {
    var _ref4 = (0, _slicedToArray2["default"])(_ref3, 2),
        key = _ref4[0],
        panelsMap = _ref4[1].panelsMap;

    return (0, _iteratorUtils.iteratorSome)(panelsMap.values(), function (panel) {
      if (!panel.disabled) {
        groupKey = key;
        return true;
      }

      return false;
    });
  });
  return groupKey;
}

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, _iteratorUtils.iteratorFindIndex)(map.keys(), 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 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;
}

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

  if (options) {
    var tabDraggable = options.tabDraggable,
        tabTitleEditable = options.tabTitleEditable,
        tabCountHideable = options.tabCountHideable;

    if (!tabDraggable) {
      omitKeys.push('sort');
    }

    if (!tabTitleEditable) {
      omitKeys.push('title');
    }

    if (!tabCountHideable) {
      omitKeys.push('showCount');
    }
  }

  var length = omitKeys.length;

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

      if (pane && !pane.hidden) {
        if (length) {
          return (0, _omit["default"])(pane, omitKeys);
        }

        return pane;
      }
    }
  };

  if (groups.length) {
    var index = 0;
    groups.forEach(function (group, i) {
      if (!group.props.hidden) {
        var groupPanelList = [];
        toArray(group.props.children).forEach(function (child, j) {
          if (!child.props.hidden) {
            var panelKey = generateKey(child.key, index);
            index += 1;
            groupPanelList.push([panelKey, (0, _objectSpread2["default"])((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).forEach(function (child, index) {
      if (!child.props.hidden) {
        var key = generateKey(child.key, index);
        panelList.push([key, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
          type: child.type,
          sort: index
        }, child.props), getCustomizedPane(key))]);
      }
    });
    panelList.sort(sorter);
  }

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