@lemon-fe/components 0.0.32 → 0.1.0

package/es/Section/index.less

@@ -3,8 +3,13 @@
 .@{prefixCls}-section {
   position: relative;
   width: 100%;
+  padding: @space;
   color: #333;
 
+  & + & {
+    padding-top: 0;
+  }
+
   &-flex {
     display: flex;
     flex-direction: column;
@@ -13,33 +18,33 @@
 
   &-flex &-body {
     flex: 1 1 100%;
-    overflow: auto;
   }
 
   &-header {
     display: flex;
-    margin-bottom: 8px;
+    align-items: flex-end;
+    margin-bottom: @space;
+    padding: 8px 0;
   }
 
   &-title {
     flex: 1;
-    font-weight: bold;
-    font-size: 14px;
-  }
-
-  &-with-actions &-header {
-    align-items: flex-end;
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 24px;
+
+    &::before {
+      display: inline-block;
+      width: 4px;
+      height: 16px;
+      margin-right: 8px;
+      vertical-align: -0.15em;
+      background-color: @primary-color;
+      content: '';
+    }
   }
 
   &-body {
-    padding: @space;
-    background-color: #fff;
-    border-radius: 4px;
-
-    & > .@{prefixCls}-actions {
-      padding: 16px;
-    }
-
     & > .@{prefixCls}-table {
       overflow: auto;
       border-radius: 6px 6px 0 0;
@@ -48,11 +53,14 @@
     &.ant-tabs-tabpane {
       border-top-left-radius: 0;
     }
+
+    & > .@{prefixCls}-filter:first-child {
+      margin-top: -16px;
+    }
   }
 
   &-footer {
     padding: 10px 0;
-    background-color: #fff;
   }
 
   & > .ant-tabs {
@@ -68,97 +76,42 @@
   }
 
   &-tab {
-    position: relative;
-    left: 4px;
-    display: flex;
+    display: inline-flex;
+    align-self: flex-start;
+    margin-bottom: 12px;
+    padding: 2px;
+    background-color: #f2f2f2;
+    border-radius: 4px;
 
     &-item {
       position: relative;
-      z-index: 1;
-      padding: 0 8px;
+      min-width: 88px;
+      padding: 6px 8px;
+      color: rgba(51, 51, 51, 0.65);
+      font-size: 14px;
+      line-height: 22px;
+      text-align: center;
+      background-color: transparent;
+      border-radius: 4px;
       cursor: pointer;
 
-      &-content {
-        position: relative;
-        z-index: 2;
-        height: 40px;
-        padding: 0 8px;
-        line-height: 40px;
-        background: #ededed;
-      }
-
-      &-arc-left {
-        position: absolute;
-        top: 0;
-        left: 0;
-        z-index: 1;
-        width: 16px;
-        height: 40px;
-        background: #ededed;
-        transform-origin: 50% 50%;
-      }
-
-      &-arc-right {
-        position: absolute;
-        top: 0;
-        right: 0;
-        z-index: 1;
-        width: 16px;
-        height: 40px;
-        background: #ededed;
-        transform-origin: 50% 50%;
-      }
-
       &-active {
-        z-index: 2;
         color: .primary(1) [];
-      }
-
-      &-active &-content {
-        background: #fff;
-      }
-
-      &-active &-arc-left {
-        background: #fff;
-        border-top-left-radius: 4px;
-        transform: skew(-10deg);
-      }
-
-      &-active &-arc-right {
-        background: #fff;
-        border-top-right-radius: 4px;
-        transform: skew(10deg);
-      }
-
-      &-active-left &-arc-right,
-      &:last-child &-arc-right {
-        border-top-right-radius: 4px;
-        transform: skew(10deg);
-      }
-
-      &-active-right &-arc-left,
-      &:first-child &-arc-left {
-        border-top-left-radius: 4px;
-        transform: skew(-10deg);
+        background-color: #fff;
       }
     }
 
-    &-item + &-item::before {
+    &-item:not(&-item-active) + &-item:not(&-item-active)::before {
       position: absolute;
-      top: 14px;
+      top: 12px;
       left: 0;
-      z-index: 2;
+      z-index: 1;
       display: block;
       width: 1px;
       height: 12px;
-      background: #dbdbdb;
+      background: #dfdfdf;
       content: '';
     }
-
-    &-item-active::before,
-    &-item-active-right::before {
-      display: none !important;
-    }
   }
 }
 

package/es/SiderTree/TreeNodeTitle.d.ts

@@ -1,4 +1,4 @@
-import { OperationType, TreeData } from './typings';
+import type { OperationType, TreeData } from './typings';
 interface Props<T> {
     node: TreeData<T>;
     prefixCls: string;

package/es/SiderTree/TreeNodeTitle.js

@@ -1,3 +1,5 @@
+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."); }
@@ -12,6 +14,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 import { Popover } from 'antd';
 import React, { useEffect, useRef, useState } from 'react';
+import classNames from 'classnames';
 export default function TreeNodeTitle(props) {
   var _operation$others;
 
@@ -64,12 +67,12 @@ export default function TreeNodeTitle(props) {
   }, item.title), /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-title-operators"),
     style: {
-      display: visible || show ? 'flex' : 'none'
+      display: visible || show ? 'block' : 'none'
     },
     onClick: function onClick(e) {
       return e.stopPropagation();
     }
-  }, others ? /*#__PURE__*/React.createElement(Popover, {
+  }, others || operation.onAdd ? /*#__PURE__*/React.createElement(Popover, {
     overlayClassName: "".concat(prefixCls, "-menu-popover"),
     placement: "bottomLeft",
     visible: visible,
@@ -78,47 +81,26 @@ export default function TreeNodeTitle(props) {
       onClick: function onClick() {
         return setVisible(false);
       }
-    }, others),
+    }, operation.onAdd ? /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", {
+      onClick: function onClick() {
+        return operation.onAdd(item);
+      }
+    }, "\u65B0\u589E")) : null, others),
     onVisibleChange: setVisible
   }, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(prefixCls, "-title-operators-item"),
