@kdcloudjs/kdesign 1.2.0 → 1.2.3

package/lib/carousel/fadeList.js

@@ -9,11 +9,15 @@ exports.FadeList = void 0;
 
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var FadeList = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var _context;
+
   var items = props.items,
       parentPrefixCls = props.parentPrefixCls,
       needAnimation = props.needAnimation,
@@ -22,15 +26,16 @@ var FadeList = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
   var itemRef = _react.default.useRef(null);
 
-  var fadeListPrefixCls = "".concat(parentPrefixCls, "-fadelist");
+  var fadeListPrefixCls = "".concat(parentPrefixCls, "-list-fade");
+  var listPrefixCls = "".concat(parentPrefixCls, "-list");
 
   var renderItems = function renderItems() {
     return (0, _map.default)(items).call(items, function (item, index) {
-      var opacityClassName = index === currentIndex ? "".concat(fadeListPrefixCls, "-item-not-hidden") : "".concat(fadeListPrefixCls, "-item-hidden");
-      var animationClassName = needAnimation ? "".concat(fadeListPrefixCls, "-item-animation") : "".concat(fadeListPrefixCls, "-item-none-animation");
+      var opacityClassName = index === currentIndex ? "".concat(listPrefixCls, "-item-not-hidden") : "".concat(listPrefixCls, "-item-hidden");
+      var animationClassName = needAnimation ? "".concat(listPrefixCls, "-item-animation") : "".concat(listPrefixCls, "-item-none-animation");
       var posx = -1 * index * itemWidth;
       return /*#__PURE__*/_react.default.createElement("li", {
-        className: (0, _classnames.default)("".concat(fadeListPrefixCls, "-item"), opacityClassName, animationClassName),
+        className: (0, _classnames.default)("".concat(listPrefixCls, "-item"), opacityClassName, animationClassName),
         key: index,
         ref: itemRef,
         style: {
@@ -41,7 +46,7 @@ var FadeList = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   };
 
   return /*#__PURE__*/_react.default.createElement("ul", {
-    className: fadeListPrefixCls,
+    className: (0, _concat.default)(_context = "".concat(listPrefixCls, " ")).call(_context, fadeListPrefixCls),
     ref: ref
   }, renderItems());
 });

package/lib/carousel/slideList.js

@@ -16,9 +16,12 @@ var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable
 var _react = _interopRequireDefault(require("react"));
 
 var SlideList = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var _context2;
+
   var items = props.items,
       parentPrefixCls = props.parentPrefixCls;
-  var slideListPrefixCls = "".concat(parentPrefixCls, "-slidelist");
+  var slideListPrefixCls = "".concat(parentPrefixCls, "-list-slide");
+  var listPrefixCls = "".concat(parentPrefixCls, "-list");
 
   var renderItems = function renderItems() {
     var _context;
@@ -28,14 +31,14 @@ var SlideList = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
     return (0, _map.default)(_items).call(_items, function (item, index) {
       return /*#__PURE__*/_react.default.createElement("li", {
-        className: "".concat(slideListPrefixCls, "-item"),
+        className: "".concat(listPrefixCls, "-item"),
         key: index
       }, item);
     });
   };
 
   return /*#__PURE__*/_react.default.createElement("ul", {
-    className: slideListPrefixCls,
+    className: (0, _concat.default)(_context2 = "".concat(listPrefixCls, " ")).call(_context2, slideListPrefixCls),
     ref: ref
   }, renderItems());
 });

package/lib/carousel/style/index.css

@@ -171,9 +171,7 @@
   -webkit-box-direction: normal;
       -ms-flex-direction: row;
           flex-direction: row;
-  -webkit-box-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
+  width: 100%;
   position: relative;
 }
 .kd-carousel-displaylist-item {
@@ -190,6 +188,71 @@
 .kd-carousel-displaylist-item-hidden {
   display: none;
 }
+.kd-carousel-list {
+  list-style: none;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  position: relative;
+}
+.kd-carousel-list-item {
+  position: relative;
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
+  height: 100%;
+  width: 100%;
+}
+.kd-carousel-list-slide .kd-carousel-list-item {
+  opacity: 1;
+  border-radius: var(--kd-c-carousel-border-radius, 0px);
+}
+.kd-carousel-list-slide .kd-carousel-list-item-animation {
+  -webkit-transition: opacity 0.3s ease;
+  transition: opacity 0.3s ease;
+}
+.kd-carousel-list-slide .kd-carousel-list-item-none-animation {
+  -webkit-transition: none;
+  transition: none;
+}
+.kd-carousel-list-slide .kd-carousel-list-item-not-hidden {
+  opacity: 1;
+}
+.kd-carousel-list-slide .kd-carousel-list-item-hidden {
+  opacity: 0;
+}
+.kd-carousel-list-fade .kd-carousel-list-item {
+  opacity: 1;
+}
+.kd-carousel-list-fade .kd-carousel-list-item-animation {
+  -webkit-transition: opacity 0.3s ease;
+  transition: opacity 0.3s ease;
+}
+.kd-carousel-list-fade .kd-carousel-list-item-none-animation {
+  -webkit-transition: none;
+  transition: none;
+}
+.kd-carousel-list-fade .kd-carousel-list-item-not-hidden {
+  opacity: 1;
+}
+.kd-carousel-list-fade .kd-carousel-list-item-hidden {
+  opacity: 0;
+}
+.kd-carousel-list-display .kd-carousel-list-item {
+  display: block;
+}
+.kd-carousel-list-display .kd-carousel-list-item-not-hidden {
+  display: block;
+}
+.kd-carousel-list-display .kd-carousel-list-item-hidden {
+  display: none;
+}
 .kd-carousel-slidebar {
   position: absolute;
 }

package/lib/carousel/style/index.less

@@ -53,7 +53,7 @@
     list-style: none;
     display: flex;
     flex-direction: row;
-    flex: 1;
+    width: 100%;
     position: relative;
     &-item {
       display: block;
@@ -69,6 +69,71 @@
       }
     }
   }
