@qn-pandora/pandora-component 3.0.2 → 4.0.0

package/lib/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/lib/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/lib/components/DateTimePicker/BaseMobile/Absolute/index.js

@@ -29,11 +29,14 @@ var react_1 = __importDefault(require("react"));
 var mobx_1 = require("mobx");
 var mobx_react_1 = require("mobx-react");
 var antd_1 = require("antd");
+var config_provider_1 = require("antd/es/config-provider");
 var moment_1 = __importDefault(require("moment"));
 var lodash_1 = require("lodash");
 var date_picker_view_1 = __importDefault(require("antd-mobile/es/date-picker-view"));
 var Selector_1 = __importDefault(require("../../../../components/Selector"));
+var language_1 = require("../../../../utils/language");
 var style_1 = require("../../../../constants/style");
+var type_1 = require("../../../../constants/language/datetime/type");
 var constants_1 = require("../../../../components/DateTimePicker/constants");
 var bind_1 = __importDefault(require("../../../../utils/bind"));
 var Button_1 = __importDefault(require("../../../../components/Button"));
@@ -129,18 +132,19 @@ var Absolute = /** @class */ (function (_super) {
     };
     Absolute.prototype.render = function () {
         var _this = this;
+        var locale = this.context.locale;
         return (react_1.default.createElement("div", { ref: function (ref) { return (_this.containerRef = ref); } },
             react_1.default.createElement("div", { className: style_1.SDK_PREFIX + "-datetime-mobile-pick-range-div-containter" },
                 react_1.default.createElement(antd_1.Divider, { className: style_1.SDK_PREFIX + "-datetime-mobile-pick-range-div" })),
             react_1.default.createElement("div", { className: style_1.SDK_PREFIX + "-datetime-mobile-pick-range-preset-head" },
                 react_1.default.createElement(Selector_1.default, { getPopupContainer: this.getPopupContainer, options: constants_1.rangePresetOptions, value: this.rangePreset, onChange: this.setRangePreset, className: style_1.SDK_PREFIX + "-datetime-mobile-pick-range-preset-head-selector" }),
-                react_1.default.createElement(Button_1.default, { onClick: this.handleAbsoluteOk, className: style_1.SDK_PREFIX + "-datetime-mobile-pick-range-preset-head-button" }, "\u786E\u8BA4")),
+                react_1.default.createElement(Button_1.default, { onClick: this.handleAbsoluteOk, className: style_1.SDK_PREFIX + "-datetime-mobile-pick-range-preset-head-button" }, language_1.formatString(type_1.DateTimeLocale.confirm, locale))),
             this.isBetweenTime && (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement("div", { className: style_1.SDK_PREFIX + "-datetime-mobile-pick-range-sub-title" }, "\u5F00\u59CB\u65F6\u95F4"),
+                react_1.default.createElement("div", { className: style_1.SDK_PREFIX + "-datetime-mobile-pick-range-sub-title" }, language_1.formatString(type_1.DateTimeLocale.mobile.start_time, locale)),
                 react_1.default.createElement(date_picker_view_1.default, { value: this.range[0], minDate: constants_2.minDate, onChange: function (date) {
                         _this.handleAbsoluteChange(date, 0);
                     } }),
-                react_1.default.createElement("div", { className: style_1.SDK_PREFIX + "-datetime-mobile-pick-range-sub-title" }, "\u7ED3\u675F\u65F6\u95F4"),
+                react_1.default.createElement("div", { className: style_1.SDK_PREFIX + "-datetime-mobile-pick-range-sub-title" }, language_1.formatString(type_1.DateTimeLocale.mobile.end_time)),
                 react_1.default.createElement(date_picker_view_1.default, { value: this.range[1], minDate: constants_2.minDate, onChange: function (date) {
                         _this.handleAbsoluteChange(date, 1);
                     } }))),
@@ -151,6 +155,7 @@ var Absolute = /** @class */ (function (_super) {
                     _this.handleAbsoluteChange(date, 1);
                 } }))));
     };
