@qn-pandora/pandora-component 3.0.2 → 4.0.0

package/es/components/DateTimePicker/Base/style.less

@@ -2,15 +2,9 @@
 @import 'antd/lib/date-picker/style/index.less';
 @import '../../../style/theme.less';
 
-.@{sdk-prefix}-datetime-pick-title {
-  padding: 8px 16px 6px;
-  border-bottom: 1px solid @normal-color;
-  color: @font-color-3;
-  font-size: 14px;
-  background-color: @gray-bg-color;
-}
+@button-default-preset: #e9f0fa;
 
-.@{sdk-prefix}-datetime-pick-panel {
+.@{sdk-prefix}-panel.@{sdk-prefix}-datetime-pick-panel {
   margin-bottom: 0;
 
   &:last-child {
@@ -18,34 +12,44 @@
       border-bottom: none;
     }
   }
-}
 
-.@{sdk-prefix}-datetime-pick-preset {
-  padding: 12px;
-  text-align: left;
-  .@{sdk-prefix}-datetime-pick-item {
-    display: inline-block;
-    width: 96px;
-    line-height: 28px;
-    margin: 4px;
-    color: @theme-color;
-    background: #e9f0fa;
-    text-align: center;
-    font-size: 12px;
-    cursor: pointer;
-    border-radius: @border-radius-base;
-    &.active {
-      background: @theme-color;
-      color: @normal-color;
-      pointer-events: none;
+  .@{sdk-prefix}-datetime-pick-title {
+    padding: 8px 16px 6px;
+    border-bottom: 1px solid @normal-color;
+    color: @font-color-3;
+    font-size: 14px;
+    background-color: @gray-bg-color;
+  }
+
+  .@{sdk-prefix}-datetime-pick-preset {
+    padding: 12px;
+    text-align: left;
+    .@{sdk-prefix}-datetime-pick-item {
+      display: inline-block;
+      width: 96px;
+      line-height: 28px;
+      margin: 4px;
+      color: @theme-color;
+      background: @button-default-preset;
+      text-align: center;
+      font-size: 12px;
+      cursor: pointer;
+      border-radius: @border-radius-base;
+      &.active {
+        background: @theme-color;
+        color: @normal-color;
+        pointer-events: none;
+      }
     }
   }
+
+  .@{sdk-prefix}-datetime-pick-panel-content {
+    padding: 0;
+  }
 }
+
 .@{sdk-prefix}-datetime-pick-content {
   padding: 16px;
-  .range-picker {
-    width: 100% !important;
-  }
   .@{ant-prefix}-calendar-range-picker-input {
     width: calc(50% - 14px);
   }
@@ -78,6 +82,9 @@
     flex: 1;
     margin-left: 8px;
     margin-right: 12px;
+    &.range-picker {
+      width: 100%;
+    }
   }
 }
 
@@ -89,10 +96,6 @@
   }
 }
 
-.@{sdk-prefix}-datetime-pick-panel-content {
-  padding: 0;
-}
-
 .@{sdk-prefix}-datetime-pick-relative-root {
   position: relative;
   flex: 1;
@@ -140,9 +143,6 @@
   margin-top: 30px;
 }
 
