@dckj-npm/dc-material 0.1.28 → 0.1.30

package/es/components/bottom-navigation/bottom-navigation.d.ts

@@ -1,15 +1,15 @@
-import * as React from 'react';
-import './index.scss';
-interface Navigation {
-    text: string;
-    icon: string;
-    selectedIcon: string;
-    pageId: string;
-}
-export interface NavigationProps {
-    itemArray: Navigation[];
-    selectedColor: string;
-    onClick?: (pageId: string) => void;
-}
-declare const Navigation: React.FC<NavigationProps>;
-export default Navigation;
+import * as React from 'react';
+import './index.scss';
+interface Navigation {
+    text: string;
+    icon: string;
+    selectedIcon: string;
+    pageId: string;
+}
+export interface NavigationProps {
+    itemArray: Navigation[];
+    selectedColor: string;
+    onClick?: (pageId: string) => void;
+}
+declare const Navigation: React.FC<NavigationProps>;
+export default Navigation;

package/es/components/bottom-navigation/index.d.ts

@@ -1,3 +1,3 @@
-import Navigation from './bottom-navigation';
-export type { NavigationProps } from './bottom-navigation';
-export default Navigation;
+import Navigation from './bottom-navigation';
+export type { NavigationProps } from './bottom-navigation';
+export default Navigation;

package/es/components/bottom-navigation/index.scss

@@ -1,23 +1,23 @@
-.navigation-panel {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 9px 0px 6px 0px;
-  width: 100%;
-  position: fixed;
-  bottom: 0;
-  background-color: #fff;
-  box-sizing: border-box;
-  z-index: 10;
-  &-item {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-    flex: 1;
-    .navigation-item-image {
-      margin-bottom: 3px;
-    }
-  }
-}
+.navigation-panel {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 9px 0px 6px 0px;
+  width: 100%;
+  position: fixed;
+  bottom: 0;
+  background-color: #fff;
+  box-sizing: border-box;
+  z-index: 10;
+  &-item {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    flex: 1;
+    .navigation-item-image {
+      margin-bottom: 3px;
+    }
+  }
+}

package/es/components/button/button.d.ts

@@ -1,14 +1,14 @@
-import * as React from 'react';
-import './index.scss';
-export interface ButtonProps {
-    /**
-     * 标签名称
-     */
-    name: string;
-    /**
-     * 标签颜色
-     */
-    color: string;
-}
-declare const Button: React.FC<ButtonProps>;
-export default Button;
+import * as React from 'react';
+import './index.scss';
+export interface ButtonProps {
+    /**
+     * 标签名称
+     */
+    name: string;
+    /**
+     * 标签颜色
+     */
+    color: string;
+}
+declare const Button: React.FC<ButtonProps>;
+export default Button;

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

@@ -1,6 +1,6 @@
-/**
- * 标签tag
- */
-import Button from './button';
-export type { ButtonProps } from './button';
-export default Button;
+/**
+ * 标签tag
+ */
+import Button from './button';
+export type { ButtonProps } from './button';
+export default Button;

package/es/components/button/index.js

@@ -1,5 +1,5 @@
-/**
- * 标签tag
+/**
+ * 标签tag
  */
 import Button from "./button";
 export default Button;

package/es/components/carousel/carousel.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import './carousel.scss';
+export interface CarouselProps {
+    /**
+     * 图片列表
+     */
+    images: string[];
+    /**
+     * 定时播放的时间
+     */
+    interval?: number;
+}
+declare const Carousel: React.FC<CarouselProps>;
+export default Carousel;

package/es/components/carousel/carousel.js

