@lemon-fe/kits 0.1.136 → 1.0.0-0

package/README.md

@@ -1,11 +1,33 @@
-# `kits`
+# kits
 
-> TODO: description
+## Getting Started
 
-## Usage
+Install dependencies,
 
+```bash
+$ npx lerna bootstrap
 ```
-const kits = require('kits');
 
-// TODO: DEMONSTRATE API
+Start the dev server,
+
+```bash
+$ yarn start
+```
+
+Build documentation,
+
+```bash
+$ npm run docs:build
+```
+
+Run test,
+
+```bash
+$ npm test
+```
+
+Build library via `father-build`,
+
+```bash
+$ npm run build
 ```

package/es/app.d.ts

@@ -0,0 +1 @@
+import './index.less';

package/es/app.js

@@ -0,0 +1,3 @@
+import "./index.less";
+import init from "./init";
+init();

package/es/components/Actions/index.d.ts

@@ -0,0 +1,26 @@
+import { ReactElement } from 'react';
+import type { CSSProperties } from 'react';
+import { ButtonProps } from 'antd';
+interface ActionBtn extends ButtonProps {
+    text: string | ReactElement;
+    onClick?: () => void;
+    /**
+     * @deprecated
+     * 请不要使用
+     */
+    action?: () => void;
+    dropDown?: ({
+        text: string;
+        onClick: () => void;
+        disabled?: boolean;
+    } | null)[];
+}
+interface Props {
+    actions: (ActionBtn | ReactElement | null)[];
+    style?: CSSProperties;
+    className?: string;
+    prefixCls?: string;
+    maxShowCount?: number;
+}
+declare function Actions(props: Props): JSX.Element;
+export default Actions;

package/es/components/Actions/index.js

@@ -0,0 +1,169 @@
+var _excluded = ["disabled", "dropDown", "text", "onClick", "icon", "action"];
+
+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 _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; }
+
+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, { Fragment, useState } from 'react';
+import { Space, Dropdown, Menu, Button, Popover } from 'antd';
+import classNames from 'classnames';
+import Icons from "../Icons";
+import { PREFIX_CLS } from "../../constants";
+
+function Actions(props) {
+  var actions = props.actions,
+      className = props.className,
+      style = props.style,
+      _props$prefixCls = props.prefixCls,
+      prefixCls = _props$prefixCls === void 0 ? PREFIX_CLS : _props$prefixCls,
+      _props$maxShowCount = props.maxShowCount,
+      maxShowCount = _props$maxShowCount === void 0 ? 3 : _props$maxShowCount;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      visible = _useState2[0],
+      setVisible = _useState2[1];
+
+  var visibleBtns = actions.slice(0, maxShowCount);
+  var collapsedBtns = actions.slice(maxShowCount);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames("".concat(prefixCls, "-actions"), className),
+    style: style
+  }, /*#__PURE__*/React.createElement(Space, {
+    direction: "horizontal",
+    size: 12
+  }, visibleBtns.map(function (item, index) {
+    if (item === null) {
+      return item;
+    }
+
+    if ( /*#__PURE__*/React.isValidElement(item)) {
+      return /*#__PURE__*/React.createElement(Fragment, {
+        key: index
+      }, item);
+    }
+
+    var disabled = item.disabled,
+        dropDown = item.dropDown,
+        text = item.text,
+        onClick = item.onClick,
+        icon = item.icon,
+        action = item.action,
+        rest = _objectWithoutProperties(item, _excluded);
+
+    if ( /*#__PURE__*/React.isValidElement(text)) {
+      return /*#__PURE__*/React.createElement(Fragment, {
+        key: index
+      }, text);
+    }
+
+    var handleClick = onClick || action;
+
+    if (Array.isArray(dropDown)) {
+      var overlay = /*#__PURE__*/React.createElement(Menu, null, dropDown.map(function (subItem) {
+        if (subItem) {
+          return /*#__PURE__*/React.createElement(Menu.Item, {
+            onClick: function onClick() {
+              return subItem.onClick();
+            },
+            key: subItem.text,
+            disabled: subItem.disabled
+          }, subItem.text);
+        }
+      }));
+
+      if (handleClick !== undefined) {
+        return /*#__PURE__*/React.createElement(Dropdown.Button, {
+          key: text,
+          disabled: disabled,
+          overlay: overlay,
+          onClick: handleClick,
+          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);
+      }
+
+      return /*#__PURE__*/React.createElement(Dropdown, {
+        key: text,
+        disabled: disabled,
+        overlay: overlay
+      }, /*#__PURE__*/React.createElement(Button, _extends({
+        disabled: disabled,
+        icon: icon
+      }, rest), text, /*#__PURE__*/React.createElement(Icons.Down, {
+        style: {
+          opacity: 0.7,
+          fontSize: 16,
+          verticalAlign: -3
+        }
+      })));
+    }
+
+    return /*#__PURE__*/React.createElement(Button, _extends({
+      key: text,
+      disabled: disabled,
+      onClick: handleClick,
+      icon: icon
+    }, rest), text);
+  }), collapsedBtns.length > 0 ? /*#__PURE__*/React.createElement(Popover, {
+    placement: "bottomRight",
+    overlayClassName: "".concat(prefixCls, "-actions-popover"),
+    onVisibleChange: setVisible,
+    visible: visible,
+    trigger: "click",
+    content: collapsedBtns.map(function (item, index) {
+      if (item === null) {
+        return item;
+      }
+
+      if ( /*#__PURE__*/React.isValidElement(item)) {
+        return /*#__PURE__*/React.createElement(Fragment, {
+          key: index
+        }, item);
+      }
+
+      var disabled = item.disabled;
+      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) {
+            var handleClick = item.onClick || item.action;
+            setVisible(false);
+
+            if (handleClick) {
+              handleClick();
+            }
+          }
+        }
+      }, item.text);
+    })
+  }, /*#__PURE__*/React.createElement(Button, {
+    icon: /*#__PURE__*/React.createElement(Icons.More, null)
+  })) : null));
+}
+
+export default Actions;

