@dckj-npm/dc-material 0.1.126 → 0.1.128

package/es/components/message-list/message-list-item.scss

@@ -55,6 +55,6 @@
     }
 
   }
-  
+
 
 }

package/es/components/notice-bar/index.scss

@@ -30,14 +30,14 @@
             overflow: hidden; // 确保超出部分不显示
             height: 20px; // 设置合适的高度
           }
-          
+
           .notice-bar__panel__item-loop > div {
             position: absolute; // 绝对定位
             width: 100%;
             height: 20px;
             animation: scrollUp 4s linear infinite; // 动画持续时间和类型
           }
-          
+
           @keyframes scrollUp {
             0% {
               transform: translateY(100%); // 从底部开始
@@ -46,11 +46,11 @@
               transform: translateY(-200%); // 滚动到顶部
             }
           }
-          
-    
+
+
     }
-          
-            
+
+
 }
 //动画
 .anim {

package/es/components/stream-list/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * 菜单列表
+ */
+import StreamList from './stream-list';
+export type { StreamListProps } from './stream-list';
+export { StreamList };

package/es/components/stream-list/index.js

@@ -0,0 +1,6 @@
+/**
+ * 菜单列表
+ */
+
+import StreamList from "./stream-list";
+export { StreamList };

package/es/components/stream-list/index.scss

@@ -0,0 +1,26 @@
+@import '../../variables.scss';
+
+.stream-list-container {
+
+  .refresh-indicator {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 40px;
+    font-size: 14px;
+    color: #333;
+    pointer-events: none;
+  }
+
+  // 加载更多提示的样式
+  .spin, .loading-text {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 40px; // 提示高度
+    font-size: 14px;
+    color: #666;
+  }
+
+}
+

package/es/components/stream-list/stream-list.d.ts

@@ -0,0 +1,54 @@
+import type { ReactNode } from 'react';
+import React from 'react';
+import './index.scss';
+export interface PageHelperType<T = any> {
+    page: number;
+    rows: number;
+    isLastPage: boolean;
+    total: number;
+    list: T[];
+}
+export interface StreamListProps {
+    /**
+     * 子组件内容
+     */
+    children: ReactNode;
+    /**
+     * 请求下一页数据的函数
+     * @param page
+     * @param rows
+     */
+    onNextPage?: (options: {
+        page: number;
+        rows?: number;
+    }) => Promise<PageHelperType>;
+    /**
+     * 请求刷新数据的函数
+     */
+    onRefreshPage?: () => Promise<PageHelperType>;
+    /**
+     * 是否是最后一页
+     */
+    isLastPage?: boolean;
+    /**
+     * 当前页
+     */
+    nowPage?: number;
+    /**
+     * 刷新中的文字提示
+     */
+    refreshingText?: string;
+    /**
+     * 加载中的文字提示
+     */
+    loadingText?: string;
+    /**
+     * 加载更多的文字提示
+     */
+    loadMoreText?: string;
+}
+/**
+ * StreamList 组件
+ */
+declare const StreamList: React.FC<StreamListProps>;
+export default StreamList;

package/es/components/stream-list/stream-list.js

@@ -0,0 +1,159 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React, { useEffect, useRef, useState } from 'react';
+import "./index.scss";
+/**
+ * StreamList 组件
+ */
+var StreamList = function StreamList(_ref) {
+  var children = _ref.children,
+    onNextPage = _ref.onNextPage,
+    onRefreshPage = _ref.onRefreshPage,
+    _ref$refreshingText = _ref.refreshingText,
+    refreshingText = _ref$refreshingText === void 0 ? '正在刷新中...' : _ref$refreshingText,
+    _ref$loadingText = _ref.loadingText,
+    loadingText = _ref$loadingText === void 0 ? '加载中...' : _ref$loadingText,
+    _ref$loadMoreText = _ref.loadMoreText,
+    loadMoreText = _ref$loadMoreText === void 0 ? '加载更多' : _ref$loadMoreText,
+    _ref$isLastPage = _ref.isLastPage,
+    isLastPage = _ref$isLastPage === void 0 ? false : _ref$isLastPage,
+    _ref$nowPage = _ref.nowPage,
+    nowPage = _ref$nowPage === void 0 ? 1 : _ref$nowPage;
+  var _useState = useState(false),
+    isLoading = _useState[0],
+    setIsLoading = _useState[1];
+  var _useState2 = useState(false),
+    isRefreshing = _useState2[0],
+    setIsRefreshing = _useState2[1];
+  // 下拉刷新的阈值
+  var threshold = 50;
+  // 最大下拉距离
+  var maxPullDistance = 100;
+  var _useState3 = useState(0),
+    pullDistance = _useState3[0],
+    setPullDistance = _useState3[1];
+  var startYRef = useRef(0);
+  var _useState4 = useState(false),
+    isDragging = _useState4[0],
+    setIsDragging = _useState4[1];
+  var observerRef = useRef(null);
+  // 防止初始加载直接请求下一页
+  var hasInitialLoad = useRef(false);
+
+  // 监听加载下一页数据
+  useEffect(function () {
+    if (isRefreshing || isLastPage) {
+      // @ts-ignore
+      return;
+    }
+    var spinElement = document.querySelector('.spin');
+    if (spinElement && !observerRef.current) {
+      // 创建 IntersectionObserver 观察器
+      observerRef.current = new IntersectionObserver(function (entries) {
+        var entry = entries[0];
+        if (entry.isIntersecting && !isLoading) {
+          setIsLoading(true);
+          var nextPage = nowPage + 1;
+          onNextPage({
+            page: nextPage
+          }).then(function (res) {})["catch"](function (err) {
+            console.error('加载下一页失败:', err);
+          })["finally"](function () {
+            return setIsLoading(false);
+          });
+        }
+      }, {
+        threshold: 0.4
+      });
+      // 观察加载更多元素
+      observerRef.current.observe(spinElement);
+    }
+    return function () {
+      if (observerRef.current) {
+        // 清除观察者
+        observerRef.current.disconnect();
+        observerRef.current = null;
+      }
+    };
+  }, [nowPage, isLoading, isRefreshing, isLastPage]);
+
+  // 初始化加载标记
+  useEffect(function () {
+    hasInitialLoad.current = true;
+  }, []);
+
+  // 处理触摸和鼠标事件
+  var handleTouchStart = function handleTouchStart(e) {
+    startYRef.current = 'touches' in e ? e.touches[0].clientY : e.clientY;
+    setIsDragging(true);
+  };
+  var handleTouchMove = function handleTouchMove(e) {
+    if (isRefreshing || !isDragging && !('touches' in e)) return;
+    var clientY = 'touches' in e ? e.touches[0].clientY : e.clientY;
+    var distance = clientY - startYRef.current;
+
+    // 更新下拉距离
+    if (distance > 0 && distance <= maxPullDistance) {
+      setPullDistance(distance);
+    } else if (distance > maxPullDistance) {
+      setPullDistance(maxPullDistance);
+    }
+  };
+  var handleTouchEnd = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            setIsDragging(false);
+            if (pullDistance > threshold) {
+              setIsRefreshing(true);
+              setPullDistance(0);
+              onRefreshPage().then(function (res) {})["catch"](function (err) {
+                console.error('刷新失败:', err);
+              })["finally"](function () {
+                setIsRefreshing(false);
+              });
+            } else {
+              setPullDistance(0); // 重置下拉距离
+            }
+          case 2:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function handleTouchEnd() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  return /*#__PURE__*/React.createElement("div", {
+    onTouchStart: handleTouchStart,
+    onTouchMove: handleTouchMove,
+    onTouchEnd: handleTouchEnd,
+    onMouseDown: handleTouchStart,
+    onMouseMove: handleTouchMove,
+    onMouseUp: handleTouchEnd,
+    className: "stream-list-container"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "refresh-indicator",
+    style: {
+      position: 'fixed',
+      top: 0,
+      left: 0,
+      right: 0,
+      transform: "translateY(" + (isRefreshing ? threshold : pullDistance) + "px)",
+      transition: isRefreshing || pullDistance === 0 ? 'transform 0.3s ease' : 'none'
+    }
+  }, isRefreshing && /*#__PURE__*/React.createElement("span", null, refreshingText)), /*#__PURE__*/React.createElement("div", {
+    style: {
+      transform: "translateY(" + (isRefreshing ? threshold : pullDistance) + "px)",
+      transition: 'transform 0.3s ease'
+    }
+  }, children), !isRefreshing && !isLastPage && (isLoading ? /*#__PURE__*/React.createElement("div", {
+    className: "loading-text"
+  }, loadingText) : /*#__PURE__*/React.createElement("div", {
+    className: "spin"
+  }, loadMoreText)));
+};
+StreamList.displayName = 'StreamList';
+export default StreamList;