-.@{sdk-prefix}-quarter-datetime-pick-panel {
-  width: 360px;
-}
 .@{sdk-prefix}-datetime-pick-quarter-content {
   padding-right: 12px;
   padding-left: 12px;
@@ -153,10 +153,6 @@
     flex: 1;
     min-width: 120px;
     border-left: 1px solid @normal-color;
-    .@{ant-prefix}-select-selection {
-      background: #ebf0fd !important;
-      border-radius: 2px;
-    }
   }
   .@{sdk-prefix}-selector & .@{sdk-prefix}-selector {
     margin-left: 18px;

package/es/components/DateTimePicker/BaseMobile/Absolute/index.d.ts

@@ -20,6 +20,7 @@ interface IAbsoluteProps {
     onChancle: () => void;
 }
 export default class Absolute extends React.Component<IAbsoluteProps, any> {
+    static contextType: React.Context<import("antd/es/config-provider").ConfigConsumerProps>;
     containerRef: HTMLElement | null;
     rangePreset: RangePreset;
     range: RangePickerValue;

package/es/components/DateTimePicker/BaseMobile/Absolute/index.js

@@ -24,11 +24,14 @@ import React from 'react';
 import { observable, action, computed } from 'mobx';
 import { observer } from 'mobx-react';
 import { Divider } from 'antd';
+import { ConfigContext } from 'antd/es/config-provider';
 import moment from 'moment';
 import { get } from 'lodash';
 import DatePickerView from 'antd-mobile/es/date-picker-view';
 import Selector from '../../../../components/Selector';
+import { formatString } from '../../../../utils/language';
 import { SDK_PREFIX } from '../../../../constants/style';
+import { DateTimeLocale } from '../../../../constants/language/datetime/type';
 import { rangePresetOptions, RangePreset } from '../../../../components/DateTimePicker/constants';
 import bind from '../../../../utils/bind';
 import Button from '../../../../components/Button';
@@ -124,18 +127,19 @@ var Absolute = /** @class */ (function (_super) {
     };
     Absolute.prototype.render = function () {
         var _this = this;
+        var locale = this.context.locale;
         return (React.createElement("div", { ref: function (ref) { return (_this.containerRef = ref); } },
             React.createElement("div", { className: SDK_PREFIX + "-datetime-mobile-pick-range-div-containter" },
                 React.createElement(Divider, { className: SDK_PREFIX + "-datetime-mobile-pick-range-div" })),
             React.createElement("div", { className: SDK_PREFIX + "-datetime-mobile-pick-range-preset-head" },
                 React.createElement(Selector, { getPopupContainer: this.getPopupContainer, options: rangePresetOptions, value: this.rangePreset, onChange: this.setRangePreset, className: SDK_PREFIX + "-datetime-mobile-pick-range-preset-head-selector" }),
-                React.createElement(Button, { onClick: this.handleAbsoluteOk, className: SDK_PREFIX + "-datetime-mobile-pick-range-preset-head-button" }, "\u786E\u8BA4")),
+                React.createElement(Button, { onClick: this.handleAbsoluteOk, className: SDK_PREFIX + "-datetime-mobile-pick-range-preset-head-button" }, formatString(DateTimeLocale.confirm, locale))),
             this.isBetweenTime && (React.createElement(React.Fragment, null,
-                React.createElement("div", { className: SDK_PREFIX + "-datetime-mobile-pick-range-sub-title" }, "\u5F00\u59CB\u65F6\u95F4"),
+                React.createElement("div", { className: SDK_PREFIX + "-datetime-mobile-pick-range-sub-title" }, formatString(DateTimeLocale.mobile.start_time, locale)),
                 React.createElement(DatePickerView, { value: this.range[0], minDate: minDate, onChange: function (date) {
                         _this.handleAbsoluteChange(date, 0);
                     } }),
-                React.createElement("div", { className: SDK_PREFIX + "-datetime-mobile-pick-range-sub-title" }, "\u7ED3\u675F\u65F6\u95F4"),
+                React.createElement("div", { className: SDK_PREFIX + "-datetime-mobile-pick-range-sub-title" }, formatString(DateTimeLocale.mobile.end_time)),
                 React.createElement(DatePickerView, { value: this.range[1], minDate: minDate, onChange: function (date) {
                         _this.handleAbsoluteChange(date, 1);
                     } }))),
@@ -146,6 +150,7 @@ var Absolute = /** @class */ (function (_super) {
                     _this.handleAbsoluteChange(date, 1);
                 } }))));
     };