@@ -0,0 +1,75 @@
+import React, { useEffect, useState } from 'react';
+import "./carousel.scss";
+var Carousel = function Carousel(_ref) {
+  var _ref$images = _ref.images,
+    images = _ref$images === void 0 ? [] : _ref$images,
+    _ref$interval = _ref.interval,
+    interval = _ref$interval === void 0 ? 3000 : _ref$interval;
+  // 如果没有图片则返回提示
+  if (images.length === 0) {
+    return /*#__PURE__*/React.createElement("div", null);
+  }
+  // 如果只有一张图片，则直接显示
+  if (images.length === 1) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "carousel"
+    }, /*#__PURE__*/React.createElement("img", {
+      src: images[0],
+      alt: "Single slide",
+      className: "carousel-image"
+    }));
+  }
+  // 添加复制的第一张和最后一张图片以实现无缝切换
+  var extendedImages = [images[images.length - 1]].concat(images, [images[0]]);
+  // 初始显示第二张图片
+  var _useState = useState(1),
+    currentIndex = _useState[0],
+    setCurrentIndex = _useState[1];
+  // 切换到下一张图片
+  var goToNext = function goToNext() {
+    setCurrentIndex(function (prevIndex) {
+      return prevIndex + 1;
+    });
+  };
+  // 自动播放逻辑：在组件挂载时启动定时器
+  useEffect(function () {
+    var timer = setInterval(function () {
+      goToNext();
+    }, interval);
+    // 清除定时器，避免内存泄漏
+    return function () {
+      return clearInterval(timer);
+    };
+  }, [interval]);
+  useEffect(function () {
+    // 当切换到最后一张复制的图片时，设置为第二张图片
+    if (currentIndex === extendedImages.length - 1) {
+      setTimeout(function () {
+        // 跳转到第二张
+        setCurrentIndex(1);
+      }, 1000);
+    }
+  }, [currentIndex]);
+  // 计算当前显示的图像索引
+  var displayIndex = currentIndex > images.length ? currentIndex - images.length : currentIndex;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "carousel"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "carousel-track",
+    style: {
+      transform: "translateX(-" + currentIndex * 100 + "%)",
+      // 只有在平滑切换时才应用过渡
+      transition: currentIndex === 1 ? 'none' : 'transform 1s ease-in-out'
+    }
+  }, extendedImages.map(function (image, index) {
+    return /*#__PURE__*/React.createElement("img", {
+      key: index,
+      src: image,
+      alt: "Slide " + index,
+      className: "carousel-image"
+    });
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "carousel-counter"
+  }, /*#__PURE__*/React.createElement("span", null, displayIndex), /*#__PURE__*/React.createElement("span", null, "/"), /*#__PURE__*/React.createElement("span", null, images.length)));
+};
+export default Carousel;

package/es/components/carousel/carousel.scss