+    className: classNames("".concat(prefixCls, "-title-operators-item"), _defineProperty({}, "".concat(prefixCls, "-title-operators-item-active"), visible)),
     onClick: function onClick() {
       return setVisible(true);
     }
   }, /*#__PURE__*/React.createElement("svg", {
-    width: "7",
-    height: "7",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React.createElement("g", {
-    fill: "currentColor",
-    fillRule: "evenodd"
-  }, /*#__PURE__*/React.createElement("circle", {
-    cx: "3.5",
-    cy: "3.5",
-    r: "1"
-  }), /*#__PURE__*/React.createElement("circle", {
-    cx: ".5",
-    cy: "3.5",
-    r: "1"
-  }), /*#__PURE__*/React.createElement("circle", {
-    cx: "6.5",
-    cy: "3.5",
-    r: "1"
-  }))))) : null, operation.onAdd ? /*#__PURE__*/React.createElement("div", {
-    className: "".concat(prefixCls, "-title-operators-item"),
-    onClick: function onClick() {
-      return operation.onAdd(item);
-    }
-  }, /*#__PURE__*/React.createElement("svg", {
-    width: "7",
-    height: "7",
+    width: "20",
+    height: "20",
+    viewBox: "0 0 20 20",
     xmlns: "http://www.w3.org/2000/svg"
   }, /*#__PURE__*/React.createElement("g", {
-    fill: "currentColor",
+    fill: "#333",
     fillRule: "evenodd"
   }, /*#__PURE__*/React.createElement("path", {
-    d: "M0 3h7v1H0z"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M4 0v7H3V0z"
-  })))) : null));
+    d: "M10 4a1 1 0 1 1 0 2 1 1 0 0 1 0-2ZM10 9a1 1 0 1 1 0 2 1 1 0 0 1 0-2ZM10 14a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z"
+  }))))) : null));
 }

package/es/SiderTree/index.d.ts

