@qn-pandora/pandora-component 5.1.0 → 5.1.2

package/es/components/Drawer/index.d.ts

@@ -33,7 +33,7 @@ export declare type IDrawerProps = Overwrite<DrawerProps, {
     /**
      * 是否可见
      */
-    visible?: boolean;
+    open?: boolean;
     /**
      * 宽
      */
@@ -52,7 +52,7 @@ export declare type IDrawerProps = Overwrite<DrawerProps, {
     zIndex?: number;
     getContainer?: string | HTMLElement | getContainerFunc | false;
     onClose?: (e: EventType | null) => void;
-    afterVisibleChange?: (visible: boolean) => void;
+    afterOpenChange?: (open: boolean) => void;
     /**
      * 是否允许拖拽
      */
@@ -126,7 +126,7 @@ declare const _default: (props: {
     /**
      * 是否可见
      */
-    visible?: boolean | undefined;
+    open?: boolean | undefined;
     /**
      * 宽
      */
@@ -145,7 +145,7 @@ declare const _default: (props: {
     zIndex?: number | undefined;
     getContainer?: string | false | HTMLElement | getContainerFunc | undefined;
     onClose?: ((e: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLDivElement | HTMLButtonElement, MouseEvent> | null) => void) | undefined;
-    afterVisibleChange?: ((visible: boolean) => void) | undefined;
+    afterOpenChange?: ((open: boolean) => void) | undefined;
     /**
      * 是否允许拖拽
      */
@@ -153,7 +153,7 @@ declare const _default: (props: {
     /**
      * 关闭按钮显示的位置，默认left
      */
-    closeIconPlacement?: import("antd/es/collapse/Collapse").ExpandIconPosition;
+    closeIconPlacement?: "left" | "right" | undefined;
     /**
      * 无遮罩时点击空白处中的哪些元素不关闭
      */
@@ -164,7 +164,7 @@ declare const _default: (props: {
      */
     showFullScreen?: boolean | undefined;
     onScreenFullChange?: ((showFullScreen: boolean) => void) | undefined;
-} & Pick<DrawerProps, "autoFocus" | "style" | "prefixCls" | "footer" | "extra" | "bodyStyle" | "forceRender" | "push" | "keyboard" | "destroyOnClose" | "closeIcon" | "drawerStyle" | "headerStyle" | "contentWrapperStyle" | "handler" | "footerStyle" | "level" | "levelMove"> & {
+} & Pick<DrawerProps, "onClick" | "autoFocus" | "id" | "style" | "children" | "onKeyDown" | "onKeyUp" | "onMouseEnter" | "onMouseLeave" | "onMouseOver" | "prefixCls" | "footer" | "visible" | "afterVisibleChange" | "motion" | "extra" | "bodyStyle" | "forceRender" | "keyboard" | "rootClassName" | "destroyOnClose" | "closeIcon" | "push" | "rootStyle" | "contentWrapperStyle" | "maskClassName" | "maskMotion" | "drawerStyle" | "headerStyle" | "footerStyle"> & {
     children?: React.ReactNode;
 } & {
     bodyStyle?: React.CSSProperties | undefined;

package/es/components/Drawer/index.js

@@ -136,10 +136,10 @@ var Drawer = /** @class */ (function (_super) {
     };
     Drawer.prototype.onMouseClick = function (e) {
         var _a;
-        var _b = this.props, mask = _b.mask, maskClosable = _b.maskClosable, nonCloseSelector = _b.nonCloseSelector, visible = _b.visible;
+        var _b = this.props, mask = _b.mask, maskClosable = _b.maskClosable, nonCloseSelector = _b.nonCloseSelector, open = _b.open;
         if (this.isResizing)
             return;
-        if (mask === false && maskClosable && visible) {
+        if (mask === false && maskClosable && open) {
             var currentEl = e.target;
             var shouldClose = true;
             while (currentEl) {
@@ -204,10 +204,10 @@ var Drawer = /** @class */ (function (_super) {
     };
     Drawer.prototype.render = function () {
         var _a;
-        var _b = this.props, width = _b.width, className = _b.className, children = _b.children, canDrag = _b.canDrag, visible = _b.visible, closable = _b.closable, extra = _b.extra, size = _b.size, onClose = _b.onClose, other = __rest(_b, ["width", "className", "children", "canDrag", "visible", "closable", "extra", "size", "onClose"]);
+        var _b = this.props, width = _b.width, className = _b.className, children = _b.children, canDrag = _b.canDrag, open = _b.open, closable = _b.closable, extra = _b.extra, size = _b.size, onClose = _b.onClose, other = __rest(_b, ["width", "className", "children", "canDrag", "open", "closable", "extra", "size", "onClose"]);
         return (React.createElement(BaseDrawer, __assign({ className: classnames(this.drawerId, SDK_PREFIX + "-drawer", className, (_a = {},
                 _a[SDK_PREFIX + "-drawer-no-mask"] = this.props.mask === false,
-                _a)), width: this.isFullscreen ? '100%' : this.realWidth || 800, zIndex: 1200, visible: visible, closable: this.closable, extra: this.extra, closeIcon: React.createElement(CloseIcon, { className: SDK_PREFIX + "-drawer-close-icon", onClick: this.handleClose, getPopupContainer: this.getIconPopupContainer }), onClose: this.handleClose }, other),
+                _a)), width: this.isFullscreen ? '100%' : this.realWidth || 800, zIndex: 1200, open: open, closable: this.closable, extra: this.extra, closeIcon: React.createElement(CloseIcon, { className: SDK_PREFIX + "-drawer-close-icon", onClick: this.handleClose, getPopupContainer: this.getIconPopupContainer }), onClose: this.handleClose }, other),
             canDrag && (React.createElement("div", { className: SDK_PREFIX + "-scroll-handler", onMouseDown: this.onMouseDown })),
             children));
     };

package/es/components/Drawer/style.css

@@ -4,131 +4,113 @@
 /* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
 .ant-drawer {
   position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   z-index: 1200;
-  width: 0%;
-  height: 100%;
-  -webkit-transition: width 0s ease 0.3s, height 0s ease 0.3s;
-  transition: width 0s ease 0.3s, height 0s ease 0.3s;
+  pointer-events: none;
 }
-.ant-drawer-content-wrapper {
+.ant-drawer-inline {
   position: absolute;
-  width: 100%;
-  height: 100%;
-  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-box-shadow 0.3s cubic-bezier(0.23, 1, 0.32, 1);
-  transition: -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-box-shadow 0.3s cubic-bezier(0.23, 1, 0.32, 1);
-  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.3s cubic-bezier(0.23, 1, 0.32, 1);
-  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-box-shadow 0.3s cubic-bezier(0.23, 1, 0.32, 1);
 }
-.ant-drawer .ant-drawer-content {
-  width: 100%;
-  height: 100%;
-}
-.ant-drawer-left,
-.ant-drawer-right {
+.ant-drawer-mask {
+  position: absolute;
   top: 0;
-  width: 0%;
-  height: 100%;
-}
-.ant-drawer-left .ant-drawer-content-wrapper,
-.ant-drawer-right .ant-drawer-content-wrapper {
-  height: 100%;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1200;
+  background: rgba(0, 0, 0, 0.45);
+  pointer-events: auto;
 }
-.ant-drawer-left.ant-drawer-open,
-.ant-drawer-right.ant-drawer-open {
-  width: 100%;
-  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
-  transition: -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
-  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
-  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+.ant-drawer-content-wrapper {
+  position: absolute;
+  z-index: 1200;
+  -webkit-transition: all 0.3s;
+  transition: all 0.3s;
 }
-.ant-drawer-left {
-  left: 0;
+.ant-drawer-content-wrapper-hidden {
+  display: none;
 }
-.ant-drawer-left .ant-drawer-content-wrapper {
+.ant-drawer-left > .ant-drawer-content-wrapper {
+  top: 0;
+  bottom: 0;
   left: 0;
-}
-.ant-drawer-left.ant-drawer-open .ant-drawer-content-wrapper {
   -webkit-box-shadow: 6px 0 16px -8px rgba(0, 0, 0, 0.08), 9px 0 28px 0 rgba(0, 0, 0, 0.05), 12px 0 48px 16px rgba(0, 0, 0, 0.03);
           box-shadow: 6px 0 16px -8px rgba(0, 0, 0, 0.08), 9px 0 28px 0 rgba(0, 0, 0, 0.05), 12px 0 48px 16px rgba(0, 0, 0, 0.03);
 }
-.ant-drawer-right {
-  right: 0;
-}
-.ant-drawer-right .ant-drawer-content-wrapper {
+.ant-drawer-right > .ant-drawer-content-wrapper {
+  top: 0;
   right: 0;
-}
-.ant-drawer-right.ant-drawer-open .ant-drawer-content-wrapper {
+  bottom: 0;
   -webkit-box-shadow: -6px 0 16px -8px rgba(0, 0, 0, 0.08), -9px 0 28px 0 rgba(0, 0, 0, 0.05), -12px 0 48px 16px rgba(0, 0, 0, 0.03);
           box-shadow: -6px 0 16px -8px rgba(0, 0, 0, 0.08), -9px 0 28px 0 rgba(0, 0, 0, 0.05), -12px 0 48px 16px rgba(0, 0, 0, 0.03);
 }
-.ant-drawer-right.ant-drawer-open.no-mask {
-  right: 1px;
-  -webkit-transform: translateX(1px);
-          transform: translateX(1px);
-}
-.ant-drawer-top,
-.ant-drawer-bottom {
-  left: 0;
-  width: 100%;
-  height: 0%;
-}
-.ant-drawer-top .ant-drawer-content-wrapper,
-.ant-drawer-bottom .ant-drawer-content-wrapper {
-  width: 100%;
-}
-.ant-drawer-top.ant-drawer-open,
-.ant-drawer-bottom.ant-drawer-open {
-  height: 100%;
-  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
-  transition: -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
-  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
-  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
-}
-.ant-drawer-top {
+.ant-drawer-top > .ant-drawer-content-wrapper {
   top: 0;
-}
-.ant-drawer-top.ant-drawer-open .ant-drawer-content-wrapper {
+  right: 0;
+  left: 0;
   -webkit-box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.08), 0 9px 28px 0 rgba(0, 0, 0, 0.05), 0 12px 48px 16px rgba(0, 0, 0, 0.03);
           box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.08), 0 9px 28px 0 rgba(0, 0, 0, 0.05), 0 12px 48px 16px rgba(0, 0, 0, 0.03);
 }
-.ant-drawer-bottom {
-  bottom: 0;
-}
-.ant-drawer-bottom .ant-drawer-content-wrapper {
+.ant-drawer-bottom > .ant-drawer-content-wrapper {
+  right: 0;
   bottom: 0;
-}
-.ant-drawer-bottom.ant-drawer-open .ant-drawer-content-wrapper {
+  left: 0;
   -webkit-box-shadow: 0 -6px 16px -8px rgba(0, 0, 0, 0.08), 0 -9px 28px 0 rgba(0, 0, 0, 0.05), 0 -12px 48px 16px rgba(0, 0, 0, 0.03);
           box-shadow: 0 -6px 16px -8px rgba(0, 0, 0, 0.08), 0 -9px 28px 0 rgba(0, 0, 0, 0.05), 0 -12px 48px 16px rgba(0, 0, 0, 0.03);
 }
-.ant-drawer-bottom.ant-drawer-open.no-mask {
-  bottom: 1px;
-  -webkit-transform: translateY(1px);
-          transform: translateY(1px);
-}
-.ant-drawer.ant-drawer-open .ant-drawer-mask {
+.ant-drawer-content {
+  width: 100%;
   height: 100%;
-  opacity: 1;
-  -webkit-transition: none;
-  transition: none;
-  -webkit-animation: antdDrawerFadeIn 0.3s cubic-bezier(0.23, 1, 0.32, 1);
-          animation: antdDrawerFadeIn 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+  overflow: auto;
+  background: #ffffff;
   pointer-events: auto;
 }
-.ant-drawer-title {
-  margin: 0;
-  color: #333;
-  font-weight: 500;
+.ant-drawer-wrapper-body {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+.ant-drawer-header {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 0;
+      -ms-flex: 0;
+          flex: 0;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  padding: 16px 24px;
   font-size: 16px;
   line-height: 22px;
+  border-bottom: 1px solid #e5e5e5;
 }
-.ant-drawer-content {
-  position: relative;
-  z-index: 1;
-  overflow: auto;
-  background-color: #ffffff;
-  background-clip: padding-box;
-  border: 0;
+.ant-drawer-header-title {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  min-width: 0;
+  min-height: 0;
+}
+.ant-drawer-extra {
+  -webkit-box-flex: 0;
+      -ms-flex: none;
+          flex: none;
 }
 .ant-drawer-close {
   display: inline-block;
@@ -154,58 +136,24 @@
   color: rgba(0, 0, 0, 0.75);
   text-decoration: none;
 }
-.ant-drawer-header {
-  position: relative;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
-  padding: 16px 24px;
-  color: rgba(0, 0, 0, 0.65);
-  background: #ffffff;
-  border-bottom: 1px solid #e5e5e5;
-  border-radius: 2px 2px 0 0;
-}
-.ant-drawer-header-title {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
-}
-.ant-drawer-header-close-only {
-  padding-bottom: 0;
-  border: none;
-}
-.ant-drawer-wrapper-body {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-flow: column nowrap;
-          flex-flow: column nowrap;
-  width: 100%;
-  height: 100%;
+.ant-drawer-title {
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  margin: 0;
+  color: #333;
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 22px;
 }
 .ant-drawer-body {
   -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
+      -ms-flex: 1;
+          flex: 1;
+  min-width: 0;
+  min-height: 0;
   padding: 24px;
   overflow: auto;
-  font-size: 14px;
-  line-height: 1.5715;
-  word-wrap: break-word;
 }
 .ant-drawer-footer {
   -ms-flex-negative: 0;
@@ -213,36 +161,157 @@
   padding: 10px 16px;
   border-top: 1px solid #e5e5e5;
 }
-.ant-drawer-mask {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 0;
-  background-color: rgba(0, 0, 0, 0.45);
+.panel-motion-enter-start,
+.panel-motion-appear-start,
+.panel-motion-leave-start {
+  -webkit-transition: none;
+  transition: none;
+}
+.panel-motion-enter-active,
+.panel-motion-appear-active,
+.panel-motion-leave-active {
+  -webkit-transition: all 0.3s;
+  transition: all 0.3s;
+}
+.ant-drawer-mask-motion-enter-active,
+.ant-drawer-mask-motion-appear-active,
+.ant-drawer-mask-motion-leave-active {
+  -webkit-transition: all 0.3s;
+  transition: all 0.3s;
+}
+.ant-drawer-mask-motion-enter,
+.ant-drawer-mask-motion-appear {
   opacity: 0;
-  -webkit-transition: opacity 0.3s linear, height 0s ease 0.3s;
-  transition: opacity 0.3s linear, height 0s ease 0.3s;
-  pointer-events: none;
 }
-.ant-drawer .ant-picker-clear {
-  background: #ffffff;
+.ant-drawer-mask-motion-enter-active,
+.ant-drawer-mask-motion-appear-active {
+  opacity: 1;
+}
+.ant-drawer-mask-motion-leave {
+  opacity: 1;
 }
-@-webkit-keyframes antdDrawerFadeIn {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-@keyframes antdDrawerFadeIn {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
+.ant-drawer-mask-motion-leave-active {
+  opacity: 0;
+}
+.ant-drawer-panel-motion-left-enter-start,
+.ant-drawer-panel-motion-left-appear-start,
+.ant-drawer-panel-motion-left-leave-start {
+  -webkit-transition: none;
+  transition: none;
+}
+.ant-drawer-panel-motion-left-enter-active,
+.ant-drawer-panel-motion-left-appear-active,
+.ant-drawer-panel-motion-left-leave-active {
+  -webkit-transition: all 0.3s;
+  transition: all 0.3s;
+}
+.ant-drawer-panel-motion-left-enter-start,
+.ant-drawer-panel-motion-left-appear-start {
+  -webkit-transform: translateX(-100%) !important;
+          transform: translateX(-100%) !important;
+}
+.ant-drawer-panel-motion-left-enter-active,
+.ant-drawer-panel-motion-left-appear-active {
+  -webkit-transform: translateX(0);
+          transform: translateX(0);
+}
+.ant-drawer-panel-motion-left-leave {
+  -webkit-transform: translateX(0);
+          transform: translateX(0);
+}
+.ant-drawer-panel-motion-left-leave-active {
+  -webkit-transform: translateX(-100%);
+          transform: translateX(-100%);
+}
+.ant-drawer-panel-motion-right-enter-start,
+.ant-drawer-panel-motion-right-appear-start,
+.ant-drawer-panel-motion-right-leave-start {
+  -webkit-transition: none;
+  transition: none;
+}
+.ant-drawer-panel-motion-right-enter-active,
+.ant-drawer-panel-motion-right-appear-active,
+.ant-drawer-panel-motion-right-leave-active {
+  -webkit-transition: all 0.3s;
+  transition: all 0.3s;
+}
+.ant-drawer-panel-motion-right-enter-start,
+.ant-drawer-panel-motion-right-appear-start {
+  -webkit-transform: translateX(100%) !important;
+          transform: translateX(100%) !important;
+}
+.ant-drawer-panel-motion-right-enter-active,
+.ant-drawer-panel-motion-right-appear-active {
+  -webkit-transform: translateX(0);
+          transform: translateX(0);
+}
+.ant-drawer-panel-motion-right-leave {
+  -webkit-transform: translateX(0);
+          transform: translateX(0);
+}
+.ant-drawer-panel-motion-right-leave-active {
+  -webkit-transform: translateX(100%);
+          transform: translateX(100%);
+}
+.ant-drawer-panel-motion-top-enter-start,
+.ant-drawer-panel-motion-top-appear-start,
+.ant-drawer-panel-motion-top-leave-start {
+  -webkit-transition: none;
+  transition: none;
+}
+.ant-drawer-panel-motion-top-enter-active,
+.ant-drawer-panel-motion-top-appear-active,
+.ant-drawer-panel-motion-top-leave-active {
+  -webkit-transition: all 0.3s;
+  transition: all 0.3s;
+}
+.ant-drawer-panel-motion-top-enter-start,
+.ant-drawer-panel-motion-top-appear-start {
+  -webkit-transform: translateY(-100%) !important;
+          transform: translateY(-100%) !important;
+}
+.ant-drawer-panel-motion-top-enter-active,
+.ant-drawer-panel-motion-top-appear-active {
+  -webkit-transform: translateY(0);
+          transform: translateY(0);
+}
+.ant-drawer-panel-motion-top-leave {
+  -webkit-transform: translateY(0);
+          transform: translateY(0);
+}
+.ant-drawer-panel-motion-top-leave-active {
+  -webkit-transform: translateY(-100%);
+          transform: translateY(-100%);
+}
+.ant-drawer-panel-motion-bottom-enter-start,
+.ant-drawer-panel-motion-bottom-appear-start,
+.ant-drawer-panel-motion-bottom-leave-start {
+  -webkit-transition: none;
+  transition: none;
+}
+.ant-drawer-panel-motion-bottom-enter-active,
+.ant-drawer-panel-motion-bottom-appear-active,
+.ant-drawer-panel-motion-bottom-leave-active {
+  -webkit-transition: all 0.3s;
+  transition: all 0.3s;
+}
+.ant-drawer-panel-motion-bottom-enter-start,
+.ant-drawer-panel-motion-bottom-appear-start {
+  -webkit-transform: translateY(100%) !important;
+          transform: translateY(100%) !important;
+}
+.ant-drawer-panel-motion-bottom-enter-active,
+.ant-drawer-panel-motion-bottom-appear-active {
+  -webkit-transform: translateY(0);
+          transform: translateY(0);
+}
+.ant-drawer-panel-motion-bottom-leave {
+  -webkit-transform: translateY(0);
+          transform: translateY(0);
+}
+.ant-drawer-panel-motion-bottom-leave-active {
+  -webkit-transform: translateY(100%);
+          transform: translateY(100%);
 }
 .ant-drawer-rtl {
   direction: rtl;
@@ -251,6 +320,9 @@
   margin-right: 0;
   margin-left: 12px;
 }
+.pandora-sdk-drawer.pandora-sdk-drawer-no-mask {
+  background-color: transparent;
+}
 .pandora-sdk-drawer .ant-drawer-content-wrapper {
   width: 50%;
   min-width: 300px;
@@ -266,6 +338,9 @@
 .pandora-sdk-drawer .ant-drawer-header-title {
   overflow: hidden;
 }
+.pandora-sdk-drawer .ant-drawer-body {
+  font-size: 14px;
+}
 .pandora-sdk-drawer-size-small {
   max-width: 38%;
 }