@alicloud/console-base-rc-side-panel 1.1.19 → 1.1.21

package/build/cjs/ui/index.js

@@ -22,11 +22,24 @@ var ScAside = _styledComponents.default.aside.withConfig({
   var $collapsed = _ref.$collapsed;
   return $collapsed ? (0, _styledComponents.css)(["transform:translateX(101%);border:none !important;"]) : _consoleBaseTheme.mixinBorderTertiaryLeft;
 }, _consoleBaseTheme.SIZE.HEIGHT_TOP_NAV);
+var ScCollapseAsideWrapper = _styledComponents.default.div.withConfig({
+  componentId: "sc-1ok6knf-1"
+})(["", ""], function (_ref2) {
+  var $collapsedAsideMini = _ref2.$collapsedAsideMini,
+    $collapsed = _ref2.$collapsed;
+  return $collapsedAsideMini && $collapsed && (0, _styledComponents.css)(["transform:scale(0.7) translateX(10%);"]);
+});
 function Ui() {
   var visible = (0, _model.useVisible)();
+  var _useProps = (0, _model.useProps)(),
+    collapsedAsideMini = _useProps.collapsedAsideMini;
   var collapsed = (0, _model.useCollapsed)();
   return visible ? /*#__PURE__*/_react.default.createElement(ScAside, (0, _defineProperty2.default)({
     $collapsed: collapsed,
-    className: 'J_fixed_right_will_be_pushed_left'
-  }, _const.DATA_KEY_J, ''), /*#__PURE__*/_react.default.createElement(_rc.GlobalStyleOnBody, null), /*#__PURE__*/_react.default.createElement(_rcContainer.ItemsTop, null), /*#__PURE__*/_react.default.createElement(_rcContainer.ItemsBottom, null), /*#__PURE__*/_react.default.createElement(_rcContainer.CollapseAside, null), /*#__PURE__*/_react.default.createElement(_rcContainer.CollapseToggle, null)) : null;
+    className: 'J_fixed_right_will_be_pushed_left',
+    'data-spm': 'console-base_side-panel'
+  }, _const.DATA_KEY_J, ''), /*#__PURE__*/_react.default.createElement(_rc.GlobalStyleOnBody, null), /*#__PURE__*/_react.default.createElement(_rcContainer.ItemsTop, null), /*#__PURE__*/_react.default.createElement(_rcContainer.ItemsBottom, null), /*#__PURE__*/_react.default.createElement(ScCollapseAsideWrapper, {
+    $collapsedAsideMini: !!collapsedAsideMini,
+    $collapsed: collapsed
+  }, /*#__PURE__*/_react.default.createElement(_rcContainer.CollapseAside, null), /*#__PURE__*/_react.default.createElement(_rcContainer.CollapseToggle, null))) : null;
 }

package/build/cjs/ui/rc-container/collapse-aside/index.js

@@ -13,8 +13,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 function CollapseAside() {
   var collapseAsideRef = (0, _react.useRef)(null);
   var _useProps = (0, _model.useProps)(),
-    collapsedAside = _useProps.collapsedAside,
-    collapsedAsideMini = _useProps.collapsedAsideMini;
+    collapsedAside = _useProps.collapsedAside;
   var collapsed = (0, _model.useCollapsed)();
   return collapsedAside ? /*#__PURE__*/_react.default.createElement(_styles.ScCSSTransition, {
     nodeRef: collapseAsideRef,
@@ -25,7 +24,6 @@ function CollapseAside() {
     unmountOnExit: true
   }, /*#__PURE__*/_react.default.createElement(_styles.ScCollapseAsideWrap, {
     ref: collapseAsideRef,
-    $collapsed: collapsed,
-    $collapsedAsideMini: !!collapsedAsideMini
+    "data-spm-click": "gostr=/aliyun;locaid=dcollapsed-aside"
   }, collapsedAside)) : null;
 }

package/build/cjs/ui/rc-container/collapse-aside/styles.js

@@ -33,8 +33,4 @@ var ScCSSTransition = exports.ScCSSTransition = (0, _styledComponents.default)(_
 }, KfZoomBigIn);
 var ScCollapseAsideWrap = exports.ScCollapseAsideWrap = _styledComponents.default.div.withConfig({
   componentId: "sc-1slnea7-1"
-})(["position:absolute;right:100%;bottom:50px;margin-right:10px;", ""], function (_ref7) {
-  var $collapsedAsideMini = _ref7.$collapsedAsideMini,
-    $collapsed = _ref7.$collapsed;
-  return $collapsedAsideMini && $collapsed && (0, _styledComponents.css)(["transform:scale(0.7) translateX(70%);transform-origin:bottom right;"]);
-});
+})(["position:absolute;right:100%;bottom:50px;margin-right:10px;"]);

