shineout 3.1.4 → 3.2.0-rc.1

package/cjs/index.js

@@ -476,5 +476,5 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 // 此文件由脚本自动生成，请勿直接修改。
 // This file was generated automatically by a script. Please do not modify it directly.
 var _default = exports.default = {
-  version: '3.1.4'
+  version: '3.2.0-rc.1'
 };

package/dist/shineout.js

@@ -11949,7 +11949,7 @@ var handleStyle = function handleStyle(style) {
 };
 /* harmony default export */ var jss_style_handleStyle = (handleStyle);
 ;// CONCATENATED MODULE: ../shineout-style/src/version.ts
-/* harmony default export */ var version = ('3.1.4');
+/* harmony default export */ var version = ('3.2.0-rc.1');
 ;// CONCATENATED MODULE: ../shineout-style/src/jss-style/index.tsx
 
 
@@ -13544,6 +13544,11 @@ var menuTokens = {
   menuFontSize: 'Font-14',
   menuFontColor: 'Neutral-text-5',
   menuIconColor: 'Neutral-text-4',
+  menuCollapseWidth: 'Size-20',
+  menuCollapseItemDisabledFontColor: 'Neutral-text-2',
+  menuCollapseItemDisabledBackgroundColor: 'Neutral-fill-1',
+  menuCollapseItemActiveFontColor: 'Brand-6',
+  menuCollapseItemActiveBackgroundColor: 'Neutral-fill-1',
   menuItemBackgroundColor: 'Neutral-fill-1',
   menuItemFontColor: 'Neutral-text-5',
   menuItemHoverBackgroundColor: 'Neutral-fill-2',
@@ -13553,7 +13558,7 @@ var menuTokens = {
   menuItemActiveFontColor: 'Brand-6',
   menuItemDisabledBackgroundColor: 'Neutral-fill-1',
   menuItemDisabledFontColor: 'Neutral-text-2',
-  menuTitlePaddingX: '16px',
+  menuTitlePaddingX: '13px',
   menuTitlePaddingY: '9px',
   menuExpandWidth: '46px',
   menuExpandSize: '14px',
@@ -13569,7 +13574,15 @@ var menuTokens = {
   menuDarkItemOpenBackgroundColor: 'Neutral-fill-9',
   menuDarkItemOpenFontColor: 'Neutral-text-1',
   menuDarkItemDisabledBackgroundColor: 'Neutral-fill-10',
-  menuDarkItemDisabledFontColor: 'Neutral-text-4'
+  menuDarkItemDisabledFontColor: 'Neutral-text-4',
+  menuDarkCollapseItemFontColor: 'Brand-1',
+  menuDarkCollapseItemBackgroundColor: 'Neutral-fill-9',
+  menuDarkCollapseItemActiveFontColor: 'Neutral-text-1',
+  menuDarkCollapseItemActiveBackgroundColor: 'Brand-6',
+  menuDarkCollapseItemDisabledFontColor: 'Neutral-text-4',
+  menuDarkCollapseItemDisabledBackgroundColor: 'Neutral-fill-9',
+  menuDarkCollapseItemHoverFontColor: 'Neutral-text-1',
+  menuDarkCollapseItemHoverBackgroundColor: 'Brand-9'
 };
 /* harmony default export */ var menu = (menuTokens);
 ;// CONCATENATED MODULE: ../theme/src/menu/index.ts
@@ -19235,12 +19248,20 @@ var arrow = {
 var menuStyle = {
   wrapper: {
     height: '100%',
+    transition: 'width 0.3s',
     backgroundColor: src.menuItemBackgroundColor
   },
   wrapperLight: {},
   wrapperDark: {
     backgroundColor: src.menuDarkItemBackgroundColor
   },
+  collapse: {
+    width: src.menuCollapseWidth,
+    boxSizing: 'content-box',
+    '& $root': {
+      width: src.menuCollapseWidth
+    }
+  },
   scrollbox: {
     '$wrapperVertical &': {
       overflow: 'hidden',
@@ -19349,10 +19370,87 @@ var menuStyle = {
   item: {
     listStyle: 'none',
     flexShrink: 0,
+    position: 'relative',
     '$wrapperVertical &, $wrapperHorizontal &': {
       position: 'relative'
     }
   },
+  collapseItem: {
+    // width: 40,
+    cursor: 'pointer',
+    opacity: 1,
+    height: src.menuCollapseWidth,
+    transition: 'all ease .3s',
+    color: 'inherit',
+    position: 'relative',
+    '$wrapperLight &': {
+      background: src.menuItemBackgroundColor,
+      '&:hover': {
+        background: src.menuItemHoverBackgroundColor,
+        color: src.menuItemHoverFontColor
+      }
+    },
+    '$wrapperLight $itemDisabled > &&': {
+      cursor: 'not-allowed',
+      color: src.menuCollapseItemDisabledFontColor,
+      background: src.menuCollapseItemDisabledBackgroundColor
+    },
+    '$wrapperDark $itemDisabled > &&': {
+      cursor: 'not-allowed',
+      color: src.menuDarkCollapseItemDisabledFontColor,
+      background: src.menuDarkCollapseItemDisabledBackgroundColor
+    },
+    '$wrapperDark &': {
+      color: src.menuDarkCollapseItemFontColor,
+      background: src.menuDarkCollapseItemBackgroundColor,
+      '&:hover': {
+        background: src.menuDarkCollapseItemHoverBackgroundColor,
+        color: src.menuDarkCollapseItemHoverFontColor
+      }
+    },
+    '$itemActive > &&': {
+      '$wrapperLight &': {
+        color: src.menuCollapseItemActiveFontColor,
+        background: src.menuCollapseItemActiveBackgroundColor
+      },
+      '$wrapperDark &': {
+        color: src.menuDarkCollapseItemActiveFontColor,
+        background: src.menuDarkCollapseItemActiveBackgroundColor
+      }
+    },
+    '&$collapseItemInPath': {
+      // background: token.menuItemBackgroundColor,
+      '&::after': {
+        content: '""',
+        position: 'absolute',
+        left: 0,
+        top: 0,
+        bottom: 0,
+        width: 3,
+        transition: 'all ease 0.3s',
+        backgroundColor: src.menuCollapseItemActiveFontColor
+      }
+    }
+  },
+  collapseItemInPath: {},
+  collapseItemHide: {
+    opacity: 0,
+    width: 0,
+    // height: 0,
+    // zIndex: -1,
+    position: 'absolute',
+    top: 0,
+    color: 'transparent',
+    background: 'transparent',
+    '&$collapseItemInPath': {
+      // background: token.menuItemBackgroundColor,
+      '&::after': {
+        top: 20,
+        bottom: 20,
+        backgroundColor: 'transparent'
+      }
+    }
+  },
   itemActive: {},
   itemDisabled: {},
   itemOpen: {},
@@ -19365,6 +19463,8 @@ var menuStyle = {
     alignItems: 'center',
     cursor: 'pointer',
     position: 'relative',
+    // opacity: 1,
+    transition: 'all ease 0.3s',
     '$wrapperLight &': {
       color: src.menuItemFontColor,
       backgroundColor: src.menuItemBackgroundColor,
@@ -19472,6 +19572,20 @@ var menuStyle = {
       }
     }
   },
+  itemContentHide: {
+    position: 'absolute',
+    overflow: 'hidden',
+    pointerEvents: 'none',
+    // opacity: 0,
+    visibility: 'hidden',
+    '& $title': {
+      pointerEvents: 'none',
+      whiteSpace: 'nowrap'
+    },
+    '& $menuIcon': {
+      opacity: 0
+    }
+  },
   itemContentFront: {},
   itemContentBack: {},
   title: {
@@ -19511,6 +19625,7 @@ var menuStyle = {
     },
     '& > $icon': {
       lineHeight: 1,
+      opacity: 1,
       width: src.menuExpandSize,
       height: src.menuExpandSize,
       '$wrapper:not($wrapperVertical) $itemOpen > $itemContent &': {
@@ -19526,7 +19641,9 @@ var menuStyle = {
       }
     }
   },
-  icon: {},
+  icon: {
+    transition: 'all ease 0.3s'
+  },
   expandHover: {
     '&:hover': {
       backgroundColor: src.menuExpandHoverBackgroundColor
@@ -23389,7 +23506,6 @@ var tableStyle = objectSpread2_default()(objectSpread2_default()({}, globalStyle
     position: 'relative',
     zIndex: 0,
     minHeight: 0,
-    minWidth: 0,
     fontSize: src.tableFontSize,
     '& table': {
       minWidth: '100%',
@@ -28002,7 +28118,7 @@ var src_config_config = {
   locale: processEnv.LOCALE || 'en-US',
   delay: 0,
   trim: undefined,
-  spin: 'ring',
+  spin: undefined,
   direction: 'ltr',
   popupContainer: null
 };
@@ -29074,16 +29190,15 @@ var Spin = function Spin(props) {
     width: size,
     height: size
   }, props.style);
-  var classname = classnames_default()(className, styles === null || styles === void 0 ? void 0 : styles.spin);
   if (count < 1 || !render) {
     return /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
       style: style,
-      className: classname
+      className: className
     });
   }
   return /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
     style: style,
-    className: classname,
+    className: classnames_default()(className, styles === null || styles === void 0 ? void 0 : styles.spin),
     children: base_range(count + 1, 1).map(function (i) {
       return render(objectSpread2_default()(objectSpread2_default()({}, props), {}, {
         index: i
@@ -29492,7 +29607,7 @@ var button_excluded = ["jssStyle", "className", "style", "children", "loading",
 
 
 var Button = function Button(props) {
-  var _jssStyle$button, _React$Children$map;
+  var _jssStyle$button;
   var jssStyle = props.jssStyle,
     className = props.className,
     style = props.style,
@@ -29548,12 +29663,7 @@ var Button = function Button(props) {
     }
     return 12;
   };
-  var childrenEl = (_React$Children$map = external_root_React_commonjs2_react_commonjs_react_amd_react_default().Children.map(getSpaceChildren(children, space), function (item) {
-    if (loading && /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.isValidElement)(item) && item.type.isShineoutIcon) return null;
-    return item;
-  })) === null || _React$Children$map === void 0 ? void 0 : _React$Children$map.filter(function (item) {
-    return item !== null;
-  });
+  var childrenEl = getSpaceChildren(children, space);
   var buttonInnerEl = childrenEl;
 
   // if (typeof renderInnerWrapper === 'function') {
@@ -29564,8 +29674,7 @@ var Button = function Button(props) {
     className: buttonStyle.spin,
     children: /*#__PURE__*/(0,jsx_runtime.jsx)(src_spin_spin, {
       size: getSpinSize(),
-      jssStyle: jssStyle,
-      name: "ring"
+      jssStyle: jssStyle
     })
   });
   if (renderLoading) {
@@ -50540,10 +50649,13 @@ var MenuItem = function MenuItem(props) {
   var _props$jssStyle, _props$jssStyle$menu;
   var classes = (_props$jssStyle = props.jssStyle) === null || _props$jssStyle === void 0 || (_props$jssStyle$menu = _props$jssStyle.menu) === null || _props$jssStyle$menu === void 0 ? void 0 : _props$jssStyle$menu.call(_props$jssStyle);
   var children = props.dataItem.children || [];
+  var itemContentRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
+  var timer = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
   var _props$inlineIndent = props.inlineIndent,
     inlineIndent = _props$inlineIndent === void 0 ? 24 : _props$inlineIndent,
     _props$frontCaretType = props.frontCaretType,
-    frontCaretType = _props$frontCaretType === void 0 ? 'solid' : _props$frontCaretType;
+    frontCaretType = _props$frontCaretType === void 0 ? 'solid' : _props$frontCaretType,
+    collapse = props.collapse;
   var config = useConfig();
   var hasExpandAbleChildren = children.some(function (item) {
     return item && item.children && (props.looseChildren || item.children.length);
@@ -50600,9 +50712,11 @@ var MenuItem = function MenuItem(props) {
         flexShrink: 0
       }
     }) : null;
+    var isFirstCollapseItem = collapse && props.level === 0;
     if (props.frontCaret) {
       return /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
-        className: classnames_default()(classes === null || classes === void 0 ? void 0 : classes.itemContent, classes === null || classes === void 0 ? void 0 : classes.itemContentFront),
+        ref: itemContentRef,
+        className: classnames_default()(classes === null || classes === void 0 ? void 0 : classes.itemContent, classes === null || classes === void 0 ? void 0 : classes.itemContentFront, isFirstCollapseItem && (classes === null || classes === void 0 ? void 0 : classes.itemContentHide)),
         onClick: handleItemClick,
         children: [indent, /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
           style: {
@@ -50619,7 +50733,8 @@ var MenuItem = function MenuItem(props) {
       });
     } else {
       return /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
-        className: classnames_default()(classes === null || classes === void 0 ? void 0 : classes.itemContent, classes === null || classes === void 0 ? void 0 : classes.itemContentBack),
+        ref: itemContentRef,
+        className: classnames_default()(classes === null || classes === void 0 ? void 0 : classes.itemContent, classes === null || classes === void 0 ? void 0 : classes.itemContentBack, isFirstCollapseItem && (classes === null || classes === void 0 ? void 0 : classes.itemContentHide)),
         onClick: handleItemClick,
         children: [indent, title, expandAble && /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
           onClick: handleExpandClick,
@@ -50636,12 +50751,36 @@ var MenuItem = function MenuItem(props) {
       });
     }
   };
+  var renderCollapseItem = function renderCollapseItem() {
+    if (!props.renderCollapse) return null;
+    var isFirstCollapseItem = props.level === 0 && collapse;
+    return /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+      className: classnames_default()(classes === null || classes === void 0 ? void 0 : classes.collapseItem, isInPath && (classes === null || classes === void 0 ? void 0 : classes.collapseItemInPath), !isFirstCollapseItem && (classes === null || classes === void 0 ? void 0 : classes.collapseItemHide)),
+      onClick: handleItemClick,
+      children: props.renderCollapse(props.dataItem, props.index)
+    });
+  };
+  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
+    if (!itemContentRef.current) return;
+    if (collapse === undefined) return;
+    if (timer.current) clearTimeout(timer.current);
+    itemContentRef.current.style.overflow = 'hidden';
+    itemContentRef.current.style.whiteSpace = 'nowrap';
+    timer.current = setTimeout(function () {
+      if (!itemContentRef.current) return;
+      itemContentRef.current.style.overflow = '';
+      itemContentRef.current.style.whiteSpace = '';
+    }, 300);
+    return function () {
+      if (timer.current) clearTimeout(timer.current);
+    };
+  }, [collapse]);
   return /*#__PURE__*/(0,jsx_runtime.jsxs)("li", {
     className: classnames_default()(classes === null || classes === void 0 ? void 0 : classes.item, isDisabled && (classes === null || classes === void 0 ? void 0 : classes.itemDisabled), isInPath && (classes === null || classes === void 0 ? void 0 : classes.itemInPath), isOpen && (classes === null || classes === void 0 ? void 0 : classes.itemOpen), isChecked && (classes === null || classes === void 0 ? void 0 : classes.itemActive), expandAble && (classes === null || classes === void 0 ? void 0 : classes.itemHasChildren)),
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave,
     dir: config.direction,
-    children: [renderItem(), children.length > 0 && /*#__PURE__*/(0,jsx_runtime.jsx)("ul", {
+    children: [renderItem(), renderCollapseItem(), children.length > 0 && /*#__PURE__*/(0,jsx_runtime.jsx)("ul", {
       className: classnames_default()(classes === null || classes === void 0 ? void 0 : classes.children, isUp && (classes === null || classes === void 0 ? void 0 : classes.childrenUp), hasExpandAbleChildren && (classes === null || classes === void 0 ? void 0 : classes.childrenHasExpand)),
       dir: config.direction,
       children: children.map(function (item, index) {
@@ -50872,9 +51011,11 @@ var Menu = function Menu(props) {
   var _props$data = props.data,
     data = _props$data === void 0 ? menu_emptyArray : _props$data,
     _props$mode = props.mode,
-    mode = _props$mode === void 0 ? 'inline' : _props$mode,
+    modeProps = _props$mode === void 0 ? 'inline' : _props$mode,
     _props$theme = props.theme,
-    theme = _props$theme === void 0 ? 'light' : _props$theme;
+    theme = _props$theme === void 0 ? 'light' : _props$theme,
+    collapse = props.collapse;
+  var mode = collapse ? 'vertical' : modeProps;
   var classes = (_props$jssStyle = props.jssStyle) === null || _props$jssStyle === void 0 || (_props$jssStyle$menu = _props$jssStyle.menu) === null || _props$jssStyle$menu === void 0 ? void 0 : _props$jssStyle$menu.call(_props$jssStyle);
   var isVertical = mode === 'vertical' || mode === 'vertical-auto';
   var isHorizontal = mode === 'horizontal';
@@ -50882,12 +51023,16 @@ var Menu = function Menu(props) {
     _useState2 = slicedToArray_default()(_useState, 2),
     hasOpen = _useState2[0],
     setHasOpen = _useState2[1];
+  var _useState3 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)([]),
+    _useState4 = slicedToArray_default()(_useState3, 2),
+    collapseOpenKeys = _useState4[0],
+    setCollapseOpenKeys = _useState4[1];
   var _useMenu = use_menu({
       data: data,
       active: props.active,
       defaultOpenKeys: props.defaultOpenKeys,
-      openKeys: props.openKeys,
-      onOpenChange: props.onOpenChange
+      openKeys: props.collapse ? collapseOpenKeys : props.openKeys,
+      onOpenChange: props.collapse ? setCollapseOpenKeys : props.onOpenChange
     }),
     openKeys = _useMenu.openKeys,
     onOpenChange = _useMenu.onOpenChange,
@@ -50899,7 +51044,9 @@ var Menu = function Menu(props) {
     return item && item.children && (props.looseChildren || item.children.length);
   });
   var showScrollBar = isHorizontal || isVertical;
-  var listStyle = isVertical ? {
+  var style = objectSpread2_default()({}, props.style);
+  if (collapse) delete style.width;
+  var listStyle = isVertical && !collapse ? {
     width: (_props$style = props.style) === null || _props$style === void 0 ? void 0 : _props$style.width
   } : undefined;
   (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
@@ -50913,10 +51060,10 @@ var Menu = function Menu(props) {
     }
   }, [data, openKeys]);
   return /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
-    className: classnames_default()(props.className, classes === null || classes === void 0 ? void 0 : classes.wrapper, mode === 'inline' && (classes === null || classes === void 0 ? void 0 : classes.wrapperInline), (mode === 'vertical' || mode === 'vertical-auto') && (classes === null || classes === void 0 ? void 0 : classes.wrapperVertical), mode === 'horizontal' && (classes === null || classes === void 0 ? void 0 : classes.wrapperHorizontal), hasOpen && (classes === null || classes === void 0 ? void 0 : classes.wrapperHasOpen), theme === 'dark' ? classes === null || classes === void 0 ? void 0 : classes.wrapperDark : classes === null || classes === void 0 ? void 0 : classes.wrapperLight),
+    className: classnames_default()(props.className, classes === null || classes === void 0 ? void 0 : classes.wrapper, mode === 'inline' && (classes === null || classes === void 0 ? void 0 : classes.wrapperInline), (mode === 'vertical' || mode === 'vertical-auto') && (classes === null || classes === void 0 ? void 0 : classes.wrapperVertical), mode === 'horizontal' && (classes === null || classes === void 0 ? void 0 : classes.wrapperHorizontal), hasOpen && (classes === null || classes === void 0 ? void 0 : classes.wrapperHasOpen), theme === 'dark' ? classes === null || classes === void 0 ? void 0 : classes.wrapperDark : classes === null || classes === void 0 ? void 0 : classes.wrapperLight, collapse && (classes === null || classes === void 0 ? void 0 : classes.collapse)),
     style: objectSpread2_default()({
       height: props.height
-    }, props.style),
+    }, style),
     children: [/*#__PURE__*/(0,jsx_runtime.jsx)("div", {
       className: classes === null || classes === void 0 ? void 0 : classes.scrollbox,
       ref: scrollRef,
@@ -50929,6 +51076,7 @@ var Menu = function Menu(props) {
             level: 0,
             index: index,
             parentId: "",
+            collapse: collapse,
             dataItem: item,
             keyResult: key,
             openKeys: openKeys,
@@ -50943,6 +51091,7 @@ var Menu = function Menu(props) {
             toggleDuration: props.toggleDuration,
             disabled: props.disabled,
             renderItem: props.renderItem,
+            renderCollapse: props.renderCollapse,
             keygen: props.keygen,
             jssStyle: props.jssStyle,
             linkKey: props.linkKey,
@@ -62045,7 +62194,7 @@ var upload_interface = __webpack_require__(4412);
 
 
 /* harmony default export */ var src_0 = ({
-  version: '3.1.4'
+  version: '3.2.0-rc.1'
 });
 }();
 /******/ 	return __webpack_exports__;