@alicloud/console-base-rc-side-panel 1.0.0

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

@@ -0,0 +1,103 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Item;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactHookMouseEnterLeave = _interopRequireDefault(require("@alicloud/react-hook-mouse-enter-leave"));
+var _consoleBaseRcHtmlTrusted = _interopRequireDefault(require("@alicloud/console-base-rc-html-trusted"));
+var _consoleBaseRcEasyIcon = require("@alicloud/console-base-rc-easy-icon");
+var _model = require("../../../model");
+var _util = require("../../util");
+var _rc = require("../../rc");
+var _excluded = ["id", "className", "style", "active", "title", "titleActive", "icon", "iconHovered", "iconActive", "iconActiveHovered", "unread", "mark", "tooltip", "tooltipActive", "tooltipAsHtml", "tooltipAlign", "tooltipDefaultVisible", "onClick", "onActiveChange", "onMouseEnter", "onMouseLeave"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function Item(_ref) {
+  var id = _ref.id,
+    className = _ref.className,
+    style = _ref.style,
+    active = _ref.active,
+    title = _ref.title,
+    titleActive = _ref.titleActive,
+    icon = _ref.icon,
+    iconHovered = _ref.iconHovered,
+    iconActive = _ref.iconActive,
+    iconActiveHovered = _ref.iconActiveHovered,
+    unread = _ref.unread,
+    mark = _ref.mark,
+    tooltip = _ref.tooltip,
+    tooltipActive = _ref.tooltipActive,
+    tooltipAsHtml = _ref.tooltipAsHtml,
+    tooltipAlign = _ref.tooltipAlign,
+    _ref$tooltipDefaultVi = _ref.tooltipDefaultVisible,
+    tooltipDefaultVisible = _ref$tooltipDefaultVi === void 0 ? false : _ref$tooltipDefaultVi,
+    onClick = _ref.onClick,
+    onActiveChange = _ref.onActiveChange,
+    onMouseEnter = _ref.onMouseEnter,
+    onMouseLeave = _ref.onMouseLeave,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var collapsed = (0, _model.useCollapsed)();
+  var _useState = (0, _react.useState)(tooltipDefaultVisible),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    stateTooltipVisible = _useState2[0],
+    setStateTooltipVisible = _useState2[1];
+  var _useMouseEnterLeave = (0, _reactHookMouseEnterLeave.default)((0, _react.useCallback)(function () {
+      setStateTooltipVisible(true);
+      onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter();
+    }, [setStateTooltipVisible, onMouseEnter]), (0, _react.useCallback)(function () {
+      setStateTooltipVisible(false);
+      onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave();
+    }, [setStateTooltipVisible, onMouseLeave])),
+    _useMouseEnterLeave2 = (0, _slicedToArray2.default)(_useMouseEnterLeave, 2),
+    handleMouseEnter = _useMouseEnterLeave2[0],
+    handleMouseLeave = _useMouseEnterLeave2[1];
+  var handleClick = (0, _react.useCallback)(function (e) {
+    onClick === null || onClick === void 0 ? void 0 : onClick(e);
+    onActiveChange === null || onActiveChange === void 0 ? void 0 : onActiveChange(!active);
+  }, [active, onClick, onActiveChange]);
+  var finalTitle = (0, _util.getValueByStatus)({
+    valueNormal: title,
+    valueActive: titleActive
+  }, stateTooltipVisible, active);
+  var finalIcon = (0, _util.getValueByStatus)({
+    valueNormal: icon,
+    valueHovered: iconHovered,
+    valueActive: iconActive,
+    valueActiveHovered: iconActiveHovered
+  }, stateTooltipVisible, active);
+  var finalTooltip = (0, _util.getValueByStatus)({
+    valueNormal: tooltip,
+    valueActive: tooltipActive
+  }, stateTooltipVisible, active);
+  return /*#__PURE__*/_react.default.createElement(_rc.SidePanelItemWrap, {
+    id: id,
+    className: className,
+    style: style,
+    onMouseLeave: handleMouseLeave
+  }, /*#__PURE__*/_react.default.createElement(_rc.SidePanelItemButton, _objectSpread(_objectSpread({}, props), {}, {
+    active: active,
+    title: title,
+    label: (0, _consoleBaseRcEasyIcon.renderEasyIcon)(finalIcon) || title,
+    onMouseEnter: handleMouseEnter,
+    onClick: handleClick
+  })), /*#__PURE__*/_react.default.createElement(_rc.SidePanelItemBadge, {
+    unread: unread,
+    mark: mark
+  }), finalTooltip || finalTitle ? /*#__PURE__*/_react.default.createElement(_rc.SidePanelItemTooltip, {
+    visible: stateTooltipVisible && !collapsed,
+    align: tooltipAlign,
+    content: tooltipAsHtml && finalTooltip && typeof finalTooltip === 'string' ? /*#__PURE__*/_react.default.createElement(_consoleBaseRcHtmlTrusted.default, {
+      text: finalTooltip
+    }) : finalTooltip || finalTitle,
+    onMouseEnter: handleMouseEnter
+  }) : null);
+}

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

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Items;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _const = require("../../const");
+var _item = _interopRequireDefault(require("../item"));
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function Items(_ref) {
+  var items = _ref.items;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, items.map(function (v) {
+    var _objectSpread2;
+    return /*#__PURE__*/_react.default.createElement(_item.default, _objectSpread((_objectSpread2 = {}, (0, _defineProperty2.default)(_objectSpread2, _const.DATA_KEY_SIDE_PANEL_ITEM, v.key), (0, _defineProperty2.default)(_objectSpread2, "spm", v.key), _objectSpread2), v));
+  }));
+}

