@kdcloudjs/kdesign 1.7.28 → 1.7.29

package/es/grid/col.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 interface ColBase {
     span?: number;
     pull?: number;

package/es/grid/col.js

@@ -1,35 +1,52 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
-import * as React from 'react';
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof _Object$getOwnPropertySymbols === "function") for (var i = 0, p = _Object$getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+import React, { useContext } from 'react';
 import classNames from 'classnames';
 import { getCompProps } from '../_utils';
 import { ConfigContext } from '../config-provider';
 import { testBrowserType } from '../_utils/testBrowserType';
+import { GapContext } from './row';
 var Col = function Col(props) {
   var _React$useContext = React.useContext(ConfigContext),
     getPrefixCls = _React$useContext.getPrefixCls,
     pkgPrefixCls = _React$useContext.prefixCls,
     userDefaultProps = _React$useContext.compDefaultProps;
   // 属性需要合并一遍用户定义的默认属性
-  var _getCompProps = getCompProps('Col', userDefaultProps, props),
-    xs = _getCompProps.xs,
-    sm = _getCompProps.sm,
-    md = _getCompProps.md,
-    lg = _getCompProps.lg,
-    xl = _getCompProps.xl,
-    flex = _getCompProps.flex,
-    span = _getCompProps.span,
-    pull = _getCompProps.pull,
-    push = _getCompProps.push,
-    style = _getCompProps.style,
-    order = _getCompProps.order,
-    offset = _getCompProps.offset,
-    winWidth = _getCompProps.winWidth,
-    children = _getCompProps.children,
-    className = _getCompProps.className,
-    customPrefixcls = _getCompProps.prefixCls;
+  var _a = getCompProps('Col', userDefaultProps, props),
+    xs = _a.xs,
+    sm = _a.sm,
+    md = _a.md,
+    lg = _a.lg,
+    xl = _a.xl,
+    flex = _a.flex,
+    span = _a.span,
+    pull = _a.pull,
+    push = _a.push,
+    style = _a.style,
+    order = _a.order,
+    offset = _a.offset,
+    children = _a.children,
+    className = _a.className,
+    customPrefixcls = _a.prefixCls,
+    others = __rest(_a, ["xs", "sm", "md", "lg", "xl", "flex", "span", "pull", "push", "style", "order", "offset", "children", "className", "prefixCls"]);
+  var rowGroup = useContext(GapContext);
+  var mergedWinWidth = rowGroup.winWidth;
+  var gap = rowGroup.gap;
   // 浏览器名称
-  var isSogou = testBrowserType(/^sogou/i, 0) || /Trident|MSIE/.test(navigator.userAgent);
+  var isSogouOrIE = testBrowserType(/^sogou/i, 0) || /Trident|MSIE/.test(navigator.userAgent);
+  var colGapStyle = {
+    padding: "0 ".concat(gap.h / 2, "px")
+  };
+  if (isSogouOrIE && gap.v) colGapStyle.marginBottom = gap.v;
   // className前缀
   var prefixCls = getPrefixCls(pkgPrefixCls, 'col', customPrefixcls);
   var columns = 24;
@@ -40,23 +57,23 @@ var Col = function Col(props) {
     offset: offset,
     order: order
   };
-  if (xs && winWidth > 0) {
+  if (xs && mergedWinWidth > 0) {
     if (xs.constructor === Number) base.span = xs;
     if (xs.constructor === Object) base = _extends(_extends({}, base), xs);
   }
-  if (sm && winWidth >= 600) {
+  if (sm && mergedWinWidth >= 600) {
     if (sm.constructor === Number) base.span = sm;
     if (sm.constructor === Object) base = _extends(_extends({}, base), sm);
   }
-  if (md && winWidth >= 1024) {
+  if (md && mergedWinWidth >= 1024) {
     if (md.constructor === Number) base.span = md;
     if (md.constructor === Object) base = _extends(_extends({}, base), md);
   }
-  if (lg && winWidth >= 1280) {
+  if (lg && mergedWinWidth >= 1280) {
     if (lg.constructor === Number) base.span = lg;
     if (lg.constructor === Object) base = _extends(_extends({}, base), lg);
   }
-  if (xl && winWidth >= 1920) {
+  if (xl && mergedWinWidth >= 1920) {
     if (xl.constructor === Number) base.span = xl;
     if (xl.constructor === Object) base = _extends(_extends({}, base), xl);
   }
@@ -76,20 +93,18 @@ var Col = function Col(props) {
       }
     }
   }
-  var styleString = _extends({
+  var styleString = _extends(_extends({
     flex: flexstr,
     maxWidth: width,
     order: base.order,
     left: base.push && base.push / columns * 100 + '%',
     right: base.pull && base.pull / columns * 100 + '%',
     marginLeft: base.offset && base.offset / columns * 100 + '%'
-  }, style);
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames(prefixCls, className, {
-      'sogou-col': isSogou
-    }),
+  }, colGapStyle), style);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: classNames(prefixCls, className),
     style: styleString
-  }, children);
+  }, others), children);
 };
 Col.displayName = 'Col';
 export default Col;

