shineout 3.9.0-beta.6 → 3.9.0-beta.8

package/cjs/index.js

@@ -522,5 +522,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.9.0-beta.6'
+  version: '3.9.0-beta.8'
 };

package/dist/shineout.js

@@ -12386,7 +12386,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.9.0-beta.6');
+/* harmony default export */ var version = ('3.9.0-beta.8');
 ;// CONCATENATED MODULE: ../shineout-style/src/jss-style/index.tsx
 
 
@@ -14940,7 +14940,8 @@ var tabsTokens = {
   tabsActionHorizontalPaddingX: 'Spacing-7',
   tabsActionHorizontalPaddingY: 'Spacing-8',
   tabsExtraFillHoverBackgroundColor: 'Neutral-fill-3',
-  tabsArrowFontColor: 'Neutral-text-4'
+  tabsArrowFontColor: 'Neutral-text-4',
+  tabsBadgeMargin: 'Spacing-0'
 };
 /* harmony default export */ var tabs = (tabsTokens);
 ;// CONCATENATED MODULE: ../theme/src/tabs/index.ts
@@ -27538,7 +27539,6 @@ var tabsStyle = {
   },
   headerWrapper: objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()({
     display: 'flex',
-    overflow: 'hidden',
     position: 'relative',
     '&[data-soui-position^="top-"],&[data-soui-position^="bottom-"]': {
       alignItems: 'center',
@@ -27737,7 +27737,9 @@ var tabsStyle = {
     whiteSpace: 'nowrap',
     overflow: 'hidden',
     '$headerWrapper[data-soui-shape="card"] &': {
+      marginTop: "calc(-1 * ".concat(src.tabsBadgeMargin, ")"),
       '& $tab': {
+        marginTop: src.tabsBadgeMargin,
         position: 'relative',
         border: "1px solid ".concat(src.tabsCardBorderColor),
         padding: "".concat(src.tabsCardPaddingY, " ").concat(src.tabsCardPaddingX),
@@ -49438,9 +49440,11 @@ function _ReactUnmount() {
 
 
 
+
 var hasMask = false;
 var modal_content_config = {
   instanceIds: [],
+  cascadeConfigs: [],
   originDocumentStyle: null
 };
 var modal_content_state = createWithHooks(modal_content_config);
@@ -49450,11 +49454,34 @@ var useModalConfig = function useModalConfig() {
 var addModalInstance = function addModalInstance(instanceId) {
   modal_content_state.mutate.instanceIds.push(instanceId);
 };
+var addModalCascadeConfig = function addModalCascadeConfig(props) {
+  var width = props.width;
+  var widthNumber = 0;
+  // width 是30% 这种格式的，转为number
+  if (typeof width === 'string' && width.indexOf('%') > -1) {
+    var parentWidth = document.body.clientWidth;
+    var percent = parseInt(width, 10);
+    widthNumber = parentWidth * percent / 100;
+  } else {
+    widthNumber = typeof width === 'number' ? width : parseInt(width, 10) || 0;
+  }
+  modal_content_state.mutate.cascadeConfigs.push({
+    cascade: props.cascade,
+    instanceId: props.instanceId,
+    width: widthNumber
+  });
+};
 var removeModalInstance = function removeModalInstance(instanceId) {
   modal_content_state.mutate.instanceIds = modal_content_state.mutate.instanceIds.filter(function (id) {
     return id !== instanceId;
   });
 };
+var removeModalCascadeConfig = function removeModalCascadeConfig(instanceId) {
+  if (!modal_content_state.mutate.cascadeConfigs.length) return;
+  modal_content_state.mutate.cascadeConfigs = modal_content_state.mutate.cascadeConfigs.filter(function (config) {
+    return config.instanceId !== instanceId;
+  });
+};
 var getInstanceIds = function getInstanceIds() {
   return modal_content_state.mutate.instanceIds;
 };
@@ -49542,9 +49569,15 @@ var Modal = function Modal(props) {
     var index = config.instanceIds.indexOf(context.instanceId);
     if (visible && index === -1) {
       addModalInstance(context.instanceId);
+      addModalCascadeConfig({
+        instanceId: context.instanceId,
+        width: props.width,
+        cascade: !!props.cascade && !!props.width && !!isPositionX
+      });
     }
     if (!visible && index > -1 && !animation) {
       removeModalInstance(context.instanceId);
+      removeModalCascadeConfig(context.instanceId);
     }
   }, [visible, animation, config.instanceIds]);
   (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(handleMaskVisible, [visible]);
@@ -49577,6 +49610,7 @@ var Modal = function Modal(props) {
   });
   var handleClose = usePersistFn(function () {
     var _props$onClose;
+    removeModalCascadeConfig(context.instanceId);
     if (!visible) return;
     if (props.autoShow) {
       setVisible(false);
@@ -49666,6 +49700,7 @@ var Modal = function Modal(props) {
     return function () {
       var _props$shouldDestroy2;
       removeModalInstance(context.instanceId);
+      removeModalCascadeConfig(context.instanceId);
       var instanceIds = getInstanceIds();
       if (instanceIds.length === 0) {
         resetDocumentOverflow();
@@ -49759,13 +49794,28 @@ var Modal = function Modal(props) {
   };
   if (!context.renderEd && !visible) return null;
   context.renderEd = true;
+  var marginStyle = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useMemo)(function () {
+    if (!props.cascade) return;
+    var idx = config.instanceIds.findIndex(function (id) {
+      return id === context.instanceId;
+    });
+    var afterInstances = config.cascadeConfigs.filter(function (_, index) {
+      return index > idx;
+    }).filter(function (c) {
+      return c.cascade;
+    }).slice(0, 1);
+    var width = afterInstances.reduce(function (ret, cur) {
+      return (ret || 0) + cur.width;
+    }, 0);
+    return defineProperty_default()(defineProperty_default()({}, props.position === 'left' ? 'marginLeft' : 'marginRight', "".concat(width, "px")), "transition", width ? 'margin .3s ease .05s' : 'margin 0.2s ease');
+  }, [config.cascadeConfigs, config.instanceIds]);
   var panelStyle = objectSpread2_default()(objectSpread2_default()({
     transformOrigin: origin,
     top: props.fullScreen ? undefined : top
   }, props.style), {}, {
     width: props.fullScreen ? undefined : width,
     height: props.fullScreen ? undefined : height
-  });
+  }, marginStyle);
   if (props.resizable) {
     panelStyle.width = resizeInfo.width;
     panelStyle.height = resizeInfo.height;
@@ -73367,7 +73417,7 @@ var upload_interface = __webpack_require__(8821);
 
 
 /* harmony default export */ var src_0 = ({
-  version: '3.9.0-beta.6'
+  version: '3.9.0-beta.8'
 });
 }();
 /******/ 	return __webpack_exports__;