package/build/cjs/ui/rc-container/items-bottom/index.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ItemsBottom;
+var _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _consoleBaseThemeScBase = require("@alicloud/console-base-theme-sc-base");
+var _consoleBaseRcFlex = _interopRequireDefault(require("@alicloud/console-base-rc-flex"));
+var _const = require("../../const");
+var _model = require("../../../model");
+var _items = _interopRequireDefault(require("../items"));
+var _quickTop = _interopRequireDefault(require("./quick-top"));
+var ScHr = (0, _styledComponents.default)(_consoleBaseThemeScBase.HrBase).withConfig({
+  componentId: "sc-1rxhuz5-0"
+})(["margin:", "px 4px;"], _const.SPACING_Y);
+function ItemsBottom() {
+  var quickTop = (0, _model.useQuickTop)();
+  var children = (0, _model.useChildren)();
+  var items = (0, _model.useItemsBottom)();
+  return /*#__PURE__*/_react.default.createElement(_consoleBaseRcFlex.default, {
+    vertical: true
+  }, 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.default, {
+    items: items
+  }));
+}

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

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = QuickTop;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactHookMouseEnterLeave = _interopRequireDefault(require("@alicloud/react-hook-mouse-enter-leave"));
+var _consoleBaseRcIcon = _interopRequireDefault(require("@alicloud/console-base-rc-icon"));
+var _model = require("../../../../model");
+var _intl = _interopRequireDefault(require("../../../intl"));
+var _rc = require("../../../rc");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function QuickTop() {
+  var handleGoTop = (0, _model.useHandleGoTop)();
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    stateHovered = _useState2[0],
+    setStateHovered = _useState2[1];
+  var _useMouseEnterLeave = (0, _reactHookMouseEnterLeave.default)((0, _react.useCallback)(function () {
+      setStateHovered(true);
+    }, [setStateHovered]), (0, _react.useCallback)(function () {
+      setStateHovered(false);
+    }, [setStateHovered])),
+    _useMouseEnterLeave2 = (0, _slicedToArray2.default)(_useMouseEnterLeave, 2),
+    handleMouseEnter = _useMouseEnterLeave2[0],
+    handleMouseLeave = _useMouseEnterLeave2[1];
+  var title = (0, _intl.default)('op:back_to_top');
+  return /*#__PURE__*/_react.default.createElement(_rc.SidePanelItemWrap, {
+    hovered: stateHovered,
+    onMouseLeave: handleMouseLeave
+  }, /*#__PURE__*/_react.default.createElement(_rc.SidePanelItemButton, {
+    title: title,
+    label: /*#__PURE__*/_react.default.createElement(_consoleBaseRcIcon.default, {
+      type: "go-top"
+    }),
+    onMouseEnter: handleMouseEnter,
+    onClick: handleGoTop
+  }), /*#__PURE__*/_react.default.createElement(_rc.SidePanelItemTooltip, {
+    visible: stateHovered,
+    content: title
+  }));
+}

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

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ItemsTop;
+var _react = _interopRequireDefault(require("react"));
+var _consoleBaseRcFlex = _interopRequireDefault(require("@alicloud/console-base-rc-flex"));
+var _model = require("../../../model");
+var _items = _interopRequireDefault(require("../items"));
+function ItemsTop() {
+  var items = (0, _model.useItemsTop)();
+  return /*#__PURE__*/_react.default.createElement(_consoleBaseRcFlex.default, {
+    vertical: true,
+    flex: true
+  }, /*#__PURE__*/_react.default.createElement(_items.default, {
+    items: items
+  }));
+}