+
+  &-list {
+    list-style: none;
+    display: flex;
+    flex-direction: row;
+    flex: 1;
+    position: relative;
+
+    &-item {
+      position: relative;
+      flex-shrink: 0;
+      height: 100%;
+      width: 100%;
+    }
+
+    &-slide {
+      .@{carousel-prefix-cls}-list-item {
+        opacity: 1;
+        border-radius: @carousel-boder-radius;
+        &-animation {
+          transition: opacity 0.3s ease;
+        }
+        &-none-animation {
+          transition: none;
+        }
+        &-not-hidden {
+          opacity: 1;
+        }
+        &-hidden {
+          opacity: 0;
+        }
+      }
+    }
+
+    &-fade {
+      .@{carousel-prefix-cls}-list-item {
+        opacity: 1;
+        &-animation {
+          transition: opacity 0.3s ease;
+        }
+        &-none-animation {
+          transition: none;
+        }
+        &-not-hidden {
+          opacity: 1;
+        }
+        &-hidden {
+          opacity: 0;
+        }
+      }
+    }
+
+    &-display {
+      .@{carousel-prefix-cls}-list-item {
+        display: block;
+        &-not-hidden {
+          display: block;
+        }
+        &-hidden {
+          display: none;
+        }
+      }
+    }
+  }
+
   &-slidebar {
     position: absolute;
     &-left {
@@ -87,7 +152,7 @@
       .horizontal;
       top: @carousel-dots-margin-top;
     }
-    
+
     &-dot > button {
       display: block;
       border-radius: @carousel-dots-boder-radius;

package/lib/collapse/panel.d.ts

@@ -8,6 +8,7 @@ export interface PanelProps {
     expandIconPosition?: IconPositionType;
     onChange?: (key: keyType) => void;
     extra?: React.ReactNode | ((props: PanelProps) => React.ReactNode);
+    assist?: React.ReactNode | ((props: PanelProps) => React.ReactNode);
     expand?: boolean;
     defaultExpand?: boolean;
     children?: React.ReactNode;

package/lib/collapse/panel.js

@@ -34,7 +34,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 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 Panel = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  var _classNames5, _classNames6, _classNames7;
+  var _classNames6, _classNames7, _classNames8;
 
   var _React$useContext = _react.default.useContext(_ConfigContext.default),
       getPrefixCls = _React$useContext.getPrefixCls,
@@ -44,6 +44,7 @@ var Panel = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _getCompProps = (0, _utils.getCompProps)('CollapsePanel', userDefaultProps, props),
       disabled = _getCompProps.disabled,
       extra = _getCompProps.extra,
+      assist = _getCompProps.assist,
       header = _getCompProps.header,
       onChange = _getCompProps.onChange,
       panelKey = _getCompProps.panelKey,
@@ -114,6 +115,17 @@ var Panel = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     }, renderReactNode(extra)), expandIconPosition === 'right' ? renderIcon() : null);
   };
 
