@lemon-fe/kits 1.0.0-21 → 1.0.0-211

package/es/components/DurationPicker/index.less

@@ -1,61 +1,12 @@
 .@{prefixCls}-duration {
   display: flex;
   width: 100%;
-  height: @input-height-base;
 
-  .@{ant-prefix}-dropdown-trigger {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    height: 100%;
-    padding: 0 8px;
-    color: rgba(51, 51, 51, 0.7);
-    font-size: 14px;
-    text-align: center;
-    cursor: pointer;
-
-    & > .@{ant-prefix}icon {
-      margin-left: 8px;
-      font-size: 16px;
-    }
-  }
-
-  &-type.@{ant-prefix}-dropdown-trigger {
-    flex: 0 0 auto;
-    margin-right: 8px;
-    border: 1px solid @select-border-color;
-    border-radius: @border-radius-base;
+  .@{ant-prefix}-select {
+    width: auto;
   }
 
-  &-option.@{ant-prefix}-dropdown-trigger {
-    position: relative;
-    flex: 0 0 110px;
-
-    &::after {
-      position: absolute;
-      top: 50%;
-      right: 0;
-      display: block;
-      width: 1px;
-      height: 14px;
-      margin-top: -7px;
-      background-color: #d8d8d8;
-      content: '';
-    }
-  }
-
-  &-picker {
-    display: flex;
+  .@{ant-prefix}-picker {
     flex: 1;
-    height: 100%;
-    border: 1px solid @select-border-color;
-    border-radius: @border-radius-base;
-
-    .@{ant-prefix}-picker {
-      flex: 1;
-      border: none;
-      outline: none;
-      box-shadow: none;
-    }
   }
 }

package/es/components/EditableTable/EditableCell.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import type { EditableCellFocusedType } from './typings';
 export default function EditableCell(props: {
     focused: EditableCellFocusedType;

package/es/components/EditableTable/EditableTableFormItem.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { FormItemProps } from 'antd';
+import type { FormItemProps } from 'antd';
 import type { EditableTableProps } from './typings';
 declare type Props<T> = Pick<FormItemProps, 'name' | 'label' | 'labelCol' | 'wrapperCol' | 'className' | 'required' | 'style' | 'colon'> & EditableTableProps<T>;
 export default function EditableTableFormItem<T>(props: Props<T>): JSX.Element;

package/es/components/EditableTable/Table.d.ts

@@ -1,4 +1,4 @@
-import React, { ForwardedRef } from 'react';
+import React, { type ForwardedRef } from 'react';
 import type { EditableTableProps, EditableTableRef } from './typings';
 declare const _default: <T>(props: EditableTableProps<T> & {
     ref?: React.ForwardedRef<EditableTableRef> | undefined;

package/es/components/EditableTable/Table.js

@@ -24,12 +24,12 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-import React, { cloneElement, createContext, useContext, useEffect, useMemo, useState, memo, isValidElement, forwardRef, useImperativeHandle, useRef } from 'react';
 import { get, isEqual } from 'lodash';
+import React, { cloneElement, createContext, useContext, useEffect, useMemo, useState, memo, isValidElement, forwardRef, useImperativeHandle, useRef } from 'react';
 import BaseTable from "../BaseTable";
+import EditableCell from "./EditableCell";
 import { FormStore } from "./util";
 import { PREFIX_CLS } from "../../constants";
-import EditableCell from "./EditableCell";
 var Context = /*#__PURE__*/createContext(null);
 
 var getColKey = function getColKey(name) {
@@ -176,7 +176,7 @@ function EditableTable(props, ref) {
                 disableUpDown = _item$editable.disableUpDown;
 
             if ( /*#__PURE__*/isValidElement(renderFormItem)) {
-              render = function render(value, _, __, opts) {
+              render = function render(val, _1, _2, opts) {
                 return /*#__PURE__*/React.createElement(EditableCell, {
                   disableLeftRight: disableLeftRight,
                   disableUpDown: disableUpDown,
@@ -185,15 +185,15 @@ function EditableTable(props, ref) {
                   onFocus: opts.onFocus
                 }, /*#__PURE__*/cloneElement(renderFormItem, {
                   bordered: false,
-                  value: value,
+                  value: val,
                   onChange: function onChange(e) {
-                    var val = e;
+                    var result = e;
 
                     if (e !== undefined && e !== null && e.currentTarget instanceof HTMLInputElement) {
-                      val = e.currentTarget.value;
+                      result = e.currentTarget.value;
                     }
 
-                    opts.onChange(_defineProperty({}, path, val));
+                    opts.onChange(_defineProperty({}, path, result));
                   }
                 }));
               };

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

@@ -29,7 +29,7 @@ export type EditableTableRule<T> = Pick<
 };
 
 export type EditableTableRef = {
-  validate(): Promise<any>;
+  validate: () => Promise<any>;
 };
 
 export interface EditableTableColumnType<T>

package/es/components/Filter/index.js

@@ -34,21 +34,25 @@ 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, { 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';
+import { Button, Checkbox, Form, Input, Popover, Space, Modal, message, Select, Empty } from 'antd';
 import classNames from 'classnames';
-import Icons from "../Icons";
+import ResizeObserver from 'rc-resize-observer';
+import React, { useEffect, useMemo, useState } from 'react';
+import Dropdown from "../Dropdown";
 import DurationPicker from "../DurationPicker";
 import FormLayout from "../FormLayout";
-import { PREFIX_CLS } from "../../constants";
+import Icons from "../Icons";
+import InputNumber from "../InputNumber";
 import TabBar from "../TabBar";
-import Dropdown from "../Dropdown";
+import { prefixClassName } from "../utils";
 var components = [{
   type: 'input',
   render: function render(item) {
-    return /*#__PURE__*/React.createElement(Input, item.extraProps);
+    return /*#__PURE__*/React.createElement(Input, _extends({
+      allowClear: true,
+      maxLength: 125
+    }, item.extraProps));
   }
 }, {
   type: 'input-number',
@@ -87,7 +91,7 @@ var getStorageData = function getData(storageKey) {
   return null;
 };
 
-var setStorageData = function setData(storageKey, data, item) {
+var setStorageData = function setData(storageKey, data, action) {
   localStorage.setItem("filter-storage-".concat(storageKey), JSON.stringify(data));
 };
 
@@ -108,8 +112,11 @@ function setStorage(getData, setData) {
   setStorageData = setData;
 }
 
+var defaultData = [];
+
 function Filter(props) {
-  var data = props.data,
+  var _props$data = props.data,
+      data = _props$data === void 0 ? defaultData : _props$data,
       defaultValueProp = props.defaultValue,
       onChange = props.onChange,
       value = props.value,
@@ -119,13 +126,17 @@ function Filter(props) {
       style = props.style,
       simple = props.simple,
       _props$defaultCollaps = props.defaultCollapsed,
-      defaultCollapsed = _props$defaultCollaps === void 0 ? true : _props$defaultCollaps;
-  var prefixCls = "".concat(PREFIX_CLS, "-filter");
+      defaultCollapsed = _props$defaultCollaps === void 0 ? true : _props$defaultCollaps,
+      autoPlaceholder = props.autoPlaceholder,
+      _props$preserveFields = props.preserveFields,
+      preserveFields = _props$preserveFields === void 0 ? true : _props$preserveFields,
+      legacyReset = props.legacyReset;
+  var prefix = prefixClassName('filter');
   var emptyValue = useMemo(function () {
     return Object.fromEntries(data.map(function (item) {
       return [item.key, undefined];
     }));
-  }, []);
+  }, [data]);
   var defaultValue = useMemo(function () {
     return defaultValueProp || value;
   }, []);
@@ -134,9 +145,7 @@ function Filter(props) {
       return new Set(defaultActiveKeys);
     }
 
-    return new Set(data.map(function (item) {
-      return item.key;
-    }));
+    return null;
   }, []);
   var compMap = useMemo(function () {
     return new Map(components.map(function (item) {
@@ -190,14 +199,14 @@ function Filter(props) {
       collapsed = _useState14[0],
       setCollapsed = _useState14[1];
 
-  var _useRequest = useRequest(function () {
+  useRequest(function () {
     if (!storageKey) {
       return null;
     }
 
     return getStorageData(storageKey);
   }, {
-    loadingState: false,
+    manual: false,
     onSuccess: function onSuccess(res) {
       if (res !== null) {
         setTabs(function (prev) {
@@ -205,12 +214,7 @@ function Filter(props) {
         });
       }
     }
-  }),
-      init = _useRequest.run;
-
-  useEffect(function () {
-    init();
-  }, []);
+  });
   useEffect(function () {
     if (value) {
       form.setFieldsValue(value);
@@ -339,33 +343,40 @@ function Filter(props) {
     });
   };
 
-  var handleFinish = function handleFinish(val) {
+  var handleFinish = function handleFinish(val, type) {
     if (onChange) {
-      onChange(_objectSpread(_objectSpread({}, value), val));
+      onChange(preserveFields ? _objectSpread(_objectSpread({}, value), val) : val, type);
     }
   };
 
   var handleReset = function handleReset() {
-    form.resetFields();
-    handleFinish(form.getFieldsValue());
+    if (legacyReset) {
+      form.resetFields();
+    } else {
+      form.setFieldsValue(_objectSpread(_objectSpread({}, emptyValue), defaultValue));
+    }
+
+    handleFinish(form.getFieldsValue(), 'reset');
   };
 
   var handleTabChange = function handleTabChange(index) {
     if (index !== active) {
       setActive(index);
 
-      var _data = _objectSpread(_objectSpread({}, emptyValue), tabs[index].value);
+      var result = _objectSpread(_objectSpread({}, emptyValue), tabs[index].value);
 
-      form.setFieldsValue(_data);
-      handleFinish(_data);
+      form.setFieldsValue(result);
+      handleFinish(form.getFieldsValue(), 'reset');
     }
   };
 
-  var handleActiveKey = function handleActiveKey(key, value) {
+  var handleActiveKey = function handleActiveKey(key, flag) {
     setActiveKeys(function (prev) {
-      var next = new Set(prev);
+      var next = new Set(prev === null ? data.map(function (item) {
+        return item.key;
+      }) : prev);
 
-      if (value) {
+      if (flag) {
         next.add(key);
       } else {
         next.delete(key);
@@ -375,6 +386,14 @@ function Filter(props) {
     });
   };
 
+  var isFieldHidden = function isFieldHidden(field) {
+    if (field.hidden || activeKeys !== null && !activeKeys.has(field.key)) {
+      return true;
+    }
+
+    return false;
+  };
+
   var items = useMemo(function () {
     if (keywords) {
       return data.filter(function (item) {
@@ -385,59 +404,94 @@ function Filter(props) {
     return data;
   }, [keywords, data]);
 
-  var getColStyle = function getColStyle() {
-    var colSpan = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
-    return {
-      width: colSpan * 348,
-      padding: '0 8px'
-    };
-  };
-
   var _useMemo = useMemo(function () {
-    var getSet = function getSet(items) {
-      return new Set(items.map(function (item) {
+    var getSet = function getSet(fields) {
+      return new Set(fields.map(function (item) {
         return item.key;
       }));
     };
 
     var result = data.filter(function (item) {
-      if (activeKeys.has(item.key)) {
-        return true;
-      }
-
-      return false;
+      return !isFieldHidden(item);
     });
 
     if (!width) {
       return [getSet(result), false];
     }
 
-    var btnsWidth = simple ? 208 : 248;
+    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 size = 0;
-    var end = 0;
+    var end = result.length;
+    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;
-      size += itemWidth;
+      var itemWidth = getColWidth(item);
+      /**
+       * 0.1为容许误差
+       */
+
+      if (space < itemWidth - 0.1) {
+        row += 1;
+
+        if (space < width) {
+          if (itemWidth > width) {
+            row += 1;
+            space = width;
+          } else {
+            space = width - itemWidth;
+          }
+        }
+      } else {
+        space -= itemWidth;
+      }
 
-      if (size > width - btnsWidth) {
+      if (btnWidth > space && row === 1 || row === 2) {
         btnsVisible = true;
+        end = i;
         break;
       }
-
-      end = i;
     }
 
     if (!collapsed) {
       return [getSet(result), btnsVisible];
     }
 
-    return [getSet(result.slice(0, end + 1)), btnsVisible];
-  }, [data, width, collapsed, simple, activeKeys]),
+    return [getSet(result.slice(0, end)), btnsVisible];
+  }, [data, width, collapsed, activeKeys]),
       _useMemo2 = _slicedToArray(_useMemo, 2),
       cols = _useMemo2[0],
       showCollapse = _useMemo2[1];
@@ -449,7 +503,7 @@ function Filter(props) {
       }
     }
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames(prefixCls, _defineProperty({}, "".concat(prefixCls, "-simple"), simple)),
+    className: classNames(prefix(), _defineProperty({}, prefix('simple'), simple)),
     style: style
   }, /*#__PURE__*/React.createElement(Modal, {
     destroyOnClose: true,
@@ -475,7 +529,9 @@ function Filter(props) {
     autoFocus: true
   })))), /*#__PURE__*/React.createElement(Form, {
     initialValues: defaultValue,
-    onFinish: handleFinish,
+    onFinish: function onFinish(val) {
+      return handleFinish(val, 'submit');
+    },
     form: form,
     onValuesChange: handleValuesChange
   }, !simple && /*#__PURE__*/React.createElement(TabBar, {
@@ -484,19 +540,27 @@ function Filter(props) {
     onTabClick: function onTabClick(_, index) {
       return handleTabChange(index);
     },
-    className: "".concat(prefixCls, "-tab-bar")
+    className: prefix('tab-bar')
   }), /*#__PURE__*/React.createElement(FormLayout, {
-    direction: "row"
+    direction: "row",
+    style: !width ? {
+      maxHeight: 72,
+      overflow: 'hidden'
+    } : undefined
   }, data.map(function (item) {
-    var className = classNames("".concat(prefixCls, "-form-item"), {
+    if (!preserveFields && isFieldHidden(item)) {
+      return null;
+    }
+
+    var className = classNames(prefix('form-item'), {
       hidden: !cols.has(item.key) ? true : false
     });
 
     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));
     }
 
@@ -510,40 +574,35 @@ function Filter(props) {
       return null;
     }
 
-    return /*#__PURE__*/React.createElement("div", {
-      style: getColStyle(item.colSpan || target.colSpan),
+    var renderTarget = item;
+
+    if (autoPlaceholder && item.label !== undefined && item.type !== undefined) {
+      renderTarget = _objectSpread(_objectSpread({}, item), {}, {
+        extraProps: _objectSpread({
+          placeholder: "\u8BF7".concat(item.type.includes('select') ? '选择' : '输入').concat(item.label)
+        }, item.extraProps)
+      });
+    }
+
+    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(item)));
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "".concat(prefixCls, "-btns")
+    }, target.render(renderTarget)));
+  }), /*#__PURE__*/React.createElement(FormLayout.Col, {
+    className: prefix('btns')
   }, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(prefixCls, "-submit")
+    className: prefix('submit')
   }, /*#__PURE__*/React.createElement(Button, {
     type: "primary",
     htmlType: "submit"
   }, "\u67E5\u8BE2")), /*#__PURE__*/React.createElement(Space, null, simple ? /*#__PURE__*/React.createElement(Button, {
-    icon: /*#__PURE__*/React.createElement("svg", {
-      width: "20",
-      height: "20",
-      viewBox: "0 0 20 20",
-      xmlns: "http://www.w3.org/2000/svg"
-    }, /*#__PURE__*/React.createElement("path", {
-      d: "m15 12 .98 3.314a8 8 0 1 0-3.293 2.223",
-      stroke: "currentColor",
-      strokeWidth: "1.5",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      fill: "none",
-      fillRule: "evenodd"
-    })),
-    className: "".concat(prefixCls, "-reset ").concat(prefixCls, "-btn"),
     onClick: handleReset
-  }) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Dropdown, {
+  }, "\u91CD\u7F6E") : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Dropdown, {
     actions: [{
       text: '重置',
       onClick: handleReset
@@ -558,24 +617,24 @@ function Filter(props) {
     icon: /*#__PURE__*/React.createElement(Icons.More, null)
   })), /*#__PURE__*/React.createElement(Popover, {
     trigger: "click",
-    overlayClassName: "".concat(prefixCls, "-popover"),
+    overlayClassName: prefix('popover'),
     destroyTooltipOnHide: true,
     content: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Input, {
       placeholder: "\u641C\u7D22\u9009\u9879",
       allowClear: true,
-      className: "".concat(prefixCls, "-items-search"),
+      className: prefix('items-search'),
       prefix: /*#__PURE__*/React.createElement(Icons.Search, null),
       onChange: function onChange(e) {
         return handleChangeKeywords(e.currentTarget.value);
       }
     }), /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-items")
+      className: prefix('items')
     }, items.length > 0 ? items.map(function (item) {
       return /*#__PURE__*/React.createElement("div", {
         key: item.key,
-        className: "".concat(prefixCls, "-item")
+        className: prefix('item')
       }, /*#__PURE__*/React.createElement(Checkbox, {
-        checked: activeKeys.has(item.key),
+        checked: activeKeys === null || activeKeys.has(item.key),
         onChange: function onChange(e) {
           handleActiveKey(item.key, e.target.checked);
         }
@@ -585,7 +644,7 @@ function Filter(props) {
     }))),
     placement: "bottomRight"
   }, /*#__PURE__*/React.createElement(Button, {
-    className: "".concat(prefixCls, "-btn"),
+    className: prefix('btn'),
     onClick: function onClick() {
       setKeywords('');
     },
@@ -600,7 +659,7 @@ function Filter(props) {
       });
     },
     type: "link",
-    className: "".concat(prefixCls, "-collapse")
+    className: prefix('collapse')
   }, collapsed ? '高级搜索' : '收起搜索', /*#__PURE__*/React.createElement("svg", {
     width: "10",
     height: "10",

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;
   }
@@ -76,7 +76,3 @@
     overflow: hidden;
   }
 }
-
-.@{prefixCls}-section-body > .@{prefixCls}-filter:not(.@{prefixCls}-filter-simple):first-child {
-  margin-top: -@space-v;
-}

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

@@ -5,18 +5,36 @@ export interface FilterItemType<T = any> {
   key: string;
   label?: string;
   type?: string;
+  /**
+   * @description 共4列 传入1|2|3|4
+   */
   colSpan?: number;
+  /**
+   * @deprecated 不要传入label即可
+   */
   hideLabel?: boolean;
+  /**
+   * 控制是否隐藏筛选项
+   */
+  hidden?: boolean;
   extraProps?: Record<string, any>;
   renderFormItem?: (form: FormInstance<T>) => ReactElement;
   initialValue?: any;
 }
 
+export type ActionType = 'submit' | 'reset';
+
 export interface FilterProps<T extends Record<string, any> = Record<string, any>> {
-  data: FilterItemType<T>[];
+  data?: FilterItemType<T>[];
   defaultValue?: T;
   value?: T;
-  onChange?: (value: T) => void;
+  /**
+   *
+   * @param value 表单的值
+   * @param actionType 通过查询还是重置按钮触发
+   * @returns
+   */
+  onChange?: (value: T, actionType: 'submit' | 'reset') => void;
   onValuesChange?: (changedValues: Partial<T>, allValues: T, form: FormInstance<T>) => void;
   defaultActiveKeys?: string[];
   storageKey?: string;
@@ -26,6 +44,22 @@ export interface FilterProps<T extends Record<string, any> = Record<string, any>
    * @description 是否简化筛选器，简化版不包含标签以及选项保存
    */
   simple?: boolean;
+  /**
+   * @description 是否自动生成placeholder
+   * @default false
+   * 根据item.type以及item.label生成，自动注入到extraProps属性里，带有select则是请选择否则就是请输入
+   */
+  autoPlaceholder?: boolean;
+  /**
+   * @description 当字段隐藏时，保留字段值并在查询返回
+   * @default true
+   */
+  preserveFields?: boolean;
+  /**
+   * @description reset行为通过form.resetFields实现，与原先保持一致
+   * 当前reset行为是通过内部的emptyValue以及defaultValue
+   */
+  legacyReset?: true;
 }
 
 export interface ComponentOption {