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

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

@@ -13,7 +13,8 @@ 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;
+    collapsedAside = _useProps.collapsedAside,
+    collapsedAsideMini = _useProps.collapsedAsideMini;
   var collapsed = (0, _model.useCollapsed)();
   return collapsedAside ? /*#__PURE__*/_react.default.createElement(_styles.ScCSSTransition, {
     nodeRef: collapseAsideRef,
@@ -23,6 +24,8 @@ function CollapseAside() {
     mountOnEnter: true,
     unmountOnExit: true
   }, /*#__PURE__*/_react.default.createElement(_styles.ScCollapseAsideWrap, {
-    ref: collapseAsideRef
+    ref: collapseAsideRef,
+    $collapsed: collapsed,
+    $collapsedAsideMini: !!collapsedAsideMini
   }, collapsedAside)) : null;
 }

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

@@ -33,4 +33,8 @@ 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;"]);
+})(["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;"]);
+});

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

@@ -22,14 +22,18 @@ function PanelToggle() {
     isHovered = _useState2[0],
     setIsHovered = _useState2[1];
   var _useProps = (0, _model.useProps)(),
-    collapsedAside = _useProps.collapsedAside;
+    collapsedAside = _useProps.collapsedAside,
+    collapsedAsideMini = _useProps.collapsedAsideMini;
   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, null, /*#__PURE__*/_react.default.createElement(_consoleBaseRcTooltip.TooltipV1, {
+  return /*#__PURE__*/_react.default.createElement(_styles.ScCollapseToggleWrap, {
+    $collapsed: collapsed,
+    $collapsedAsideMini: !!collapsedAsideMini
+  }, /*#__PURE__*/_react.default.createElement(_consoleBaseRcTooltip.TooltipV1, {
     title: title,
     placement: "left",
     destroyTooltipOnHide: true,

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

@@ -13,27 +13,31 @@ 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);
+})(["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;"]);
+});
 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 (_ref) {
-  var $collapsed = _ref.$collapsed,
-    $collapsedAside = _ref.$collapsedAside,
-    $hovered = _ref.$hovered;
+})(["transform:translateX(0);transition:transform 250ms ease-in-out 0ms;", ""], function (_ref2) {
+  var $collapsed = _ref2.$collapsed,
+    $collapsedAside = _ref2.$collapsedAside,
+    $hovered = _ref2.$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 (_ref2) {
-  var $collapsed = _ref2.$collapsed;
+})(["", " ", ""], function (_ref3) {
+  var $collapsed = _ref3.$collapsed;
   return $collapsed && collapsedStyles;
-}, function (_ref3) {
-  var $collapsed = _ref3.$collapsed,
-    $collapsedAside = _ref3.$collapsedAside,
-    $hovered = _ref3.$hovered;
+}, function (_ref4) {
+  var $collapsed = _ref4.$collapsed,
+    $collapsedAside = _ref4.$collapsedAside,
+    $hovered = _ref4.$hovered;
   return $collapsed && !$collapsedAside && !$hovered && nonSimpleCnPadding;
 });

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

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

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

@@ -1,4 +1,4 @@
-import styled, { keyframes } from 'styled-components';
+import styled, { css, 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,4 +24,8 @@ 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;"]);
+})(["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;"]);
+});

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

@@ -12,14 +12,18 @@ export default function PanelToggle() {
     isHovered = _useState2[0],
     setIsHovered = _useState2[1];
   var _useProps = useProps(),
-    collapsedAside = _useProps.collapsedAside;
+    collapsedAside = _useProps.collapsedAside,
+    collapsedAsideMini = _useProps.collapsedAsideMini;
   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, null, /*#__PURE__*/React.createElement(TooltipV1, {
+  return /*#__PURE__*/React.createElement(ScCollapseToggleWrap, {
+    $collapsed: collapsed,
+    $collapsedAsideMini: !!collapsedAsideMini
+  }, /*#__PURE__*/React.createElement(TooltipV1, {
     title: title,
     placement: "left",
     destroyTooltipOnHide: true,

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

@@ -4,27 +4,31 @@ 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);
+})(["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;"]);
+});
 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 (_ref) {
-  var $collapsed = _ref.$collapsed,
-    $collapsedAside = _ref.$collapsedAside,
-    $hovered = _ref.$hovered;
+})(["transform:translateX(0);transition:transform 250ms ease-in-out 0ms;", ""], function (_ref2) {
+  var $collapsed = _ref2.$collapsed,
+    $collapsedAside = _ref2.$collapsedAside,
+    $hovered = _ref2.$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 (_ref2) {
-  var $collapsed = _ref2.$collapsed;
+})(["", " ", ""], function (_ref3) {
+  var $collapsed = _ref3.$collapsed;
   return $collapsed && collapsedStyles;
-}, function (_ref3) {
-  var $collapsed = _ref3.$collapsed,
-    $collapsedAside = _ref3.$collapsedAside,
-    $hovered = _ref3.$hovered;
+}, function (_ref4) {
+  var $collapsed = _ref4.$collapsed,
+    $collapsedAside = _ref4.$collapsedAside,
+    $hovered = _ref4.$hovered;
   return $collapsed && !$collapsedAside && !$hovered && nonSimpleCnPadding;
 });

package/build/types/model/types/props.d.ts

@@ -26,6 +26,10 @@ export interface IModelProps {
      * 位于折叠点【推入按钮】上部的内容，将会跟随推入按钮做出入运动，嵌入 sidePanel 后，它将会隐藏
      */
     collapsedAside?: JSX.Element | null;
+    /**
+     * collapsedAside 开启 mini 形态
+     */
+    collapsedAsideMini?: boolean;
     /**
      * 给一个 DOM 节点，组件会监测它的滚动情况，并判断是否展示快速置顶按钮
      */

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

@@ -1,3 +1,6 @@
 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, {}, never>;
+export declare const ScCollapseAsideWrap: import("styled-components").StyledComponent<"div", any, {
+    $collapsedAsideMini: boolean;
+    $collapsed: boolean;
+}, never>;

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

@@ -4,7 +4,10 @@ interface IScProps {
     $collapsedAside: boolean;
     $hovered: boolean;
 }
-export declare const ScCollapseToggleWrap: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ScCollapseToggleWrap: import("styled-components").StyledComponent<"div", any, {
+    $collapsedAsideMini: boolean;
+    $collapsed: boolean;
+}, 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.18",
+  "version": "1.1.19",
   "description": "ConsoleBase 组件 - 右侧边栏",
   "license": "MIT",
   "sideEffects": false,