@alicloud/console-base-rc-side-panel 1.1.14 → 1.1.15
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/model/const/index.js +4 -2
- package/build/cjs/model/enum/index.js +1 -0
- package/build/cjs/model/hook/index.js +15 -1
- package/build/cjs/model/hook/use-dispatch-set-quick-top-visible.js +19 -0
- package/build/cjs/model/hook/use-effect-quick-top.js +40 -0
- package/build/cjs/model/hook/use-effects.js +2 -0
- package/build/cjs/model/hook/use-handle-go-top.js +22 -0
- package/build/cjs/model/hook/use-handle-set-quick-top-visible.js +19 -0
- package/build/cjs/model/hook/use-quick-top.js +19 -0
- package/build/cjs/model/reducer/index.js +3 -0
- package/build/cjs/model/reducer/reduce-set-quick-top-visible.js +15 -0
- package/build/cjs/ui/rc-container/items/index.js +3 -1
- package/build/cjs/ui/rc-container/quick-top/index.js +32 -0
- package/build/esm/model/const/index.js +3 -1
- package/build/esm/model/enum/index.js +1 -0
- package/build/esm/model/hook/index.js +3 -1
- package/build/esm/model/hook/use-dispatch-set-quick-top-visible.js +12 -0
- package/build/esm/model/hook/use-effect-quick-top.js +33 -0
- package/build/esm/model/hook/use-effects.js +2 -0
- package/build/esm/model/hook/use-handle-go-top.js +15 -0
- package/build/esm/model/hook/use-handle-set-quick-top-visible.js +12 -0
- package/build/esm/model/hook/use-quick-top.js +12 -0
- package/build/esm/model/reducer/index.js +3 -0
- package/build/esm/model/reducer/reduce-set-quick-top-visible.js +8 -0
- package/build/esm/ui/rc-container/items/index.js +4 -2
- package/build/esm/ui/rc-container/quick-top/index.js +25 -0
- package/build/types/model/const/index.d.ts +1 -0
- package/build/types/model/enum/index.d.ts +2 -1
- package/build/types/model/hook/index.d.ts +2 -0
- package/build/types/model/hook/use-dispatch-set-quick-top-visible.d.ts +1 -0
- package/build/types/model/hook/use-effect-quick-top.d.ts +1 -0
- package/build/types/model/hook/use-handle-go-top.d.ts +1 -0
- package/build/types/model/hook/use-handle-set-quick-top-visible.d.ts +1 -0
- package/build/types/model/hook/use-quick-top.d.ts +6 -0
- package/build/types/model/reducer/reduce-set-quick-top-visible.d.ts +2 -0
- package/build/types/model/types/action.d.ts +1 -1
- package/build/types/model/types/props.d.ts +8 -0
- package/build/types/model/types/state.d.ts +1 -0
- package/build/types/ui/rc-container/quick-top/index.d.ts +1 -0
- package/package.json +1 -1
|
@@ -3,8 +3,10 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.DEFAULT_CONTEXT_STATE = exports.BODY_CLASS_WITH_SIDE_PANEL = void 0;
|
|
6
|
+
exports.QUICK_TOP_VISIBLE_OFFSET = exports.DEFAULT_CONTEXT_STATE = exports.BODY_CLASS_WITH_SIDE_PANEL = void 0;
|
|
7
7
|
var BODY_CLASS_WITH_SIDE_PANEL = exports.BODY_CLASS_WITH_SIDE_PANEL = 'with-side-panel';
|
|
8
|
+
var QUICK_TOP_VISIBLE_OFFSET = exports.QUICK_TOP_VISIBLE_OFFSET = 200;
|
|
8
9
|
var DEFAULT_CONTEXT_STATE = exports.DEFAULT_CONTEXT_STATE = {
|
|
9
|
-
collapsed: true
|
|
10
|
+
collapsed: true,
|
|
11
|
+
quickTopVisible: false
|
|
10
12
|
};
|
|
@@ -6,5 +6,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.EAction = void 0;
|
|
7
7
|
var EAction = exports.EAction = /*#__PURE__*/function (EAction) {
|
|
8
8
|
EAction[EAction["SET_COLLAPSED"] = 0] = "SET_COLLAPSED";
|
|
9
|
+
EAction[EAction["SET_QUICK_TOP_VISIBLE"] = 1] = "SET_QUICK_TOP_VISIBLE";
|
|
9
10
|
return EAction;
|
|
10
11
|
}({});
|
|
@@ -22,6 +22,12 @@ Object.defineProperty(exports, "useHandleCollapsedChange", {
|
|
|
22
22
|
return _useHandleCollapsedChange.default;
|
|
23
23
|
}
|
|
24
24
|
});
|
|
25
|
+
Object.defineProperty(exports, "useHandleGoTop", {
|
|
26
|
+
enumerable: true,
|
|
27
|
+
get: function get() {
|
|
28
|
+
return _useHandleGoTop.default;
|
|
29
|
+
}
|
|
30
|
+
});
|
|
25
31
|
Object.defineProperty(exports, "useItemsBottom", {
|
|
26
32
|
enumerable: true,
|
|
27
33
|
get: function get() {
|
|
@@ -40,6 +46,12 @@ Object.defineProperty(exports, "useProps", {
|
|
|
40
46
|
return _useModelProps.default;
|
|
41
47
|
}
|
|
42
48
|
});
|
|
49
|
+
Object.defineProperty(exports, "useQuickTop", {
|
|
50
|
+
enumerable: true,
|
|
51
|
+
get: function get() {
|
|
52
|
+
return _useQuickTop.default;
|
|
53
|
+
}
|
|
54
|
+
});
|
|
43
55
|
Object.defineProperty(exports, "useVisible", {
|
|
44
56
|
enumerable: true,
|
|
45
57
|
get: function get() {
|
|
@@ -52,4 +64,6 @@ var _useVisible = _interopRequireDefault(require("./use-visible"));
|
|
|
52
64
|
var _useCollapsed = _interopRequireDefault(require("./use-collapsed"));
|
|
53
65
|
var _useItemsTop = _interopRequireDefault(require("./use-items-top"));
|
|
54
66
|
var _useItemsBottom = _interopRequireDefault(require("./use-items-bottom"));
|
|
55
|
-
var
|
|
67
|
+
var _useQuickTop = _interopRequireDefault(require("./use-quick-top"));
|
|
68
|
+
var _useHandleCollapsedChange = _interopRequireDefault(require("./use-handle-collapsed-change"));
|
|
69
|
+
var _useHandleGoTop = _interopRequireDefault(require("./use-handle-go-top"));
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.default = useDispatchSetQuickTopVisible;
|
|
8
|
+
var _react = require("react");
|
|
9
|
+
var _enum = require("../enum");
|
|
10
|
+
var _useModelDispatch = _interopRequireDefault(require("./_use-model-dispatch"));
|
|
11
|
+
function useDispatchSetQuickTopVisible() {
|
|
12
|
+
var dispatch = (0, _useModelDispatch.default)();
|
|
13
|
+
return (0, _react.useCallback)(function (payload) {
|
|
14
|
+
return dispatch({
|
|
15
|
+
type: _enum.EAction.SET_QUICK_TOP_VISIBLE,
|
|
16
|
+
payload: payload
|
|
17
|
+
});
|
|
18
|
+
}, [dispatch]);
|
|
19
|
+
}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.default = useEffectQuickTop;
|
|
8
|
+
var _react = require("react");
|
|
9
|
+
var _const = require("../const");
|
|
10
|
+
var _useModelProps2 = _interopRequireDefault(require("./_use-model-props"));
|
|
11
|
+
var _useVisible = _interopRequireDefault(require("./use-visible"));
|
|
12
|
+
var _useCollapsed = _interopRequireDefault(require("./use-collapsed"));
|
|
13
|
+
var _useHandleSetQuickTopVisible = _interopRequireDefault(require("./use-handle-set-quick-top-visible"));
|
|
14
|
+
function useEffectQuickTop() {
|
|
15
|
+
var _useModelProps = (0, _useModelProps2.default)(),
|
|
16
|
+
quickTopContainer = _useModelProps.quickTopContainer;
|
|
17
|
+
var visible = (0, _useVisible.default)();
|
|
18
|
+
var collapsed = (0, _useCollapsed.default)();
|
|
19
|
+
var handleSetQuickTopVisible = (0, _useHandleSetQuickTopVisible.default)();
|
|
20
|
+
var handleToggleVisible = (0, _react.useCallback)(function () {
|
|
21
|
+
if (!quickTopContainer) {
|
|
22
|
+
return;
|
|
23
|
+
}
|
|
24
|
+
handleSetQuickTopVisible((quickTopContainer.scrollY || quickTopContainer.scrollTop) > _const.QUICK_TOP_VISIBLE_OFFSET);
|
|
25
|
+
}, [quickTopContainer, handleSetQuickTopVisible]);
|
|
26
|
+
|
|
27
|
+
// container 变化导致 handleToggleVisible 变化,此时需要执行一次
|
|
28
|
+
(0, _react.useEffect)(handleToggleVisible, [handleToggleVisible]);
|
|
29
|
+
|
|
30
|
+
// 对 container 进行 scroll 的事件绑定
|
|
31
|
+
(0, _react.useEffect)(function () {
|
|
32
|
+
if (!quickTopContainer || !visible || collapsed) {
|
|
33
|
+
return;
|
|
34
|
+
}
|
|
35
|
+
quickTopContainer.addEventListener('scroll', handleToggleVisible);
|
|
36
|
+
return function () {
|
|
37
|
+
return quickTopContainer.removeEventListener('scroll', handleToggleVisible);
|
|
38
|
+
};
|
|
39
|
+
}, [visible, collapsed, quickTopContainer, handleToggleVisible]);
|
|
40
|
+
}
|
|
@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports.default = useEffects;
|
|
8
8
|
var _useEffectToggleBodyClass = _interopRequireDefault(require("./use-effect-toggle-body-class"));
|
|
9
|
+
var _useEffectQuickTop = _interopRequireDefault(require("./use-effect-quick-top"));
|
|
9
10
|
function useEffects() {
|
|
10
11
|
(0, _useEffectToggleBodyClass.default)();
|
|
12
|
+
(0, _useEffectQuickTop.default)();
|
|
11
13
|
}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.default = useHandleGoTop;
|
|
8
|
+
var _react = require("react");
|
|
9
|
+
var _mereDom = require("@alicloud/mere-dom");
|
|
10
|
+
var _useQuickTop2 = _interopRequireDefault(require("./use-quick-top"));
|
|
11
|
+
function useHandleGoTop() {
|
|
12
|
+
var _useQuickTop = (0, _useQuickTop2.default)(),
|
|
13
|
+
container = _useQuickTop.container;
|
|
14
|
+
return (0, _react.useCallback)(function () {
|
|
15
|
+
if (!container) {
|
|
16
|
+
return;
|
|
17
|
+
}
|
|
18
|
+
(0, _mereDom.scrollTo)(container, {
|
|
19
|
+
top: 0
|
|
20
|
+
});
|
|
21
|
+
}, [container]);
|
|
22
|
+
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.default = useHandleSetQuickTopVisible;
|
|
8
|
+
var _react = require("react");
|
|
9
|
+
var _useDispatchSetQuickTopVisible = _interopRequireDefault(require("./use-dispatch-set-quick-top-visible"));
|
|
10
|
+
var _useModelProps2 = _interopRequireDefault(require("./_use-model-props"));
|
|
11
|
+
function useHandleSetQuickTopVisible() {
|
|
12
|
+
var _useModelProps = (0, _useModelProps2.default)(),
|
|
13
|
+
onQuickTopVisibleChange = _useModelProps.onQuickTopVisibleChange;
|
|
14
|
+
var dispatchSetQuickTopVisible = (0, _useDispatchSetQuickTopVisible.default)();
|
|
15
|
+
return (0, _react.useCallback)(function (visible) {
|
|
16
|
+
dispatchSetQuickTopVisible(visible);
|
|
17
|
+
onQuickTopVisibleChange === null || onQuickTopVisibleChange === void 0 ? void 0 : onQuickTopVisibleChange(visible);
|
|
18
|
+
}, [dispatchSetQuickTopVisible, onQuickTopVisibleChange]);
|
|
19
|
+
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.default = useQuickTop;
|
|
8
|
+
var _useModelProps2 = _interopRequireDefault(require("./_use-model-props"));
|
|
9
|
+
var _useModelState2 = _interopRequireDefault(require("./_use-model-state"));
|
|
10
|
+
function useQuickTop() {
|
|
11
|
+
var _useModelProps = (0, _useModelProps2.default)(),
|
|
12
|
+
quickTopContainer = _useModelProps.quickTopContainer;
|
|
13
|
+
var _useModelState = (0, _useModelState2.default)(),
|
|
14
|
+
quickTopVisible = _useModelState.quickTopVisible;
|
|
15
|
+
return {
|
|
16
|
+
container: quickTopContainer,
|
|
17
|
+
visible: quickTopVisible
|
|
18
|
+
};
|
|
19
|
+
}
|
|
@@ -7,10 +7,13 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
exports.default = reducer;
|
|
8
8
|
var _enum = require("../enum");
|
|
9
9
|
var _reduceSetCollapsed = _interopRequireDefault(require("./reduce-set-collapsed"));
|
|
10
|
+
var _reduceSetQuickTopVisible = _interopRequireDefault(require("./reduce-set-quick-top-visible"));
|
|
10
11
|
function reducer(state, action) {
|
|
11
12
|
switch (action.type) {
|
|
12
13
|
case _enum.EAction.SET_COLLAPSED:
|
|
13
14
|
return (0, _reduceSetCollapsed.default)(state, action.payload);
|
|
15
|
+
case _enum.EAction.SET_QUICK_TOP_VISIBLE:
|
|
16
|
+
return (0, _reduceSetQuickTopVisible.default)(state, action.payload);
|
|
14
17
|
default:
|
|
15
18
|
return state;
|
|
16
19
|
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.default = reduceSetQuickTopVisible;
|
|
8
|
+
var _immutabilityHelper = _interopRequireDefault(require("immutability-helper"));
|
|
9
|
+
function reduceSetQuickTopVisible(state, payload) {
|
|
10
|
+
return (0, _immutabilityHelper.default)(state, {
|
|
11
|
+
quickTopVisible: {
|
|
12
|
+
$set: payload
|
|
13
|
+
}
|
|
14
|
+
});
|
|
15
|
+
}
|
|
@@ -14,6 +14,7 @@ var _consoleBaseThemeScBase = require("@alicloud/console-base-theme-sc-base");
|
|
|
14
14
|
var _model = require("../../../model");
|
|
15
15
|
var _const = require("../../const");
|
|
16
16
|
var _item = _interopRequireDefault(require("../item"));
|
|
17
|
+
var _quickTop = _interopRequireDefault(require("../quick-top"));
|
|
17
18
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
18
19
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
19
20
|
function Items(_ref) {
|
|
@@ -35,11 +36,12 @@ var ScHr = (0, _styledComponents.default)(_consoleBaseThemeScBase.HrBase).withCo
|
|
|
35
36
|
componentId: "sc-1h5t3jq-0"
|
|
36
37
|
})(["margin:", "px 4px;"], _const.SPACING_Y);
|
|
37
38
|
function ItemsBottom() {
|
|
39
|
+
var quickTop = (0, _model.useQuickTop)();
|
|
38
40
|
var children = (0, _model.useChildren)();
|
|
39
41
|
var items = (0, _model.useItemsBottom)();
|
|
40
42
|
return /*#__PURE__*/_react.default.createElement(_consoleBaseRcFlex.default, {
|
|
41
43
|
vertical: true
|
|
42
|
-
}, children || items.length ? /*#__PURE__*/_react.default.createElement(ScHr, null) : null, children || /*#__PURE__*/_react.default.createElement(Items, {
|
|
44
|
+
}, quickTop.container && quickTop.visible ? /*#__PURE__*/_react.default.createElement(_quickTop.default, null) : null, children || items.length ? /*#__PURE__*/_react.default.createElement(ScHr, null) : null, children || /*#__PURE__*/_react.default.createElement(Items, {
|
|
43
45
|
items: items
|
|
44
46
|
}));
|
|
45
47
|
}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.default = QuickTop;
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
var _consoleBaseRcIcon = _interopRequireDefault(require("@alicloud/console-base-rc-icon"));
|
|
10
|
+
var _consoleBaseRcTooltip = require("@alicloud/console-base-rc-tooltip");
|
|
11
|
+
var _model = require("../../../model");
|
|
12
|
+
var _rc = require("../../rc");
|
|
13
|
+
var _intl = _interopRequireDefault(require("../../intl"));
|
|
14
|
+
function QuickTop() {
|
|
15
|
+
var handleGoTop = (0, _model.useHandleGoTop)();
|
|
16
|
+
var title = (0, _intl.default)('op:back_to_top');
|
|
17
|
+
return /*#__PURE__*/_react.default.createElement(_consoleBaseRcTooltip.TooltipV1, {
|
|
18
|
+
title: title,
|
|
19
|
+
destroyTooltipOnHide: true,
|
|
20
|
+
placement: "left",
|
|
21
|
+
fixed: true,
|
|
22
|
+
overlayStyle: {
|
|
23
|
+
marginLeft: '8px'
|
|
24
|
+
}
|
|
25
|
+
}, /*#__PURE__*/_react.default.createElement(_rc.SidePanelItemWrap, null, /*#__PURE__*/_react.default.createElement(_rc.SidePanelItemButton, {
|
|
26
|
+
title: title,
|
|
27
|
+
icon: /*#__PURE__*/_react.default.createElement(_consoleBaseRcIcon.default, {
|
|
28
|
+
type: "go-top"
|
|
29
|
+
}),
|
|
30
|
+
onClick: handleGoTop
|
|
31
|
+
})));
|
|
32
|
+
}
|
|
@@ -4,6 +4,8 @@ export { default as useVisible } from './use-visible';
|
|
|
4
4
|
export { default as useCollapsed } from './use-collapsed';
|
|
5
5
|
export { default as useItemsTop } from './use-items-top';
|
|
6
6
|
export { default as useItemsBottom } from './use-items-bottom';
|
|
7
|
+
export { default as useQuickTop } from './use-quick-top';
|
|
7
8
|
|
|
8
9
|
// handlers
|
|
9
|
-
export { default as useHandleCollapsedChange } from './use-handle-collapsed-change';
|
|
10
|
+
export { default as useHandleCollapsedChange } from './use-handle-collapsed-change';
|
|
11
|
+
export { default as useHandleGoTop } from './use-handle-go-top';
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { useCallback } from 'react';
|
|
2
|
+
import { EAction } from '../enum';
|
|
3
|
+
import useModelDispatch from './_use-model-dispatch';
|
|
4
|
+
export default function useDispatchSetQuickTopVisible() {
|
|
5
|
+
var dispatch = useModelDispatch();
|
|
6
|
+
return useCallback(function (payload) {
|
|
7
|
+
return dispatch({
|
|
8
|
+
type: EAction.SET_QUICK_TOP_VISIBLE,
|
|
9
|
+
payload: payload
|
|
10
|
+
});
|
|
11
|
+
}, [dispatch]);
|
|
12
|
+
}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { useCallback, useEffect } from 'react';
|
|
2
|
+
import { QUICK_TOP_VISIBLE_OFFSET } from '../const';
|
|
3
|
+
import useModelProps from './_use-model-props';
|
|
4
|
+
import useVisible from './use-visible';
|
|
5
|
+
import useCollapsed from './use-collapsed';
|
|
6
|
+
import useHandleSetQuickTopVisible from './use-handle-set-quick-top-visible';
|
|
7
|
+
export default function useEffectQuickTop() {
|
|
8
|
+
var _useModelProps = useModelProps(),
|
|
9
|
+
quickTopContainer = _useModelProps.quickTopContainer;
|
|
10
|
+
var visible = useVisible();
|
|
11
|
+
var collapsed = useCollapsed();
|
|
12
|
+
var handleSetQuickTopVisible = useHandleSetQuickTopVisible();
|
|
13
|
+
var handleToggleVisible = useCallback(function () {
|
|
14
|
+
if (!quickTopContainer) {
|
|
15
|
+
return;
|
|
16
|
+
}
|
|
17
|
+
handleSetQuickTopVisible((quickTopContainer.scrollY || quickTopContainer.scrollTop) > QUICK_TOP_VISIBLE_OFFSET);
|
|
18
|
+
}, [quickTopContainer, handleSetQuickTopVisible]);
|
|
19
|
+
|
|
20
|
+
// container 变化导致 handleToggleVisible 变化,此时需要执行一次
|
|
21
|
+
useEffect(handleToggleVisible, [handleToggleVisible]);
|
|
22
|
+
|
|
23
|
+
// 对 container 进行 scroll 的事件绑定
|
|
24
|
+
useEffect(function () {
|
|
25
|
+
if (!quickTopContainer || !visible || collapsed) {
|
|
26
|
+
return;
|
|
27
|
+
}
|
|
28
|
+
quickTopContainer.addEventListener('scroll', handleToggleVisible);
|
|
29
|
+
return function () {
|
|
30
|
+
return quickTopContainer.removeEventListener('scroll', handleToggleVisible);
|
|
31
|
+
};
|
|
32
|
+
}, [visible, collapsed, quickTopContainer, handleToggleVisible]);
|
|
33
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { useCallback } from 'react';
|
|
2
|
+
import { scrollTo } from '@alicloud/mere-dom';
|
|
3
|
+
import useQuickTop from './use-quick-top';
|
|
4
|
+
export default function useHandleGoTop() {
|
|
5
|
+
var _useQuickTop = useQuickTop(),
|
|
6
|
+
container = _useQuickTop.container;
|
|
7
|
+
return useCallback(function () {
|
|
8
|
+
if (!container) {
|
|
9
|
+
return;
|
|
10
|
+
}
|
|
11
|
+
scrollTo(container, {
|
|
12
|
+
top: 0
|
|
13
|
+
});
|
|
14
|
+
}, [container]);
|
|
15
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { useCallback } from 'react';
|
|
2
|
+
import useDispatchSetQuickTopVisible from './use-dispatch-set-quick-top-visible';
|
|
3
|
+
import useModelProps from './_use-model-props';
|
|
4
|
+
export default function useHandleSetQuickTopVisible() {
|
|
5
|
+
var _useModelProps = useModelProps(),
|
|
6
|
+
onQuickTopVisibleChange = _useModelProps.onQuickTopVisibleChange;
|
|
7
|
+
var dispatchSetQuickTopVisible = useDispatchSetQuickTopVisible();
|
|
8
|
+
return useCallback(function (visible) {
|
|
9
|
+
dispatchSetQuickTopVisible(visible);
|
|
10
|
+
onQuickTopVisibleChange === null || onQuickTopVisibleChange === void 0 ? void 0 : onQuickTopVisibleChange(visible);
|
|
11
|
+
}, [dispatchSetQuickTopVisible, onQuickTopVisibleChange]);
|
|
12
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import useModelProps from './_use-model-props';
|
|
2
|
+
import useModelState from './_use-model-state';
|
|
3
|
+
export default function useQuickTop() {
|
|
4
|
+
var _useModelProps = useModelProps(),
|
|
5
|
+
quickTopContainer = _useModelProps.quickTopContainer;
|
|
6
|
+
var _useModelState = useModelState(),
|
|
7
|
+
quickTopVisible = _useModelState.quickTopVisible;
|
|
8
|
+
return {
|
|
9
|
+
container: quickTopContainer,
|
|
10
|
+
visible: quickTopVisible
|
|
11
|
+
};
|
|
12
|
+
}
|
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
import { EAction } from '../enum';
|
|
2
2
|
import reduceSetCollapsed from './reduce-set-collapsed';
|
|
3
|
+
import reduceSetQuickTopVisible from './reduce-set-quick-top-visible';
|
|
3
4
|
export default function reducer(state, action) {
|
|
4
5
|
switch (action.type) {
|
|
5
6
|
case EAction.SET_COLLAPSED:
|
|
6
7
|
return reduceSetCollapsed(state, action.payload);
|
|
8
|
+
case EAction.SET_QUICK_TOP_VISIBLE:
|
|
9
|
+
return reduceSetQuickTopVisible(state, action.payload);
|
|
7
10
|
default:
|
|
8
11
|
return state;
|
|
9
12
|
}
|
|
@@ -5,9 +5,10 @@ import React from 'react';
|
|
|
5
5
|
import styled from 'styled-components';
|
|
6
6
|
import Flex from '@alicloud/console-base-rc-flex';
|
|
7
7
|
import { HrBase } from '@alicloud/console-base-theme-sc-base';
|
|
8
|
-
import { useChildren, useItemsTop, useItemsBottom } from '../../../model';
|
|
8
|
+
import { useChildren, useItemsTop, useItemsBottom, useQuickTop } from '../../../model';
|
|
9
9
|
import { DATA_KEY_SIDE_PANEL_ITEM, SPACING_Y } from '../../const';
|
|
10
10
|
import PanelItem from '../item';
|
|
11
|
+
import QuickTop from '../quick-top';
|
|
11
12
|
function Items(_ref) {
|
|
12
13
|
var items = _ref.items;
|
|
13
14
|
return /*#__PURE__*/React.createElement(React.Fragment, null, items.map(function (v) {
|
|
@@ -27,11 +28,12 @@ var ScHr = styled(HrBase).withConfig({
|
|
|
27
28
|
componentId: "sc-1h5t3jq-0"
|
|
28
29
|
})(["margin:", "px 4px;"], SPACING_Y);
|
|
29
30
|
export function ItemsBottom() {
|
|
31
|
+
var quickTop = useQuickTop();
|
|
30
32
|
var children = useChildren();
|
|
31
33
|
var items = useItemsBottom();
|
|
32
34
|
return /*#__PURE__*/React.createElement(Flex, {
|
|
33
35
|
vertical: true
|
|
34
|
-
}, children || items.length ? /*#__PURE__*/React.createElement(ScHr, null) : null, children || /*#__PURE__*/React.createElement(Items, {
|
|
36
|
+
}, quickTop.container && quickTop.visible ? /*#__PURE__*/React.createElement(QuickTop, null) : null, children || items.length ? /*#__PURE__*/React.createElement(ScHr, null) : null, children || /*#__PURE__*/React.createElement(Items, {
|
|
35
37
|
items: items
|
|
36
38
|
}));
|
|
37
39
|
}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import Icon from '@alicloud/console-base-rc-icon';
|
|
3
|
+
import { TooltipV1 } from '@alicloud/console-base-rc-tooltip';
|
|
4
|
+
import { useHandleGoTop } from '../../../model';
|
|
5
|
+
import { SidePanelItemWrap, SidePanelItemButton } from '../../rc';
|
|
6
|
+
import intl from '../../intl';
|
|
7
|
+
export default function QuickTop() {
|
|
8
|
+
var handleGoTop = useHandleGoTop();
|
|
9
|
+
var title = intl('op:back_to_top');
|
|
10
|
+
return /*#__PURE__*/React.createElement(TooltipV1, {
|
|
11
|
+
title: title,
|
|
12
|
+
destroyTooltipOnHide: true,
|
|
13
|
+
placement: "left",
|
|
14
|
+
fixed: true,
|
|
15
|
+
overlayStyle: {
|
|
16
|
+
marginLeft: '8px'
|
|
17
|
+
}
|
|
18
|
+
}, /*#__PURE__*/React.createElement(SidePanelItemWrap, null, /*#__PURE__*/React.createElement(SidePanelItemButton, {
|
|
19
|
+
title: title,
|
|
20
|
+
icon: /*#__PURE__*/React.createElement(Icon, {
|
|
21
|
+
type: "go-top"
|
|
22
|
+
}),
|
|
23
|
+
onClick: handleGoTop
|
|
24
|
+
})));
|
|
25
|
+
}
|
|
@@ -4,4 +4,6 @@ export { default as useVisible } from './use-visible';
|
|
|
4
4
|
export { default as useCollapsed } from './use-collapsed';
|
|
5
5
|
export { default as useItemsTop } from './use-items-top';
|
|
6
6
|
export { default as useItemsBottom } from './use-items-bottom';
|
|
7
|
+
export { default as useQuickTop } from './use-quick-top';
|
|
7
8
|
export { default as useHandleCollapsedChange } from './use-handle-collapsed-change';
|
|
9
|
+
export { default as useHandleGoTop } from './use-handle-go-top';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export default function useDispatchSetQuickTopVisible(): (payload: boolean) => void;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export default function useEffectQuickTop(): void;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export default function useHandleGoTop(): () => void;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export default function useHandleSetQuickTopVisible(): (visible: boolean) => void;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { Dispatch } from 'react';
|
|
2
2
|
import { EAction } from '../enum';
|
|
3
3
|
export type TModelAction = {
|
|
4
|
-
type: EAction.SET_COLLAPSED;
|
|
4
|
+
type: EAction.SET_COLLAPSED | EAction.SET_QUICK_TOP_VISIBLE;
|
|
5
5
|
payload: boolean;
|
|
6
6
|
};
|
|
7
7
|
export type TModelDispatch = Dispatch<TModelAction>;
|
|
@@ -26,6 +26,14 @@ export interface IModelProps {
|
|
|
26
26
|
* 位于折叠点【推入按钮】上部的内容,将会跟随推入按钮做出入运动,嵌入 sidePanel 后,它将会隐藏
|
|
27
27
|
*/
|
|
28
28
|
collapsedAside?: JSX.Element | null;
|
|
29
|
+
/**
|
|
30
|
+
* 给一个 DOM 节点,组件会监测它的滚动情况,并判断是否展示快速置顶按钮
|
|
31
|
+
*/
|
|
32
|
+
quickTopContainer?: Window | HTMLElement | null;
|
|
33
|
+
/**
|
|
34
|
+
* QuickTop 显隐变化时的回调,可用于日志
|
|
35
|
+
*/
|
|
36
|
+
onQuickTopVisibleChange?(visible: boolean): void;
|
|
29
37
|
/**
|
|
30
38
|
* 是否展示推入按钮
|
|
31
39
|
*/
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export default function QuickTop(): JSX.Element;
|