@lemon-fe/components 0.1.153 → 1.1.0-alpha.0

package/es/layout/index.js

@@ -0,0 +1,253 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["tabs", "children", "className", "activeKey", "onTabClick", "hideTabBar"];
+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 _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useCallback, createContext, useContext } from 'react';
+import React, { useState } from 'react';
+import { Resizable } from 'react-resizable';
+import Portal from "../portal";
+import { mapChildren, prefixClassName } from "../utils";
+import { Spin, Tabs } from 'antd';
+import classNames from 'classnames';
+import { get } from 'lodash';
+var SLOT_HEADER = 'header';
+var SLOT_FOOTER = 'footer';
+var prefix = prefixClassName('layout');
+function Sider(props) {
+  var children = props.children,
+    onCollapse = props.onCollapse;
+  var _useState = useState(242),
+    _useState2 = _slicedToArray(_useState, 2),
+    width = _useState2[0],
+    setWidth = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    collapsed = _useState4[0],
+    setCollapsed = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    dragging = _useState6[0],
+    setDragging = _useState6[1];
+  var viewWidth = collapsed ? 0 : width;
+  return /*#__PURE__*/React.createElement(Resizable, {
+    axis: "x",
+    width: width,
+    height: 0,
+    onResizeStart: function onResizeStart() {
+      setDragging(true);
+    },
+    onResizeStop: function onResizeStop() {
+      setDragging(false);
+    },
+    onResize: function onResize(_, data) {
+      setWidth(data.size.width);
+    },
+    handle: /*#__PURE__*/React.createElement("div", {
+      className: prefix('left-resizable')
+    })
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: viewWidth
+    },
+    className: classNames(prefix('left'), _defineProperty(_defineProperty({}, prefix("left-collapsed"), collapsed), prefix("left-resizing"), dragging))
+  }, /*#__PURE__*/React.createElement("div", {
+    className: prefix("left-body")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: prefix("left-content")
+  }, children)), /*#__PURE__*/React.createElement("div", {
+    className: prefix("left-collapse"),
+    onClick: function onClick() {
+      var result = !collapsed;
+      onCollapse === null || onCollapse === void 0 || onCollapse(result);
+      setCollapsed(result);
+    }
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: "12",
+    height: "12",
+    version: "1.1",
+    viewBox: "0 0 12 12"
+  }, /*#__PURE__*/React.createElement("g", {
+    stroke: "none",
+    strokeWidth: "1",
+    fill: "none",
+    fillRule: "evenodd",
+    opacity: "1"
+  }, /*#__PURE__*/React.createElement("g", {
+    transform: "translate(-463.000000, -140.000000)"
+  }, /*#__PURE__*/React.createElement("g", {
+    transform: "translate(463.000000, 140.000000)"
+  }, /*#__PURE__*/React.createElement("g", {
+    opacity: "0.699999988",
+    transform: "translate(2.000000, 2.000000)"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M9,0.75 C9,1.16421356 8.66421356,1.5 8.25,1.5 L5.75,1.5 C5.33578644,1.5 5,1.16421356 5,0.75 C5,0.335786438 5.33578644,7.6089797e-17 5.75,0 L8.25,0 C8.66421356,-7.6089797e-17 9,0.335786438 9,0.75 Z",
+    id: "Rectangle-393",
+    fill: "currentColor",
+    fillRule: "nonzero"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M9,4 C9,4.41421356 8.66421356,4.75 8.25,4.75 L5.75,4.75 C5.33578644,4.75 5,4.41421356 5,4 C5,3.58578644 5.33578644,3.25 5.75,3.25 L8.25,3.25 C8.66421356,3.25 9,3.58578644 9,4 Z",
+    id: "Rectangle-394",
+    fill: "currentColor",
+    fillRule: "nonzero"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M9,7.75 C9,8.16421356 8.66421356,8.5 8.25,8.5 L0.75,8.5 C0.335786438,8.5 5.07265313e-17,8.16421356 0,7.75 C-5.07265313e-17,7.33578644 0.335786438,7 0.75,7 L8.25,7 C8.66421356,7 9,7.33578644 9,7.75 Z",
+    id: "Rectangle-395",
+    fill: "currentColor",
+    fillRule: "nonzero"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M4.32842712,0.621320344 L1.32842712,0.621320344 L1.32842712,3.62132034",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeDasharray: "0,0",
+    transform: "translate(2.828427, 2.121320) rotate(-45.000000) translate(-2.828427, -2.121320) "
+  })))))))));
+}
+var ActiveContext = /*#__PURE__*/createContext(true);
+function useFocus() {
+  return useContext(ActiveContext);
+}
+function Content(props) {
+  var left = props.left,
+    children = props.children,
+    onCollapse = props.onCollapse,
+    header = props.header,
+    footer = props.footer;
+  var focused = useFocus();
+  return /*#__PURE__*/React.createElement("div", {
+    className: prefix('content')
+  }, left ? /*#__PURE__*/React.createElement(Sider, {
+    onCollapse: onCollapse
+  }, left) : null, /*#__PURE__*/React.createElement("div", {
+    className: prefix('main')
+  }, children), focused && header ? /*#__PURE__*/React.createElement(Portal, {
+    slot: SLOT_HEADER
+  }, header) : null, focused && footer ? /*#__PURE__*/React.createElement(Portal, {
+    slot: SLOT_FOOTER
+  }, footer) : null);
+}
+export default function Layout(props) {
+  var className = props.className,
+    style = props.style,
+    children = props.children,
+    _props$loading = props.loading,
+    loading = _props$loading === void 0 ? false : _props$loading,
+    header = props.header,
+    left = props.left,
+    footer = props.footer,
+    body = props.body,
+    onCollapse = props.onCollapse,
+    tabs = props.tabs,
+    activeKey = props.activeKey,
+    onTabClick = props.onTabClick;
+  var renderHeader = useCallback(function (node) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: prefix('header')
+    }, node);
+  }, []);
+  var renderFooter = useCallback(function (node) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: prefix('footer')
+    }, node);
+  }, []);
+  return /*#__PURE__*/React.createElement(Portal.Host, null, /*#__PURE__*/React.createElement("div", {
+    className: classNames(prefix(), className),
+    style: style
+  }, header ? renderHeader(header) : null, /*#__PURE__*/React.createElement(Portal.Slot, {
+    slot: SLOT_HEADER,
+    render: renderHeader
+  }), /*#__PURE__*/React.createElement("div", {
+    className: prefix('body')
+  }, tabs ? /*#__PURE__*/React.createElement(Tabs, {
+    className: prefix('tabs'),
+    activeKey: activeKey,
+    style: {
+      height: 'auto'
+    },
+    onTabClick: onTabClick,
+    items: tabs.map(function (item) {
+      return {
+        label: item.title,
+        key: item.key
+      };
+    })
+  }) : null, body || /*#__PURE__*/React.createElement(Content, {
+    onCollapse: onCollapse,
+    left: left
+  }, children)), /*#__PURE__*/React.createElement(Portal.Slot, {
+    slot: SLOT_FOOTER,
+    render: renderFooter
+  }), footer ? renderFooter(footer) : null, loading && /*#__PURE__*/React.createElement("div", {
+    className: prefix('spin')
+  }, /*#__PURE__*/React.createElement(Spin, null))));
+}
+function LayoutTabs(props) {
+  var _tabs$;
+  var _props$tabs = props.tabs,
+    tabs = _props$tabs === void 0 ? [] : _props$tabs,
+    children = props.children,
+    className = props.className,
+    activeKey = props.activeKey,
+    _onTabClick = props.onTabClick,
+    hideTabBar = props.hideTabBar,
+    restProps = _objectWithoutProperties(props, _excluded);
+  var _useState7 = useState((_tabs$ = tabs[0]) === null || _tabs$ === void 0 ? void 0 : _tabs$.key),
+    _useState8 = _slicedToArray(_useState7, 2),
+    active = _useState8[0],
+    setActive = _useState8[1];
+  var currentTab = activeKey !== null && activeKey !== void 0 ? activeKey : active;
+  return /*#__PURE__*/React.createElement(Layout, _extends({
+    className: classNames(className, prefix('tabs-wrapper'), _defineProperty({}, prefix('tabs-hide-tab-bar'), hideTabBar)),
+    body: /*#__PURE__*/React.createElement(Tabs, {
+      activeKey: currentTab,
+      onTabClick: function onTabClick(key, e) {
+        if (_onTabClick !== undefined) {
+          _onTabClick(key, e);
+        }
+        setActive(key);
+      },
+      className: prefix('tabs'),
+      renderTabBar: hideTabBar ? function () {
+        return null;
+      } : undefined,
+      items: children ? mapChildren(children, function (node, index) {
+        var _get, _get2, _get3, _get4;
+        var tab = tabs[index];
+        var key = (_get = get(node, 'key')) !== null && _get !== void 0 ? _get : tab === null || tab === void 0 ? void 0 : tab.key;
+        return {
+          label: (_get2 = get(node, ['props', 'tab'])) !== null && _get2 !== void 0 ? _get2 : tab === null || tab === void 0 ? void 0 : tab.title,
+          key: (_get3 = get(node, 'key')) !== null && _get3 !== void 0 ? _get3 : tab === null || tab === void 0 ? void 0 : tab.key,
+          forceRender: (_get4 = get(node, ['props', 'forceRender'])) !== null && _get4 !== void 0 ? _get4 : tab === null || tab === void 0 ? void 0 : tab.forceRender,
+          children: /*#__PURE__*/React.createElement(ActiveContext.Provider, {
+            value: currentTab === key
+          }, node)
+        };
+      }) : tabs.map(function (tab) {
+        return {
+          label: tab.label || tab.title,
+          key: tab.key,
+          forceRender: tab.forceRender,
+          children: /*#__PURE__*/React.createElement(ActiveContext.Provider, {
+            value: currentTab === tab.key
+          }, tab.children)
+        };
+      })
+    })
+  }, restProps));
+}
+Layout.Tabs = LayoutTabs;
+Layout.Content = Content;
+Layout.useFocus = useFocus;
+Layout.SLOT_HEADER = SLOT_HEADER;
+Layout.SLOT_FOOTER = SLOT_FOOTER;