package/build/cjs/ui/types/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/build/cjs/ui/util/get-value-by-status.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = getValueByStatus;
+function getValueByStatus(values, hovered, active) {
+  var valueNormal = values.valueNormal,
+    valueHovered = values.valueHovered,
+    valueActive = values.valueActive,
+    valueActiveHovered = values.valueActiveHovered;
+  if (hovered && active) {
+    var _ref;
+    return (_ref = valueActiveHovered !== null && valueActiveHovered !== void 0 ? valueActiveHovered : valueActive) !== null && _ref !== void 0 ? _ref : valueNormal;
+  }
+  if (active) {
+    return valueActive !== null && valueActive !== void 0 ? valueActive : valueNormal;
+  }
+  if (hovered) {
+    return valueHovered !== null && valueHovered !== void 0 ? valueHovered : valueNormal;
+  }
+  return valueNormal;
+}

package/build/cjs/ui/util/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "getValueByStatus", {
+  enumerable: true,
+  get: function get() {
+    return _getValueByStatus.default;
+  }
+});
+var _getValueByStatus = _interopRequireDefault(require("./get-value-by-status"));

package/build/cjs/with-model/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = WithModel;
+var _react = _interopRequireDefault(require("react"));
+var _model = _interopRequireDefault(require("../model"));
+var _ui = _interopRequireDefault(require("../ui"));
+function WithModel(props) {
+  return /*#__PURE__*/_react.default.createElement(_model.default, {
+    props: props
+  }, /*#__PURE__*/_react.default.createElement(_ui.default, null));
+}

package/build/es/index.js

@@ -0,0 +1,2 @@
+export { default } from './with-model';
+export { default as SidePanelItem } from './ui/rc-container/item'; // 供使用 children 的情况

package/build/es/model/const/index.js

@@ -0,0 +1,6 @@
+export var BODY_CLASS_WITH_SIDE_PANEL = 'with-side-panel';
+export var QUICK_TOP_VISIBLE_OFFSET = 200;
+export var DEFAULT_CONTEXT_STATE = {
+  collapsed: false,
+  quickTopVisible: false
+};

package/build/es/model/context/index.js

@@ -0,0 +1,2 @@
+import { createContext } from 'react';
+export default /*#__PURE__*/createContext(null);

package/build/es/model/enum/index.js

@@ -0,0 +1,5 @@
+export var EAction = /*#__PURE__*/function (EAction) {
+  EAction[EAction["SET_COLLAPSED"] = 0] = "SET_COLLAPSED";
+  EAction[EAction["SET_QUICK_TOP_VISIBLE"] = 1] = "SET_QUICK_TOP_VISIBLE";
+  return EAction;
+}({});

package/build/es/model/hook/_use-model-context.js

@@ -0,0 +1,5 @@
+import { useContext } from 'react';
+import Context from '../context';
+export default function useModelContext() {
+  return useContext(Context);
+}

package/build/es/model/hook/_use-model-dispatch.js

@@ -0,0 +1,4 @@
+import useModelContext from './_use-model-context';
+export default function useModelDispatch() {
+  return useModelContext().dispatch;
+}

package/build/es/model/hook/_use-model-props.js