package/es/index.d.ts

@@ -38,5 +38,7 @@ export type { GoodsCardListProps } from './components/goods-card-list';
 export { GoodsCardList, GoodsCardListCommon } from './components/goods-card-list';
 export type { RichTextProps } from './components/rich-text';
 export { RichText } from './components/rich-text';
+export type { StreamListProps } from './components/stream-list';
+export { StreamList } from './components/stream-list';
 declare const bizCssPrefix = "bizpack";
 export { bizCssPrefix };

package/es/index.js

@@ -74,5 +74,9 @@ export { GoodsCardList, GoodsCardListCommon } from "./components/goods-card-list
 // 富文本
 
 export { RichText } from "./components/rich-text";
+
+// 富文本
+
+export { StreamList } from "./components/stream-list";
 var bizCssPrefix = 'bizpack';
 export { bizCssPrefix };

package/lib/components/message-list/message-list-item.scss

@@ -55,6 +55,6 @@
     }
 
   }
-  
+
 
 }

package/lib/components/notice-bar/index.scss

@@ -30,14 +30,14 @@
             overflow: hidden; // 确保超出部分不显示
             height: 20px; // 设置合适的高度
           }
-          
+
           .notice-bar__panel__item-loop > div {
             position: absolute; // 绝对定位
             width: 100%;
             height: 20px;
             animation: scrollUp 4s linear infinite; // 动画持续时间和类型
           }
