tdesign-react 0.30.0 → 0.30.1

package/dist/tdesign.js

@@ -1,5 +1,5 @@
 /**
- * tdesign v0.30.0
+ * tdesign v0.30.1
  * (c) 2022 tdesign
  * @license MIT
  */
@@ -27343,6 +27343,7 @@
     }, renderPaginationBtns), theme === "simple" && /* @__PURE__ */React__default["default"].createElement("div", {
       className: "".concat(name, "__select")
     }, /* @__PURE__ */React__default["default"].createElement(Select, {
+      autoWidth: true,
       size: size,
       value: current,
       disabled: disabled,
@@ -30501,7 +30502,8 @@
         disabled = _props$disabled === void 0 ? false : _props$disabled,
         index = props.index,
         _props$onTabRemove = props.onTabRemove,
-        onTabRemove = _props$onTabRemove === void 0 ? noop$1 : _props$onTabRemove;
+        onTabRemove = _props$onTabRemove === void 0 ? noop$1 : _props$onTabRemove,
+        innerRef = props.innerRef;
     var isCard = theme === "card";
 
     var _useTabClass = useTabClass(),
@@ -30512,6 +30514,7 @@
     var rippleRef = React.useRef();
     useRipple(rippleRef);
     return /* @__PURE__ */React__default["default"].createElement("div", {
+      ref: innerRef,
       onClick: disabled ? noop$1 : onClick,
       className: classNames$1(tdTabsClassGenerator("nav-item"), isCard ? tdTabsClassGenerator("nav--card") : "", tdSizeClassGenerator(size), isActive ? tdClassGenerator("is-active") : "", tdClassGenerator("is-".concat(placement)), disabled ? tdClassGenerator("is-disabled") : "")
     }, isCard ? /* @__PURE__ */React__default["default"].createElement("span", {
@@ -30608,9 +30611,155 @@
 
   TabBar.displayName = "TabBar";
 
+  var getDomWidth = function getDomWidth(dom) {
+    return (dom === null || dom === void 0 ? void 0 : dom.offsetWidth) || 0;
+  };
+
+  var tabBase = {
+    calcScrollLeft: function calcScrollLeft(elements, scrollLeft) {
+      var container = elements.navsContainer;
+      var wrap = elements.navsWrap;
+      var rightOperations = elements.rightOperations;
+      var rightOperationsZoneWidth = getDomWidth(rightOperations);
+      if (!wrap || !container) return scrollLeft;
+      var containerWidth = getDomWidth(container);
+      var wrapWidth = getDomWidth(wrap);
+
+      if (wrapWidth <= containerWidth) {
+        return 0;
+      }
+
+      if (scrollLeft + containerWidth - rightOperationsZoneWidth > wrapWidth) {
+        return wrapWidth + rightOperationsZoneWidth - containerWidth;
+      }
+
+      return scrollLeft;
+    },
+    calculateCanToLeft: function calculateCanToLeft(depElement, scrollLeft, placement) {
+      if (["left", "right"].includes(placement.toLowerCase())) {
+        return false;
+      }
+
+      var container = depElement.navsContainer,
+          wrap = depElement.navsWrap,
+          leftOperations = depElement.leftOperations,
+          toLeftBtn = depElement.toLeftBtn;
+
+      if (!wrap || !container) {
+        return false;
+      }
+
+      var leftOperationsZoneWidth = getDomWidth(leftOperations);
+      var leftIconWidth = getDomWidth(toLeftBtn);
+      return scrollLeft + Math.round(leftOperationsZoneWidth - leftIconWidth) > 0;
+    },
+    calculateCanToRight: function calculateCanToRight(depElement, scrollLeft, placement) {
+      if (["left", "right"].includes(placement.toLowerCase())) {
+        return false;
+      }
+
+      var container = depElement.navsContainer,
+          wrap = depElement.navsWrap,
+          rightOperations = depElement.rightOperations,
+          toRightBtn = depElement.toRightBtn;
+
+      if (!wrap || !container) {
+        return false;
+      }
+
+      var rightOperationsZoneWidth = getDomWidth(rightOperations);
+      var rightIconWidth = getDomWidth(toRightBtn);
+      return scrollLeft + getDomWidth(container) - (rightOperationsZoneWidth - rightIconWidth) - getDomWidth(wrap) < -1;
+    },
+    moveActiveTabIntoView: function moveActiveTabIntoView(depElement, scrollLeft) {
+      var activeTab = depElement.activeTab,
+          container = depElement.navsContainer,
+          navsWrap = depElement.navsWrap,
+          leftOperations = depElement.leftOperations,
+          toLeftBtn = depElement.toLeftBtn,
+          rightOperations = depElement.rightOperations,
+          toRightBtn = depElement.toRightBtn;
+      if (!activeTab) return scrollLeft;
+      var totalWidthBeforeActiveTab = activeTab.offsetLeft;
+      if (!container) return scrollLeft;
+
+      var _getLeftCoverWidth = function _getLeftCoverWidth() {
+        var leftOperationsZoneWidth = getDomWidth(leftOperations);
+        var leftIconWidth = getDomWidth(toLeftBtn);
+
+        if (totalWidthBeforeActiveTab === 0) {
+          return leftOperationsZoneWidth - leftIconWidth;
+        }
+
+        return leftOperationsZoneWidth;
+      };
+
+      var leftCoverWidth = _getLeftCoverWidth();
+
+      var isCurrentTabHiddenInLeftZone = scrollLeft + leftCoverWidth > totalWidthBeforeActiveTab;
+
+      if (isCurrentTabHiddenInLeftZone) {
+        return totalWidthBeforeActiveTab - leftCoverWidth;
+      }
+
+      var activeTabWidth = activeTab.offsetWidth;
+      if (!container || !navsWrap) return scrollLeft;
+      var containerWidth = getDomWidth(container);
+
+      var _getRightCoverWidth = function _getRightCoverWidth() {
+        var rightOperationsZoneWidth = getDomWidth(rightOperations);
+        var rightIconWidth = getDomWidth(toRightBtn);
+        var wrapWidth = getDomWidth(navsWrap);
+
+        if (Math.abs(totalWidthBeforeActiveTab + activeTabWidth - wrapWidth) < 1) {
+          return rightOperationsZoneWidth - rightIconWidth;
+        }
+
+        return rightOperationsZoneWidth;
+      };
+
+      var rightCoverWidth = _getRightCoverWidth();
+
+      var isHiddenInRightZone = scrollLeft + containerWidth - rightCoverWidth < totalWidthBeforeActiveTab + activeTabWidth;
+
+      if (isHiddenInRightZone) {
+        return totalWidthBeforeActiveTab + activeTabWidth - containerWidth + rightCoverWidth;
+      }
+
+      return scrollLeft;
+    },
+    scrollToLeft: function scrollToLeft(depElement, scrollLeft) {
+      var container = depElement.navsContainer,
+          leftOperations = depElement.leftOperations,
+          toLeftBtn = depElement.toLeftBtn;
+      if (!container) return 0;
+      var leftOperationsZoneWidth = getDomWidth(leftOperations);
+      var leftIconWidth = getDomWidth(toLeftBtn);
+      var containerWidth = getDomWidth(container);
+      return Math.max(-(leftOperationsZoneWidth - leftIconWidth), scrollLeft - containerWidth);
+    },
+    scrollToRight: function scrollToRight(depElement, scrollLeft) {
+      var container = depElement.navsContainer,
+          wrap = depElement.navsWrap,
+          rightOperations = depElement.rightOperations,
+          toRightBtn = depElement.toRightBtn;
+      var rightOperationsZoneWidth = getDomWidth(rightOperations);
+      var rightIconWidth = getDomWidth(toRightBtn);
+      var containerWidth = getDomWidth(container);
+      var wrapWidth = getDomWidth(wrap);
+      return Math.min(scrollLeft + containerWidth, wrapWidth - containerWidth + rightOperationsZoneWidth - rightIconWidth);
+    }
+  };
+
   function ownKeys$N(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$N(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$N(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$N(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+  var moveActiveTabIntoView = tabBase.moveActiveTabIntoView,
+      calcScrollLeft = tabBase.calcScrollLeft,
+      scrollToLeft = tabBase.scrollToLeft,
+      scrollToRight = tabBase.scrollToRight,
+      calculateCanToLeft = tabBase.calculateCanToLeft,
+      calculateCanToRight = tabBase.calculateCanToRight;
 
   var TabNav = function TabNav(props) {
     var _props$placement = props.placement,
@@ -30637,107 +30786,120 @@
         tdClassGenerator = _useTabClass.tdClassGenerator,
         tdSizeClassGenerator = _useTabClass.tdSizeClassGenerator;
 
-    var navContainerRef = React.useRef(null);
+    var navsContainerRef = React.useRef(null);
+    var navsWrapRef = React.useRef(null);
     var getIndex = React.useCallback(function (value) {
-      var index = 0;
-      itemList.forEach(function (v, i) {
-        if (v.value === value) {
-          index = i;
-        }
+      var index = itemList.findIndex(function (item) {
+        return item.value === value;
       });
-      return index;
+      return index > -1 ? index : 0;
     }, [itemList]);
     var activeIndex = getIndex(activeValue);
 
     var _useState = React.useState(false),
         _useState2 = _slicedToArray(_useState, 2),
-        isScrollVisible = _useState2[0],
-        setIsScrollVisible = _useState2[1];
+        canToLeft = _useState2[0],
+        setToLeftBtnVisible = _useState2[1];
 
     var _useState3 = React.useState(false),
         _useState4 = _slicedToArray(_useState3, 2),
-        leftScrollBtnVisible = _useState4[0],
-        setLeftScrollBtnVisible = _useState4[1];
-
-    var _useState5 = React.useState(false),
-        _useState6 = _slicedToArray(_useState5, 2),
-        rightScrollBtnVisible = _useState6[0],
-        setRightScrollBtnVisible = _useState6[1];
+        canToRight = _useState4[0],
+        setToRightBtnVisible = _useState4[1];
 
     var scrollBarRef = React.useRef(null);
-    var leftScrollBtnRef = React.useRef(null);
-    var rightScrollBtnRef = React.useRef(null);
-
-    var getScrollBtnVisible = function getScrollBtnVisible() {
-      var scrollLeft = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : void 0;
-
-      if (!scrollBarRef.current || !navContainerRef.current) {
-        console.error("[tdesign-tabs]\u6EDA\u52A8\u6761\u548C\u5185\u5BB9\u533A dom \u7ED3\u6784\u5F02\u5E38");
-        return [false, false, false];
-      }
-
-      var innerScrollLeft = scrollBarRef.current.scrollLeft;
-
-      if (scrollLeft !== void 0) {
-        innerScrollLeft = scrollLeft;
-      }
+    var leftOperationsRef = React.useRef(null);
+    var rightOperationsRef = React.useRef(null);
+    var toLeftBtnRef = React.useRef(null);
+    var toRightBtnRef = React.useRef(null);
 
-      var isScrollVisible2 = scrollBarRef.current.clientWidth < navContainerRef.current.clientWidth;
-      var leftVisible = innerScrollLeft > 0;
-      var rightVisible = isScrollVisible2 && innerScrollLeft < navContainerRef.current.clientWidth - scrollBarRef.current.clientWidth;
-      return [isScrollVisible2, leftVisible, rightVisible];
-    };
-
-    var setScrollBtnVisibleHandler = function setScrollBtnVisibleHandler() {
-      var scrollLeft = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : void 0;
-
-      var _getScrollBtnVisible = getScrollBtnVisible(scrollLeft),
-          _getScrollBtnVisible2 = _slicedToArray(_getScrollBtnVisible, 3),
-          isScrollVisible2 = _getScrollBtnVisible2[0],
-          leftVisible = _getScrollBtnVisible2[1],
-          rightVisible = _getScrollBtnVisible2[2];
-
-      setIsScrollVisible(isScrollVisible2);
-      setLeftScrollBtnVisible(leftVisible);
-      setRightScrollBtnVisible(rightVisible);
-    };
-
-    var scrollClickHandler = function scrollClickHandler(position) {
-      var _leftScrollBtnRef$cur, _rightScrollBtnRef$cu;
-
-      var doubleScrollBtnWidth = (((_leftScrollBtnRef$cur = leftScrollBtnRef.current) === null || _leftScrollBtnRef$cur === void 0 ? void 0 : _leftScrollBtnRef$cur.clientWidth) || ((_rightScrollBtnRef$cu = rightScrollBtnRef.current) === null || _rightScrollBtnRef$cu === void 0 ? void 0 : _rightScrollBtnRef$cu.clientWidth) || 0) * 2;
-      var scrollLength = scrollBarRef.current.clientWidth - doubleScrollBtnWidth;
-      var ref = scrollBarRef.current;
+    var _useState5 = React.useState(0),
+        _useState6 = _slicedToArray(_useState5, 2),
+        scrollLeft = _useState6[0],
+        setScrollLeft = _useState6[1];
 
-      if (ref) {
-        var scrollLeft = position === "left" ? ref.scrollLeft - scrollLength : ref.scrollLeft + scrollLength;
-        ref.scrollTo({
-          left: scrollLeft,
-          behavior: "smooth"
-        });
-        setScrollBtnVisibleHandler(scrollLeft);
-      }
-    };
+    var _useState7 = React.useState(null),
+        _useState8 = _slicedToArray(_useState7, 2),
+        activeTab = _useState8[0],
+        setActiveTab = _useState8[1];
 
-    var scrollToRightEnd = function scrollToRightEnd() {
-      if (navContainerRef.current && scrollBarRef.current) {
-        var scrollLeft = navContainerRef.current.clientWidth - scrollBarRef.current.clientWidth;
-        scrollBarRef.current.scrollTo({
-          left: scrollLeft,
-          behavior: "smooth"
-        });
-        setScrollBtnVisibleHandler(scrollLeft);
-      }
+    React.useEffect(function () {
+      var left = moveActiveTabIntoView({
+        activeTab: activeTab,
+        navsContainer: navsContainerRef.current,
+        navsWrap: navsWrapRef.current,
+        toLeftBtn: toLeftBtnRef.current,
+        toRightBtn: toRightBtnRef.current,
+        leftOperations: leftOperationsRef.current,
+        rightOperations: rightOperationsRef.current
+      }, scrollLeft);
+      setScrollLeft(left);
+    }, [activeTab, scrollLeft]);
+    var setScrollBtnVisibleHandler = React.useCallback(function () {
+      var canToleft = calculateCanToLeft({
+        navsContainer: navsContainerRef.current,
+        navsWrap: navsWrapRef.current,
+        leftOperations: leftOperationsRef.current,
+        toLeftBtn: toLeftBtnRef.current
+      }, scrollLeft, placement);
+      var canToRight2 = calculateCanToRight({
+        navsContainer: navsContainerRef.current,
+        navsWrap: navsWrapRef.current,
+        rightOperations: rightOperationsRef.current,
+        toRightBtn: toRightBtnRef.current
+      }, scrollLeft, placement);
+      setToLeftBtnVisible(canToleft);
+      setToRightBtnVisible(canToRight2);
+    }, [scrollLeft, placement]);
+
+    var handleScroll = function handleScroll(position) {
+      var val = position === "left" ? scrollToLeft({
+        navsContainer: navsContainerRef.current,
+        leftOperations: leftOperationsRef.current,
+        toLeftBtn: toLeftBtnRef.current
+      }, scrollLeft) : scrollToRight({
+        navsWrap: navsWrapRef.current,
+        navsContainer: navsContainerRef.current,
+        rightOperations: rightOperationsRef.current,
+        toRightBtn: toRightBtnRef.current
+      }, scrollLeft);
+      setScrollLeft(val);
     };
 
+    React.useEffect(function () {
+      var onResize = debounce_1(function () {
+        if (["top", "bottom"].includes(placement.toLowerCase())) {
+          var left = calcScrollLeft({
+            navsContainer: navsContainerRef.current,
+            navsWrap: navsWrapRef.current,
+            rightOperations: rightOperationsRef.current
+          }, scrollLeft);
+          setScrollLeft(left);
+          setScrollBtnVisibleHandler();
+        }
+      }, 300);
+      window.addEventListener("resize", onResize);
+      return function () {
+        window.removeEventListener("resize", onResize);
+      };
+    });
+    React.useEffect(function () {
+      if (["top", "bottom"].includes(placement.toLowerCase())) {
+        var left = calcScrollLeft({
+          navsContainer: navsContainerRef.current,
+          navsWrap: navsWrapRef.current,
+          rightOperations: rightOperationsRef.current
+        }, scrollLeft);
+        setScrollLeft(left);
+      }
+    }, [itemList.length, scrollLeft, placement]);
     var TabBarCom = isCard ? null : /* @__PURE__ */React__default["default"].createElement(TabBar, {
       tabPosition: placement,
       activeId: activeIndex,
-      containerRef: navContainerRef
+      containerRef: navsWrapRef
     });
     React.useEffect(function () {
       setScrollBtnVisibleHandler();
-    }, [itemList.length]);
+    }, [setScrollBtnVisibleHandler]);
 
     var handleTabItemRemove = function handleTabItemRemove(removeItem) {
       var removeValue = removeItem.value,
@@ -30761,45 +30923,46 @@
       onAdd({
         e: e
       });
-      setTimeout(function () {
-        scrollToRightEnd();
-      }, 0);
     };
 
     return /* @__PURE__ */React__default["default"].createElement("div", {
-      className: classNames$1(tdTabsClassGenerator("header"), tdClassGenerator("is-".concat(placement)))
-    }, /* @__PURE__ */React__default["default"].createElement("div", {
+      ref: navsContainerRef,
       className: classNames$1(tdTabsClassGenerator("nav")),
       style: {
         minHeight: 48
       }
     }, /* @__PURE__ */React__default["default"].createElement("div", {
+      ref: leftOperationsRef,
       className: classNames$1(tdTabsClassGenerator("operations"), tdTabsClassGenerator("operations--left"))
-    }, leftScrollBtnVisible ? /* @__PURE__ */React__default["default"].createElement("div", {
+    }, canToLeft ? /* @__PURE__ */React__default["default"].createElement("div", {
       onClick: function onClick() {
-        scrollClickHandler("left");
+        handleScroll("left");
       },
       className: classNames$1(tdTabsClassGenerator("btn"), tdTabsClassGenerator("btn--left"), tdSizeClassGenerator(size)),
-      ref: leftScrollBtnRef
+      ref: toLeftBtnRef
     }, /* @__PURE__ */React__default["default"].createElement(ChevronLeftIcon, null)) : null), /* @__PURE__ */React__default["default"].createElement("div", {
+      ref: rightOperationsRef,
       className: classNames$1(tdTabsClassGenerator("operations"), tdTabsClassGenerator("operations--right"))
-    }, rightScrollBtnVisible ? /* @__PURE__ */React__default["default"].createElement("div", {
+    }, canToRight ? /* @__PURE__ */React__default["default"].createElement("div", {
       onClick: function onClick() {
-        scrollClickHandler("right");
+        handleScroll("right");
       },
       className: classNames$1(tdTabsClassGenerator("btn"), tdTabsClassGenerator("btn--right"), tdSizeClassGenerator(size)),
-      ref: rightScrollBtnRef
+      ref: toRightBtnRef
     }, /* @__PURE__ */React__default["default"].createElement(ChevronRightIcon, null)) : null, addable ? /* @__PURE__ */React__default["default"].createElement("div", {
       className: classNames$1(tdTabsClassGenerator("add-btn"), tdTabsClassGenerator("btn"), tdSizeClassGenerator(size)),
       onClick: handleTabAdd
     }, /* @__PURE__ */React__default["default"].createElement(AddIcon, null)) : null), /* @__PURE__ */React__default["default"].createElement("div", {
       className: classNames$1(tdTabsClassGenerator("nav-container"), isCard ? tdTabsClassGenerator("nav--card") : "", tdClassGenerator("is-".concat(placement)), addable ? tdClassGenerator("is-addable") : "")
     }, /* @__PURE__ */React__default["default"].createElement("div", {
-      className: classNames$1(tdTabsClassGenerator("nav-scroll"), isScrollVisible ? tdClassGenerator("is-scrollable") : ""),
+      className: classNames$1(tdTabsClassGenerator("nav-scroll"), canToLeft || canToRight ? tdClassGenerator("is-scrollable") : ""),
       ref: scrollBarRef
     }, /* @__PURE__ */React__default["default"].createElement("div", {
-      className: classNames$1(tdTabsClassGenerator("nav-wrap"), ["left", "right"].includes(placement) ? tdClassGenerator("is-vertical") : ""),
-      ref: navContainerRef
+      className: classNames$1(tdTabsClassGenerator("nav-wrap"), ["left", "right"].includes(placement) ? tdClassGenerator("is-vertical") : "", tdClassGenerator("is-smooth")),
+      style: {
+        transform: "translate(".concat(-scrollLeft, "px, 0)")
+      },
+      ref: navsWrapRef
     }, placement !== "bottom" ? TabBarCom : null, !isCard && /* @__PURE__ */React__default["default"].createElement("div", {
       className: classNames$1(tdTabsClassGenerator("bar"), tdClassGenerator("is-".concat(placement)))
     }), itemList.map(function (v, index) {
@@ -30815,9 +30978,14 @@
         onClick: function onClick() {
           return handleTabItemClick(v);
         },
-        onTabRemove: handleTabItemRemove
+        onTabRemove: handleTabItemRemove,
+        innerRef: function innerRef(ref) {
+          if (activeValue === v.value) {
+            setActiveTab(ref);
+          }
+        }
       }));
-    }), placement === "bottom" ? TabBarCom : null)))));
+    }), placement === "bottom" ? TabBarCom : null))));
   };
 
   TabNav.displayName = "TabNav";
@@ -30888,21 +31056,23 @@
       }
     };
 
-    var renderTabNav = function renderTabNav() {
-      return /* @__PURE__ */React__default["default"].createElement(TabNav, _objectSpread$M(_objectSpread$M({}, props), {}, {
+    var renderHeader = function renderHeader() {
+      return /* @__PURE__ */React__default["default"].createElement("div", {
+        className: classNames$1(tdTabsClassGenerator("header"), tdClassGenerator("is-".concat(placement)))
+      }, /* @__PURE__ */React__default["default"].createElement(TabNav, _objectSpread$M(_objectSpread$M({}, props), {}, {
         activeValue: value,
         onRemove: onRemove,
         itemList: itemList,
         tabClick: handleClickTab,
         onChange: handleChange
-      }));
+      })));
     };
 
     return /* @__PURE__ */React__default["default"].createElement("div", {
       ref: ref,
       className: classNames$1(tdTabsClassPrefix, className),
       style: style
-    }, placement !== "bottom" ? renderTabNav() : null, /* @__PURE__ */React__default["default"].createElement("div", {
+    }, placement !== "bottom" ? renderHeader() : null, /* @__PURE__ */React__default["default"].createElement("div", {
       className: classNames$1(tdTabsClassGenerator("content"), tdClassGenerator("is-".concat(placement)))
     }, React__default["default"].Children.map(children, function (child) {
       if (child && child.type === TabPanel$1) {
@@ -30920,11 +31090,14 @@
       }
 
       return null;
-    })), placement === "bottom" ? renderTabNav() : null);
+    })), placement === "bottom" ? renderHeader() : null);
   }, {
     TabPanel: TabPanel$1
   });
   Tabs$1.displayName = "Tabs";
+  Tabs$1.defaultProps = {
+    placement: "top"
+  };
 
   var Tabs = Tabs$1;
 
@@ -42221,7 +42394,7 @@
         onError = _ref.onError,
         onProgress = _ref.onProgress,
         onSuccess = _ref.onSuccess;
-    var innerFiles = Array.isArray(files) ? files : [file];
+    var innerFiles = files || [];
     var xhr2 = new XMLHttpRequest();
 
     if (withCredentials) {
@@ -42234,7 +42407,7 @@
       formData.append(key, data[key]);
     });
     innerFiles.forEach(function (f) {
-      formData.append(name, f.raw);
+      formData.append(name, f && f.raw);
     });
     xhr2.open(method, action, true);
     Object.keys(headers).forEach(function (key) {