@@ -0,0 +1,32 @@
+.carousel {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.carousel-track {
+  display: flex;
+  width: 100%;
+  height: 100%;
+}
+
+.carousel-image {
+  min-width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+}
+
+.carousel-counter {
+  position: absolute;
+  bottom: 2px;
+  right: 2px;
+  color: white;
+  background: rgba(0, 0, 0, 0.5);
+  padding: 2px 8px;
+  border-radius: 5px;
+  font-size: 12px;
+  display: flex;
+  gap: 2px;
+}

package/es/components/colorful-button/colorful-button.d.ts

@@ -1,12 +1,12 @@
-import * as React from 'react';
-import './index.scss';
-export interface ColorfulButtonProps {
-    /**
-     * 类型
-     */
-    type?: "primary" | "secondary" | "normal";
-    color?: string;
-    style?: object;
-}
-declare const ColorfulButton: React.FC<ColorfulButtonProps>;
-export default ColorfulButton;
+import * as React from 'react';
+import './index.scss';
+export interface ColorfulButtonProps {
+    /**
+     * 类型
+     */
+    type?: "primary" | "secondary" | "normal";
+    color?: string;
+    style?: object;
+}
+declare const ColorfulButton: React.FC<ColorfulButtonProps>;
+export default ColorfulButton;

package/es/components/colorful-button/index.d.ts

@@ -1,3 +1,3 @@
-import ColorfulButton from './colorful-button';
-export type { ColorfulButtonProps } from './colorful-button';
-export default ColorfulButton;
+import ColorfulButton from './colorful-button';
+export type { ColorfulButtonProps } from './colorful-button';
+export default ColorfulButton;

package/es/components/colorful-input/colorful-input.d.ts

@@ -1,8 +1,8 @@
-import * as React from 'react';
-import './index.scss';
-export interface ColorfulInputProps {
-    color?: string;
-    style?: object;
-}
-declare const ColorfulInput: React.FC<ColorfulInputProps>;
-export default ColorfulInput;
+import * as React from 'react';
+import './index.scss';
+export interface ColorfulInputProps {
+    color?: string;
+    style?: object;
+}
+declare const ColorfulInput: React.FC<ColorfulInputProps>;
+export default ColorfulInput;

package/es/components/colorful-input/index.d.ts

@@ -1,3 +1,3 @@
-import ColorfulInput from './colorful-input';
-export type { ColorfulInputProps } from './colorful-input';
-export default ColorfulInput;
+import ColorfulInput from './colorful-input';
+export type { ColorfulInputProps } from './colorful-input';
+export default ColorfulInput;

package/es/components/goods-card-list/goods-card-list.d.ts

@@ -0,0 +1,5 @@
+import type { GoodsCardListProps } from './types';
+import React from 'react';
+import './goods-card-list.scss';
+declare const GoodsCardList: React.FC<GoodsCardListProps>;
+export default GoodsCardList;

package/es/components/goods-card-list/goods-card-list.js

@@ -0,0 +1,139 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["dataList", "maxSales", "onClick"];
+import React, { useEffect, useState } from 'react';
+import { debounce } from "../../utils/debounce";
+import Carousel from "../carousel/carousel";
+import "./goods-card-list.scss";
+var GoodsCardList = function GoodsCardList(_ref) {
+  var _ref$dataList = _ref.dataList,
+    dataList = _ref$dataList === void 0 ? [] : _ref$dataList,
+    _ref$maxSales = _ref.maxSales,
+    maxSales = _ref$maxSales === void 0 ? 1000 : _ref$maxSales,
+    _ref$onClick = _ref.onClick,
+    _onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
+    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var _otherProps = otherProps || {};
+  var _useState = useState([]),
+    positions = _useState[0],
+    setPositions = _useState[1];
+  var _useState2 = useState(0),
+    columnWidth = _useState2[0],
+    setColumnWidth = _useState2[1];
+  var _useState3 = useState(0),
+    maxContainerHeight = _useState3[0],
+    setMaxContainerHeight = _useState3[1];
+  useEffect(function () {
+    var updateLayout = function updateLayout() {
+      var container = document.querySelector('.waterfall-container');
+      if (container) {
+        var itemElements = document.querySelectorAll('.waterfall-item');
+        // 横向间距
+        var horizontalGap = 12;
+        // 纵向间距
+        var verticalGap = 10;
+        var containerWidth = container.offsetWidth;
+        // 每列宽度为容器宽度的一半减去间距
+        var calculatedColumnWidth = (containerWidth - horizontalGap) / 2;
+        setColumnWidth(calculatedColumnWidth);
+        // 两列布局
+        var columnHeights = Array.from({
+          length: 2
+        }).fill(0);
+        var newPositions = [];
+        // 循环计算所有的子元素的信息
+        itemElements.forEach(function (item) {
+          var _item$getBoundingClie = item.getBoundingClientRect(),
+            height = _item$getBoundingClie.height;
+          // 找到最短的那一列
+          var minHeight = Math.min.apply(Math, columnHeights);
+          // 获取该列的索引
+          var columnIndex = columnHeights.indexOf(minHeight);
+          var left = columnIndex * (calculatedColumnWidth + horizontalGap);
+          var top = columnHeights[columnIndex];
+          // 存储元素的定位
+          newPositions.push({
+            left: left,
+            top: top
+          });
+          // 更新该列的高度
+          columnHeights[columnIndex] += height + verticalGap;
+        });
+        // 更新位置
+        setPositions(newPositions);
+        setMaxContainerHeight(Math.max.apply(Math, columnHeights));
+      }
+    };
+    var debouncedUpdateLayout = dataList.length < 15 ? updateLayout : debounce(updateLayout, 200);
+    // 图片加载完成后更新布局
+    var handleImageLoad = function handleImageLoad() {
+      debouncedUpdateLayout();
+    };
+    // 初始化布局
+    debouncedUpdateLayout();
+    // 监听图片加载事件，以确保所有图片都加载完后再更新布局
+    var images = document.querySelectorAll('.waterfall-container img');
+    images.forEach(function (img) {
+      // 如果图片已经加载完成（缓存中加载），则立即更新布局
+      if (img.complete) {
+        handleImageLoad();
+      } else {
+        // 如果图片未加载完成，监听加载事件
+        img.addEventListener('load', handleImageLoad);
+      }
+    });
+
+    // 窗口变化时更新布局
+    window.addEventListener('resize', debouncedUpdateLayout);
+    return function () {
+      // 清理事件监听
+      window.removeEventListener('resize', debouncedUpdateLayout);
+      images.forEach(function (img) {
+        return img.removeEventListener('load', handleImageLoad);
+      });
+    };
+  },
+  // 当 dataList 变化时重新计算
+  [dataList]);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: "card-list-goods__container waterfall-container",
+    style: {
+      height: maxContainerHeight + 20 + "px"
+    }
+  }, _otherProps), dataList.map(function (item, index) {
+    var _positions$index, _positions$index2;
+    return /*#__PURE__*/React.createElement("div", {
+      key: item.key,
+      className: "card-list-goods__item waterfall-item",
+      onClick: function onClick() {
+        return _onClick(item);
+      },
+      style: {
+        left: ((_positions$index = positions[index]) === null || _positions$index === void 0 ? void 0 : _positions$index.left) + "px",
+        top: ((_positions$index2 = positions[index]) === null || _positions$index2 === void 0 ? void 0 : _positions$index2.top) + "px",
+        width: columnWidth + "px"
+      }
+    }, item.imageList && item.imageList.length > 0 && /*#__PURE__*/React.createElement("div", {
+      className: "card-list-goods__image"
+    }, /*#__PURE__*/React.createElement(Carousel, {
+      images: item.imageList,
+      interval: 3000
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "card-list-goods__content"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "card-list-goods__title"
+    }, item.title), /*#__PURE__*/React.createElement("div", {
+      className: "card-list-goods__desc"
+    }, item.desc), /*#__PURE__*/React.createElement("div", {
+      className: "card-list-goods__bottom"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "card-list-goods__unit"
+    }, "\uFFE5"), /*#__PURE__*/React.createElement("div", {
+      className: "card-list-goods__price"
+    }, item.price), /*#__PURE__*/React.createElement("div", {
+      className: "card-list-goods__sales"
+    }, "\u5DF2\u552E", item.sales > maxSales ? maxSales + "+" : item.sales))));
+  }));
+};
+GoodsCardList.displayName = 'GoodsCardList';
+export default GoodsCardList;