+    Absolute.contextType = ConfigContext;
     __decorate([
         observable,
         __metadata("design:type", String)

package/es/components/DateTimePicker/BaseMobile/index.d.ts

@@ -20,6 +20,7 @@ declare type IGetData = Array<{
     label: string;
 }>> | undefined;
 interface IBaseMobileProps extends IBaseProps {
+    locale?: string;
     buttonType: EButtonType;
     contentClassName?: string;
 }
@@ -30,6 +31,7 @@ export default class BaseMobile extends React.Component<IBaseMobileProps, any> {
         presetMode: EPresetMode;
         buttonType: EButtonType;
     };
+    static contextType: React.Context<import("antd/es/config-provider").ConfigConsumerProps>;
     containerRef: HTMLElement | null;
     showModal: boolean;
     setShowModal(showModal: boolean): void;

package/es/components/DateTimePicker/BaseMobile/index.js

@@ -47,9 +47,12 @@ import Modal from 'antd-mobile/es/modal';
 import { observer } from 'mobx-react';
 import { CalendarOutlined } from '@ant-design/icons';
 import { Divider } from 'antd';
+import { ConfigContext } from 'antd/es/config-provider';
 import { observable } from 'mobx';
 import bind from '../../../utils/bind';
+import { formatString } from '../../../utils/language';
 import { SDK_PREFIX } from '../../../constants/style';
+import { DateTimeLocale } from '../../../constants/language/datetime/type';
 import { TimeType, EPresetMode, defaultPresets } from '../constants';
 import CustomButton from './CustomButton';
 import { Quarters, EButtonType } from './constants';
@@ -152,16 +155,17 @@ var BaseMobile = /** @class */ (function (_super) {
     };
     BaseMobile.prototype.render = function () {
         var _a = this.props, showTimeType = _a.showTimeType, buttonType = _a.buttonType, contentClassName = _a.contentClassName;
+        var locale = this.context.locale;
         var title = (React.createElement("div", { className: SDK_PREFIX + "-datetime-mobile-picker-title" },
             React.createElement("div", { className: SDK_PREFIX + "-datetime-mobile-picker-title-div-containter" },
                 React.createElement(Divider, { className: SDK_PREFIX + "-datetime-mobile-picker-title-div" })),
-            React.createElement("div", null, "\u65E5\u671F\u9009\u62E9")));
+            React.createElement("div", null, formatString(DateTimeLocale.mobile.title, locale))));
         var showPicker = showTimeType &&
             (showTimeType.indexOf(TimeType.Preset) > -1 ||
                 showTimeType.indexOf(TimeType.Quarter) > -1);
         var _b = this.props, onChange = _b.onChange, value = _b.value, defaultValue = _b.defaultValue;
         return (React.createElement(React.Fragment, null,
-            showPicker && (React.createElement(Picker, { data: this.getData() || [], title: title, extra: "\u65E5\u671F\u9009\u62E9", cascade: showTimeType && showTimeType.indexOf(TimeType.Preset) > -1, cols: this.getCols(), value: this.getValue(), onOk: this.handleOk, className: SDK_PREFIX + "-datetime-mobile-picker" },
+            showPicker && (React.createElement(Picker, { data: this.getData() || [], title: title, extra: formatString(DateTimeLocale.mobile.title, locale), cascade: showTimeType && showTimeType.indexOf(TimeType.Preset) > -1, cols: this.getCols(), value: this.getValue(), onOk: this.handleOk, className: SDK_PREFIX + "-datetime-mobile-picker" },
                 React.createElement(CustomButton, { type: buttonType, className: contentClassName }))),
             !showPicker && (React.createElement(React.Fragment, null,
                 React.createElement(CalendarOutlined, { onClick: this.handleShow }),
@@ -173,6 +177,7 @@ var BaseMobile = /** @class */ (function (_super) {
         presetMode: EPresetMode.EXTRA,
         buttonType: EButtonType.Normal
     };
+    BaseMobile.contextType = ConfigContext;
     __decorate([
         observable,
         __metadata("design:type", Boolean)

package/es/components/DateTimePicker/BaseMobile/style.css

@@ -21,9 +21,9 @@
   visibility: hidden;
 }
 .pandora-sdk-datetime-mobile-picker .am-picker-popup-content .am-picker-popup-body .am-picker-popup-header {
-  border-bottom: none !important;
-  background-image: none !important;
-  background-position: none !important;
-  background-size: none !important;
+  border-bottom: none;
+  background-image: none;
+  background-position: unset;
+  background-size: unset;
   position: initial;
 }

package/es/components/DateTimePicker/BaseMobile/style.less

@@ -21,10 +21,10 @@
   .am-picker-popup-content {
     .am-picker-popup-body {
       .am-picker-popup-header {
-        border-bottom: none !important;
-        background-image: none !important;
-        background-position: none !important;
-        background-size: none !important;
+        border-bottom: none;
+        background-image: none;
+        background-position: unset;
+        background-size: unset;
         position: initial;
       }
     }

package/es/components/DateTimePicker/Collapse/Panel/index.d.ts

@@ -0,0 +1,41 @@
+import * as React from 'react';
+interface IPanelProps {
+    /**
+     * 当前panel的key
+     */
+    panelKey?: string;
+    /**
+     * tab的标题
+     */
+    title: string;
+    /**
+     * 当前panel是都激活
+     * @default true
+     */
+    isActive?: boolean;
+    /**
+     * title的样式
+     */
+    titleClassName?: string;
+    /**
+     * content的样式
+     */
+    contentClassName?: string;
+    /**
+     * 容器样式
+     */
+    className?: string;
+    /**
+     * panel折叠状态发生变化
+     */
+    onToggle?: (isActive: boolean, key?: string) => void;
+    /**
+     * 是否禁止toggle
+     */
+    disableToggle?: boolean;
+}
+/**
+ * 折叠面板组件封装
+ */
+export default function Panel(props: React.PropsWithChildren<IPanelProps>): JSX.Element;
+export {};

package/es/components/DateTimePicker/Collapse/Panel/index.js

@@ -0,0 +1,51 @@
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+import * as React from 'react';
+import classnames from 'classnames';
+import { Icon as LegacyIcon } from '@ant-design/compatible';
+import { SDK_PREFIX } from '../../../../constants/style';
+var useEffect = React.useEffect, useCallback = React.useCallback, useState = React.useState;
+/**
+ * 折叠面板组件封装
+ */
+export default function Panel(props) {
+    var _a, _b;
+    var _c = props.isActive, baseIsActive = _c === void 0 ? true : _c, disableToggle = props.disableToggle, onToggle = props.onToggle, panelKey = props.panelKey, title = props.title, titleClassName = props.titleClassName, className = props.className, contentClassName = props.contentClassName;
+    var _d = __read(useState(baseIsActive || false), 2), isActive = _d[0], setIsActive = _d[1];
+    useEffect(function () {
+        if (baseIsActive !== isActive) {
+            setIsActive(baseIsActive || false);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [baseIsActive]);
+    var onTogglePanel = useCallback(function () {
+        if (disableToggle) {
+            return;
+        }
+        setIsActive(!isActive);
+        if (onToggle) {
+            onToggle(!isActive, panelKey);
+        }
+    }, [disableToggle, panelKey, isActive, onToggle]);
+    return (React.createElement("div", { className: classnames(SDK_PREFIX + "-panel", className), key: panelKey },
+        React.createElement("div", { className: classnames(titleClassName, (_a = {}, _a[SDK_PREFIX + "-panel-disable"] = disableToggle, _a), SDK_PREFIX + "-panel-title"), onClick: onTogglePanel },
+            React.createElement("span", null, title),
+            disableToggle ? null : (React.createElement(LegacyIcon, { type: isActive ? 'down' : 'up', className: SDK_PREFIX + "-panel-icon" }))),
+        React.createElement("div", { className: classnames(SDK_PREFIX + "-panel-content", contentClassName, (_b = {},
+                _b[SDK_PREFIX + "-panel-hidden"] = !isActive,
+                _b)) }, props.children)));
+}

package/es/components/{Collapse → DateTimePicker/Collapse}/Panel/style.less

@@ -1,4 +1,4 @@
-@import '../../../style/theme.less';
+@import '../../../../style/theme.less';
 
 .@{sdk-prefix}-panel-title {
   display: flex;

package/es/components/DateTimePicker/Collapse/index.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+interface ICollapseProps {
+    /**
+     * 根节点 class name
+     */
+    className?: string;
+    /**
+     * 默认展开的panel的keys
+     */
+    defaultActiveKey?: string[] | 'all' | 'none';
+    /**
+     * 手风琴模式，最多智能打开一个折叠板
+     * @default false
+     */
+    accordion?: boolean;
+}
+/**
+ * 折叠面板组件封装
+ */
+declare function Collapse(props: React.PropsWithChildren<ICollapseProps>): JSX.Element;
+declare namespace Collapse {
+    var Panel: typeof import("./Panel").default;
+}
+export default Collapse;

package/es/components/DateTimePicker/Collapse/index.js

@@ -0,0 +1,42 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import * as React from 'react';
+import { get } from 'lodash';
+import Panel from './Panel';
+/**
+ * 折叠面板组件封装
+ */
+function Collapse(props) {
+    var children = props.children, defaultActiveKey = props.defaultActiveKey, className = props.className;
+    var getPanels = React.useCallback(function () {
+        var newChildren = [];
+        React.Children.forEach(children, function (child, index) {
+            if (!child) {
+                return;
+            }
+            var key = get(child, 'key') || "" + index;
+            var isActive = false;
+            if (defaultActiveKey && typeof defaultActiveKey === 'string') {
+                isActive = defaultActiveKey === 'none' ? false : true;
+            }
+            else {
+                isActive = (defaultActiveKey || []).indexOf(key) > -1;
+            }
+            var props = __assign(__assign({}, child.props), { panelKey: key, isActive: isActive });
+            newChildren.push(React.cloneElement(child, props));
+        });
+        return newChildren;
+    }, [children, defaultActiveKey]);
+    return React.createElement("div", { className: className }, getPanels());
+}
+Collapse.Panel = Panel;
+export default Collapse;

package/es/components/DateTimePicker/DisplayInput/index.d.ts

@@ -7,5 +7,6 @@ export interface IInputProps extends InputProps {
     presets?: IPreset[];
 }
 export default class DisplayInput extends React.PureComponent<IInputProps, any> {
+    static contextType: React.Context<import("antd/es/config-provider").ConfigConsumerProps>;
     render(): JSX.Element;
 }

package/es/components/DateTimePicker/DisplayInput/index.js

@@ -36,6 +36,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import * as React from 'react';
 import { CalendarOutlined } from '@ant-design/icons';
 import { Input } from 'antd';
+import { ConfigContext } from 'antd/es/config-provider';
 import Time from '../time';
 var DisplayInput = /** @class */ (function (_super) {
     __extends(DisplayInput, _super);
@@ -44,9 +45,11 @@ var DisplayInput = /** @class */ (function (_super) {
     }
     DisplayInput.prototype.render = function () {
         var _a = this.props, className = _a.className, value = _a.value, timeFormat = _a.timeFormat, presets = _a.presets, otherProps = __rest(_a, ["className", "value", "timeFormat", "presets"]);
-        var text = new Time(value || {}, { presets: presets }).getDisplayText(timeFormat);
+        var locale = this.context.locale;
+        var text = new Time(value || {}, { presets: presets }).getDisplayText(timeFormat, locale);
         return (React.createElement(Input, __assign({ readOnly: true, className: className, suffix: React.createElement(CalendarOutlined, { onClick: this.props.onClick }), value: text }, otherProps)));
     };
+    DisplayInput.contextType = ConfigContext;
     return DisplayInput;
 }(React.PureComponent));
 export default DisplayInput;

package/es/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;