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

package/es/Actions/index.js

@@ -24,9 +24,8 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 import React, { Fragment, useState } from 'react';
 import { Space, Dropdown, Menu, Button, Popover } from 'antd';
-import { EllipsisOutlined } from '@ant-design/icons';
 import classNames from 'classnames';
-import Down from '../Icons/Down';
+import Icons from '../Icons';
 import { PREFIX_CLS } from '../constants';
 
 function Actions(props) {
@@ -97,7 +96,15 @@ function Actions(props) {
           disabled: disabled,
           overlay: overlay,
           onClick: handleClick,
-          icon: icon
+          buttonsRender: function buttonsRender(_ref) {
+            var _ref2 = _slicedToArray(_ref, 2),
+                leftBtn = _ref2[0],
+                _ = _ref2[1];
+
+            return [leftBtn, /*#__PURE__*/React.createElement(Button, {
+              icon: /*#__PURE__*/React.createElement(Icons.More, null)
+            })];
+          }
         }, text);
       }
 
@@ -108,7 +115,12 @@ function Actions(props) {
       }, /*#__PURE__*/React.createElement(Button, _objectSpread({
         disabled: disabled,
         icon: icon
-      }, rest), text, /*#__PURE__*/React.createElement(Down, null)));
+      }, rest), text, /*#__PURE__*/React.createElement(Icons.Down, {
+        style: {
+          opacity: 0.7,
+          fontSize: 16
+        }
+      })));
     }
 
     return /*#__PURE__*/React.createElement(Button, _objectSpread({
@@ -123,11 +135,7 @@ function Actions(props) {
     onVisibleChange: setVisible,
     visible: visible,
     trigger: "click",
-    content: /*#__PURE__*/React.createElement("ul", {
-      className: "".concat(prefixCls, "-actions-popover-list")
-    }, collapsedBtns.map(function (item, index) {
-      var _classNames;
-
+    content: collapsedBtns.map(function (item, index) {
       if (item === null) {
         return item;
       }
@@ -139,8 +147,8 @@ function Actions(props) {
       }
 
       var disabled = item.disabled;
-      return /*#__PURE__*/React.createElement("li", {
-        className: classNames((_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-actions-popover-item-disabled"), disabled), _defineProperty(_classNames, "".concat(prefixCls, "-actions-popover-item"), !disabled), _classNames)),
+      return /*#__PURE__*/React.createElement("div", {
+        className: classNames("".concat(prefixCls, "-actions-popover-item"), _defineProperty({}, "".concat(prefixCls, "-actions-popover-item-disabled"), disabled)),
         key: index,
         onClick: function onClick() {
           if (!disabled) {
@@ -153,9 +161,9 @@ function Actions(props) {
           }
         }
       }, item.text);
-    }))
+    })
   }, /*#__PURE__*/React.createElement(Button, {
-    icon: /*#__PURE__*/React.createElement(EllipsisOutlined, null)
+    icon: /*#__PURE__*/React.createElement(Icons.More, null)
   })) : null));
 }
 

package/es/Actions/index.less

@@ -6,11 +6,16 @@
       padding-top: 0;
     }
 
-    & .ant-popover-inner-content {
+    .ant-popover-inner {
+      padding: 8px 0;
+      border-radius: 8px;
+    }
+
+    .ant-popover-inner-content {
       padding: 0;
     }
 
-    & .ant-popover-arrow {
+    .ant-popover-arrow {
       display: none;
     }
 
@@ -21,31 +26,22 @@
 
     &-item {
       box-sizing: border-box;
-      width: 124px;
+      width: 120px;
       height: 38px;
-      padding: 8px;
-      color: #646464;
-      line-height: 22px;
-      text-align: left;
+      padding: 0 16px;
+      color: #333;
+      line-height: 38px;
       list-style: none;
-      border-radius: 2px;
       cursor: pointer;
+      transition: background-color 0.2s;
 
       &:hover {
-        color: .primary(1) [];
-        background: .primary(0.08) [];
+        background-color: #eee;
       }
 
       &-disabled {
-        box-sizing: border-box;
-        width: 124px;
-        height: 38px;
-        padding: 8px;
         color: rgba(0, 0, 0, 0.25);
-        line-height: 22px;
-        text-align: left;
-        list-style: none;
-        border-radius: 2px;
+        background-color: #fff !important;
         cursor: not-allowed;
       }
     }
@@ -54,17 +50,21 @@
   .ant-btn:not(.ant-btn-icon-only) {
     min-width: 80px;
     padding: 4px 12px;
-  }
 
-  .ant-btn-default:not(:disabled) {
-    background-color: #fff;
+    .@{prefixCls}-symbol-icon {
+      margin-right: 8px;
+      font-size: 20px;
+      vertical-align: -5px;
+    }
+  }
 
-    .anticon {
-      color: rgba(51, 51, 51, 0.7);
+  .ant-btn-default {
+    .@{prefixCls}-symbol-icon {
+      opacity: 0.7;
     }
 
-    &:hover .anticon {
-      color: var(--ant-primary-color);
+    &:not(:disabled) {
+      background-color: #fff;
     }
   }
 }

package/es/BaseTable/Actions.d.ts

@@ -0,0 +1,8 @@
+import type { RowAction } from './typings';
+interface Props<T> {
+    actions: (RowAction<T> | null)[];
+    row: T;
+    index: number;
+}
+export default function Actions<T>(props: Props<T>): JSX.Element;
+export {};

package/es/BaseTable/Actions.js

@@ -0,0 +1,119 @@
+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; }
+
+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."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import React, { useRef, useState } from 'react';
+import classNames from 'classnames';
+import { createPortal } from 'react-dom';
+import { PREFIX_CLS } from '../constants';
+import Icons from '../Icons';
+export default function Actions(props) {
+  var actions = props.actions,
+      row = props.row,
+      index = props.index;
+
+  var _useState = useState(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      pop = _useState2[0],
+      setPop = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      visible = _useState4[0],
+      setVisible = _useState4[1];
+
+  var prefixCls = "".concat(PREFIX_CLS, "-table-operator");
+  var ref = useRef(null);
+
+  var openPop = function openPop(data) {
+    setPop(data);
+    setTimeout(function () {
+      setVisible(true);
+    }, 16);
+  };
+
+  var closePop = function closePop() {
+    if (visible === false) {
+      setPop(null);
+      return;
+    }
+
+    if (ref.current !== null) {
+      var node = ref.current;
+      setVisible(false);
+
+      var handler = function handler() {
+        node.removeEventListener('transitionend', handler);
+        setPop(null);
+      };
+
+      node.addEventListener('transitionend', handler);
+    }
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: prefixCls,
+    onMouseLeave: closePop
+  }, actions.map(function (item) {
+    if (item === null) {
+      return null;
+    }
+
+    var dropDown = item.dropDown ? item.dropDown.filter(function (item) {
+      return item !== null;
+    }) : [];
+    return /*#__PURE__*/React.createElement("button", {
+      className: "".concat(prefixCls, "-item"),
+      key: item.text,
+      disabled: item.disabled,
+      onClick: function onClick(e) {
+        if (dropDown.length > 0) {
+          var rect = e.target.getBoundingClientRect();
+          openPop({
+            top: rect.top + rect.height,
+            right: document.body.clientWidth - rect.right,
+            items: dropDown
+          });
+        } else {
+          var _item$onClick;
+
+          (_item$onClick = item.onClick) === null || _item$onClick === void 0 ? void 0 : _item$onClick.call(item, row, index);
+        }
+      }
+    }, item.text, dropDown.length > 0 && /*#__PURE__*/React.createElement(Icons.Down, null));
+  }), pop !== null && /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-popover"),
+    style: {
+      top: pop.top,
+      right: pop.right
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: classNames("".concat(prefixCls, "-popover-items"), {
+      animated: visible
+    })
+  }, pop.items.map(function (item) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: classNames("".concat(prefixCls, "-popover-item"), _defineProperty({}, "".concat(prefixCls, "-popover-item-disabled"), item.disabled)),
+      key: item.text,
+      onClick: function onClick() {
+        if (!item.disabled) {
+          var _item$onClick2;
+
+          closePop();
+          (_item$onClick2 = item.onClick) === null || _item$onClick2 === void 0 ? void 0 : _item$onClick2.call(item, row, index);
+        }
+      }
+    }, item.text);
+  }))), document.body));
+}