package/es/{Layout → layout}/index.less

@@ -3,38 +3,37 @@
   display: flex;
   flex-direction: column;
   height: 100%;
-  padding: 0 @space-h;
-  background: #f2f2f2;
+  background: #fff;
+
+  .@{ant-prefix}-modal-body & {
+    margin: -@padding-md;
+    background: transparent;
+  }
 
   &-header {
-    padding: 8px 0;
-    background-color: #f2f2f2;
+    padding: @padding-md @padding-md 0;
   }
 
   &-body {
     flex: 1;
     min-height: 0;
-
-    &:first-child {
-      margin-top: 8px;
-    }
   }
 
   &-tabs {
     .fullTabs();
+
+    & > .@{ant-prefix}-tabs-nav {
+      margin: @padding-md @padding-md 0 @padding-md;
+    }
   }
 
   &-tabs-wrapper &-header {
-    padding-bottom: 0;
+    padding-bottom: 12px;
   }
 
   &-content {
     display: flex;
     height: 100%;
-    overflow: hidden;
-    background-color: #fff;
-    border-top-left-radius: 8px;
-    border-top-right-radius: 8px;
   }
 
   &-left {
@@ -64,21 +63,21 @@
       width: 17px;
       height: 100%;
       padding: 0 8px;
-      background-color: #e6e6e6;
+      background-color: @border-color-split;
       background-clip: content-box;
       cursor: col-resize;
     }
 
     &-collapse {
       position: absolute;
-      top: @space-v;
+      top: @padding-md;
       right: 0;
       z-index: 100;
       box-sizing: border-box;
-      width: 16px;
-      height: 32px;
+      width: @padding-md;
+      height: @input-height-base;
       font-size: 14px;
-      line-height: 32px;
+      line-height: @input-height-base;
       text-align: center;
       text-decoration: underline overline;
       background-color: #fff;
@@ -95,13 +94,13 @@
       }
     }
 
