@dckj-npm/dc-material 0.1.357 → 0.1.358

package/es/components/search-bar/search-bar.js

@@ -0,0 +1,73 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["onSearch", "searchText", "autofocus", "placeholder", "onConfirm"];
+import * as React from 'react';
+import { useRef, useState } from "react";
+import searchIcon from "../../assets/icon/search/search.png";
+import deleteIcon from "../../assets/icon/search/delete.png";
+var SearchBar = function SearchBar(props) {
+  var onSearch = props.onSearch,
+    _props$searchText = props.searchText,
+    searchText = _props$searchText === void 0 ? true : _props$searchText,
+    _props$autofocus = props.autofocus,
+    autofocus = _props$autofocus === void 0 ? false : _props$autofocus,
+    _props$placeholder = props.placeholder,
+    placeholder = _props$placeholder === void 0 ? '请输入' : _props$placeholder,
+    onConfirm = props.onConfirm,
+    otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+  var _useState = useState(),
+    searchValue = _useState[0],
+    setSearchValue = _useState[1];
+  var searchInput = useRef(null);
+  var handleChange = function handleChange(e) {
+    setSearchValue(e.target.value); // 更新 state
+  };
+  /**
+   * 触发confirm事件
+   */
+  var confirm = function confirm() {
+    var _searchInput$current;
+    if (onConfirm) {
+      onConfirm(searchValue);
+    }
+    searchInput === null || searchInput === void 0 ? void 0 : (_searchInput$current = searchInput.current) === null || _searchInput$current === void 0 ? void 0 : _searchInput$current.blur();
+  };
+  var handleKeyDown = function handleKeyDown(e) {
+    if (e.key === "Enter") {
+      confirm();
+    }
+  };
+  var clearValue = function clearValue() {
+    setSearchValue('');
+  };
+  return /*#__PURE__*/React.createElement("form", _extends({
+    action: "",
+    className: "search-bar-form"
+  }, otherProps, {
+    onSubmit: confirm
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "search-bar",
+    onClick: onSearch
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "search-bar-icon"
+  }, /*#__PURE__*/React.createElement("img", {
+    src: searchIcon,
+    className: "search-bar-icon-img"
+  })), /*#__PURE__*/React.createElement("input", {
+    className: "search-bar-input",
+    placeholder: placeholder,
+    value: searchValue,
+    autoFocus: autofocus,
+    onChange: handleChange,
+    onKeyDown: handleKeyDown,
+    ref: searchInput
+  }), searchValue ? /*#__PURE__*/React.createElement("img", {
+    className: "search-bar-delete-img",
+    src: deleteIcon,
+    onClick: clearValue
+  }) : '', searchText ? /*#__PURE__*/React.createElement("span", {
+    className: "search-bar-enter",
+    onClick: confirm
+  }, "\u641C\u7D22") : ''));
+};
+export default SearchBar;

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/components/swiper/index.d.ts

@@ -0,0 +1,3 @@
+import Swiper from './swiper';
+export type { ComponentProps } from './swiper';
+export default Swiper;

package/es/components/swiper/index.js

@@ -0,0 +1,2 @@
+import Swiper from "./swiper";
+export default Swiper;

package/es/components/swiper/index.scss

@@ -0,0 +1,20 @@
+.carousel {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  max-width: 600px;
+}
+
+.carousel__wrapper {
+  display: flex;
+  transition: transform ease-in-out;
+}
+
+.carousel__slide {
+  min-width: 100%;
+}
+
+.carousel__slide img {
+  width: 100%;
+  height: auto;
+}

package/es/components/swiper/swiper.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import './index.scss';
+export interface ComponentProps {
+    /**
+     * 切换速度，单位ms
+     */
+    speed?: number;
+    /**
+     * 高度
+     */
+    height: number;
+    /**
+     * 自动播放
+     */
+    autoplay: boolean;
+    /**
+     * 循环播放
+     */
+    loop: boolean;
+    /**
+     * 切换间隔时间，单位ms
+     */
+    delay?: number;
+    /**
+     * 图片路径
+     */
+    picUrls: string[];
+}
+declare const DCSlider: React.FC<ComponentProps>;
+export default DCSlider;

