@qn-pandora/pandora-component 3.1.1 → 4.0.1

package/lib/components/DateTimePicker/DisplayInput/style.css

@@ -17,6 +17,7 @@
   border-radius: 2px;
   -webkit-transition: all 0.3s;
   transition: all 0.3s;
+  /* stylelint-disable-next-line selector-no-vendor-prefix */
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
@@ -26,12 +27,20 @@
 }
 .ant-input-affix-wrapper::-webkit-input-placeholder {
   color: #bfbfbf;
+  -webkit-user-select: none;
+          user-select: none;
 }
 .ant-input-affix-wrapper::-ms-input-placeholder {
   color: #bfbfbf;
+  -ms-user-select: none;
+      user-select: none;
 }
 .ant-input-affix-wrapper::placeholder {
   color: #bfbfbf;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
 }
 .ant-input-affix-wrapper:placeholder-shown {
   text-overflow: ellipsis;
@@ -46,11 +55,11 @@
 }
 .ant-input-affix-wrapper:focus,
 .ant-input-affix-wrapper-focused {
-  border-color: #528cde;
+  border-color: #9ca0a6;
+  -webkit-box-shadow: 0 0 0 2px rgba(122, 134, 154, 0.2);
+          box-shadow: 0 0 0 2px rgba(122, 134, 154, 0.2);
   border-right-width: 1px !important;
   outline: 0;
-  -webkit-box-shadow: 0 0 0 2px rgba(44, 109, 210, 0.2);
-          box-shadow: 0 0 0 2px rgba(44, 109, 210, 0.2);
 }
 .ant-input-rtl .ant-input-affix-wrapper:focus,
 .ant-input-rtl .ant-input-affix-wrapper-focused {
@@ -60,6 +69,9 @@
 .ant-input-affix-wrapper-disabled {
   color: rgba(0, 0, 0, 0.25);
   background-color: #f5f5f5;
+  border-color: #bfbfbf;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   cursor: not-allowed;
   opacity: 1;
 }
@@ -70,6 +82,9 @@
 .ant-input-affix-wrapper[disabled] {
   color: rgba(0, 0, 0, 0.25);
   background-color: #f5f5f5;
+  border-color: #bfbfbf;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   cursor: not-allowed;
   opacity: 1;
 }
@@ -159,7 +174,7 @@ textarea.ant-input-affix-wrapper {
   margin-left: 4px;
 }
 .anticon.ant-input-clear-icon {
-  margin: 0 4px;
+  margin: 0;
   color: rgba(0, 0, 0, 0.25);
   font-size: 12px;
   vertical-align: -1px;
@@ -176,8 +191,8 @@ textarea.ant-input-affix-wrapper {
 .anticon.ant-input-clear-icon-hidden {
   visibility: hidden;
 }
-.anticon.ant-input-clear-icon:last-child {
-  margin-right: 0;
+.anticon.ant-input-clear-icon-has-suffix {
+  margin: 0 4px;
 }
 .ant-input-affix-wrapper-textarea-with-clear-btn {
   padding: 0 !important;
@@ -213,18 +228,27 @@ textarea.ant-input-affix-wrapper {
   border-radius: 2px;
   -webkit-transition: all 0.3s;
   transition: all 0.3s;
+  /* stylelint-disable-next-line selector-no-vendor-prefix */
 }
 .ant-input::-moz-placeholder {
   opacity: 1;
 }
 .ant-input::-webkit-input-placeholder {
   color: #bfbfbf;
+  -webkit-user-select: none;
+          user-select: none;
 }
 .ant-input::-ms-input-placeholder {
   color: #bfbfbf;
+  -ms-user-select: none;
+      user-select: none;
 }
 .ant-input::placeholder {
   color: #bfbfbf;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
 }
 .ant-input:placeholder-shown {
   text-overflow: ellipsis;
@@ -239,11 +263,11 @@ textarea.ant-input-affix-wrapper {
 }
 .ant-input:focus,
 .ant-input-focused {
-  border-color: #528cde;
+  border-color: #9ca0a6;
+  -webkit-box-shadow: 0 0 0 2px rgba(122, 134, 154, 0.2);
+          box-shadow: 0 0 0 2px rgba(122, 134, 154, 0.2);
   border-right-width: 1px !important;
   outline: 0;
-  -webkit-box-shadow: 0 0 0 2px rgba(44, 109, 210, 0.2);
-          box-shadow: 0 0 0 2px rgba(44, 109, 210, 0.2);
 }
 .ant-input-rtl .ant-input:focus,
 .ant-input-rtl .ant-input-focused {
@@ -253,6 +277,9 @@ textarea.ant-input-affix-wrapper {
 .ant-input-disabled {
   color: rgba(0, 0, 0, 0.25);
   background-color: #f5f5f5;
+  border-color: #bfbfbf;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   cursor: not-allowed;
   opacity: 1;
 }
@@ -263,6 +290,9 @@ textarea.ant-input-affix-wrapper {
 .ant-input[disabled] {
   color: rgba(0, 0, 0, 0.25);
   background-color: #f5f5f5;
+  border-color: #bfbfbf;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   cursor: not-allowed;
   opacity: 1;
 }
@@ -450,10 +480,6 @@ textarea.ant-input {
 .ant-input-group-sm .ant-select-single .ant-select-selector {
   height: 26px;
 }
-.ant-input-group .ant-input-affix-wrapper:not(:first-child) {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
 .ant-input-group .ant-input-affix-wrapper:not(:last-child) {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
@@ -462,6 +488,11 @@ textarea.ant-input {
   border-top-left-radius: 2px;
   border-bottom-left-radius: 2px;
 }
+.ant-input-group .ant-input-affix-wrapper:not(:first-child),
+.ant-input-search .ant-input-group .ant-input-affix-wrapper:not(:first-child) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
 .ant-input-group.ant-input-group-compact {
   display: block;
 }
@@ -716,9 +747,9 @@ textarea.ant-input {
 .ant-input-textarea-rtl.ant-input-textarea-show-count::after {
   text-align: left;
 }
-.ant-input-affix-wrapper-rtl .ant-input-clear-icon:last-child {
-  margin-right: 4px;
-  margin-left: 0;
+.ant-input-affix-wrapper-rtl .ant-input-clear-icon-has-suffix {
+  margin-right: 0;
+  margin-left: 4px;
 }
 .ant-input-affix-wrapper-rtl .ant-input-clear-icon {
   right: auto;

package/lib/components/DateTimePicker/DisplayInput/style.less

@@ -1,9 +1,9 @@
-@import 'antd/lib/input/style/index.less';
-@import '../../../style/theme.less';
-
-.@{sdk-prefix}-datetime-pick-input {
-  .@{ant-prefix}-input-suffix {
-    pointer-events: none;
-    color: @font-color-3;
-  }
-}
+@import 'antd/lib/input/style/index.less';
+@import '../../../style/theme.less';
+
+.@{sdk-prefix}-datetime-pick-input {
+  .@{ant-prefix}-input-suffix {
+    pointer-events: none;
+    color: @font-color-3;
+  }
+}

package/lib/components/DateTimePicker/constants.d.ts

@@ -207,7 +207,7 @@ export interface ITimeRange {
     rangePreset?: RangePreset;
     quarterTime?: IQuarterTime;
 }
-export declare const enum TimeShiftUnit {
+export declare enum TimeShiftUnit {
     Second = "seconds",
     Minute = "minutes",
     Hour = "hours",

package/lib/components/DateTimePicker/constants.js

@@ -330,29 +330,40 @@ exports.QuartersMap = {
         endMonth: 0
     }
 };
+var TimeShiftUnit;
+(function (TimeShiftUnit) {
+    TimeShiftUnit["Second"] = "seconds";
+    TimeShiftUnit["Minute"] = "minutes";
+    TimeShiftUnit["Hour"] = "hours";
+    TimeShiftUnit["Day"] = "days";
+    TimeShiftUnit["Week"] = "weeks";
+    TimeShiftUnit["Month"] = "months";
+    TimeShiftUnit["Quarter"] = "quarters";
+    TimeShiftUnit["Year"] = "years";
+})(TimeShiftUnit = exports.TimeShiftUnit || (exports.TimeShiftUnit = {}));
 exports.TimeShiftUnitOptions = [
     {
-        value: "seconds" /* Second */,
+        value: TimeShiftUnit.Second,
         text: '秒'
     },
     {
-        value: "minutes" /* Minute */,
+        value: TimeShiftUnit.Minute,
         text: '分钟'
     },
     {
-        value: "hours" /* Hour */,
+        value: TimeShiftUnit.Hour,
         text: '小时'
     },
     {
-        value: "days" /* Day */,
+        value: TimeShiftUnit.Day,
         text: '天'
     },
     {
-        value: "months" /* Month */,
+        value: TimeShiftUnit.Month,
         text: '月'
     },
     {
-        value: "years" /* Year */,
+        value: TimeShiftUnit.Year,
         text: '年'
     }
 ];

package/lib/components/DateTimePicker/index.js

@@ -97,7 +97,7 @@ var DateTimePicker = /** @class */ (function (_super) {
         var ismobile = env_1.isMobileDevice() && showTimeType && showTimeType.length;
         return (React.createElement("div", null,
             ismobile && (React.createElement(BaseMobile_1.default, __assign({}, restProps, { showTimeType: showTimeType, buttonType: constants_1.EButtonType.Normal, value: value || this.props.defaultValue, onChange: this.handleChange }))),
-            !ismobile && (React.createElement(antd_1.Popover, { placement: this.props.placement, trigger: "click", visible: this.visible, openClassName: overlayClassName, getPopupContainer: getPopupContainer, onVisibleChange: this.setVisible, getTooltipContainer: this.props.getPopupContainer, content: React.createElement(Base_1.default, __assign({}, restProps, { showTimeType: showTimeType, onChange: this.handleChange, className: classnames_1.default(style_1.SDK_PREFIX + "-datetime-pick-popover", timeClassName), getPopupContainer: getPopupContainer, value: value || this.props.defaultValue })) }, children || (React.createElement(DisplayInput_1.default, { value: value || this.props.defaultValue, timeFormat: this.props.timeFormat, presets: this.props.presets, className: contentClassName }))))));
+            !ismobile && (React.createElement(antd_1.Popover, { placement: this.props.placement, trigger: "click", visible: this.visible, overlayClassName: classnames_1.default(style_1.SDK_PREFIX + "-datetime-pick-popover-root", overlayClassName), getPopupContainer: getPopupContainer, onVisibleChange: this.setVisible, getTooltipContainer: this.props.getPopupContainer, content: React.createElement(Base_1.default, __assign({}, restProps, { showTimeType: showTimeType, onChange: this.handleChange, className: classnames_1.default(style_1.SDK_PREFIX + "-datetime-pick-popover", timeClassName), getPopupContainer: getPopupContainer, value: value || this.props.defaultValue })) }, children || (React.createElement(DisplayInput_1.default, { value: value || this.props.defaultValue, timeFormat: this.props.timeFormat, presets: this.props.presets, className: contentClassName }))))));
     };
     DateTimePicker.Base = Base_1.default;
     DateTimePicker.BaseMobile = BaseMobile_1.default;

package/lib/components/DateTimePicker/style.css

@@ -326,15 +326,15 @@
 .ant-btn-sm {
   padding: 0 7px;
 }
-.pandora-sdk-datetime-pick-popover {
-  width: 650px;
-}
-.ant-popover-inner-content {
-  padding: 0 !important;
+.pandora-sdk-datetime-pick-popover-root .ant-popover-inner-content {
+  padding: 0;
 }
-.ant-btn {
+.pandora-sdk-datetime-pick-popover-root .ant-btn {
   line-height: 1.499;
 }
-.ant-table {
+.pandora-sdk-datetime-pick-popover-root .ant-table {
   line-height: 1.5;
 }
+.pandora-sdk-datetime-pick-popover {
+  width: 650px;
+}

package/lib/components/DateTimePicker/style.less

@@ -1,17 +1,19 @@
-@import 'antd/lib/popover/style/index.less';
-@import '../../style/theme.less';
-
-.@{sdk-prefix}-datetime-pick-popover {
-  width: 650px;
-}
-
-.@{ant-prefix}-popover-inner-content {
-  padding: 0 !important;
-}
-.@{ant-prefix}-btn {
-  line-height: 1.499;
-}
-
-.@{ant-prefix}-table {
-  line-height: 1.5;
-}
+@import 'antd/lib/popover/style/index.less';
+@import '../../style/theme.less';
+
+.@{sdk-prefix}-datetime-pick-popover-root {
+  .@{ant-prefix}-popover-inner-content {
+    padding: 0;
+  }
+  .@{ant-prefix}-btn {
+    line-height: 1.499;
+  }
+
+  .@{ant-prefix}-table {
+    line-height: 1.5;
+  }
+}
+
+.@{sdk-prefix}-datetime-pick-popover {
+  width: 650px;
+}

package/lib/components/DateTimePicker/transform.d.ts

@@ -1,3 +1,7 @@
 import { ITimeRange, ITime } from './constants';
 export declare function transformToTime(time: ITimeRange): ITime;
 export declare function transformToTimeRange(time: ITime): ITimeRange;
+export declare function calcFullTime(time?: ITimeRange): {
+    start: number | undefined;
+    end: number | undefined;
+} | undefined;

package/lib/components/DateTimePicker/transform.js

@@ -1,10 +1,23 @@
 "use strict";
+var __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var moment_1 = __importDefault(require("moment"));
 var lodash_1 = require("lodash");
+var constants_1 = require("./constants");
+var time_1 = __importDefault(require("./time"));
 function transformToTime(time) {
     return {
         preset: time.preset,
@@ -27,3 +40,43 @@ function transformToTimeRange(time) {
     };
 }
 exports.transformToTimeRange = transformToTimeRange;
+function getTimeShiftUnit(time) {
+    var e_1, _a;
+    try {
+        for (var TimeShiftUnitOptions_1 = __values(constants_1.TimeShiftUnitOptions), TimeShiftUnitOptions_1_1 = TimeShiftUnitOptions_1.next(); !TimeShiftUnitOptions_1_1.done; TimeShiftUnitOptions_1_1 = TimeShiftUnitOptions_1.next()) {
+            var item = TimeShiftUnitOptions_1_1.value;
+            if (time.endsWith(item.value)) {
+                return item.value;
+            }
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (TimeShiftUnitOptions_1_1 && !TimeShiftUnitOptions_1_1.done && (_a = TimeShiftUnitOptions_1.return)) _a.call(TimeShiftUnitOptions_1);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
+    return constants_1.TimeShiftUnit.Second;
+}
+function getRelativeTime(timeShift, time) {
+    var timeShiftValue = parseFloat(timeShift) || 0;
+    var timeShiftUnit = getTimeShiftUnit(timeShift);
+    if (time) {
+        return moment_1.default(time).subtract(timeShiftValue, timeShiftUnit);
+    }
+}
+function calcFullTime(time) {
+    if (!time) {
+        return;
+    }
+    var timeShift = time.timeShift;
+    var _a = new time_1.default(transformToTime(time)).toDate(), start = _a.start, end = _a.end;
+    var relativeStart = timeShift && start ? getRelativeTime(timeShift, start) : start;
+    var relativeEnd = timeShift && end ? getRelativeTime(timeShift, end) : end;
+    return {
+        start: relativeStart && relativeStart.valueOf(),
+        end: relativeEnd && relativeEnd.valueOf()
+    };
+}
+exports.calcFullTime = calcFullTime;

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

@@ -53,5 +53,58 @@ export declare type IDrawerProps = Overwrite<DrawerProps, {
     onClose?: (e: EventType) => void;
     afterVisibleChange?: (visible: boolean) => void;
 }>;
-export default function Drawer(props: React.PropsWithChildren<IDrawerProps>): JSX.Element;
-export {};
+export declare function Drawer(props: React.PropsWithChildren<IDrawerProps>): JSX.Element;
+declare const _default: (props: {
+    className?: string | undefined;
+    /**
+     * 是否显示关闭按钮
+     */
+    closable?: boolean | undefined;
+    /**
+     * 点击遮蔽层是否可以关闭
+     */
+    maskClosable?: boolean | undefined;
+    /**
+     * 是否有遮蔽层
+     */
+    mask?: boolean | undefined;
+    /**
+     * 遮蔽层样式
+     */
+    maskStyle?: React.CSSProperties | undefined;
+    /**
+     * 位置
+     */
+    placement?: "top" | "left" | "right" | "bottom" | undefined;
+    /**
+     * 标题
+     */
+    title?: React.ReactNode;
+    /**
+     * 是否可见
+     */
+    visible?: boolean | undefined;
+    /**
+     * 宽
+     */
+    width?: string | number | undefined;
+    /**
+     * 高
+     */
+    height?: string | number | undefined;
+    /**
+     * 容器的class name
+     */
+    wrapClassName?: string | undefined;
+    /**
+     * 层级
+     */
+    zIndex?: number | undefined;
+    getContainer?: string | false | HTMLElement | getContainerFunc | undefined;
+    onClose?: ((e: EventType) => void) | undefined;
+    afterVisibleChange?: ((visible: boolean) => void) | undefined;
+} & Pick<DrawerProps, "style" | "autoFocus" | "size" | "prefixCls" | "footer" | "extra" | "bodyStyle" | "forceRender" | "keyboard" | "destroyOnClose" | "closeIcon" | "drawerStyle" | "headerStyle" | "contentWrapperStyle" | "push" | "handler" | "footerStyle" | "level" | "levelMove"> & {
+    bodyStyle?: React.CSSProperties | undefined;
+    children: React.ReactNode;
+}) => JSX.Element;
+export default _default;

package/lib/components/Drawer/index.js

@@ -36,8 +36,10 @@ var React = __importStar(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var antd_1 = require("antd");
 var style_1 = require("../../constants/style");
+var popContainer_1 = __importDefault(require("../../hoc/popContainer"));
 function Drawer(props) {
     var width = props.width, className = props.className, other = __rest(props, ["width", "className"]);
     return (React.createElement(antd_1.Drawer, __assign({ className: classnames_1.default(style_1.SDK_PREFIX + "-drawer", className), width: width || 'auto', zIndex: 1200 }, other)));
 }
-exports.default = Drawer;
+exports.Drawer = Drawer;
+exports.default = popContainer_1.default(Drawer);

package/lib/components/Drawer/style.css

@@ -7,21 +7,17 @@
   z-index: 1200;
   width: 0%;
   height: 100%;
-  -webkit-transition: height 0s ease 0.3s, width 0s ease 0.3s, -webkit-transform 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
-  transition: height 0s ease 0.3s, width 0s ease 0.3s, -webkit-transform 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
-  transition: transform 0.3s cubic-bezier(0.7, 0.3, 0.1, 1), height 0s ease 0.3s, width 0s ease 0.3s;
-  transition: transform 0.3s cubic-bezier(0.7, 0.3, 0.1, 1), height 0s ease 0.3s, width 0s ease 0.3s, -webkit-transform 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
-}
-.ant-drawer > * {
-  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.7, 0.3, 0.1, 1), -webkit-box-shadow 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
-  transition: -webkit-transform 0.3s cubic-bezier(0.7, 0.3, 0.1, 1), -webkit-box-shadow 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
-  transition: transform 0.3s cubic-bezier(0.7, 0.3, 0.1, 1), box-shadow 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
-  transition: transform 0.3s cubic-bezier(0.7, 0.3, 0.1, 1), box-shadow 0.3s cubic-bezier(0.7, 0.3, 0.1, 1), -webkit-transform 0.3s cubic-bezier(0.7, 0.3, 0.1, 1), -webkit-box-shadow 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
+  -webkit-transition: width 0s ease 0.3s, height 0s ease 0.3s;
+  transition: width 0s ease 0.3s, height 0s ease 0.3s;
 }
 .ant-drawer-content-wrapper {
   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%;
@@ -40,10 +36,10 @@
 .ant-drawer-left.ant-drawer-open,
 .ant-drawer-right.ant-drawer-open {
   width: 100%;
-  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
-  transition: -webkit-transform 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
-  transition: transform 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
-  transition: transform 0.3s cubic-bezier(0.7, 0.3, 0.1, 1), -webkit-transform 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
+  -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-left {
   left: 0;
@@ -83,10 +79,10 @@
 .ant-drawer-top.ant-drawer-open,
 .ant-drawer-bottom.ant-drawer-open {
   height: 100%;
-  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
-  transition: -webkit-transform 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
-  transition: transform 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
-  transition: transform 0.3s cubic-bezier(0.7, 0.3, 0.1, 1), -webkit-transform 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
+  -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 {
   top: 0;
@@ -115,8 +111,8 @@
   opacity: 1;
   -webkit-transition: none;
   transition: none;
-  -webkit-animation: antdDrawerFadeIn 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
-          animation: antdDrawerFadeIn 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
+  -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);
   pointer-events: auto;
 }
 .ant-drawer-title {
@@ -135,12 +131,8 @@
   border: 0;
 }
 .ant-drawer-close {
-  position: absolute;
-  top: 0;
-  right: 0;
-  z-index: 10;
-  display: block;
-  padding: 20px;
+  display: inline-block;
+  margin-right: 12px;
   color: rgba(0, 0, 0, 0.45);
   font-weight: 700;
   font-size: 16px;
@@ -162,22 +154,37 @@
   color: rgba(0, 0, 0, 0.75);
   text-decoration: none;
 }
-.ant-drawer-header-no-title .ant-drawer-close {
-  margin-right: var(--scroll-bar);
-  /* stylelint-disable-next-line function-calc-no-invalid */
-  padding-right: calc(20px - var(--scroll-bar));
-}
 .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-no-title {
-  color: rgba(0, 0, 0, 0.65);
-  background: #ffffff;
+.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;
@@ -185,10 +192,8 @@
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  -ms-flex-wrap: nowrap;
-      flex-wrap: nowrap;
+      -ms-flex-flow: column nowrap;
+          flex-flow: column nowrap;
   width: 100%;
   height: 100%;
 }
@@ -216,15 +221,10 @@
   height: 0;
   background-color: rgba(0, 0, 0, 0.45);
   opacity: 0;
-  filter: alpha(opacity=45);
   -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-open-content {
-  -webkit-box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
-          box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
-}
 .ant-drawer .ant-picker-clear {
   background: #ffffff;
 }
@@ -248,8 +248,8 @@
   direction: rtl;
 }
 .ant-drawer-rtl .ant-drawer-close {
-  right: auto;
-  left: 0;
+  margin-right: 0;
+  margin-left: 12px;
 }
 .ant-btn {
   padding: 4px 15px;