@lemon-fe/kits 1.0.0-105 → 1.0.0-107

package/es/components/DataGrid/cell-editors/Number.js

@@ -52,7 +52,7 @@ export default /*#__PURE__*/forwardRef(function NumberEditor(props, ref) {
       setValue = _useState2[1];
 
   var elm = useRef(null);
-  var dirty = useRef(false);
+  var dirty = useRef(!!props.charPress);
   useEffect(function () {
     if (elm.current === null) {
       return;

package/es/components/DataGrid/utils.js

@@ -254,7 +254,7 @@ export var columnTypes = {
     initialWidth: 160
   },
   date: {
-    initialWidth: 130,
+    initialWidth: 100,
     valueFormatter: function valueFormatter(_ref) {
       var value = _ref.value;
 
@@ -265,12 +265,24 @@ export var columnTypes = {
       return value;
     }
   },
+  time: {
+    initialWidth: 100,
+    valueFormatter: function valueFormatter(_ref2) {
+      var value = _ref2.value;
+
+      if (value) {
+        return moment(value).format('HH:mm');
+      }
+
+      return value;
+    }
+  },
   currency: {
     headerClass: 'ag-right-aligned-header',
     cellClass: 'ag-right-aligned-cell',
     initialWidth: 120,
-    valueFormatter: function valueFormatter(_ref2) {
-      var value = _ref2.value;
+    valueFormatter: function valueFormatter(_ref3) {
+      var value = _ref3.value;
 
       if (typeof value === 'number') {
         return value.toLocaleString('en-US', {
@@ -293,8 +305,8 @@ export var columnTypes = {
     cellRenderer: CellIndexRender,
     initialWidth: 45,
     suppressMenu: true,
-    valueGetter: function valueGetter(_ref3) {
-      var node = _ref3.node;
+    valueGetter: function valueGetter(_ref4) {
+      var node = _ref4.node;
       return node === null || node === void 0 ? void 0 : node.rowIndex;
     },
     cellClass: prefix('cell-align-center'),

package/es/components/Filter/index.js

@@ -341,15 +341,15 @@ function Filter(props) {
     });
   };
 
-  var handleFinish = function handleFinish(val) {
+  var handleFinish = function handleFinish(val, type) {
     if (onChange) {
-      onChange(_objectSpread(_objectSpread({}, value), val));
+      onChange(_objectSpread(_objectSpread({}, value), val), type);
     }
   };
 
   var handleReset = function handleReset() {
     form.resetFields();
-    handleFinish(form.getFieldsValue());
+    handleFinish(form.getFieldsValue(), 'reset');
   };
 
   var handleTabChange = function handleTabChange(index) {
@@ -359,7 +359,7 @@ function Filter(props) {
       var result = _objectSpread(_objectSpread({}, emptyValue), tabs[index].value);
 
       form.setFieldsValue(result);
-      handleFinish(result);
+      handleFinish(result, 'reset');
     }
   };
 
@@ -513,7 +513,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, {

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

@@ -22,11 +22,19 @@ export interface FilterItemType<T = any> {
   initialValue?: any;
 }
 
+export type ActionType = 'submit' | 'reset';
+
 export interface FilterProps<T extends Record<string, any> = Record<string, any>> {
   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;

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

@@ -18,7 +18,7 @@ interface Props {
     direction?: 'row' | 'column';
     style?: CSSProperties;
     className?: string;
-    labelWidth?: number;
+    labelWidth?: number | string;
 }
 declare function FormLayout(props: Props): JSX.Element;
 declare namespace FormLayout {

package/es/components/FormLayout/index.js

@@ -36,7 +36,7 @@ function FormLayout(props) {
   var extraStyle;
 
   if (labelWidth) {
-    extraStyle = _defineProperty({}, "--".concat(prefix('label-width')), "".concat(labelWidth, "px"));
+    extraStyle = _defineProperty({}, "--".concat(prefix('label-width')), typeof labelWidth === 'string' ? labelWidth : "".concat(labelWidth, "px"));
   }
 
   return /*#__PURE__*/React.createElement("div", {

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

@@ -25,7 +25,7 @@ interface Props {
     body?: ReactNode;
     onCollapse?: (collapsed: boolean) => void;
     /**
-     * @description 需要显示tabbar时使用
+     * @deprecated 请自行使用TabBar以及Section处理
      */
     tabs?: Tab[];
     activeKey?: string;

package/es/components/Layout/index.js

@@ -24,6 +24,7 @@ import React, { useState } from 'react';
 import classNames from 'classnames';
 import { Spin, Tabs } from 'antd';
 import { get } from 'lodash';
+import { Resizable } from 'react-resizable';
 import { mapChildren, prefixClassName } from "../utils";
 var prefix = prefixClassName('layout');
 
@@ -32,16 +33,48 @@ var getKey = function getKey(tab) {
 };
 
 function Sider(props) {
+  var _classNames;
+
   var children = props.children,
       onCollapse = props.onCollapse;
 
-  var _useState = useState(false),
+  var _useState = useState(242),
       _useState2 = _slicedToArray(_useState, 2),
-      collapsed = _useState2[0],
-      setCollapsed = _useState2[1];
-
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames(prefix('left'), _defineProperty({}, prefix("left-collapsed"), collapsed))
+      width = _useState2[0],
+      setWidth = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      collapsed = _useState4[0],
+      setCollapsed = _useState4[1];
+
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      dragging = _useState6[0],
+      setDragging = _useState6[1];
+
+  var viewWidth = collapsed ? 0 : width;
+  return /*#__PURE__*/React.createElement(Resizable, {
+    axis: "x",
+    width: width,
+    height: 0,
+    onResizeStart: function onResizeStart() {
+      setDragging(true);
+    },
+    onResizeStop: function onResizeStop() {
+      setDragging(false);
+    },
+    onResize: function onResize(_, data) {
+      setWidth(data.size.width);
+    },
+    handle: /*#__PURE__*/React.createElement("div", {
+      className: prefix('left-resizable')
+    })
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: viewWidth
+    },
+    className: classNames(prefix('left'), (_classNames = {}, _defineProperty(_classNames, prefix("left-collapsed"), collapsed), _defineProperty(_classNames, prefix("left-resizing"), dragging), _classNames))
   }, /*#__PURE__*/React.createElement("div", {
     className: prefix("left-body")
   }, /*#__PURE__*/React.createElement("div", {
@@ -94,7 +127,7 @@ function Sider(props) {
     strokeLinejoin: "round",
     strokeDasharray: "0,0",
     transform: "translate(2.828427, 2.121320) rotate(-45.000000) translate(-2.828427, -2.121320) "
-  }))))))));
+  })))))))));
 }
 
 function Content(props) {

package/es/components/Layout/index.less

@@ -31,29 +31,33 @@
   &-left {
     position: relative;
 
+    &:not(&-resizing) {
+      transition: width 0.2s;
+    }
+
     &-body {
-      width: 242px;
       height: 100%;
       overflow-x: hidden;
-      transition: width 0.2s;
     }
 
     &-content {
       position: relative;
       display: flex;
       flex-direction: column;
-      width: 242px;
       height: 100%;
+    }
 
-      &::after {
-        position: absolute;
-        top: 0;
-        right: 0;
-        width: 1px;
-        height: 100%;
-        background-color: #e6e6e6;
-        content: '';
-      }
+    &-resizable {
+      position: absolute;
+      top: 0;
+      right: -8px;
+      box-sizing: border-box;
+      width: 17px;
+      height: 100%;
+      padding: 0 8px;
+      background-color: #e6e6e6;
+      background-clip: content-box;
+      cursor: col-resize;
     }
 
     &-collapse {
@@ -82,10 +86,6 @@
       }
     }
 
-    &-collapsed &-body {
-      width: 0;
-    }
-
     &-collapsed &-collapse {
       transform: rotateY(180deg);
     }

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

@@ -1,11 +1,12 @@
 import type { CSSProperties, ReactElement } from 'react';
 import type { FilterProps } from '../Filter/typings';
-import type { ColType } from '../DataGrid/typings';
+import type { ColType, SortType } from '../DataGrid/typings';
 interface Props<RecordType, ParamsType extends Record<string, any>> {
     value?: RecordType[];
     onChange?: (value: RecordType[], rowDoubleClicked?: boolean) => void;
     /**
      * @description 是否多选
+     * @default true
      */
     multiple?: boolean;
     /**
@@ -22,6 +23,7 @@ interface Props<RecordType, ParamsType extends Record<string, any>> {
     fetch?: (query: {
         current: number;
         pageSize: number;
+        sort: SortType[];
         params: ParamsType;
     }) => Promise<{
         total: number;

package/es/components/SelectView/index.js

@@ -87,11 +87,13 @@ export default function SelectView(props) {
 
   var request = fetch ? function (_ref) {
     var current = _ref.current,
-        pageSize = _ref.pageSize;
+        pageSize = _ref.pageSize,
+        sort = _ref.sort;
     return fetch({
       current: current,
       pageSize: pageSize,
-      params: params
+      params: params,
+      sort: sort
     });
   } : undefined;
   useEffect(function () {
@@ -141,7 +143,7 @@ export default function SelectView(props) {
 
   var handleChangeParams = function handleChangeParams(mParams) {
     if (filter !== null && filter !== void 0 && filter.onChange) {
-      filter.onChange(mParams);
+      filter.onChange(mParams, 'submit');
     }
 
     setParams(mParams);

package/es/components/SiderTree/TreeNodeTitle.js

@@ -76,7 +76,7 @@ export default function TreeNodeTitle(props) {
   }, others || operation.onAdd ? /*#__PURE__*/React.createElement(Popover, {
     overlayClassName: "".concat(prefixCls, "-menu-popover"),
     placement: "bottomLeft",
-    visible: visible,
+    open: visible,
     trigger: "click",
     content: /*#__PURE__*/React.createElement("div", {
       onClick: function onClick() {
@@ -87,7 +87,7 @@ export default function TreeNodeTitle(props) {
         return operation.onAdd(item);
       }
     }, "\u65B0\u589E")) : null, others),
-    onVisibleChange: setVisible
+    onOpenChange: setVisible
   }, /*#__PURE__*/React.createElement("div", {
     className: classNames("".concat(prefixCls, "-title-operators-item"), _defineProperty({}, "".concat(prefixCls, "-title-operators-item-active"), visible)),
     onClick: function onClick() {

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

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
 import { type TabsProps, type TreeProps } from 'antd';
 import type { TreeData, OperationType } from './typings';
-interface Props<KeyType> extends Omit<TreeProps, 'onSelect' | 'selectedKeys' | 'defaultSelectedKeys' | 'defaultExpandAll' | 'defaultExpandedKeys' | 'prefixCls'> {
+interface Props<KeyType> extends Omit<TreeProps, 'onSelect' | 'selectedKeys' | 'defaultSelectedKeys' | 'defaultExpandAll' | 'defaultExpandedKeys' | 'prefixCls' | 'height'> {
     data?: TreeData<KeyType>[];
     showSearch?: boolean;
     placeholder?: string;
@@ -15,6 +15,7 @@ interface Props<KeyType> extends Omit<TreeProps, 'onSelect' | 'selectedKeys' | '
     defaultExpandAll?: boolean;
     defaultExpandedKeys?: KeyType[];
     active?: boolean;
+    height?: number | 'auto';
 }
 declare function SiderTreeTabs(props: {
     tabs: {

package/es/components/SiderTree/index.js

@@ -1,5 +1,5 @@
 var _excluded = ["tabs", "children"],
-    _excluded2 = ["data", "showSearch", "placeholder", "onSelect", "filterNode", "operation", "header", "footer"];
+    _excluded2 = ["data", "showSearch", "placeholder", "onSelect", "filterNode", "operation", "header", "footer", "height"];
 
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 
@@ -29,11 +29,12 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 import React, { useMemo, useState } from 'react';
 import { useDebounce } from '@lemon-fe/hooks';
+import ResizeObserver from 'rc-resize-observer';
 import { Input, Tabs, Tree } from 'antd';
 import { PREFIX_CLS } from "../../constants";
 import TreeNodeTitle from "./TreeNodeTitle";
 import Icons from "../Icons";
-import { mapChildren } from "../utils";
+import { mapChildren, prefixClassName } from "../utils";
 import empty from "./empty.png";
 
 function SiderTreeTabs(props) {
@@ -57,6 +58,7 @@ function SiderTreeTabs(props) {
   }));
 }
 
+var prefix = prefixClassName('tree');
 export default function SiderTree(props) {
   var _props$data = props.data,
       mData = _props$data === void 0 ? [] : _props$data,
@@ -67,15 +69,19 @@ export default function SiderTree(props) {
       operation = props.operation,
       header = props.header,
       footer = props.footer,
+      heightProp = props.height,
       restProps = _objectWithoutProperties(props, _excluded2);
 
-  var prefixCls = "".concat(PREFIX_CLS, "-tree");
-
   var _useState = useState(''),
       _useState2 = _slicedToArray(_useState, 2),
       keywords = _useState2[0],
       setKeywords = _useState2[1];
 
+  var _useState3 = useState(heightProp !== 'auto' ? heightProp : 0),
+      _useState4 = _slicedToArray(_useState3, 2),
+      height = _useState4[0],
+      setHeight = _useState4[1];
+
   var tree = useMemo(function () {
     var list = mData;
 
@@ -98,7 +104,7 @@ export default function SiderTree(props) {
         title: /*#__PURE__*/React.createElement(TreeNodeTitle, {
           operation: operation,
           node: item,
-          prefixCls: prefixCls
+          prefixCls: prefix()
         })
       }];
     }));
@@ -141,25 +147,21 @@ export default function SiderTree(props) {
     });
   }
 
-  return /*#__PURE__*/React.createElement("div", {
-    className: "".concat(prefixCls, "-wrapper")
-  }, !!mHeader && /*#__PURE__*/React.createElement("div", {
-    className: "".concat(prefixCls, "-header")
-  }, mHeader), /*#__PURE__*/React.createElement("div", {
-    className: "".concat(prefixCls, "-body")
-  }, tree.length <= 0 ? /*#__PURE__*/React.createElement("div", {
-    className: "".concat(prefixCls, "-empty")
+  var bodyContent = tree.length <= 0 ? /*#__PURE__*/React.createElement("div", {
+    className: prefix('empty')
   }, /*#__PURE__*/React.createElement("img", {
     src: empty
   }), /*#__PURE__*/React.createElement("div", null, "\u6682\u65E0\u6570\u636E")) : /*#__PURE__*/React.createElement(Tree, _extends({
     treeData: tree,
     itemHeight: 28,
     showLine: true,
-    onSelect: function onSelect(selectedKeys, info) {
+    height: height,
+    onSelect: function onSelect(_, info) {
       if (_onSelect) {
         _onSelect(info.node.data, info);
       }
     },
+    blockNode: true,
     switcherIcon: function switcherIcon(_ref) {
       var expanded = _ref.expanded,
           isLeaf = _ref.isLeaf;
@@ -213,8 +215,24 @@ export default function SiderTree(props) {
         d: "M7 3v7H6V3z"
       })));
     }
-  }, restProps))), !!footer && /*#__PURE__*/React.createElement("div", {
-    className: "".concat(prefixCls, "-footer")
+  }, restProps));
+  return /*#__PURE__*/React.createElement("div", {
+    className: prefix('wrapper')
+  }, !!mHeader && /*#__PURE__*/React.createElement("div", {
+    className: prefix('header')
+  }, mHeader), heightProp === 'auto' ? /*#__PURE__*/React.createElement(ResizeObserver, {
+    onResize: function onResize(e) {
+      return setHeight(e.height);
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: prefix('body'),
+    style: {
+      flex: 1
+    }
+  }, bodyContent)) : /*#__PURE__*/React.createElement("div", {
+    className: prefix('body')
+  }, bodyContent), !!footer && /*#__PURE__*/React.createElement("div", {
+    className: prefix('footer')
   }, footer));
 }
 SiderTree.Tabs = SiderTreeTabs;

package/es/components/SiderTree/index.less

@@ -74,7 +74,6 @@
       }
 
       &-treenode {
-        display: flex;
         align-items: center;
         height: @treeNodeHeight;
         padding-bottom: 0;
@@ -98,14 +97,15 @@
         align-items: center;
         min-width: 0;
         padding: 0;
+        overflow-x: hidden;
       }
 
       &-switcher {
         position: relative;
         display: flex;
         flex: none;
-        justify-content: center;
         align-items: center;
+        justify-content: center;
         width: @indentWidth;
         height: @treeNodeHeight;
         margin: 0;

package/es/index.d.ts

@@ -14,7 +14,7 @@ export { default as Table } from './components/Table';
 export { default as PageLoading } from './components/PageLoading';
 export { default as Actions } from './components/Actions';
 export { default as Filter } from './components/Filter';
-export type { FilterItemType } from './components/Filter/typings';
+export type { FilterItemType, FilterProps, ComponentOption } from './components/Filter/typings';
 export { default as Section } from './components/Section';
 export { default as Layout } from './components/Layout';
 export { default as DurationPicker } from './components/DurationPicker';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lemon-fe/kits",
-  "version": "1.0.0-105",
+  "version": "1.0.0-107",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",
@@ -73,6 +73,7 @@
     "@types/react": "^18.0.18",
     "@types/react-color": "^3.0.6",
     "@types/react-dom": "^18.0.6",
+    "@types/react-resizable": "^3.0.4",
     "@types/react-router": "^5.0.0",
     "@types/react-router-dom": "^5.0.0",
     "@types/shallowequal": "^1.1.1",