@lemon-fe/components 0.0.32 → 0.1.0

package/es/SiderTree/index.less

@@ -1,6 +1,11 @@
-@import '../theme.less';
+@indentWidth: 18px;
+@treeNodeHeight: 40px;
 
 .@{prefixCls}-tree {
+  &-wrapper {
+    padding: @space;
+  }
+
   &-menu-popover {
     .ant-popover-arrow {
       display: none;
@@ -12,95 +17,88 @@
 
     .ant-popover-inner-content {
       min-width: 140px;
-      padding: 16px;
+      padding: 8px 0;
 
       & > div > ul {
         margin: 0;
         padding: 0;
 
         & > li {
-          color: #888;
-          line-height: 20px;
+          padding: 0 16px;
+          color: #333;
+          line-height: 36px;
           list-style: none;
           cursor: pointer;
+          transition: background-color 0.2s;
 
           &:hover {
-            color: .primary(1) [];
+            background-color: #eee;
           }
         }
-
-        & > li + li {
-          margin-top: @space;
-        }
       }
     }
   }
 
-  &-wrapper {
-    padding: 8px;
-    background: #fff;
-
-    & > .ant-input-affix-wrapper {
-      height: 32px;
-      margin-bottom: 8px;
-      color: #b3b3b3;
-      background: #f7f6f6;
-      border: none;
-      border-radius: 2px;
-      outline: none;
-      box-shadow: unset;
-
-      & input {
-        background: transparent;
-      }
-    }
+  &-tab-bar {
+    margin: 0 @space;
   }
 
-  &-tabs {
-    display: flex;
-    padding: 8px;
-    background-color: #fff;
-    border-bottom: 1px solid #dfdfdf;
+  &-body {
+    overflow-x: auto;
   }
 
-  &-tab {
-    padding: 3px 8px;
-    color: #61657f;
-    line-height: 20px;
-    border-radius: 2px;
-    cursor: pointer;
-
-    &-active {
-      color: .primary(1) [];
-      font-weight: bold;
-      background: .primary(0.08) [];
-    }
+  &-header + &-body {
+    margin-top: 12px;
   }
 
-  &-body {
-    overflow-x: auto;
+  &-header + .ant-tabs {
+    margin-top: 8px;
   }
 
   &-treenode {
     display: flex;
     align-items: center;
-    height: 36px;
+    height: @treeNodeHeight;
   }
 
-  &-indent-unit {
-    display: inline-block;
-    width: 10px;
+  &-indent {
+    align-self: stretch;
+    white-space: nowrap;
+    user-select: none;
+
+    &-unit {
+      display: inline-block;
+      width: @indentWidth;
+    }
+  }
+
+  &-show-line &-indent-unit {
+    position: relative;
+    height: 100%;
+
+    &::before {
+      position: absolute;
+      top: 0;
+      right: @indentWidth / 2;
+      bottom: 0;
+      border-right: 1px solid #c4c4c4;
+      content: '';
+    }
   }
 
   &-switcher {
+    position: relative;
     display: block;
-    width: 13px;
-    height: 13px;
-    margin-right: 4px;
+    flex: none;
+    align-self: stretch;
+    width: @indentWidth;
+    margin: 0;
+    line-height: @treeNodeHeight;
+    text-align: center;
     cursor: pointer;
+    user-select: none;
 
     & svg {
-      display: block;
       width: 13px;
       height: 13px;
     }
@@ -113,13 +111,9 @@
     min-width: 0;
   }
 
-  &-node-selected &-title-content {
-    font-weight: bold;
-    background: .primary(0.05) [];
-  }
-
-  &-title:hover &-title-content {
-    background: .primary(0.05) [];
+  &-node-selected &-title {
+    color: @primary-color;
+    background: .primary(0.1) [] !important;
   }
 
   &-title {
@@ -128,43 +122,50 @@
     align-items: center;
     justify-content: space-between;
     min-width: 0;
+    padding: 0 8px;
+    border-radius: 4px;
     cursor: pointer;
+    transition: background-color 0.2s;
+
+    &:hover {
+      background-color: #ededed;
+    }
 
     &-content {
       display: block;
-      height: 36px;
-      padding: 0 4px;
+      height: @treeNodeHeight;
       overflow: hidden;
-      line-height: 36px;
+      line-height: @treeNodeHeight;
       white-space: nowrap;
       text-overflow: ellipsis;
-      border-radius: 4px;
-      transition: all 0.3s;
     }
 
     &-operators {
-      flex: 0 0 34px;
-      justify-content: flex-end;
-
       &-item {
-        width: 15px;
-        height: 15px;
+        width: 20px;
+        height: 20px;
         margin-left: 4px;
-        color: .primary(1) [];
         line-height: 1;
         text-align: center;
-        background: .primary(0.05) [];
         border-radius: 4px;
 
         & svg {
           vertical-align: middle;
         }
 
+        &-active,
         &:hover {
-          color: #fff;
-          background: .primary(1) [];
+          background: #d7d7d7;
         }
       }
     }
   }
 }
+
+.@{prefixCls}-layout-left .@{prefixCls}-tree-wrapper:first-child .@{prefixCls}-tree-header {
+  padding-right: 12px;
+}
+
+.ant-tabs-tabpane .@{prefixCls}-tree-wrapper:first-child .@{prefixCls}-tree-header {
+  padding-right: 0;
+}

package/es/SymbolIcon/index.d.ts

@@ -0,0 +1,8 @@
+import type { CSSProperties } from 'react';
+export default function Icon(props: {
+    name: string;
+    size?: number;
+    color?: string;
+    className?: string;
+    style?: CSSProperties;
+}): JSX.Element;

package/es/SymbolIcon/index.js

@@ -0,0 +1,32 @@
+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 classNames from 'classnames';
+import { PREFIX_CLS } from '../constants';
+export default function Icon(props) {
+  var name = props.name,
+      size = props.size,
+      color = props.color,
+      styleProp = props.style,
+      className = props.className;
+  var style = styleProp;
+
+  if (size || color) {
+    style = _objectSpread(_objectSpread({}, style), {}, {
+      fontSize: size,
+      color: color
+    });
+  }
+
+  return /*#__PURE__*/React.createElement("svg", {
+    className: classNames("".concat(PREFIX_CLS, "-symbol-icon"), className),
+    "aria-hidden": "true",
+    style: style
+  }, /*#__PURE__*/React.createElement("use", {
+    xlinkHref: "#".concat(name)
+  }));
+}

package/es/SymbolIcon/index.less

@@ -0,0 +1,7 @@
+.@{prefixCls}-symbol-icon {
+  width: 1em;
+  height: 1em;
+  overflow: hidden;
+  vertical-align: -0.15em;
+  fill: currentColor;
+}

package/es/TabBar/index.d.ts

@@ -0,0 +1,14 @@
+import { CSSProperties } from 'react';
+import type { MouseEvent } from 'react';
+interface Props {
+    tabs: {
+        title: string;
+        key?: string;
+    }[];
+    activeKey?: string;
+    className?: string;
+    style?: CSSProperties;
+    onTabClick: (key: string, index: number, e: MouseEvent) => void;
+}
+export default function TabBar(props: Props): JSX.Element;
+export {};

package/es/TabBar/index.js

@@ -0,0 +1,52 @@
+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, { useEffect, useState } from 'react';
+import classNames from 'classnames';
+import { PREFIX_CLS } from '../constants';
+export default function TabBar(props) {
+  var tabs = props.tabs,
+      onTabClick = props.onTabClick,
+      activeKey = props.activeKey,
+      style = props.style,
+      className = props.className;
+  var prefixCls = "".concat(PREFIX_CLS, "-tab-bar");
+
+  var getKey = function getKey() {
+    return activeKey || (tabs.length > 0 ? tabs[0].key || tabs[0].title : undefined);
+  };
+
+  var _useState = useState(getKey()),
+      _useState2 = _slicedToArray(_useState, 2),
+      key = _useState2[0],
+      setKey = _useState2[1];
+
+  useEffect(function () {
+    setKey(getKey());
+  }, [activeKey]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(prefixCls, className),
+    style: style
+  }, tabs.map(function (tab, index) {
+    var tabKey = tab.key || tab.title;
+    return /*#__PURE__*/React.createElement("div", {
+      key: tabKey,
+      className: classNames("".concat(prefixCls, "-item"), _defineProperty({}, "".concat(prefixCls, "-item-active"), key === tabKey)),
+      onClick: function onClick(e) {
+        setKey(tabKey);
+        onTabClick(tabKey, index, e);
+      }
+    }, tab.title);
+  }));
+}

package/es/TabBar/index.less

@@ -0,0 +1,31 @@
+.@{prefixCls}-tab-bar {
+  display: flex;
+  border-bottom: 1px solid #e5e5e5;
+
+  &-item {
+    position: relative;
+    box-sizing: border-box;
+    min-width: 52px;
+    padding: 12px 12px 14px;
+    color: #61657f;
+    font-size: 14px;
+    line-height: 22px;
+    cursor: pointer;
+
+    &-active {
+      color: @primary-color;
+      font-weight: 500;
+
+      &::after {
+        position: absolute;
+        bottom: -1px;
+        left: 0;
+        display: block;
+        width: 100%;
+        height: 2px;
+        background-color: @primary-color;
+        content: '';
+      }
+    }
+  }
+}

package/es/index.d.ts

@@ -1,3 +1,4 @@
+export * from './constants';
 export { default as PageLoading } from './PageLoading';
 export { default as Actions } from './Actions';
 export { default as Filter } from './Filter';
@@ -24,4 +25,5 @@ export { default as FormHorizontal } from './FormHorizontal';
 export { default as FormInline } from './FormInline';
 export { default as FormTable } from './FormTable';
 export type { FormTableColumnType, FormTableProps, FormTableRef } from './FormTable/typings';
-export * from './constants';
+export { default as TabBar } from './TabBar';
+export { default as SymbolIcon } from './SymbolIcon';

package/es/index.js

@@ -1,3 +1,4 @@
+export * from './constants';
 export { default as PageLoading } from './PageLoading';
 export { default as Actions } from './Actions';
 export { default as Filter } from './Filter';
@@ -19,4 +20,5 @@ export { default as init } from './init';
 export { default as FormHorizontal } from './FormHorizontal';
 export { default as FormInline } from './FormInline';
 export { default as FormTable } from './FormTable';
-export * from './constants';
+export { default as TabBar } from './TabBar';
+export { default as SymbolIcon } from './SymbolIcon';

package/es/index.less

@@ -1,4 +1,6 @@
 @import '~antd/dist/antd.variable.less';
+@import './utils.less';
+@import './overrides.less';
 @import './theme.less';
 @import './Actions/index.less';
 @import './Layout/index.less';
@@ -18,38 +20,5 @@
 @import './FormHorizontal/index.less';
 @import './FormInline//index.less';
 @import './FormTable/index.less';
-
-@blue-base: #2357df;
-
-/** basic */
-
-@height-base: 32px;
-@border-color-base: #c0c0c0;
-@label-color: #464646;
-
-/** table */
-
-@table-header-bg: #f0f0f0;
-@table-header-color: rgba(51, 51, 51, 0.65);
-@table-padding-vertical: 14px;
-@table-border-color: rgba(0, 0, 0, 0.04);
-
-.ant-modal-confirm-body-wrapper .ant-modal-confirm-body .ant-modal-confirm-content {
-  color: rgba(0, 0, 0, 0.65);
-}
-
-.ant-pagination-item-active {
-  background: @primary-color;
-
-  a {
-    color: #fff;
-  }
-
-  &:hover a {
-    color: #fff;
-  }
-}
-
-a[title='站长统计'] {
-  display: none;
-}
+@import './TabBar/index.less';
+@import './SymbolIcon/index.less';

package/es/init.js

@@ -7,7 +7,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 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); }
 
 import React from 'react';
-import { message, Modal, Empty, Select, ConfigProvider, Result, Button } from 'antd';
+import { message, Modal, Empty, Select, ConfigProvider, Result, Button, version, DatePicker } from 'antd';
 import { config } from '@lemon-fe/hooks';
 import PageLoading from './PageLoading';
 import Icons from './Icons';
@@ -19,12 +19,13 @@ export default function init() {
 
   // 添加站长统计
   if (opts.enableCNZZ) {
-    var node = document.createElement('script');
-    node.innerHTML = "\n    var _czc = _czc || [];\n    window._czc&&window._czc.push(['_setAutoPageview', false]);\n  ";
-    document.body.appendChild(node);
-    node = document.createElement('script');
-    node.src = '//v1.cnzz.com/z_stat.php?id=1280732258&web_id=1280732258';
-    document.body.appendChild(node);
+    var _node = document.createElement('script');
+
+    _node.innerHTML = "\n    var _czc = _czc || [];\n    window._czc&&window._czc.push(['_setAutoPageview', false]);\n  ";
+    document.body.appendChild(_node);
+    _node = document.createElement('script');
+    _node.src = '//v1.cnzz.com/z_stat.php?id=1280732258&web_id=1280732258';
+    document.body.appendChild(_node);
   }
 
   var types = ['success', 'error', 'warning', 'info'];
@@ -81,24 +82,22 @@ export default function init() {
         }
       })
     }, arguments.length <= 0 ? undefined : arguments[0]));