package/build/cjs/ui/rc-container/collapse-toggle/index.js

@@ -22,18 +22,14 @@ function PanelToggle() {
     isHovered = _useState2[0],
     setIsHovered = _useState2[1];
   var _useProps = (0, _model.useProps)(),
-    collapsedAside = _useProps.collapsedAside,
-    collapsedAsideMini = _useProps.collapsedAsideMini;
+    collapsedAside = _useProps.collapsedAside;
   var collapsed = (0, _model.useCollapsed)();
   var unread = (0, _model.useItemsTop)().some(function (v) {
     return v.unread;
   });
   var handleToggleCollapsed = (0, _model.useHandleCollapsedChange)();
   var title = (0, _intl.default)(collapsed ? 'op:toggle_visible' : 'op:toggle_hidden');
-  return /*#__PURE__*/_react.default.createElement(_styles.ScCollapseToggleWrap, {
-    $collapsed: collapsed,
-    $collapsedAsideMini: !!collapsedAsideMini
-  }, /*#__PURE__*/_react.default.createElement(_consoleBaseRcTooltip.TooltipV1, {
+  return /*#__PURE__*/_react.default.createElement(_styles.ScCollapseToggleWrap, null, /*#__PURE__*/_react.default.createElement(_consoleBaseRcTooltip.TooltipV1, {
     title: title,
     placement: "left",
     destroyTooltipOnHide: true,
@@ -41,7 +37,8 @@ function PanelToggle() {
     mouseEnterDelay: !collapsedAside && collapsed ? 250 : 0,
     overlayStyle: {
       marginLeft: '8px'
-    }
+    },
+    spm: "console-base_side-panel"
   }, /*#__PURE__*/_react.default.createElement(_styles.ScCollapseToggle, {
     $hovered: isHovered,
     $collapsed: collapsed,
@@ -53,6 +50,7 @@ function PanelToggle() {
       return setIsHovered(false);
     }
   }, /*#__PURE__*/_react.default.createElement(_styles.ScCollapseToggleButton, {
+    spm: collapsed ? 'collapse-visible' : 'collapse-hidden',
     title: title,
     icon: /*#__PURE__*/_react.default.createElement(_consoleBaseRcIcon.default, {
       type: "angle-right",

package/build/cjs/ui/rc-container/collapse-toggle/styles.js

@@ -13,31 +13,27 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var ScCollapseToggleWrap = exports.ScCollapseToggleWrap = _styledComponents.default.div.withConfig({
   componentId: "sc-xm41v7-0"
-})(["position:absolute;right:0;bottom:", "px;", ""], _const.SPACING_Y, function (_ref) {
-  var $collapsedAsideMini = _ref.$collapsedAsideMini,
-    $collapsed = _ref.$collapsed;
-  return $collapsedAsideMini && $collapsed && (0, _styledComponents.css)(["transform:scale(0.7) translateX(35%);transform-origin:top left;"]);
-});
+})(["position:absolute;right:0;bottom:", "px;"], _const.SPACING_Y);
 var cssToggleIn = (0, _styledComponents.css)(["transform:translateX(-101%);"]);
 var cssToggleOut = (0, _styledComponents.css)(["transform:translateX(-50.5%);"]);
 var ScCollapseToggle = exports.ScCollapseToggle = (0, _styledComponents.default)(_rc.SidePanelItemWrap).withConfig({
   componentId: "sc-xm41v7-1"
-})(["transform:translateX(0);transition:transform 250ms ease-in-out 0ms;", ""], function (_ref2) {
-  var $collapsed = _ref2.$collapsed,
-    $collapsedAside = _ref2.$collapsedAside,
-    $hovered = _ref2.$hovered;
+})(["transform:translateX(0);transition:transform 250ms ease-in-out 0ms;", ""], function (_ref) {
+  var $collapsed = _ref.$collapsed,
+    $collapsedAside = _ref.$collapsedAside,
+    $hovered = _ref.$hovered;
   return $collapsed && ($collapsedAside || $hovered ? cssToggleIn : cssToggleOut);
 });
 var collapsedStyles = (0, _styledComponents.css)(["&,&:hover{", " ", "}"], _consoleBaseTheme.mixinBgAccent, _consoleBaseTheme.mixinTextWhite);
 var nonSimpleCnPadding = (0, _styledComponents.css)(["padding-left:4px;text-align:left;"]);
 var ScCollapseToggleButton = exports.ScCollapseToggleButton = (0, _styledComponents.default)(_rc.SidePanelItemButton).withConfig({
   componentId: "sc-xm41v7-2"
-})(["", " ", ""], function (_ref3) {
-  var $collapsed = _ref3.$collapsed;
+})(["", " ", ""], function (_ref2) {
+  var $collapsed = _ref2.$collapsed;
   return $collapsed && collapsedStyles;
-}, function (_ref4) {
-  var $collapsed = _ref4.$collapsed,
-    $collapsedAside = _ref4.$collapsedAside,
-    $hovered = _ref4.$hovered;
+}, function (_ref3) {
+  var $collapsed = _ref3.$collapsed,
+    $collapsedAside = _ref3.$collapsedAside,
+    $hovered = _ref3.$hovered;
   return $collapsed && !$collapsedAside && !$hovered && nonSimpleCnPadding;
 });

package/build/cjs/ui/rc-container/item/index.js

@@ -88,7 +88,8 @@ var Item = function Item(_ref) {
     }) : tooltip || title,
     destroyTooltipOnHide: true,
     placement: "left",
-    fixed: true
+    fixed: true,
+    spm: "console-base_side-panel"
   }, tooltipOptions, {
     overlayStyle: _objectSpread({
       marginLeft: '8px'

package/build/cjs/ui/rc-container/quick-top/index.js

@@ -21,7 +21,8 @@ function QuickTop() {
     fixed: true,
     overlayStyle: {
       marginLeft: '8px'
-    }
+    },
+    spm: "console-base_side-panel"
   }, /*#__PURE__*/_react.default.createElement(_rc.SidePanelItemWrap, null, /*#__PURE__*/_react.default.createElement(_rc.SidePanelItemButton, {
     title: title,
     icon: /*#__PURE__*/_react.default.createElement(_consoleBaseRcIcon.default, {

package/build/esm/ui/index.js

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import React from 'react';
 import styled, { css } from 'styled-components';
 import { SIZE, Z_INDEX, mixinBgPrimary, mixinBorderTertiaryLeft } from '@alicloud/console-base-theme';
-import { useVisible, useCollapsed } from '../model';
+import { useVisible, useCollapsed, useProps } from '../model';
 import { SIZE_BUTTON_WRAP_HEIGHT, SPACING_Y, DATA_KEY_J } from './const';
 import { GlobalStyleOnBody } from './rc';
 import { ItemsTop, ItemsBottom, CollapseToggle, CollapseAside } from './rc-container';
@@ -12,11 +12,24 @@ var ScAside = styled.aside.withConfig({
   var $collapsed = _ref.$collapsed;
   return $collapsed ? css(["transform:translateX(101%);border:none !important;"]) : mixinBorderTertiaryLeft;
 }, SIZE.HEIGHT_TOP_NAV);
+var ScCollapseAsideWrapper = styled.div.withConfig({
+  componentId: "sc-1ok6knf-1"
+})(["", ""], function (_ref2) {
+  var $collapsedAsideMini = _ref2.$collapsedAsideMini,
+    $collapsed = _ref2.$collapsed;
+  return $collapsedAsideMini && $collapsed && css(["transform:scale(0.7) translateX(10%);"]);
+});
 export default function Ui() {
   var visible = useVisible();
+  var _useProps = useProps(),
+    collapsedAsideMini = _useProps.collapsedAsideMini;
   var collapsed = useCollapsed();
   return visible ? /*#__PURE__*/React.createElement(ScAside, _defineProperty({
     $collapsed: collapsed,
-    className: 'J_fixed_right_will_be_pushed_left'
-  }, DATA_KEY_J, ''), /*#__PURE__*/React.createElement(GlobalStyleOnBody, null), /*#__PURE__*/React.createElement(ItemsTop, null), /*#__PURE__*/React.createElement(ItemsBottom, null), /*#__PURE__*/React.createElement(CollapseAside, null), /*#__PURE__*/React.createElement(CollapseToggle, null)) : null;
+    className: 'J_fixed_right_will_be_pushed_left',
+    'data-spm': 'console-base_side-panel'
+  }, DATA_KEY_J, ''), /*#__PURE__*/React.createElement(GlobalStyleOnBody, null), /*#__PURE__*/React.createElement(ItemsTop, null), /*#__PURE__*/React.createElement(ItemsBottom, null), /*#__PURE__*/React.createElement(ScCollapseAsideWrapper, {
+    $collapsedAsideMini: !!collapsedAsideMini,
+    $collapsed: collapsed
+  }, /*#__PURE__*/React.createElement(CollapseAside, null), /*#__PURE__*/React.createElement(CollapseToggle, null))) : null;
 }

package/build/esm/ui/rc-container/collapse-aside/index.js

@@ -4,8 +4,7 @@ import { ScCollapseAsideWrap, ScCSSTransition } from './styles';
 export default function CollapseAside() {
   var collapseAsideRef = useRef(null);
   var _useProps = useProps(),
-    collapsedAside = _useProps.collapsedAside,
-    collapsedAsideMini = _useProps.collapsedAsideMini;
+    collapsedAside = _useProps.collapsedAside;
   var collapsed = useCollapsed();
   return collapsedAside ? /*#__PURE__*/React.createElement(ScCSSTransition, {
     nodeRef: collapseAsideRef,
@@ -16,7 +15,6 @@ export default function CollapseAside() {
     unmountOnExit: true
   }, /*#__PURE__*/React.createElement(ScCollapseAsideWrap, {
     ref: collapseAsideRef,
-    $collapsed: collapsed,
-    $collapsedAsideMini: !!collapsedAsideMini
+    "data-spm-click": "gostr=/aliyun;locaid=dcollapsed-aside"
   }, collapsedAside)) : null;
 }

package/build/esm/ui/rc-container/collapse-aside/styles.js

@@ -1,4 +1,4 @@
-import styled, { css, keyframes } from 'styled-components';
+import styled, { keyframes } from 'styled-components';
 import { CSSTransition } from 'react-transition-group';
 var KfZoomBigIn = keyframes(["0%{transform:scale(0);opacity:0;}100%{transform:scale(1);opacity:1;}"]);
 export var ScCSSTransition = styled(CSSTransition).withConfig({
@@ -24,8 +24,4 @@ export var ScCSSTransition = styled(CSSTransition).withConfig({
 }, KfZoomBigIn);
 export var ScCollapseAsideWrap = styled.div.withConfig({
   componentId: "sc-1slnea7-1"
-})(["position:absolute;right:100%;bottom:50px;margin-right:10px;", ""], function (_ref7) {
-  var $collapsedAsideMini = _ref7.$collapsedAsideMini,
-    $collapsed = _ref7.$collapsed;
-  return $collapsedAsideMini && $collapsed && css(["transform:scale(0.7) translateX(70%);transform-origin:bottom right;"]);
-});
+})(["position:absolute;right:100%;bottom:50px;margin-right:10px;"]);

package/build/esm/ui/rc-container/collapse-toggle/index.js

@@ -12,18 +12,14 @@ export default function PanelToggle() {
     isHovered = _useState2[0],
     setIsHovered = _useState2[1];
   var _useProps = useProps(),
-    collapsedAside = _useProps.collapsedAside,
-    collapsedAsideMini = _useProps.collapsedAsideMini;
+    collapsedAside = _useProps.collapsedAside;
   var collapsed = useCollapsed();
   var unread = useItemsTop().some(function (v) {
     return v.unread;
   });
   var handleToggleCollapsed = useHandleCollapsedChange();
   var title = intl(collapsed ? 'op:toggle_visible' : 'op:toggle_hidden');
-  return /*#__PURE__*/React.createElement(ScCollapseToggleWrap, {
-    $collapsed: collapsed,
-    $collapsedAsideMini: !!collapsedAsideMini
-  }, /*#__PURE__*/React.createElement(TooltipV1, {
+  return /*#__PURE__*/React.createElement(ScCollapseToggleWrap, null, /*#__PURE__*/React.createElement(TooltipV1, {
     title: title,
     placement: "left",
     destroyTooltipOnHide: true,
@@ -31,7 +27,8 @@ export default function PanelToggle() {
     mouseEnterDelay: !collapsedAside && collapsed ? 250 : 0,
     overlayStyle: {
       marginLeft: '8px'
-    }
+    },
+    spm: "console-base_side-panel"
   }, /*#__PURE__*/React.createElement(ScCollapseToggle, {
     $hovered: isHovered,
     $collapsed: collapsed,
@@ -43,6 +40,7 @@ export default function PanelToggle() {
       return setIsHovered(false);
     }
   }, /*#__PURE__*/React.createElement(ScCollapseToggleButton, {
+    spm: collapsed ? 'collapse-visible' : 'collapse-hidden',
     title: title,
     icon: /*#__PURE__*/React.createElement(Icon, {
       type: "angle-right",

package/build/esm/ui/rc-container/collapse-toggle/styles.js

@@ -4,31 +4,27 @@ import { SidePanelItemWrap, SidePanelItemButton } from '../../rc';
 import { SPACING_Y } from '../../const';
 export var ScCollapseToggleWrap = styled.div.withConfig({
   componentId: "sc-xm41v7-0"
-})(["position:absolute;right:0;bottom:", "px;", ""], SPACING_Y, function (_ref) {
-  var $collapsedAsideMini = _ref.$collapsedAsideMini,
-    $collapsed = _ref.$collapsed;
-  return $collapsedAsideMini && $collapsed && css(["transform:scale(0.7) translateX(35%);transform-origin:top left;"]);
-});
+})(["position:absolute;right:0;bottom:", "px;"], SPACING_Y);
 var cssToggleIn = css(["transform:translateX(-101%);"]);
 var cssToggleOut = css(["transform:translateX(-50.5%);"]);
 export var ScCollapseToggle = styled(SidePanelItemWrap).withConfig({
   componentId: "sc-xm41v7-1"
-})(["transform:translateX(0);transition:transform 250ms ease-in-out 0ms;", ""], function (_ref2) {
-  var $collapsed = _ref2.$collapsed,
-    $collapsedAside = _ref2.$collapsedAside,
-    $hovered = _ref2.$hovered;
+})(["transform:translateX(0);transition:transform 250ms ease-in-out 0ms;", ""], function (_ref) {
+  var $collapsed = _ref.$collapsed,
+    $collapsedAside = _ref.$collapsedAside,
+    $hovered = _ref.$hovered;
   return $collapsed && ($collapsedAside || $hovered ? cssToggleIn : cssToggleOut);
 });
 var collapsedStyles = css(["&,&:hover{", " ", "}"], mixinBgAccent, mixinTextWhite);
 var nonSimpleCnPadding = css(["padding-left:4px;text-align:left;"]);
 export var ScCollapseToggleButton = styled(SidePanelItemButton).withConfig({
   componentId: "sc-xm41v7-2"
-})(["", " ", ""], function (_ref3) {
-  var $collapsed = _ref3.$collapsed;
+})(["", " ", ""], function (_ref2) {
+  var $collapsed = _ref2.$collapsed;
   return $collapsed && collapsedStyles;
-}, function (_ref4) {
-  var $collapsed = _ref4.$collapsed,
-    $collapsedAside = _ref4.$collapsedAside,
-    $hovered = _ref4.$hovered;
+}, function (_ref3) {
+  var $collapsed = _ref3.$collapsed,
+    $collapsedAside = _ref3.$collapsedAside,
+    $hovered = _ref3.$hovered;
   return $collapsed && !$collapsedAside && !$hovered && nonSimpleCnPadding;
 });

package/build/esm/ui/rc-container/item/index.js

@@ -78,7 +78,8 @@ var Item = function Item(_ref) {
     }) : tooltip || title,
     destroyTooltipOnHide: true,
     placement: "left",
-    fixed: true
+    fixed: true,
+    spm: "console-base_side-panel"
   }, tooltipOptions, {
     overlayStyle: _objectSpread({
       marginLeft: '8px'

package/build/esm/ui/rc-container/quick-top/index.js

@@ -14,7 +14,8 @@ export default function QuickTop() {
     fixed: true,
     overlayStyle: {
       marginLeft: '8px'
-    }
+    },
+    spm: "console-base_side-panel"
   }, /*#__PURE__*/React.createElement(SidePanelItemWrap, null, /*#__PURE__*/React.createElement(SidePanelItemButton, {
     title: title,
     icon: /*#__PURE__*/React.createElement(Icon, {

package/build/types/ui/rc-container/collapse-aside/styles.d.ts

@@ -1,6 +1,3 @@
 import { CSSTransition } from 'react-transition-group';
 export declare const ScCSSTransition: import("styled-components").StyledComponent<typeof CSSTransition, any, {}, never>;
-export declare const ScCollapseAsideWrap: import("styled-components").StyledComponent<"div", any, {
-    $collapsedAsideMini: boolean;
-    $collapsed: boolean;
-}, never>;
+export declare const ScCollapseAsideWrap: import("styled-components").StyledComponent<"div", any, {}, never>;

package/build/types/ui/rc-container/collapse-toggle/styles.d.ts

@@ -4,10 +4,7 @@ interface IScProps {
     $collapsedAside: boolean;
     $hovered: boolean;
 }
-export declare const ScCollapseToggleWrap: import("styled-components").StyledComponent<"div", any, {
-    $collapsedAsideMini: boolean;
-    $collapsed: boolean;
-}, never>;
+export declare const ScCollapseToggleWrap: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ScCollapseToggle: import("styled-components").StyledComponent<"div", any, IScProps, never>;
 export declare const ScCollapseToggleButton: import("styled-components").StyledComponent<typeof SidePanelItemButton, any, IScProps, never>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alicloud/console-base-rc-side-panel",
-  "version": "1.1.19",
+  "version": "1.1.21",
   "description": "ConsoleBase 组件 - 右侧边栏",
   "license": "MIT",
   "sideEffects": false,
@@ -43,7 +43,7 @@
     "@alicloud/console-base-rc-html-trusted": "^1.0.5",
     "@alicloud/console-base-rc-icon": "^1.10.6",
     "@alicloud/console-base-rc-marks": "^1.8.3",
-    "@alicloud/console-base-rc-tooltip": "^1.1.21",
+    "@alicloud/console-base-rc-tooltip": "^1.1.22",
     "@alicloud/console-base-theme": "^1.9.7",
     "@alicloud/console-base-theme-sc-base": "^1.6.4",
     "@alicloud/mere-dom": "^1.8.0",