@lemon-fe/components 0.0.27 → 0.1.0-alpha.0

package/es/Actions/index.d.ts

@@ -3,11 +3,12 @@ import type { CSSProperties } from 'react';
 import { ButtonProps } from 'antd';
 interface ActionBtn extends ButtonProps {
     text: string | ReactElement;
+    onClick?: () => void;
     /**
-     * deprecated please use onClick
+     * @deprecated
+     * 请不要使用
      */
     action?: () => void;
-    onClick?: () => void;
     dropDown?: ({
         text: string;
         onClick: () => void;

package/es/Actions/index.js

@@ -1,4 +1,4 @@
-var _excluded = ["disabled", "dropDown", "text", "action", "onClick", "icon"];
+var _excluded = ["disabled", "dropDown", "text", "onClick", "icon", "action"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -65,9 +65,9 @@ function Actions(props) {
     var disabled = item.disabled,
         dropDown = item.dropDown,
         text = item.text,
-        action = item.action,
         onClick = item.onClick,
         icon = item.icon,
+        action = item.action,
         rest = _objectWithoutProperties(item, _excluded);
 
     if ( /*#__PURE__*/React.isValidElement(text)) {
@@ -94,13 +94,11 @@ function Actions(props) {
       if (handleClick !== undefined) {
         return /*#__PURE__*/React.createElement(Dropdown.Button, {
           key: text,
-          type: 'text',
           disabled: disabled,
           overlay: overlay,
-          onClick: handleClick
-        }, icon ? /*#__PURE__*/React.createElement("span", {
-          className: "".concat(prefixCls, "-actions-icon")
-        }, icon) : null, text);
+          onClick: handleClick,
+          icon: icon
+        }, text);
       }
 
       return /*#__PURE__*/React.createElement(Dropdown, {
@@ -109,20 +107,16 @@ function Actions(props) {
         overlay: overlay
       }, /*#__PURE__*/React.createElement(Button, _objectSpread({
         disabled: disabled,
-        type: "text"
-      }, rest), icon ? /*#__PURE__*/React.createElement("span", {
-        className: "".concat(prefixCls, "-actions-icon")
-      }, icon) : null, text, /*#__PURE__*/React.createElement(Down, null)));
+        icon: icon
+      }, rest), text, /*#__PURE__*/React.createElement(Down, null)));
     }
 
-    return /*#__PURE__*/React.createElement(Button, {
+    return /*#__PURE__*/React.createElement(Button, _objectSpread({
       key: text,
       disabled: disabled,
       onClick: handleClick,
-      type: "text"
-    }, icon ? /*#__PURE__*/React.createElement("span", {
-      className: "".concat(prefixCls, "-actions-icon")
-    }, icon) : null, text);
+      icon: icon
+    }, rest), text);
   }), collapsedBtns.length > 0 ? /*#__PURE__*/React.createElement(Popover, {
     placement: "bottomRight",
     overlayClassName: "".concat(prefixCls, "-actions-popover"),
@@ -161,7 +155,6 @@ function Actions(props) {
       }, item.text);
     }))
   }, /*#__PURE__*/React.createElement(Button, {
-    type: "text",
     icon: /*#__PURE__*/React.createElement(EllipsisOutlined, null)
   })) : null));
 }

package/es/Actions/index.less

@@ -51,45 +51,20 @@
     }
   }
 