package/es/components/Actions/index.less

@@ -0,0 +1,67 @@
+.@{prefixCls}-actions {
+  &-popover {
+    &.@{ant-prefix}-popover {
+      padding-top: 0;
+    }
+
+    .@{ant-prefix}-popover-inner {
+      padding: 8px 0;
+      border-radius: 8px;
+    }
+
+    .@{ant-prefix}-popover-inner-content {
+      padding: 0;
+    }
+
+    .@{ant-prefix}-popover-arrow {
+      display: none;
+    }
+
+    &-list {
+      margin: 0;
+      padding: 8px;
+    }
+
+    &-item {
+      box-sizing: border-box;
+      width: 120px;
+      height: 38px;
+      padding: 0 16px;
+      color: #333;
+      line-height: 38px;
+      list-style: none;
+      cursor: pointer;
+      transition: background-color 0.2s;
+
+      &:hover {
+        background-color: #eee;
+      }
+
+      &-disabled {
+        color: rgba(0, 0, 0, 0.25);
+        background-color: #fff !important;
+        cursor: not-allowed;
+      }
+    }
+  }
+
+  .@{ant-prefix}-btn:not(.@{ant-prefix}-btn-icon-only) {
+    min-width: 80px;
+
+    .@{prefixCls}-symbol-icon {
+      margin-right: 8px;
+      font-size: 20px;
+      vertical-align: -5px;
+    }
+  }
+
+  .@{ant-prefix}-btn-default {
+    .@{prefixCls}-symbol-icon {
+      opacity: 0.7;
+    }
+
+    &:not(:disabled) {
+      background-color: #fff;
+    }
+  }
+}

package/es/components/BaseTable/Actions.d.ts

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

package/es/components/BaseTable/Actions.js