package/es/BaseTable/index.js

@@ -42,6 +42,7 @@ import ResizeHeaderCell from './ResizeHeaderCell';
 import { PREFIX_CLS } from '../constants';
 import VirtualList from './VirtualBody';
 import BaseTableContext from './BaseTableContext';
+import Actions from './Actions';
 
 function formatSummary(summary) {
   if (!summary) {
@@ -114,11 +115,9 @@ function BaseTable(props) {
       _useState4 = _slicedToArray(_useState3, 2),
       colsState = _useState4[0],
       setColsState = _useState4[1];
-
-  var actions = useRef(rowActions);
-  actions.current = rowActions;
   /** auto scroll y */
 
+
   var calcScrollY = function calcScrollY() {
     var wrapper = fullTableRef.current;
 
@@ -306,34 +305,27 @@ function BaseTable(props) {
   /** 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);
-  }
+  useMemo(function () {
+    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) {
+          return /*#__PURE__*/React.createElement(Actions, {
+            actions: rowActions,
+            row: row,
+            index: index
+          });
+        }
+      };
+      formatedColumns.push(actionCol);
+      flattenColumns.push(actionCol);
+    }
+  }, [rowActions, flattenColumns, formatedColumns]);
   /** virtualize scroll */
 
-
   var _useMemo3 = useMemo(function () {
     return {
       components: _objectSpread({

package/es/BaseTable/index.less

@@ -49,7 +49,7 @@
   color: @text-color;
   font-size: @font-size-base;
 
-  .ant-table-tbody > tr:hover > td > &-operator {
+  .ant-table-cell-row-hover &-operator {
     display: flex;
   }
 
@@ -62,9 +62,20 @@
     align-items: center;
     justify-content: flex-end;
     height: 100%;
-    padding: 0 !important;
+    padding-left: 16px;
     white-space: nowrap;
     background-color: @table-row-hover-bg;
+    background-clip: content-box;
+
+    &::before {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 16px;
+      height: 100%;
+      background: linear-gradient(90deg, rgba(248, 248, 248, 0) 0%, @table-row-hover-bg 100%);
+      content: '';
+    }
 
     &-column::after {
       display: none !important;
@@ -80,8 +91,18 @@
       border-radius: 4px;
       outline: none;
       cursor: pointer;
+      transition: background-color 0.2s;
       user-select: none;
 
+      &:disabled {
+        color: rgba(51, 51, 51, 0.5);
+        cursor: not-allowed;
+
+        &:hover {
+          background-color: rgba(51, 51, 51, 0.06);
+        }
+      }
+
       &:hover {
         background-color: .primary(0.12) [];
       }
@@ -90,6 +111,41 @@
         color: .primary(0.8) [];
       }
     }
+
+    &-popover {
+      position: absolute;
+      z-index: 1000;
+      width: 120px;
+
+      &-items {
+        transform: scale(0.6);
+        transform-origin: 100% 0;
+        opacity: 0;
+        transition: transform 0.2s, opacity 0.2s;
+        pointer-events: none;
+
+        .popoverInner();
+
+        &.animated {
+          transform: scale(1);
+          opacity: 1;
+          pointer-events: visible;
+        }
+      }
+
+      &-item {
+        text-align: left;
+        background-color: #fff;
+        border: none;
+        outline: none;
+        .popoverItem();
+
+        &-disabled {
+          color: rgba(51, 51, 51, 0.5);
+          cursor: not-allowed;
+        }
+      }
+    }
   }
 
   &-resizable-handle {

package/es/BaseTable/typings.d.ts

@@ -7,6 +7,13 @@ export type ColumnGroupType<T> = TableColumnGroupType<T>;
 
 export type ColumnsType<T> = TableColumnsType<T>;
 
+export interface RowAction<T> {
+  text: string;
+  onClick?: (row: T, index: number) => void;
+  disabled?: boolean;
+  dropDown?: (RowAction<T> | null)[];
+}
+
 export interface BaseTableProps<T> extends Omit<TableProps<T>, 'columns' | 'scroll'> {
   defaultColumnProps?: Partial<ColumnType<T>>;
   /**
@@ -32,8 +39,5 @@ export interface BaseTableProps<T> extends Omit<TableProps<T>, 'columns' | 'scro
   /**
    * @description 行操作按钮组
    */
-  rowActions?: {
-    title: string;
-    onClick: (row: T, index: number) => void;
-  }[];
+  rowActions?: (RowAction<T> | null)[];
 }

package/es/DurationPicker/index.js

@@ -205,11 +205,7 @@ export default function DurationPicker(props) {
     }))
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-duration-type")
-  }, (_result$type = result.type) === null || _result$type === void 0 ? void 0 : _result$type.label, /*#__PURE__*/React.createElement(Down, {
-    style: {
-      color: '#BFBFBF'
-    }
-  }))), /*#__PURE__*/React.createElement("div", {
+  }, (_result$type = result.type) === null || _result$type === void 0 ? void 0 : _result$type.label, /*#__PURE__*/React.createElement(Down, null))), /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-duration-picker")
   }, /*#__PURE__*/React.createElement(Dropdown, {
     overlay: /*#__PURE__*/React.createElement(Menu, null, options.map(function (item) {
@@ -222,11 +218,7 @@ export default function DurationPicker(props) {
     }))
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-duration-option")
-  }, (_result$option = result.option) === null || _result$option === void 0 ? void 0 : _result$option.label, /*#__PURE__*/React.createElement(Down, {
-    style: {
-      color: '#BFBFBF'
-    }
-  }))), /*#__PURE__*/React.createElement(DatePicker.RangePicker, {
+  }, (_result$option = result.option) === null || _result$option === void 0 ? void 0 : _result$option.label, /*#__PURE__*/React.createElement(Down, null))), /*#__PURE__*/React.createElement(DatePicker.RangePicker, {
     value: result.dates,
     onChange: handleChangeDates,
     disabled: ((_result$option2 = result.option) === null || _result$option2 === void 0 ? void 0 : _result$option2.value) !== null

package/es/DurationPicker/index.less

@@ -10,8 +10,8 @@
     align-items: center;
     justify-content: space-between;
     height: 100%;
-    padding: 0 12px 0 16px;
-    color: #686868;
+    padding: 0 8px;
+    color: rgba(51, 51, 51, 0.7);
     font-size: 14px;
     text-align: center;
     cursor: pointer;
@@ -23,7 +23,7 @@
   }
 
   &-type.ant-dropdown-trigger {
-    flex: 0 0 138px;
+    flex: 0 0 124px;
     margin-right: 8px;
     border: 1px solid @select-border-color;
     border-radius: @border-radius-base;
@@ -31,7 +31,7 @@
 
   &-option.ant-dropdown-trigger {
     position: relative;
-    flex: 0 0 122px;
+    flex: 0 0 110px;
 
     &::after {
       position: absolute;

package/es/Filter/index.js

@@ -30,9 +30,8 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 import React, { useEffect, useMemo, useState } from 'react';
 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 Icons from '../Icons';
 import DurationPicker from '../DurationPicker';
 import FormLayout from '../FormLayout';
 import { PREFIX_CLS } from '../constants';
@@ -431,10 +430,8 @@ function Filter(props) {
       onClick: handleDelete
     }, "\u5220\u9664\u65B9\u6848"))
   }, /*#__PURE__*/React.createElement(Button, {
-    style: {
-      padding: '4px 8px'
-    }
-  }, /*#__PURE__*/React.createElement(EllipsisOutlined, null))), /*#__PURE__*/React.createElement(Popover, {
+    icon: /*#__PURE__*/React.createElement(Icons.More, null)
+  })), /*#__PURE__*/React.createElement(Popover, {
     trigger: "click",
     overlayClassName: "".concat(prefixCls, "-filter-popover"),
     destroyTooltipOnHide: true,
@@ -442,7 +439,7 @@ function Filter(props) {
       placeholder: "\u641C\u7D22\u9009\u9879",
       allowClear: true,
       className: "".concat(prefixCls, "-filter-items-search"),
-      suffix: /*#__PURE__*/React.createElement(Search, {
+      suffix: /*#__PURE__*/React.createElement(Icons.Search, {
         style: {
           color: '#686868'
         }

package/es/Filter/index.less

@@ -69,6 +69,7 @@
   &-items {
     max-height: 400px;
     padding: 0 20px;
+    overflow: auto;
   }
 
   &-item {

package/es/FormLayout/index.less

@@ -35,7 +35,7 @@
       }
 
       &-label > label::after {
-        margin: 0 @spaceX / 2 0 0;
+        margin: 0 8px 0 0;
         content: '';
       }
 

package/es/Icons/Calendar.d.ts

@@ -0,0 +1,5 @@
+import { CSSProperties } from 'react';
+export default function Down(props: {
+    className?: string;
+    style?: CSSProperties;
+}): JSX.Element;

package/es/Icons/Calendar.js

@@ -0,0 +1,47 @@
+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; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+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 from 'react';
+import Icon from '@ant-design/icons';
+
+var CalendarSvg = function CalendarSvg(props) {
+  return /*#__PURE__*/React.createElement("svg", _objectSpread({
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/React.createElement("g", {
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M5.25 1a.75.75 0 0 1 .75.75V4H4.5V1.75A.75.75 0 0 1 5.25 1ZM10.75 1a.75.75 0 0 1 .75.75V4H10V1.75a.75.75 0 0 1 .75-.75Z",
+    fill: "currentColor"
+  }), /*#__PURE__*/React.createElement("rect", {
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    x: "1.75",
+    y: "3.75",
+    width: "12.5",
+    height: "10.5",
+    rx: "2"
+  }), /*#__PURE__*/React.createElement("rect", {
+    fill: "currentColor",
+    x: "6",
+    y: "8",
+    width: "4",
+    height: "1.5",
+    rx: ".75"
+  })));
+};
+
+export default function Down(props) {
+  return /*#__PURE__*/React.createElement(Icon, _objectSpread({
+    style: {
+      pointerEvents: 'none'
+    },
+    component: CalendarSvg
+  }, props));
+}

package/es/Icons/Down.js

@@ -17,7 +17,6 @@ var DownSvg = function DownSvg(props) {
     d: "M3.757 5.757 8 10l4.243-4.243",
     stroke: "currentColor",
     strokeWidth: "1.5",
-    opacity: ".7",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeDasharray: "0,0",

package/es/Icons/More.d.ts

@@ -0,0 +1,5 @@
+import { CSSProperties } from 'react';
+export default function More(props: {
+    className?: string;
+    style?: CSSProperties;
+}): JSX.Element;