@lemon-fe/kits 1.0.0-113 → 1.0.0-115

package/es/components/DataGrid/index.less

@@ -18,7 +18,7 @@
   &-column-sorter {
     display: inline-flex;
     flex-direction: column;
-    margin-left: 4px;
+    margin: 0 4px;
     color: fade(#333, 50);
 
     &-down {

package/es/components/Icons/Clear.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentProps } from 'react';
+import Icon from '@ant-design/icons';
+export default function Clear(props: ComponentProps<typeof Icon>): JSX.Element;

package/es/components/Icons/Clear.js

@@ -0,0 +1,22 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React from 'react';
+import Icon from '@ant-design/icons';
+
+var Svg = function Svg(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 12 12"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    fillRule: "evenodd",
+    d: "M6 0a6 6 0 1 1 0 12A6 6 0 0 1 6 0ZM4.94 3.879a.75.75 0 1 0-1.061 1.06L4.939 6l-1.06 1.06a.75.75 0 1 0 1.06 1.061L6 7.061l1.06 1.06a.75.75 0 0 0 .977.073l.084-.073a.75.75 0 0 0 0-1.06L7.061 6l1.06-1.06a.75.75 0 1 0-1.06-1.061L6 4.939Z",
+    opacity: "1"
+  }));
+};
+
+export default function Clear(props) {
+  return /*#__PURE__*/React.createElement(Icon, _extends({
+    component: Svg
+  }, props));
+}

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

@@ -11,6 +11,7 @@ import CollapseUp from './CollapseUp';
 import Close from './Close';
 import Delete from './Delete';
 import Add from './Add';