package/es/grid/row.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 declare type Align = 'top' | 'middle' | 'bottom' | 'stretch';
 declare type Justify = 'start' | 'end' | 'center' | 'space-around' | 'space-between';
 interface gutterObject {
@@ -17,5 +17,13 @@ export interface RowProps {
     style?: React.CSSProperties;
     gutter?: number | gutterObject | Array<number | gutterObject>;
 }
+export interface GridContext {
+    gap: {
+        v: number;
+        h: number;
+    };
+    winWidth: number;
+}
+export declare const GapContext: React.Context<GridContext>;
 declare const Row: React.FC<RowProps>;
 export default Row;

package/es/grid/row.js

@@ -1,7 +1,6 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
-import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
-import * as React from 'react';
+import React, { createContext } from 'react';
 import classNames from 'classnames';
 import { getCompProps } from '../_utils';
 import { ConfigContext } from '../config-provider';
@@ -21,8 +20,14 @@ function getGap(gutter, width) {
   if (xl && width >= 1920) gap = xl;
   return gap;
 }
+export var GapContext = /*#__PURE__*/createContext({
+  gap: {
+    h: 0,
+    v: 0
+  },
+  winWidth: window.innerWidth
+});
 var Row = function Row(props) {
-  var _context;
   var _React$useContext = React.useContext(ConfigContext),
     getPrefixCls = _React$useContext.getPrefixCls,
     pkgPrefixCls = _React$useContext.prefixCls,
@@ -38,7 +43,7 @@ var Row = function Row(props) {
     justify = _getCompProps.justify,
     customPrefixcls = _getCompProps.prefixCls;
   // 浏览器名称
-  var isSogou = testBrowserType(/^sogou/i, 0) || /Trident|MSIE/.test(navigator.userAgent);
+  var isSogouOrIe = testBrowserType(/^sogou/i, 0) || /Trident|MSIE/.test(navigator.userAgent);
   // className前缀
   var prefixCls = getPrefixCls(pkgPrefixCls, 'row', customPrefixcls);
   var _React$useState = React.useState(window.innerWidth),
@@ -70,9 +75,10 @@ var Row = function Row(props) {
     }
   }
   var rowStyle = {
-    '--cgap': "".concat(gap.h, "px")
+    'row-gap': "".concat(gap.v, "px"),
+    margin: "0 ".concat(-1 * gap.h, "px")
   };
-  if (gap.v) rowStyle['--rgap'] = "".concat(gap.v, "px");
+  if (gap.v && isSogouOrIe) rowStyle['margin-bottom'] = "".concat(-1 * gap.v / 2, "px");
   var toalign = {
     top: 'flex-start',
     middle: 'center',
@@ -82,22 +88,21 @@ var Row = function Row(props) {
     start: 'flex-start',
     end: 'flex-end'
   };
-  var styleString = _extends(_extends(_extends({}, style), rowStyle), {
+  var styleString = _extends(_extends(_extends({}, rowStyle), style), {
     alignItems: toalign[align] || align,
     justifyContent: tojustify[justify] || justify
   });
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(GapContext.Provider, {
+    value: {
+      gap: gap,
+      winWidth: winWidth
+    }
+  }, /*#__PURE__*/React.createElement("div", {
     className: classNames(prefixCls, className, {
       nowrap: !wrap
-    }, {
-      'sogou-row': isSogou
     }),
     style: styleString
-  }, _mapInstanceProperty(_context = React.Children).call(_context, children, function (child) {
-    return /*#__PURE__*/React.cloneElement(child, {
-      winWidth: winWidth
-    });
-  }));
+  }, children));
 };
 Row.displayName = 'Row';
 export default Row;

package/es/select/style/index.css

@@ -280,6 +280,14 @@
 .kd-select-icon-clear {
   opacity: 0;
   z-index: 1;
+  top: 0;
+  bottom: 0;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
   position: absolute;
   background: #fff;
   -webkit-transition: opacity 0.15s ease;
@@ -299,6 +307,15 @@
   text-overflow: ellipsis;
   right: 28px;
   left: 0;
+  top: 0;
+  bottom: 0;
+  z-index: -1;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
 }
 .kd-select-borderless {
   border: none;
@@ -433,18 +450,32 @@
   max-height: calc(var(--kd-c-select-sizing-height-small, 24px) * 3 - 10px);
   font-size: var(--kd-c-select-font-size-small, 12px);
 }
+.kd-select-size-small .kd-select-selection-item {
+  min-height: calc(var(--kd-c-select-sizing-height-small, 24px) - 4px);
+  line-height: calc(var(--kd-c-select-sizing-height-small, 24px) - 4px);
+}
 .kd-select-size-middle {
   min-height: var(--kd-c-select-sizing-height-middle, 30px);
   max-height: calc(var(--kd-c-select-sizing-height-middle, 30px) * 3 - 10px);
   font-size: var(--kd-c-select-font-size-middle, 14px);
 }
+.kd-select-size-middle .kd-select-selection-item {
+  min-height: calc(var(--kd-c-select-sizing-height-middle, 30px) - 4px);
+  line-height: calc(var(--kd-c-select-sizing-height-middle, 30px) - 4px);
+}
 .kd-select-size-large {
   min-height: var(--kd-c-select-sizing-height-large, 36px);
   max-height: calc(var(--kd-c-select-sizing-height-large, 36px) * 3 - 10px);
   font-size: var(--kd-c-select-font-size-large, 16px);
 }
+.kd-select-size-large .kd-select-selection-item {
+  min-height: calc(var(--kd-c-select-sizing-height-large, 36px) - 4px);
+  line-height: calc(var(--kd-c-select-sizing-height-large, 36px) - 4px);
+}
 .kd-select-suffix {
   right: 0;
+  top: 0;
+  bottom: 0;
   position: absolute;
   display: -webkit-box;
   display: -ms-flexbox;
@@ -467,6 +498,14 @@
   right: 28px;
   left: 0;
   height: 100%;
+  top: 0;
+  bottom: 0;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
 }
 .kd-select .kd-select-single .kd-select-selection-search-input {
   outline: 0;
@@ -525,9 +564,6 @@
           align-items: center;
   vertical-align: middle;
   max-width: 100%;
-  height: 20px;
-  line-height: 20px;
-  margin: 2px 8px 2px 0;
   cursor: default;
   -webkit-user-select: none;
      -moz-user-select: none;

package/es/select/style/index.less

@@ -46,6 +46,10 @@
     &-clear {
       opacity: 0;
       z-index: 1;
+      top: 0;
+      bottom: 0;
+      display: flex;
+      align-items: center;
       position: absolute;
       background: #fff;
       transition: opacity 0.15s ease;
@@ -66,6 +70,11 @@
     text-overflow: ellipsis;
     right: 28px;
     left: 0;
+    top: 0;
+    bottom: 0;
+    z-index: -1;
+    display: flex;
+    align-items: center;
   }
 
   &-borderless {
@@ -220,6 +229,8 @@
 
   &-suffix {
     right: 0;
+    top: 0;
+    bottom: 0;
     position: absolute;
     display: flex;
     flex: 0;
@@ -235,6 +246,10 @@
         right: 28px;
         left: 0;
         height: 100%;
+        top: 0;
+        bottom: 0;
+        display: flex;
+        align-items: center;
         &-input {
           outline: 0;
           border-radius: 0;
@@ -289,9 +304,6 @@
     align-items: center;
     vertical-align: middle;
     max-width: 100%;
-    height: 20px;
-    line-height: 20px;
-    margin: 2px 8px 2px 0;
     cursor: default;
     user-select: none;
     &-small {

package/es/select/style/mixin.less

@@ -19,6 +19,11 @@
   min-height: @height;
   max-height: calc(@maxHeight * 3 - 10px);
   font-size: @fontSize;
+
+  .@{select-prefix-cls}-selection-item {
+    min-height: calc(@height - 4px);
+    line-height: calc(@height - 4px);
+  }
 }
 
 .over() {
@@ -52,7 +57,6 @@
   }
 }
 
-
 @keyframes SlideUpIn {
   0% {
     transform: scaleY(0.8);
@@ -77,4 +81,4 @@
     transform-origin: 100% 100%;
     opacity: 0;
   }
-}
+}

package/lib/grid/col.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 interface ColBase {
     span?: number;
     pull?: number;

package/lib/grid/col.js

@@ -8,40 +8,57 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-var React = _interopRequireWildcard(require("react"));
+var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _utils = require("../_utils");
 var _configProvider = require("../config-provider");
 var _testBrowserType = require("../_utils/testBrowserType");
+var _row = require("./row");
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof _getOwnPropertySymbols.default === "function") for (var i = 0, p = (0, _getOwnPropertySymbols.default)(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
 var Col = function Col(props) {
-  var _React$useContext = React.useContext(_configProvider.ConfigContext),
+  var _React$useContext = _react.default.useContext(_configProvider.ConfigContext),
     getPrefixCls = _React$useContext.getPrefixCls,
     pkgPrefixCls = _React$useContext.prefixCls,
     userDefaultProps = _React$useContext.compDefaultProps;
   // 属性需要合并一遍用户定义的默认属性
-  var _getCompProps = (0, _utils.getCompProps)('Col', userDefaultProps, props),
-    xs = _getCompProps.xs,
-    sm = _getCompProps.sm,
-    md = _getCompProps.md,
-    lg = _getCompProps.lg,
-    xl = _getCompProps.xl,
-    flex = _getCompProps.flex,
-    span = _getCompProps.span,
-    pull = _getCompProps.pull,
-    push = _getCompProps.push,
-    style = _getCompProps.style,
-    order = _getCompProps.order,
-    offset = _getCompProps.offset,
-    winWidth = _getCompProps.winWidth,
-    children = _getCompProps.children,
-    className = _getCompProps.className,
-    customPrefixcls = _getCompProps.prefixCls;
+  var _a = (0, _utils.getCompProps)('Col', userDefaultProps, props),
+    xs = _a.xs,
+    sm = _a.sm,
+    md = _a.md,
+    lg = _a.lg,
+    xl = _a.xl,
+    flex = _a.flex,
+    span = _a.span,
+    pull = _a.pull,
+    push = _a.push,
+    style = _a.style,
+    order = _a.order,
+    offset = _a.offset,
+    children = _a.children,
+    className = _a.className,
+    customPrefixcls = _a.prefixCls,
+    others = __rest(_a, ["xs", "sm", "md", "lg", "xl", "flex", "span", "pull", "push", "style", "order", "offset", "children", "className", "prefixCls"]);
+  var rowGroup = (0, _react.useContext)(_row.GapContext);
+  var mergedWinWidth = rowGroup.winWidth;
+  var gap = rowGroup.gap;
   // 浏览器名称
-  var isSogou = (0, _testBrowserType.testBrowserType)(/^sogou/i, 0) || /Trident|MSIE/.test(navigator.userAgent);
+  var isSogouOrIE = (0, _testBrowserType.testBrowserType)(/^sogou/i, 0) || /Trident|MSIE/.test(navigator.userAgent);
+  var colGapStyle = {
+    padding: "0 ".concat(gap.h / 2, "px")
+  };
+  if (isSogouOrIE && gap.v) colGapStyle.marginBottom = gap.v;
   // className前缀
   var prefixCls = getPrefixCls(pkgPrefixCls, 'col', customPrefixcls);
   var columns = 24;
@@ -52,23 +69,23 @@ var Col = function Col(props) {
     offset: offset,
     order: order
   };
-  if (xs && winWidth > 0) {
+  if (xs && mergedWinWidth > 0) {
     if (xs.constructor === Number) base.span = xs;
     if (xs.constructor === Object) base = (0, _extends2.default)((0, _extends2.default)({}, base), xs);
   }
-  if (sm && winWidth >= 600) {
+  if (sm && mergedWinWidth >= 600) {
     if (sm.constructor === Number) base.span = sm;
     if (sm.constructor === Object) base = (0, _extends2.default)((0, _extends2.default)({}, base), sm);
   }
-  if (md && winWidth >= 1024) {
+  if (md && mergedWinWidth >= 1024) {
     if (md.constructor === Number) base.span = md;
     if (md.constructor === Object) base = (0, _extends2.default)((0, _extends2.default)({}, base), md);
   }
-  if (lg && winWidth >= 1280) {
+  if (lg && mergedWinWidth >= 1280) {
     if (lg.constructor === Number) base.span = lg;
     if (lg.constructor === Object) base = (0, _extends2.default)((0, _extends2.default)({}, base), lg);
   }
-  if (xl && winWidth >= 1920) {
+  if (xl && mergedWinWidth >= 1920) {
     if (xl.constructor === Number) base.span = xl;
     if (xl.constructor === Object) base = (0, _extends2.default)((0, _extends2.default)({}, base), xl);
   }
@@ -88,20 +105,18 @@ var Col = function Col(props) {
       }
     }
   }
-  var styleString = (0, _extends2.default)({
+  var styleString = (0, _extends2.default)((0, _extends2.default)({
     flex: flexstr,
     maxWidth: width,
     order: base.order,
     left: base.push && base.push / columns * 100 + '%',
     right: base.pull && base.pull / columns * 100 + '%',
     marginLeft: base.offset && base.offset / columns * 100 + '%'
-  }, style);
-  return /*#__PURE__*/React.createElement("div", {
-    className: (0, _classnames.default)(prefixCls, className, {
-      'sogou-col': isSogou
-    }),
+  }, colGapStyle), style);
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+    className: (0, _classnames.default)(prefixCls, className),
     style: styleString
-  }, children);
+  }, others), children);
 };
 Col.displayName = 'Col';
 var _default = Col;

package/lib/grid/row.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 declare type Align = 'top' | 'middle' | 'bottom' | 'stretch';
 declare type Justify = 'start' | 'end' | 'center' | 'space-around' | 'space-between';
 interface gutterObject {
@@ -17,5 +17,13 @@ export interface RowProps {
     style?: React.CSSProperties;
     gutter?: number | gutterObject | Array<number | gutterObject>;
 }
+export interface GridContext {
+    gap: {
+        v: number;
+        h: number;
+    };
+    winWidth: number;
+}
+export declare const GapContext: React.Context<GridContext>;
 declare const Row: React.FC<RowProps>;
 export default Row;

package/lib/grid/row.js

@@ -7,11 +7,10 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+exports.default = exports.GapContext = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
-var React = _interopRequireWildcard(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _utils = require("../_utils");
 var _configProvider = require("../config-provider");
@@ -33,9 +32,16 @@ function getGap(gutter, width) {
   if (xl && width >= 1920) gap = xl;
   return gap;
 }
+var GapContext = /*#__PURE__*/(0, _react.createContext)({
+  gap: {
+    h: 0,
+    v: 0
+  },
+  winWidth: window.innerWidth
+});
+exports.GapContext = GapContext;
 var Row = function Row(props) {
-  var _context;
-  var _React$useContext = React.useContext(_configProvider.ConfigContext),
+  var _React$useContext = _react.default.useContext(_configProvider.ConfigContext),
     getPrefixCls = _React$useContext.getPrefixCls,
     pkgPrefixCls = _React$useContext.prefixCls,
     userDefaultProps = _React$useContext.compDefaultProps;
@@ -50,10 +56,10 @@ var Row = function Row(props) {
     justify = _getCompProps.justify,
     customPrefixcls = _getCompProps.prefixCls;
   // 浏览器名称
-  var isSogou = (0, _testBrowserType.testBrowserType)(/^sogou/i, 0) || /Trident|MSIE/.test(navigator.userAgent);
+  var isSogouOrIe = (0, _testBrowserType.testBrowserType)(/^sogou/i, 0) || /Trident|MSIE/.test(navigator.userAgent);
   // className前缀
   var prefixCls = getPrefixCls(pkgPrefixCls, 'row', customPrefixcls);
-  var _React$useState = React.useState(window.innerWidth),
+  var _React$useState = _react.default.useState(window.innerWidth),
     _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
     winWidth = _React$useState2[0],
     setWinWidth = _React$useState2[1];
@@ -82,9 +88,10 @@ var Row = function Row(props) {
     }
   }
   var rowStyle = {
-    '--cgap': "".concat(gap.h, "px")
+    'row-gap': "".concat(gap.v, "px"),
+    margin: "0 ".concat(-1 * gap.h, "px")
   };
-  if (gap.v) rowStyle['--rgap'] = "".concat(gap.v, "px");
+  if (gap.v && isSogouOrIe) rowStyle['margin-bottom'] = "".concat(-1 * gap.v / 2, "px");
   var toalign = {
     top: 'flex-start',
     middle: 'center',
@@ -94,22 +101,21 @@ var Row = function Row(props) {
     start: 'flex-start',
     end: 'flex-end'
   };
-  var styleString = (0, _extends2.default)((0, _extends2.default)((0, _extends2.default)({}, style), rowStyle), {
+  var styleString = (0, _extends2.default)((0, _extends2.default)((0, _extends2.default)({}, rowStyle), style), {
     alignItems: toalign[align] || align,
     justifyContent: tojustify[justify] || justify
   });
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement(GapContext.Provider, {
+    value: {
+      gap: gap,
+      winWidth: winWidth
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)(prefixCls, className, {
       nowrap: !wrap
-    }, {
-      'sogou-row': isSogou
     }),
     style: styleString
-  }, (0, _map.default)(_context = React.Children).call(_context, children, function (child) {
-    return /*#__PURE__*/React.cloneElement(child, {
-      winWidth: winWidth
-    });
-  }));
+  }, children));
 };
 Row.displayName = 'Row';
 var _default = Row;