@@ -0,0 +1,136 @@
+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 actionsProp = 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);
+    }
+  };
+
+  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, idx) {
+    if (item === null) {
+      return null;
+    }
+
+    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: key,
+      onMouseEnter: function onMouseEnter() {
+        if (pop !== null && pop.key !== key) {
+          closePop();
+        }
+      },
+      onClick: function onClick(e) {
+        if (item.disabled) {
+          return;
+        }
+
+        if (dropDown.length > 0) {
+          var rect = e.target.getBoundingClientRect();
+          openPop({
+            key: key,
+            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, idx) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: classNames("".concat(prefixCls, "-popover-item"), _defineProperty({}, "".concat(prefixCls, "-popover-item-disabled"), item.disabled)),
+      key: getKey(item, idx),
+      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/components/BaseTable/BaseTableContext.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+declare const BaseTableContext: import("react").Context<{
+    scrollY?: string | number | undefined;
+    rowHeight?: number | undefined;
+    antPrefixCls: string;
+}>;
+export default BaseTableContext;

package/es/components/BaseTable/BaseTableContext.js

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+var BaseTableContext = /*#__PURE__*/createContext({
+  scrollY: 0,
+  rowHeight: 37,
+  antPrefixCls: 'ant-table'
+});
+export default BaseTableContext;

package/es/components/BaseTable/ResizeHeaderCell.d.ts

@@ -0,0 +1,8 @@
+import type { ReactElement, RefObject } from 'react';
+export default function ResizeHeaderCell(props: {
+    children?: ReactElement;
+    fullTableRef: RefObject<HTMLDivElement>;
+    width: number;
+    prefixCls?: string;
+    onChange?: (width: number) => void;
+}): JSX.Element;

package/es/components/BaseTable/ResizeHeaderCell.js

@@ -0,0 +1,130 @@
+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, { useState, useRef, useEffect, useContext } from 'react';
+import { Resizable } from 'react-resizable';
+import BaseTableContext from "./BaseTableContext";
+export default function ResizeHeaderCell(props) {
+  var children = props.children,
+      prefixCls = props.prefixCls,
+      fullTableRef = props.fullTableRef,
+      width = props.width,
+      onChange = props.onChange;
+
+  var _useState = useState(width),
+      _useState2 = _slicedToArray(_useState, 2),
+      size = _useState2[0],
+      setSize = _useState2[1];
+
+  var indicator = useRef();
+  var handle = useRef(null);
+
+  var _useState3 = useState(0),
+      _useState4 = _slicedToArray(_useState3, 2),
+      offset = _useState4[0],
+      setOffset = _useState4[1];
+
+  var _useContext = useContext(BaseTableContext),
+      antPrefixCls = _useContext.antPrefixCls;
+
+  useEffect(function () {
+    setSize(width);
+  }, [width]);
+
+  var getTable = function getTable() {
+    if (fullTableRef.current === null) {
+      return null;
+    }
+
+    return fullTableRef.current.querySelector(".".concat(antPrefixCls));
+  };
+
+  var handleResizeStart = function handleResizeStart() {
+    var table = getTable();
+
+    if (table === null) {
+      return;
+    }
+
+    var elm = document.createElement('div');
+    elm.style.height = "".concat(table.offsetHeight || 0, "px");
+    elm.classList.add("".concat(prefixCls, "-resizable-indicator"));
+
+    if (table) {
+      table.appendChild(elm);
+      table.classList.add("".concat(prefixCls, "-resizing-col"));
+      indicator.current = elm;
+
+      if (handle.current !== null) {
+        var _handle$current = handle.current,
+            parent = _handle$current.offsetParent,
+            left = _handle$current.offsetLeft;
+        var node = handle.current.parentNode;
+
+        while (node !== null && node !== table) {
+          left -= node.scrollLeft;
+
+          if (node === parent) {
+            left += node.offsetLeft;
+            parent = node.offsetParent;
+          }
+
+          node = node.parentNode;
+        }
+
+        setOffset(left - size);
+        indicator.current.style.left = "".concat(left, "px");
+      }
+    }
+  };
+
+  var handleResizeStop = function handleResizeStop() {
+    var table = getTable();
+
+    if (table !== null && indicator.current !== undefined) {
+      table.removeChild(indicator.current);
+      table.classList.remove("".concat(prefixCls, "-resizing-col"));
+
+      if (onChange) {
+        onChange(size);
+      }
+    }
+  };
+
+  var handleResize = function handleResize(e, data) {
+    e.preventDefault();
+
+    if (indicator.current) {
+      setSize(data.size.width);
+      indicator.current.style.left = "".concat(offset + data.size.width, "px");
+    }
+  };
+
+  return /*#__PURE__*/React.createElement(Resizable, {
+    width: size,
+    height: 0,
+    handle: /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-resizable-handle"),
+      onClick: function onClick(e) {
+        e.stopPropagation();
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      ref: handle
+    })),
+    onResizeStart: handleResizeStart,
+    onResizeStop: handleResizeStop,
+    onResize: handleResize,
+    draggableOpts: {
+      enableUserSelectHack: false
+    }
+  }, children);
+}

package/es/components/BaseTable/VirtualBody.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode, CSSProperties } from 'react';
+interface Props {
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function VirtualList(props: Props): JSX.Element;
+export {};