-    &-collapsed &-body {
-      width: 0;
-    }
-
     &-collapsed &-collapse {
       transform: rotateY(180deg);
     }
+
+    &-collapsed &-resizable {
+      display: none;
+    }
   }
 
   &-main {
@@ -111,7 +110,7 @@
     min-width: 0;
     overflow: auto;
 
-    .scrollBar(8px);
+    .scrollBar();
   }
 
   &-footer {
@@ -119,8 +118,8 @@
     align-items: center;
     justify-content: center;
     box-sizing: border-box;
-    height: 60px;
-    padding: @space-v @space-h;
+    height: 44px;
+    padding: 0 @padding-md;
     background: #fff;
     box-shadow: inset 0 1px 0 0 #dfdfdf;
   }
@@ -137,4 +136,23 @@
     justify-content: center;
     background-color: rgba(255, 255, 255, 0.5);
   }
+
+  &-main > & {
+    flex: 1;
+    min-height: 0;
+    background-color: transparent;
+  }
+
+  .@{prefixCls}-section + &&-tabs-wrapper {
+    margin-top: -@padding-md;
+  }
+
+  .@{prefixCls}-section + &:not(&-tabs-wrapper),
+  .@{prefixCls}-section + &&-tabs-hide-tab-bar {
+    margin-top: -@padding-md;
+  }
+
+  & + .@{prefixCls}-section {
+    padding-top: 0;
+  }
 }

