yootd 0.0.60 → 0.0.61

package/dist/aside/components/SortableItem.scss

@@ -4,6 +4,7 @@
     padding: 12px 16px;
     box-sizing: border-box;
     cursor: pointer;
+    background-color: #fff;
     &-top {
       display: flex;
       justify-content: space-between;
@@ -77,6 +78,7 @@
     right: 16px;
     height: 1px;
     background-color: #e5e5e5;
+    z-index: 100;
   }
   &__content-active {
     background-color: #d1eaff;
@@ -89,5 +91,6 @@
     width: 4px;
     height: 100%;
     background-color: #4d8de2;
+
   }
 }

package/dist/aside/index.js

@@ -12,7 +12,7 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { DndContext, KeyboardSensor, PointerSensor, closestCenter, useSensor, useSensors } from '@dnd-kit/core';
 import { SortableContext, arrayMove, sortableKeyboardCoordinates, verticalListSortingStrategy } from '@dnd-kit/sortable';
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useBem } from "../hooks/useBem";
 import { AddBtnIcon } from "./components/AddBtnIcon";
 import SortableItem from "./components/SortableItem";
@@ -26,6 +26,8 @@ export var Aside = function Aside(_ref) {
     activeKey = _ref.activeKey,
     title = _ref.title,
     data = _ref.data,
+    _ref$overflow = _ref.overflow,
+    overflow = _ref$overflow === void 0 ? false : _ref$overflow,
     _ref$titleShow = _ref.titleShow,
     titleShow = _ref$titleShow === void 0 ? true : _ref$titleShow,
     _ref$addBtnIcon = _ref.addBtnIcon,
@@ -43,8 +45,12 @@ export var Aside = function Aside(_ref) {
     onEdit = _ref.onEdit,
     onDel = _ref.onDel,
     onSwitch = _ref.onSwitch,
-    onDragEnd = _ref.onDragEnd;
+    onDragEnd = _ref.onDragEnd,
+    onScrollBottom = _ref.onScrollBottom,
+    _ref$bottomThreshold = _ref.bottomThreshold,
+    bottomThreshold = _ref$bottomThreshold === void 0 ? 50 : _ref$bottomThreshold;
   var mb = useBem('aside');
+  var asideRef = useRef(null);
   // 当前选择的key
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
@@ -121,6 +127,28 @@ export var Aside = function Aside(_ref) {
     }
   };
 
+  // 添加滚动处理函数
+  var handleScroll = useCallback(function () {
+    if (!asideRef.current || !onScrollBottom) return;
+    var _asideRef$current = asideRef.current,
+      scrollTop = _asideRef$current.scrollTop,
+      scrollHeight = _asideRef$current.scrollHeight,
+      clientHeight = _asideRef$current.clientHeight;
+    if (scrollTop + clientHeight + bottomThreshold >= scrollHeight) {
+      onScrollBottom();
+    }
+  }, [onScrollBottom, bottomThreshold]);
+
+  // 添加滚动监听
+  useEffect(function () {
+    var asideElement = asideRef.current;
+    if (!asideElement || !overflow) return;
+    asideElement.addEventListener('scroll', handleScroll);
+    return function () {
+      asideElement.removeEventListener('scroll', handleScroll);
+    };
+  }, [handleScroll, overflow]);
+
   // 给key设置初始值
   useEffect(function () {
     if (activeKey) {
@@ -137,10 +165,13 @@ export var Aside = function Aside(_ref) {
     }
   }, [data]);
   return /*#__PURE__*/React.createElement("div", {
+    ref: asideRef,
     className: "".concat(mb),
     style: _objectSpread(_objectSpread({}, style), {}, {
       width: width,
-      height: height
+      height: height,
+      overflowX: overflow ? 'hidden' : 'visible',
+      overflowY: overflow ? 'auto' : 'visible'
     })
   }, titleShow && /*#__PURE__*/React.createElement("div", {
     className: "".concat(mb.b('title'))

package/dist/aside/index.scss

@@ -4,12 +4,15 @@
   box-sizing: border-box;
   &-title {
     border-bottom: 1px solid #e5e5e5;
-    padding: 16px 0px;
-    margin: 0px 16px;
+    padding: 16px 16px;
     box-sizing: border-box;
     display: flex;
     align-items: start;
     justify-content: space-between;
+    background-color: #fff;
+    position: sticky;
+    top: 0;
+    z-index: 999;
     &__title-text {
       font-size: 18px;
       font-weight: bold;
@@ -23,3 +26,21 @@
     }
   }
 }
+// 滚动条宽度
+.yot-aside::-webkit-scrollbar {
+  width: 6px;
+  height: 10px;
+}
+// 滚动条轨道
+.yot-aside::-webkit-scrollbar-track {
+  background: white;
+  border-radius: 2px;
+  height: 10px;
+}
+// 小滑块
+.yot-aside::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.15);
+  border-radius: 10px;
+  height: 10px;
+}
+

package/dist/aside/types/types.d.ts

@@ -1,44 +1,47 @@
-type IdataItem = {
-  key: string;
-  title: string;
-  extra?: string;
-  checked?: boolean;
-};
-export type AsideProps = {
-  width?: number;
-  height?: number | string;
-  style?: React.CSSProperties;
-  activeKey?: string;
-  title?: string;
-  data: IdataItem[];
-  titleShow?: boolean;
-  addBtnIcon?: boolean;
-  editBtnIcon?: boolean;
-  delBtnIcon?: boolean;
-  switchBtnIcon?: boolean;
-  dragBtnIcon?: boolean;
-  onClick?: (key: string, e: IdataItem) => void;
-  onAdd?: () => void;
-  onEdit?: (key: string, e: IdataItem) => void;
-  onDel?: (key: string, e: IdataItem) => void;
-  onSwitch?: (
-    changeValue: { key: string; checked: boolean },
-    data: IdataItem[],
-  ) => void;
-  onDragEnd?: (data: IdataItem[]) => void;
-};
-export type AsideItemProps = {
-  activeKey: string;
-  id: string;
-  title: string;
-  editBtnIcon?: boolean;
-  delBtnIcon?: boolean;
-  switchBtnIcon?: boolean;
-  dragBtnIcon?: boolean;
-  checked?: boolean;
-  extra?: string;
-  onClick?: (key: string, e: IdataItem) => void;
-  onEdit?: (key: string, e: IdataItem) => void;
-  onDel?: (key: string, e: IdataItem) => void;
-  onSwitch?: (key: string, e: boolean) => void;
-};
+type IdataItem = {
+  key: string;
+  title: string;
+  extra?: string;
+  checked?: boolean;
+};
+export type AsideProps = {
+  width?: number;
+  height?: number | string;
+  style?: React.CSSProperties;
+  activeKey?: string;
+  title?: string;
+  data: IdataItem[];
+  overflow?: boolean;
+  titleShow?: boolean;
+  addBtnIcon?: boolean;
+  editBtnIcon?: boolean;
+  delBtnIcon?: boolean;
+  switchBtnIcon?: boolean;
+  dragBtnIcon?: boolean;
+  onClick?: (key: string, e: IdataItem) => void;
+  onAdd?: () => void;
+  onEdit?: (key: string, e: IdataItem) => void;
+  onDel?: (key: string, e: IdataItem) => void;
+  onSwitch?: (
+    changeValue: { key: string; checked: boolean },
+    data: IdataItem[],
+  ) => void;
+  onDragEnd?: (data: IdataItem[]) => void;
+  onScrollBottom?: () => void;
+  bottomThreshold?: number;
+};
+export type AsideItemProps = {
+  activeKey: string;
+  id: string;
+  title: string;
+  editBtnIcon?: boolean;
+  delBtnIcon?: boolean;
+  switchBtnIcon?: boolean;
+  dragBtnIcon?: boolean;
+  checked?: boolean;
+  extra?: string;
+  onClick?: (key: string, e: IdataItem) => void;
+  onEdit?: (key: string, e: IdataItem) => void;
+  onDel?: (key: string, e: IdataItem) => void;
+  onSwitch?: (key: string, e: boolean) => void;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yootd",
-  "version": "0.0.60",
+  "version": "0.0.61",
   "description": "A react library developed with dumi",
   "license": "MIT",
   "module": "dist/index.js",