@alicloud/console-base-rc-side-panel 1.1.6-beta.0 → 1.1.7-beta.0

package/build/cjs/model/hook/index.js

@@ -40,6 +40,12 @@ Object.defineProperty(exports, "useItemsTop", {
     return _useItemsTop.default;
   }
 });
+Object.defineProperty(exports, "useProps", {
+  enumerable: true,
+  get: function get() {
+    return _useModelProps.default;
+  }
+});
 Object.defineProperty(exports, "useQuickTop", {
   enumerable: true,
   get: function get() {
@@ -52,6 +58,7 @@ Object.defineProperty(exports, "useVisible", {
     return _useVisible.default;
   }
 });
+var _useModelProps = _interopRequireDefault(require("./_use-model-props"));
 var _useChildren = _interopRequireDefault(require("./use-children"));
 var _useVisible = _interopRequireDefault(require("./use-visible"));
 var _useCollapsed = _interopRequireDefault(require("./use-collapsed"));

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

@@ -12,28 +12,49 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _consoleBaseTheme = require("@alicloud/console-base-theme");
 var _consoleBaseRcIcon = _interopRequireDefault(require("@alicloud/console-base-rc-icon"));
 var _consoleBaseRcTooltip = require("@alicloud/console-base-rc-tooltip");
+var _consoleBaseConfEnv = _interopRequireDefault(require("@alicloud/console-base-conf-env"));
+var _consoleBaseConfLocale = _interopRequireWildcard(require("@alicloud/console-base-conf-locale"));
 var _rc = require("../../rc");
 var _model = require("../../../model");
 var _const = require("../../const");
 var _intl = _interopRequireDefault(require("../../intl"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 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 isSimpleCN = function isSimpleCN() {
+  return _consoleBaseConfEnv.default.SITE === 'CN' && _consoleBaseConfLocale.default.LANGUAGE === _consoleBaseConfLocale.ELanguage.ZH;
+};
+var cssToggleIn = (0, _styledComponents.css)(["transform:translateX(-100%);"]);
 var ScCollapseToggle = (0, _styledComponents.default)(_rc.SidePanelItemWrap).withConfig({
   componentId: "sc-15z8r94-0"
-})(["position:absolute;right:0;bottom:", "px;", ""], _const.SPACING_Y, function (props) {
+})(["position:absolute;right:", ";bottom:", "px;flex-direction:column;", ""], function (props) {
+  return props.noIndent ? '0' : '8px';
+}, _const.SPACING_Y, function (props) {
   if (!props.collapsed) {
     return null;
   }
-  return props.hovered ? (0, _styledComponents.css)(["transform:translateX(-100%);"]) : (0, _styledComponents.css)(["transform:translateX(-50%);"]);
+  if (isSimpleCN()) {
+    return cssToggleIn;
+  }
+  return props.hovered ? cssToggleIn : (0, _styledComponents.css)(["transform:translateX(-50%);"]);
 });
-var ScCollapseToggleButton = (0, _styledComponents.default)(_rc.SidePanelItemButton).withConfig({
+var ScCollapseAsideDiv = _styledComponents.default.div.withConfig({
   componentId: "sc-15z8r94-1"
+})(["position:absolute;bottom:100%;user-select:none;", ""], function (props) {
+  return !props.collapsed ? (0, _styledComponents.css)(["transition:opacity 300ms ease-in,display 0s 300ms ease;opacity:0;display:none;"]) : (0, _styledComponents.css)(["transition:opacity 300ms ease-in;opacity:1;display:block;"]);
+});
+var ScCollapseToggleButton = (0, _styledComponents.default)(_rc.SidePanelItemButton).withConfig({
+  componentId: "sc-15z8r94-2"
 })(["", " ", ""], function (props) {
   return props.active ? (0, _styledComponents.css)(["", " ", " &:hover{", " ", "}"], _consoleBaseTheme.mixinBgAccent, _consoleBaseTheme.mixinTextWhite, _consoleBaseTheme.mixinBgAccent, _consoleBaseTheme.mixinTextWhite) : null;
-}, function (props) {
+}, isSimpleCN() ? null : function (props) {
   return props.collapsed && !props.hovered ? (0, _styledComponents.css)(["padding-left:4px;text-align:left;"]) : null;
 });
 function PanelToggle() {
+  var _useProps = (0, _model.useProps)(),
+    collapsedAside = _useProps.collapsedAside;
   var collapsed = (0, _model.useCollapsed)();
   var unread = (0, _model.useItemsTop)().some(function (v) {
     return v.unread;
@@ -44,16 +65,20 @@ function PanelToggle() {
     isHovered = _useState2[0],
     setIsHovered = _useState2[1];
   var title = (0, _intl.default)(collapsed ? 'op:toggle_visible' : 'op:toggle_hidden');
+  var noIndent = isSimpleCN() ? !collapsedAside || !collapsed : true;
   return /*#__PURE__*/_react.default.createElement(ScCollapseToggle, {
     hovered: isHovered,
     collapsed: collapsed,
+    noIndent: noIndent,
     onMouseEnter: function onMouseEnter() {
       return setIsHovered(true);
     },
     onMouseLeave: function onMouseLeave() {
       return setIsHovered(false);
     }
-  }, /*#__PURE__*/_react.default.createElement(_consoleBaseRcTooltip.TooltipV1, {
+  }, collapsedAside ? /*#__PURE__*/_react.default.createElement(ScCollapseAsideDiv, {
+    collapsed: collapsed
+  }, collapsedAside) : null, /*#__PURE__*/_react.default.createElement(_consoleBaseRcTooltip.TooltipV1, {
     title: title,
     placement: "left",
     mouseEnterDelay: collapsed ? 200 : 0 // 收起状态下 hover 时，需等待动画结束后再显示提示框，避免位置错误
@@ -75,6 +100,6 @@ function PanelToggle() {
     onClick: handleToggleCollapsed
   }))), collapsed && unread ? /*#__PURE__*/_react.default.createElement(_rc.SidePanelItemBadge, {
     unread: true,
-    alignLeft: !isHovered
+    alignLeft: !isHovered && !isSimpleCN()
   }) : null);
 }

package/build/esm/model/hook/index.js

@@ -1,3 +1,4 @@
+export { default as useProps } from './_use-model-props';
 export { default as useChildren } from './use-children';
 export { default as useVisible } from './use-visible';
 export { default as useCollapsed } from './use-collapsed';

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

@@ -4,26 +4,47 @@ import styled, { css } from 'styled-components';
 import { mixinBgAccent, mixinTextWhite } from '@alicloud/console-base-theme';
 import Icon from '@alicloud/console-base-rc-icon';
 import { TooltipV1 } from '@alicloud/console-base-rc-tooltip';
+import CONF_ENV from '@alicloud/console-base-conf-env';
+import CONF_LOCALE, { ELanguage } from '@alicloud/console-base-conf-locale';
 import { SidePanelItemWrap, SidePanelItemButton, SidePanelItemBadge } from '../../rc';
-import { useCollapsed, useItemsTop, useHandleCollapsedChange } from '../../../model';
+import { useCollapsed, useItemsTop, useHandleCollapsedChange, useProps } from '../../../model';
 import { SPACING_Y } from '../../const';
 import intl from '../../intl';
+/**
+ * 站点是否处于简体中文环境下，即国内站
+ */
+var isSimpleCN = function isSimpleCN() {
+  return CONF_ENV.SITE === 'CN' && CONF_LOCALE.LANGUAGE === ELanguage.ZH;
+};
+var cssToggleIn = css(["transform:translateX(-100%);"]);
 var ScCollapseToggle = styled(SidePanelItemWrap).withConfig({
   componentId: "sc-15z8r94-0"
-})(["position:absolute;right:0;bottom:", "px;", ""], SPACING_Y, function (props) {
+})(["position:absolute;right:", ";bottom:", "px;flex-direction:column;", ""], function (props) {
+  return props.noIndent ? '0' : '8px';
+}, SPACING_Y, function (props) {
   if (!props.collapsed) {
     return null;
   }
-  return props.hovered ? css(["transform:translateX(-100%);"]) : css(["transform:translateX(-50%);"]);
+  if (isSimpleCN()) {
+    return cssToggleIn;
+  }
+  return props.hovered ? cssToggleIn : css(["transform:translateX(-50%);"]);
 });
-var ScCollapseToggleButton = styled(SidePanelItemButton).withConfig({
+var ScCollapseAsideDiv = styled.div.withConfig({
   componentId: "sc-15z8r94-1"
+})(["position:absolute;bottom:100%;user-select:none;", ""], function (props) {
+  return !props.collapsed ? css(["transition:opacity 300ms ease-in,display 0s 300ms ease;opacity:0;display:none;"]) : css(["transition:opacity 300ms ease-in;opacity:1;display:block;"]);
+});
+var ScCollapseToggleButton = styled(SidePanelItemButton).withConfig({
+  componentId: "sc-15z8r94-2"
 })(["", " ", ""], function (props) {
   return props.active ? css(["", " ", " &:hover{", " ", "}"], mixinBgAccent, mixinTextWhite, mixinBgAccent, mixinTextWhite) : null;
-}, function (props) {
+}, isSimpleCN() ? null : function (props) {
   return props.collapsed && !props.hovered ? css(["padding-left:4px;text-align:left;"]) : null;
 });
 export default function PanelToggle() {
+  var _useProps = useProps(),
+    collapsedAside = _useProps.collapsedAside;
   var collapsed = useCollapsed();
   var unread = useItemsTop().some(function (v) {
     return v.unread;
@@ -34,16 +55,20 @@ export default function PanelToggle() {
     isHovered = _useState2[0],
     setIsHovered = _useState2[1];
   var title = intl(collapsed ? 'op:toggle_visible' : 'op:toggle_hidden');
+  var noIndent = isSimpleCN() ? !collapsedAside || !collapsed : true;
   return /*#__PURE__*/React.createElement(ScCollapseToggle, {
     hovered: isHovered,
     collapsed: collapsed,
+    noIndent: noIndent,
     onMouseEnter: function onMouseEnter() {
       return setIsHovered(true);
     },
     onMouseLeave: function onMouseLeave() {
       return setIsHovered(false);
     }
-  }, /*#__PURE__*/React.createElement(TooltipV1, {
+  }, collapsedAside ? /*#__PURE__*/React.createElement(ScCollapseAsideDiv, {
+    collapsed: collapsed
+  }, collapsedAside) : null, /*#__PURE__*/React.createElement(TooltipV1, {
     title: title,
     placement: "left",
     mouseEnterDelay: collapsed ? 200 : 0 // 收起状态下 hover 时，需等待动画结束后再显示提示框，避免位置错误
@@ -65,6 +90,6 @@ export default function PanelToggle() {
     onClick: handleToggleCollapsed
   }))), collapsed && unread ? /*#__PURE__*/React.createElement(SidePanelItemBadge, {
     unread: true,
-    alignLeft: !isHovered
+    alignLeft: !isHovered && !isSimpleCN()
   }) : null);
 }

package/build/types/model/context/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IModelValue } from '../types';
 declare const _default: import("react").Context<IModelValue | null>;
 export default _default;

package/build/types/model/hook/index.d.ts

@@ -1,3 +1,4 @@
+export { default as useProps } from './_use-model-props';
 export { default as useChildren } from './use-children';
 export { default as useVisible } from './use-visible';
 export { default as useCollapsed } from './use-collapsed';

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ButtonProps } from '@alicloud/console-base-rc-button';
 import { EasyIconValue } from '@alicloud/console-base-rc-easy-icon';
 import { TooltipPropsV1 } from '@alicloud/console-base-rc-tooltip';

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

@@ -22,6 +22,10 @@ export interface IModelProps {
      * 底部工具（系统级别），如果传入 children 则使用 children
      */
     itemsBottom?: ISidePanelItemPropsWithKey[];
+    /**
+     * 位于折叠点【推入按钮】上部的内容，将会跟随推入按钮做出入运动，嵌入 sidePanel 后，它将会隐藏
+     */
+    collapsedAside?: JSX.Element | null;
     /**
      * 给一个 DOM 节点，组件会监测它的滚动情况，并判断是否展示快速置顶按钮
      */

package/build/types/ui/index.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export default function Ui(): JSX.Element | null;

package/build/types/ui/rc/global-style-on-body/index.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export default function GlobalStyleOnBody(): JSX.Element;

package/build/types/ui/rc/side-panel-item-badge/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SidePanelItemProps } from '../../../model';
 interface IProps extends Pick<SidePanelItemProps, 'unread' | 'mark'> {
     alignLeft?: boolean;

package/build/types/ui/rc/side-panel-item-button/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ISidePanelItemButtonProps } from "../../types";
 /**
  * 工具的按钮

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

@@ -1,2 +1 @@
-/// <reference types="react" />
 export default function PanelToggle(): JSX.Element;

package/build/types/ui/rc-container/item/index.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { SidePanelItemProps } from '../../../model';
 export default function Item({ id, className, style, active, title, icon, unread, mark, tooltip, tooltipOptions, onlyShowIcon, onClick, onActiveChange, ...rest }: SidePanelItemProps): JSX.Element;

package/build/types/ui/rc-container/items/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SidePanelItemPropsWithKey } from '../../../model';
 interface IProps {
     items: SidePanelItemPropsWithKey[];

package/build/types/ui/rc-container/items-bottom/index.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export default function ItemsBottom(): JSX.Element | null;

package/build/types/ui/rc-container/items-bottom/quick-top/index.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export default function QuickTop(): JSX.Element;

package/build/types/ui/rc-container/items-top/index.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export default function ItemsTop(): JSX.Element;

package/build/types/with-model/index.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { ModelProps } from '../model';
 export default function WithModel(props: ModelProps): JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alicloud/console-base-rc-side-panel",
-  "version": "1.1.6-beta.0",
+  "version": "1.1.7-beta.0",
   "description": "ConsoleBase 组件 - 右侧边栏",
   "license": "MIT",
   "sideEffects": false,
@@ -47,6 +47,8 @@
     "@alicloud/react-hook-is-unmounted": "^1.3.4",
     "@alicloud/react-hook-mouse-hover": "^1.0.2",
     "@alicloud/typescript-missing-helpers": "^1.3.4",
+    "@alicloud/console-base-conf-env": "^1.6.9",
+    "@alicloud/console-base-conf-locale": "^1.8.9",
     "immutability-helper": "^3.1.1"
   },
   "scripts": {