-          
+
           @keyframes scrollUp {
             0% {
               transform: translateY(100%); // 从底部开始
@@ -46,11 +46,11 @@
               transform: translateY(-200%); // 滚动到顶部
             }
           }
-          
-    
+
+
     }
-          
-            
+
+
 }
 //动画
 .anim {

package/lib/components/stream-list/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * 菜单列表
+ */
+import StreamList from './stream-list';
+export type { StreamListProps } from './stream-list';
+export { StreamList };

package/lib/components/stream-list/index.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+var _streamList = _interopRequireDefault(require("./stream-list"));
+exports.StreamList = _streamList["default"];

package/lib/components/stream-list/index.scss

@@ -0,0 +1,26 @@
+@import '../../variables.scss';
+
+.stream-list-container {
+
+  .refresh-indicator {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 40px;
+    font-size: 14px;
+    color: #333;
+    pointer-events: none;
+  }
+
+  // 加载更多提示的样式
+  .spin, .loading-text {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 40px; // 提示高度
+    font-size: 14px;
+    color: #666;
+  }
+
+}
+

package/lib/components/stream-list/stream-list.d.ts

@@ -0,0 +1,54 @@
+import type { ReactNode } from 'react';
+import React from 'react';
+import './index.scss';
+export interface PageHelperType<T = any> {
+    page: number;
+    rows: number;
+    isLastPage: boolean;
+    total: number;
+    list: T[];
+}
+export interface StreamListProps {
+    /**
+     * 子组件内容
+     */
+    children: ReactNode;
+    /**
+     * 请求下一页数据的函数
+     * @param page
+     * @param rows
+     */
+    onNextPage?: (options: {
+        page: number;
+        rows?: number;
+    }) => Promise<PageHelperType>;
+    /**
+     * 请求刷新数据的函数
+     */
+    onRefreshPage?: () => Promise<PageHelperType>;
+    /**
+     * 是否是最后一页
+     */
+    isLastPage?: boolean;
+    /**
+     * 当前页
+     */
+    nowPage?: number;
+    /**
+     * 刷新中的文字提示
+     */
+    refreshingText?: string;
+    /**
+     * 加载中的文字提示
+     */
+    loadingText?: string;
+    /**
+     * 加载更多的文字提示
+     */
+    loadMoreText?: string;
+}
+/**
+ * StreamList 组件
+ */
+declare const StreamList: React.FC<StreamListProps>;
+export default StreamList;

package/lib/components/stream-list/stream-list.js

@@ -0,0 +1,166 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports["default"] = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _react = _interopRequireWildcard(require("react"));
+require("./index.scss");
+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; }
+/**
+ * StreamList 组件
+ */
+var StreamList = function StreamList(_ref) {
+  var children = _ref.children,
+    onNextPage = _ref.onNextPage,
+    onRefreshPage = _ref.onRefreshPage,
+    _ref$refreshingText = _ref.refreshingText,
+    refreshingText = _ref$refreshingText === void 0 ? '正在刷新中...' : _ref$refreshingText,
+    _ref$loadingText = _ref.loadingText,
+    loadingText = _ref$loadingText === void 0 ? '加载中...' : _ref$loadingText,
+    _ref$loadMoreText = _ref.loadMoreText,
+    loadMoreText = _ref$loadMoreText === void 0 ? '加载更多' : _ref$loadMoreText,
+    _ref$isLastPage = _ref.isLastPage,
+    isLastPage = _ref$isLastPage === void 0 ? false : _ref$isLastPage,
+    _ref$nowPage = _ref.nowPage,
+    nowPage = _ref$nowPage === void 0 ? 1 : _ref$nowPage;
+  var _useState = (0, _react.useState)(false),
+    isLoading = _useState[0],
+    setIsLoading = _useState[1];
+  var _useState2 = (0, _react.useState)(false),
+    isRefreshing = _useState2[0],
+    setIsRefreshing = _useState2[1];
+  // 下拉刷新的阈值
+  var threshold = 50;
+  // 最大下拉距离
+  var maxPullDistance = 100;
+  var _useState3 = (0, _react.useState)(0),
+    pullDistance = _useState3[0],
+    setPullDistance = _useState3[1];
+  var startYRef = (0, _react.useRef)(0);
+  var _useState4 = (0, _react.useState)(false),
+    isDragging = _useState4[0],
+    setIsDragging = _useState4[1];
+  var observerRef = (0, _react.useRef)(null);
+  // 防止初始加载直接请求下一页
+  var hasInitialLoad = (0, _react.useRef)(false);
+
+  // 监听加载下一页数据
+  (0, _react.useEffect)(function () {
+    if (isRefreshing || isLastPage) {
+      // @ts-ignore
+      return;
+    }
+    var spinElement = document.querySelector('.spin');
+    if (spinElement && !observerRef.current) {
+      // 创建 IntersectionObserver 观察器
+      observerRef.current = new IntersectionObserver(function (entries) {
+        var entry = entries[0];
+        if (entry.isIntersecting && !isLoading) {
+          setIsLoading(true);
+          var nextPage = nowPage + 1;
+          onNextPage({
+            page: nextPage
+          }).then(function (res) {})["catch"](function (err) {
+            console.error('加载下一页失败:', err);
+          })["finally"](function () {
+            return setIsLoading(false);
+          });
+        }
+      }, {
+        threshold: 0.4
+      });
+      // 观察加载更多元素
+      observerRef.current.observe(spinElement);
+    }
+    return function () {
+      if (observerRef.current) {
+        // 清除观察者
+        observerRef.current.disconnect();
+        observerRef.current = null;
+      }
+    };
+  }, [nowPage, isLoading, isRefreshing, isLastPage]);
+
+  // 初始化加载标记
+  (0, _react.useEffect)(function () {
+    hasInitialLoad.current = true;
+  }, []);
+
+  // 处理触摸和鼠标事件
+  var handleTouchStart = function handleTouchStart(e) {
+    startYRef.current = 'touches' in e ? e.touches[0].clientY : e.clientY;
+    setIsDragging(true);
+  };
+  var handleTouchMove = function handleTouchMove(e) {
+    if (isRefreshing || !isDragging && !('touches' in e)) return;
+    var clientY = 'touches' in e ? e.touches[0].clientY : e.clientY;
+    var distance = clientY - startYRef.current;
+
+    // 更新下拉距离
+    if (distance > 0 && distance <= maxPullDistance) {
+      setPullDistance(distance);
+    } else if (distance > maxPullDistance) {
+      setPullDistance(maxPullDistance);
+    }
+  };
+  var handleTouchEnd = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
+      return _regenerator["default"].wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            setIsDragging(false);
+            if (pullDistance > threshold) {
+              setIsRefreshing(true);
+              setPullDistance(0);
+              onRefreshPage().then(function (res) {})["catch"](function (err) {
+                console.error('刷新失败:', err);
+              })["finally"](function () {
+                setIsRefreshing(false);
+              });
+            } else {
+              setPullDistance(0); // 重置下拉距离
+            }
+          case 2:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function handleTouchEnd() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    onTouchStart: handleTouchStart,
+    onTouchMove: handleTouchMove,
+    onTouchEnd: handleTouchEnd,
+    onMouseDown: handleTouchStart,
+    onMouseMove: handleTouchMove,
+    onMouseUp: handleTouchEnd,
+    className: "stream-list-container"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "refresh-indicator",
+    style: {
+      position: 'fixed',
+      top: 0,
+      left: 0,
+      right: 0,
+      transform: "translateY(" + (isRefreshing ? threshold : pullDistance) + "px)",
+      transition: isRefreshing || pullDistance === 0 ? 'transform 0.3s ease' : 'none'
+    }
+  }, isRefreshing && /*#__PURE__*/_react["default"].createElement("span", null, refreshingText)), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      transform: "translateY(" + (isRefreshing ? threshold : pullDistance) + "px)",
+      transition: 'transform 0.3s ease'
+    }
+  }, children), !isRefreshing && !isLastPage && (isLoading ? /*#__PURE__*/_react["default"].createElement("div", {
+    className: "loading-text"
+  }, loadingText) : /*#__PURE__*/_react["default"].createElement("div", {
+    className: "spin"
+  }, loadMoreText)));
+};
+StreamList.displayName = 'StreamList';
+var _default = exports["default"] = StreamList;