@@ -0,0 +1,22 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["itemsTop", "itemsBottom"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import { useMemo } from 'react';
+import useModelContext from './_use-model-context';
+export default function useModelProps() {
+  var _useModelContext = useModelContext(),
+    props = _useModelContext.props;
+  return useMemo(function () {
+    var _props$itemsTop = props.itemsTop,
+      itemsTop = _props$itemsTop === void 0 ? [] : _props$itemsTop,
+      _props$itemsBottom = props.itemsBottom,
+      itemsBottom = _props$itemsBottom === void 0 ? [] : _props$itemsBottom,
+      rest = _objectWithoutProperties(props, _excluded);
+    return _objectSpread(_objectSpread({}, rest), {}, {
+      itemsTop: itemsTop,
+      itemsBottom: itemsBottom
+    });
+  }, [props]);
+}

package/build/es/model/hook/_use-model-state.js

@@ -0,0 +1,4 @@
+import useModelContext from './_use-model-context';
+export default function useModelState() {
+  return useModelContext().state;
+}

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

@@ -0,0 +1,10 @@
+export { default as useChildren } from './use-children';
+export { default as useVisible } from './use-visible';
+export { default as useCollapsed } from './use-collapsed';
+export { default as useItemsTop } from './use-items-top';
+export { default as useItemsBottom } from './use-items-bottom';
+export { default as useQuickTop } from './use-quick-top';
+
+// handlers
+export { default as useHandleCollapsedChange } from './use-handle-collapsed-change';
+export { default as useHandleGoTop } from './use-handle-go-top';

package/build/es/model/hook/use-children.js

@@ -0,0 +1,4 @@
+import useModelProps from './_use-model-props';
+export default function useChildren() {
+  return useModelProps().children;
+}

package/build/es/model/hook/use-collapsed.js

@@ -0,0 +1,9 @@
+import useModelProps from './_use-model-props';
+import useModelState from './_use-model-state';
+export default function useCollapsed() {
+  var _useModelProps = useModelProps(),
+    valueInProps = _useModelProps.collapsed;
+  var _useModelState = useModelState(),
+    valueInState = _useModelState.collapsed;
+  return valueInProps !== null && valueInProps !== void 0 ? valueInProps : valueInState;
+}

package/build/es/model/hook/use-dispatch-set-collapsed.js

@@ -0,0 +1,12 @@
+import { useCallback } from 'react';
+import { EAction } from '../enum';
+import useModelDispatch from './_use-model-dispatch';
+export default function useDispatchSetCollapsed() {
+  var dispatch = useModelDispatch();
+  return useCallback(function (payload) {
+    return dispatch({
+      type: EAction.SET_COLLAPSED,
+      payload: payload
+    });
+  }, [dispatch]);
+}

package/build/es/model/hook/use-dispatch-set-quick-top-visible.js

@@ -0,0 +1,12 @@
+import { useCallback } from 'react';
+import { EAction } from '../enum';
+import useModelDispatch from './_use-model-dispatch';
+export default function useDispatchSetQuickTopVisible() {
+  var dispatch = useModelDispatch();
+  return useCallback(function (payload) {
+    return dispatch({
+      type: EAction.SET_QUICK_TOP_VISIBLE,
+      payload: payload
+    });
+  }, [dispatch]);
+}

package/build/es/model/hook/use-effect-quick-top.js

@@ -0,0 +1,33 @@
+import { useCallback, useEffect } from 'react';
+import { QUICK_TOP_VISIBLE_OFFSET } from '../const';
+import useModelProps from './_use-model-props';
+import useVisible from './use-visible';
+import useCollapsed from './use-collapsed';
+import useHandleSetQuickTopVisible from './use-handle-set-quick-top-visible';
+export default function useEffectQuickTop() {
+  var _useModelProps = useModelProps(),
+    quickTopContainer = _useModelProps.quickTopContainer;
+  var visible = useVisible();
+  var collapsed = useCollapsed();
+  var handleSetQuickTopVisible = useHandleSetQuickTopVisible();
+  var handleToggleVisible = useCallback(function () {
+    if (!quickTopContainer) {
+      return;
+    }
+    handleSetQuickTopVisible((quickTopContainer.scrollY || quickTopContainer.scrollTop) > QUICK_TOP_VISIBLE_OFFSET);
+  }, [quickTopContainer, handleSetQuickTopVisible]);
+
+  // container 变化导致 handleToggleVisible 变化，此时需要执行一次
+  useEffect(handleToggleVisible, [handleToggleVisible]);
+
+  // 对 container 进行 scroll 的事件绑定
+  useEffect(function () {
+    if (!quickTopContainer || !visible || collapsed) {
+      return;
+    }
+    quickTopContainer.addEventListener('scroll', handleToggleVisible);
+    return function () {
+      return quickTopContainer.removeEventListener('scroll', handleToggleVisible);
+    };
+  }, [visible, collapsed, quickTopContainer, handleToggleVisible]);
+}

package/build/es/model/hook/use-effect-toggle-body-class.js

@@ -0,0 +1,18 @@
+import { useEffect } from 'react';
+import { triggerWindowResize } from '@alicloud/mere-dom';
+import { toggleBodyClass } from '../util';
+import useCollapsed from './use-collapsed';
+export default function useEffectToggleBodyClass() {
+  var collapsed = useCollapsed();
+  useEffect(function () {
+    if (collapsed) {
+      return;
+    }
+    toggleBodyClass();
+    triggerWindowResize();
+    return function () {
+      toggleBodyClass(false);
+      triggerWindowResize();
+    };
+  }, [collapsed]);
+}

package/build/es/model/hook/use-effects.js

@@ -0,0 +1,6 @@
+import useEffectToggleBodyClass from './use-effect-toggle-body-class';
+import useEffectQuickTop from './use-effect-quick-top';
+export default function useEffects() {
+  useEffectToggleBodyClass();
+  useEffectQuickTop();
+}

package/build/es/model/hook/use-handle-collapsed-change.js

@@ -0,0 +1,14 @@
+import { useCallback } from 'react';
+import useCollapsed from './use-collapsed';
+import useDispatchSetCollapsed from './use-dispatch-set-collapsed';
+import useModelProps from './_use-model-props';
+export default function useHandleCollapsedChange() {
+  var _useModelProps = useModelProps(),
+    onCollapsedChange = _useModelProps.onCollapsedChange;
+  var collapsed = !useCollapsed(); // 取反一下
+  var dispatchSetCollapsed = useDispatchSetCollapsed();
+  return useCallback(function () {
+    dispatchSetCollapsed(collapsed);
+    onCollapsedChange === null || onCollapsedChange === void 0 ? void 0 : onCollapsedChange(collapsed);
+  }, [collapsed, dispatchSetCollapsed, onCollapsedChange]);
+}

package/build/es/model/hook/use-handle-go-top.js

@@ -0,0 +1,15 @@
+import { useCallback } from 'react';
+import { scrollTo } from '@alicloud/mere-dom';
+import useQuickTop from './use-quick-top';
+export default function useHandleGoTop() {
+  var _useQuickTop = useQuickTop(),
+    container = _useQuickTop.container;
+  return useCallback(function () {
+    if (!container) {
+      return;
+    }
+    scrollTo(container, {
+      top: 0
+    });
+  }, [container]);
+}

package/build/es/model/hook/use-handle-set-quick-top-visible.js

@@ -0,0 +1,12 @@
+import { useCallback } from 'react';
+import useDispatchSetQuickTopVisible from './use-dispatch-set-quick-top-visible';
+import useModelProps from './_use-model-props';
+export default function useHandleSetQuickTopVisible() {
+  var _useModelProps = useModelProps(),
+    onQuickTopVisibleChange = _useModelProps.onQuickTopVisibleChange;
+  var dispatchSetQuickTopVisible = useDispatchSetQuickTopVisible();
+  return useCallback(function (visible) {
+    dispatchSetQuickTopVisible(visible);
+    onQuickTopVisibleChange === null || onQuickTopVisibleChange === void 0 ? void 0 : onQuickTopVisibleChange(visible);
+  }, [dispatchSetQuickTopVisible, onQuickTopVisibleChange]);
+}

package/build/es/model/hook/use-items-bottom.js

@@ -0,0 +1,4 @@
+import useModelProps from './_use-model-props';
+export default function useItemsBottom() {
+  return useModelProps().itemsBottom;
+}

package/build/es/model/hook/use-items-top.js

@@ -0,0 +1,4 @@
+import useModelProps from './_use-model-props';
+export default function useItemsTop() {
+  return useModelProps().itemsTop;
+}

package/build/es/model/hook/use-quick-top.js

@@ -0,0 +1,12 @@
+import useModelProps from './_use-model-props';
+import useModelState from './_use-model-state';
+export default function useQuickTop() {
+  var _useModelProps = useModelProps(),
+    quickTopContainer = _useModelProps.quickTopContainer;
+  var _useModelState = useModelState(),
+    quickTopVisible = _useModelState.quickTopVisible;
+  return {
+    container: quickTopContainer,
+    visible: quickTopVisible
+  };
+}

package/build/es/model/hook/use-visible.js

@@ -0,0 +1,7 @@
+import useModelProps from './_use-model-props';
+export default function useVisible() {
+  var _useModelProps = useModelProps(),
+    _useModelProps$visibl = _useModelProps.visible,
+    visible = _useModelProps$visibl === void 0 ? true : _useModelProps$visibl;
+  return visible;
+}

package/build/es/model/index.js

@@ -0,0 +1,3 @@
+export { default } from './provider';
+export { BODY_CLASS_WITH_SIDE_PANEL } from './const';
+export * from './hook';

package/build/es/model/lifecycle/index.js

@@ -0,0 +1,5 @@
+import useEffects from '../hook/use-effects';
+export default function Lifecycle() {
+  useEffects();
+  return null;
+}

package/build/es/model/provider/index.js

@@ -0,0 +1,30 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useCallback, useReducer } from 'react';
+import useIsUnmounted from '@alicloud/react-hook-is-unmounted';
+import { DEFAULT_CONTEXT_STATE } from '../const';
+import reducer from '../reducer';
+import Context from '../context';
+import Lifecycle from '../lifecycle';
+export default function Provider(_ref) {
+  var props = _ref.props,
+    children = _ref.children;
+  var isUnmounted = useIsUnmounted();
+  var _useReducer = useReducer(reducer, DEFAULT_CONTEXT_STATE),
+    _useReducer2 = _slicedToArray(_useReducer, 2),
+    state = _useReducer2[0],
+    dispatch = _useReducer2[1];
+  var safeDispatch = useCallback(function (action) {
+    // 不必再担心异步回调 dispatch 可能发生的错误
+    if (isUnmounted()) {
+      return;
+    }
+    dispatch(action);
+  }, [isUnmounted, dispatch]);
+  return /*#__PURE__*/React.createElement(Context.Provider, {
+    value: {
+      props: props,
+      state: state,
+      dispatch: safeDispatch
+    }
+  }, children, /*#__PURE__*/React.createElement(Lifecycle, null));
+}

