@lemon-fe/kits 0.1.136 → 1.0.0-0

package/es/components/SiderTree/index.js

@@ -0,0 +1,217 @@
+var _excluded = ["tabs", "children"],
+    _excluded2 = ["data", "showSearch", "placeholder", "onSelect", "operation", "header", "footer"];
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+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; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+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; }
+
+import React, { useMemo, useState } from 'react';
+import { useDebounce } from '@lemon-fe/hooks';
+import Tree from 'rc-tree';
+import { Input, Tabs } from 'antd';
+import { PREFIX_CLS } from "../../constants";
+import TreeNodeTitle from "./TreeNodeTitle";
+import Icons from "../Icons";
+import { mapChildren } from "../utils";
+import empty from "./empty.png";
+
+function SiderTreeTabs(props) {
+  var tabs = props.tabs,
+      children = props.children,
+      restProps = _objectWithoutProperties(props, _excluded);
+
+  var getKey = function getKey(item) {
+    return item.key || item.title;
+  };
+
+  var prefixCls = "".concat(PREFIX_CLS, "-tree");
+  return /*#__PURE__*/React.createElement(Tabs, _extends({
+    className: "".concat(prefixCls, "-tabs")
+  }, restProps), mapChildren(children, function (child, index) {
+    var tab = tabs[index];
+    return /*#__PURE__*/React.createElement(Tabs.TabPane, {
+      tab: tab.title,
+      key: getKey(tab)
+    }, child);
+  }));
+}
+
+export default function SiderTree(props) {
+  var _props$data = props.data,
+      mData = _props$data === void 0 ? [] : _props$data,
+      showSearch = props.showSearch,
+      placeholder = props.placeholder,
+      _onSelect = props.onSelect,
+      operation = props.operation,
+      header = props.header,
+      footer = props.footer,
+      restProps = _objectWithoutProperties(props, _excluded2);
+
+  var prefixCls = "".concat(PREFIX_CLS, "-tree");
+
+  var _useState = useState(''),
+      _useState2 = _slicedToArray(_useState, 2),
+      keywords = _useState2[0],
+      setKeywords = _useState2[1];
+
+  var tree = useMemo(function () {
+    var list = mData;
+
+    if (keywords) {
+      list = list.filter(function (item) {
+        return new RegExp(keywords, 'i').test(item.title.toString());
+      });
+    }
+
+    var map = new Map(list.map(function (item) {
+      return [item.key, {
+        key: item.key,
+        parent: item.parent,
+        icon: item.icon,
+        data: item,
+        title: /*#__PURE__*/React.createElement(TreeNodeTitle, {
+          operation: operation,
+          node: item,
+          prefixCls: prefixCls
+        })
+      }];
+    }));
+    var items = [];
+
+    _toConsumableArray(map.values()).forEach(function (item) {
+      var parent;
+
+      if (item.parent !== undefined) {
+        parent = map.get(item.parent);
+      }
+
+      if (!parent) {
+        items.push(item);
+      } else {
+        if (parent.children === undefined) {
+          parent.children = [];
+        }
+
+        parent.children.push(item);
+      }
+    });
+
+    return items;
+  }, [mData, keywords]);
+  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")
+  }, !!mHeader && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-header")
+  }, mHeader), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-body")
+  }, tree.length <= 0 ? /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-empty")
+  }, /*#__PURE__*/React.createElement("img", {
+    src: empty
+  }), /*#__PURE__*/React.createElement("div", null, "\u6682\u65E0\u6570\u636E")) : /*#__PURE__*/React.createElement(Tree, _extends({
+    treeData: tree,
+    prefixCls: prefixCls,
+    itemHeight: 40,
+    showLine: true,
+    onSelect: function onSelect(selectedKeys, info) {
+      if (_onSelect) {
+        _onSelect(info.node.data, info);
+      }
+    },
+    switcherIcon: function switcherIcon(_ref) {
+      var expanded = _ref.expanded,
+          isLeaf = _ref.isLeaf;
+
+      if (isLeaf) {
+        return null;
+      }
+
+      if (expanded) {
+        return /*#__PURE__*/React.createElement("svg", {
+          width: "13",
+          height: "13",
+          xmlns: "http://www.w3.org/2000/svg"
+        }, /*#__PURE__*/React.createElement("g", {
+          fill: "none",
+          fillRule: "evenodd"
+        }, /*#__PURE__*/React.createElement("rect", {
+          stroke: "#c4c4c4",
+          fill: "#FFF",
+          x: ".5",
+          y: ".5",
+          width: "12",
+          height: "12",
+          rx: "2"
+        }), /*#__PURE__*/React.createElement("path", {
+          fill: "#c4c4c4",
+          d: "M3 6h7v1H3z"
+        })));
+      }
+
+      return /*#__PURE__*/React.createElement("svg", {
+        width: "13",
+        height: "13",
+        xmlns: "http://www.w3.org/2000/svg"
+      }, /*#__PURE__*/React.createElement("g", {
+        fill: "none",
+        fillRule: "evenodd"
+      }, /*#__PURE__*/React.createElement("rect", {
+        stroke: "#c4c4c4",
+        fill: "#FFF",
+        x: ".5",
+        y: ".5",
+        width: "12",
+        height: "12",
+        rx: "2"
+      }), /*#__PURE__*/React.createElement("path", {
+        fill: "#c4c4c4",
+        d: "M3 6h7v1H3z"
+      }), /*#__PURE__*/React.createElement("path", {
+        fill: "#c4c4c4",
+        d: "M7 3v7H6V3z"
+      })));
+    }
+  }, restProps))), !!footer && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-footer")
+  }, footer));
+}
+SiderTree.Tabs = SiderTreeTabs;