package/lib/index.d.ts

@@ -38,5 +38,7 @@ export type { GoodsCardListProps } from './components/goods-card-list';
 export { GoodsCardList, GoodsCardListCommon } from './components/goods-card-list';
 export type { RichTextProps } from './components/rich-text';
 export { RichText } from './components/rich-text';
+export type { StreamListProps } from './components/stream-list';
+export { StreamList } from './components/stream-list';
 declare const bizCssPrefix = "bizpack";
 export { bizCssPrefix };

package/lib/index.js

@@ -2,7 +2,7 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
-exports.bizCssPrefix = exports.Title2 = exports.Title1 = exports.TeletextList = exports.TagC = exports.TabMessage = exports.TabContainerItem = exports.TabContainer = exports.Swiper = exports.SearchBar = exports.RichText = exports.Position = exports.NoticeBar = exports.Navigation = exports.MessageList = exports.MenuList = exports.IntegralTask = exports.GridNav = exports.GoodsCardListCommon = exports.GoodsCardList = exports.CustomRadioGroupItem = exports.CustomRadioGroup = exports.Button2 = void 0;
+exports.bizCssPrefix = exports.Title2 = exports.Title1 = exports.TeletextList = exports.TagC = exports.TabMessage = exports.TabContainerItem = exports.TabContainer = exports.Swiper = exports.StreamList = exports.SearchBar = exports.RichText = exports.Position = exports.NoticeBar = exports.Navigation = exports.MessageList = exports.MenuList = exports.IntegralTask = exports.GridNav = exports.GoodsCardListCommon = exports.GoodsCardList = exports.CustomRadioGroupItem = exports.CustomRadioGroup = exports.Button2 = void 0;
 var _swiper = _interopRequireDefault(require("./components/swiper"));
 exports.Swiper = _swiper["default"];
 var _bottomNavigation = _interopRequireDefault(require("./components/bottom-navigation"));
@@ -44,6 +44,8 @@ exports.GoodsCardList = _goodsCardList.GoodsCardList;
 exports.GoodsCardListCommon = _goodsCardList.GoodsCardListCommon;
 var _richText = require("./components/rich-text");
 exports.RichText = _richText.RichText;
+var _streamList = require("./components/stream-list");
+exports.StreamList = _streamList.StreamList;
 // 轮播图
 
 // 底部导航
@@ -84,4 +86,6 @@ exports.RichText = _richText.RichText;
 
 // 富文本
 
+// 富文本
+
 var bizCssPrefix = exports.bizCssPrefix = 'bizpack';