package/es/components/goods-card-list/goods-card-list.scss

@@ -0,0 +1,93 @@
+.card-list-goods__container {
+  position: relative;
+  width: 100%;
+
+  & > .card-list-goods__item {
+    position: absolute;
+    box-sizing: border-box;
+    transition: top 0.35s ease, left 0.35s ease, width 0.35s ease;
+    overflow: hidden;
+    border-radius: 8px;
+    box-shadow: 0 3px 9px 1px rgba(204,204,204,0.35);
+
+    & > .card-list-goods__image {
+      height: 200px;
+      width: 100%;
+      overflow: hidden;
+      display: flex;
+
+      & > img {
+        height: 100%;
+        width: 100%;
+        object-fit: cover;
+        object-position: center;
+      }
+    }
+
+    & > .card-list-goods__content {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      padding: 0.5rem;
+
+      .card-list-goods__title {
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        line-clamp: 2;
+        margin-top: 0.25rem;
+        margin-bottom: 0.25rem;
+        font-size: 14px;
+        font-weight: 700;
+      }
+
+      .card-list-goods__desc {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        line-clamp: 2;
+        margin-top: 0.25rem;
+        margin-bottom: 0.25rem;
+        font-size: 12px;
+        color: #333333;
+      }
+
+      .card-list-goods__bottom {
+        margin-top: 0.25rem;
+        margin-bottom: 0.25rem;
+        display: flex;
+        align-items: baseline;
+
+        .card-list-goods__unit {
+          font-size: 12px;
+          color: #F57D51;
+          font-weight: 700;
+          line-height: 1;
+        }
+
+        .card-list-goods__price {
+          font-size: 17px;
+          color: #F57D51;
+          font-weight: 700;
+          line-height: 1;
+        }
+
+        .card-list-goods__sales {
+          margin-left: 0.5rem;
+          margin-right: 0.5rem;
+          font-size: 12px;
+          color: #666666;
+          line-height: 1;
+        }
+
+      }
+
+    }
+
+  }
+
+}
+
+
+

