@lemon-fe/components 0.1.13 → 0.1.17

package/es/BaseTable/Actions.js

@@ -62,21 +62,27 @@ export default function Actions(props) {
   };
 
   var actions = typeof actionsProp === 'function' ? actionsProp(row, index) : actionsProp;
+
+  var getKey = function getKey(item, idx) {
+    var key = item.key || (typeof item.text === 'string' ? item.text : idx);
+    return key;
+  };
+
   return /*#__PURE__*/React.createElement("div", {
     className: prefixCls,
     onMouseLeave: closePop
-  }, actions.map(function (item) {
+  }, actions.map(function (item, idx) {
     if (item === null) {
       return null;
     }
 
-    var key = item.text;
+    var key = getKey(item, idx);
     var dropDown = item.dropDown ? item.dropDown.filter(function (item) {
       return item !== null;
     }) : [];
     return /*#__PURE__*/React.createElement("div", {
       className: classNames("".concat(prefixCls, "-item"), _defineProperty({}, "".concat(prefixCls, "-item-disabled"), item.disabled)),
-      key: item.text,
+      key: key,
       onMouseEnter: function onMouseEnter() {
         if (pop !== null && pop.key !== key) {
           closePop();
@@ -113,10 +119,10 @@ export default function Actions(props) {
     className: classNames("".concat(prefixCls, "-popover-items"), {
       animated: visible
     })
-  }, pop.items.map(function (item) {
+  }, pop.items.map(function (item, idx) {
     return /*#__PURE__*/React.createElement("div", {
       className: classNames("".concat(prefixCls, "-popover-item"), _defineProperty({}, "".concat(prefixCls, "-popover-item-disabled"), item.disabled)),
-      key: item.text,
+      key: getKey(item, idx),
       onClick: function onClick() {
         if (!item.disabled) {
           var _item$onClick2;

package/es/BaseTable/typings.d.ts

@@ -1,4 +1,4 @@
-import type { ReactText } from 'react';
+import type { ReactElement, ReactText } from 'react';
 import { TableProps, TableColumnType, TableColumnGroupType, TableColumnsType } from 'antd';
 
 export type ColumnType<T> = TableColumnType<T>;
@@ -8,7 +8,11 @@ export type ColumnGroupType<T> = TableColumnGroupType<T>;
 export type ColumnsType<T> = TableColumnsType<T>;
 
 export interface RowAction<T> {
-  text: string;
+  /**
+   * @description 当text不为字符串时，建议加上key属性
+   */
+  text: ReactElement;
+  key?: string;
   onClick?: (row: T, index: number) => void;
   disabled?: boolean;
   dropDown?: (RowAction<T> | null)[];

package/es/Filter/index.js

@@ -396,17 +396,23 @@ function Filter(props) {
   };
 
   var _useMemo = useMemo(function () {
+    var result = data.filter(function (item) {
+      if (activeKeys.has(item.key) && compMap.has(item.type)) {
+        return true;
+      }
+
+      return false;
+    });
+
     if (!width) {
-      return [data, false];
+      return [result, false];
     }
 
     var rows = [];
     var currRow = [];
     var value = 0;
-    data.forEach(function (item) {
-      var _compMap$get;
-
-      var itemWidth = getColStyle(item.colSpan || ((_compMap$get = compMap.get(item.type)) === null || _compMap$get === void 0 ? void 0 : _compMap$get.colSpan)).width;
+    result.forEach(function (item) {
+      var itemWidth = getColStyle(item.colSpan || compMap.get(item.type).colSpan).width;
 
       if (value + itemWidth > width) {
         if (currRow.length > 0) {
@@ -430,11 +436,11 @@ function Filter(props) {
     var visible = rows.length > 2;
 
     if (!collapsed || !visible) {
-      return [data, visible];
+      return [result, visible];
     }
 
     return [[rows[0], rows[rows.length - 1]].flat(), visible];
-  }, [data, width, collapsed, simple]),
+  }, [data, width, collapsed, simple, activeKeys]),
       _useMemo2 = _slicedToArray(_useMemo, 2),
       cols = _useMemo2[0],
       showCollapse = _useMemo2[1];
@@ -485,13 +491,7 @@ function Filter(props) {
   }), /*#__PURE__*/React.createElement(FormLayout, {
     direction: "row"
   }, cols.map(function (item) {
-    var visible = activeKeys.has(item.key);
     var target = compMap.get(item.type);
-
-    if (!visible || !target) {
-      return null;
-    }
-
     return /*#__PURE__*/React.createElement("div", {
       style: getColStyle(item.colSpan || target.colSpan),
       key: item.key

package/es/Layout/index.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { ReactNode, CSSProperties } from 'react';
 interface Props {
     children?: ReactNode;
@@ -11,11 +12,28 @@ interface Props {
     /**
      * @description 高度是否为100%
      * @default false
+     * @deprecated
      */
     full?: boolean;
     left?: ReactNode;
     header?: ReactNode;
     footer?: ReactNode;
+    body?: ReactNode;
 }
-export default function Layout(props: Props): JSX.Element;
-export {};
+declare function Layout(props: Props): JSX.Element;
+declare namespace Layout {
+    var Tabs: typeof LayoutTabs;
+    var Content: (props: {
+        children?: React.ReactNode;
+        left?: React.ReactNode;
+    }) => JSX.Element;
+}
+export default Layout;
+declare function LayoutTabs(props: {
+    tabs: {
+        title: string;
+        key?: string;
+    }[];
+    activeKey?: string;
+    onTabClick?: (activeKey: string, e: React.KeyboardEvent | React.MouseEvent) => void;
+} & Omit<Props, 'body'>): JSX.Element;

package/es/Layout/index.js

@@ -1,3 +1,13 @@
+var _excluded = ["tabs", "children", "className", "activeKey", "onTabClick"];
+
+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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = 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; }
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -14,12 +24,13 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 import React, { useState } from 'react';
 import classNames from 'classnames';
-import { Spin } from 'antd';
+import { Spin, Tabs } from 'antd';
 import { PREFIX_CLS } from '../constants';
+import { mapChildren } from '../utils';
+var prefixCls = "".concat(PREFIX_CLS, "-layout");
 
 function Sider(props) {
-  var prefixCls = props.prefixCls,
-      children = props.children;
+  var children = props.children;
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -81,6 +92,16 @@ function Sider(props) {
   }))))))));
 }
 
+function Content(props) {
+  var left = props.left,
+      children = props.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-content")
+  }, left ? /*#__PURE__*/React.createElement(Sider, null, left) : null, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-main")
+  }, children));
+}
+
 export default function Layout(props) {
   var className = props.className,
       style = props.style,
@@ -91,22 +112,52 @@ export default function Layout(props) {
       full = _props$full === void 0 ? false : _props$full,
       header = props.header,
       left = props.left,
-      footer = props.footer;
-  var prefixCls = "".concat(PREFIX_CLS, "-layout");
+      footer = props.footer,
+      body = props.body;
   return /*#__PURE__*/React.createElement("div", {
     className: classNames(prefixCls, className, _defineProperty({}, "".concat(prefixCls, "-full"), full)),
     style: style
   }, header ? /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-header")
   }, header) : null, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(prefixCls, "-content")
-  }, left ? /*#__PURE__*/React.createElement(Sider, {
-    prefixCls: prefixCls
-  }, left) : null, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(prefixCls, "-main")
+    className: "".concat(prefixCls, "-body")
+  }, body || /*#__PURE__*/React.createElement(Content, {
+    left: left
   }, children)), footer ? /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-footer")
   }, footer) : null, loading && /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-spin")
   }, /*#__PURE__*/React.createElement(Spin, null)));
-}
+}
+
+function LayoutTabs(props) {
+  var tabs = props.tabs,
+      children = props.children,
+      className = props.className,
+      activeKey = props.activeKey,
+      onTabClick = props.onTabClick,
+      restProps = _objectWithoutProperties(props, _excluded);
+
+  var getKey = function getKey(tab) {
+    return tab.key || tab.title;
+  };
+
+  var nodes = mapChildren(children, function (node, index) {
+    var tab = tabs[index];
+    return /*#__PURE__*/React.createElement(Tabs.TabPane, {
+      tab: tab.title,
+      key: getKey(tabs[index])
+    }, node);
+  });
+  return /*#__PURE__*/React.createElement(Layout, _objectSpread({
+    className: classNames(className, "".concat(prefixCls, "-tabs-wrapper")),
+    body: /*#__PURE__*/React.createElement(Tabs, {
+      accessKey: activeKey,
+      onTabClick: onTabClick,
+      className: "".concat(prefixCls, "-tabs")
+    }, nodes)
+  }, restProps));
+}
+
+Layout.Tabs = LayoutTabs;
+Layout.Content = Content;

package/es/Layout/index.less

@@ -11,20 +11,32 @@
     background-color: #f2f2f2;
   }
 
-  &-content {
-    display: flex;
+  &-body {
     flex: 1;
     min-height: 0;
-    overflow: hidden;
-    background-color: #fff;
-    border-top-left-radius: 8px;
-    border-top-right-radius: 8px;
 
     &:first-child {
       margin-top: @space;
     }
   }
 
+  &-tabs {
+    .fullTabs();
+  }
+
+  &-tabs-wrapper &-header {
+    padding-bottom: 0;
+  }
+
+  &-content {
+    display: flex;
+    height: 100%;
+    overflow: hidden;
+    background-color: #fff;
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
+  }
+
   &-left {
     position: relative;
 

package/es/Section/index.less

@@ -66,12 +66,17 @@
     & > .ant-tabs-content-holder {
       flex: 1;
 
-      .ant-tabs-content {
+      & > .ant-tabs-content {
         height: 100%;
       }
     }
   }
 
+  &-flex > .ant-tabs,
+  &-table > .ant-tabs {
+    min-height: 0;
+  }
+
   &-tab {
     display: inline-flex;
     align-self: flex-start;

package/es/SiderTree/index.js

@@ -38,7 +38,6 @@ import { Input, Tabs } from 'antd';
 import { PREFIX_CLS } from '../constants';
 import TreeNodeTitle from './TreeNodeTitle';
 import Icons from '../Icons';
-import TabBar from '../TabBar';
 import { mapChildren } from '../utils';
 import empty from './empty.png';
 
@@ -52,22 +51,9 @@ function SiderTreeTabs(props) {
   };
 
   var prefixCls = "".concat(PREFIX_CLS, "-tree");
-  return /*#__PURE__*/React.createElement(Tabs, _objectSpread(_objectSpread({
+  return /*#__PURE__*/React.createElement(Tabs, _objectSpread({
     className: "".concat(prefixCls, "-tabs")
-  }, restProps), {}, {
-    renderTabBar: function renderTabBar(tabProps) {
-      var activeKey = tabProps.activeKey,
-          _onTabClick = tabProps.onTabClick;
-      return /*#__PURE__*/React.createElement(TabBar, {
-        className: "".concat(PREFIX_CLS, "-tree-tab-bar"),
-        activeKey: activeKey,
-        tabs: tabs,
-        onTabClick: function onTabClick(key, _, e) {
-          return _onTabClick(key, e);
-        }
-      });
-    }
-  }), mapChildren(children, function (child, index) {
+  }, restProps), mapChildren(children, function (child, index) {
     var tab = tabs[index];
     return /*#__PURE__*/React.createElement(Tabs.TabPane, {
       tab: tab.title,

package/es/SiderTree/index.less

@@ -44,25 +44,13 @@
   }
 
   &-tabs {
-    height: 100%;
-
-    & > .ant-tabs-content-holder {
-      flex: 1;
-
-      & > .ant-tabs-content {
-        height: 100%;
+    .fullTabs();
 
-        & > .ant-tabs-tabpane {
-          height: 100%;
-        }
-      }
+    & > .ant-tabs-nav {
+      margin: 0 @space;
     }
   }
 
-  &-tab-bar {
-    margin: 0 @space;
-  }
-
   &-header {
     padding: 0 @space;
   }
@@ -217,7 +205,3 @@
 .@{prefixCls}-layout-left .@{prefixCls}-tree-wrapper:first-child .@{prefixCls}-tree-header {
   padding-right: 12px + @space;
 }
-
-.ant-tabs-tabpane .@{prefixCls}-tree-wrapper:first-child .@{prefixCls}-tree-header {
-  padding-right: @space;
-}

package/es/overrides.less

@@ -4,6 +4,11 @@ a[title='站长统计'] {
 
 @blue-base: #2357df;
 
+::selection {
+  color: inherit;
+  background: #d3ddf9;
+}
+
 /** basic */
 
 @height-base: 32px;
@@ -71,6 +76,10 @@ a[title='站长统计'] {
   border-radius: 8px;
 }
 
+.ant-modal-header {
+  border-radius: 8px 8px 0 0;
+}
+
 .ant-modal-confirm {
   .ant-modal-body {
     padding: 0;

package/es/utils.less

@@ -1,10 +1,14 @@
 /* stylelint-disable property-no-unknown */
 
+// primary color
+
 .primary(@alpha: 1) {
   rgb: rgb(var(--lemon-primary-color));
   rgba: rgba(var(--lemon-primary-color), @alpha);
 }
 
+// popover
+
 .popoverInner(@width: 120px) {
   position: relative;
   width: @width;
@@ -51,3 +55,35 @@
     background-color: #eee;
   }
 }
+
+// tabs
+
+.fullTabs() {
+  height: 100%;
+
+  & > .ant-tabs-nav {
+    .ant-tabs-tab {
+      padding: 12px 12px 14px;
+
+      &.ant-tabs-tab-active .ant-tabs-tab-btn {
+        text-shadow: unset;
+      }
+    }
+
+    .ant-tabs-tab + .ant-tabs-tab {
+      margin-left: 24px;
+    }
+  }
+
+  & > .ant-tabs-content-holder {
+    flex: 1;
+
+    & > .ant-tabs-content {
+      height: 100%;
+
+      & > .ant-tabs-tabpane {
+        height: 100%;
+      }
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lemon-fe/components",
-  "version": "0.1.13",
+  "version": "0.1.17",
   "description": "> TODO: description",
   "author": "鲁盛杰 <lusj@cnlemon.net>",
   "homepage": "",
@@ -41,5 +41,5 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
-  "gitHead": "11880998a3dbc05d5385b43a9a3497db75815e4d"
+  "gitHead": "a8bf149d318e0f6a021bce9a23fa8ca64dd926f9"
 }