+    Absolute.contextType = config_provider_1.ConfigContext;
     __decorate([
         mobx_1.observable,
         __metadata("design:type", String)

package/lib/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/lib/components/DateTimePicker/BaseMobile/index.js

@@ -52,9 +52,12 @@ var modal_1 = __importDefault(require("antd-mobile/es/modal"));
 var mobx_react_1 = require("mobx-react");
 var icons_1 = require("@ant-design/icons");
 var antd_1 = require("antd");
+var config_provider_1 = require("antd/es/config-provider");
 var mobx_1 = require("mobx");
 var bind_1 = __importDefault(require("../../../utils/bind"));
+var language_1 = require("../../../utils/language");
 var style_1 = require("../../../constants/style");
+var type_1 = require("../../../constants/language/datetime/type");
 var constants_1 = require("../constants");
 var CustomButton_1 = __importDefault(require("./CustomButton"));
 var constants_2 = require("./constants");
@@ -158,16 +161,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_1.default.createElement("div", { className: style_1.SDK_PREFIX + "-datetime-mobile-picker-title" },
             react_1.default.createElement("div", { className: style_1.SDK_PREFIX + "-datetime-mobile-picker-title-div-containter" },
                 react_1.default.createElement(antd_1.Divider, { className: style_1.SDK_PREFIX + "-datetime-mobile-picker-title-div" })),
-            react_1.default.createElement("div", null, "\u65E5\u671F\u9009\u62E9")));
+            react_1.default.createElement("div", null, language_1.formatString(type_1.DateTimeLocale.mobile.title, locale))));
         var showPicker = showTimeType &&
             (showTimeType.indexOf(constants_1.TimeType.Preset) > -1 ||
                 showTimeType.indexOf(constants_1.TimeType.Quarter) > -1);
         var _b = this.props, onChange = _b.onChange, value = _b.value, defaultValue = _b.defaultValue;
         return (react_1.default.createElement(react_1.default.Fragment, null,
-            showPicker && (react_1.default.createElement(picker_1.default, { data: this.getData() || [], title: title, extra: "\u65E5\u671F\u9009\u62E9", cascade: showTimeType && showTimeType.indexOf(constants_1.TimeType.Preset) > -1, cols: this.getCols(), value: this.getValue(), onOk: this.handleOk, className: style_1.SDK_PREFIX + "-datetime-mobile-picker" },
+            showPicker && (react_1.default.createElement(picker_1.default, { data: this.getData() || [], title: title, extra: language_1.formatString(type_1.DateTimeLocale.mobile.title, locale), cascade: showTimeType && showTimeType.indexOf(constants_1.TimeType.Preset) > -1, cols: this.getCols(), value: this.getValue(), onOk: this.handleOk, className: style_1.SDK_PREFIX + "-datetime-mobile-picker" },
                 react_1.default.createElement(CustomButton_1.default, { type: buttonType, className: contentClassName }))),
             !showPicker && (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(icons_1.CalendarOutlined, { onClick: this.handleShow }),
@@ -179,6 +183,7 @@ var BaseMobile = /** @class */ (function (_super) {
         presetMode: constants_1.EPresetMode.EXTRA,
         buttonType: constants_2.EButtonType.Normal
     };
+    BaseMobile.contextType = config_provider_1.ConfigContext;
     __decorate([
         mobx_1.observable,
         __metadata("design:type", Boolean)

package/lib/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/lib/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/lib/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/lib/components/DateTimePicker/Collapse/Panel/index.js

@@ -0,0 +1,64 @@
+"use strict";
+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;
+};
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
+    result["default"] = mod;
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var compatible_1 = require("@ant-design/compatible");
+var style_1 = require("../../../../constants/style");
+var useEffect = React.useEffect, useCallback = React.useCallback, useState = React.useState;
+/**
+ * 折叠面板组件封装
+ */
+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_1.default(style_1.SDK_PREFIX + "-panel", className), key: panelKey },
+        React.createElement("div", { className: classnames_1.default(titleClassName, (_a = {}, _a[style_1.SDK_PREFIX + "-panel-disable"] = disableToggle, _a), style_1.SDK_PREFIX + "-panel-title"), onClick: onTogglePanel },
+            React.createElement("span", null, title),
+            disableToggle ? null : (React.createElement(compatible_1.Icon, { type: isActive ? 'down' : 'up', className: style_1.SDK_PREFIX + "-panel-icon" }))),
+        React.createElement("div", { className: classnames_1.default(style_1.SDK_PREFIX + "-panel-content", contentClassName, (_b = {},
+                _b[style_1.SDK_PREFIX + "-panel-hidden"] = !isActive,
+                _b)) }, props.children)));
+}
+exports.default = Panel;

package/lib/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/lib/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/lib/components/DateTimePicker/Collapse/index.js

@@ -0,0 +1,54 @@
+"use strict";
+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);
+};
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
+    result["default"] = mod;
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = __importStar(require("react"));
+var lodash_1 = require("lodash");
+var Panel_1 = __importDefault(require("./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 = lodash_1.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_1.default;
+exports.default = Collapse;

package/lib/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/lib/components/DateTimePicker/DisplayInput/index.js

@@ -48,6 +48,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var React = __importStar(require("react"));
 var icons_1 = require("@ant-design/icons");
 var antd_1 = require("antd");
+var config_provider_1 = require("antd/es/config-provider");
 var time_1 = __importDefault(require("../time"));
 var DisplayInput = /** @class */ (function (_super) {
     __extends(DisplayInput, _super);
@@ -56,9 +57,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_1.default(value || {}, { presets: presets }).getDisplayText(timeFormat);
+        var locale = this.context.locale;
+        var text = new time_1.default(value || {}, { presets: presets }).getDisplayText(timeFormat, locale);
         return (React.createElement(antd_1.Input, __assign({ readOnly: true, className: className, suffix: React.createElement(icons_1.CalendarOutlined, { onClick: this.props.onClick }), value: text }, otherProps)));
     };
+    DisplayInput.contextType = config_provider_1.ConfigContext;
     return DisplayInput;
 }(React.PureComponent));
 exports.default = DisplayInput;

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;