+import Clear from './Clear';
 declare const Icons: {
     Search: typeof Search;
     Down: typeof Down;
@@ -25,5 +26,6 @@ declare const Icons: {
     Close: typeof Close;
     Delete: typeof Delete;
     Add: typeof Add;
+    Clear: typeof Clear;
 };
 export default Icons;

package/es/components/Icons/index.js

@@ -11,6 +11,7 @@ import CollapseUp from "./CollapseUp";
 import Close from "./Close";
 import Delete from "./Delete";
 import Add from "./Add";
+import Clear from "./Clear";
 var Icons = {
   Search: Search,
   Down: Down,
@@ -24,6 +25,7 @@ var Icons = {
   CollapseUp: CollapseUp,
   Close: Close,
   Delete: Delete,
-  Add: Add
+  Add: Add,
+  Clear: Clear
 };
 export default Icons;

package/es/components/Popup/index.js

@@ -28,9 +28,9 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 import React, { useState, cloneElement, useRef, useEffect, useContext } from 'react';
 import { Modal, Input, message, ConfigProvider } from 'antd';
-import { CloseCircleFilled } from '@ant-design/icons';
 import SearchIcon from "../Icons/Search";
 import { prefixClassName } from "../utils";
+import Icons from "../Icons";
 var prefix = prefixClassName('popup');
 
 function Popup(props) {
@@ -270,8 +270,8 @@ function Popup(props) {
       placeholder: placeholder,
       bordered: bordered,
       allowClear: allowClear,
-      suffix: /*#__PURE__*/React.createElement(React.Fragment, null, !disabled && !readOnly && allowClear && label && /*#__PURE__*/React.createElement(CloseCircleFilled, {
-        className: "".concat(getPrefixCls('input'), "-clear-icon"),
+      suffix: /*#__PURE__*/React.createElement(React.Fragment, null, !disabled && !readOnly && allowClear && label && /*#__PURE__*/React.createElement(Icons.Clear, {
+        className: "".concat(getPrefixCls('input'), "-clear-icon ").concat(prefix('input-clear')),
         onClick: handleClear
       }), /*#__PURE__*/React.createElement(SearchIcon, null))
     });

package/es/components/Popup/index.less

@@ -4,6 +4,28 @@
   &-wrapper {
     width: 100%;
     height: 100%;
+
+    .@{ant-prefix}-input-suffix {
+      position: relative;
+
+      .@{ant-prefix}-input-clear-icon:first-child {
+        display: none;
+      }
+    }
+  }
+
+  &-input-clear {
+    position: absolute;
+    top: 50%;
+    padding: 1px;
+    background-color: #fff;
+    transform: translateY(-50%);
+    opacity: 0;
+    transition: opacity 0.3s, color 0.3s !important;
+  }
+
+  &-wrapper:hover &-input-clear {
+    opacity: 1;
   }
 
   &-input input {

package/es/init.js

@@ -7,7 +7,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
 import React from 'react';
-import { message, Modal, Select, ConfigProvider, Result, Button, version, DatePicker, Cascader, TreeSelect, Empty, Menu } from 'antd';
+import { message, Modal, Select, ConfigProvider, Result, Button, DatePicker, Cascader, TreeSelect, Empty, Menu } from 'antd';
 import { config } from '@lemon-fe/hooks';
 import PageLoading from "./components/PageLoading";
 import Icons from "./components/Icons";
@@ -15,7 +15,8 @@ import empty from "./styles/empty.png";
 var Tip = Icons.Tip,
     Down = Icons.Down,
     BigTip = Icons.BigTip,
-    Close = Icons.Close;
+    Close = Icons.Close,
+    Clear = Icons.Clear;
 export default function init() {
   var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
 
@@ -102,9 +103,8 @@ export default function init() {
         height: 60
       }
     }),
-    suffixIcon: version >= '4.18.9' ? node : function () {
-      return node;
-    }
+    suffixIcon: node,
+    clearIcon: /*#__PURE__*/React.createElement(Clear, null)
   }; //@ts-ignore
 
   TreeSelect.defaultProps = {
@@ -113,20 +113,22 @@ export default function init() {
         height: 60
       }
     }),
-    suffixIcon: version >= '4.18.9' ? node : function () {
-      return node;
-    }
+    suffixIcon: node,
+    clearIcon: /*#__PURE__*/React.createElement(Clear, null)
   }; //@ts-ignore
 
   Cascader.defaultProps = {
-    suffixIcon: node
-  };
-  DatePicker.RangePicker.defaultProps = {
-    suffixIcon: /*#__PURE__*/React.createElement(Icons.Calendar, null)
+    suffixIcon: node,
+    clearIcon: /*#__PURE__*/React.createElement(Clear, null)
   };
-  DatePicker.defaultProps = {
-    suffixIcon: /*#__PURE__*/React.createElement(Icons.Calendar, null)
-  }; //@ts-ignore
+  DatePicker.RangePicker.defaultProps = _objectSpread(_objectSpread({}, DatePicker.RangePicker.defaultProps), {}, {
+    suffixIcon: /*#__PURE__*/React.createElement(Icons.Calendar, null),
+    clearIcon: /*#__PURE__*/React.createElement(Clear, null)
+  });
+  DatePicker.defaultProps = _objectSpread(_objectSpread({}, DatePicker.defaultProps), {}, {
+    suffixIcon: /*#__PURE__*/React.createElement(Icons.Calendar, null),
+    clearIcon: /*#__PURE__*/React.createElement(Clear, null)
+  }); //@ts-ignore
 
   Menu.defaultProps = {
     expandIcon: /*#__PURE__*/React.createElement(Down, {

package/es/styles/overrides.less

@@ -153,13 +153,6 @@ a[title='站长统计'] {
   width: auto;
 }
 
-/** select */
-
-.@{ant-prefix}-select-arrow {
-  color: fade(#333, 70);
-  font-size: 14px;
-}
-
 /** input */
 @input-height-base: 28px;
 @input-padding-horizontal-base: 8px;
@@ -173,18 +166,40 @@ a[title='站长统计'] {
 /** picker */
 .@{ant-prefix}-picker {
   .@{ant-prefix}-picker-clear {
-    box-sizing: border-box;
-    width: 16px;
-    height: 16px;
     padding: 1px;
+    font-size: 14px;
+    background-color: #fff;
   }
 
   &-suffix {
-    color: rgba(51, 51, 51, 0.7);
+    color: fade(#333, 70);
     font-size: 16px;
   }
+
+  &&-disabled &-suffix {
+    color: fade(#333, 49);
+  }
 }
 
+/** select */
+@select-multiple-item-disabled-color: @input-disabled-color;
+.@{ant-prefix}-select {
+  &-arrow {
+    color: fade(#333, 70);
+    font-size: 14px;
+  }
+
+  &-disabled&:not(&-customize-input) &-selector {
+    color: @input-disabled-color;
+  }
+
+  &-disabled &-arrow {
+    color: fade(#333, 49);
+  }
+}
+
+/** treeselect */
+
 /** button **/
 @btn-height-base: 28px;
 @btn-height-sm: 24px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lemon-fe/kits",
-  "version": "1.0.0-113",
+  "version": "1.0.0-115",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",