package/build/es/model/reducer/index.js

@@ -0,0 +1,13 @@
+import { EAction } from '../enum';
+import reduceSetCollapsed from './reduce-set-collapsed';
+import reduceSetQuickTopVisible from './reduce-set-quick-top-visible';
+export default function reducer(state, action) {
+  switch (action.type) {
+    case EAction.SET_COLLAPSED:
+      return reduceSetCollapsed(state, action.payload);
+    case EAction.SET_QUICK_TOP_VISIBLE:
+      return reduceSetQuickTopVisible(state, action.payload);
+    default:
+      return state;
+  }
+}

package/build/es/model/reducer/reduce-set-collapsed.js

@@ -0,0 +1,8 @@
+import update from 'immutability-helper';
+export default function reduceSetCollapsed(state, payload) {
+  return update(state, {
+    collapsed: {
+      $set: payload
+    }
+  });
+}

package/build/es/model/reducer/reduce-set-quick-top-visible.js

@@ -0,0 +1,8 @@
+import update from 'immutability-helper';
+export default function reduceSetQuickTopVisible(state, payload) {
+  return update(state, {
+    quickTopVisible: {
+      $set: payload
+    }
+  });
+}

package/build/es/model/types/action.js

@@ -0,0 +1 @@
+export {};

package/build/es/model/types/common.js

@@ -0,0 +1 @@
+export {};