@@ -2,11 +2,12 @@ import { ReactNode } from 'react';
 import { TreeProps } from 'rc-tree';
 import type { DataNode, EventDataNode } from 'rc-tree/lib/interface';
 import { TabsProps } from 'antd';
-import { TreeData, OperationType } from './typings';
+import type { TreeData, OperationType } from './typings';
 interface Props<KeyType> extends Omit<TreeProps, 'onSelect' | 'selectedKeys' | 'defaultSelectedKeys' | 'defaultExpandAll' | 'defaultExpandedKeys' | 'prefixCls'> {
     data?: TreeData<KeyType>[];
     showSearch?: boolean;
     placeholder?: string;
+    header?: ReactNode;
     operation?: OperationType<KeyType>;
     onSelect?: (node: TreeData<KeyType>, info: {
         event: 'select';
@@ -19,6 +20,7 @@ interface Props<KeyType> extends Omit<TreeProps, 'onSelect' | 'selectedKeys' | '
     defaultSelectedKeys?: KeyType[];
     defaultExpandAll?: boolean;
     defaultExpandedKeys?: KeyType[];
+    active?: boolean;
 }
 declare function SiderTreeTabs(props: {
     tabs: {

package/es/SiderTree/index.js

@@ -1,5 +1,5 @@
 var _excluded = ["tabs", "children"],
-    _excluded2 = ["data", "showSearch", "placeholder", "onSelect", "operation"];
+    _excluded2 = ["data", "showSearch", "placeholder", "onSelect", "operation", "header"];
 
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 
@@ -35,31 +35,17 @@ import React, { useMemo, useState } from 'react';
 import { useDebounce } from '@lemon-fe/hooks';
 import Tree from 'rc-tree';
 import { Empty, Input, Tabs } from 'antd';
-import classNames from 'classnames';
 import { PREFIX_CLS } from '../constants';
-import TreeNodeTitle from './TreeNodeTitle'; // 不使用Children.map的原因是由于它会给子节点生成一个key与tabs的activeTabKey无法对应
-
-var mapChildren = function mapChildren(children, cb) {
-  var nodes = [];
-
-  if (Array.isArray(children)) {
-    nodes = children;
-  } else {
-    nodes = [children];
-  }
-
-  return nodes.filter(function (item) {
-    return item !== null;
-  }).map(cb);
-};
+import TreeNodeTitle from './TreeNodeTitle';
+import Icons from '../Icons';
+import TabBar from '../TabBar';
+import { mapChildren } from '../utils';
 
 function SiderTreeTabs(props) {
   var tabs = props.tabs,
       children = props.children,
       restProps = _objectWithoutProperties(props, _excluded);
 
-  var prefixCls = "".concat(PREFIX_CLS, "-tree");
-
   var getKey = function getKey(item) {
     return item.key || item.title;
   };
@@ -67,24 +53,15 @@ function SiderTreeTabs(props) {
   return /*#__PURE__*/React.createElement(Tabs, _objectSpread(_objectSpread({}, restProps), {}, {
     renderTabBar: function renderTabBar(tabProps) {
       var activeKey = tabProps.activeKey,
-          onTabClick = tabProps.onTabClick;
-      var active = tabs.findIndex(function (item) {
-        return getKey(item) === 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);
+        }
       });
-      return /*#__PURE__*/React.createElement("div", {
-        className: "".concat(prefixCls, "-tabs")
-      }, tabs.map(function (item, index) {
-        var key = getKey(item);
-        return /*#__PURE__*/React.createElement("div", {
-          key: key,
-          className: classNames("".concat(prefixCls, "-tab"), _defineProperty({}, "".concat(prefixCls, "-tab-active"), active === index)),
-          onClick: function onClick(e) {
-            if (active !== index && key !== null) {
-              onTabClick(key, e);
-            }
-          }
-        }, item.title);
-      }));
     }
   }), mapChildren(children, function (child, index) {
     var tab = tabs[index];
@@ -98,10 +75,11 @@ function SiderTreeTabs(props) {
 export default function SiderTree(props) {
   var _props$data = props.data,
       mData = _props$data === void 0 ? [] : _props$data,
-      mShowSearch = props.showSearch,
-      mPlaceholder = props.placeholder,
+      showSearch = props.showSearch,
+      placeholder = props.placeholder,
       _onSelect = props.onSelect,
       operation = props.operation,
+      header = props.header,
       restProps = _objectWithoutProperties(props, _excluded2);
 
   var prefixCls = "".concat(PREFIX_CLS, "-tree");
@@ -158,35 +136,33 @@ export default function SiderTree(props) {
   var handleChange = useDebounce(function (value) {
     setKeywords(value);
   }, 300);
+  var mHeader = header;
+
+  if (!header && showSearch) {
+    mHeader = /*#__PURE__*/React.createElement(Input, {
+      defaultValue: keywords,
+      allowClear: true,
+      onChange: function onChange(e) {
+        return handleChange(e.currentTarget.value);
+      },
+      placeholder: placeholder,
+      prefix: /*#__PURE__*/React.createElement(Icons.Search, null)
+    });
+  }
+
   return /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-wrapper")
-  }, mShowSearch ? /*#__PURE__*/React.createElement(Input, {
-    allowClear: true,
-    onChange: function onChange(e) {
-      return handleChange(e.currentTarget.value);
-    },
-    placeholder: mPlaceholder,
-    suffix: /*#__PURE__*/React.createElement("svg", {
-      width: "15",
-      height: "15",
-      xmlns: "http://www.w3.org/2000/svg"
-    }, /*#__PURE__*/React.createElement("g", {
-      fill: "#686868",
-      fillRule: "evenodd"
-    }, /*#__PURE__*/React.createElement("path", {
-      d: "M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11Zm0 1a6.5 6.5 0 1 1 0-13 6.5 6.5 0 0 1 0 13Z",
-      fillRule: "nonzero"
-    }), /*#__PURE__*/React.createElement("path", {
-      d: "m10.23 11.77 1.414-1.414 2.293 2.293a1 1 0 1 1-1.414 1.414L10.23 11.77Z"
-    })))
-  }) : null, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-header")
+  }, mHeader), /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-body")
   }, tree.length <= 0 ? /*#__PURE__*/React.createElement(Empty, {
     description: false
   }) : /*#__PURE__*/React.createElement(Tree, _objectSpread({
     treeData: tree,
     prefixCls: prefixCls,
-    itemHeight: 36,
+    itemHeight: 40,
+    showLine: true,
     onSelect: function onSelect(selectedKeys, info) {
       if (_onSelect) {
         _onSelect(info.node.data, info);
@@ -209,7 +185,7 @@ export default function SiderTree(props) {
           fill: "none",
           fillRule: "evenodd"
         }, /*#__PURE__*/React.createElement("rect", {
-          stroke: "#686868",
+          stroke: "#c4c4c4",
           fill: "#FFF",
           x: ".5",
           y: ".5",
@@ -217,7 +193,7 @@ export default function SiderTree(props) {
           height: "12",
           rx: "2"
         }), /*#__PURE__*/React.createElement("path", {
-          fill: "#686868",
+          fill: "#c4c4c4",
           d: "M3 6h7v1H3z"
         })));
       }
@@ -230,7 +206,7 @@ export default function SiderTree(props) {
         fill: "none",
         fillRule: "evenodd"
       }, /*#__PURE__*/React.createElement("rect", {
-        stroke: "#686868",
+        stroke: "#c4c4c4",
         fill: "#FFF",
         x: ".5",
         y: ".5",
@@ -238,10 +214,10 @@ export default function SiderTree(props) {
         height: "12",
         rx: "2"
       }), /*#__PURE__*/React.createElement("path", {
-        fill: "#686868",
+        fill: "#c4c4c4",
         d: "M3 6h7v1H3z"
       }), /*#__PURE__*/React.createElement("path", {
-        fill: "#686868",
+        fill: "#c4c4c4",
         d: "M7 3v7H6V3z"
       })));
     }