-  .ant-btn {
-    padding: 0 8px;
-    font-size: 14px;
-    border-radius: 2px;
+  .ant-btn:not(.ant-btn-icon-only) {
+    min-width: 80px;
+    padding: 4px 12px;
   }
 
-  .ant-dropdown-button.ant-btn-group > .ant-btn:last-child:not(:first-child) {
-    padding-right: 4px;
-    padding-left: 4px;
-  }
-
-  .ant-btn-text {
-    display: inline-flex;
-    align-items: center;
-
-    &:not(:disabled) {
-      color: rgba(51, 51, 51, 0.65);
-
-      &:hover {
-        background: rgba(0, 0, 0, 0.08);
-      }
-    }
-  }
+  .ant-btn-default:not(:disabled) {
+    background-color: #fff;
 
-  &-icon {
-    margin-right: 8px;
-    font-size: 20px;
-    line-height: 1;
-
-    svg > use {
-      color: .primary() [rgb];
-      fill: #595959;
+    .anticon {
+      color: rgba(51, 51, 51, 0.7);
     }
-  }
 
-  button:disabled &-icon {
-    svg > use {
-      color: inherit;
-      fill: currentColor;
+    &:hover .anticon {
+      color: var(--ant-primary-color);
     }
   }
 }

package/es/BaseTable/ResizeHeaderCell.js

@@ -36,13 +36,24 @@ export default function ResizeHeaderCell(props) {
     setSize(width);
   }, [width]);
 
+  var getTable = function getTable() {
+    if (fullTableRef.current === null) {
+      return null;
+    }
+
+    return fullTableRef.current.querySelector('.ant-table');
+  };
+
   var handleResizeStart = function handleResizeStart() {
-    var _fullTableRef$current;
+    var table = getTable();
+
+    if (table === null) {
+      return;
+    }
 
     var elm = document.createElement('div');
-    elm.style.height = "".concat(((_fullTableRef$current = fullTableRef.current) === null || _fullTableRef$current === void 0 ? void 0 : _fullTableRef$current.offsetHeight) || 0, "px");
+    elm.style.height = "".concat(table.offsetHeight || 0, "px");
     elm.classList.add("".concat(prefixCls, "-resizable-indicator"));
-    var table = fullTableRef.current;
 
     if (table) {
       table.appendChild(elm);
@@ -73,9 +84,9 @@ export default function ResizeHeaderCell(props) {
   };
 
   var handleResizeStop = function handleResizeStop() {
-    var table = fullTableRef.current;
+    var table = getTable();
 
-    if (table && indicator.current) {
+    if (table !== null && indicator.current !== undefined) {
       table.removeChild(indicator.current);
       table.classList.remove("".concat(prefixCls, "-resizing-col"));
 

package/es/BaseTable/index.js

@@ -1,5 +1,5 @@
 var _excluded = ["onWidthChange", "width", "fullTableRef"],
-    _excluded2 = ["id", "columns", "defaultColumnProps", "rowKey", "children", "summaryTitle", "summaryRecord", "dataSource", "onSortChange", "sort", "scroll", "virtual", "components", "pagination", "onChange", "rowHeight", "tableLayout"];
+    _excluded2 = ["id", "columns", "defaultColumnProps", "rowKey", "children", "summaryTitle", "summaryRecord", "dataSource", "onSortChange", "sort", "scroll", "virtual", "components", "pagination", "onChange", "rowHeight", "tableLayout", "rowActions"];
 
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 
@@ -9,6 +9,8 @@ function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symb
 
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 
+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); }
+
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -35,7 +37,7 @@ import React, { useMemo, useState, useEffect, useRef } from 'react';
 import { Table as AntdTable } from 'antd';
 import { get } from 'lodash';
 import { useThrottle } from '@lemon-fe/hooks';
-import { isColumnType, getColumnKey, randomStr } from './utils';
+import { isColumnType, getColumnKey } from './utils';
 import ResizeHeaderCell from './ResizeHeaderCell';
 import { PREFIX_CLS } from '../constants';
 import VirtualList from './VirtualBody';
@@ -98,12 +100,10 @@ function BaseTable(props) {
       rowHeight = props.rowHeight,
       _props$tableLayout = props.tableLayout,
       tableLayout = _props$tableLayout === void 0 ? 'fixed' : _props$tableLayout,
+      rowActions = props.rowActions,
       restProps = _objectWithoutProperties(props, _excluded2);
 
   var fullTableRef = useRef(null);
-  var tableID = useMemo(function () {
-    return id || randomStr();
-  }, [id]);
 
   var _useState = useState(0),
       _useState2 = _slicedToArray(_useState, 2),
@@ -115,22 +115,21 @@ function BaseTable(props) {
       colsState = _useState4[0],
       setColsState = _useState4[1];
 
-  useEffect(function () {
-    fullTableRef.current = document.getElementById(tableID);
-  }, [tableID]);
+  var actions = useRef(rowActions);
+  actions.current = rowActions;
   /** auto scroll y */
 
   var calcScrollY = function calcScrollY() {
-    var table = fullTableRef.current;
+    var wrapper = fullTableRef.current;
 
-    if (table === null) {
+    if (wrapper === null) {
       return null;
     }
 
-    var wrapper = table.closest('.ant-table-wrapper');
-    var tableBody = table.querySelector('.ant-table-body');
+    var table = wrapper.querySelector('.ant-table');
+    var tableBody = wrapper.querySelector('.ant-table-body');
 
-    if (tableBody === null || wrapper === null) {
+    if (tableBody === null || table === null) {
       return null;
     }
 
@@ -165,13 +164,38 @@ function BaseTable(props) {
   };
 
   var changeScrollY = useThrottle(function () {
+    var nextScrollY = scrollY;
+
     if ((scroll === null || scroll === void 0 ? void 0 : scroll.y) === true) {
       var y = calcScrollY();
-      setScrollY(y || undefined);
+      nextScrollY = y || undefined;
     } else {
-      setScrollY(scroll === null || scroll === void 0 ? void 0 : scroll.y);
+      nextScrollY = scroll === null || scroll === void 0 ? void 0 : scroll.y;
+    }
+
+    setScrollY(nextScrollY);
+
+    if (fullTableRef.current !== null) {
+      var body = fullTableRef.current.querySelector('.ant-table-body');
+
+      if (body !== null) {
+        var dataType = _typeof(nextScrollY);
+
+        switch (dataType) {
+          case 'string':
+            body.style.height = nextScrollY;
+            break;
+
+          case 'number':
+            body.style.height = nextScrollY + 'px';
+            break;
+
+          default:
+            body.style.height = 'auto';
+        }
+      }
     }
-  }, 80, {
+  }, 100, {
     trailing: true
   });
   useEffect(function () {
@@ -279,6 +303,34 @@ function BaseTable(props) {
       _useMemo2 = _slicedToArray(_useMemo, 2),
       formatedColumns = _useMemo2[0],
       flattenColumns = _useMemo2[1];
+  /** row actions */
+
+
+  if (rowActions !== undefined && rowActions.length > 0) {
+    var actionCol = {
+      title: '',
+      className: "".concat(PREFIX_CLS, "-table-operator-column"),
+      width: 1,
+      fixed: 'right',
+      render: function render(_, row, index) {
+        var _actions$current;
+
+        return /*#__PURE__*/React.createElement("div", {
+          className: "".concat(PREFIX_CLS, "-table-operator")
+        }, (_actions$current = actions.current) === null || _actions$current === void 0 ? void 0 : _actions$current.map(function (item) {
+          return /*#__PURE__*/React.createElement("button", {
+            className: "".concat(PREFIX_CLS, "-table-operator-item"),
+            key: item.title,
+            onClick: function onClick() {
+              item.onClick(row, index);
+            }
+          }, item.title);
+        }));
+      }
+    };
+    formatedColumns.push(actionCol);
+    flattenColumns.push(actionCol);
+  }
   /** virtualize scroll */
 
 
@@ -341,7 +393,7 @@ function BaseTable(props) {
     value: ctx
   }, /*#__PURE__*/React.createElement(AntdTable, _objectSpread(_objectSpread({
     size: "small",
-    id: tableID,
+    ref: fullTableRef,
     columns: formatedColumns,
     dataSource: dataSource,
     rowKey: rowKey,

package/es/BaseTable/index.less

@@ -49,6 +49,49 @@
   color: @text-color;
   font-size: @font-size-base;
 
+  .ant-table-tbody > tr:hover > td > &-operator {
+    display: flex;
+  }
+
+  &-operator {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 10;
+    display: none;
+    align-items: center;
+    justify-content: flex-end;
+    height: 100%;
+    padding: 0 !important;
+    white-space: nowrap;
+    background-color: @table-row-hover-bg;
+
+    &-column::after {
+      display: none !important;
+    }
+
+    &-item {
+      margin-right: 8px;
+      padding: 0 8px;
+      color: @primary-color;
+      line-height: 28px;
+      background-color: transparent;
+      border: none;
+      border-radius: 4px;
+      outline: none;
+      cursor: pointer;
+      user-select: none;
+
+      &:hover {
+        background-color: .primary(0.12) [];
+      }
+
+      &:active {
+        color: .primary(0.8) [];
+      }
+    }
+  }
+
   &-resizable-handle {
     position: absolute;
     top: 50%;

package/es/BaseTable/typings.d.ts

@@ -29,4 +29,11 @@ export interface BaseTableProps<T> extends Omit<TableProps<T>, 'columns' | 'scro
     x?: number | string | true;
     y?: number | string | true;
   };
+  /**
+   * @description 行操作按钮组
+   */
+  rowActions?: {
+    title: string;
+    onClick: (row: T, index: number) => void;
+  }[];
 }

package/es/Filter/index.js

@@ -29,18 +29,28 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 import React, { useEffect, useMemo, useState } from 'react';
-import { Button, Col, Checkbox, Form, Input, Popover, Row, Space, Dropdown, Menu, Modal, message, Select, Empty } from 'antd';
-import { EllipsisOutlined, UnorderedListOutlined } from '@ant-design/icons';
+import { Button, Checkbox, Form, Input, Popover, Space, Dropdown, Menu, Modal, message, Select, Empty, InputNumber } from 'antd';
+import { EllipsisOutlined } from '@ant-design/icons';
 import { useDebounce, useRequest } from '@lemon-fe/hooks';
 import Search from '../Icons/Search';
 import DurationPicker from '../DurationPicker';
 import FormLayout from '../FormLayout';
 import { PREFIX_CLS } from '../constants';
+import TabBar from '../TabBar';
 var components = [{
   type: 'input',
   render: function render(item) {
     return /*#__PURE__*/React.createElement(Input, _objectSpread({}, item.extraProps));
   }
+}, {
+  type: 'input-number',
+  render: function render(item) {
+    return /*#__PURE__*/React.createElement(InputNumber, _objectSpread({
+      style: {
+        width: '100%'
+      }
+    }, item.extraProps));
+  }
 }, {
   type: 'select',
   render: function render(item) {
@@ -77,7 +87,8 @@ function Filter(props) {
       value = props.value,
       defaultActiveKeys = props.defaultActiveKeys,
       storageKey = props.storageKey,
-      onValuesChange = props.onValuesChange;
+      onValuesChange = props.onValuesChange,
+      style = props.style;
   var prefixCls = PREFIX_CLS;
   var defaultValue = useMemo(function () {
     return defaultValueProp || value;
@@ -337,6 +348,15 @@ 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'
+    };
+  };
+
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Modal, {
     destroyOnClose: true,
     visible: showModal,
@@ -364,29 +384,16 @@ function Filter(props) {
     onFinish: handleFinish,
     form: form,
     className: "".concat(prefixCls, "-filter"),
-    onValuesChange: handleValuesChange
-  }, /*#__PURE__*/React.createElement(Row, {
-    align: "bottom",
-    justify: "space-between",
-    wrap: false,
-    gutter: [16, 16]
-  }, /*#__PURE__*/React.createElement(Col, {
-    flex: 1
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      maxWidth: '1334px'
-    }
-  }, /*#__PURE__*/React.createElement("div", {
+    onValuesChange: handleValuesChange,
+    style: style
+  }, /*#__PURE__*/React.createElement(TabBar, {
+    tabs: tabs,
+    activeKey: tabs[active].title,
+    onTabClick: function onTabClick(_, index) {
+      return handleTabChange(index);
+    },
     className: "".concat(prefixCls, "-filter-tab-bar")
-  }, tabs.map(function (item, index) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-filter-tab").concat(active === index ? '-active' : ''),
-      key: item.title,
-      onClick: function onClick() {
-        return handleTabChange(index);
-      }
-    }, item.title);
-  })), /*#__PURE__*/React.createElement(FormLayout, {
+  }), /*#__PURE__*/React.createElement(FormLayout, {
     direction: "row"
   }, data.map(function (item) {
     var visible = activeKeys.has(item.key);
@@ -396,18 +403,22 @@ function Filter(props) {
       return null;
     }
 
-    return /*#__PURE__*/React.createElement(FormLayout.Col, {
-      span: (item.colSpan || target.colSpan || 1) * 6,
+    return /*#__PURE__*/React.createElement("div", {
+      style: getColStyle(item.colSpan || target.colSpan),
       key: item.key
     }, /*#__PURE__*/React.createElement(Form.Item, {
       key: item.key,
       name: item.key,
       label: item.hideLabel ? undefined : item.label
     }, target.render(item)));
-  })))), /*#__PURE__*/React.createElement(Col, null, /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(Button, {
-    type: "primary",
-    htmlType: "submit"
-  }, "\u67E5\u8BE2"), /*#__PURE__*/React.createElement(Dropdown, {
+  }), /*#__PURE__*/React.createElement("div", {
+    style: getColStyle()
+  }, /*#__PURE__*/React.createElement(Form.Item, {
+    label: /*#__PURE__*/React.createElement(Button, {
+      type: "primary",
+      htmlType: "submit"
+    }, "\u67E5\u8BE2")
+  }, /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(Dropdown, {
     placement: "bottomRight",
     overlay: /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement(Menu.Item, {
       key: "reset",
@@ -456,13 +467,64 @@ function Filter(props) {
     }))),
     placement: "bottomRight"
   }, /*#__PURE__*/React.createElement(Button, {
-    style: {
-      padding: '4px 8px'
-    },
+    className: "".concat(prefixCls, "-filter-btn"),
     onClick: function onClick() {
       setKeywords('');
     }
-  }, /*#__PURE__*/React.createElement(UnorderedListOutlined, null))))))));
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: "18",
+    height: "18",
+    viewBox: "0 0 18 18",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("g", {
+    transform: "translate(2 2)",
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("rect", {
+    fillOpacity: ".65",
+    fill: "currentColor",
+    y: "4",
+    width: "14",
+    height: "1.5",
+    rx: ".75"
+  }), /*#__PURE__*/React.createElement("rect", {
+    fillOpacity: ".65",
+    fill: "currentColor",
+    y: "8",
+    width: "6",
+    height: "1.5",
+    rx: ".75"
+  }), /*#__PURE__*/React.createElement("rect", {
+    fillOpacity: ".65",
+    fill: "currentColor",
+    y: "12",
+    width: "6",
+    height: "1.5",
+    rx: ".75"
+  }), /*#__PURE__*/React.createElement("rect", {
+    fillOpacity: ".65",
+    fill: "currentColor",
+    width: "14",
+    height: "1.5",
+    rx: ".75"
+  }), /*#__PURE__*/React.createElement("g", {
+    transform: "rotate(-45 15.45 -2.157)"
+  }, /*#__PURE__*/React.createElement("circle", {
+    strokeOpacity: ".65",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    cx: "3",
+    cy: "3",
+    r: "2.25"
+  }), /*#__PURE__*/React.createElement("rect", {
+    strokeOpacity: ".65",
+    stroke: "currentColor",
+    x: "2.75",
+    y: "5.5",
+    width: "1",
+    height: "2",
+    rx: ".5"
+  }))))))))))));
 }
 
 Filter.setComponents = setComponents;

package/es/Filter/index.less

@@ -6,14 +6,7 @@
     cursor: pointer;
 
     &-bar {
-      display: flex;
-      height: 25px;
       margin-bottom: 16px;
-      line-height: 1;
-
-      & > div + div {
-        margin-left: 32px;
-      }
     }
 
     &-active {
@@ -34,8 +27,19 @@
     }
   }
 
+  &-btn {
+    padding: 6px;
+
+    & > svg {
+      display: block;
+      width: 18px;
+      height: 18px;
+    }
+  }
+
   &-popover {
     width: 227px;
+    padding-top: 0;
 
     .ant-popover-arrow {
       display: none;

package/es/Filter/typings.d.ts

@@ -1,5 +1,5 @@
-import { FormInstance } from 'antd';
-import { ReactNode } from 'react';
+import type { FormInstance } from 'antd';
+import type { CSSProperties, ReactNode } from 'react';
 
 export interface FilterItemType {
   key: string;
@@ -18,6 +18,7 @@ export interface FilterProps<T extends Record<string, any> = Record<string, any>
   onValuesChange?: (changedValues: Partial<T>, allValues: T, form: FormInstance<T>) => void;
   defaultActiveKeys?: string[];
   storageKey?: string;
+  style?: CSSProperties;
 }
 
 export interface ComponentOption {

package/es/Icons/Down.js

@@ -9,14 +9,20 @@ import Icon from '@ant-design/icons';
 
 var DownSvg = function DownSvg(props) {
   return /*#__PURE__*/React.createElement("svg", _objectSpread({
-    width: "1em",
-    height: "1em",
+    width: "16",
+    height: "16",
     viewBox: "0 0 16 16",
     xmlns: "http://www.w3.org/2000/svg"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M4.707 5.293L3.293 6.707 8 11.414l4.707-4.707-1.414-1.414L8 8.586z",
-    fill: "currentColor",
-    fillRule: "nonzero"
+    d: "M3.757 5.757 8 10l4.243-4.243",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    opacity: ".7",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeDasharray: "0,0",
+    fill: "none",
+    fillRule: "evenodd"
   }));
 };