package/es/components/goods-card-list/index.d.ts

@@ -0,0 +1,3 @@
+import GoodsCardList from './goods-card-list';
+export type { GoodsCardListItemProps, GoodsCardListProps } from './types';
+export { GoodsCardList };

package/es/components/goods-card-list/index.js

@@ -0,0 +1,2 @@
+import GoodsCardList from "./goods-card-list";
+export { GoodsCardList };

package/es/components/goods-card-list/types.d.ts

@@ -0,0 +1,41 @@
+export interface GoodsCardListProps {
+    /**
+     * 卡片列表数据
+     */
+    dataList: GoodsCardListItemProps[];
+    /**
+     * 最大销量
+     */
+    maxSales?: number;
+    /**
+     * 点击事件
+     * @param item
+     */
+    onClick?: (item: GoodsCardListItemProps) => void;
+}
+export interface GoodsCardListItemProps {
+    /**
+     * 唯一标识
+     */
+    key: string;
+    /**
+     * 缩略图列表
+     */
+    imageList: string[];
+    /**
+     * 标题
+     */
+    title: string;
+    /**
+     * 简介
+     */
+    desc: string;
+    /**
+     * 价格
+     */
+    price: string;
+    /**
+     * 销量
+     */
+    sales: number;
+}

package/es/components/goods-card-list/types.js

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

package/es/components/grid-nav/grid-nav.d.ts

@@ -1,13 +1,13 @@
-import * as React from 'react';
-export interface GridNavProps {
-    dataSourceSetting: [];
-    columns: number;
-    iconSize: string;
-    fontWeight: string;
-    fontSize: number;
-    fontColor: string;
-    lineHeight: string;
-    lineNum: number;
-}
-declare const GridNav: React.ForwardRefExoticComponent<GridNavProps & React.RefAttributes<any>>;
-export default GridNav;
+import * as React from 'react';
+export interface GridNavProps {
+    dataSourceSetting: [];
+    columns: number;
+    iconSize: string;
+    fontWeight: string;
+    fontSize: number;
+    fontColor: string;
+    lineHeight: string;
+    lineNum: number;
+}
+declare const GridNav: React.ForwardRefExoticComponent<GridNavProps & React.RefAttributes<any>>;
+export default GridNav;

package/es/components/grid-nav/index.d.ts

@@ -1,3 +1,3 @@
-import GridNav from "./grid-nav";
-export type { GridNavProps } from './grid-nav';
-export default GridNav;
+import GridNav from "./grid-nav";
+export type { GridNavProps } from './grid-nav';
+export default GridNav;