package/es/components/swiper/swiper.js

@@ -0,0 +1,79 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["speed", "autoplay", "loop", "picUrls", "height", "delay"];
+import * as React from 'react';
+import { useEffect, useRef, useState } from 'react';
+import "./index.scss";
+var DCSlider = function DCSlider(_ref) {
+  var _ref$speed = _ref.speed,
+    speed = _ref$speed === void 0 ? 500 : _ref$speed,
+    autoplay = _ref.autoplay,
+    loop = _ref.loop,
+    _ref$picUrls = _ref.picUrls,
+    picUrls = _ref$picUrls === void 0 ? [] : _ref$picUrls,
+    height = _ref.height,
+    delay = _ref.delay,
+    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var _useState = useState(0),
+    currentIndex = _useState[0],
+    setCurrentIndex = _useState[1];
+  var autoplayRef = useRef(null);
+
+  // 切换到下一张
+  var nextSlide = function nextSlide() {
+    if (currentIndex < picUrls.length - 1) {
+      setCurrentIndex(currentIndex + 1);
+    } else if (loop) {
+      setCurrentIndex(0);
+    } else {
+      stopAutoplay();
+    }
+  };
+
+  // 启动自动播放
+  var startAutoplay = function startAutoplay() {
+    if (autoplay && !autoplayRef.current) {
+      autoplayRef.current = setInterval(function () {
+        nextSlide();
+      }, delay);
+    }
+  };
+
+  // 停止自动播放
+  var stopAutoplay = function stopAutoplay() {
+    if (autoplayRef.current) {
+      clearInterval(autoplayRef.current);
+      autoplayRef.current = null;
+    }
+  };
+  useEffect(function () {
+    startAutoplay();
+    return function () {
+      return stopAutoplay();
+    };
+  }, [autoplay, currentIndex]);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: "carousel",
+    style: {
+      height: height ? height + "px" : 'auto'
+    }
+  }, otherProps), /*#__PURE__*/React.createElement("div", {
+    className: "carousel__wrapper",
+    style: {
+      transform: "translateX(-" + currentIndex * 100 + "%)",
+      transitionDuration: speed + "ms"
+    }
+  }, picUrls.map(function (url, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: index,
+      className: "carousel__slide"
+    }, /*#__PURE__*/React.createElement("img", {
+      src: url,
+      alt: "Slide " + index,
+      style: {
+        height: height ? height + "px" : '100%'
+      }
+    }));
+  })));
+};
+export default DCSlider;

package/es/components/tab/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * 标签tag
+ */
+import Tab from './tab';
+export type { TabProps } from './tab';
+export default Tab;

package/es/components/tab/index.js

@@ -0,0 +1,5 @@
+/**
+ * 标签tag
+ */
+import Tab from "./tab";
+export default Tab;

package/es/components/tab/index.scss

@@ -0,0 +1,44 @@
+.tab-message {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}
+.tabs__container {
+  display: inline-block;
+  padding: 5px 17px;
+  border-radius: 19px;
+  background-color: #FFFFFF;
+  color: #666666;
+  font-size: 15px;
+  cursor: pointer;
+  margin-right: 6px;
+  letter-spacing: 2px;
+  position: relative;
+  &--selected {
+    background-color: #ED794A;
+    color: #FFFFFF;
+  }
+  &--small {
+    padding: 5px 16px;
+    border-radius: 19px;
+  }
+  &--large {
+    padding: 14px 30px;
+    border-radius: 28px;
+  }
+  .badge {
+    display: flex;
+    padding: 2px 4px;
+    border-radius: 8px;
+    background-color: #F44341; // 红色背景
+    color: white; // 字体颜色
+    // text-align: center;
+    letter-spacing: 0;
+    justify-content: center;
+    line-height: normal; // 垂直居中
+    font-size: 10px; // 根据需要调整字体大小
+    position: absolute; // 绝对定位
+    top: 0; // 根据需要调整位置
+    right: 3px; // 根据需要调整位置
+  }
+}