+  var renderMiddle = function renderMiddle() {
+    var _classNames5;
+
+    var className = (0, _classnames.default)((_classNames5 = {}, (0, _defineProperty2.default)(_classNames5, "".concat(panelPrefixCls, "-middle"), true), (0, _defineProperty2.default)(_classNames5, "".concat(panelPrefixCls, "-disabled"), disabled), _classNames5));
+    return /*#__PURE__*/_react.default.createElement("span", {
+      className: className
+    }, assist && /*#__PURE__*/_react.default.createElement("span", {
+      className: "".concat(panelPrefixCls, "-assist")
+    }, renderReactNode(assist)));
+  };
+
   var renderReactNode = function renderReactNode(reactNode) {
     if (typeof reactNode === 'function') {
       return reactNode();
@@ -122,9 +134,9 @@ var Panel = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     return reactNode;
   };
 
-  var rootClassName = (0, _classnames.default)(className, (_classNames5 = {}, (0, _defineProperty2.default)(_classNames5, "".concat(panelPrefixCls), true), (0, _defineProperty2.default)(_classNames5, "".concat(panelPrefixCls, "-border"), bordered), (0, _defineProperty2.default)(_classNames5, "".concat(panelPrefixCls, "-opened"), expand), _classNames5));
-  var topClassName = (0, _classnames.default)((_classNames6 = {}, (0, _defineProperty2.default)(_classNames6, "".concat(panelPrefixCls, "-top"), true), (0, _defineProperty2.default)(_classNames6, "".concat(panelPrefixCls, "-disabled"), disabled), (0, _defineProperty2.default)(_classNames6, "".concat(panelPrefixCls, "-top-border"), bordered && expand), _classNames6));
-  var childrenClassName = (0, _classnames.default)((_classNames7 = {}, (0, _defineProperty2.default)(_classNames7, "".concat(panelPrefixCls, "-children"), expand), (0, _defineProperty2.default)(_classNames7, "".concat(panelPrefixCls, "-children-hide"), !expand), _classNames7));
+  var rootClassName = (0, _classnames.default)(className, (_classNames6 = {}, (0, _defineProperty2.default)(_classNames6, "".concat(panelPrefixCls), true), (0, _defineProperty2.default)(_classNames6, "".concat(panelPrefixCls, "-border"), bordered), (0, _defineProperty2.default)(_classNames6, "".concat(panelPrefixCls, "-opened"), expand), _classNames6));
+  var topClassName = (0, _classnames.default)((_classNames7 = {}, (0, _defineProperty2.default)(_classNames7, "".concat(panelPrefixCls, "-top"), true), (0, _defineProperty2.default)(_classNames7, "".concat(panelPrefixCls, "-disabled"), disabled), (0, _defineProperty2.default)(_classNames7, "".concat(panelPrefixCls, "-top-border"), bordered && expand), _classNames7));
+  var childrenClassName = (0, _classnames.default)((_classNames8 = {}, (0, _defineProperty2.default)(_classNames8, "".concat(panelPrefixCls, "-children"), expand), (0, _defineProperty2.default)(_classNames8, "".concat(panelPrefixCls, "-children-hide"), !expand), _classNames8));
   var childrenBorderedClassName = (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(panelPrefixCls, "-children-bordered"), bordered));
 
   var runExpandAnimation = function runExpandAnimation(element) {
@@ -175,7 +187,7 @@ var Panel = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     ref: panelPrefixClsRef
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: topClassName
-  }, renderLeft(), renderRight()), /*#__PURE__*/_react.default.createElement("div", {
+  }, renderLeft(), renderMiddle(), renderRight()), /*#__PURE__*/_react.default.createElement("div", {
     className: childrenClassName,
     ref: childrenRef
   }, /*#__PURE__*/_react.default.createElement("div", {

package/lib/collapse/style/index.css

@@ -130,13 +130,22 @@
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  padding: var(--kd-c-collapse-header-spacing-padding, 12px);
+  padding: var(--kd-c-collapse-header-spacing-padding, 8px 50px 8px 28px);
   background: var(--kd-c-collapse-header-color-background, rgba(0, 0, 0, 0));
 }
 .kd-collapse-panel-top-border {
   border-bottom: var(--kd-c-collapse-border-width, 1px) solid var(--kd-c-collapse-color-border-strong-2, var(--kd-g-color-border-strong-2, #d9d9d9));
 }
 .kd-collapse-panel-left {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  line-height: 1.5;
+}
+.kd-collapse-panel-middle {
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
@@ -144,16 +153,23 @@
       -ms-flex-align: center;
           align-items: center;
   -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
+      -ms-flex: 1;
+          flex: 1;
+  margin-left: 22px;
+  color: var(--kd-c-collapse-header-color-text-secondary, var(--kd-g-color-text-secondary, #666));
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .kd-collapse-panel-right {
+  margin-left: 40px;
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
+  white-space: nowrap;
 }
 .kd-collapse-panel-extra,
 .kd-collapse-panel-header {
@@ -164,7 +180,16 @@
       -ms-flex-align: center;
           align-items: center;
   color: var(--kd-c-collapse-header-color-text-primary, var(--kd-g-color-text-primary, #212121));
-  font-size: var(--kd-c-collapse-header-font-size, var(--kd-g-font-size-middle, 14px));
+  font-size: var(--kd-c-collapse-header-font-size, 16px);
+}
+.kd-collapse-panel-header {
+  display: inline-block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.kd-collapse-panel-header:hover {
+  color: var(--kd-c-collapse-header-color-text-hover, #666666);
 }
 .kd-collapse-panel-icon {
   -webkit-box-align: center;
@@ -174,6 +199,7 @@
   display: -ms-inline-flexbox;
   display: inline-flex;
   margin-right: var(--kd-c-collapse-spacing-margin-right, 6px);
+  font-size: var(--kd-c-collapse-icon-font-size, 16px);
 }
 .kd-collapse-panel-icon:hover,
 .kd-collapse-panel-left:hover {
@@ -198,7 +224,7 @@
 .kd-collapse-panel-children {
   overflow: hidden;
   opacity: 0;
-  padding: var(--kd-c-collapse-content-spacing-padding, 0 16px);
+  padding: var(--kd-c-collapse-content-spacing-padding, 0 50px);
   color: var(--kd-c-collapse-content-color-text-primary, var(--kd-g-color-text-primary, #212121));
   font-size: var(--kd-c-collapse-content-font-size, var(--kd-g-font-size-middle, 14px));
   -webkit-transition: height var(--kd-c-collapse-motion-duration, var(--kd-g-duration, 0.3s)), opacity var(--kd-c-collapse-motion-duration, var(--kd-g-duration, 0.3s));
@@ -209,7 +235,7 @@
   overflow: hidden;
   opacity: 0;
   height: 0;
-  padding: var(--kd-c-collapse-content-spacing-padding, 0 16px);
+  padding: var(--kd-c-collapse-content-spacing-padding, 0 50px);
   color: var(--kd-c-collapse-content-color-text-primary, var(--kd-g-color-text-primary, #212121));
   font-size: var(--kd-c-collapse-content-font-size, var(--kd-g-font-size-middle, 14px));
   -webkit-transition: height var(--kd-c-collapse-motion-duration, var(--kd-g-duration, 0.3s)), opacity calc(var(--kd-c-collapse-motion-duration, var(--kd-g-duration, 0.3s)) / 2);

package/lib/collapse/style/index.less

@@ -27,11 +27,23 @@
     &-left {
       display: inline-flex;
       align-items: center;
-      flex-grow: 1;
+      line-height: 1.5;
+    }
+    &-middle {
+      display: inline-flex;
+      align-items: center;
+      flex: 1;
+      margin-left: 22px;
+      color: @collapse-header-font-color-secondary;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
     &-right {
+      margin-left: 40px;
       display: inline-flex;
       align-items: center;
+      white-space: nowrap;
     }
     &-extra,
     &-header {
@@ -40,10 +52,21 @@
       color: @collapse-header-font-color;
       font-size: @collapse-header-font-size;
     }
+
+    &-header {
+      display: inline-block;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      &:hover {
+        color: @collapse-header-color-text-hover;
+      }
+    }
     &-icon {
       align-items: center;
       display: inline-flex;
       margin-right: @collapse-icon-margin-right;
+      font-size: @collapse-icon-font-size;
     }
     &-icon:hover,
     &-left:hover {

package/lib/collapse/style/token.less

@@ -2,25 +2,27 @@
 
 @collapse-prefix: '--@{kd-prefix}-c-collapse';
 
-// sizing
-@collapse-border-width: var(~'@{collapse-prefix}-border-width', 1px);
-@collapse-icon-margin-right: var(~'@{collapse-prefix}-spacing-margin-right', 6px);
-@collapse-header-padding: var(~'@{collapse-prefix}-header-spacing-padding', 12px);
-@collapse-content-bordered-padding: var(~'@{collapse-prefix}-content-bordered-spacing-padding', 12px);
-@collapse-content-padding: var(~'@{collapse-prefix}-content-spacing-padding', 0 16px);
-
 // color
 @collapse-border-color: var(~'@{collapse-prefix}-color-border-strong-2', @color-border-strong-2);
 @collapse-header-font-color: var(~'@{collapse-prefix}-header-color-text-primary', @color-text-primary);
+@collapse-header-font-color-secondary: var(~'@{collapse-prefix}-header-color-text-secondary', @color-text-secondary);
 @collapse-content-font-color: var(~'@{collapse-prefix}-content-color-text-primary', @color-text-primary);
 @collapse-disabled-color: var(~'@{collapse-prefix}-color-disabled', raba(178, 178, 178, 1));
 @collapse-header-color-background: var(~'@{collapse-prefix}-header-color-background', rgba(0, 0, 0, 0));
 @collapse-content-color-background: var(~'@{collapse-prefix}-content-color-background', rgba(0, 0, 0, 0));
-
+@collapse-header-color-text-hover: var(~'@{collapse-prefix}-header-color-text-hover', #666666);
 
 // font
-@collapse-header-font-size: var(~'@{collapse-prefix}-header-font-size', @font-size-middle);
+@collapse-header-font-size: var(~'@{collapse-prefix}-header-font-size', 16px);
 @collapse-content-font-size: var(~'@{collapse-prefix}-content-font-size', @font-size-middle);
+@collapse-icon-font-size: var(~'@{collapse-prefix}-icon-font-size', 16px);
 
 // motion
-@collapse-transition-duration: var(~'@{collapse-prefix}-motion-duration', @duration-promptly);
+@collapse-transition-duration: var(~'@{collapse-prefix}-motion-duration', @duration-promptly);
+
+// sizing
+@collapse-border-width: var(~'@{collapse-prefix}-border-width', 1px);
+@collapse-icon-margin-right: var(~'@{collapse-prefix}-spacing-margin-right', 6px);
+@collapse-header-padding: var(~'@{collapse-prefix}-header-spacing-padding', 8px 50px 8px 28px);
+@collapse-content-bordered-padding: var(~'@{collapse-prefix}-content-bordered-spacing-padding', 12px);
+@collapse-content-padding: var(~'@{collapse-prefix}-content-spacing-padding', 0 50px);

package/lib/config-provider/compDefaultProps.d.ts

@@ -383,6 +383,7 @@ declare const compDefaultProps: {
         minMark: string;
         maxMark: string;
         mustInScope: boolean;
+        zeroShow: boolean;
     };
     BaseData: {
         mode: string;

package/lib/config-provider/compDefaultProps.js

@@ -415,7 +415,8 @@ var compDefaultProps = {
     borderType: 'bordered',
     minMark: '[',
     maxMark: ']',
-    mustInScope: false
+    mustInScope: false,
+    zeroShow: true
   },
   BaseData: {
     mode: 'single',

package/lib/drawer/drawer.d.ts

@@ -34,6 +34,7 @@ export interface IDrawerProps {
     titleStyle?: CSSProperties;
     visible?: boolean;
     width?: string | number;
+    height?: string | number;
     zIndex?: string | number;
 }
 declare const Drawer: React.ForwardRefExoticComponent<IDrawerProps & React.RefAttributes<unknown>>;

package/lib/drawer/drawer.js

@@ -13,20 +13,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.PlacementTypes = void 0;
 
-var _extends3 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
-
-var _endsWith = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/ends-with"));
-
 var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
 
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 
 var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
 
+var _extends3 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _index = require("../index");
@@ -57,22 +55,23 @@ exports.PlacementTypes = PlacementTypes;
 var relativePostionTypes = ['relative', 'absolute', 'fixed'];
 var horizontalPlacements = ['left', 'right'];
 var verticalPlacements = ['top', 'bottom'];
-var documentBody = document.body;
-
-function transformSize(size, placement) {
-  if (typeof size === 'string') {
-    // 只考虑px 或者 %
-    (0, _devwarning.default)(!((0, _endsWith.default)(size).call(size, 'px') && (0, _endsWith.default)(size).call(size, '%')), 'drawer', "cannot calculate drawer size: width | height for '".concat(size, "' besides px or %"));
-    if (placement === 'right' || placement === 'bottom') return size || 0;
-    return size ? '-' + size : 0;
-  }
-
-  if (placement === 'right' || placement === 'bottom') return (size || 0) + 'px';
-  return ('-' + size || 0) + 'px';
-}
+var documentBody = document.body; // function transformSize(size: string | number, placement: string) {
+//   if (typeof size === 'string') {
+//     // 只考虑px 或者 %
+//     devWarning(
+//       !(size.endsWith('px') && size.endsWith('%')),
+//       'drawer',
+//       `cannot calculate drawer size: width | height for '${size}' besides px or %`,
+//     )
+//     if (placement === 'right' || placement === 'bottom') return size || 0
+//     return size ? '-' + size : 0
+//   }
+//   if (placement === 'right' || placement === 'bottom') return (size || 0) + 'px'
+//   return ('-' + size || 0) + 'px'
+// }
 
 var InternalDrawer = function InternalDrawer(props, ref) {
-  var _classNames, _context2, _classNames2;
+  var _classNames, _context2, _context3, _classNames2;
 
   var _useContext = (0, _react.useContext)(_ConfigContext.default),
       getPrefixCls = _useContext.getPrefixCls,
@@ -100,6 +99,7 @@ var InternalDrawer = function InternalDrawer(props, ref) {
       footerClassName = drawerProps.footerClassName,
       visible = drawerProps.visible,
       width = drawerProps.width,
+      height = drawerProps.height,
       headerStyle = drawerProps.headerStyle,
       headerClassName = drawerProps.headerClassName,
       zindex = drawerProps.zIndex,
@@ -122,6 +122,7 @@ var InternalDrawer = function InternalDrawer(props, ref) {
 
 
   var containerRef = ref || /*#__PURE__*/(0, _react.createRef)();
+  var contentRef = (0, _react.useRef)(null);
   (0, _devwarning.default)(PlacementTypes.indexOf(placement) === -1, 'drawer', "cannot found drawer type '".concat(placement, "'"));
   var drawerContainer = typeof getContainer === 'function' ? getContainer() : getContainer;
   var isAtOriginalPlace = drawerContainer === false;
@@ -204,16 +205,49 @@ var InternalDrawer = function InternalDrawer(props, ref) {
       closeDrawer();
     }
   }, [maskClosable, closeDrawer]);
+  var getHorizontalBoolAndPlacementName = (0, _react.useCallback)(function () {
+    var isHorizontal = placement === 'left' || placement === 'right';
+    var placementName = "translate".concat(isHorizontal ? 'X' : 'Y');
+    return {
+      isHorizontal: isHorizontal,
+      placementName: placementName
+    };
+  }, [placement]);
+  var setDraerTransform = (0, _react.useCallback)(function (_isOpen, _placementName, _value) {
+    if (!contentRef.current) return;
+    contentRef.current.style.transform = '';
+  }, [contentRef]);
+  (0, _react.useEffect)(function () {
+    var _getHorizontalBoolAnd = getHorizontalBoolAndPlacementName(),
+        isHorizontal = _getHorizontalBoolAnd.isHorizontal,
+        placementName = _getHorizontalBoolAnd.placementName;
+
+    var contentValue = contentRef.current ? contentRef.current.getBoundingClientRect()[isHorizontal ? 'width' : 'height'] : 0;
+    var value = (isHorizontal ? width : height) || contentValue;
+
+    if (visible) {
+      setDraerTransform(visible, placementName, value);
+    }
+  }, [contentRef, getHorizontalBoolAndPlacementName, height, setDraerTransform, visible, width]);
   var drawerClasses = (0, _classnames.default)(drawerPrefixCls, className, (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(drawerPrefixCls, "-hide"), !visible), (0, _defineProperty2.default)(_classNames, "".concat(drawerPrefixCls, "-active"), visible), (0, _defineProperty2.default)(_classNames, "".concat(drawerPrefixCls, "-not-at-body"), !isBody), _classNames));
   var headerClass = "".concat(drawerPrefixCls, "-header");
+
+  var _getHorizontalBoolAnd2 = getHorizontalBoolAndPlacementName(),
+      placementName = _getHorizontalBoolAnd2.placementName;
+
+  var placementPos = placement === 'left' || placement === 'top' ? '-100%' : '100%';
+  var transform = visible ? '' : (0, _concat.default)(_context2 = "".concat(placementName, "(")).call(_context2, placementPos, ")");
   var containerStyle = (0, _extends3.default)((0, _defineProperty2.default)({}, placement, 0), (0, _includes.default)(horizontalPlacements).call(horizontalPlacements, placement) ? {
-    width: currentWidth,
-    transform: "translateX(".concat(visible ? 0 : transformSize(currentWidth, placement), ")")
-  } : {});
+    width: width,
+    transform: transform
+  } : {
+    transform: transform
+  });
 
   var container = /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)((_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, "".concat(drawerPrefixCls, "-container-box"), true), (0, _defineProperty2.default)(_classNames2, "".concat(drawerPrefixCls, "-has-container-box"), drawerContainer), (0, _defineProperty2.default)(_classNames2, (0, _concat.default)(_context2 = "".concat(drawerPrefixCls, "-container-")).call(_context2, placement), true), _classNames2)),
-    style: containerStyle
+    className: (0, _classnames.default)((_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, "".concat(drawerPrefixCls, "-container-box"), true), (0, _defineProperty2.default)(_classNames2, "".concat(drawerPrefixCls, "-has-container-box"), drawerContainer), (0, _defineProperty2.default)(_classNames2, (0, _concat.default)(_context3 = "".concat(drawerPrefixCls, "-container-")).call(_context3, placement), true), _classNames2)),
+    style: containerStyle,
+    ref: contentRef
   }, (title || closable) && /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)(headerClass, headerClassName),
     style: headerStyle