@lemon-fe/kits 1.0.0-101 → 1.0.0-102

package/es/components/Filter/index.js

@@ -34,7 +34,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 
 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, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import ResizeObserver from 'rc-resize-observer';
 import { Button, Checkbox, Form, Input, Popover, Space, Modal, message, Select, Empty, InputNumber } from 'antd';
 import { useDebounce, useRequest } from '@lemon-fe/hooks';
@@ -192,8 +192,6 @@ function Filter(props) {
       collapsed = _useState14[0],
       setCollapsed = _useState14[1];
 
-  var colWid = 293.5;
-
   var _useRequest = useRequest(function () {
     if (!storageKey) {
       return null;
@@ -388,13 +386,6 @@ function Filter(props) {
 
     return data;
   }, [keywords, data]);
-  var getColStyle = useCallback(function () {
-    var colSpan = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
-    return {
-      width: colSpan * colWid,
-      padding: '0 8px'
-    };
-  }, []);
 
   var _useMemo = useMemo(function () {
     var getSet = function getSet(fields) {
@@ -415,17 +406,47 @@ function Filter(props) {
       return [getSet(result), false];
     }
 
-    var btnWidth = simple ? 204 : 240;
+    var getWidth = function getWidth(span) {
+      var colMinWidth = 293.5 * span;
+      var colMaxWidth = 337.6 * span;
+      var wid = width * span / 4;
+
+      if (wid < colMinWidth) {
+        wid = colMinWidth;
+      } else if (wid > colMaxWidth) {
+        wid = colMaxWidth;
+      }
+
+      return wid;
+    };
+
+    var getColWidth = function getColWidth(item) {
+      if (item.renderFormItem) {
+        return getWidth(item.colSpan || 1);
+      }
+
+      if (!item.type) {
+        return 0;
+      }
+
+      var target = compMap.get(item.type);
+
+      if (!target) {
+        return 0;
+      }
+
+      return getWidth(item.colSpan || target.colSpan || 1);
+    };
+
     var btnsVisible = false;
     var end = result.length;
-    var row = 0;
     var space = width;
+    var row = 0;
+    var btnWidth = getWidth(1);
 
     for (var i = 0; i < result.length; i++) {
-      var _compMap$get;
-
       var item = result[i];
-      var itemWidth = getColStyle(item.colSpan || (item.type ? (_compMap$get = compMap.get(item.type)) === null || _compMap$get === void 0 ? void 0 : _compMap$get.colSpan : 1)).width;
+      var itemWidth = getColWidth(item);
 
       if (space <= itemWidth) {
         row += 1;
@@ -454,7 +475,7 @@ function Filter(props) {
     }
 
     return [getSet(result.slice(0, end)), btnsVisible];
-  }, [data, width, collapsed, simple, activeKeys]),
+  }, [data, width, collapsed, activeKeys]),
       _useMemo2 = _slicedToArray(_useMemo, 2),
       cols = _useMemo2[0],
       showCollapse = _useMemo2[1];
@@ -504,7 +525,6 @@ function Filter(props) {
     className: prefix('tab-bar')
   }), /*#__PURE__*/React.createElement(FormLayout, {
     direction: "row",
-    layout: "flex",
     style: !width ? {
       maxHeight: 72,
       overflowY: 'hidden'
@@ -515,10 +535,10 @@ function Filter(props) {
     });
 
     if (item.renderFormItem) {
-      return /*#__PURE__*/React.createElement("div", {
-        style: getColStyle(item.colSpan),
+      return /*#__PURE__*/React.createElement(FormLayout.Col, {
+        key: item.key,
         className: className,
-        key: item.key
+        span: (item.colSpan || 1) * 6
       }, item.renderFormItem(form));
     }
 
@@ -542,16 +562,16 @@ function Filter(props) {
       });
     }
 
-    return /*#__PURE__*/React.createElement("div", {
-      style: getColStyle(item.colSpan || target.colSpan),
+    return /*#__PURE__*/React.createElement(FormLayout.Col, {
+      key: item.key,
       className: className,
-      key: item.key
+      span: (item.colSpan || target.colSpan || 1) * 6
     }, /*#__PURE__*/React.createElement(Form.Item, {
       name: item.key,
       label: item.hideLabel ? undefined : item.label,
       initialValue: item.initialValue
     }, target.render(renderTarget)));
-  }), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement(FormLayout.Col, {
     className: prefix('btns')
   }, /*#__PURE__*/React.createElement("div", {
     className: prefix('submit')

package/es/components/Filter/index.less

@@ -47,7 +47,7 @@
 
   &-submit {
     box-sizing: border-box;
-    width: 92px;
+    width: 94px;
     padding-right: 8px;
     text-align: right;
   }

package/es/components/Filter/typings.d.ts

@@ -5,6 +5,9 @@ export interface FilterItemType<T = any> {
   key: string;
   label?: string;
   type?: string;
+  /**
+   * @description 共4列 传入1|2|3|4
+   */
   colSpan?: number;
   /**
    * @deprecated 不要传入label即可

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

@@ -28,6 +28,7 @@ declare namespace FormLayout {
     var Col: React.FC<{
         span?: number | undefined;
         children?: React.ReactNode;
+        className?: string | undefined;
     }>;
 }
 export default FormLayout;

package/es/components/FormLayout/index.js

@@ -18,9 +18,10 @@ var FormRow = function FormRow(props) {
 
 var FormCol = function FormCol(props) {
   var span = props.span,
-      children = props.children;
+      children = props.children,
+      className = props.className;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(prefix('col'), _defineProperty({}, prefix("col-".concat(span)), span !== undefined))
+    className: classNames(prefix('col'), className, _defineProperty({}, prefix("col-".concat(span)), span !== undefined))
   }, children);
 };
 

package/es/components/FormLayout/index.less

@@ -1,8 +1,8 @@
 @spaceX: 16px;
 @spaceY: 8px;
 @labelWidth: 94px;
-@minWidth: 293.5px;
-@maxWidth: @labelWidth + 422px;
+@minWidth: (1366px - 160px - 4 * @space-h + @spaceX) / 4;
+@maxWidth: (1920px - 200px - 4 * @space-h + @spaceX) / 5;
 
 .wrapper() {
   margin-right: (-@spaceX / 2);
@@ -20,6 +20,7 @@
   flex-wrap: nowrap;
   width: percentage((@colSpan / 24));
   min-width: (@colSpan / 6) * @minWidth;
+  max-width: (@colSpan / 6) * @maxWidth;
   padding: 0 (@spaceX / 2);
 }
 
@@ -28,7 +29,6 @@
     --@{prefixCls}-form-label-width: @labelWidth;
 
     min-width: @minWidth - @spaceX;
-    max-width: ~'calc(4 * (var(--@{prefixCls}-form-label-width) + 422px) - @{spaceX})';
 
     .@{ant-prefix}-form-item {
       flex-wrap: nowrap;
@@ -87,7 +87,8 @@
   &-layout-flex > div > .@{ant-prefix}-form-item,
   &-layout-flex &-col {
     width: 100%;
-    min-width: 0;
+    min-width: unset;
+    max-width: unset;
   }
 
   &-row {

package/package.json

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