package/es/components/SiderTree/index.less

@@ -0,0 +1,222 @@
+@indentWidth: 18px;
+@treeNodeHeight: 36px;
+
+.@{prefixCls}-tree {
+  &-wrapper {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    height: 100%;
+    padding: @space-v 0;
+
+    .@{prefixCls}-tree-list-scrollbar{
+      display: block !important;
+      right: -16px !important;
+    }
+    .@{prefixCls}-tree-list-scrollbar-thumb{
+      background: #DDD !important;
+    }
+
+  }
+
+  &-menu-popover {
+    .@{ant-prefix}-popover-arrow {
+      display: none;
+    }
+
+    .@{ant-prefix}-popover-inner {
+      border-radius: 10px;
+    }
+
+    .@{ant-prefix}-popover-inner-content {
+      min-width: 140px;
+      padding: 8px 0;
+
+      & > div > ul {
+        margin: 0;
+        padding: 0;
+
+        & > li {
+          padding: 0 16px;
+          color: #333;
+          line-height: 36px;
+          list-style: none;
+          cursor: pointer;
+          transition: background-color 0.2s;
+
+          &:hover {
+            background-color: #eee;
+          }
+        }
+      }
+    }
+  }
+
+  &-tabs {
+    .fullTabs();
+
+    & > .@{ant-prefix}-tabs-nav {
+      margin: 0 @space-h;
+    }
+  }
+
+  &-header {
+    padding: 0 @space-h;
+  }
+
+  &-body {
+    min-height: 0;
+    padding: 0 @space-h;
+    overflow: auto;
+
+    .scrollBar(8px);
+  }
+
+  &-header + &-body {
+    margin-top: 12px;
+  }
+
+  &-header + .@{ant-prefix}-tabs {
+    margin-top: 8px;
+  }
+
+  &-footer {
+    margin-top: 12px;
+    padding: 0 12px;
+  }
+
+  &-treenode {
+    display: flex;
+    align-items: center;
+    height: @treeNodeHeight;
+  }
+
+  &-indent {
+    align-self: stretch;
+    white-space: nowrap;
+    user-select: none;
+
+    &-unit {
+      display: inline-block;
+      width: @indentWidth;
+      vertical-align: top;
+    }
+  }
+
+  &-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;
+    flex: none;
+    align-self: stretch;
+    width: @indentWidth;
+    margin: 0;
+    line-height: @treeNodeHeight;
+    text-align: center;
+    cursor: pointer;
+    user-select: none;
+
+    & svg {
+      width: 13px;
+      height: 13px;
+    }
+
+    &-noop {
+      display: none;
+    }
+  }
+
+  &-node-content-wrapper {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    min-width: 0;
+  }
+
+  &-node-selected &-title {
+    color: @primary-color;
+    background: .primary(0.1) [] !important;
+  }
+
+  &-title {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: space-between;
+    min-width: 56px;
+    padding: 0 8px;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 0.2s;
+
+    &:hover {
+      background-color: #ededed;
+    }
+
+    &-content {
+      display: block;
+      height: @treeNodeHeight;
+      overflow: hidden;
+      line-height: @treeNodeHeight;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    &-operators {
+      &-item {
+        width: 20px;
+        height: 20px;
+        margin-left: 4px;
+        line-height: 1;
+        text-align: center;
+        border-radius: 4px;
+
+        & svg {
+          vertical-align: middle;
+        }
+
+        &-active,
+        &:hover {
+          background: #d7d7d7;
+        }
+      }
+    }
+  }
+
+  &-empty {
+    width: 72px;
+    margin: 0 auto;
+    padding-top: 75px;
+    text-align: center;
+
+    img {
+      display: block;
+      width: 72px;
+      height: 72px;
+    }
+
+    div {
+      margin-top: 8px;
+      color: rgba(51, 51, 51, 0.5);
+      font-size: 14px;
+      line-height: 22px;
+    }
+  }
+}
+
+.@{prefixCls}-layout-left .@{prefixCls}-tree-wrapper:first-child .@{prefixCls}-tree-header {
+  padding-right: 12px + @space-h;
+}

package/es/components/SiderTree/typings.d.ts

@@ -0,0 +1,19 @@
+import type { TreeNodeProps } from 'rc-tree';
+import type { ReactNode } from 'react';
+
+export interface TreeData<T> extends Pick<TreeNodeProps, 'icon'> {
+  key: T;
+  title: string | number;
+  parent?: T;
+}
+
+export type TreeNode<T> = Omit<TreeData<T>, 'title'> & {
+  title?: ReactNode;
+  children?: TreeNode<T>[];
+  data: TreeData<T>;
+};
+
+export interface OperationType<T> {
+  onAdd?: (node: TreeData<T>) => void;
+  others?: (node: TreeData<T>) => ReactNode;
+}

package/es/components/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/components/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/components/SymbolIcon/index.less

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

package/es/components/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/components/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/components/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/components/Table/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { TableProps } from './typings';
+export default function Table<RecordType extends Record<string | number, any>>(props: TableProps<RecordType>): JSX.Element;