package/es/components/tab/tab.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import './index.scss';
+export interface TabProps {
+    /**
+     * 选中背景颜色
+     */
+    selectedBGColor: string;
+    /**
+     * 选中字体颜色
+     */
+    selectedFontColor: string;
+    /**
+     * 尺寸 small | large
+     */
+    size: string;
+    /**
+     * 点击事件
+     * @param e
+     */
+    onClickHandle?: (e: number[]) => void;
+    /**
+     * 未读消息数量
+     */
+    unreadCount?: number;
+}
+declare const Tab: React.FC<TabProps>;
+export default Tab;

package/es/components/tab/tab.js

@@ -0,0 +1,52 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["selectedBGColor", "selectedFontColor", "size", "onClickHandle", "unreadCount"];
+import * as React from 'react';
+import "./index.scss";
+var Tab = function Tab(_ref) {
+  var selectedBGColor = _ref.selectedBGColor,
+    selectedFontColor = _ref.selectedFontColor,
+    size = _ref.size,
+    onClickHandle = _ref.onClickHandle,
+    unreadCount = _ref.unreadCount,
+    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var tabList = [{
+    key: [0, 1],
+    label: '全部'
+  }, {
+    key: [1],
+    label: '已读'
+  }, {
+    key: [0],
+    label: '未读'
+  }];
+  var _React$useState = React.useState([0, 1]),
+    tab = _React$useState[0],
+    setTab = _React$useState[1];
+  var handleClick = function handleClick(key) {
+    console.log(key);
+    // 切换tab
+    setTab(key);
+    // 触发父组件传递的点击处理函数
+    onClickHandle && onClickHandle(key);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "tab-message"
+  }, tabList.map(function (item) {
+    return /*#__PURE__*/React.createElement("span", _extends({
+      className: "tabs__container\n         " + (tab.toString() === item.key.toString() ? 'tabs__container--selected' : '') + "\n         " + (size == 'large' ? 'tabs__container--large' : 'tabs__container--small')
+    }, otherProps, {
+      onClick: function onClick() {
+        return handleClick(item.key);
+      },
+      style: {
+        backgroundColor: tab.toString() === item.key.toString() ? selectedBGColor : '',
+        color: tab.toString() === item.key.toString() ? selectedFontColor : ''
+      }
+    }), item.label, item.key.toString() === '0' && unreadCount > 0 && /*#__PURE__*/React.createElement("span", {
+      className: "badge"
+    }, unreadCount) // 条件渲染badge
+    );
+  }));
+};
+export default Tab;

package/es/components/tab-container/index.d.ts

@@ -0,0 +1,3 @@
+import { TabContainer } from '../tab-container/tab-container';
+export type { TabContainerProps } from '../tab-container/tab-container';
+export default TabContainer;

package/es/components/tab-container/index.js

@@ -0,0 +1,2 @@
+import { TabContainer } from "../tab-container/tab-container";
+export default TabContainer;

package/es/components/tab-container/index.scss

@@ -0,0 +1,48 @@
+.fusion-ui-tab {
+    display: block;
+    background-color: #fff;
+
+    &.next-medium {
+      .next-tabs-content {
+        padding: 0;
+      }
+      
+    }
+  .next-tabs-bar {
+    border-bottom: none;
+    margin-bottom: 15px;
+    .next-tabs-nav-container {
+      .next-tabs-nav {
+        .next-tabs-tab {
+          font-size: 16px;
+          color: #666666;
+          margin-right: 13px;
+          &.active {
+            color: #333;
+            font-size: 17px;
+          }
+          &.active::before {
+            bottom: 2px;
+            border-bottom: 5px solid #E96D40;
+            z-index: 0;
+            border-radius: 2.5px;
+          }
+        }
+      }
+    }
+  }
+
+    &.next-small {
+      .next-tabs-content {
+        padding: 12px;
+      }
+    }
+  }
+.navigation {
+  z-index: 10;
+  position: relative;
+}
+
+:global(.fd-layout-p-margin) {
+  margin-top: 0 !important;
+}

package/es/components/tab-container/tab-container.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Tab } from '@alifd/next';
+import './index.scss';
+export interface TabContainerProps extends React.ComponentProps<typeof Tab> {
+    className?: string;
+}
+export declare const TabContainer: {
+    (props: TabContainerProps): JSX.Element;
+    displayName: string;
+};