@alicloud/console-base-rc-side-panel 1.1.18 → 1.1.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/build/cjs/ui/index.js
CHANGED
|
@@ -22,11 +22,23 @@ var ScAside = _styledComponents.default.aside.withConfig({
|
|
|
22
22
|
var $collapsed = _ref.$collapsed;
|
|
23
23
|
return $collapsed ? (0, _styledComponents.css)(["transform:translateX(101%);border:none !important;"]) : _consoleBaseTheme.mixinBorderTertiaryLeft;
|
|
24
24
|
}, _consoleBaseTheme.SIZE.HEIGHT_TOP_NAV);
|
|
25
|
+
var ScCollapseAsideWrapper = _styledComponents.default.div.withConfig({
|
|
26
|
+
componentId: "sc-1ok6knf-1"
|
|
27
|
+
})(["", ""], function (_ref2) {
|
|
28
|
+
var $collapsedAsideMini = _ref2.$collapsedAsideMini,
|
|
29
|
+
$collapsed = _ref2.$collapsed;
|
|
30
|
+
return $collapsedAsideMini && $collapsed && (0, _styledComponents.css)(["transform:scale(0.7) translateX(10%);"]);
|
|
31
|
+
});
|
|
25
32
|
function Ui() {
|
|
26
33
|
var visible = (0, _model.useVisible)();
|
|
34
|
+
var _useProps = (0, _model.useProps)(),
|
|
35
|
+
collapsedAsideMini = _useProps.collapsedAsideMini;
|
|
27
36
|
var collapsed = (0, _model.useCollapsed)();
|
|
28
37
|
return visible ? /*#__PURE__*/_react.default.createElement(ScAside, (0, _defineProperty2.default)({
|
|
29
38
|
$collapsed: collapsed,
|
|
30
39
|
className: 'J_fixed_right_will_be_pushed_left'
|
|
31
|
-
}, _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(
|
|
40
|
+
}, _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, {
|
|
41
|
+
$collapsedAsideMini: !!collapsedAsideMini,
|
|
42
|
+
$collapsed: collapsed
|
|
43
|
+
}, /*#__PURE__*/_react.default.createElement(_rcContainer.CollapseAside, null), /*#__PURE__*/_react.default.createElement(_rcContainer.CollapseToggle, null))) : null;
|
|
32
44
|
}
|
package/build/esm/ui/index.js
CHANGED
|
@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import styled, { css } from 'styled-components';
|
|
4
4
|
import { SIZE, Z_INDEX, mixinBgPrimary, mixinBorderTertiaryLeft } from '@alicloud/console-base-theme';
|
|
5
|
-
import { useVisible, useCollapsed } from '../model';
|
|
5
|
+
import { useVisible, useCollapsed, useProps } from '../model';
|
|
6
6
|
import { SIZE_BUTTON_WRAP_HEIGHT, SPACING_Y, DATA_KEY_J } from './const';
|
|
7
7
|
import { GlobalStyleOnBody } from './rc';
|
|
8
8
|
import { ItemsTop, ItemsBottom, CollapseToggle, CollapseAside } from './rc-container';
|
|
@@ -12,11 +12,23 @@ var ScAside = styled.aside.withConfig({
|
|
|
12
12
|
var $collapsed = _ref.$collapsed;
|
|
13
13
|
return $collapsed ? css(["transform:translateX(101%);border:none !important;"]) : mixinBorderTertiaryLeft;
|
|
14
14
|
}, SIZE.HEIGHT_TOP_NAV);
|
|
15
|
+
var ScCollapseAsideWrapper = styled.div.withConfig({
|
|
16
|
+
componentId: "sc-1ok6knf-1"
|
|
17
|
+
})(["", ""], function (_ref2) {
|
|
18
|
+
var $collapsedAsideMini = _ref2.$collapsedAsideMini,
|
|
19
|
+
$collapsed = _ref2.$collapsed;
|
|
20
|
+
return $collapsedAsideMini && $collapsed && css(["transform:scale(0.7) translateX(10%);"]);
|
|
21
|
+
});
|
|
15
22
|
export default function Ui() {
|
|
16
23
|
var visible = useVisible();
|
|
24
|
+
var _useProps = useProps(),
|
|
25
|
+
collapsedAsideMini = _useProps.collapsedAsideMini;
|
|
17
26
|
var collapsed = useCollapsed();
|
|
18
27
|
return visible ? /*#__PURE__*/React.createElement(ScAside, _defineProperty({
|
|
19
28
|
$collapsed: collapsed,
|
|
20
29
|
className: 'J_fixed_right_will_be_pushed_left'
|
|
21
|
-
}, DATA_KEY_J, ''), /*#__PURE__*/React.createElement(GlobalStyleOnBody, null), /*#__PURE__*/React.createElement(ItemsTop, null), /*#__PURE__*/React.createElement(ItemsBottom, null), /*#__PURE__*/React.createElement(
|
|
30
|
+
}, DATA_KEY_J, ''), /*#__PURE__*/React.createElement(GlobalStyleOnBody, null), /*#__PURE__*/React.createElement(ItemsTop, null), /*#__PURE__*/React.createElement(ItemsBottom, null), /*#__PURE__*/React.createElement(ScCollapseAsideWrapper, {
|
|
31
|
+
$collapsedAsideMini: !!collapsedAsideMini,
|
|
32
|
+
$collapsed: collapsed
|
|
33
|
+
}, /*#__PURE__*/React.createElement(CollapseAside, null), /*#__PURE__*/React.createElement(CollapseToggle, null))) : null;
|
|
22
34
|
}
|
|
@@ -26,6 +26,10 @@ export interface IModelProps {
|
|
|
26
26
|
* 位于折叠点【推入按钮】上部的内容，将会跟随推入按钮做出入运动，嵌入 sidePanel 后，它将会隐藏
|
|
27
27
|
*/
|
|
28
28
|
collapsedAside?: JSX.Element | null;
|
|
29
|
+
/**
|
|
30
|
+
* collapsedAside 开启 mini 形态
|
|
31
|
+
*/
|
|
32
|
+
collapsedAsideMini?: boolean;
|
|
29
33
|
/**
|
|
30
34
|
* 给一个 DOM 节点，组件会监测它的滚动情况，并判断是否展示快速置顶按钮
|
|
31
35
|
*/
|