-  }; //@ts-ignore
+  };
 
+  var node = /*#__PURE__*/React.createElement(Down, null); //@ts-ignore
 
   Select.defaultProps = {
-    suffixIcon: function suffixIcon() {
-      return /*#__PURE__*/React.createElement("div", {
-        style: {
-          margin: '-2px 0 0 -2px',
-          fontSize: 16,
-          color: '#BFBFBF'
-        }
-      }, /*#__PURE__*/React.createElement(Down, null));
+    suffixIcon: version >= '4.18.9' ? node : function () {
+      return node;
     }
   };
   Empty.PRESENTED_IMAGE_DEFAULT = /*#__PURE__*/React.createElement(EmptyIcon, null);
   Empty.defaultProps = {
     image: Empty.PRESENTED_IMAGE_DEFAULT
   };
+  DatePicker.RangePicker.defaultProps = {
+    suffixIcon: /*#__PURE__*/React.createElement(Icons.Calendar, null)
+  };
   config({
     showToast: function showToast() {
       return message.loading('请稍等', 0);

package/es/overrides.less

@@ -0,0 +1,136 @@
+a[title='站长统计'] {
+  display: none;
+}
+
+@blue-base: #2357df;
+
+/** basic */
+
+@height-base: 32px;
+@border-color-base: #c0c0c0;
+@border-radius-base: 4px;
+@label-color: #464646;
+
+/** table */
+
+@table-header-bg: #f0f0f0;
+@table-header-color: rgba(51, 51, 51, 0.65);
+@table-padding-vertical: 14px;
+@table-border-color: rgba(0, 0, 0, 0.04);
+@table-border-radius-base: 4px;
+
+/** button */
+
+@btn-default-border: #c4c4c4;
+
+/** modal */
+
+.ant-modal-content {
+  border-radius: 8px;
+}
+
+.ant-modal-confirm {
+  .ant-modal-body {
+    padding: 0;
+  }
+
+  .ant-modal-confirm-body {
+    padding: 40px 48px;
+    overflow: hidden;
+
+    & > .anticon:first-child {
+      position: absolute;
+      top: 40px;
+      left: 48px;
+      padding: 2px;
+    }
+
+    & > .anticon + .ant-modal-confirm-title + .ant-modal-confirm-content {
+      margin-left: 36px;
+    }
+  }
+
+  .ant-modal-confirm-btns {
+    float: none;
+    margin-top: 0;
+    padding: 10px 16px;
+    text-align: right;
+    background: transparent;
+    border-top: 1px solid rgba(0, 0, 0, 0.06);
+    border-radius: 0 0 2px 2px;
+
+    & > .ant-btn {
+      min-width: 72px;
+    }
+  }
+
+  .ant-modal-confirm-title {
+    float: none;
+    margin-left: 36px;
+    font-weight: 600;
+    line-height: 24px;
+  }
+
+  .ant-modal-confirm-content {
+    float: none;
+    margin: 2px 0 0 36px;
+    color: rgba(51, 51, 51, 0.5);
+    line-height: 22px;
+  }
+}
+
+/** pagination */
+
+.ant-pagination {
+  color: #666;
+
+  .ant-select {
+    color: #666;
+  }
+}
+
+.ant-pagination-item {
+  font-size: 12px;
+
+  a {
+    color: #666;
+  }
+}
+
+.ant-pagination-item-active {
+  background: @primary-color;
+
+  a {
+    color: #fff;
+  }
+
+  &:hover a {
+    color: #fff;
+  }
+}
+
+/** select */
+
+.ant-select-arrow {
+  color: rgba(51, 51, 51, 0.7);
+  font-size: 16px;
+}
+
+/** input */
+@input-padding-horizontal-base: 8px;
+@input-icon-color: rgba(51, 51, 51, 0.7);
+
+/** picker */
+.ant-picker {
+  .ant-picker-clear {
+    box-sizing: border-box;
+    width: 16px;
+    height: 16px;
+    padding: 1px;
+  }
+
+  &-suffix {
+    color: rgba(51, 51, 51, 0.7);
+    font-size: 16px;
+  }
+}

package/es/theme.less

@@ -1,13 +1,6 @@
-/* stylelint-disable property-no-unknown */
 @prefixCls: lemon;
+@space: 16px;
 
 html {
   --lemon-primary-color: 35, 87, 223;
 }
-
-.primary(@alpha: 1) {
-  rgb: rgb(var(--lemon-primary-color));
-  rgba: rgba(var(--lemon-primary-color), @alpha);
-}
-
-@space: 16px;

package/es/utils.d.ts

@@ -0,0 +1,2 @@
+import type { ReactNode } from 'react';
+export declare const mapChildren: (children: ReactNode, cb: (node: ReactNode, index: number) => ReactNode) => ReactNode[];

package/es/utils.js

@@ -0,0 +1,14 @@
+// 不使用Children.map的原因是由于它会给子节点生成一个key与tabs的activeTabKey无法对应
+export 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);
+};