package/es/{PageLoading → page-loading}/index.d.ts

@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { type CSSProperties } from 'react';
 declare const PageLoading: React.FC<{
     tip?: string;
+    style?: CSSProperties;
 }>;
 export default PageLoading;

package/es/{PageLoading → page-loading}/index.js

@@ -1,10 +1,12 @@
 import React from 'react';
+import { PREFIX_CLS } from "../constants";
 import { Spin } from 'antd';
-import { PREFIX_CLS } from '../constants';
 var PageLoading = function PageLoading(_ref) {
-  var tip = _ref.tip;
+  var tip = _ref.tip,
+    style = _ref.style;
   return /*#__PURE__*/React.createElement("div", {
-    className: "".concat(PREFIX_CLS, "-page-loading")
+    className: "".concat(PREFIX_CLS, "-page-loading"),
+    style: style
   }, /*#__PURE__*/React.createElement(Spin, {
     size: "large",
     tip: tip

package/es/popup/index.d.ts

@@ -0,0 +1,80 @@
+import type { ReactElement, ReactNode } from 'react';
+import type { ModalProps } from 'antd/lib/modal';
+export interface BasePopupProps {
+    allowClear?: boolean;
+    disabled?: boolean;
+    showLabel?: boolean;
+    placeholder?: string;
+    /**
+     * @deprecated
+     * 请使用beforeOpen
+     */
+    disabledTip?: string;
+    bordered?: boolean;
+    /**
+     * @description 是否仅作为受控的Modal使用
+     * 当作为modal使用，请不要传入onOk方法，通过open以及onCancel来控制Modal是否显示
+     */
+    modal?: boolean;
+    /**
+     * @description 受控open
+     */
+    open?: boolean;
+    readOnly?: boolean;
+    /**
+     *
+     * @description 非modal模式，打开Modal之前
+     */
+    beforeOpen?: () => boolean | Promise<boolean>;
+    autoFocus?: boolean;
+    onCancel?: () => void;
+    onOpenChange?: (visible: boolean) => void;
+    /**
+     * 是否在完全关闭popup之后触发onChange，
+     * @returns
+     */
+    triggerChangeAfterClose?: boolean;
+    onClick?: () => void;
+}
+export interface PopupProps<ValueType> extends BasePopupProps, Omit<ModalProps, 'children' | 'onCancel' | 'afterClose'> {
+    value?: ValueType;
+    onChange?: (value?: ValueType) => void;
+    /**
+     * @description  渲染函数，这个函数不是作为组件渲染的，偷懒可以直接传入组件，如果需要考虑优化参考demo的传入方式
+     */
+    component: (params: {
+        value?: ValueType;
+        onChange: (value: ValueType, closePopup?: boolean) => void;
+        readOnly?: boolean;
+    }) => ReactElement | null;
+    formatLabel?: (value: ValueType) => string;
+    /**
+     * @deprecated
+     */
+    beforeOk?: (value: ValueType) => ValueType | PromiseLike<ValueType>;
+    /**
+     * @description 确认事件之前校验
+     */
+    beforeOkCheck?: (value?: ValueType) => boolean | PromiseLike<boolean>;
+    children?: ReactElement | null | ((props: {
+        value?: ValueType;
+        disabled?: boolean;
+        readOnly?: boolean;
+    }) => ReactElement | null);
+    /**
+     * @description 清空后的值
+     */
+    emptyValue?: ValueType;
+    renderFooter?: (params: {
+        onOk: () => void;
+        onCancel: () => void;
+    }) => ReactNode;
+}
+interface ValuedPopupProps<ValueType> extends Omit<PopupProps<ValueType>, 'onChange' | 'emptyValue' | 'beforeOkCheck'> {
+    onChange?: (value: ValueType) => void;
+    emptyValue: ValueType;
+    beforeOkCheck?: (value: ValueType) => boolean | PromiseLike<boolean>;
+}
+declare function Popup<ValueType>(props: ValuedPopupProps<ValueType>): JSX.Element;
+declare function Popup<ValueType>(props: PopupProps<ValueType>): JSX.Element;
+export default Popup;